/* ============================================================
 * public/assets/admin/css/auth.css
 *
 * Estilos de los FORMULARIOS de las pantallas de autenticación: login,
 * magic-link, 2FA, force-password y el alta del Owner (signup). La marca y el
 * marco (shell, foto, isotipo, tarjeta, pie) viven en
 * frontend/shared/css/auth-brand.css, compartida con la SPA del Owner, y
 * ninguna regla de acá puede tocarlos (UI04, addendum 2026-10-13). Los carga
 * layouts/login.php DESPUÉS de bootstrap.min.css, para que .btn-login y los
 * .alert-* ganen la cascada.
 *
 * Paleta monocromática shadcn/ui (escala zinc), dark fijo: el login no
 * respeta el toggle light/dark del resto del admin (docs/adr/UI04 §1).
 *
 * Hasta 2026-10-12 vivía inline en partials/auth-styles.php; pasó a archivo
 * para que lleve ?v= (HTTP02) y lo pueda precachear el service worker
 * (UI04, addendum 2026-10-12).
 * ============================================================ */

/* ============================================================
 * Auth Layout — paleta monocromática shadcn/ui, dark fijo
 * Aplica a vistas que extienden layouts/login.
 * ============================================================ */

:root {
    /* Tonales muted para alerts (success/danger/info/warning) sobre fondo
       casi negro — bg semitransparente del color + texto saturado claro,
       mismo patrón que [data-bs-theme="dark"] resuelve en style.css. */
    --auth-success-bg:     rgba(34, 197, 94, .12);
    --auth-success-border: rgba(34, 197, 94, .30);
    --auth-success-text:   #4ade80;

    --auth-danger-bg:      rgba(239, 68, 68, .12);
    --auth-danger-border:  rgba(239, 68, 68, .30);
    --auth-danger-text:    #f87171;

    --auth-warning-bg:     rgba(234, 179, 8, .12);
    --auth-warning-border: rgba(234, 179, 8, .30);
    --auth-warning-text:   #facc15;

    --auth-info-bg:        rgba(161, 161, 170, .12);
    --auth-info-border:    rgba(161, 161, 170, .30);
    --auth-info-text:      #d4d4d8;
}

/* 100dvh y no 100vh: en Chrome de Android 100vh es el alto CON la barra de
   URL escondida, así que con la barra visible el body sobraba ~56px y la
   pantalla scrolleaba aunque el contenido entrara (Moto G9, 2026-10-12).
   --auth-vh (core/auth-viewport.js): con la app instalada, Chrome no vuelve a
   resolver 100dvh tras cerrar el teclado y sobraba una franja al pie (2026-10-27). */
body.admin-guest,
body.admin-logged-in {
    background: var(--auth-zinc-950);
    min-height: 100vh;
    min-height: var(--auth-vh, 100dvh);
}

/* Instalado como app y apaisado (docs/adr/PWA03): el formulario no se mete debajo del notch
   del costado. Arriba no hace falta: la portada es oscura y la marca va centrada en ella; el pie
   ya respeta la barra de gestos (auth-brand.css). En lg la foto ocupa el costado. */
