/* =====================================================================================================================
   DISEÑO DE ÁLVARO (revisión del portal del cliente del 26-oct, §2 y §5; docs/DISENO_ALVARO_2026-10.md)
   Va la ÚLTIMA en todas las pantallas. Los valores salen de tokens.css (la primera); aquí solo se decide QUÉ token usa cada
   pieza. Lo que hace, por partes:
     0. las variables antiguas (--f-*, --q-*) apuntan a los tokens: un solo juego de colores y familias
     1. jerarquía de Álvaro: título de pantalla 24, titular 32, título de bloque 20, cuerpo 16, secundario 14, notas 12,
        cifra principal 40; etiquetas en --ink-2, nunca párrafos en gris claro; todas las cifras tabulares
     2. la barra de grados (componente 2), que sustituye al velocímetro y a la tarjeta inclinada
     3. Bancos en cuatro pantallas (§2): sus pestañas, las de cada sección
     4. la Mesa plegada (§2): por defecto, estado, coste efectivo, veredicto y una acción; lo demás, en «Más acciones»
     5. sin adornos de otro estilo (§5, componente 8): el fondo al 3 %, sin tarjetas inclinadas ni franjas de texto repetido
   Lenguaje del fundador (lienzo sin fichas, paleta tonal, sin verde): nada de tarjetas blancas con borde; las piezas nuevas se
   agrupan con tono, espacio y filetes finos.
   ESPECIFICIDAD: cada regla del sistema va con `:not(#dz)` (el peso de un id) para ganar a las reglas por pantalla de las
   capas anteriores (pulido4 usa `:not(#p4)`, el mismo peso: gana esta por ir después) sin usar !important.
   ===================================================================================================================== */

/* ---------------------------------------------------------------- 0. variables antiguas → tokens */
body.app,body.app.shell,body.app.publico{
  --f-sans:var(--font-sans); --f-serif:var(--font-sans); --q-f-cifra:var(--font-sans);
  --f-tinta:var(--ink); --f-tinta-2:var(--ink); --f-suave:var(--ink-2); --f-tenue:var(--ink-2);
  --f-acento:var(--primary); --f-acento-2:var(--primary-2);
  --f-ok:var(--ok); --f-warn:var(--warn); --f-ko:var(--bad);
  --q-tinta:var(--ink); --q-tinta-2:var(--ink); --q-suave:var(--ink-2); --q-tenue:var(--ink-2);
  --q-acento:var(--primary); --q-acento-osc:var(--primary-2); --q-ok:var(--ok); --q-warn:var(--warn); --q-ko:var(--bad);
  --q-1:var(--space-1); --q-2:var(--space-2); --q-3:var(--space-3); --q-4:var(--space-4); --q-5:var(--space-5);
  --q-6:var(--space-6); --q-7:var(--space-7);
  --q-r-s:var(--radius-control); --q-r:var(--radius-control); --q-r-l:var(--radius-card);
  font-variant-numeric:var(--font-num);
}

