/* =====================================================================================================================
   PULIDO 4 (20-oct, víspera de la prueba de los socios): de «app cuidada» a «producto financiero profesional». Va la ÚLTIMA,
   después de todas las hojas, y no cambia la dirección (lienzo sin fichas, paleta tonal, Schibsted en la app, movimiento con
   medida): pone UN SISTEMA donde las tres pasadas anteriores dejaron variantes por pantalla. Ni textos ni lógica.

   Medido antes (estilos computados en 14 pantallas): ~20 cuerpos de letra distintos entre 11,5 y 14,7 px y 7 pesos; el botón
   primario con 5 alturas (36-46 px), 4 radios (9-12 px) y 2 pesos según la pantalla; cifras clave en números proporcionales;
   la cabecera «título + explicación al lado» leída en una columna estrecha; los gráficos de Análisis con el texto a 6-7 px.

     0. tokens: escala tipográfica (8 pasos), espaciado (4-64), radios, foco y movimiento
     1. cifras: números tabulares en toda la interfaz (no en la prosa ni en los titulares)
     2. jerarquía: título de pantalla, cabecera de sección (título arriba, explicación debajo), etiqueta, cifra y pie de KPI
     3. mandos: un solo botón primario / secundario / fantasma, tres tamaños, mismos estados (hover, active, foco, deshabilitado)
     4. estados: punto con FORMA además de color (bien ●, atención ◆, mal ■) y la misma tipografía en toda la app
     5. tablas y listas: cabecera, filas, cifras alineadas, fila de total, hover
     6. gráficos: texto mínimo legible, trazos finos, rejilla y ejes discretos, sin sombras que compitan
     7. detalle: foco accesible, enlaces, vacíos, cargando, desplegables animados, movimiento reducido
     8. móvil (390 y 360 px)
     9. consola y lado del equipo al mismo nivel

   ESPECIFICIDAD: el sistema tiene que ganar a reglas por pantalla del tipo `body.app.shell :is(.app-contenido:has(>.pul-p),…)
   .btn` (0,5,1). En vez de !important, cada regla del sistema va con el prefijo `body.app:not(#p4)`, que suma el peso de un
   id (1,1,1): gana a cualquier regla de clases y sigue perdiendo ante !important y estilos en línea.
   ===================================================================================================================== */

/* ---------------------------------------------------------------- 0. tokens */
body.app{
  /* tipografía: micro · nota · secundario · cuerpo · entradilla · sección · pantalla · frase; cifras S · M · L */
  /* 26-oct (revisión de Álvaro, §5): estas variables apuntan ya a la escala única de tokens.css (12 · 14 · 16 · 20 · 24 · 32 ·
     40 px); se conservan los nombres para no tocar cada regla. */
  --q-fs-micro:var(--fs-xs);     /* cabeceras de tabla, leyendas, ejes */
  --q-fs-nota:var(--fs-sm);      /* etiquetas de KPI, notas, fechas */
  --q-fs-sec:var(--fs-sm);       /* texto secundario, celdas, botones */
  --q-fs-cuerpo:var(--fs-base);  /* cuerpo de la app */
  --q-fs-entrada:var(--fs-base); /* entradilla de portada */
  --q-fs-seccion:var(--fs-md);   /* título de sección */
  --q-fs-pantalla:var(--fs-lg);  /* título de la pantalla */
  --q-fs-frase:var(--fs-xl);     /* la frase de portada */
  --q-fs-cifra-s:var(--fs-md); --q-fs-cifra-m:var(--fs-lg); --q-fs-cifra-l:var(--fs-xl);
  --q-lh-cuerpo:1.55; --q-lh-titulo:1.25;
  /* espaciado (múltiplos de 4) */
  --q-1:4px; --q-2:8px; --q-3:12px; --q-4:16px; --q-5:24px; --q-6:32px; --q-7:48px; --q-8:64px;
  /* radios */
  --q-r-s:8px; --q-r:10px; --q-r-l:14px;
  /* tinta */
  --q-tinta:#1c2333; --q-tinta-2:#323b4e; --q-suave:#4c5568; --q-tenue:#5f687a; --q-acento:#3b5a96; --q-acento-osc:#2f4b80;
  --q-ok:#2d6b8a; --q-warn:#8d5f1c; --q-ko:#a8493c;
  --q-hilo:rgba(28,35,51,.08); --q-hilo-2:rgba(28,35,51,.14);
  /* foco: anillo doble (blanco + acento) que se ve sobre cualquier fondo */
  --q-foco:0 0 0 2px rgba(255,255,255,.95),0 0 0 4px rgba(59,90,150,.62);
  /* movimiento */
  --q-curva:cubic-bezier(.2,.7,.2,1); --q-t1:140ms; --q-t2:200ms; --q-t3:280ms;
}

