/* entrada.css — la pantalla d'entrada de L'Aula, variant «La porta» (Sergi, 21/09/2026)
 *
 * Es carrega DESPRÉS d'app.css a posta: totes les regles d'aquí (.login-screen, .login-card,
 * .login-brand, .login-field, .login-submit, .login-hint, .login-error) sobreescriuen les
 * d'app.css §LOGIN, que són les del login groc de llibreta que el client ha rebutjat.
 *
 * PER QUÈ ELS COLORS SÓN FIXOS I NO TOKENS DE PELL (i per què això NO contradiu app.css):
 * `assets/bootstrap.js` només posa `data-skin` dins d'iniciaSessio(), és a dir DESPRÉS que el
 * login hagi anat bé. La pantalla d'entrada es pinta sempre amb la pell escrita a l'HTML, sigui
 * quina sigui. Si l'entrada depengués de tokens de pell, el dia que la pell per defecte canviï
 * l'entrada canviaria de color sense que ningú ho hagi decidit. Per això aquí hi ha els colors
 * de la nit Decupla escrits, i per això NO van a app.css (la seva capçalera diu que aquell fitxer
 * no fixa cap color fora dels tokens). tests/ui_tokens_suite.php fa el cens sobre app.css,
 * jocs.css, roles.css i casanova.css — aquest fitxer no hi entra, i no s'hi ha tocat cap regla.
 *
 * ÀMBIT: tots els tokens es declaren a #login-screen, no a :root. Quan el SPA amaga l'entrada i
 * munta #app, d'aquest fitxer no en queda res viu (ho comprova l'E2E (f)).
 *
 * ZERO VERMELL, també a l'error (ordre del client): ambre fosc #3A2E23 + corall clar #FFD9C7.
 */

/* ── L'alçada: el distintiu d'IA és sticky i ocupa 26 px de flux ──────────────────────────────
 * app.css posa `html,body{height:100%}` i `.login-screen{min-height:100vh}`. Sumats al distintiu
 * fan 100vh + 26 px i surt barra de desplaçament vertical amb la pàgina buida.
 *
 * AQUESTA REGLA ÉS UNA MILLORA, NO EL FONAMENT (reparació del 21/09/2026). Abans l'alçada de
 * l'entrada penjava NOMÉS d'aquí, i el combinador de FILL DIRECTE la fa fràgil de dues maneres
 * que s'han reproduït en viu a 1440×900:
 *   · navegador sense :has()      → l'entrada passa de 874 px a 464 px
 *   · algú embolcalla #login-screen → exactament el mateix (874 → 464)
 * En tots dos casos els 410 px de sota es queden del blau pla del `--bg` de la pell, amb un tall
 * horitzontal ben visible: la pantalla partida en dos tons. El terra incondicional de
 * #login-screen.login-screen (secció 1) és el que ho sosté ara; això només hi suma la columna
 * flexible per a qui la suporti. Va acotat amb :has() perquè NO afecti res quan #login-screen
 * està `hidden` (és a dir, quan l'app ja està muntada). */
