/* ============================================================
   RECUPERAR ACCESO — Compras Tres Cantos
   Versión 1.1 · Mayo 2026
   Solo estilos especificos de esta pagina.
   Las clases globales (.btn, .mensaje, .campo-grupo) vienen de base.css.

   CAMBIOS v1.1 (refactor pre-produccion):
   - Sin cambios funcionales. Archivo revisado: no tenia duplicados
     con base.css.
   ============================================================ */

.recuperar-container {
    max-width: var(--ancho-formulario);
    margin: 60px auto;
    padding: var(--espacio-xl);
    background-color: var(--fondo-blanco);
    border-radius: var(--borde-radio-grande);
    border: 1px solid var(--borde-color);
    box-shadow: var(--sombra-suave);
}

.recuperar-container h1 {
    text-align: center;
    color: var(--texto-principal);
    margin-bottom: var(--espacio-md);
    font-size: var(--texto-xl);
    font-weight: 600;
}

.recuperar-intro {
    text-align: center;
    color: var(--texto-secundario);
    font-size: var(--texto-sm);
    line-height: 1.6;
    margin-bottom: var(--espacio-xl);
}

/* El div #recuperar-mensaje usa la clase .mensaje global, pero la
   plantilla aplica display:none inline y eso bloquea la regla
   .mensaje.visible. Forzamos display:block cuando el JS aplica
   una variante (.error, .exito, .warning). */
#recuperar-mensaje.error,
#recuperar-mensaje.exito,
#recuperar-mensaje.warning {
    display: block !important;
}

.recuperar-volver {
    text-align: center;
    margin-top: var(--espacio-lg);
    font-size: var(--texto-sm);
}

.recuperar-volver a {
    color: var(--texto-suave);
    text-decoration: none;
}

.recuperar-volver a:hover {
    color: var(--color-acento);
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .recuperar-container {
        margin: var(--espacio-xl) var(--espacio-md);
        padding: var(--espacio-lg);
    }

    .recuperar-container h1 {
        font-size: var(--texto-lg);
    }
}