/* ============================================================
 * frontend/shared/css/auth-brand.css
 *
 * Marca de las pantallas de entrada: el marco (shell, foto, panel, pie), el
 * bloque de marca (isotipo, título, tagline), la K de agua y la tarjeta que
 * aloja cada formulario. Fuente ÚNICA para las dos superficies que la usan:
 *
 *   - panel clásico: layouts/login.php la carga desde
 *     public/assets/shared/css/auth-brand.css (copia de `npm run sync`);
 *     auth.css queda con lo propio de los formularios;
 *   - SPA del Owner: AuthLayout.vue la importa por el alias @shared.
 *
 * Regla (UI04, addendum 2026-10-13): la marca es INVARIANTE. Para un mismo
 * tamaño de ventana mide y está en el mismo píxel en todas las pantallas y en
 * todos los estados (error, validación, éxito). Ninguna regla de esta hoja
 * puede depender del contenido de la tarjeta; lo que no entra lo resuelve el
 * contenido o el scroll, nunca achicando la marca. El smoke
 * public/dev/login-smoke.php?grid=1 lo mide pantalla por pantalla.
 *
 * Sin url(): la foto y la K de agua son <img> del markup, así cada superficie
 * da su ruta y esta hoja no depende de dónde se sirve. Y sin rem: la SPA fija
 * la raíz en 15px y el clásico en 16px, así que todo va en px (o vh/vw).
 *
 * Paleta monocromática shadcn/ui (escala zinc), dark fijo: la entrada no
 * respeta el toggle light/dark del resto del panel (docs/adr/UI04 §1).
 * ============================================================ */

:root {
    /* Escala zinc — mismos valores que --mdl-zinc-* en style.css; se repite
       acá porque las pantallas de entrada no cargan ese archivo. En :root y no
       en el shell porque el body del panel clásico también la usa. */
    --auth-zinc-50:  #fafafa;
    --auth-zinc-100: #f4f4f5;
    --auth-zinc-200: #e4e4e7;
    --auth-zinc-300: #d4d4d8;
    --auth-zinc-400: #a1a1aa;
    --auth-zinc-500: #71717a;
    --auth-zinc-600: #52525b;
    --auth-zinc-700: #3f3f46;
    --auth-zinc-800: #27272a;
    --auth-zinc-900: #18181b;
    --auth-zinc-950: #09090b;

    /* Alto de la portada de marca en celular: lo que el login deja libre
       arriba de su hoja (~400px de form en 844 de alto + ~57px de pie). La
       marca se centra en ESTA franja, no en el header, así no se corre
       cuando otra pantalla trae una hoja más alta o más baja. Calibrado con
       public/dev/login-smoke.php?grid=1 (desglose portada·hoja·pie).
       --auth-vh: alto real que publica core/auth-viewport.js; Chrome de Android
       deja 100dvh congelado tras cerrar el teclado en la app instalada. */
    --auth-cover-h: max(212px, calc(var(--auth-vh, 100dvh) - 460px));
}

.mdl-auth-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    min-height: var(--auth-vh, 100dvh);
    display: flex;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    /* Sin foto en <lg: un resplandor zinc arriba le da profundidad al fondo
       sin cargar ningún asset en el celular. */
    background: radial-gradient(120% 60% at 50% -10%, var(--auth-zinc-900) 0%, var(--auth-zinc-950) 70%);
}

/* Una pantalla que scrollea (el alta del Owner) no corre la marca medio
   scrollbar a la izquierda respecto de una que no. */
html:has(.mdl-auth-shell) {
    scrollbar-gutter: stable;
}

/* ============================================================
 * Foto (≥lg) y K de agua (<lg)
 * ============================================================ */

.mdl-auth-visual,
.mdl-auth-watermark {
    display: none;
}

/* La K de agua: el mismo SVG del isotipo, gigante, inclinado y casi
   transparente. Anclada a la pantalla, no al header: así queda en el mismo
   lugar en todas las pantallas. */
.mdl-auth-watermark {
    position: absolute;
    z-index: 0;
    max-width: none;
    pointer-events: none;
    user-select: none;
    transform: rotate(-12deg);
}

/* ============================================================
 * Panel — columna con la marca arriba, la tarjeta y el pie abajo.
 * ============================================================ */

.mdl-auth-panel {
    position: relative;
    z-index: 1;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(8px, 2vh, 24px) clamp(20px, 5vw, 40px) 0;
}

/* Resplandor tenue detrás del símbolo: el panel no es una losa plana. Va en
   un pseudo-elemento para no pintar fondo en el panel (rompería la fusión
   con la foto). */
