:root {
    --jiapaz-blue: #0A3C7D;
    --card-width: 1000px;
    --card-height: 700px;
}

/* --- Estilos para la Barra de Navegación (Navbar) --- */
.header-nav {
    /* Define el área del navbar. Usa un ancho máximo para que se vea contenido */
    width: var(--card-width); /* Usamos el mismo ancho de la tarjeta para alineación */
    margin-bottom: 20px; /* Espacio entre el navbar y la tarjeta de login */
}

.nav-content {
    /* Usa Flexbox para alinear el botón de sitio web a la izquierda y las tiendas a la derecha */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0; /* Espaciado interno */
}

/* Estilos para el botón de Sitio Web Oficial */
.btn-main-site {
    background-color: var(--jiapaz-blue);
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s;
}

.btn-main-site:hover {
    background-color: #082d5e;
}

/* Estilos para el bloque de enlaces a las tiendas de apps */
.app-store-links {
    display: flex;
    gap: 15px; /* Espacio entre el enlace de App Store y Google Play */
}

.app-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none; /* Asegúrate de que el enlace no tenga subrayado */
    color: #333; /* Color de texto predeterminado */
}

.app-link p {
    font-size: 0.7em;
    margin: 0;
    line-height: 1.2;
}

.app-link .app-logo {
    height: 50px;
    width: auto;
    margin-top: 2px;
}

