/* ============================================================
   login.css — Estilos para la tarjeta de autenticación dual
   Página: login.html
   Depende de: style.css (variables CSS globales)
   Estructura de la página:
     .contenedor-auth       → fondo y centrado vertical de la tarjeta
       .tarjeta-auth        → la caja blanca principal con sombra
         .tabs-auth         → pestañas superiores (Iniciar / Registrarse)
           .tab-btn         → cada botón de pestaña
           .tab-btn.activa  → pestaña seleccionada actualmente
         .form-auth         → formulario (oculto por defecto con display:none)
         .form-auth.activo  → formulario visible (JS añade esta clase)
           .form-grupo      → bloque de label + input
           .btn-auth        → botón de envío del formulario
   ============================================================ */


/* ============================================================
   CONTENEDOR PRINCIPAL
   Ocupa el alto de la ventana y centra la tarjeta vertical
   y horizontalmente usando flexbox.
   min-height: 80vh → deja espacio para que el footer se vea
   ============================================================ */
.contenedor-auth {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 2rem 1rem;
    background-color: #f9f9f9;
}


/* ============================================================
   TARJETA CENTRAL
   Caja blanca con sombra suave que contiene todo el formulario.
   max-width: 450px → suficiente para un formulario cómodo
   overflow: hidden → evita que las esquinas redondeadas se
   "rompan" cuando los elementos internos tienen fondos de color
   ============================================================ */
.tarjeta-auth {
    background: #ffffff;
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}


/* ============================================================
   PESTAÑAS SUPERIORES
   Barra horizontal con dos botones: "Iniciar Sesión" y
   "Crear Cuenta". El fondo gris (#f1f1f1) contrasta con
   el blanco de la pestaña activa para dar sensación de
   relieve y profundidad.
   ============================================================ */
.tabs-auth {
    display: flex;
    background: #f1f1f1;
    border-bottom: 2px solid #e0e0e0;
}


/* ============================================================
   BOTÓN DE PESTAÑA (estado base)
   flex: 1 → cada botón ocupa el 50% del ancho disponible.
   Las variables CSS vienen de style.css:
     --color-texto-suave → gris para el estado inactivo
     --color-primario    → naranja Natura para activa/hover
   ============================================================ */
.tab-btn {
    flex: 1;
    padding: 1rem;
    border: none;
    background: none;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Feedback visual al pasar el cursor */
.tab-btn:hover {
    color: var(--color-primario);
    background: #eaeaea;
}


/* ============================================================
   PESTAÑA ACTIVA
   La pestaña seleccionada se vuelve blanca y muestra una
   línea de color en la parte inferior (border-bottom).
   margin-bottom: -2px → compensa el border-bottom del
   contenedor .tabs-auth para que la línea quede "pegada"
   al formulario, logrando el efecto visual de solapa unida.
   ============================================================ */
.tab-btn.activa {
    color: var(--color-primario);
    background: #ffffff;
    border-bottom: 3px solid var(--color-primario);
    margin-bottom: -2px;
}


/* ============================================================
   FORMULARIOS (estado base = oculto)
   Todos los .form-auth inician ocultos.
   La animación fadeIn se aplica cuando JS añade .activo,
   logrando que aparezca con un desliz suave hacia arriba.
   ============================================================ */
.form-auth {
    display: none;
    padding: 2.5rem 2rem;
    animation: fadeIn 0.4s ease forwards;
}

/* Solo el formulario con .activo es visible */
.form-auth.activo {
    display: block;
}

/* Título dentro del formulario (h2) */
.form-auth h2 {
    font-size: 1.6rem;
    color: var(--color-texto);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

/* Texto descriptivo debajo del h2 */
.subtitulo {
    color: var(--color-texto-suave);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}


/* ============================================================
   BOTÓN DE ENVÍO
   Ocupa todo el ancho del formulario (width: 100%).
   El color --color-primario-oscuro se aplica en :hover
   para dar feedback de que el botón está siendo presionado.
   ============================================================ */
.btn-auth {
    width: 100%;
    padding: 0.85rem;
    background-color: var(--color-primario);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.2s ease;
}

.btn-auth:hover {
    background-color: var(--color-primario-oscuro);
}


/* ============================================================
   ANIMACIÓN DE APARICIÓN
   Se usa para el cambio de formulario al hacer clic en las
   pestañas. El formulario aparece desde abajo con fade-in.
   ============================================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   GRUPOS DE CAMPO — .form-grupo
   Cada par label + input se envuelve en .form-grupo para
   mantener el espaciado controlado y la alineación vertical.
   Se reutiliza también en nosotros.css (formulario contacto).
   ============================================================ */
.form-grupo {
    display: flex;
    flex-direction: column;
    /* Label arriba, input abajo */
    gap: 0.5rem;
    /* Espacio entre label e input */
    margin-bottom: 1.25rem;
    /* Separación entre campos */
    text-align: left;
}

/* Label del campo */
.form-grupo label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-texto, #333333);
    /* Fallback por si no carga la variable */
}

/* Campo de texto */
.form-grupo input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    box-sizing: border-box;
    /* Evita que el padding desborde el ancho */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Estado de enfoque: borde naranja + brillo suave */
.form-grupo input:focus {
    border-color: var(--color-primario, #c45100);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15);
    outline: none;
    /* Reemplazamos el contorno negro del navegador */
}


/* ============================================================
   TÍTULO DE LA PÁGINA (fuera de la tarjeta)
   Aparece encima de .tarjeta-auth con el h1 de la página.
   Usa la variable --font-h1 de style.css.
   ============================================================ */
.titulo-auth {
    font-size: var(--font-h1);
    color: var(--color-texto);
    margin: 0 0 1.5rem;
    text-align: center;
}