/* ---------------------------------------------------------------- 1. cifras alineadas */
/* 26-oct: la Schibsted de la app (tools/fuente_cifras.py) solo hace tabulares los dígitos, así que las cifras van en la misma
   familia que el texto (antes, Inter). El sistema lo extiende a TODA cifra que se lee en columna o que cambia en vivo (listas de
   indicadores, simuladores, contadores, puntuaciones). */
body.app{--q-f-cifra:var(--font-sans)}
body.app:not(#p4) :is(.dash-t td.v,.dash-t td.num,.negocio-kpis li>b,.negocio-kpis li b:last-of-type,output,.sim-salida b,.badge-n,
  .contrib-v,.pts,.tabular,.p-tabular){font-family:var(--q-f-cifra);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums lining-nums}
/* las cifras de portada: proporcionales y de caja alta, con su ligero apretado */
body.app:not(#p4) :is(.kpi-v,.m-v,.cifra>b,.rx>b,.pr-kpi-v){font-variant-numeric:lining-nums proportional-nums}

/* ---------------------------------------------------------------- 2. jerarquía */
/* título de la pantalla (barra superior) y su línea de contexto */
body.app.shell:not(#p4) .tb-titulo h1{font:var(--fw-semibold) var(--q-fs-pantalla)/1.2 var(--font-sans);letter-spacing:-.016em;color:var(--q-tinta)}
body.app.shell:not(#p4) .tb-titulo .app-sub{font:var(--fw-medium) var(--q-fs-nota)/1.4 var(--font-sans);color:var(--q-tenue);letter-spacing:0}

/* la frase de portada: el titular de cada pantalla, lo primero que se lee */
body.app.shell:not(#p4) .app-contenido :is(.portada,.nivel) .portada-texto>h2,
body.app.shell:not(#p4) .app-contenido :is(.portada,.nivel)>h2{font:var(--fw-semibold) var(--q-fs-frase)/1.18 var(--font-sans);letter-spacing:-.024em;
  color:var(--q-tinta);text-wrap:balance}
body.app.shell:not(#p4) .app-contenido .portada-entradilla{font:var(--fw-regular) var(--q-fs-entrada)/1.6 var(--font-sans);color:var(--q-suave);max-width:64ch;text-wrap:pretty}
/* la cartera (consultor y director) tiene una frase más larga: un punto menos */
body.app.shell:not(#p4) .app-contenido .portada.cartera-portada .portada-texto h2{font-size:var(--fs-lg);line-height:1.24}

/* cabecera de sección: el título arriba, la explicación debajo a ancho de lectura y el enlace en la línea del título
   (antes: título y explicación lado a lado; la explicación se leía en una columna de 5-6 líneas) */
body.app.shell:not(#p4) .seccion-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--q-5);row-gap:var(--q-1);
  align-items:baseline;margin:0}
body.app.shell:not(#p4) .seccion-cab>*{grid-column:1;margin:0}
body.app.shell:not(#p4) .seccion-cab>:is(.enlace-mas,a.btn,.btn,form,.cab-acciones,.seg-control,.w-segmentos){grid-column:2;grid-row:1;
  justify-self:end;align-self:center;margin:0!important}
body.app.shell:not(#p4) .seccion-cab>.enlace-mas+.enlace-mas{grid-row:2;align-self:start}
body.app.shell:not(#p4) :is(.seccion-cab h3,.w-cab h3,.tarjeta-cab h3,.resultado>h3){font:var(--fw-semibold) var(--q-fs-seccion)/var(--q-lh-titulo) var(--font-sans);
  letter-spacing:-.012em;color:var(--q-tinta);text-wrap:balance}
body.app.shell:not(#p4) .seccion-cab>:is(p,span,small):not(.estado){font:var(--fw-regular) var(--q-fs-sec)/1.5 var(--font-sans);color:var(--q-tenue);
  max-width:72ch;text-wrap:pretty}
body.app.shell:not(#p4) .w-cab>:is(.tenue,small){font:var(--fw-regular) var(--q-fs-nota)/1.4 var(--font-sans);color:var(--q-tenue)}

/* KPI: etiqueta · cifra · pie, iguales en todas las pantallas */
body.app:not(#p4) :is(.m-et,.kpi-et,.pr-kpi-et,.cifra>span:first-child,.rx>span:first-child){
  font:var(--fw-semibold) var(--q-fs-nota)/1.35 var(--font-sans);letter-spacing:.004em;color:var(--q-tenue)}
body.app:not(#p4) :is(.kpi-pie,.cifra>small,.pr-kpi>small,.rx>small,.m-pie){font:var(--fw-regular) var(--fs-xs)/1.45 var(--font-sans);color:var(--q-tenue)}
/* cifras: L en la portada, M en las rejillas, S en listas */
body.app.shell:not(#p4) .app-contenido :is(.cifra>b,.m-v){font-weight:var(--fw-semibold);font-size:var(--q-fs-cifra-l);line-height:1.08;letter-spacing:-.028em;color:var(--q-tinta)}
body.app.shell:not(#p4) .app-contenido :is(.kpi-v,.pr-kpi-v,.rx>b){font-weight:var(--fw-semibold);font-size:var(--q-fs-cifra-m);line-height:1.1;letter-spacing:-.022em}
body.app.shell:not(#p4) .app-contenido :is(.cifra>b,.m-v,.kpi-v,.rx>b) small{font-weight:var(--fw-medium);font-size:.5em;letter-spacing:0;color:var(--q-tenue);margin-left:.12em}
body.app.shell:not(#p4) .app-contenido .pr-kpis-compacto .pr-kpi-v{font-size:var(--q-fs-cifra-s)}

/* notas y fuentes: un solo cuerpo */
body.app.shell:not(#p4) .app-contenido :is(.fine,.nota-fuente,p.fine){font-size:var(--q-fs-nota);line-height:1.55}

/* ritmo vertical: más aire entre secciones y el mismo en todas las pantallas */
body.app.shell:not(#p4) .seccion{gap:var(--q-4)}

/* ---------------------------------------------------------------- 3. mandos */
body.app:not(#p4) .btn{align-items:center;justify-content:center;gap:var(--q-2);min-height:38px;padding:7px 16px;
  border:0;border-radius:var(--q-r);font:var(--fw-semibold) var(--q-fs-sec)/1.15 var(--font-sans);letter-spacing:.004em;text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--q-t1) var(--q-curva),box-shadow var(--q-t2) var(--q-curva),background-color var(--q-t2),background var(--q-t2),
             color var(--q-t1),opacity var(--q-t2)}
body.app:not(#p4) .btn .ico{width:16px;height:16px;flex:none;stroke-width:1.9}
/* primario: un azul tinta con un degradado corto y un canto de luz */
body.app:not(#p4) .btn-p{color:#fff;background:linear-gradient(180deg,#5370ad 0%,#415d98 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(10,20,45,.16),0 0 0 1px rgba(38,56,98,.42),
             0 1px 2px rgba(20,28,42,.14),0 6px 14px -8px rgba(40,60,110,.5)}
body.app:not(#p4) .btn-p:hover{color:#fff;background:linear-gradient(180deg,#5977b5 0%,#4562a0 100%);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(10,20,45,.16),0 0 0 1px rgba(38,56,98,.42),
             0 2px 4px rgba(20,28,42,.12),0 12px 22px -12px rgba(40,60,110,.58)}
/* secundario: una tecla clara con filete */
body.app:not(#p4) :is(.btn-sec,.btn-s:not(.btn-p):not(.btn-ghost)){color:var(--q-tinta-2);
  background:linear-gradient(180deg,#fff,#f4f6f9);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,28,42,.11),0 1px 2px rgba(20,28,42,.06),0 4px 10px -7px rgba(20,28,42,.18)}
body.app:not(#p4) :is(.btn-sec,.btn-s:not(.btn-p):not(.btn-ghost)):hover{color:var(--q-acento-osc);background:#fff;
  transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(59,90,150,.3),0 2px 4px rgba(20,28,42,.06),0 8px 16px -10px rgba(20,28,42,.24)}
/* fantasma: solo el filete; se rellena al pasar */
body.app:not(#p4) .btn-ghost{color:var(--q-tinta-2);background:transparent;box-shadow:inset 0 0 0 1px rgba(20,28,42,.14)}
body.app:not(#p4) .btn-ghost:hover{color:var(--q-acento-osc);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(59,90,150,.3)}
/* pulsado, foco y deshabilitado: los mismos en los tres */
body.app:not(#p4) .btn:active{transform:translateY(0) scale(.985);transition-duration:70ms}
body.app:not(#p4) .btn-p:active{background:linear-gradient(180deg,#3f5a93,#3a5389)}
body.app:not(#p4) .btn:focus-visible{outline:0;box-shadow:var(--q-foco)}
body.app:not(#p4) :is(.btn[disabled],.btn[aria-disabled=true],.btn.desactivado){opacity:.48;cursor:not-allowed;transform:none;filter:saturate(.6)}
/* tamaños: pequeño (en tablas y filas de estado) y grande (la acción de una pantalla de acceso o de subida) */
body.app:not(#p4) :is(.btn-s,.mesa-estados .btn,.dash-t .btn,.btn-icono-txt){min-height:32px;padding:5px 12px;border-radius:var(--q-r-s);font-size:var(--q-fs-nota);gap:6px}
body.app:not(#p4) :is(.btn-s,.mesa-estados .btn,.dash-t .btn) .ico{width:14px;height:14px}
body.app:not(#p4) .btn-grande{min-height:46px;padding:10px 22px;border-radius:12px;font-size:var(--fs-base)}
body.app:not(#p4) .btn-grande .ico{width:17px;height:17px}
/* la flecha de los botones que llevan a otra pantalla avanza un poco al pasar */
body.app:not(#p4) .btn:hover .ico-flecha,body.app:not(#p4) .btn:hover>.ico:last-child:not(:first-child){transform:translateX(2px)}
body.app:not(#p4) .btn>.ico:last-child:not(:first-child){transition:transform var(--q-t2) var(--q-curva)}
/* acceso: los formularios de entrada con el botón grande y el mismo radio */
body.app.publico:not(#p4) .auth-form .btn-p{min-height:46px;border-radius:12px;font-size:var(--fs-base)}

/* botón de icono (cerrar, menú): cuadrado de 36, sin caja hasta que se pasa */
body.app:not(#p4) .btn-icono{display:inline-grid;place-items:center;min-width:36px;min-height:36px;padding:0;border-radius:var(--q-r);
  color:var(--q-suave);background:transparent;box-shadow:none;transition:background var(--q-t1),color var(--q-t1)}
body.app:not(#p4) .btn-icono:hover{background:rgba(28,35,51,.06);color:var(--q-tinta)}

/* enlaces de acción («Análisis →», «Ver todo →»): el mismo cuerpo y la misma flecha en toda la app */
body.app:not(#p4) .enlace-mas{align-items:center;gap:6px;font:var(--fw-semibold) var(--q-fs-sec)/1.3 var(--font-sans);color:var(--q-acento);
  text-decoration:none;transition:color var(--q-t1)}
body.app:not(#p4) .enlace-mas:hover{color:var(--q-acento-osc)}
body.app:not(#p4) .enlace-mas .ico{width:14px;height:14px;transition:transform var(--q-t2) var(--q-curva)}
body.app:not(#p4) .enlace-mas:hover .ico{transform:translateX(3px)}
body.app.shell:not(#p4) .w-cab .enlace-mas{font-size:var(--q-fs-nota)}

/* ---------------------------------------------------------------- 4. estados */
/* el color nunca va solo: el texto del estado y, además, la forma del punto (bien ●, atención ◆, mal ■, neutro ○) */
body.app:not(#p4) .estado{align-items:center;gap:7px;font:var(--fw-semibold) var(--q-fs-nota)/1.3 var(--font-sans);letter-spacing:.003em}
body.app:not(#p4) .estado::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
body.app:not(#p4) .estado-warn::before{width:6.5px;height:6.5px;border-radius:1px;transform:rotate(45deg)}
body.app:not(#p4) .estado-ko::before{width:7px;height:7px;border-radius:1.5px}
body.app:not(#p4) .estado-neutro::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
body.app:not(#p4) .estado-ok{color:var(--q-ok)}
body.app:not(#p4) .estado-warn{color:var(--q-warn)}
body.app:not(#p4) .estado-ko{color:var(--q-ko)}
body.app:not(#p4) .estado-neutro{color:var(--q-tenue)}
/* los estados que van dentro de un titular o una cifra conservan su cuerpo */
body.app:not(#p4) :is(h1,h2,h3,b,.linea-estado) .estado{font-size:inherit}
/* el contador del menú: cifra tabular centrada */
body.app:not(#p4) .badge-n{font-weight:var(--fw-semibold);letter-spacing:0}

/* ---------------------------------------------------------------- 5. tablas y listas */
body.app:not(#p4) .dash-t{border-collapse:collapse;font-size:var(--q-fs-sec)}
body.app:not(#p4) .dash-t th{font:var(--fw-semibold) var(--q-fs-micro)/1.3 var(--font-sans);letter-spacing:.01em;color:var(--q-tenue);text-transform:none;
  background:none;border-bottom:1px solid var(--q-hilo-2)}
body.app:not(#p4) .dash-t td{font-size:var(--q-fs-sec);line-height:1.45;border-bottom:1px solid var(--q-hilo)}
body.app:not(#p4) .dash-t :is(td.v,td.num){font-size:var(--q-fs-sec);font-weight:var(--fw-medium);color:var(--q-tinta)}
body.app:not(#p4) .dash-t tbody tr{transition:background-color var(--q-t1)}
body.app:not(#p4) .dash-t tbody tr:hover{background-color:rgba(255,255,255,.62)}
body.app:not(#p4) .dash-t tbody tr:last-child td{border-bottom-color:transparent}
/* fila de total: un filete más marcado arriba y la cifra en semi-negrita */
body.app:not(#p4) .dash-t tr.total td{border-top:1px solid var(--q-hilo-2);font-weight:var(--fw-semibold);color:var(--q-tinta)}

/* listas con cifra a la derecha (negocio, plazos, pendientes): filete fino y la cifra alineada */
body.app.shell:not(#p4) .negocio-kpis>li,body.app.shell:not(#p4) .feed>li{border-bottom-color:var(--q-hilo)}

/* ---------------------------------------------------------------- 6. gráficos */
/* nada por debajo de 10,5 px en pantalla en los gráficos que se ven a su tamaño (los de 1000 de ancho) */
body.app:not(#p4) svg:is(.g-calendario,.g-servicio,.g-caja,.g-precios,.g-contrib,.g-cascada) text:is([font-size="9"],[font-size="9.5"],[font-size="10"]){font-size:var(--fs-xs)}
/* trazos: las líneas de serie a 2 px, los puntos con su anillo blanco fino; los ejes y la rejilla, en un gris claro */
body.app:not(#p4) svg.g-caja polyline[stroke-width="2.4"]{stroke-width:2}
body.app:not(#p4) svg:is(.g-barras,.g-lineas) .cero{stroke:rgba(28,35,51,.16)}
/* las barras sin sombra proyectada: el volumen lo da el degradado, la sombra ensuciaba la lectura */
body.app:not(#p4) svg.g-barras rect[filter]{filter:none}
/* el radar: rejilla más fina y relleno más suave */
body.app:not(#p4) svg.g-radar line{stroke-width:.8}
/* textos de los gráficos: la misma familia y cifras de caja alta */
body.app:not(#p4) svg text{font-family:var(--font-sans);font-variant-numeric:lining-nums}

/* ---------------------------------------------------------------- 7. detalle */
/* foco: el mismo anillo doble en toda la app (enlaces, desplegables, mandos de formulario, filas que se abren) */
body.app:not(#p4) :is(a,summary,[tabindex]:not([tabindex="-1"]),label):focus-visible{outline:2px solid rgba(59,90,150,.62);outline-offset:3px;border-radius:6px}
body.app:not(#p4) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):focus-visible{outline:0;
  box-shadow:inset 0 0 0 1px rgba(59,90,150,.55),0 0 0 3px rgba(59,90,150,.18)}
body.app:not(#p4) :is(input[type=checkbox],input[type=radio]):focus-visible{outline:2px solid rgba(59,90,150,.62);outline-offset:2px}

/* enlaces dentro del texto: subrayado fino que se marca al pasar */
body.app:not(#p4) :is(p,li,dd,small,.fine,.nota-fuente) a:not(.btn):not(.enlace-mas):not([class*=sb-]){text-decoration-line:underline;
  text-decoration-thickness:1px;text-underline-offset:2.5px;text-decoration-color:rgba(59,90,150,.38);transition:text-decoration-color var(--q-t1),color var(--q-t1)}
body.app:not(#p4) :is(p,li,dd,small,.fine,.nota-fuente) a:not(.btn):not(.enlace-mas):not([class*=sb-]):hover{text-decoration-color:currentColor}

/* vacíos: frase en tono suave con su icono, sin caja; la misma en todas las pantallas */
body.app:not(#p4) .vacio{display:flex;align-items:flex-start;gap:10px;margin:0;padding:var(--q-3) 0;font:var(--fw-medium) var(--q-fs-sec)/1.55 var(--font-sans);color:var(--q-suave)}
body.app:not(#p4) .vacio .ico{flex:none;width:16px;height:16px;margin-top:2px;color:var(--q-acento);opacity:.8}

/* cargando: el botón que envía muestra un giro fino en su sitio, sin cambiar de tamaño */
body.app:not(#p4) .btn[aria-busy=true]{cursor:progress}
body.app:not(#p4) form[aria-busy=true]{cursor:progress}

/* desplegables: se abren y cierran con su altura (en los navegadores que lo permiten), en toda la app */
@supports selector(::details-content){
  @media (prefers-reduced-motion:no-preference){
    body.app:not(#p4) details{interpolate-size:allow-keywords}
    body.app:not(#p4) details::details-content{height:0;overflow:clip;
      transition:height var(--q-t3) var(--q-curva),content-visibility var(--q-t3) allow-discrete}
    body.app:not(#p4) details[open]::details-content{height:auto}
  }
}
/* el cheurón de los desplegables gira con la misma curva */
body.app:not(#p4) details>summary .ico:last-child{transition:transform var(--q-t2) var(--q-curva)}

/* lo que se puede pulsar responde igual: filas de lista que llevan a otra pantalla */
body.app.shell:not(#p4) :is(.feed,.avisos-lista,.lista-pasos)>li>a{transition:background-color var(--q-t1),color var(--q-t1)}

/* movimiento reducido: sin desplazamientos (los cambios de color se quedan) */
@media (prefers-reduced-motion:reduce){
  body.app:not(#p4) :is(.btn,.enlace-mas .ico,.dash-t tbody tr){transition:none!important;transform:none!important}
}

/* ---------------------------------------------------------------- 8. móvil */
@media (max-width:640px){
  body.app{--q-fs-frase:var(--fs-xl);line-height:1.2}
  /* objetivos táctiles de 44 px; el pequeño se queda en 40 dentro de tablas y filas de estado */
  body.app:not(#p4) .btn{min-height:44px}
  body.app:not(#p4) :is(.btn-s,.mesa-estados .btn,.dash-t .btn){min-height:40px}
  body.app:not(#p4) .btn-grande{min-height:48px}
  body.app:not(#p4) .btn-icono{min-width:44px;min-height:44px}
  /* los gráficos anchos (lienzo de 1000-1100) no se encogen hasta un texto de 3-4 px: se deslizan dentro de su marco,
     que ya tiene scroll propio, con el texto a 8-9 px */
  body.app.shell:not(#p4) .g-wrap>svg.g-cascada{min-width:620px}
  body.app.shell:not(#p4) .instrumento.calendario>svg{min-width:760px}
  body.app.shell:not(#p4) :is(.g-wrap,.instrumento.calendario){-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  /* cabecera de sección: título y enlace en una línea, la explicación debajo a todo el ancho */
  body.app.shell:not(#p4) .seccion-cab{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--q-3)}
  body.app.shell:not(#p4) .seccion-cab>.enlace-mas{min-height:44px}
  body.app.shell:not(#p4) .seccion-cab>.enlace-mas+.enlace-mas{grid-column:1 / -1;justify-self:start}
  body.app.shell:not(#p4) :is(.seccion-cab h3,.w-cab h3,.tarjeta-cab h3,.resultado>h3){font-size:var(--fs-base)}
  /* cifras de portada: un paso menos */
  body.app.shell:not(#p4) .app-contenido :is(.cifra>b,.m-v){font-size:var(--fs-lg)}
  body.app.shell:not(#p4) .app-contenido :is(.kpi-v,.pr-kpi-v,.rx>b){font-size:var(--fs-md)}
}
@media (max-width:380px){
  body.app.shell:not(#p4) .app-contenido :is(.cifra>b,.m-v){font-size:var(--fs-lg)}
  body.app:not(#p4) .btn{padding-left:14px;padding-right:14px}
}

/* ---------------------------------------------------------------- 9. consola y lado del equipo */
/* la consola usa la misma jerarquía: título de pantalla, KPI con su etiqueta, tablas del sistema */
body.app.shell.p2-admin:not(#p4) .resultado>h3{display:flex;align-items:baseline;gap:var(--q-3);margin-bottom:var(--q-2)}
body.app.shell.p2-admin:not(#p4) .resultado>h3 small{font:var(--fw-regular) var(--q-fs-sec)/1.4 var(--font-sans);color:var(--q-tenue)}

/* ---------------------------------------------------------------- 10. lector de ofertas (web/ofertas.py, 20-oct) */
/* cada campo propuesto, con la línea del documento de la que sale debajo; el formulario de lectura, en una columna */
body.app.shell .oferta-confirmar label{display:flex;flex-direction:column;gap:4px}
body.app.shell .oferta-confirmar .oferta-fuente{display:block;font-size:var(--fs-xs);line-height:1.35;overflow-wrap:anywhere}
body.app.shell .oferta-confirmar .ancho,body.app.shell .oferta-confirmar .oferta-botones{grid-column:1/-1}
body.app.shell .oferta-botones{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
body.app.shell .mesa-leer-oferta{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
body.app.shell .mesa-leer-oferta textarea{width:100%}
body.app.shell .mesa-leer-fichero{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px dashed rgba(60,70,88,.28);
  border-radius:10px;font-size:var(--fs-sm)}
body.app.shell .mesa-leer-fichero input[type=file]{font-size:var(--fs-xs);max-width:100%}