/* ---------------------------------------------------------------- 1. jerarquía */
body.app.shell:not(#dz){font-size:var(--fs-base);line-height:var(--lh-texto);color:var(--ink)}
/* todas las cifras, tabulares (la Schibsted de la app solo ensancha los dígitos) */
body.app:not(#dz) :is(.kpi-v,.m-v,.cifra>b,.rx>b,.pr-kpi-v,.ia-kpi-v,.in-v,.dash-t td.v,.dash-t td.num,.contrib-v,.pts,b,strong,output){
  font-variant-numeric:var(--font-num)}
/* título de la pantalla (barra superior): 24 */
body.app.shell:not(#dz) .tb-titulo h1{font:var(--fw-semibold) var(--fs-lg)/var(--lh-titulo) var(--font-sans);color:var(--ink);letter-spacing:-.016em}
body.app.shell:not(#dz) .tb-titulo .app-sub{font:var(--fw-regular) var(--fs-sm)/1.4 var(--font-sans);color:var(--ink-2)}
/* el titular de cada pantalla: 32 */
body.app.shell:not(#dz) .app-contenido :is(.portada,.plan-cabina,.nivel,.bienvenida) .portada-texto>h2,
body.app.shell:not(#dz) .app-contenido :is(.portada,.nivel)>h2,
body.app.shell:not(#dz) .nv-cab h2{font:var(--fw-semibold) var(--fs-xl)/var(--lh-titulo) var(--font-sans);letter-spacing:-.022em;color:var(--ink)}
/* Inicio del acompañamiento: el estado del mes es una línea (Álvaro, §5: «empresa + estado del mes en una línea»), no un titular */
body.app.shell:not(#dz) .app-contenido .ia-mes .ia-estado{font:var(--fw-medium) var(--fs-lg)/1.3 var(--font-sans);letter-spacing:-.014em;color:var(--ink)}
body.app.shell:not(#dz) .app-contenido .ia-mes .ia-estado b{font-weight:var(--fw-semibold)}
body.app.shell:not(#dz) .app-contenido .portada-entradilla{font:var(--fw-regular) var(--fs-base)/1.55 var(--font-sans);color:var(--ink-2)}
body.app.shell:not(#dz) .app-contenido .portada-linea{font:var(--fw-medium) var(--fs-sm)/1.4 var(--font-sans);color:var(--ink-2)}
body.app.shell:not(#dz) .app-contenido .portada-linea .estado{font:var(--fw-semibold) var(--fs-sm)/1.4 var(--font-sans)}
/* título de bloque: 20; su explicación, 14 en --ink-2 */
body.app.shell:not(#dz) :is(.seccion-cab h3,.w-cab h3,.tarjeta-cab h3,.resultado>h3,.expres>h3){
  font:var(--fw-semibold) var(--fs-md)/1.3 var(--font-sans);letter-spacing:-.012em;color:var(--ink)}
body.app.shell:not(#dz) :is(.seccion-cab p,.w-cab .tenue,.tarjeta-cab p){font:var(--fw-regular) var(--fs-sm)/1.45 var(--font-sans);color:var(--ink-2)}
body.app.shell:not(#dz) :is(.seccion h4,.cov h4,.inv-comp h4){font:var(--fw-semibold) var(--fs-base)/1.35 var(--font-sans);color:var(--ink)}
/* tarjeta KPI (componente 1): etiqueta 14 --ink-2 · cifra 40 tabular · una frase · chip de estado */
body.app:not(#dz) :is(.m-et,.kpi-et,.pr-kpi-et,.cifra>span:first-child,.rx>span:first-child,.ia-kpi-et,.in-et){
  font:var(--fw-medium) var(--fs-sm)/1.35 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ink-2)}
body.app.shell:not(#dz) .app-contenido :is(.m-v,.ia-kpi-v,.in-v){font:var(--fw-semibold) var(--fs-kpi)/1.05 var(--font-sans);letter-spacing:-.03em;color:var(--ink)}
body.app.shell:not(#dz) .app-contenido :is(.cifra>b,.kpi-v,.pr-kpi-v){font-weight:var(--fw-semibold);font-size:var(--fs-xl);line-height:1.08;letter-spacing:-.026em;color:var(--ink)}
body.app.shell:not(#dz) .app-contenido .rx>b{font-weight:var(--fw-semibold);font-size:var(--fs-lg);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
body.app.shell:not(#dz) .app-contenido :is(.cifra>b,.m-v,.kpi-v,.rx>b,.ia-kpi-v,.in-v) small{font-size:.5em;font-weight:var(--fw-medium);letter-spacing:0;color:var(--ink-2)}
body.app:not(#dz) :is(.kpi-pie,.cifra>small,.pr-kpi>small,.rx>small,.m-pie,.ia-kpi>small,.in-pie){font:var(--fw-regular) var(--fs-sm)/1.45 var(--font-sans);color:var(--ink-2)}
/* notas legales y fuentes: 12, en --ink-2 (a 12 px nunca el gris claro) */
body.app:not(#dz) :is(.fine,.nota-fuente,.aviso-calif){font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2)}
/* <small> sin regla propia: el «smaller» del navegador daba 11,67 y 13,33 px; en la escala, 12 (las cifras con su unidad
   pequeña tienen su regla, más específica, a media altura de la cifra) */
:where(body.app) small{font-size:var(--fs-xs)}
body.app.shell.socio-vista:not(#dz) .socio-pd{font-size:var(--fs-sm)}
/* leyendas de gráfico de 13 px o más: el único sitio del gris claro */
body.app.shell:not(#dz) :is(.bgr-ley-escala,.rp-ext,.mp-ley,figcaption.leyenda){color:var(--muted)}
/* enlaces (componente 6): subrayado solo dentro del texto; las filas y los «ver más» señalan con flecha, sin subrayar */
body.app.shell:not(#dz) .app-contenido p a:not(.btn):not(.enlace-mas):not(.pista){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
body.app.shell:not(#dz) .app-contenido :is(.enlace-mas,.pista,.cab-mas){text-decoration:none}
/* las filas que son un enlace (un título y su línea debajo, con chevron): sin subrayar, la señal es el chevron y el hover */
body.app.shell:not(#dz) .app-contenido a:has(> b,> small,> span > b,> div > b){text-decoration:none}
body.app.shell:not(#dz) .app-contenido a:has(> b,> small,> span > b,> div > b) :is(b,small,span){text-decoration:none}
body.app.shell:not(#dz) .app-contenido a:has(> b,> small,> span > b,> div > b):hover :is(b){color:var(--primary)}
@media (max-width:620px){
  body.app.shell:not(#dz) .app-contenido :is(.portada,.plan-cabina,.nivel,.bienvenida) .portada-texto>h2,
  body.app.shell:not(#dz) .app-contenido :is(.portada,.nivel)>h2,
  body.app.shell:not(#dz) .nv-cab h2{font-size:var(--fs-lg)}
  body.app.shell:not(#dz) .app-contenido .ia-mes .ia-estado{font-size:var(--fs-md)}
  body.app.shell:not(#dz) .tb-titulo h1{font-size:var(--fs-md)}
  body.app.shell:not(#dz) .app-contenido :is(.m-v,.ia-kpi-v,.in-v){font-size:var(--fs-xl)}
  body.app.shell:not(#dz) .app-contenido :is(.cifra>b,.kpi-v,.pr-kpi-v){font-size:var(--fs-lg)}
}

/* páginas públicas: sus titulares eran de la Newsreader (serif fina); en la Schibsted, con algo más de peso */
body.app.publico:not(#dz) :is(h1,h2){font-family:var(--font-sans);font-weight:var(--fw-medium);letter-spacing:-.022em}

/* ---------------------------------------------------------------- 2. la barra de grados */
.bgr{margin:0;min-width:0;--bgr-alto:34px}
.bgr-bandas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bgr-banda{min-width:0;display:flex;flex-direction:column;gap:6px;--c:var(--banda-a)}
.bgr-banda.bgr-b{--c:var(--banda-b)}.bgr-banda.bgr-c{--c:var(--banda-c)}.bgr-banda.bgr-d{--c:var(--banda-d)}
.bgr-letra{font:var(--fw-semibold) var(--fs-sm)/1 var(--font-sans);color:var(--ink-2);padding-left:2px}
.bgr-banda.on .bgr-letra{color:var(--c)}
.bgr-grados{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.bgr-g{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:var(--bgr-alto);padding:4px 2px;border-radius:var(--radius-control);
  background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--ink-2);transition:background .25s,color .25s}
.bgr-banda .bgr-grados .bgr-g:first-child{border-radius:var(--radius-control) 3px 3px var(--radius-control)}
.bgr-banda .bgr-grados .bgr-g:last-child{border-radius:3px var(--radius-control) var(--radius-control) 3px}
.bgr-n{font:var(--fw-semibold) var(--fs-sm)/1 var(--font-sans);font-variant-numeric:var(--font-num)}
.bgr-pd{font:var(--fw-regular) var(--fs-xs)/1.2 var(--font-sans);color:var(--ink-2);white-space:nowrap;font-variant-numeric:var(--font-num)}
/* hoy: el grado lleno con el color de su banda y un punto encima */
.bgr-g.hoy{background:var(--c);color:#fff}
.bgr-g.hoy .bgr-pd{color:rgba(255,255,255,.88)}
.bgr-g.hoy::before{content:"";position:absolute;top:-9px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 2px var(--fondo-barra,#f4f5f7)}
/* al empezar: en gris (claro, con el número en tinta: distinto del de hoy a simple vista y legible) */
.bgr-g.ini{background:#c9ced7;color:var(--ink)}
.bgr-g.ini .bgr-pd{color:var(--ink)}
/* con el plan: marcado con el borde, sin relleno */
.bgr-g.meta{box-shadow:inset 0 0 0 2px var(--primary);color:var(--primary)}
.bgr-ley{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:10px;font:var(--fw-regular) var(--fs-sm)/1.4 var(--font-sans);color:var(--ink-2)}
.bgr-ley>span{display:inline-flex;align-items:center;gap:7px}
.bgr-ley i{display:inline-block;width:12px;height:12px;border-radius:3px}
.bgr-ley-hoy{color:var(--ink);font-weight:var(--fw-semibold)}
.bgr-ley-hoy i{background:var(--c,var(--primary))}
.bgr-ley-ini i{background:#c9ced7}
.bgr-ley-meta i{box-shadow:inset 0 0 0 2px var(--primary)}
.bgr-ley-escala{margin-left:auto}
.bgr-enlace{font-weight:var(--fw-semibold);color:var(--primary);text-decoration:none}
.bgr-compacta{--bgr-alto:12px}
.bgr-compacta .bgr-g{padding:0}
.bgr-compacta .bgr-n{display:none}
.bgr-compacta .bgr-g.hoy::before{display:none}
.bgr-con-pd{--bgr-alto:48px}
.bgr-titulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 14px;font:var(--fw-regular) var(--fs-sm)/1.4 var(--font-sans);color:var(--ink-2)}
.bgr-titulo b{font:var(--fw-semibold) var(--fs-base)/1.3 var(--font-sans);color:var(--ink)}
.bgr-titulo .enlace-mas{margin-left:auto}
.bgr-techo{margin:8px 0 0}
/* dónde va */
body.app:not(#dz) .portada:is(.con-barra,.portada-una){grid-template-columns:minmax(0,1fr)}
body.app:not(#dz) :is(.rating-barra,.plan-barra,.socio-barra,.nv-barra,.todo-barra,.inicio-barra){margin:18px 0 22px;max-width:880px}
body.app:not(#dz) .todo-score-barra{max-width:520px}
body.app.shell:not(#dz) .inicio-nota{grid-area:auto;align-self:start;margin:0;padding:4px 0 0;display:flex;flex-direction:column;gap:6px;
  background:none;box-shadow:none;transform:none;min-width:0}
body.app.shell:not(#dz) .inicio-nota :is(.in-et,.in-v,.in-pie){margin:0}
body.app.shell:not(#dz) .inicio-nota .in-pie b{color:var(--ink);font-weight:var(--fw-semibold)}
body.app.shell:not(#dz) .inicio-nota .bgr{margin:16px 0 4px}
body.app.shell:not(#dz) .inicio-nota figcaption{display:flex;flex-direction:column;gap:6px;margin-top:6px;font-size:var(--fs-sm)}
body.app.shell:not(#dz) .ia-kpi .bgr{margin:4px 0 2px;max-width:260px}
/* «¿De dónde sale?»: el cheurón a media altura del texto (en el móvil la zona táctil es más alta y se quedaba debajo) */
body.app.shell:not(#dz) .ia-piezas summary::after{top:calc(50% - 5px)}
@media (max-width:620px){
  .bgr{--bgr-alto:30px}
  .bgr-con-pd{--bgr-alto:30px}
  .bgr-con-pd .bgr-pd{display:none}
  .bgr-bandas{gap:4px}
  .bgr-ley-escala{margin-left:0}
}

/* ---------------------------------------------------------------- 3. Bancos en cuatro pantallas (§2) */
/* las pestañas son las de cada sección (.subpestanas, pulido5.css): aquí, que la de la pantalla no quede fuera en el móvil */
@media (max-width:640px){body.app.shell:not(#dz) .subpestanas a.on{scroll-margin-inline:16px}}

/* ---------------------------------------------------------------- 4. la Mesa plegada (§2) */
body.app.shell:not(#dz) .mesa-veredicto{margin:8px 0 0;font:var(--fw-medium) var(--fs-sm)/1.45 var(--font-sans);color:var(--ink-2)}
body.app.shell:not(#dz) .mesa-veredicto.lec-ok{color:var(--ok)}
body.app.shell:not(#dz) .mesa-veredicto.lec-warn{color:var(--warn)}
body.app.shell:not(#dz) .mesa-mas{margin-top:12px;border-top:1px solid var(--linea)}
body.app.shell:not(#dz) .mesa-mas>summary{padding:10px 24px 6px 0;font:var(--fw-medium) var(--fs-sm)/1.3 var(--font-sans);color:var(--primary)}
body.app.shell:not(#dz) .mesa-mas[open]>summary{color:var(--ink)}
body.app.shell:not(#dz) .mesa-mas .mesa-acciones{margin-top:4px}
body.app.shell:not(#dz) .mesa-accion-p{margin-top:12px}
body.app.shell:not(#dz) .mesa-nueva-pliegue>summary{display:inline-flex;align-items:center;gap:8px;padding:0 28px 0 0;font:var(--fw-semibold) var(--fs-base)/1.3 var(--font-sans);color:var(--primary)}
body.app.shell:not(#dz) .mesa-nueva-pliegue[open]>summary{margin-bottom:16px}

/* ---------------------------------------------------------------- 5. sin adornos de otro estilo (componente 8) */
/* el fondo con el patrón topográfico detrás de la barra lateral: al 3 % */
body.app.shell canvas.escena-fondo.lista{opacity:.03}
/* sin tarjetas que se inclinan al pasar el ratón ni franjas de texto repetido dentro de la app (siguen en el PDF) */
body.app.shell:not(#dz) [data-inclina],body.app.shell:not(#dz) [data-inclina]:hover{transform:none}
body.app.shell:not(#dz) :is(.talon-micro,.marcas,.microtexto){display:none}
/* el talón (cheque) que queda en la cartera del equipo: plano, sin giro ni bordes punteados (la misma regla que la tarjeta inclinada) */
body.app.shell:not(#dz) .talon,body.app.shell:not(#dz) .talon[data-objeto],body.app.shell:not(#dz) .talon[data-objeto]:hover{
  transform:none;box-shadow:none;background:rgba(59,90,150,.05);border-radius:var(--radius-card)}
body.app.shell:not(#dz) .talon::before,body.app.shell:not(#dz) .talon::after,body.app.shell:not(#dz) .talon>.p-brillo{display:none}

/* =====================================================================================================================
   ESTÉTICA FINAL (28-oct, antes del traslado al VPS nuevo; docs/ESTETICA_FINAL_2026-10.md). Las pantallas que la revisión de
   Álvaro no tocó (el portal del consultor, la consola, los niveles, el socio, la sala, el acceso, los errores y la primera
   experiencia), con el mismo sistema que las del cliente, y los requisitos de aspecto del consultor (Con-6.1 a 6.7) y del
   móvil (W46) de docs/socios/ALVARO_TRAZABILIDAD_2026-10-28.md. Solo presentación: ni cifras ni lógica.
     6. sin tics: ni etiquetas en mayúsculas espaciadas, ni pastillas para lo que no es un estado, ni iconos en círculo, ni verde
     7. el chip de estado (Con-6.3 y 6.4): Cumple · Al límite · No cumple con su icono; lo vencido, con sus días
     8. el portal del consultor: densidad de herramienta (Con-6.1), sin la tarjeta del ahorro (6.2), el protocolo (6.5) y los
        avatares por papel (6.6)
     9. la consola de administración y las pantallas del equipo
    10. la primera experiencia: acceso y alta, la bienvenida, la subida con su progreso, lo que pasó con el envío y los vacíos
    11. movimiento: entre pantallas y pestañas, pliegues, la barra de grados al aparecer, el progreso (prefers-reduced-motion)
    12. móvil (W46)
   ===================================================================================================================== */

/* ---------------------------------------------------------------- 6. sin tics */
/* las etiquetas en mayúsculas espaciadas pasan a frase normal: la jerarquía la dan el tamaño, el peso y el tono */
body.app:not(#dz) :is(.rc-et,.rc-sig,.lg-et,.ge-col h4,.hs-tit,.lecturas-perfil h4,.lic-fin,.nv-et,.nv-col3 h3,.nv-tabla th,
  .mem-quien,.mem-kpis span,.com-campo,.com-kpis span,.sg-fuente,.talon-et,.sb-cifras dt,.sala-para span,.sala-dias legend,
  .sala-piezas legend,.v-tag,.hg-l,details.tec summary,.g-fig figcaption,.resultado .cat,.nav-grupo,.maq-sub,
  .sb-sec h2,.sb-cab-sala,.sala-eyebrow,.sala-tabla th){
  text-transform:none;letter-spacing:0}
/* la sala de datos que abre el banco: los títulos de sección, en frase y en tinta */
body.app.sala-banco:not(#dz) .sb-sec h2{font:var(--fw-semibold) var(--fs-base)/1.3 var(--font-sans);color:var(--ink)}
body.app.sala-banco:not(#dz) .sb-cab-sala{font:var(--fw-medium) var(--fs-sm)/1 var(--font-sans);color:var(--ink-2)}
body.app:not(#dz) .sala-eyebrow{font:var(--fw-semibold) var(--fs-sm)/1.3 var(--font-sans);color:var(--primary)}
body.app:not(#dz) :is(.rc-et,.nv-et){font:var(--fw-semibold) var(--fs-sm)/1.35 var(--font-sans);color:var(--ink)}
body.app:not(#dz) .rc-sig{font:var(--fw-medium) var(--fs-sm)/1.35 var(--font-sans);color:var(--ink-2)}
body.app:not(#dz) .nv-col3 h3{font:var(--fw-semibold) var(--fs-base)/1.35 var(--font-sans);color:var(--ink)}
body.app:not(#dz) .mem-quien{font:var(--fw-semibold) var(--fs-sm)/1.4 var(--font-sans)}
body.app:not(#dz) .resultado .cat{font:var(--fw-regular) var(--fs-sm)/1.4 var(--font-sans);color:var(--ink-2)}
/* etiquetas de dato (propuesto, fijado, la fuente, el nivel, la urgencia): rectángulo suave de 6 px, sin borde ni píldora */
body.app:not(#dz) :is(.mem-chip,.com-chip,.nv-chip,.mem-ej){display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border:0;border-radius:6px;
  font:var(--fw-semibold) var(--fs-xs)/1.5 var(--font-sans);background:rgba(28,35,51,.06);color:var(--ink-2);white-space:nowrap}
body.app:not(#dz) :is(.mem-chip.prop,.com-chip.media,.nv-chip.nv-prueba){background:var(--warn-fondo);color:var(--warn)}
body.app:not(#dz) :is(.mem-chip.ok,.com-chip.ok){background:var(--ok-fondo);color:var(--ok)}
body.app:not(#dz) :is(.mem-chip.ko,.com-chip.alta){background:var(--bad-fondo);color:var(--bad)}
body.app:not(#dz) .nv-chip:not(.nv-diagnostico):not(.nv-prueba){background:rgba(59,90,150,.09);color:var(--primary)}
body.app:not(#dz) .mem-ej{padding:4px 10px;font-weight:var(--fw-medium);cursor:pointer;transition:background-color .15s,color .15s}
body.app:not(#dz) .mem-ej:hover{background:rgba(59,90,150,.1);color:var(--primary)}
/* iconos en círculo: el icono, sin la moneda (los dispositivos de «Mi cuenta», la tarjeta de valor, la banda de «operar») */
body.app:not(#dz) :is(.nv-ico,.op-banda .op-ico,.ses-ico){width:auto;height:auto;background:none;box-shadow:none;border-radius:0}
/* sin verde (fundador, 9-oct): lo que aún quedaba en verde, al petróleo de «bien» o al acento */
body.app:not(#dz) .op-banda{background:linear-gradient(180deg,rgba(240,244,248,.97),rgba(231,237,243,.97));
  box-shadow:inset 0 -1px 0 rgba(45,107,138,.22),0 10px 22px -18px rgba(20,28,42,.55)}
body.app:not(#dz) .op-banda .op-ico{color:var(--ok)}
body.app:not(#dz) .op-banda .op-salir button{background:var(--ok);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px -6px rgba(29,70,92,.7)}
body.app:not(#dz) .op-banda .op-salir button:hover{background:#245a75}
body.app:not(#dz) .nivel-pasos li.hecho .nivel-punto{background:var(--ok);box-shadow:none}
body.app:not(#dz) .medida-barra .ok{background:linear-gradient(90deg,rgba(45,107,138,.45),var(--ok))}
body.app:not(#dz) .dropzona-caja.con-ficheros{color:var(--primary);box-shadow:inset 0 0 0 1.5px rgba(59,90,150,.45)}
body.app:not(#dz) :is(.tr-g,.esc-g,.maq-escalera>*):is(.g1,.g2){background:var(--banda-a);color:#fff}
body.app:not(#dz) :is(.tr-g,.esc-g,.maq-escalera>*):is(.g3,.g4){background:var(--banda-b);color:#fff}
body.app:not(#dz) .gt-ninguna{--c:#8a9cbd}
body.app:not(#dz) .ag-documento{--c:var(--ok)}
body.app:not(#dz) .fc-operar{background:rgba(59,90,150,.055);box-shadow:none}
body.app:not(#dz) .enrev-pasos li.hecho{background-image:linear-gradient(90deg,var(--ok),rgba(45,107,138,.25))}
body.app:not(#dz) .enrev-pasos li.hecho i{background:var(--ok)}
body.app.shell:not(#dz) .esc-item.esc-rec{background:rgba(45,107,138,.06)}
body.app.shell:not(#dz) .esc-cliente .esc-principal{background:linear-gradient(180deg,rgba(45,107,138,.06),rgba(45,107,138,.02));box-shadow:inset 0 0 0 1px rgba(45,107,138,.14)}
body.app:not(#dz) .p2-papel-socio{background:var(--ok-fondo);color:var(--ok)}
body.app:not(#dz) .ct-web tr.ct-on td{background:rgba(59,90,150,.06)}

/* ---------------------------------------------------------------- 7. el chip de estado (Álvaro, consultor §6.3 y §6.4) */
.chip-estado{display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 6px;border-radius:6px;vertical-align:baseline;
  font:var(--fw-semibold) var(--fs-xs)/1.5 var(--font-sans);white-space:nowrap;color:var(--ink-2);background:rgba(28,35,51,.06)}
.chip-estado .ico,.chip-estado svg{flex:none;width:12px;height:12px}
.chip-estado.chip-ok{color:var(--ok);background:var(--ok-fondo)}
.chip-estado.chip-warn{color:var(--warn);background:var(--warn-fondo)}
.chip-estado.chip-ko{color:var(--bad);background:var(--bad-fondo)}

/* ---------------------------------------------------------------- 8. portal del consultor */
/* Con-6.1, densidad de herramienta: filas de 40 px, texto de 14, cifras tabulares a la derecha */
body.app.shell:not(#dz) :is(.cartera-t,.pr-red,.p2-asig,.nv-tabla,.al-tabla,.sg-tabla) :is(td,th){padding-top:8px;padding-bottom:8px;line-height:1.4}
body.app.shell:not(#dz) :is(.cartera-t,.pr-red,.p2-asig,.nv-tabla,.al-tabla,.sg-tabla) td{font-size:var(--fs-sm)}
/* (solo mientras son tabla: cada una pasa a fichas por debajo de un ancho —las asignaciones y los niveles a 760 px, la red a
   1180, la Cartera a 1499—; con la fila fija, las fichas se montaban unas sobre otras) */
@media (min-width:761px){
  body.app.shell:not(#dz) :is(.p2-asig,.nv-tabla) tbody tr{height:40px}
  body.app.shell:not(#dz) .nv-tabla td.v{text-align:right}
}
@media (min-width:1181px){
  body.app.shell:not(#dz) .pr-red tbody tr{height:40px}
  body.app.shell:not(#dz) .pr-red td.v{text-align:right}
}
@media (min-width:1500px){
  body.app.shell:not(#dz) .cartera-t tbody tr{height:40px}
  body.app.shell:not(#dz) .cartera-t td.v{text-align:right}
}
body.app.shell:not(#dz) :is(.cartera-t,.pr-red,.nv-tabla) td.v{font-variant-numeric:var(--font-num)}
body.app.shell:not(#dz) .cartera-t td.et a b{font:var(--fw-semibold) var(--fs-sm)/1.35 var(--font-sans)}
body.app.shell:not(#dz) .cartera-t tbody tr{transition:background-color .15s}
body.app.shell:not(#dz) .cartera-t tbody tr:hover{background:rgba(59,90,150,.04)}
/* Con-6.1 y 6.2: la Cartera sin el titular en prosa (queda la línea de estado) ni la tarjeta «Ahorro de tu cartera», que repetía
   la cifra de los KPI */
body.app.shell:not(#dz) .cartera-portada .portada-texto>h2{display:none}
body.app.shell:not(#dz) .cartera-portada .talon{display:none}
body.app.shell:not(#dz) .cartera-portada{grid-template-columns:minmax(0,1fr)}
body.app.shell:not(#dz) .cartera-portada .portada-linea{margin-bottom:var(--space-4)}
/* Con-6.3, los KPI del servicio: la cifra en tinta, sin punto ni raya de color; el estado, en su chip junto al objetivo */
body.app:not(#dz) .pr-kpi{box-shadow:none;background:linear-gradient(90deg,var(--linea-2),var(--linea) 85%,transparent) 0 0/100% 1px no-repeat}
body.app:not(#dz) .pr-kpi-et::before{display:none}
body.app:not(#dz) .pr-kpi-et{font:var(--fw-medium) var(--fs-sm)/1.35 var(--font-sans);color:var(--ink-2)}
body.app:not(#dz) .pr-kpi .pr-kpi-v,body.app:not(#dz) .pr-kpi.pr-ko .pr-kpi-v{color:var(--ink)}
body.app:not(#dz) .pr-kpi small{font:var(--fw-regular) var(--fs-xs)/1.5 var(--font-sans);color:var(--ink-2)}
body.app:not(#dz) .pr-kpi .chip-estado{margin:2px 0 0;align-self:flex-start}
body.app:not(#dz) .pr-red td.pr-celda span{display:inline-flex;align-items:center;gap:4px}
body.app:not(#dz) .pr-red td.pr-ko span{color:var(--bad)}
body.app:not(#dz) .pr-red td.pr-warn span{color:var(--warn)}
/* Con-6.4: lo vencido, en chip rojo con sus días; lo que viene, en gris; quién responde, como etiqueta */
body.app:not(#dz) :is(.pr-toca,.pr-pasos)>li .pr-cuando{font:var(--fw-semibold) var(--fs-xs)/1.5 var(--font-sans);color:var(--ink-2);white-space:nowrap}
body.app:not(#dz) :is(.pr-toca,.pr-pasos)>li.pr-vencido .pr-cuando{display:inline-flex;align-self:flex-start;align-items:center;gap:4px;padding:1px 8px;
  border-radius:6px;color:var(--bad);background:var(--bad-fondo)}
body.app:not(#dz) .pr-quien{display:inline-flex;align-items:center;padding:0 6px;border-radius:6px;font:var(--fw-semibold) var(--fs-xs)/1.5 var(--font-sans);
  background:rgba(28,35,51,.06);color:var(--ink-2)}
body.app:not(#dz) .pr-quien.pr-quien-consultor{background:rgba(59,90,150,.09);color:var(--primary)}
body.app:not(#dz) .pr-quien.pr-quien-revisor{background:var(--ok-fondo);color:var(--ok)}
body.app:not(#dz) .pr-quien.pr-quien-cliente{background:var(--warn-fondo);color:var(--warn)}
/* Con-6.5, el protocolo: los vencidos de cada fase en una insignia roja; cada fase filtra sus pasos (static/app.js) */
body.app:not(#dz) .pr-fases .estado-ko{display:inline-flex;align-items:center;padding:0 6px;border-radius:6px;font-weight:var(--fw-semibold);
  color:#fff;background:var(--bad)}
body.app:not(#dz) .pr-fases li[data-fase]{cursor:pointer;border-radius:var(--radius-control);transition:background-color .15s}
body.app:not(#dz) .pr-fases li[data-fase]:hover{background:rgba(59,90,150,.05)}
body.app:not(#dz) .pr-fases li[data-fase]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
body.app:not(#dz) .pr-fases li.pr-fase-filtro b{color:var(--primary)}
body.app:not(#dz) .pr-fases li.pr-fase-filtro{background:rgba(59,90,150,.07)}
body.app:not(#dz) .pr-filtro-nota{margin:4px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
body.app:not(#dz) .pr-filtro-nota button{border:0;background:none;padding:0;font:inherit;font-weight:var(--fw-semibold);color:var(--primary);cursor:pointer}
body.app:not(#dz) .pr-pasos>li.pr-oculto{display:none}
/* Con-6.6, avatares con iniciales y color por papel: el equipo en el acento, el revisor en petróleo, el cliente en arena */
body.app:not(#dz) .p2-avatar{background:#e9edf3;color:var(--primary);box-shadow:inset 0 0 0 1px rgba(28,35,51,.06)}
body.app:not(#dz) :is(.p2-avatar-equipo,.p2-rol-principal,.p2-rol-apoyo,.p2-rol-sustituto,.p2-rol-consultor,.p2-rol-director){
  background:var(--primary);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
body.app:not(#dz) .p2-rol-revisor{background:var(--ok);color:#fff}
body.app:not(#dz) :is(.p2-avatar-titular,.p2-avatar-cliente,.p2-rol-titular,.p2-rol-operativo,.p2-rol-socio,.p2-rol-gestoria,.p2-rol-inversor){
  background:#efe5d3;color:var(--warn);box-shadow:inset 0 0 0 1px rgba(141,95,28,.14)}
body.app:not(#dz) .p2-avatar-baja{opacity:.5}
body.app:not(#dz) .vc-atajos-l .p2-avatar:not(.p2-avatar-equipo){background:#efe5d3;color:var(--warn);box-shadow:inset 0 0 0 1px rgba(141,95,28,.14)}
/* la memoria del cliente: las acciones de cada hecho, en voz baja hasta que pasas por la fila (o llegas con el teclado) */
@media (hover:hover){
  body.app:not(#dz) .mem-dec :is(.btn-ghost,.btn-sec){opacity:.5;transition:opacity .15s}
  body.app:not(#dz) .mem-hecho:is(:hover,:focus-within) .mem-dec :is(.btn-ghost,.btn-sec){opacity:1}
}
body.app:not(#dz) .mem-dec .btn-p{color:var(--primary);background:rgba(59,90,150,.1);box-shadow:none}
body.app:not(#dz) .mem-dec .btn-p:hover{background:rgba(59,90,150,.16)}
body.app:not(#dz) .mem-tres{gap:var(--space-2) var(--space-6)}
body.app:not(#dz) .mem-comprobacion{border-left:0;border-radius:var(--radius-control);background:var(--ok-fondo)}
body.app:not(#dz) .mem-comprobacion.ko{background:var(--bad-fondo)}
body.app:not(#dz) .mem-comprobacion .ico{color:var(--ok)}
body.app:not(#dz) .mem-comprobacion.ko .ico{color:var(--bad)}
body.app:not(#dz) .mem-col h4 .ico{color:var(--primary)}
/* las herramientas del equipo (y la consola): los botones primarios pequeños de las listas (Confirmar, Apruebo…) en tono, no
   llenos; el primario lleno se queda para la acción de la pantalla (Álvaro, §5, componente 5) */
body.app.shell:is(.equipo,.admin):not(#dz) .btn-p.btn-s{color:var(--primary);background:rgba(59,90,150,.1);box-shadow:none}
body.app.shell:is(.equipo,.admin):not(#dz) .btn-p.btn-s:hover{background:rgba(59,90,150,.17)}
/* la vista del socio: lo avalado y lo liberado, en tono (antes, dos tarjetas blancas con borde) */
body.app:not(#dz) .socio-vista .kpi-t.relieve,body.app.socio-vista:not(#dz) .kpi-t.relieve{background:rgba(28,35,51,.035);box-shadow:none;border:0;border-radius:var(--radius-card)}
body.app.socio-vista:not(#dz) .kpi-t.relieve.kpi-ko{background:var(--bad-fondo)}
body.app.socio-vista:not(#dz) .kpi-t.relieve.kpi-ok{background:var(--ok-fondo)}
/* la carta de traspaso y el guion: una hoja para leer, con el ancho de lectura */
body.app.shell:not(#dz) :is(.traspaso-carta,.guion-texto,.com-texto){max-width:78ch}

/* los niveles de servicio (FP_NIVELES): lo que hay en juego y los niveles, en tono, sin tarjetas blancas con borde; la tarjeta
   de valor de cada pantalla, sin la barra lateral */
body.app:not(#dz) .nv-cifras li{background:rgba(59,90,150,.05);box-shadow:none;border-radius:var(--radius-card)}
body.app:not(#dz) .nv-nivel{background:rgba(28,35,51,.035);box-shadow:none;border-radius:var(--radius-card)}
body.app:not(#dz) .nv-nivel.on{background:rgba(59,90,150,.09);box-shadow:inset 0 2px 0 var(--primary)}
body.app:not(#dz) .nv-tarjeta{box-shadow:none;background:rgba(59,90,150,.06);border-radius:var(--radius-card)}
body.app:not(#dz) .nv-tarjeta.nv-rol{background:rgba(28,35,51,.04)}

/* ---------------------------------------------------------------- 9. consola de administración y pantallas del equipo */
/* la barra lateral de la consola, como la de la app: grupos en frase normal, el ítem activo con su relieve */
body.app.shell.admin:not(#dz) .app-side .app-nav .nav-grupo{margin:18px 10px 4px;font:var(--fw-semibold) var(--fs-xs)/1.2 var(--font-sans);color:var(--ink-2)}
body.app.shell.admin:not(#dz) .admin-sub{font-size:var(--fs-xs);color:var(--ink-2)}
body.app.shell.admin:not(#dz) .app-side .app-nav a{min-height:36px;font-size:var(--fs-sm);font-weight:var(--fw-medium)}
body.app.shell.admin:not(#dz) .app-side .app-nav a.on{font-weight:var(--fw-semibold)}
body.app.shell.admin:not(#dz) .app-side-pie a{font-size:var(--fs-sm);color:var(--ink-2)}
body.app.shell.admin:not(#dz) .app-side-pie a:hover{color:var(--ink)}
/* la cabecera: el título de 24 y la línea de debajo en --ink-2 */
body.app.shell.admin:not(#dz) .app-cabecera .fine{font:var(--fw-regular) var(--fs-sm)/1.5 var(--font-sans);color:var(--ink-2)}
body.app.shell.admin:not(#dz) .app-usuario{font-size:var(--fs-xs)}
/* las cifras de cabecera de cada sección: 32 px tabulares, etiqueta de 14 */
body.app.shell.admin:not(#dz) .kpi-v{font:var(--fw-semibold) var(--fs-xl)/1.1 var(--font-sans);letter-spacing:-.02em;color:var(--ink)}
body.app.shell.admin:not(#dz) .kpi-et{font:var(--fw-medium) var(--fs-sm)/1.35 var(--font-sans);color:var(--ink-2)}
body.app.shell.admin:not(#dz) .kpi-pie{font:var(--fw-regular) var(--fs-sm)/1.45 var(--font-sans);color:var(--ink-2)}
/* «Ver la app como…»: cada persona en su fila, con el nombre entero (antes, cuatro columnas que partían «Titular de / Ebro») */
body.app:not(#dz) .vc-atajos .vc-atajos-l{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:0 var(--space-6)}
body.app:not(#dz) .vc-atajos-l li{padding:12px 0;border-bottom:1px solid var(--linea)}
body.app:not(#dz) .vc-atajo-txt b{font:var(--fw-semibold) var(--fs-sm)/1.35 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.app:not(#dz) .vc-atajo-txt small{font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
/* las tablas de la consola: cabecera en --ink-2 de 12, filas de 40 px, la fila se marca al pasar */
body.app.shell.admin:not(#dz) .dash-t tbody tr{transition:background-color .15s}
body.app.shell.admin:not(#dz) .dash-t tbody tr:hover{background:rgba(59,90,150,.035)}
body.app.shell.admin:not(#dz) .dash-t :is(td,th){padding-top:8px;padding-bottom:8px}
body.app.shell.admin:not(#dz) .dash-t td{font-size:var(--fs-sm);line-height:1.4}
body.app.shell.admin:not(#dz) .dash-t td.v{font-variant-numeric:var(--font-num)}
/* el Observatorio (su hoja propia, observatorio.css): su tinta y su gris, los de la app; sus etiquetas, sin píldora; los
   nombres técnicos (tablas, ficheros) en la escala, a 12 */
body.ob:not(#dz){--ob-tinta:var(--ink);--ob-tinta-2:var(--ink-2);--ob-suave:var(--ink-2);--ob-acero:var(--primary);--ob-ladrillo:var(--bad)}
body.ob:not(#dz) .ob-chip{border-radius:6px;letter-spacing:0}
body.app:not(#dz) :is(.ob-intro,.ob-f-det,.gb-consola .gb-intro,.gb-consola .fine,details.guia-equipo) code{font-size:var(--fs-xs)}
body.app:not(#dz) .gb-estado{border-radius:6px}
/* gobierno del modelo: los ceros de la matriz de la sombra, apagados pero legibles (antes, gris de filete: 2,8:1) */
body.app:not(#dz) .gb-cero{color:var(--muted)}
/* la guía del equipo («Cómo usar la consola / tu cartera»): un pliegue en tono, sin caja con borde */
body.app:not(#dz) details.guia-equipo{border:0;box-shadow:none;background:rgba(59,90,150,.05);border-radius:var(--radius-card)}
/* «Para qué sirve esta pantalla» (cliente): una franja en tono, sin borde */
body.app:not(#dz) .pq-texto{border:0;box-shadow:none;background:rgba(59,90,150,.055);border-radius:var(--radius-card)}
body.app:not(#dz) .pq-ico{color:var(--primary)}

/* ---------------------------------------------------------------- 10. primera experiencia */
/* acceso y alta: sin el sello giratorio (era del concepto «papel moneda»); en su lugar, la escala de ocho grados sin marcar */
body.app.publico:not(#dz) .auth-sello{display:none}
body.app.publico:not(#dz) .auth-escala{margin-top:var(--space-5);max-width:420px}
body.app.publico:not(#dz) .auth-escala figcaption{margin-top:10px;font:var(--fw-regular) var(--fs-sm)/1.5 var(--font-sans);color:var(--ink-2)}
body.app.publico:not(#dz) .auth-escala .bgr-g{min-height:28px}
/* los tres pasos del alta: el número en cifra, unido por un filete (sin moneda alrededor) */
body.app.publico:not(#dz) .auth-pasos{position:relative;gap:var(--space-5)}
body.app.publico:not(#dz) .auth-pasos li{position:relative;gap:var(--space-4)}
body.app.publico:not(#dz) .auth-pasos li>span{width:24px;height:auto;border-radius:0;background:none;box-shadow:none;place-items:start center;
  font:var(--fw-semibold) var(--fs-md)/1.1 var(--font-sans);color:var(--primary);font-variant-numeric:var(--font-num)}
body.app.publico:not(#dz) .auth-pasos li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:30px;bottom:calc(-1 * var(--space-5) + 4px);width:1px;background:rgba(59,90,150,.22)}
/* el doble factor y la invitación (acceso.html): el reloj del código activo en petróleo, no en verde; sin la franja de texto
   repetido de la invitación (componente 8 de Álvaro) */
body.app.publico:not(#dz) .p2-movil-ok .p2-movil-reloj i{background:linear-gradient(90deg,var(--ok),rgba(45,107,138,.5))}
body.app.publico:not(#dz) .p2-movil-ok .p2-movil-codigo{color:var(--ok)}
body.app.publico:not(#dz) .p2-invita-micro{display:none}
/* el móvil de muestra no flota (efecto sin función); su reloj de 30 s sí se mueve: dice cuándo cambia el código */
body.app.publico:not(#dz) .p2-movil{animation:none}
/* los dos pasos del alta del doble factor: el número en cifra, como el alta */
body.app:not(#dz) .p2-paso-n{width:22px;height:auto;border-radius:0;background:none;box-shadow:none;place-items:start center;
  font:var(--fw-semibold) var(--fs-md)/1.1 var(--font-sans);color:var(--primary);font-variant-numeric:var(--font-num)}
/* el pie del formulario: sus enlaces en línea (en el móvil, «aviso legal» se iba a otra línea con un hueco de 44 px) */
body.app.publico:not(#dz) .auth-pie a{display:inline;min-height:0;padding:0}
/* la bienvenida (empresa sin cuentas): los pasos con su número sin círculo, unidos por un filete; el activo, en el acento */
body.app.shell:not(#dz) .bv-paso{position:relative;grid-template-columns:32px minmax(0,1fr);gap:var(--space-4);padding:var(--space-5) 0;border-top:0}
body.app.shell:not(#dz) .bv-paso+.bv-paso{border-top:1px solid var(--linea)}
body.app.shell:not(#dz) .bv-n{width:32px;height:auto;border-radius:0;background:none;box-shadow:none;place-items:start center;
  font:var(--fw-semibold) var(--fs-lg)/1.1 var(--font-sans);color:var(--ink-2);font-variant-numeric:var(--font-num)}
body.app.shell:not(#dz) .bv-n .ico{width:22px;height:22px}
body.app.shell:not(#dz) .bv-form{align-items:end}
body.app.shell:not(#dz) .bv-paso.activo .bv-n{background:none;color:var(--primary)}
/* el camino de la primera nota (Inicio): el mismo número sin moneda que la bienvenida y el alta */
body.app.shell:not(#dz) .camino-n,body.app.shell:not(#dz) .camino-paso:first-child .camino-n{width:28px;height:auto;border-radius:0;background:none;
  box-shadow:none;place-items:start center;font:var(--fw-semibold) var(--fs-lg)/1.05 var(--font-sans);color:var(--ink-2);font-variant-numeric:var(--font-num)}
body.app.shell:not(#dz) .camino-paso:first-child .camino-n{color:var(--primary)}
body.app.shell:not(#dz) :is(.camino-ko .camino-n,.camino-paso.camino-ko:first-child .camino-n){background:none;color:var(--bad)}
body.app.shell:not(#dz) .bv-paso.hecho .bv-n{background:none;color:var(--ok)}
body.app.shell:not(#dz) .bv-cuerpo h3{font:var(--fw-semibold) var(--fs-md)/1.3 var(--font-sans);color:var(--ink)}
body.app.shell:not(#dz) .bv-cuerpo h3 small{font:var(--fw-regular) var(--fs-sm)/1.3 var(--font-sans);color:var(--ink-2)}
/* la zona para soltar las cuentas: un pozo en tono con su filete, que responde al arrastrar; nada de doble borde punteado */
body.app.shell:not(#dz) :is(.bv-zona,.dropzona-caja){border:0;border-radius:var(--radius-card);background:rgba(59,90,150,.045);
  box-shadow:inset 0 0 0 1.5px rgba(59,90,150,.24),inset 0 2px 6px rgba(28,35,51,.04);transform:none;
  transition:background-color .2s,box-shadow .2s}
body.app.shell:not(#dz) :is(.bv-zona,.dropzona-caja)::before{display:none}
body.app.shell:not(#dz) :is(.bv-zona,.dropzona-caja):is(:hover,.encima,.arrastrando){background:rgba(59,90,150,.08);
  box-shadow:inset 0 0 0 1.5px rgba(59,90,150,.55),inset 0 2px 6px rgba(28,35,51,.04)}
body.app.shell:not(#dz) :is(.bv-zona,.dropzona-caja):focus-within{box-shadow:inset 0 0 0 2px var(--primary),0 0 0 4px rgba(59,90,150,.14)}
body.app.shell:not(#dz) :is(.bv-zona,.dropzona-caja).con-ficheros{background:rgba(59,90,150,.08);box-shadow:inset 0 0 0 1.5px var(--primary)}
body.app.shell:not(#dz) .bv-zona{min-height:160px;color:var(--ink-2);font-size:var(--fs-sm)}
body.app.shell:not(#dz) .bv-zona b{color:var(--ink)}
body.app.shell:not(#dz) .bv-zona-ico{display:grid;place-items:center;color:var(--primary)}
/* mientras se sube: el formulario en pausa (la zona, atenuada) y el progreso debajo del botón */
body.app:not(#dz) form[aria-busy=true] :is(.dropzona-caja,.bv-zona){opacity:.55;pointer-events:none}
body.app:not(#dz) .subida-estado{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 10px;width:100%;max-width:560px;
  margin:var(--space-3) 0 0;padding:12px 14px;border-radius:var(--radius-card);background:rgba(59,90,150,.06);
  font:var(--fw-medium) var(--fs-sm)/1.45 var(--font-sans);color:var(--ink)}
body.app:not(#dz) .subida-estado[hidden]{display:none}
body.app:not(#dz) .subida-estado .subida-giro{margin:0}
body.app:not(#dz) .subida-estado .subida-seg{color:var(--ink-2);font-variant-numeric:var(--font-num);white-space:nowrap}
body.app:not(#dz) .subida-barra{grid-column:1 / -1;position:relative;display:block;height:3px;border-radius:3px;overflow:hidden;background:rgba(59,90,150,.14)}
body.app:not(#dz) .subida-barra i{position:absolute;inset:0 auto 0 0;width:32%;border-radius:3px;background:var(--primary)}
body.app:not(#dz) .subida-pasos{grid-column:1 / -1;margin:0;font:var(--fw-regular) var(--fs-xs)/1.5 var(--font-sans);color:var(--ink-2)}
body.app:not(#dz) .espera-nav{margin:0 0 var(--space-4)}
/* lo que ha pasado con el envío: leído en petróleo, con problema en ladrillo, el mismo lenguaje en todas las pantallas */
body.app:not(#dz) .lote{border-radius:var(--radius-card);background:rgba(59,90,150,.05);box-shadow:none;padding:16px 48px 14px 18px}
body.app:not(#dz) .lote-cab b{font:var(--fw-semibold) var(--fs-base)/1.35 var(--font-sans);color:var(--ink)}
body.app:not(#dz) .lote-cab span{color:var(--ink-2)}
body.app:not(#dz) .lote-lista li{font-size:var(--fs-sm);color:var(--ink)}
body.app:not(#dz) .lote-lista .lote-ko{color:var(--bad)}
body.app:not(#dz) .lote-lista .lote-ko span{color:var(--ink)}
body.app:not(#dz) .lote-lista .lote-ok .ico{color:var(--ok)}
body.app:not(#dz) .lote-guia .lg-et{font:var(--fw-semibold) var(--fs-sm)/1.4 var(--font-sans);color:var(--ink-2)}
/* un solo botón primario por pantalla (Álvaro, §5): el siguiente paso del envío, en secundario (el primario es el de la pantalla) */
body.app:not(#dz) .lote-guia .btn-p{color:var(--primary);background:#fff;box-shadow:inset 0 0 0 1px rgba(59,90,150,.32),0 1px 2px rgba(28,35,51,.06)}
body.app:not(#dz) .lote-guia .btn-p:hover{background:rgba(59,90,150,.06)}
body.app:not(#dz) .lote-falta a{text-decoration:none;font-weight:var(--fw-semibold)}
body.app:not(#dz) .lote-falta a:hover{text-decoration:underline;text-underline-offset:2px}
/* las franjas que piden algo (tu actividad, confirmar unas cuentas): en tono, sin caja ni barra lateral */
body.app.shell:not(#dz) :is(.franja-actividad,.franja-caja){border:0;box-shadow:none;background:rgba(59,90,150,.05)}
body.app:not(#dz) .franja-confirmar{align-items:center}
/* los estados vacíos: una frase en tinta suave con su icono en el acento, sin caja (la misma regla en toda la app) */
body.app:not(#dz) .vacio{color:var(--ink-2)}

/* ---------------------------------------------------------------- 11. movimiento: sobrio y con prefers-reduced-motion */
@media (prefers-reduced-motion:no-preference){
  /* entre pantallas de la app (y al cambiar de pestaña): un fundido corto del contenido; la barra lateral, la superior y la de
     pestañas no se mueven, y la marca de la pestaña activa se desliza hasta la nueva */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:cubic-bezier(.2,.75,.25,1)}
  body.app.shell .sb{view-transition-name:odilo-lateral}
  body.app.shell .tb{view-transition-name:odilo-cabecera}
  body.app.shell .tabbar{view-transition-name:odilo-barra}
  body.app.shell .subpestanas a.on{view-transition-name:odilo-pestana}
  body.app.shell.admin .app-side{view-transition-name:odilo-lateral}
  ::view-transition-group(odilo-pestana){animation-duration:.22s;animation-timing-function:cubic-bezier(.2,.75,.25,1)}
  ::view-transition-old(odilo-lateral),::view-transition-new(odilo-lateral),::view-transition-old(odilo-cabecera),
  ::view-transition-new(odilo-cabecera),::view-transition-old(odilo-barra),::view-transition-new(odilo-barra){animation:none}
  /* la barra de grados al aparecer: las ocho celdas entran de izquierda a derecha y el grado de hoy se llena después */
  .bgr .bgr-g{animation:bgr-celda .32s cubic-bezier(.2,.75,.25,1) both}
  .bgr .bgr-banda:nth-child(2) .bgr-g{animation-delay:40ms}.bgr .bgr-banda:nth-child(3) .bgr-g{animation-delay:80ms}
  .bgr .bgr-banda:nth-child(4) .bgr-g{animation-delay:120ms}
  .bgr .bgr-g.hoy{animation:bgr-celda .32s cubic-bezier(.2,.75,.25,1) both,bgr-hoy .5s .26s cubic-bezier(.2,.75,.25,1) both}
  .bgr .bgr-g.hoy::before{animation:bgr-punto .3s .5s cubic-bezier(.2,.75,.25,1) both}
  @keyframes bgr-celda{from{opacity:0;transform:translateY(4px)}}
  @keyframes bgr-hoy{from{background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--ink-2)}}
  @keyframes bgr-punto{from{opacity:0;transform:translateY(-4px) scale(.6)}}
  /* el progreso de la subida: un tramo que recorre la barra (indeterminado: no inventa un porcentaje) */
  body.app .subida-barra i{animation:subida-tramo 1.4s cubic-bezier(.45,0,.25,1) infinite}
  @keyframes subida-tramo{from{transform:translateX(-100%)}to{transform:translateX(320%)}}
  /* los estados que aparecen (lo que pasó con el envío, el progreso, el resultado de la subida): entran, no saltan */
  body.app :is(.lote,.subida-estado:not([hidden]),.franja-confirmar){animation:p-despliega .25s cubic-bezier(.2,.75,.25,1) both}
  /* la zona de subida responde al arrastrar con su color, no con un salto */
  body.app.shell :is(.bv-zona,.dropzona-caja){transition:background-color .2s,box-shadow .2s}
}
@media (prefers-reduced-motion:reduce){
  body.app .subida-barra i{left:0;width:100%;opacity:.5}
}

/* ---------------------------------------------------------------- 12. móvil (W46) */
@media (max-width:760px){
  /* los avisos de la pantalla (guardado, error, «nuevo inicio de sesión»): abajo, encima de la barra, sin tapar la cabecera */
  body.app.shell:not(#dz) .avisos{top:auto;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));max-width:none}
  body.app.shell.admin:not(#dz) .avisos{bottom:max(16px,env(safe-area-inset-bottom))}
  body.app:not(#dz) .subida-estado{max-width:none}
  body.app.shell:not(#dz) .bv-zona{min-height:120px}
  body.app:not(#dz) .vc-atajos .vc-atajos-l{grid-template-columns:minmax(0,1fr)}
  /* la barra de abajo: tantas columnas como secciones (el cliente, Inicio · Avisos · Mensajes · Más; el equipo, cinco) */
  body.app.shell:not(#dz) .tabbar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  /* el alta en el móvil: la escala del banco, al final, después de los pasos */
  body.app.publico.pul-registro:not(#dz) .auth-escala{order:5;margin-top:var(--space-3)}
}