/* =========================================================================
   0. TIPOGRAFÍA (2026-10-01, Hidalgo: «cambia la fuente, no quiero que parezca hecho por IA»)
   Inter + Space Grotesk es la pareja por defecto de casi todo lo generado hoy; se lee
   como plantilla. Schibsted Grotesk la dibujó un editor de diarios para pantallas: tiene
   grotesca de periódico (la «g» de doble piso, la «R» de pierna recta), cifras tabulares
   (`tnum`, verificado con fontTools sobre el .woff2) y un peso 400–900 variable. Una sola
   familia para títulos y cuerpo: la jerarquía la hacen el tamaño y el peso, no un cambio
   de fuente en cada nivel. La mono se queda solo en datos tabulares.
   ========================================================================= */
@font-face{font-family:"Schibsted";src:url("/vendor/schibstedgrotesk-latin.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted";src:url("/vendor/schibstedgrotesk-latin-italic.woff2") format("woff2");
  font-weight:400 900;font-style:italic;font-display:swap}
html[data-paisaje]:root{
  --font:"Schibsted",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Schibsted",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-paisaje]:root body{font-family:var(--font);font-feature-settings:"liga" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html[data-paisaje]:root body :is(h1,h2,h3,h4,.t,.cardhead .t,#pageTitle){
  font-family:var(--display);letter-spacing:-.018em}
html[data-paisaje]:root body :is(.score .v,.kpi .v,.num,.cifra,[class*="value"],[class*="valor"]){
  font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* La monoespaciada en etiquetas, chips, ojos de sección y rótulos en MAYÚSCULAS
   espaciadas es la firma del panel genérico. Se queda donde rinde (tablas, cifras de
   columna, sellos técnicos); en el resto, la misma grotesca en versalitas reales. */
html[data-paisaje]:root body :is(.eyebrow,.cardhead,.cardhead .t,.liveflag,.liveflag *,.rangeinfo,
  .rail__word,.rail__sec,.zplaca,.lstatus,.goalcard,.priocard,.empcard,.cstat,.sk-step,
  .voicebar__eyebrow,.voicebar__state,.zc-verdict__txt,.zrank__seg,.zrank__id,.score .k,
  .score .lbl,.score .d,.phasetab,.skilltab,.subseg__btn,.chip,.fok,.fwait,.fbad){
  font-family:var(--font)!important;letter-spacing:.01em}
html[data-paisaje]:root body :is(.eyebrow,.rail__sec,.score .k,.score .lbl,.fok,.fwait,.fbad){
  font-variant-caps:all-small-caps;letter-spacing:.045em;font-weight:600;text-transform:none!important}
html[data-paisaje]:root body :is(table,td,th,.num,.zc-val,.zrank__count,.zrank__eng,.lf-ts,.buildstamp){
  font-variant-numeric:tabular-nums}
/* Botones, pestañas y chips heredaban fuentes sueltas de skins viejos. */
html[data-paisaje]:root body :is(button,input,select,textarea){font-family:inherit}

/* =========================================================================
   ZEUS · ENTORNO PAISAJE (2026-10-01)
   Encargo de Hidalgo: «haz un rediseño basado en el ERP de Montessori, la última
   versión… cambia la paleta etc., que se vea súper limpio, mucho mejor ambientado y
   que haya orden; algo asombroso».

   QUÉ SE TOMA DEL ERP (proyecto-tablero-academico, web/erp.css del 30-sep y
   web/erp_fondo_vivo.js), Y POR QUÉ:
     · el PAISAJE como protagonista (Bitrix24): una capa fija que respira y sigue al
       ratón, con niebla/agua/estrellas según el fondo;
     · la PALETA POR FONDO: cada paisaje trae su familia de azules (acero, lago, costa,
       bosque, noche) y esa familia pinta riel, acentos, cabeceras y el bloque héroe;
     · el VIDRIO: el riel es vidrio oscuro con letra blanca, las tarjetas son vidrio
       del color del tema (claro de día, hoja profunda de noche);
     · el MOVIMIENTO de bencho.dev: resorte al pulsar, luz que sigue al cursor,
       onda, entrada en cascada. Solo transform/opacity; estado base = estado final.
   QUÉ NO SE TOMA: la barra superior del ERP. Zeus navega con riel lateral desde el
   21-jul y cambiar la arquitectura de navegación la víspera de una revisión es la
   forma más rápida de romper atajos que el equipo ya usa.

   🔴 CONTRASTE MEDIDO, NO SUPUESTO. El vidrio cambia la superficie, así que cada par
   se calculó contra el PEOR fondo posible detrás (negro puro de día, blanco puro de
   noche: el paisaje va de luminancia 0,01 a 0,87). Por eso la opacidad mínima de las
   ventanas es 0,86 y no la del ERP (0,72): con 0,72 el gris terciario cae a 3,2:1
   (el ERP lo tuvo que parchar el 30-sep). Tabla en DESIGN.md §Entorno.
   ESPECIFICIDAD: el dashboard tiene SEIS pieles apiladas con `!important` y gana la
   más específica, no la última (gotcha del 24-ago). Todo aquí va bajo el prefijo
   `html[data-paisaje]:root body` (0,2,2) para ganar sin pelear regla por regla, y
   quitar `data-paisaje` del <html> devuelve Tormenta intacta (= rollback en vivo).
   ========================================================================= */

/* ---- 1. PALETAS (claro) — mismos matices que el ERP; los acentos que escriben
   texto se oscurecieron donde no llegaban a 4,5:1 sobre vidrio (costa #0f7896 → 4,33). */
html[data-paisaje]:root{
  --p-acento:#2b5d95; --p-cab:#dfeaf6; --p-tarj:#eaf2fa; --p-borde:#b3c9e2; --p-tinta:#13294a;
  --p-barra:27,52,90; --p-luz:#9cc7f2; --p-hondo:#1b3a66;
}
/* TORMENTA (fondo por defecto, 2026-10-01): índigo de nube cargada + luz de rayo. Medido:
   acento 5,62:1 sobre vidrio claro al peor caso; blanco 8,18:1 sobre el acento. */
html[data-paisaje]:root[data-paleta="tormenta"]{--p-acento:#2448a8;--p-cab:#e2e8fa;--p-tarj:#eef2fd;--p-borde:#b6c3ec;--p-tinta:#101b3d;--p-barra:14,20,48;--p-luz:#a9c4ff;--p-hondo:#18245a}
html[data-paisaje]:root[data-paleta="lago"]  {--p-acento:#1d5bb0;--p-cab:#dcebfb;--p-tarj:#e9f3fd;--p-borde:#a9c9ee;--p-tinta:#0b234b;--p-barra:11,35,80;--p-luz:#8cc0ff;--p-hondo:#0b2f6b}
html[data-paisaje]:root[data-paleta="costa"] {--p-acento:#0c6382;--p-cab:#dcf2f7;--p-tarj:#eaf8fb;--p-borde:#a6dbe7;--p-tinta:#0b2f44;--p-barra:8,62,88;--p-luz:#7fe0f2;--p-hondo:#06506b}
html[data-paisaje]:root[data-paleta="bosque"]{--p-acento:#245f73;--p-cab:#e0f0f0;--p-tarj:#edf7f6;--p-borde:#b0d7d6;--p-tinta:#14302f;--p-barra:20,52,54;--p-luz:#8fe3dc;--p-hondo:#17423f}
html[data-paisaje]:root[data-paleta="noche"] {--p-acento:#3d52b8;--p-cab:#e4e8fb;--p-tarj:#eff1fd;--p-borde:#bcc4ef;--p-tinta:#141d3a;--p-barra:20,26,66;--p-luz:#b4bdff;--p-hondo:#1c2463}
/* ---- noche: mismo matiz, hoja profunda (los acentos pasan a su tono de luz) */
html[data-paisaje][data-theme="dark"]:root                       {--p-acento:#8fb8e6;--p-cab:#1b2f4b;--p-tarj:#172841;--p-borde:#34527a;--p-tinta:#e4edf8;--p-hondo:#2a4f7e}
html[data-paisaje][data-theme="dark"]:root[data-paleta="tormenta"]{--p-acento:#9db7ff;--p-cab:#18224a;--p-tarj:#141c3e;--p-borde:#33407e;--p-tinta:#e6ebfc;--p-hondo:#25337a}
html[data-paisaje][data-theme="dark"]:root[data-paleta="lago"]  {--p-acento:#86b6f5;--p-cab:#13305a;--p-tarj:#10284c;--p-borde:#2d5591;--p-tinta:#e3eefc;--p-hondo:#1d4b8f}
html[data-paisaje][data-theme="dark"]:root[data-paleta="costa"] {--p-acento:#6fd0e8;--p-cab:#12364a;--p-tarj:#0f2d3e;--p-borde:#28607a;--p-tinta:#e0f5fa;--p-hondo:#0f6280}
html[data-paisaje][data-theme="dark"]:root[data-paleta="bosque"]{--p-acento:#7fcfd0;--p-cab:#173536;--p-tarj:#132c2d;--p-borde:#2c5a5b;--p-tinta:#e2f3f2;--p-hondo:#245a57}
html[data-paisaje][data-theme="dark"]:root[data-paleta="noche"] {--p-acento:#a3b0f5;--p-cab:#1d2450;--p-tarj:#181e43;--p-borde:#37418a;--p-tinta:#e7eafc;--p-hondo:#2e3a8f}

/* ---- 2. TOKENS DE ZEUS SOBRE VIDRIO --------------------------------------
   Opacidad de las ventanas: 0,86–1 (Apariencia). `--z-opaco` lo escribe el JS. */
html[data-paisaje]:root{
  --z-opaco:.88;
  --ground:transparent;
  --surface:rgba(246,249,253,var(--z-opaco));
  --surface-2:color-mix(in srgb, var(--p-tarj) 94%, transparent);
  --text:#0A1020; --muted:#3E4C63; --faint:#4B5A72;      /* ≥4,52:1 a opacidad .86 sobre negro */
  --accent:var(--p-acento); --accent-d:var(--p-acento); --on-accent:#FFFFFF;
  --accent-bg:color-mix(in srgb, var(--p-acento) 11%, transparent);
  --ring:color-mix(in srgb, var(--p-acento) 40%, transparent);
  --luz:var(--p-tinta); --luz-bg:color-mix(in srgb, var(--p-acento) 10%, transparent);
  --border:color-mix(in srgb, var(--p-borde) 80%, transparent);
  --border-2:var(--p-borde);
  --grid-ink:color-mix(in srgb, var(--p-borde) 55%, transparent);
  --glass:var(--surface);
  --z-blur:blur(16px) saturate(1.15);
  /* semánticos un escalón más hondos sobre vidrio (medido: #0F7A54 daba 4,46:1 y #B3392F 4,02:1) */
  --pos:#0A6444; --neg:#9E2F26;   /* 4,94:1 y 5,00:1 al peor caso */
}
html[data-paisaje][data-theme="dark"]:root{
  --surface:rgba(10,18,32,var(--z-opaco));
  --pos:#5FDDA9; --neg:#FF9A90;   /* semánticos de noche (antes los de día se colaban por herencia: 2,08:1) */
  --text:#E7EDF8; --muted:#B4C1D6; --faint:#9AA9C2;      /* ≥4,96:1 a .86 sobre blanco */
  --on-accent:#04070E;
  --border:color-mix(in srgb, var(--p-borde) 70%, transparent);
  --luz:#E8F0FF; --luz-bg:rgba(232,240,255,.10);
}

/* La ayuda (?) usaba `color:var(--surface)` sobre `background:var(--text)`: con la
   superficie translúcida el texto de la burbuja quedaba al 12 % (1,22:1). Literales. */
html[data-paisaje]:root body .helptip{background:#0A1020!important;color:#F4F7FC!important}
html[data-paisaje]:root body .helptip b{color:#FFFFFF!important}
html[data-paisaje][data-theme="dark"]:root body .helptip{background:#F4F7FC!important;color:#0A1020!important}
html[data-paisaje][data-theme="dark"]:root body .helptip b{color:#0A1020!important}

/* Botón «Llamar a Zeus»: su fondo era var(--surface) al 90 % mezclado — sobre vidrio
   quedaba translúcido y la letra (heredada de una piel vieja) a 1,25:1. Sólido. */
html[data-paisaje]:root body .voice-call-btn{background:rgb(var(--p-barra))!important;color:#FFFFFF!important;
  border-color:rgba(255,255,255,.28)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-paisaje]:root body .voice-call-btn:hover{color:#FFFFFF!important;border-color:var(--p-luz)!important}
html[data-paisaje]:root body .voice-call-btn::after{background:var(--p-luz)!important;box-shadow:0 0 0 3px rgba(255,255,255,.14),0 0 12px var(--p-luz)!important}
html[data-paisaje]:root body .sem.verde{background:color-mix(in srgb,var(--pos) 14%,var(--surface))!important;color:var(--pos)!important}
html[data-paisaje]:root body .sem.rojo{background:color-mix(in srgb,var(--neg) 14%,var(--surface))!important;color:var(--neg)!important}

/* ---- 3. EL PAISAJE ------------------------------------------------------- */
html[data-paisaje]:root,
html[data-paisaje]:root body{background:#1c2733!important}
html[data-paisaje]:root body::before{content:none!important;display:none!important}
.z-fondo{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  opacity:var(--z-paisaje,1);filter:saturate(1.05)}
.z-fondo::after{content:"";position:absolute;inset:0;
  /* Velo apenas perceptible arriba: el texto blanco del riel y del título vive allí. */
  background:linear-gradient(180deg,rgba(6,12,24,.18),rgba(6,12,24,0) 40%)}
html[data-theme="dark"] .z-fondo{filter:saturate(.9) brightness(.62)}
html[data-theme="dark"] .z-fondo::after{background:rgba(4,8,16,.28)}
.z-fondo.vivo{animation:z-respira 40s ease-in-out infinite alternate}
@keyframes z-respira{
  from{background-size:max(110vw,110vh*var(--z-ar,1.777)) auto;background-position:calc(46% + var(--px,0px)) calc(52% + var(--py,0px))}
  to  {background-size:max(120vw,120vh*var(--z-ar,1.777)) auto;background-position:calc(54% + var(--px,0px)) calc(46% + var(--py,0px))}}
.z-fondo-vivo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
html[data-paisaje]:root body .app{position:relative;z-index:1;background:transparent!important}
html[data-paisaje]:root body .app .body{background:transparent!important}

/* ---- 4. RIEL: vidrio oscuro de la paleta, letra blanca, EN LOS DOS TEMAS ----
   Medido a .84 sobre blanco (el peor caso): blanco ≥7,15:1, blanco 84 % ≥5,61:1,
   luz de la paleta ≥4,96:1. */
html[data-paisaje]:root body .app .rail{
  background:rgba(var(--p-barra),.84)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2)!important;backdrop-filter:blur(18px) saturate(1.2)!important;
  border-right:1px solid rgba(255,255,255,.14)!important;
  color:rgba(255,255,255,.84)!important;
  --text:#FFFFFF; --muted:rgba(255,255,255,.84); --faint:rgba(255,255,255,.84);
  --surface:transparent; --surface-2:rgba(255,255,255,.10); --border:rgba(255,255,255,.16);
  --luz:#FFFFFF; --luz-bg:rgba(255,255,255,.16);
}
html[data-theme="dark"][data-paisaje]:root body .app .rail{background:rgba(var(--p-barra),.90)!important}
html[data-paisaje]:root body .app .rail .navitem{color:rgba(255,255,255,.90)!important;border-radius:10px}
html[data-paisaje]:root body .app .rail .navitem svg{opacity:.9;color:inherit}
html[data-paisaje]:root body .app .rail .navitem:hover{background-color:rgba(255,255,255,.12)!important;color:#FFFFFF!important}
html[data-paisaje]:root body .app .rail .navitem.active,
html[data-paisaje]:root body .app .rail .navitem.active svg{color:#FFFFFF!important;opacity:1}
html[data-paisaje]:root body .app .rail .navitem.active{
  background-color:rgba(255,255,255,.18)!important;background-image:none!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important}
html[data-paisaje]:root body .app .rail .navitem.active::before{background:var(--p-luz)!important;opacity:1}
html[data-paisaje]:root body .app .rail .rail__sec{color:var(--p-luz)!important;opacity:1}
html[data-paisaje]:root body .app .rail .rail__grp .chev{color:rgba(255,255,255,.7)!important}
html[data-paisaje]:root body .app .rail .rail__word,
html[data-paisaje]:root body .app .rail .rail__word small{color:#FFFFFF!important}
html[data-paisaje]:root body .app .rail .rail__word small{color:rgba(255,255,255,.84)!important}
html[data-paisaje]:root body .app .rail .rail__mark{background:#FFFFFF!important;border:0!important;border-radius:10px!important;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5)!important}
html[data-paisaje]:root body .app .rail .rail__user{border-top:1px solid rgba(255,255,255,.14)!important;background:transparent!important}
html[data-paisaje]:root body .app .rail .rail__who .nm{color:#FFFFFF!important}
html[data-paisaje]:root body .app .rail .rail__who .rl{color:rgba(255,255,255,.84)!important}
html[data-paisaje]:root body .app .rail :is(.logout,.themebtn,.z-aparbtn){color:rgba(255,255,255,.9)!important;background:transparent!important}
html[data-paisaje]:root body .app .rail :is(.logout,.themebtn,.z-aparbtn):hover{color:#FFFFFF!important;background:rgba(255,255,255,.14)!important}
html[data-paisaje]:root body .app .rail .avatar{background:#FFFFFF!important;color:rgb(var(--p-barra))!important}

/* ---- 5. VENTANAS: vidrio del color del tema --------------------------------- */
html[data-paisaje]:root body :is(.card,.score,.panel,.empcard,.cstat,.campcard,.priocard,.ledger,.tablebox,.goalcard,.daycard,.zplaca,.callout,.lf-item,.stepbox,.modal__card,.askpanel,.cmdk__panel){
  background-color:var(--surface)!important;
  -webkit-backdrop-filter:var(--z-blur)!important;backdrop-filter:var(--z-blur)!important;
  border:1px solid var(--border)!important;
}
html[data-paisaje]:root body :is(.card,.empcard,.ledger,.tablebox,.goalcard,.daycard,.panel){
  border-radius:16px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 18px 40px -22px rgba(8,20,40,.55)!important}
html[data-paisaje][data-theme="dark"]:root body :is(.card,.empcard,.ledger,.tablebox,.goalcard,.daycard,.panel){
  box-shadow:0 1px 0 rgba(150,190,255,.12) inset,0 18px 40px -22px rgba(0,0,0,.7)!important}
/* la tarjeta del resumen del día ya no lleva franja lateral (prohibida en las dos fichas) */
html[data-paisaje]:root body .daycard{border-left:1px solid var(--border)!important}
/* Cabecera de tarjeta: banda de la paleta, como las cabeceras de panel del ERP. */
html[data-paisaje]:root body .card > .cardhead{
  background:color-mix(in srgb, var(--p-cab) 88%, transparent);
  margin:-1px -1px 14px;padding:12px 18px;border-radius:16px 16px 0 0;border-bottom:1px solid var(--p-borde)}
html[data-paisaje]:root body .card > .cardhead .t{color:var(--p-tinta)!important}
html[data-paisaje]:root body .card > .cardhead :is(.hint,.src){color:color-mix(in srgb, var(--p-tinta) 78%, var(--p-cab))!important}
/* Campos sobre vidrio: un escalón más firmes, para que el texto se lea siempre. */
html[data-paisaje]:root body .app :is(input[type=text],input[type=search],input[type=email],input[type=password],input[type=date],input[type=number],input:not([type]),textarea,select,.skin){
  background-color:color-mix(in srgb, var(--surface) 100%, transparent)!important;border-color:var(--border-2)!important}

/* ---- 6. TODO TEXTO SOBRE EL PAISAJE VA EN UNA PÍLDORA ----------------------
   Encabezado de pantalla, filtros y títulos de sección viven FUERA de las tarjetas,
   o sea directamente sobre la foto. Sin base propia, un título en tinta sobre un
   cielo oscuro es ilegible (lo mismo que el ERP corrigió el 30-sep con la «píldora»). */
html[data-paisaje]:root body .app .pagehead{
  background:color-mix(in srgb, var(--p-hondo) 86%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--p-luz) 30%, transparent)!important;
  border-radius:18px;padding:18px 22px!important;margin-bottom:16px!important;
  box-shadow:0 16px 40px -24px rgba(4,10,24,.7)}
html[data-paisaje]:root body .app .pagehead :is(h1,#pageTitle){color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important}
/* luz de la paleta sobre la píldora: 4,09–4,23:1 en costa/acero (medido) → blanco 86 % (≥5,08:1) */
html[data-paisaje]:root body .app .pagehead :is(.eyebrow,#pageEyebrow){color:rgba(255,255,255,.86)!important}
html[data-paisaje]:root body .app .pagehead :is(.sub,#pageSub){color:rgba(255,255,255,.86)!important}
html[data-paisaje]:root body .app .pagehead .liveflag{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.22)!important;color:#FFFFFF!important}
html[data-paisaje]:root body .app .pagehead .liveflag *{color:#FFFFFF!important}
html[data-paisaje]:root body .app .pagehead .liveflag .buildstamp{color:rgba(255,255,255,.8)!important;border-left-color:rgba(255,255,255,.25)!important}
html[data-paisaje]:root body .app .pagehead .themebtn{color:#FFFFFF!important;border-color:rgba(255,255,255,.3)!important;background:rgba(255,255,255,.1)!important}

html[data-paisaje]:root body .app :is(.filters,.phasetabs,.secrow){
  background:var(--surface)!important;
  -webkit-backdrop-filter:var(--z-blur);backdrop-filter:var(--z-blur);
  border:1px solid var(--border)!important;border-radius:14px!important;
  padding:8px 12px!important}
html[data-paisaje]:root body .app .filters{margin:0 0 16px!important}
html[data-paisaje]:root body .app .secrow{display:flex!important;width:fit-content;max-width:100%;
  margin:26px 0 12px!important;padding:8px 16px!important;gap:10px}
html[data-paisaje]:root body .app .secrow h2{color:var(--text)!important}
html[data-paisaje]:root body .app .secrow .eyebrow:first-child{color:var(--p-acento)!important}
html[data-paisaje]:root body .app .phasetabs{width:fit-content;max-width:100%}
html[data-paisaje]:root body .app :is(.backlink,#kpiPeriodoNota,.rangeinfo){
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:5px 12px!important;width:fit-content;color:var(--muted)!important;opacity:1!important}
html[data-paisaje]:root body .app #kpiPeriodoNota{margin:0 0 10px!important}

/* Píldoras de empresa: la activa con el acento (acción), el resto en tinta. */
html[data-paisaje]:root body .app .epill{color:var(--muted)!important}
html[data-paisaje]:root body .app .epill:hover{color:var(--text)!important}
html[data-paisaje]:root body .app .epill.active{color:var(--p-acento)!important;border-bottom-color:var(--p-acento)!important}
html[data-paisaje]:root body .app :is(.phasetab,.skilltab).active{color:var(--p-acento)!important}

/* ---- 7. LA CIFRA QUE MANDA: UN SOLO BLOQUE DE COLOR -------------------------
   Regla del ERP (§v3-d): un bloque de color por pantalla, el resto lo acompaña. El
   primer héroe es el bloque hondo de la paleta (blanco 8,87–14,17:1); los otros dos
   son vidrio. Los deltas sobre el bloque pasan a sus tonos claros (≥4,63:1). */
html[data-paisaje]:root body .bento.kpi>.score:nth-child(1){
  background:var(--p-hondo)!important;border-color:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 22px 44px -24px rgba(4,10,24,.75)!important}
html[data-paisaje]:root body .bento.kpi>.score:nth-child(1) :is(.v,.k){color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;text-shadow:none!important}
html[data-paisaje]:root body .bento.kpi>.score:nth-child(1) .k{color:rgba(255,255,255,.86)!important}
html[data-paisaje]:root body .bento.kpi>.score:nth-child(1) .d{color:#FFFFFF!important}
html[data-paisaje]:root body .bento.kpi>.score:nth-child(1) .d.pos{color:#7EE3B8!important}
html[data-paisaje]:root body .bento.kpi>.score:nth-child(1) .d.neg{color:#FFA399!important}
html[data-paisaje]:root body .bento.kpi>.score:nth-child(1) .helpdot{color:#FFFFFF!important;border-color:rgba(255,255,255,.5)!important}
html[data-paisaje]:root body .bento.kpi>.score:nth-child(-n+3){border-radius:18px!important}
html[data-paisaje]:root body .bento.kpi>.score:nth-child(2) .v,
html[data-paisaje]:root body .bento.kpi>.score:nth-child(3) .v{color:var(--text)!important}
/* Segundo nivel: vidrio fino en vez de filete suelto sobre la foto (el filete solo
   no tiene superficie: sobre el paisaje la cifra quedaba flotando ilegible). */
html[data-paisaje]:root body .bento.kpi>.score:nth-child(n+4){
  background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:12px!important;
  -webkit-backdrop-filter:var(--z-blur)!important;backdrop-filter:var(--z-blur)!important;padding:12px 14px!important}
html[data-paisaje]:root body .bento.kpi>.score:nth-child(n+4) .v{color:var(--text)!important}

/* ---- 8. MÓVIL --------------------------------------------------------------- */
html[data-paisaje]:root body .mbar{
  background:rgba(var(--p-barra),.86)!important;color:#FFFFFF!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.14)!important}
html[data-paisaje]:root body .mbar :is(.word,.menu,.themebtn,.z-aparbtn){color:#FFFFFF!important}
html[data-paisaje]:root body .botnav{
  background:rgba(var(--p-barra),.90)!important;border-top:1px solid rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html[data-paisaje]:root body .botnav button{color:rgba(255,255,255,.86)!important}
html[data-paisaje]:root body .botnav button.active{color:#FFFFFF!important}
@media (max-width:640px){
  html[data-paisaje]:root body .app .pagehead{padding:13px 15px!important;border-radius:14px}
  html[data-paisaje]:root body .app :is(.card,.empcard,.ledger,.tablebox,.goalcard,.daycard){border-radius:14px!important}
}

/* ---- 9. BOTÓN Y PANEL DE APARIENCIA ------------------------------------------ */
.z-aparbtn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;border:0;background:transparent;cursor:pointer;color:inherit}
.z-aparbtn svg{width:17px;height:17px}
.z-apar{position:fixed;z-index:90;width:min(360px,calc(100vw - 24px));padding:16px;border-radius:18px;
  background:var(--p-tarj,#fff);color:var(--p-tinta,#0a1020);border:1px solid var(--p-borde,#ccd);
  box-shadow:0 30px 70px -20px rgba(4,10,24,.55);font-size:14px}
.z-apar-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.z-apar-cab b{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.z-apar-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--p-borde);background:transparent;color:inherit;cursor:pointer;font-size:15px}
.z-apar-rot{margin:12px 0 8px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--p-acento)}
.z-apar-minis{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.z-apar-mini{display:grid;gap:5px;padding:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit}
.z-apar-mini span{display:block;aspect-ratio:1/1;border-radius:11px;background-size:cover;background-position:center;
  background-image:var(--mini);box-shadow:0 0 0 1px var(--p-borde);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}
.z-apar-mini small{font-size:11px;line-height:1.2;text-align:center;color:inherit}
.z-apar-mini:hover span{transform:translateY(-2px)}
.z-apar-mini[aria-checked="true"] span{box-shadow:0 0 0 2px var(--p-tarj),0 0 0 4px var(--p-acento)}
.z-apar-mini:focus-visible{outline:2px solid var(--p-acento);outline-offset:3px;border-radius:12px}
.z-apar-pal{margin:10px 0 0;font-size:12.5px;color:inherit;opacity:.92}
.z-apar-fila{display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer;min-height:44px}
.z-apar-fila input[type=checkbox]{width:20px;height:20px;margin:2px 0 0;accent-color:var(--p-acento);flex:none}
.z-apar-fila span{display:grid;gap:2px}.z-apar-fila small{font-size:12px;opacity:.9}
.z-apar-barra{display:grid;gap:6px;margin-top:12px}
.z-apar-barra span{display:flex;justify-content:space-between;font-size:13px}
.z-apar-barra input{width:100%;accent-color:var(--p-acento)}
.z-apar-nota{margin:12px 0 0;font-size:12px;opacity:.9}
.z-apar-acc{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.z-apar-acc button{min-height:40px;padding:0 16px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;
  border:1px solid var(--p-borde);background:transparent;color:inherit}
.z-apar-acc button.ok{background:var(--p-acento);border-color:var(--p-acento);color:#FFFFFF}
html[data-theme="dark"] .z-apar-acc button.ok{color:#04070E}

/* ---- 10. MOVIMIENTO (vocabulario de bencho.dev, igual que .mov-erp) ----------
   Solo transform/opacity; el estado base es el final; «reducir movimiento» lo apaga. */
html[data-paisaje]:root body{--resorte:cubic-bezier(.34,1.56,.64,1);--frena:cubic-bezier(.16,1,.3,1)}
html[data-paisaje]:root body .app :is(.btn,.navitem,.epill,.tab,.phasetab,.skilltab,.ask-btn,.z-aparbtn,.backlink){
  transition:transform .45s var(--resorte),background-color .2s ease,color .2s ease,box-shadow .3s ease!important}
html[data-paisaje]:root body .app :is(.btn,.navitem,.epill,.tab,.phasetab,.skilltab,.ask-btn,.z-aparbtn,.backlink):active{
  transform:scale(.955)!important;transition-duration:.08s!important}
html[data-paisaje]:root body .app :is(.empcard,.campcard,.priocard){
  transition:transform .55s var(--resorte),box-shadow .35s ease,border-color .2s ease!important}
html[data-paisaje]:root body .app :is(.empcard,.campcard,.priocard):hover{
  transform:translateY(-3px)!important;border-color:var(--p-borde)!important}
/* luz que sigue al cursor */
html[data-paisaje]:root body .app :is(.card,.empcard,.score,.campcard){--mx:50%;--my:0%;position:relative}
html[data-paisaje]:root body .app :is(.card,.empcard,.score,.campcard)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(380px circle at var(--mx) var(--my),color-mix(in srgb,var(--p-luz) 18%,transparent),transparent 62%)}
html[data-paisaje]:root body .app :is(.card,.empcard,.score,.campcard):hover::after{opacity:1}
/* onda al pulsar */
.z-onda{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.45;
  background:color-mix(in srgb,var(--p-luz) 50%,transparent);animation:z-onda .6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes z-onda{to{transform:scale(1);opacity:0}}
/* entrada en cascada de lo que el JS marcó (sin JS se ve todo) */
.z-entra{animation:z-entra .6s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--retardo,0ms)}
@keyframes z-entra{from{opacity:0;transform:translateY(14px) scale(.985)}}
@media (prefers-reduced-motion:reduce){
  .z-fondo.vivo{animation:none}.z-fondo-vivo{display:none}
  .z-entra,.z-onda{animation:none!important}
  html[data-paisaje]:root body .app *{transition:none!important}
  html[data-paisaje]:root body .app :is(.empcard,.campcard,.priocard):hover{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  html[data-paisaje]:root{--z-opaco:1;--z-blur:none}
  html[data-paisaje]:root body .app .rail{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgb(var(--p-barra))!important}
}
/* 🔴 Bosque y Costa miden 1920×768 (razón 2,5, no 16:9): con la fórmula fija del ERP
   (`110vh*1.777`) la foto NO cubría el alto y dejaba una franja oscura arriba (vista en
   la captura del bosque de día). La razón real viaja en --z-ar desde el JS. */
/* Tormenta no tiene foto: la escena entera la dibuja el lienzo. El degradado es lo que
   se ve sin JS o con «reducir movimiento» antes del primer cuadro. */
.z-fondo.sin-foto{background:linear-gradient(180deg,#0a1130 0%,#16204a 45%,#28345a 78%,#1a223f 100%)}
html[data-theme="dark"] .z-fondo.sin-foto{filter:none}
.z-fondo.destello{transition:filter .08s linear}
/* Relumbre: el destello del rayo que pasa POR ENCIMA de las ventanas (tope 0,09). */
.z-relumbre{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 50% 0%,#e8efff,rgba(232,239,255,.35) 60%,transparent);mix-blend-mode:screen}
@media (prefers-reduced-motion:reduce){.z-relumbre{display:none}}
@media print{.z-fondo,.z-fondo-vivo,.z-relumbre{display:none}}


/* =========================================================================
   11. ESTRUCTURA DEL RECTOR/ERP CON LA ESENCIA DE ZEUS (2026-10-01, 22:16)
   Hidalgo, con la captura del Rector al lado: «te dije que se tenía que ver así pero
   con la esencia de Zeus». Faltaba lo que más se ve del ERP: la ESTRUCTURA. Barra
   superior de tres filas sobre el paisaje (marca+buscador+herramientas · módulos ·
   apartados en píldoras), y debajo la HOJA clara con miga y título grande.
   La esencia de Zeus: la línea de la hoja no es el arcoíris Montessori sino una
   CORRIENTE eléctrica que recorre el borde (luz de la paleta), el logo del grupo,
   la tipografía Space Grotesk y el rayo en Apariencia.
   El riel lateral queda OCULTO en escritorio pero vivo en el DOM: es la fuente de
   verdad de la navegación y la barra lo espeja (ver zeus-entorno.js).
   ========================================================================= */
html.z-con-barra[data-paisaje]:root body .app .rail{display:none!important}
html.z-con-barra[data-paisaje]:root body .app .rail.open{display:flex!important}
.z-barra{position:sticky;top:0;z-index:40;
  background:rgba(var(--p-barra),.80);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);
  border-bottom:1px solid rgba(255,255,255,.14);color:#FFFFFF;
  box-shadow:0 14px 34px -22px rgba(2,6,18,.75)}
html[data-theme="dark"] .z-barra{background:rgba(var(--p-barra),.88)}
.z-barra :is(button,a){font:inherit;color:inherit}
.z-barra-f1{display:grid;grid-template-columns:auto minmax(220px,520px) 1fr;align-items:center;gap:18px;padding:12px 28px}
.z-marca{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.z-marca-ico{width:42px;height:34px;border-radius:9px;background:#FFFFFF;display:grid;place-items:center;flex:none;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.6)}
.z-marca-ico img{width:26px;height:26px;object-fit:contain}
.z-marca-txt{display:grid;line-height:1.18}
.z-marca-txt b{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.01em}
.z-marca-txt i{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.84)}
.z-busca{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);text-align:left;width:100%;min-width:0;
  transition:background-color .2s ease,border-color .2s ease}
.z-busca:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.z-busca svg{width:16px;height:16px;flex:none;opacity:.9}
.z-busca span{flex:1;min-width:0;font-size:13.5px;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z-busca kbd{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.4);color:#FFFFFF;background:rgba(255,255,255,.08)}
.z-herr{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.z-ic{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;min-width:38px;padding:0 10px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);color:#FFFFFF}
.z-ic:hover{background:rgba(255,255,255,.20)}
.z-ic svg{width:17px;height:17px}
.z-ic-txt span{font-size:13px;font-weight:600}
.z-aparbtn-sitio{display:contents}
.z-barra .z-aparbtn{width:auto;height:38px;border-radius:9px}
.z-quien{display:flex;align-items:center;gap:9px;margin:0 2px 0 6px;min-width:0}
.z-ava{width:30px;height:30px;border-radius:50%;background:#FFFFFF;color:rgb(var(--p-barra));display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.z-quien-t{display:grid;line-height:1.2;min-width:0}
.z-quien-t b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.z-quien-t i{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.84);white-space:nowrap}
.z-barra-f2{display:flex;align-items:stretch;gap:4px;padding:0 22px;border-top:1px solid rgba(255,255,255,.12);overflow-x:auto;scrollbar-width:none}
.z-barra-f2::-webkit-scrollbar{display:none}
.z-mod{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:0;background:none;cursor:pointer;white-space:nowrap;
  color:rgba(255,255,255,.9)!important;font-size:14px;font-weight:500;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;
  transition:background-color .2s ease,border-color .2s ease}
.z-mod svg{width:17px;height:17px;opacity:.9}
.z-mod:hover{background:rgba(255,255,255,.10)}
.z-mod.activo{color:#FFFFFF!important;font-weight:600;border-bottom-color:var(--p-luz)}
.z-mod.activo svg{opacity:1;color:var(--p-luz)}
.z-barra-f3{display:flex;align-items:center;gap:8px;padding:10px 28px 12px;border-top:1px solid rgba(255,255,255,.12);overflow-x:auto;scrollbar-width:none;min-height:24px}
.z-barra-f3:empty{display:none}
.z-barra-f3::-webkit-scrollbar{display:none}
.z-sec{height:38px;padding:0 15px;border-radius:999px;border:1px solid transparent;background:none;cursor:pointer;white-space:nowrap;
  color:rgba(255,255,255,.9)!important;font-size:13.5px;font-weight:500;transition:background-color .2s ease,border-color .2s ease}
.z-sec:hover{background:rgba(255,255,255,.12)}
.z-sec.activo{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42);color:#FFFFFF!important;font-weight:600}
/* la «corriente»: un hilo de luz que recorre el borde inferior de la barra */
.z-corriente{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.z-corriente::before{content:"";position:absolute;inset:0;width:28%;
  background:linear-gradient(90deg,transparent,var(--p-luz),#FFFFFF,var(--p-luz),transparent);
  animation:z-corriente 6.5s cubic-bezier(.45,0,.2,1) infinite;opacity:.9}
@keyframes z-corriente{from{transform:translateX(-110%)}to{transform:translateX(460%)}}

/* ---- la HOJA de la pantalla (miga + título grande), como en el Rector ---- */
html.z-con-barra[data-paisaje]:root body .app .wrap{max-width:1560px;padding:22px 28px 90px}
html.z-con-barra[data-paisaje]:root body .app .pagehead{
  position:relative;overflow:hidden;
  background:color-mix(in srgb,#FFFFFF 92%,transparent)!important;
  border:1px solid rgba(255,255,255,.7)!important;border-radius:18px;padding:22px 24px 18px!important;
  box-shadow:0 18px 40px -26px rgba(4,10,24,.7)!important}
html.z-con-barra[data-paisaje][data-theme="dark"]:root body .app .pagehead{
  background:color-mix(in srgb,#0A1220 92%,transparent)!important;border-color:rgba(150,190,255,.16)!important}
/* la línea de arriba: la corriente de Zeus (no el arcoíris del colegio) */
html.z-con-barra[data-paisaje]:root body .app .pagehead::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--p-hondo),var(--p-acento) 30%,var(--p-luz) 50%,var(--p-acento) 70%,var(--p-hondo));
  background-size:200% 100%;animation:z-hilo 9s linear infinite}
@keyframes z-hilo{to{background-position:-200% 0}}
/* La hoja tiene SU propia tinta: `--text` en el entorno paisaje es la letra que va
   SOBRE la foto (blanca), y en día eso dejaba el título a 1,25:1 sobre la hoja clara.
   Medido con la hoja al 92 % sobre el peor fondo: tinta 15,3:1 · muted 7,3:1 · acento 8,1:1;
   noche: 16,7 · 10,7 · 8,9. */
html.z-con-barra[data-paisaje]:root body .app .pagehead{--hoja-tinta:#0B1526;--hoja-muted:#3E4C63;--hoja-acento:#18408f}
html.z-con-barra[data-paisaje][data-theme="dark"]:root body .app .pagehead{--hoja-tinta:#EAF1FF;--hoja-muted:#B7C4DA;--hoja-acento:#8fb0ff}
html.z-con-barra[data-paisaje]:root body .app .pagehead,
html.z-con-barra[data-paisaje]:root body .app .pagehead *{color:var(--hoja-tinta)!important}
html.z-con-barra[data-paisaje]:root body .app .pagehead :is(.sub,#pageSub,.z-miga,.z-miga i,.liveflag *){color:var(--hoja-muted)!important}
html.z-con-barra[data-paisaje]:root body .app .pagehead .z-miga .z-miga-raiz{color:var(--hoja-acento)!important}
html.z-con-barra[data-paisaje]:root body .app .pagehead :is(h1,#pageTitle){
  color:var(--hoja-tinta)!important;-webkit-text-fill-color:currentColor!important;font-size:40px!important;letter-spacing:-.03em!important}
html.z-con-barra[data-paisaje]:root body .app .pagehead :is(.sub,#pageSub){color:var(--muted)!important;margin-top:4px}
html.z-con-barra[data-paisaje]:root body .app .pagehead #pageEyebrow{display:none}
html.z-con-barra[data-paisaje]:root body .app .pagehead .liveflag{background:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--text)!important}
html.z-con-barra[data-paisaje]:root body .app .pagehead .liveflag *{color:var(--muted)!important}
html.z-con-barra[data-paisaje]:root body .app .pagehead .liveflag .dot{background:var(--p-acento)!important}
html.z-con-barra[data-paisaje]:root body .app .pagehead .themebtn--lbl{display:none!important}
.z-miga{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.z-miga i{font-style:normal;opacity:.7}
.z-miga .z-miga-raiz{color:var(--p-acento);font-weight:600}
/* las píldoras que estaban sueltas sobre el paisaje ahora heredan el tono de la hoja */
html.z-con-barra[data-paisaje]:root body .app :is(.filters,.phasetabs,.secrow){
  background:color-mix(in srgb,var(--surface) 100%,transparent)!important}

/* ZEO vivía sobre el riel (abajo a la izquierda). Sin riel en escritorio quedaba encima
   de la primera cifra: su sitio por defecto pasa a la derecha, sobre el dock de llamada.
   Si la persona ya lo arrastró, su posición guardada (style.left/top) manda. */
@media (min-width:761px){
  html.z-con-barra[data-paisaje]:root body .zeo-root:not([style*="left"]){left:auto;right:26px;bottom:96px}
}
/* Avisos de espera que se pintan sueltos dentro de una sección (sin tarjeta): sobre el
   paisaje quedaban gris sobre foto. Llevan su píldora, como todo texto sobre el fondo. */
html[data-paisaje]:root body .app :is(.zredes__wait,.fwait,section > .state p,section > .hint,section > .empty-inline){
  display:inline-block;background:var(--surface)!important;border:1px solid var(--border);
  border-radius:999px;padding:6px 14px!important;color:var(--muted)!important;
  -webkit-backdrop-filter:var(--z-blur);backdrop-filter:var(--z-blur)}
/* Pestaña activa en día: el `--oro-bg` (acento al ~10 %) sobre la píldora de vidrio la
   dejaba en 4,34–4,45:1 en cuatro fondos. Lleva su tinta propia, la misma de la hoja. */
html[data-paisaje]:not([data-theme="dark"]):root body .app :is(.phasetab,.skilltab).active{
  color:#0B1526!important;background:color-mix(in srgb,#FFFFFF 70%,var(--p-acento,#2448a8) 12%)!important}
/* ---- móvil y tablet: la barra de tres filas no cabe; manda la barra móvil + bottom-nav ---- */
@media (max-width:760px){
  .z-barra{display:none}
  html.z-con-barra[data-paisaje]:root body .app .wrap{padding:13px 13px 90px}
  html.z-con-barra[data-paisaje]:root body .app .pagehead :is(h1,#pageTitle){font-size:24px!important}
}
@media (max-width:1100px){
  .z-quien-t,.z-ic-txt span{display:none}
  .z-barra-f1{grid-template-columns:auto 1fr auto;gap:12px;padding:10px 18px}
}
@media (prefers-reduced-motion:reduce){
  .z-corriente::before,html.z-con-barra[data-paisaje]:root body .app .pagehead::before{animation:none}
}


/* =========================================================================
   12. PULIDO (ronda 1 del barrido 2026-10-01)
   ========================================================================= */
/* Regla del DESIGN.md: ninguna etiqueta por debajo de 11 px. El barrido encontró 9–10,5 px
   en el chip «Datos demo», la placa de ZEO, «mejor interacción» y las cabeceras de Logs. */
html[data-paisaje]:root body :is(.liveflag span,#zeoBubble .zb-t,.zplaca .zp-best,.zplaca .zp-sel,
  .logt th){font-size:11px!important}
html[data-paisaje]:root body .logt th{letter-spacing:.04em}
/* Los títulos de carril de autonomía llevaban el color fijo del tema claro: 2,8:1 de noche. */
.carril-t{font-weight:800;margin-bottom:4px}
.carril-t--amarillo{color:#8A5A12}
.carril-t--rojo{color:#B3261E}
html[data-theme="dark"] .carril-t--amarillo{color:#F0B44E}
html[data-theme="dark"] .carril-t--rojo{color:#FF9A90}

/* Las reglas de tipografía de arriba perdían contra skins viejos con !important: el barrido
   midió 1,76 px de interletrado en los ojos de sección y versalitas falsas por MAYÚSCULAS.
   Se fijan con la misma fuerza, en el mismo ámbito. */
html[data-paisaje]:root body :is(.eyebrow,.rail__sec,.score .k,.sem,.fok,.fwait,.fbad,.secrow .eyebrow){
  letter-spacing:.04em!important;font-variant-caps:all-small-caps!important;text-transform:none!important;
  font-family:var(--font)!important;font-weight:650!important}
html[data-paisaje]:root body .score .v{letter-spacing:-.025em!important;font-family:var(--display)!important;
  font-variant-numeric:tabular-nums!important;font-weight:650!important}
html[data-paisaje]:root body .score .d{font-family:var(--font)!important;letter-spacing:0!important;font-variant-numeric:tabular-nums}
html[data-paisaje]:root body .liveflag,html[data-paisaje]:root body .liveflag *{letter-spacing:.01em!important}

/* El numerito de sección («01», «02»…) delante de cada título es un tic de plantilla: no
   ordena nada que el título no ordene ya. Fuera, en todas las vistas. */
html[data-paisaje]:root body .secrow > .eyebrow:first-child{display:none!important}
/* El sello de build («dashboard completo · 2026-07-21») es información interna: no va en la
   cabecera que ve la dirección. Queda en el título del elemento por si alguien lo necesita. */
html[data-paisaje]:root body .pagehead .liveflag .buildstamp{display:none!important}
/* La nota del periodo de KPIs vive sobre el paisaje: lleva su píldora, como todo texto suelto. */
html[data-paisaje]:root body :is(#kpiPeriodoNota,#empKpiNota){display:inline-block;
  background:var(--surface)!important;border:1px solid var(--border);border-radius:999px;
  padding:5px 12px!important;color:var(--muted)!important;opacity:1!important;margin:0 0 12px!important;
  -webkit-backdrop-filter:var(--z-blur);backdrop-filter:var(--z-blur)}

/* Cabeceras de segundo nivel (la de cada empresa, el héroe del Cerebro): reciben la MISMA
   hoja y la misma tinta que la cabecera principal. Antes heredaban la letra blanca del
   paisaje sobre una hoja clara (1,14–1,25:1, medido). */
html[data-paisaje]:root body .app :is(#content .pagehead,.cerebro-hero){
  --hoja-tinta:#0B1526;--hoja-muted:#3E4C63;--hoja-acento:#18408f;
  background:color-mix(in srgb,#FFFFFF 92%,transparent)!important;
  border:1px solid rgba(255,255,255,.7)!important;border-radius:18px;padding:18px 22px!important;
  box-shadow:0 18px 40px -26px rgba(4,10,24,.7)!important}
html[data-paisaje][data-theme="dark"]:root body .app :is(#content .pagehead,.cerebro-hero){
  --hoja-tinta:#EAF1FF;--hoja-muted:#B7C4DA;--hoja-acento:#8fb0ff;
  background:color-mix(in srgb,#0A1220 92%,transparent)!important;border-color:rgba(150,190,255,.16)!important}
html[data-paisaje]:root body .app :is(#content .pagehead,.cerebro-hero),
html[data-paisaje]:root body .app :is(#content .pagehead,.cerebro-hero) *{color:var(--hoja-tinta)!important}
html[data-paisaje]:root body .app :is(#content .pagehead,.cerebro-hero) :is(.sub,.csub,.eyebrow){color:var(--hoja-muted)!important}
/* Tono ámbar del carril de autonomía: un escalón más hondo sobre vidrio (era 4,45:1). */
.carril-t--amarillo{color:#7A4F0E}

/* Cabecera de KPIs en UNA fila: título · periodo · nota. Antes tres píldoras sueltas
   apiladas sobre el paisaje — se leía como tres cosas distintas. */
.kpihead{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:22px 0 14px;
  padding:10px 12px 10px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--border);
  -webkit-backdrop-filter:var(--z-blur);backdrop-filter:var(--z-blur)}
.kpihead .secrow{margin:0!important;padding:0!important;background:none!important;border:0!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.kpihead .secrow h2{margin:0;font-size:19px}
.kpihead .secrow h2 span{font-weight:500;color:var(--muted)}
.kpihead .phasetabs{margin:0!important;padding:3px!important;background:var(--surface-2)!important;
  border:0!important;box-shadow:none!important}
.kpihead .kpinota{margin:0 0 0 auto;color:var(--muted);font-size:13px}
html[data-paisaje]:root body .kpihead :is(.kpinota,#kpiPeriodoNota,#empKpiNota){background:none!important;
  border:0!important;padding:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  font-variant-caps:normal!important;letter-spacing:0!important}
@media (max-width:760px){ .kpihead .kpinota{margin-left:0;flex-basis:100%} }
/* «Volver al portafolio»: la barra superior y la ruta ya llevan de vuelta. Sobraba. */
html.z-con-barra[data-paisaje]:root body #backToPort{display:none!important}
@media (max-width:760px){ html.z-con-barra[data-paisaje]:root body #backToPort{display:inline-flex!important} }
/* En la vista de una empresa el título principal ya nombra la marca; la ficha de abajo
   pasa a ser una franja de identidad (sector, objetivo, cuenta y salud), no otro titular. */
html[data-paisaje]:root body .app #content #empBody > .pagehead h1{font-size:26px!important;margin:0 0 2px!important}