/* =============================================================================
   Recuperación de contraseña - rediseño 2026
   -----------------------------------------------------------------------------
   La usan resources/views/auth/passwords/email.blade.php (¿Has olvidado tu
   contraseña?) y resources/views/auth/passwords/resetPassword.blade.php
   (establecer nueva contraseña). Al editar, subir el ?v= del <link> en ambas.

   DEPENDE de login.css: reutiliza sus tokens (--login-*) y sus componentes
   (.login-card, .login-field, .login-input, .login-submit, .login-alert,
   .login-link, .login-captcha, el fondo/decoración de .login-page...). Debe
   enlazarse DESPUÉS de login.css. Aquí solo va lo específico de estas
   pantallas: layout de una sola columna centrada y un par de extras.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Layout de una sola columna: tarjeta centrada dentro de .login-page.
   El login usa .login-page__inner (dos columnas); aquí basta con centrar el
   .login-panel vertical y horizontalmente.
   -------------------------------------------------------------------------- */
.login-auth {
    position: relative;
    /* por encima de la decoración de .login-page (::before/::after, z-index:0) */
    z-index: 1;
    /* 96px = padding vertical de .login-page (24+72) para no forzar scroll */
    min-height: calc(100vh - 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 24px;
}

@supports (min-height: 100dvh) {
    .login-auth {
        min-height: calc(100dvh - 96px);
    }
}

/* -----------------------------------------------------------------------------
   Anular el estirado de la card del login de dos columnas.

   En >=992px, login.css estira .login-card (flex:1 + min-height:min(100%,900px))
   y le pone align-self:stretch al panel para que la card iguale la altura del
   hero, además de repartir el hueco sobrante con margin-top:auto en el badge.
   En esta vista de una sola columna eso deja una card gigante con el contenido
   descolgado y mucho hueco vacío arriba. Aquí la card debe ajustarse a su
   contenido y dejar que .login-auth la centre (compacta, tipo cuadro).

   Mayor especificidad (.login-auth ...) para ganar a las reglas del @media de
   login.css sin depender del orden de carga. Solo se listan las propiedades a
   revertir; el resto (padding, radios, sombra...) se conserva del login.
   -------------------------------------------------------------------------- */
.login-auth .login-panel {
    /* Ancho compacto y fijo en todos los breakpoints (login usa min(610px,37vw)
       en escritorio). Se centra por el justify-content de .login-auth. */
    max-width: 440px;
    flex: none;
    align-self: auto;
    display: block;
}

.login-auth .login-card {
    /* Sin estirar: alto según contenido. */
    flex: none;
    min-height: 0;
}

/* El badge (y la regla, si la hubiera) recuperan su margen normal: sin el
   margin-top:auto que el login usa para empujarlos al repartir el hueco. */
.login-auth .login-card > .login-card__badge,
.login-auth .login-card > .login-rule {
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   Icono dentro del badge de 80px. En el login el badge lleva una imagen de
   marca recortada; aquí lleva un icono SVG (candado), que se agranda y colorea.
   -------------------------------------------------------------------------- */
.login-card__badge .login-icon {
    width: 34px;
    height: 34px;
    color: var(--login-blue);
}

/* -----------------------------------------------------------------------------
   Texto de ayuda / requisitos de contraseña, bajo el título.
   -------------------------------------------------------------------------- */
.login-hint {
    margin: -4px 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--login-grey);
    text-align: center;
}

/* -----------------------------------------------------------------------------
   Enlace secundario "Volver" centrado (el login lo alinea a la derecha).
   -------------------------------------------------------------------------- */
.login-options--center {
    justify-content: center;
}

/* -----------------------------------------------------------------------------
   Banners de estado de resetPassword. Ocultos hasta que el JS añade
   .is-visible. Clase propia .reset-alert en vez de [hidden] porque
   .login-alert{display:flex} anularía a [hidden]{display:none} por igual
   especificidad y orden de cascada.
   -------------------------------------------------------------------------- */
.reset-alert {
    display: none;
}

.reset-alert.is-visible {
    display: flex;
}

/* Variante "ok" (éxito) de .login-alert, con los verdes del status del login. */
.login-alert--ok {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* -----------------------------------------------------------------------------
   #recuperarPass es un <a> con estilo de botón (.login-submit): el JS necesita
   el elemento por id, así que se conserva como enlace. Se anula el subrayado y
   el color de enlace para que se vea como el botón azul del login.
   -------------------------------------------------------------------------- */
a.login-submit,
a.login-submit:hover,
a.login-submit:focus {
    color: var(--login-white);
    text-decoration: none;
}

/* -----------------------------------------------------------------------------
   #volver: se conserva oculto como en el diseño anterior (se llega a esta vista
   desde el enlace del email; la vuelta la resuelve el redirect al terminar).
   Se restiliza como .login-link por si se decide mostrarlo en el futuro.
   -------------------------------------------------------------------------- */
#volver {
    display: none;
}