body:has( > #login-screen:not([hidden])) { display: flex; flex-direction: column; }

#login-screen {
  /* nit Decupla (els mateixos valors que la pell nit-sencera de skins.css, escrits aquí a posta) */
  --nit0: #0C2A36; --nit-fons: #0A2430;
  --crema: #F6EFE3; --dim: #E2D9CA; --dim2: #CBC2B3; --dim3: #C5BBAC;
  --corall: #FF8A6B; --corall-clar: #FFB59E; --corall-fosc: #241009;
  --cian: #3DD9D6;
  --llum: 255, 238, 224;              /* la llum de la porta: crema càlida, mai blanca */
  --ombra-rgb: 5, 18, 25;
  --fil: rgba(246, 239, 227, .15);    /* filet decoratiu */
  --fil-camp: rgba(246, 239, 227, .52); /* vora de camp: >= 3:1 amb la targeta (WCAG 1.4.11) */
  --avis-bg: #3A2E23; --avis-fg: #FFD9C7;  /* error: ambre fosc + corall clar. MAI vermell. */
  --ent-head: 'Gabarito', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --ent-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --ent-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

/* ── 1. LA PANTALLA ──────────────────────────────────────────────────────────────────────────
 * EL TERRA DE L'ALÇADA, i per què és incondicional: la nit de l'entrada ha d'arribar a baix de
 * tot SEMPRE, també si la regla `body:has()` de dalt no casa (navegador que no suporta :has(),
 * o algú que un dia embolcalli #login-screen). És el mateix idioma que ja fa servir la casa a
 * app.css:80 (`#distintiu-ia + .app-shell{height:calc(100vh - 26px)}`): 26 px és el que ocupa de
 * flux el distintiu d'IA, que és sticky. Les parelles repetides són a posta i en aquest ordre:
 * `100vh` és la reserva per a qui no conegui `svh`, i `100svh` (viewport petit, sense la barra
 * d'adreces del mòbil) el substitueix a qui sí. Anul·la el `min-height:100vh` pelat d'app.css,
 * que amb el distintiu sumava 100vh + 26 px i treia barra de desplaçament amb la pàgina buida.
 *
 * I PER QUÈ TAMBÉ max-height, i no només el terra: `overflow-y:auto` només entra en joc si
 * l'element té l'alçada ACOTADA. Amb la columna flexible l'acota el `flex: 1 1 auto`; sense ella
 * (navegador sense :has(), o #login-screen embolcallat) l'element creixeria amb el contingut i,
 * com que app.css posa `body{overflow:hidden}`, el que sobresurt no es podria ni veure ni
 * desplaçar. Mesurat a 390×420 (teclat virtual obert): sense el sostre, 224 px de targeta queden
 * fora i el botó «Entra» és inabastable. Amb el sostre, la pantalla es queda a la mida del
 * viewport i el que desplaça és ella mateixa, exactament igual que amb la columna flexible.
 *
 * overflow-y:auto anul·la el `body{overflow:hidden}` d'app.css per a l'entrada: amb el teclat
 * virtual obert i 420 px d'alçada, sense això la targeta quedaria atrapada fora de pantalla i el
 * botó «Entra» seria inabastable (comprovat per CDP a 390×420). */
#login-screen.login-screen {
  position: relative; flex: 1 1 auto; isolation: isolate;
  min-height: calc(100vh - 26px);   max-height: calc(100vh - 26px);
  min-height: calc(100svh - 26px);  max-height: calc(100svh - 26px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 48px; overflow-y: auto; overflow-x: hidden;
  font-family: var(--ent-body); color: var(--crema);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 620px at 14% -14%, rgba(255, 138, 107, .10), transparent 62%),
    radial-gradient(900px 520px at 96% 108%, rgba(61, 217, 214, .055), transparent 64%),
    linear-gradient(180deg, var(--nit0) 0%, var(--nit-fons) 100%);
}
/* graella que s'esvaeix: la mateixa de la pell nit-sencera, perquè l'entrada i l'app semblin
   el mateix lloc */
#login-screen.login-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(246, 239, 227, .021) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 239, 227, .021) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(118% 92% at 66% 4%, #000 0%, transparent 72%);
          mask-image: radial-gradient(118% 92% at 66% 4%, #000 0%, transparent 72%);
}
/* gra: la nit és paper fosc, no un negre pla */
#login-screen.login-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: .075; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* anell de focus de l'entrada: cian, acotat a la pantalla d'entrada (app.css en posa un de blau
   de pell per a tota l'app i aquí no s'hi veuria) */
#login-screen :focus-visible {
  outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 6px;
}

/* ── 2. CAPES DE FONS (llum de la porta · làmines de guix) ──────────────────────────────────── */
.ent-fons { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ent-fons > * { position: absolute; }

.ent-llum {
  width: min(78vw, 900px); aspect-ratio: 1; border-radius: 50%;
  left: -15%; top: 44%; translate: 0 -50%;
  background: radial-gradient(closest-side,
    rgba(var(--llum), .135), rgba(var(--llum), .048) 44%, rgba(var(--llum), 0) 74%);
  animation: ent-respira 16s var(--ent-ease) infinite;
}
/* L'animació parteix de l'estat base VISIBLE (opacity 1): sense CSS d'animació —o amb
   prefers-reduced-motion— la pàgina és exactament la mateixa. */
@keyframes ent-respira {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .84; transform: scale(1.03); }
}

/* làmines de guix (Leonardo), WebP amb alfa de veritat. Cada làmina porta la seva màscara radial
   perquè les vores es fonguin amb la nit i no sembli una imatge enganxada. */
.ent-guix {
  background-repeat: no-repeat; background-size: contain; background-position: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 54%, transparent 97%);
          mask-image: radial-gradient(closest-side, #000 54%, transparent 97%);
}
.ent-guix-1 {
  background-image: url("entrada/guix-engranatges.webp");
  left: -17%; bottom: -26%; width: min(52vw, 660px); aspect-ratio: 640 / 610;
  opacity: .075; rotate: -5deg;
}
.ent-guix-2 {
  background-image: url("entrada/guix-pitagores.webp");
  right: -11%; top: -20%; width: min(33vw, 440px); aspect-ratio: 570 / 610;
  opacity: .055; rotate: 5deg;
}