@media (max-width: 991.98px) {
    .mdl-auth-shell {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

.mdl-auth-help {
    /* Mismo degradado zinc que el símbolo K del login de la SPA owner-admin —
       consistencia entre las dos pantallas de entrada. */
    background: linear-gradient(145deg, var(--auth-zinc-700), var(--auth-zinc-900) 65%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Honeypot de los formularios públicos (docs/adr/HTTP05, FormGuard::field()). Fuera de pantalla y
   no con display:none: muchos bots saltean lo que está oculto de esa forma. Sin foco ni lectores
   de pantalla: el contenedor lleva aria-hidden y el input tabindex="-1". */
.mdl-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mdl-auth-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.mdl-auth-brand h1,
.mdl-auth-brand h2 {
    color: var(--auth-zinc-50);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

.mdl-auth-brand p {
    color: var(--auth-zinc-400);
    line-height: 1.3;
    margin: .2rem 0 0;
}

/* Botón principal de auth. 52px de alto (zona de pulgar); el font-size
   pisa el de .btn-lg, que en este botón ancho se veía gritón. Flex como
   .mdl-auth-alt: el ícono centrado con el texto (inline-block lo dejaba
   2,5 px abajo) y separado por el gap, sin me-* en la vista. */
.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--auth-zinc-50);
    border: 1px solid var(--auth-zinc-50);
    color: var(--auth-zinc-900);
    min-height: 3.25rem;
    margin-top: clamp(.25rem, 1vh, .5rem);
    padding: 0.75rem 1.25rem;
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
    border-radius: .75rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-login:hover,
.btn-login:focus {
    background: var(--auth-zinc-200);
    border-color: var(--auth-zinc-200);
    color: var(--auth-zinc-900);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5);
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    color: var(--auth-zinc-900);
}

.btn-login:disabled {
    background: var(--auth-zinc-600);
    border-color: var(--auth-zinc-600);
    color: var(--auth-zinc-400);
    opacity: 0.7;
    transform: none;
    cursor: not-allowed;
}

/* Spinner del botón de login/magic-link durante el submit (core/login.js).
   No usar .spinner de style.css: ese archivo no lo carga esta página, y
   aunque lo cargara es un círculo de 50px pensado para standalone, no para
   vivir inline dentro de un botón — deformaría el texto. Mismo patrón (1em,
   ::after) que .htmx-request::after de ui-kit.css, portado acá porque login
   tampoco carga ese archivo. La separación del texto la da el gap de .btn-login. */
.mdl-auth-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mdl-auth-spin 0.6s linear infinite;
}

@keyframes mdl-auth-spin {
    to { transform: rotate(360deg); }
}

/* Labels e inputs — Bootstrap ya resuelve el grueso vía data-bs-theme="dark".
   Controles de 48px (zona de pulgar) con 16px de letra (Safari de iOS no
   hace zoom al enfocar) y labels sin ícono: con el ícono, el label se leía
   como ruido. Hasta 2026-10-12 medían ~38px y se veían apretados. */
.mdl-auth-panel .form-label {
    margin-bottom: .45rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--auth-zinc-300);
}

/* Ícono del sprite que escala con su font-size (fs-N del encabezado). Copia de la de
   ui-kit.css, que este layout no carga (docs/adr/UI03 · T2). */
svg.mdl-icon-em {
    width: 1em;
    height: 1em;
}

.mdl-auth-panel form > .mb-3,
.mdl-auth-panel form > .mb-4 {
    margin-bottom: clamp(1rem, 2.6vh, 1.5rem) !important;
}

.mdl-auth-panel .form-control {
    min-height: 3rem;
    padding: .7rem 1rem;
    border-radius: .7rem;
    background-color: rgba(9, 9, 11, .55);
    border-color: var(--auth-zinc-800);
}

.mdl-auth-panel .form-control:not(.form-control-lg) {
    font-size: 1rem;
}

.mdl-auth-panel .form-control::placeholder {
    color: var(--auth-zinc-500);
}

.mdl-auth-panel .form-control:focus {
    border-color: var(--auth-zinc-500);
    box-shadow: 0 0 0 0.2rem rgba(212, 212, 216, 0.15);
}

.mdl-auth-panel .js-pw-reveal {
    width: 3.25rem;
    justify-content: center;
    border-radius: .7rem;
    border-color: var(--auth-zinc-800);
    background-color: rgba(9, 9, 11, .55);
    color: var(--auth-zinc-400);
}

.mdl-auth-panel .form-text {
    color: var(--auth-zinc-500);
}

.mdl-auth-panel .invalid-feedback {
    margin-top: .3rem;
    font-size: .8rem;
}

/* «o» entre el botón principal y el segundo camino de entrada. */
.mdl-auth-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: clamp(.85rem, 2.2vh, 1.25rem) 0;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--auth-zinc-500);
}

.mdl-auth-or::before,
.mdl-auth-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--auth-zinc-800);
}

/* Segundo camino de entrada (acceso sin contraseña): botón de contorno, del
   mismo alto que el principal pero sin competir con él. */
.mdl-auth-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--auth-zinc-700);
    border-radius: .75rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--auth-zinc-200);
    transition: background-color .15s ease, border-color .15s ease;
}

.mdl-auth-alt:hover,
.mdl-auth-alt:focus-visible {
    background-color: rgba(255, 255, 255, .04);
    border-color: var(--auth-zinc-600);
    color: var(--auth-zinc-50);
}

/* Label de contraseña con «¿Olvidaste tu contraseña?» a la derecha (docs/adr/AUTH02):
   misma línea que el label para no sumar alto (UI04, sin scroll). */
.mdl-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.mdl-auth-forgot {
    margin-bottom: .45rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--auth-zinc-400);
    text-decoration: none;
    white-space: nowrap;
}

.mdl-auth-forgot:hover,
.mdl-auth-forgot:focus-visible {
    color: var(--auth-zinc-50);
    text-decoration: underline;
}

/* Alturas bajas (Moto G9 con la barra de URL, notebooks de 768): el último
   ajuste antes de dejar que aparezca el scroll, que sigue permitido como
   salida en un caso extremo — nunca cortar contenido con height fijo. */
@media (max-height: 700px) {
    .mdl-auth-panel form > .mb-3,
    .mdl-auth-panel form > .mb-4 {
        margin-bottom: .85rem !important;
    }

    .mdl-auth-or {
        margin: .7rem 0;
    }
}

/* ============================================================
 * Override de Bootstrap alerts (scope: panel de auth)
 * ============================================================ */