body {
display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f7f6;
    font-family: Arial, sans-serif;
    background-image: url('/assets/img/1fondo_jiapaz.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.logo-main{
    height: 150px;
}

.login-card-container {
    display: flex;
    width: var(--card-width);
    height: var(--card-height);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    overflow: hidden;
}

/* --- Sección Izquierda (Branding) --- */
.card-branding-section {
    flex: 1; /* Ocupa la mitad del espacio */
    background-color: var(--jiapaz-blue);
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Distribuye el contenido verticalmente */
    text-align: center;
}

.card-branding-section img {
    /* Ajusta el logo */
    height: auto;
    margin: 0 auto 10px;
}

.card-branding-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.card-branding-section p {
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 40px;
}

.card-branding-section a {
    color: white;
    opacity: 0.7;
    text-decoration: none;
    font-size: 0.9em;
    margin-top: auto; /* Empuja el enlace hacia abajo */
}

/* --- Sección Derecha (Formulario) --- */
.card-form-section {
    flex: 1; /* Ocupa la otra mitad */
    background-color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.card-form-section h3 {
    color: #333;
    font-size: 1.8em;
    margin-bottom: 30px;
}

.card-form-section label {
    font-weight: bold;
    color: #555;
}

.card-form-section input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Asegura que el padding no cambie el ancho total */
}

.card-form-section button {
    width: 100%;
    padding: 15px;
    background-color: var(--jiapaz-blue);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.card-form-section button:hover {
    background-color: #082d5e;
}

.links-adicionales {
    margin-top: auto; /* Empuja el bloque hacia abajo */
    padding-top: 20px;
    text-align: center;
    font-size: 0.9em;
}

.links-adicionales a {
    color: var(--jiapaz-blue);
    text-decoration: none;
    padding: 0 5px;
}

.links-adicionales span {
    color: #ccc;
}

    #loader {
        position: fixed;
        inset: 0;
        background: linear-gradient(135deg, #004e92, #000428);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 9999;
        overflow: hidden;
        animation: fadeOut 1s 2s forwards;
    }

    #loader .drop {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: dropFall 1.2s ease-out forwards;
    }

    .logo-loader {
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    }

    #loader .drop img {
        width: 100%;
        height: auto;
        border-radius: 50%;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
        animation: glowPulse 1.2s ease-in-out;
    }

    .logo-text {
        opacity: 0;
        animation: showLogo 0.6s ease-in-out forwards;
        animation-delay: 1.2s;
    }

    /* Animación de caída con rebote */
    @keyframes dropFall {
        0% {
            transform: translateY(-200px) scale(1);
            opacity: 0;
        }

        50% {
            transform: translateY(20px) scaleY(1.4);
            opacity: 1;
        }

        70% {
            transform: translateY(-10px) scaleY(0.9);
        }

        90% {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        100% {
            transform: translateY(0) scale(0.5);
            opacity: 0;
        }
    }

    @keyframes glowPulse {

        0%,
        100% {
            box-shadow: 0 0 10px rgba(0, 183, 255, 0.3), 0 0 20px rgba(0, 183, 255, 0.2);
        }

        50% {
            box-shadow: 0 0 20px rgba(0, 183, 255, 0.6), 0 0 40px rgba(0, 183, 255, 0.4);
        }
    }

    @keyframes fadeOut {
        to {
            opacity: 0;
            visibility: hidden;
        }
    }

.form-group {
    margin-bottom: 20px;
    position: relative; /* Necesario para posicionar el icono de la contraseña */
}

.form-group label {
    display: block; /* La etiqueta ocupa su propia línea */
    font-weight: 600;
    color: #555;
    font-size: 0.95em;
}

.form-group input {
    width: 100%;
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box; /* Incluye padding en el ancho */
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus {
    border-color: var(--input-focus-color);
    box-shadow: 0 0 0 3px rgba(10, 60, 125, 0.2); /* Un "glow" suave */
    outline: none; /* Elimina el foco nativo del navegador */
}

.toggle-password {
    position: absolute;
    top: 50%; /* Posiciona verticalmente en el centro del input */
    right: 15px; /* Separación desde la derecha */
    transform: translateY(-50%); /* Ajuste fino al centro */
    cursor: pointer;
    font-size: 1.2em;
    color: #888;
    user-select: none; /* Evita que el texto sea seleccionado */
}

.toggle-password:hover {
    color: var(--jiapaz-blue);
}

.select-wrapper {
    position: relative;
    /* Ocultamos el overflow para que la flecha no se salga */
    overflow: hidden; 
    border-radius: 3px; /* Mismo radio de borde que los inputs */
    border: 1px solid var(--input-border-color); /* Mismo borde que los inputs */
}

.select-wrapper:focus-within {
    /* Efecto de foco similar a los inputs */
    border-color: var(--input-focus-color);
    box-shadow: 0 0 0 3px rgba(10, 60, 125, 0.2); 
}

.select-wrapper select {
    /* Quitamos la apariencia nativa para poder estilizar */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    width: 100%;
    padding: 12px 15px;
    font-size: 1em;
    cursor: pointer;
    box-sizing: border-box;
    background: transparent; /* Permite ver el color de fondo del wrapper */
    color: #333;
}

/* La flecha de estilo personalizada */
.select-arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none; /* Importante: permite hacer clic en el select, no en la flecha */
    color: #555;
    font-size: 0.8em;
}

/* Ajuste importante para navegadores */
/* El IE/Edge tienen problemas con 'appearance: none', forzamos una flecha blanca sobre la flecha nativa */
/* @supports (-ms-ime-align: auto) {
    .select-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px; 
        background-color: white; 
        pointer-events: none;
    }
} */

@media (max-width: 900px) {
    /* Reducimos el ancho máximo para dispositivos más pequeños */
    .login-card-container,
    .header-nav {
        width: 90%; /* Ocupa el 90% del ancho de la ventana */
        max-width: var(--card-width); /* Mantiene el límite superior */
    }
}
@media (max-width: 768px) {
    /* A. Responsividad de la Tarjeta de Login */
    .login-card-container {
        flex-direction: column; /* Apila las secciones: branding arriba, formulario abajo */
        height: auto; /* Permite que la altura crezca según el contenido */
    }

    /* Reducimos el padding en ambas secciones para ahorrar espacio vertical */
    .card-branding-section,
    .card-form-section {
        padding: 30px 20px; 
    }

    /* Ajustamos el branding (sección azul) para que se vea mejor en la parte superior */
    .card-branding-section h2 {
        font-size: 1.5em;
    }
    .card-branding-section p {
        font-size: 1em;
        margin-bottom: 20px; /* Reducimos el margen inferior */
    }
    .card-branding-section a {
        margin-top: 15px; /* Ajustamos la posición del enlace */
    }
    
    /* B. Responsividad del Navbar */
    .nav-content {
        /* En pantallas pequeñas, apilamos los enlaces del navbar */
        flex-direction: column; 
        gap: 15px;
    }

    .btn-main-site {
        width: 100%; /* Hacemos que el botón ocupe todo el ancho */
        text-align: center;
        padding: 10px 15px;
    }

    .app-store-links {
        /* Centramos los logos de las tiendas */
        justify-content: center;
        width: 100%;
    }
}

.form-row {
    display: flex; /* Habilitamos Flexbox para alinear los elementos en la fila */
    gap: 20px; /* Espacio entre las dos columnas de la fila */
}

.form-group.half-width {
    flex: 1; /* Esto hace que el elemento ocupe la mitad del espacio restante */
    min-width: 0; /* Asegura que no haya desbordamiento en flexbox */
    margin-bottom: 0; /* Removemos el margen inferior del form-group para que el form-row lo controle */
}

/* --- Responsividad para las Filas --- */
@media (max-width: 768px) {
    .form-row {
        /* En pantallas pequeñas, apilamos las columnas de nuevo */
        flex-direction: column;
        gap: 0; /* Removemos el espacio entre las columnas apiladas */
    }

    .form-group.half-width {
        /* En la vista móvil, ocupan el 100% */
        flex: none;
        width: 100%;
        margin-bottom: 25px; /* Reestablecemos el margen inferior para separarlos */
    }
}