/* public/login.css — pantalla de acceso. Autocontenida (no carga shell.css):
   lee los tokens del tema con un respaldo neutro (tests/css.test.php).

   Sala blanca F2 (spec 2026-09-26-panel-sala-blanca-f2 §3, Login): pantalla
   partida, con el formulario a la izquierda sobre papel y la foto de producto
   que declara el tema a la derecha. En móvil la foto queda como una franja
   encima del formulario. Sin foto en el tema, una sola columna con el
   formulario enmarcado por un filete, como antes. */
.login-body {
    --l-papel:    var(--t-papel, #ffffff);
    --l-piedra:   var(--t-piedra, #f3f4f6);
    --l-filete:   var(--t-filete, #d1d5db);
    --l-titular:  var(--t-tinta-titular, #111827);
    --l-tinta:    var(--t-tinta, #1f2937);
    --l-apagado:  var(--t-apagado, #6b7280);
    --l-accion:   var(--t-accion, #111827);
    --l-accion-t: var(--t-accion-texto, #ffffff);
    --l-critico:  var(--t-critico, #dc2626);
    --l-critico-t: var(--t-critico-tinta, #991b1b);
    --l-foco:     var(--t-foco, #2563eb);
    --l-radio:    var(--t-radio, 0);
    --l-titular-f: var(--t-fuente-titular, sans-serif);
    --l-texto-f:  var(--t-fuente-texto, sans-serif);
    --l-foto-pos: var(--t-foto-acceso-pos, 50% 50%);
    --l-foto-pos-movil: var(--t-foto-acceso-pos-movil, 50% 50%);
    --l-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--l-papel);
    color: var(--l-tinta);
    font-family: var(--l-texto-f);
    font-size: 15px;
    letter-spacing: .06em;
    -webkit-font-smoothing: antialiased;
}
.login-body * { box-sizing: border-box; }

.login { display: grid; min-height: 100vh; min-height: 100dvh; }
.login-lado { display: grid; place-items: center; padding: 48px 24px; }
.login-card { display: grid; gap: 18px; width: min(360px, 100%); }
/* Sin foto, el formulario va enmarcado en el centro de la página. */
.login:not(.login-con-foto) .login-card { width: min(380px, 100%); padding: 40px; border: 1px solid var(--l-filete); border-radius: var(--l-radio); }

.login-marca img { display: block; height: 28px; width: auto; }
.login-marca-texto { color: var(--l-titular); font-family: var(--l-titular-f); font-size: 24px; }
.login-titulo { margin: 20px 0 6px; color: var(--l-titular); font-family: var(--l-titular-f); font-size: 32px; font-weight: 400; line-height: 1.15; letter-spacing: 0; }
.login-campo { display: grid; gap: 6px; color: var(--l-titular); font-size: 13px; font-weight: 500; }
/* 16 px: con menos, iOS Safari hace zoom al enfocar el campo. */
.login-campo input {
    height: 44px; padding: 0 14px; border: 0; border-radius: var(--l-radio);
    background: var(--l-papel); color: var(--l-titular); box-shadow: inset 0 0 0 1px var(--l-filete);
    font: inherit; font-size: 16px; font-weight: 400;
}
.login-campo input:hover { box-shadow: inset 0 0 0 2px var(--l-filete); }
/* El foco de un campo engrosa su propio filete en tinta: un contorno por fuera
   del filete gris hacía un doble marco y el campo parecía más ancho. */
.login-campo input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--l-foco); }
.login-boton:focus-visible { outline: 2px solid var(--l-foco); outline-offset: 2px; }
.login-boton {
    height: 48px; margin-top: 8px; border: 0; border-radius: var(--l-radio);
    background: var(--l-accion); color: var(--l-accion-t); box-shadow: inset 0 0 0 1px var(--l-accion);
    font: 600 12px/1 var(--l-texto-f); letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
    transition: background-color 250ms ease, color 250ms ease, transform 100ms var(--l-ease-out);
}
.login-boton:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .login-boton:hover { background: var(--l-papel); color: var(--l-accion); } }
.login-error { margin: 0; padding: 10px 12px; background: var(--l-piedra); color: var(--l-critico-t); font-size: 13px; font-weight: 500; line-height: 1.5; }

/* La foto: llena su mitad sin deformarse; el encuadre lo decide el tema. Entra
   con un fundido corto: el acceso se ve una vez por sesión, no decenas. */
.login-foto { position: relative; overflow: hidden; background: var(--l-piedra); }
.login-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--l-foto-pos); animation: login-foto-entra 700ms var(--l-ease-out) both; }
@keyframes login-foto-entra { from { opacity: 0; transform: scale(1.02); } }

/* Móvil: la foto es una franja encima del formulario, con su propio encuadre;
   la franja ocupa lo suyo y el resto es del formulario (con filas «auto» el
   hueco sobrante se repartía y el logo quedaba a 100 px de la foto). */
.login-con-foto { grid-template-rows: auto 1fr; }
.login-con-foto .login-foto { order: -1; height: 24vh; min-height: 160px; }
.login-con-foto .login-foto img { object-position: var(--l-foto-pos-movil); }
.login-con-foto .login-lado { place-items: start center; padding: 32px 24px 48px; }

/* Escritorio: formulario y foto a partes iguales, a toda la altura. */
@media (min-width: 900px) {
    .login-con-foto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .login-con-foto .login-foto { order: 0; height: auto; min-height: 0; }
    /* Posicionada sobre su mitad: en flujo, la foto cuadrada estiraba la fila
       hasta su ancho y la página hacía scroll en pantallas apaisadas. */
    .login-con-foto .login-foto img { position: absolute; inset: 0; object-position: var(--l-foto-pos); }
    .login-con-foto .login-lado { place-items: center; padding: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-foto img { animation: none; }
    .login-boton { transition: none; }
    .login-boton:active { transform: none; }
}