.mdl-auth-panel .alert {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Flexbox para centrar verticalmente el btn-close (sobreescribe position:absolute de Bootstrap) */
.mdl-auth-panel .alert-dismissible {
    display: flex;
    align-items: center;
    padding-right: 1rem;
}

.mdl-auth-panel .alert-dismissible .btn-close {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
    background-size: 0.75rem;
    filter: invert(1) grayscale(100%) brightness(200%);
}

.mdl-auth-panel .alert-success {
    background-color: var(--auth-success-bg);
    border-color: var(--auth-success-border);
    color: var(--auth-success-text);
}

.mdl-auth-panel .alert-danger {
    background-color: var(--auth-danger-bg);
    border-color: var(--auth-danger-border);
    color: var(--auth-danger-text);
}

.mdl-auth-panel .alert-warning {
    background-color: var(--auth-warning-bg);
    border-color: var(--auth-warning-border);
    color: var(--auth-warning-text);
}

.mdl-auth-panel .alert-info {
    background-color: var(--auth-info-bg);
    border-color: var(--auth-info-border);
    color: var(--auth-info-text);
}

.mdl-auth-panel .alert .btn-close {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.mdl-auth-panel .alert .btn-close:hover {
    opacity: 1;
}


/* Ícono de éxito grande en pantallas de una sola acción, ej.
   owner/signup/verified.php (docs/adr/O18). El ícono SVG del catálogo
   (_icon.php) trae width/height fijos en 16px — a diferencia de un
   <i class="bi">, no escala con font-size del contenedor padre, así que sin
   esta clase queda un glifo diminuto perdido en el centro de la pantalla. */
.signup-success-icon,
.signup-error-icon {
    width: 3rem;
    height: 3rem;
}

/* Ícono circular grande de "pantalla de espera" (owner/signup/sent.php,
   revisá tu correo) — misma técnica de glow en capas que
   .mdl-webmail-link-icon de más abajo, pero estático (no hay hover: esta
   pantalla no es interactiva) y a mayor escala, como pieza central en
   vez de acompañar un label. */
.signup-pending-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--auth-zinc-800) 0%, var(--auth-zinc-900) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 0 32px -6px rgba(255, 255, 255, .3);
    color: var(--auth-zinc-100);
}

.signup-pending-icon svg {
    width: 2rem;
    height: 2rem;
}

/* ============================================================
 * Accesos directos a webmail — pantalla "revisá tu correo"
 * (owner/signup/sent.php, admin/auth/magic-link.php).
 * Chips circulares con glow suave, mismo criterio visual que el
 * resto del layout de auth (paleta zinc, dark fijo). Existe una
 * variante teal (acento de marca #39d5c5, misma técnica de la
 * landing) validada en public/dev/webmail-links-smoke.html y
 * documentada como candidata a un futuro tema "Dark-Kuntay" — ver
 * TODO.md § 🔵 Mejoras pedidas — no aplicada acá a propósito,
 * decisión explícita del usuario 2026-09-06.
 * ============================================================ */

.mdl-webmail-links {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin: 1.75rem 0;
}

.mdl-webmail-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--auth-zinc-400);
    font-size: .75rem;
    transition: color .2s ease;
}

.mdl-webmail-link:hover,
.mdl-webmail-link:focus {
    color: var(--auth-zinc-100);
}

.mdl-webmail-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--auth-zinc-800) 0%, var(--auth-zinc-900) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease;
}

.mdl-webmail-link-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.mdl-webmail-link:hover .mdl-webmail-link-icon,
.mdl-webmail-link:focus .mdl-webmail-link-icon {
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 0 22px -4px rgba(255, 255, 255, .35);
    transform: translateY(-2px);
}

/* ============================================================
 * Celular (<sm) — la portada y la hoja inferior son de auth-brand.css; acá
 * solo lo que cambia en los formularios dentro de la hoja.
 * ============================================================ */
@media (max-width: 575.98px) {
    /* En pantallas bajas este cuadro (alta del Owner) empuja el contenido
       y aparece scroll. */
    .mdl-auth-help {
        display: none;
    }

    .mdl-auth-panel .form-control,
    .mdl-auth-panel .js-pw-reveal {
        background-color: var(--auth-zinc-950);
    }
}

/* ============================================================
 * Pantallas con cabecera propia (2FA, contraseña obligatoria, magic link):
 * dicen dónde está el usuario con su .mdl-auth-brand (ícono + título +
 * bajada) dentro de la tarjeta. Cuando falta alto, cede ESE bloque —margen
 * más chico y sin el ícono redondo—, nunca la marca de arriba. Hasta
 * 2026-10-13 achicaban el isotipo a 40–44px y la marca se veía distinta en
 * cada pantalla (UI04, addendum 2026-10-13).
 * ============================================================ */
.mdl-auth-brand {
    margin-bottom: clamp(1rem, 2.6vh, 1.75rem);
}

.mdl-auth-brand h1,
.mdl-auth-brand h2 {
    font-size: clamp(1.2rem, 3vh, 1.5rem);
}

/* Cede con poco alto (notebooks de 768, celulares bajos) y siempre en
   celular: ahí el ícono redondo repite lo que la portada dice justo arriba
   (~60px de la hoja) y el título entra en un renglón («Cambio de contraseña
   requerido» se partía en dos). */
@media (max-height: 760px), (max-width: 575.98px) {
    .mdl-auth-brand {
        margin-bottom: .85rem;
    }

    .mdl-auth-brand > .d-flex:first-child {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .mdl-auth-brand h1,
    .mdl-auth-brand h2 {
        font-size: 1.2rem;
    }
}