/* ── 3. GRAELLA DE CONTINGUT ────────────────────────────────────────────────────────────────── */
.ent-graella {
  position: relative; z-index: 2; margin: auto; width: 100%; max-width: 900px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 404px);
  align-items: center; gap: clamp(40px, 4.4vw, 62px);
}

/* ── 4. MARCA ───────────────────────────────────────────────────────────────────────────────── */
#login-screen .login-brand {
  display: block; text-align: left; max-width: 520px; margin: 0; gap: 0;
}
/* flex i no `display:block`: app.css posa `img{display:block}`, o sigui que el `text-align`
   del pare NO centra la imatge. Aquest era el logo descentrat que es veia al mòbil del mockup;
   ara la posició horitzontal del logo la mana `justify-content` i es pot mesurar. */
#login-screen .ent-logo { display: flex; justify-content: flex-start; }
#login-screen .ent-logo img {
  width: auto; height: 100px; max-width: 100%;
  /* la llum surt de la D de veritat: el drop-shadow segueix el contorn del símbol */
  filter: drop-shadow(0 0 24px rgba(var(--llum), .34)) drop-shadow(0 0 62px rgba(var(--llum), .18));
}
#login-screen .login-brand h1 {
  font-family: var(--ent-head); font-weight: 700; text-wrap: balance;
  font-size: clamp(54px, 5.4vw, 78px); line-height: 1.0; letter-spacing: -.034em;
  margin: 26px 0 0; color: var(--crema);
}
.ent-frase {
  font-family: var(--ent-head); font-weight: 600; font-size: clamp(23px, 2.05vw, 29px);
  line-height: 1.24; letter-spacing: -.016em; margin-top: 16px;
  color: var(--dim); max-width: 32ch; text-wrap: balance;
}
.ent-frase .ent-fi { color: var(--corall); }

/* ── 5. LA TARGETA ──────────────────────────────────────────────────────────────────────────── */
#login-screen .login-card {
  position: relative; width: 100%; max-width: 404px; justify-self: end;
  background: linear-gradient(180deg, #17414F 0%, #123B4A 58%, #113645 100%);
  border: 1px solid var(--fil); border-radius: 18px;
  padding: 32px 32px 28px;
  box-shadow:
    inset 0 1px 0 rgba(var(--llum), .14),
    0 2px 10px rgba(var(--ombra-rgb), .34),
    0 34px 74px -30px rgba(var(--ombra-rgb), .92);
  backdrop-filter: blur(2px);
}
/* filet de llum a dalt: s'encén al mig i s'apaga als extrems */
#login-screen .login-card::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent,
    rgba(var(--llum), .95) 42%, rgba(var(--llum), .95) 58%, transparent);
  box-shadow: 0 0 12px rgba(var(--llum), .35);
}
.ent-titol {
  font-family: var(--ent-head); font-weight: 600; font-size: 20px; letter-spacing: -.015em;
  color: var(--crema); margin-bottom: 22px;
}

/* camps */
#login-screen .login-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
#login-screen .login-field label {
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--dim2);
}
#login-screen .login-field input {
  width: 100%; border: 1px solid var(--fil-camp); background: var(--nit0); color: var(--crema);
  border-radius: 11px; padding: 13px 15px; font-size: 16px; line-height: 1.25;
  box-shadow: inset 0 2px 8px rgba(var(--ombra-rgb), .38);
  transition: border-color .18s var(--ent-ease), box-shadow .18s var(--ent-ease);
}
#login-screen .login-field input:hover { border-color: rgba(246, 239, 227, .72); }
#login-screen .login-field input:focus-visible {
  outline: 2px solid var(--cian); outline-offset: 2px; border-color: rgba(61, 217, 214, .85);
  box-shadow: inset 0 2px 8px rgba(var(--ombra-rgb), .38), 0 0 0 4px rgba(61, 217, 214, .12);
}
/* l'autocompletat de Chrome pintava el camp de blanc enmig de la nit: se li torna la nit */
#login-screen .login-field input:-webkit-autofill,
#login-screen .login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--crema);
  -webkit-box-shadow: 0 0 0 40px var(--nit0) inset, inset 0 2px 8px rgba(var(--ombra-rgb), .38);
  caret-color: var(--crema);
}

