/* 3. COLORES Y TIPOGRAFÍA */
:root {
    --dark-blue: #0A1C3C; 
    --card-background: #FFFFFF; 
    --green-accent: #6AD05E; 
    --blue-accent: #0C7AF2; 
    --text-dark: #333333; 
    --text-light: #f0f0f0; 
    --text-muted: #999999;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* -------------------- Estilos Generales -------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

body {
    background-color: var(--dark-blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--text-dark);
}

/* -------------------- 2. DISEÑO: Contenedor Principal (Tarjeta Web) -------------------- */
.main-container {
    display: flex;
    width: 90%;
    max-width: 1400px;
    height: 600px; /* Altura fija para el look de escritorio */
    
    /* Efecto 3D sutil (para asemejarse a la referencia) */
    transform: rotateX(5deg) rotateY(-5deg); 
    perspective: 1000px;
    
    box-shadow: 0 10px 40px var(--shadow-color);
    border-radius: 20px;
    overflow: hidden;
    margin: 20px;
}

/* -------------------- 5. FONDO: Panel Gráfico (Vista WEB) -------------------- */
.graphic-panel {
    /* **WEB BACKGROUND:** Usamos la imagen asumida para desktop */
    /* ATENCIÓN: Cambia 'image_71194a.jpg' por 'images/bus1.webp' si ya lo subiste */
    background-image: url('../images/bus.webp'); 
    background-color: var(--dark-blue);
    
    /* Configuraciones para que la imagen se vea bien en el panel */
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    
    width: 65%; 
    height: 100%;
    position: relative;
    padding: 40px;
}

.graphic-header {
    color: var(--text-light);
    text-align: left;
}

.graphic-header h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0;
}
.graphic-header .pro-text {
    color: var(--green-accent);
}
.graphic-header .subtitle {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 2px;
    margin-top: 5px;
}

/* Panel de Login (Fondo blanco a la derecha en web) */
.login-panel {
    width: 35%;
    background-color: var(--card-background);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.login-box {
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.mobile-header {
    display: none; /* Oculto en escritorio */
}

/* -------------------- Elementos del Formulario -------------------- */
.instruction-text {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: 30px;
}

.login-button {
    background-color: var(--blue-accent);
    color: var(--card-background);
    border: none;
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: 500;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.login-button:hover {
    background-color: #0A6BE0;
}

.divider {
    color: var(--text-muted);
    margin: 20px 0;
    display: flex;
    align-items: center;
    text-align: center;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ccc;
}

/* 4. OPCIONES DE SOPORTE */
.links-container {
    margin-top: 15px;
    margin-bottom: 20px;
}

.support-link {
    color: var(--blue-accent);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
}

.support-message-box {
    display: none; 
    text-align: left;
    background-color: #f7f7f7;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    border-left: 4px solid var(--green-accent);
}

.support-message-box p {
    margin: 5px 0;
    font-size: 0.9em;
}

.support-message-box a {
    color: var(--blue-accent);
    text-decoration: none;
    font-weight: 500;
}

.support-message-box i {
    margin-right: 8px;
    color: var(--green-accent);
}

.terms-message {
    margin-top: 20px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.terms-link {
    color: var(--blue-accent);
    text-decoration: none;
    font-weight: 500;
}

.powered-by-desktop {
    color: var(--text-light);
    font-size: 0.8em;
    font-weight: 300;
    margin-top: 30px;
}
.powered-by-mobile {
    display: none; /* Oculto en desktop */
}

/* -------------------- 6. RESPONSIVE DESIGN (Vista Móvil) -------------------- */
@media (max-width: 768px) {
    
    body {
        /* Adaptar el fondo y centrar el formulario */
        justify-content: flex-start; /* Centrar arriba en móvil */
        padding-top: 30px; 
    }
    
    .main-container {
        /* Quitar la transformación y hacerlo más pequeño/flotante */
        transform: none; 
        height: auto; 
        width: 90%;
        max-width: 450px;
        flex-direction: column; /* Apilar elementos verticalmente */
        border-radius: 15px;
        box-shadow: 0 5px 20px var(--shadow-color);
        margin: 0;
    }
    
    .graphic-panel {
        /* 5. FONDO: Panel Gráfico (Vista MÓVIL) */
        /* **MOBILE BACKGROUND:** Usamos la imagen asumida para mobile */
        /* ATENCIÓN: Cambia 'image_7119ff.webp' por 'bus2.webp' si ya lo subiste */
        background-image: url('../images/bus2.webp'); 
        
        width: 100%;
        height: 250px; /* Altura más corta para móvil */
        border-radius: 15px 15px 0 0;
        padding: 20px;
        background-position: center;
    }
    
    .graphic-header {
        display: none; /* Ocultar el título en el panel gráfico móvil */
    }
    
    .login-panel {
        /* Ocupa todo el ancho en la parte inferior de la tarjeta */
        width: 100%;
        padding: 20px;
    }
    
    .mobile-header {
        /* Se activa en móvil para mostrar el título en el panel blanco */
        display: block; 
        color: var(--text-dark); 
        margin-bottom: 25px;
    }
    .mobile-header h1 {
        font-size: 1.8rem;
        font-weight: 900;
    }
    .mobile-header .subtitle {
        font-size: 0.8em;
        font-weight: 400;
        letter-spacing: 1px;
    }
    
    .powered-by-desktop {
        display: none; 
    }
    .powered-by-mobile {
        display: block; 
        color: var(--text-muted);
        font-size: 0.7em;
        margin-top: 30px;
        font-weight: 300;
    }
    
    .terms-message {
        margin-top: 15px;
    }
}