.mdl-auth-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 288px;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .045) 0%, transparent 65%);
    pointer-events: none;
}

.mdl-auth-panel > * {
    position: relative;
}

/* Bloque de marca. El aire va atado SOLO al alto de la ventana (vh), nunca
   al contenido: en 645px útiles de una notebook de 768 o en un celular de
   640 entra el login sin scroll, y en 900+ vuelve a respirar. */
.mdl-auth-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: clamp(4px, 2.5vh, 24px);
    padding-bottom: clamp(12px, 3.5vh, 32px);
}

.mdl-auth-brandmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3.2px, .8vh, 6.4px);
}

.mdl-auth-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 8vh, 72px);
    height: clamp(48px, 8vh, 72px);
    border-radius: clamp(12px, 1.9vh, 18px);
    background: linear-gradient(145deg, var(--auth-zinc-700), var(--auth-zinc-900) 65%);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    margin-bottom: 5.6px;
}

.mdl-auth-symbol img {
    width: 52%;
    height: 52%;
}

.mdl-auth-title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(20.8px, 3.4vh, 26.4px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--auth-zinc-50);
}

.mdl-auth-tagline {
    margin: -3.2px 0 0;
    font-size: 11.2px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--auth-zinc-400);
}

/* Toma el espacio restante y centra la tarjeta (≥lg). */
.mdl-auth-panel-scroll {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

/* El form va en una tarjeta: agrupa los controles en vez de dejarlos
   flotando sobre el fondo. En <sm pasa a ser una hoja que sube desde abajo. */
.mdl-auth-panel-inner {
    width: 100%;
    max-width: 420px;
    padding: clamp(18.4px, 3vh, 32px) clamp(18.4px, 4vw, 32px);
    background: rgba(24, 24, 27, .72);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Pie: último hijo del panel, anclado al fondo por margin-top:auto. */
.mdl-auth-footnote {
    flex: 0 0 auto;
    margin: auto 0 0;
    padding: clamp(8px, 2vh, 20px) 0;
    text-align: center;
    font-size: 11.2px;
    line-height: 1.5;
    color: var(--auth-zinc-500);
}

.mdl-auth-footnote > span {
    display: block;
}

@media (max-height: 700px) {
    .mdl-auth-panel-inner {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .mdl-auth-footnote {
        padding: 6.4px 0;
    }
}

/* ============================================================
 * Desktop (≥lg) — panel de ancho acotado + foto que toma el resto.
 * Hasta 2026-10-12 el reparto era 45/55 fijo: en 1440+ el form flotaba en
 * una columna ancha y la foto se cortaba a seco. El panel mide entre 520 y
 * 680px y la foto se funde en el fondo por máscara (UI04, addendum
 * 2026-10-12). La marca queda arriba: la tarjeta crece y se come el resto.
 * ============================================================ */
@media (min-width: 992px) {
    .mdl-auth-shell {
        background: var(--auth-zinc-950);
    }

    /* La foto toma casi todo el espacio libre (flex-grow 999 contra 1 del
       panel) hasta 95vh de ancho: es un retrato 1024×1535 y más ancha que el
       alto de la ventana `cover` la recorta tanto que se pierde la escena. */
    .mdl-auth-visual {
        display: block;
        position: relative;
        flex: 999 1 0;
        min-width: 0;
        max-width: 95vh;
        overflow: hidden;
        background: linear-gradient(160deg, var(--auth-zinc-900) 0%, var(--auth-zinc-950) 65%);
        /* La costura con el form: la foto se vuelve transparente hacia la
           derecha y deja ver el fondo zinc-950, el mismo del panel. */
        -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
                mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
    }

    .mdl-auth-visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 40%;
    }

    /* Solo tono sobre la foto: un velo diagonal suave y el pie oscurecido
       para que no compita con el form. */
    .mdl-auth-visual::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            linear-gradient(100deg, rgba(9, 9, 11, .25) 0%, rgba(9, 9, 11, .55) 100%),
            linear-gradient(0deg, rgba(9, 9, 11, .55) 0%, transparent 35%);
        pointer-events: none;
    }

    .mdl-auth-panel {
        flex: 1 0 clamp(520px, 44vw, 680px);
        max-width: none;
        margin: 0;
        padding: clamp(8px, 2vh, 24px) clamp(32px, 5vw, 72px) 0;
    }

    .mdl-auth-panel-inner {
        max-width: 440px;
    }
}

/* ============================================================
 * Tablet (sm–lg) — sin foto. La marca va a una distancia fija del tope (el
 * lugar donde el login la centraba junto a su tarjeta) y la tarjeta la sigue
 * debajo; el sobrante queda abajo, antes del pie. Hasta 2026-10-13 marca y
 * tarjeta se centraban juntas y la marca se corría según el form.
 * ============================================================ */
@media (min-width: 576px) and (max-width: 991.98px) {
    .mdl-auth-header {
        padding-top: clamp(16px, calc(30vh - 130px), 192px);
    }

    .mdl-auth-panel-scroll {
        flex: 0 0 auto;
    }

    .mdl-auth-watermark {
        display: block;
        right: -30%;
        bottom: -14%;
        width: 100vw;
        max-width: 760px;
        opacity: .035;
    }
}

/* ============================================================
 * Celular (<sm) — portada de marca arriba y el form en una hoja que sube
 * desde abajo, donde llega el pulgar (look de app nativa). La portada se
 * come el alto que sobra, pero la marca se centra en la franja fija
 * --auth-cover-h: no se mueve si la hoja es más alta o más baja. Si el
 * contenido no entra, la hoja sube sobre la parte vacía de la portada hasta
 * --auth-cover-min y, pasado eso, aparece el scroll (UI04, addendum
 * 2026-10-13). Sin foto (pedido explícito): resplandor zinc
 * + la K de agua.
 * ============================================================ */
@media (max-width: 575.98px) {
    .mdl-auth-shell {
        /* Isotipo y título de la portada: los usan sus reglas y el piso de
           abajo, así el piso no se desincroniza del tamaño real. */
        --auth-symbol-size: clamp(60px, 10vh, 84px);
        --auth-title-size: clamp(24px, 4vh, 30.4px);
        /* Alto del bloque de marca: isotipo + título + tagline + separaciones. */
        --auth-brand-h: calc(var(--auth-symbol-size) + 1.2 * var(--auth-title-size) + 28px);
        /* Hasta dónde puede subir la hoja cuando el contenido no entra (un
           error, una validación): sobre la parte vacía de la portada, dejando
           20px de aire bajo el tagline. La marca no se mueve. */
        --auth-cover-min: calc(var(--auth-cover-h) / 2 + var(--auth-brand-h) / 2 + 20px);

        background:
            radial-gradient(90vw calc(var(--auth-cover-h) * .7) at 50% calc(var(--auth-cover-h) * .45), var(--auth-zinc-800) 0%, var(--auth-zinc-950) 75%) no-repeat,
            var(--auth-zinc-950);
    }

    .mdl-auth-watermark {
        display: block;
        width: 135vw;
        left: 50%;
        top: calc(var(--auth-cover-h) / 2 - 67.5vw);
        margin-left: -67.5vw;
        opacity: .05;
    }

    .mdl-auth-panel {
        max-width: none;
        padding: 0;
    }

    .mdl-auth-panel::before {
        display: none;
    }

    /* Crece hasta comerse el sobrante; con contenido alto se achica hasta
       --auth-cover-min (min-height 0 anula el mínimo automático del flex,
       que es el alto del bloque de marca) y la hoja pasa por encima de la
       parte vacía de la portada. */
    .mdl-auth-header {
        flex: 1 0 var(--auth-cover-min);
        min-height: 0;
        justify-content: flex-start;
        padding: 0 16px;
    }

    .mdl-auth-brandmark {
        flex: 0 0 auto;
        justify-content: center;
        height: var(--auth-cover-h);
        padding-top: 8px;
    }

    .mdl-auth-symbol {
        width: var(--auth-symbol-size);
        height: var(--auth-symbol-size);
        border-radius: clamp(15px, 2.4vh, 20px);
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1);
    }

    .mdl-auth-title {
        font-size: var(--auth-title-size);
    }

    .mdl-auth-panel-scroll {
        flex: 0 0 auto;
    }

    .mdl-auth-panel-inner {
        max-width: none;
        padding: clamp(20px, 3.2vh, 28px) 20px 4px;
        background: var(--auth-zinc-900);
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -18px 40px -14px rgba(0, 0, 0, .75);
    }

    /* El pie sigue el color de la hoja, así la hoja llega hasta el borde
       de abajo (y respeta la barra de gestos del sistema). */
    .mdl-auth-footnote {
        margin: 0;
        padding: 12px 16px max(12px, env(safe-area-inset-bottom));
        background: var(--auth-zinc-900);
    }
}

@media (max-width: 575.98px) and (max-height: 700px) {
    .mdl-auth-panel-inner {
        padding-top: 16px;
    }
}