/* botó */
#login-screen .login-submit {
  width: 100%; min-height: 54px; margin-top: 10px; padding: 12px 16px;
  background: var(--corall); color: var(--corall-fosc);
  border: 1px solid var(--corall); border-radius: 999px;
  font-family: var(--ent-body); font-size: 17px; font-weight: 700; letter-spacing: .005em;
  box-shadow: 0 10px 26px -18px rgba(var(--llum), .5);
  transition: transform .22s var(--ent-ease), background .18s, box-shadow .28s var(--ent-ease);
}
#login-screen .login-submit:hover {
  background: var(--corall-clar); border-color: var(--corall-clar); transform: translateY(-2px);
  box-shadow: 0 0 0 5px rgba(var(--llum), .08), 0 16px 36px -18px rgba(var(--llum), .55);
  filter: none;
}
#login-screen .login-submit:active { transform: translateY(0); }
#login-screen .login-submit:disabled { opacity: .6; cursor: default; transform: none; }

#login-screen .login-hint {
  margin-top: 18px; text-align: center; font-size: 13px; line-height: 1.55;
  color: var(--dim3); text-wrap: balance;
}

/* ── 6. ERROR: ambre fosc + corall clar, amb icona. MAI vermell. ─────────────────────────────
 * La icona és un ::before amb un SVG en data-URI i NO un <svg> dins del paràgraf, a posta:
 * bootstrap.js escriu el missatge amb `loginError.textContent = …`, que esborra TOTS els nodes
 * fills de #login-error. Un pseudoelement no és un node del DOM i sobreviu al textContent; un
 * <svg> a dins desapareixeria al primer error real i no ho veuria ningú fins a casa del client.
 * El CSP de producció (public/index.php) diu `img-src 'self' data:`, que és la directiva que
 * governa background-image: el data-URI hi passa (verificat al navegador, consola sense avisos). */
#login-screen .login-error {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--avis-bg); color: var(--avis-fg);
  border: 1px solid rgba(255, 138, 107, .42); border-left: 3px solid var(--corall);
  border-radius: 11px; padding: 11px 13px; margin-bottom: 18px;
  font-size: 14px; line-height: 1.42;
}
#login-screen .login-error::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
/* mentre hi ha error, la vora dels camps passa a corall CLAR: el corall pur feia 2,52:1 contra
   la targeta i calien 3,0 (WCAG 1.4.11). Amb el clar fa 5,37:1. */
#login-screen:has(#login-error:not([hidden])) .login-field input {
  border-color: rgba(255, 181, 158, .88);
}

/* ── 7. MÒBIL ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  #login-screen.login-screen { padding: 24px 20px 28px; }
  .ent-graella {
    grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; max-width: 430px;
  }
  /* width:100% (i no max-content): així el bloc de marca ocupa exactament la mateixa columna que
     la targeta i tot el que hi ha a dins queda centrat RESPECTE DE LA TARGETA, no respecte del
     text més ample que hi hagi. És la correcció del logo descentrat del mockup. */
  #login-screen .login-brand { text-align: center; max-width: none; width: 100%; }
  #login-screen .ent-logo { justify-content: center; }
  #login-screen .ent-logo img { height: 64px; }
  #login-screen .ent-logo img {
    filter: drop-shadow(0 0 18px rgba(var(--llum), .28));
  }
  #login-screen .login-brand h1 { font-size: 42px; margin-top: 16px; letter-spacing: -.03em; }
  .ent-frase { font-size: 18.5px; margin: 11px auto 0; max-width: 27ch; }
  #login-screen .login-card { justify-self: center; padding: 26px 22px 24px; }
  .ent-titol { font-size: 18px; margin-bottom: 18px; }
  #login-screen .login-submit { min-height: 52px; font-size: 16px; }
  /* làmines gairebé imperceptibles */
  .ent-guix-1 { left: -34%; bottom: -6%; width: 420px; opacity: .03; }
  .ent-guix-2 { right: -30%; top: -4%; width: 320px; opacity: .022; }
  .ent-llum { left: 50%; top: 22%; translate: -50% -50%; width: 126vw; }
}

/* pantalles baixes (mòbil apaisat, teclat virtual obert): res de centrat forçat — la targeta
   comença a dalt i la pantalla fa scroll fins al botó */
@media (max-height: 620px) {
  #login-screen.login-screen { align-items: flex-start; }
  .ent-graella { margin: 0 auto; }
}

/* ── 8. MOVIMENT REDUÏT ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #login-screen, #login-screen *, #login-screen *::before, #login-screen *::after {
    animation: none !important; transition-duration: .01ms !important;
  }
}