/* =====================================================================================================================
   PULIDO 3 (14-oct): la última pasada de dirección de arte antes de la demo, sobre TODA la app y con las dos empresas de
   la demo (Ebro a seis meses, Urola el día que llega), el equipo y la consola, a 1440, 1280, 1024, 390 y 360 px. Va DESPUÉS
   de todas las hojas y no cambia la dirección (lienzo sin fichas, paleta tonal, Schibsted en la app, Newsreader en lo
   público, movimiento con medida): corrige lo que bajaba el nivel. Ni textos ni cifras ni lógica: solo presentación.
     0. el fondo que asoma (capturas a página completa, rebote del scroll)
     1. nada empuja la página en horizontal (scroll propio de las tablas, «ver como», portada a 360)
     2. tablas que se leen como fichas: la cartera del consultor y la red del director entre 761 y 1499 px (antes, la
        tabla de nueve columnas se cortaba en «Ahorro · iguala»), ficheros y documentos en el móvil
     3. ritmo y jerarquía de las secciones nuevas: «El momento del crédito», «Tu acompañamiento», nota de traspaso,
        informes del mes, Libro de ahorro, estados financieros a 1024
     4. cabeceras de sección en el móvil: el enlace en la línea del título, la explicación debajo
     5. contraste AA: fuentes, «no se suma», ofertas retiradas, aviso legal y numerales de la portada
     6. objetivos táctiles de 44 px en el móvil (botones, campos, selectores, enlaces sueltos)
   ===================================================================================================================== */

/* ---------------------------------------------------------------- 0. el fondo que asoma */
/* el fondo de la escena va fijo a la ventana: lo que queda fuera (captura a página completa, rebote del scroll en el
   móvil) salía en blanco; ahora, del tono del lienzo */
body.app.shell{background-color:#d5dae2}
body.app.publico{background-color:#e3e7ed}

/* ---------------------------------------------------------------- 1. nada empuja la página en horizontal */
/* lo absoluto que vive dentro de una tabla con scroll propio (las etiquetas .sr de las cabeceras) se medía contra la
   página y la ensanchaba hasta 1.343 px en la consola a 390 */
body.app :is(.table-scroll,.dash-scroll){position:relative}
/* «ver como» en la ficha de una empresa de la consola: cada persona pedía 440 px de ancho mínimo */
body.app .vc-personas .vc-atajos-l{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
body.app .vc-atajos-l li{min-width:0}
body.app .vc-atajos-l li>:not(.vc-form){min-width:0;overflow-wrap:anywhere}
/* la portada a 360: la columna de «La app» medía 340 px dentro de 300 */
@media (max-width:980px){
  body.app.publico .pub-app{grid-template-columns:minmax(0,1fr)}
  body.app.publico .pub-app-visual{max-width:100%;transform:none}
}
/* diagnóstico exprés: las etiquetas de una o tres líneas desalineaban los campos de la misma fila; el campo, abajo */
body.app.publico .expres-form .grid-form label{justify-content:flex-end}
@media (max-width:480px){
  body.app.publico .pub-app-visual{padding:18px}
  body.app.publico .pav-fila{grid-template-columns:minmax(0,1fr) minmax(44px,.7fr) auto;gap:10px;font-size:var(--fs-sm)}
}
/* escala maestra y aportaciones del rating: a 1024 sobraban 16 y 56 px; desde 900 px se ajustan al ancho */
@media (min-width:900px){
  body.app.shell :is(.maestra,.contrib) svg{min-width:0;width:100%;height:auto}
}
/* el índice de Bancos y Análisis: en escritorio se cortaba en «Cuentas» sin aviso (a 1280 sobraban 80 px); ahora parte en
   dos líneas. En el móvil sigue deslizándose con su fundido */
@media (min-width:761px){
  body.app.shell .anclas{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
/* estados financieros: dos tablas lado a lado solo cuando caben (a 1024 se cortaba la columna «Var.») */
@media (max-width:1320px){
  body.app .estados-2{grid-template-columns:minmax(0,1fr)}
}
/* las tablas que se abren en un desplegable (valores y fuentes del rating…): la etiqueta parte en líneas */
body.app.shell details .dash-t td.et{white-space:normal;min-width:14rem}

/* ---------------------------------------------------------------- 2a. la cartera: tabla ancha, ficha por empresa debajo */
/* compactar la tabla (≥ 1500 px): el correo del titular parte donde haga falta y las cabeceras pueden ir en dos líneas */
body.app.shell .p2-cartera th{white-space:normal;vertical-align:bottom;line-height:1.3}
body.app.shell .p2-cartera td.et small{overflow-wrap:anywhere}
body.app.shell .p2-cartera :is(th,td){padding-left:8px;padding-right:8px}
body.app.shell .p2-cartera .p2-ahorro small:not(.pr-cuota){white-space:nowrap}
/* entre 761 y 1499 px, cada empresa es una ficha: el nombre a la izquierda y sus ocho cifras con su etiqueta en una rejilla
   (4 columnas; 3 por debajo de 1100). Sin tabla que se desliza ni columnas cortadas */
@media (min-width:761px) and (max-width:1499px){
  body.app.shell .app-contenido .table-scroll:has(>.p2-cartera){overflow:visible;-webkit-mask-image:none;mask-image:none}
  body.app.shell .app-contenido .p2-cartera,body.app.shell .app-contenido .p2-cartera tbody{display:block;width:100%;min-width:0!important}
  body.app.shell .app-contenido .p2-cartera thead{display:none}
  body.app.shell .app-contenido .p2-cartera tr{display:grid;grid-template-columns:minmax(240px,1.3fr) repeat(4,minmax(0,1fr));gap:14px 24px;
    align-items:start;padding:18px 6px 18px 4px;border-radius:12px;
    background:linear-gradient(90deg,var(--p-hilo-2,rgba(28,35,51,.14)),var(--p-hilo,rgba(28,35,51,.08)) 60%,transparent) 0 100%/100% 1px no-repeat}
  body.app.shell .app-contenido .p2-cartera tbody tr:hover{background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.4) 70%,rgba(255,255,255,.15)),
    linear-gradient(90deg,var(--p-hilo-2,rgba(28,35,51,.14)),var(--p-hilo,rgba(28,35,51,.08)) 60%,transparent) 0 100%/100% 1px no-repeat}
  body.app.shell .app-contenido .p2-cartera td{display:block;padding:0!important;border:0!important;background:none!important;position:static!important;
    text-align:left!important;white-space:normal!important;min-width:0!important;max-width:none!important;font-size:var(--fs-sm)}
  body.app.shell .app-contenido .p2-cartera td.et{grid-row:1 / span 2;grid-column:1;align-self:center}
  body.app.shell .app-contenido .p2-cartera td[data-et]::before{content:attr(data-et);display:block;margin-bottom:3px;font:var(--fw-semibold) var(--fs-xs)/1.3 var(--font-sans);
    color:var(--f-tenue);letter-spacing:.005em}
  body.app.shell .app-contenido .p2-cartera td small:not(.p2-delta):not(.pr-en-linea){display:block;max-width:none!important;margin-left:0!important;text-align:left}
  body.app.shell .app-contenido .p2-cartera td small.p2-delta{display:inline;margin-left:6px}
  /* el correo del titular, en una línea con puntos suspensivos (completo en la ficha); el nombre parte por palabras */
  body.app.shell .app-contenido .p2-cartera td.et small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
  body.app.shell .app-contenido .p2-cartera td.et .p2-emp-txt b{overflow-wrap:normal}
  body.app.shell .app-contenido .p2-cartera .p2-nota{justify-content:flex-start}
}
@media (min-width:761px) and (max-width:1099px){
  body.app.shell .app-contenido .p2-cartera tr{grid-template-columns:minmax(200px,1.2fr) repeat(3,minmax(0,1fr))}
  body.app.shell .app-contenido .p2-cartera td.et{grid-row:1 / span 3}
}
/* en el móvil (ficha de dos columnas de pulido.css) las notas de tareas y de la cuota se iban a la derecha */
@media (max-width:760px){
  body.app.shell .app-contenido .p2-cartera td small{max-width:none!important;margin-left:0!important;text-align:left}
}

/* ---------------------------------------------------------------- 2b. la red del director y la consola, por debajo de 1180 */
@media (max-width:1180px){
  body.app .table-scroll:has(>.pr-red){overflow:visible;-webkit-mask-image:none;mask-image:none}
  body.app .pr-red,body.app .pr-red tbody{display:block;width:100%;min-width:0!important}
  body.app .pr-red thead{display:none}
  body.app .pr-red tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;padding:14px 0;
    background:linear-gradient(90deg,var(--p-hilo-2,rgba(28,35,51,.14)),var(--p-hilo,rgba(28,35,51,.08)) 60%,transparent) 0 100%/100% 1px no-repeat}
  body.app .pr-red tr.pr-total{border-radius:12px;padding:14px 10px;box-shadow:none}
  body.app .pr-red td{display:block;padding:0!important;border:0!important;background:none!important;text-align:left!important;white-space:normal;min-width:0}
  body.app .pr-red tr.pr-total td{background:none!important;box-shadow:none}
  body.app .pr-red tr.pr-total{background:rgba(59,90,150,.05)}
  body.app .pr-red td.et{grid-column:1 / -1}
  body.app .pr-red td[data-et]::before{content:attr(data-et);display:block;margin-bottom:2px;font:var(--fw-semibold) var(--fs-xs)/1.3 var(--font-sans);color:var(--f-tenue);
    overflow-wrap:anywhere}
  body.app .pr-red td:empty{display:none}
}
@media (min-width:761px) and (max-width:1180px){
  body.app .pr-red tr{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px 18px}
}

/* la consola, «Usuarios»: a 1440 la columna «Ver como» quedaba fuera (la tabla medía 1.211 px en 1.096); el correo y la
   fecha de alta parten en dos líneas y el selector de rol se acorta */
body.app.shell.p2-admin .resultado:has(a[href="/admin/usuarios.csv"]) .dash-t{font-size:var(--fs-sm)}
body.app.shell.p2-admin .resultado:has(a[href="/admin/usuarios.csv"]) .dash-t :is(th,td){padding-left:7px;padding-right:7px}
body.app.shell.p2-admin .resultado:has(a[href="/admin/usuarios.csv"]) .dash-t td.et:nth-child(3){white-space:normal;max-width:10rem}
body.app.shell.p2-admin .resultado:has(a[href="/admin/usuarios.csv"]) .dash-t td.v:nth-child(4){white-space:normal;min-width:5.6rem}
body.app.shell.p2-admin .resultado:has(a[href="/admin/usuarios.csv"]) .dash-t select{max-width:8.5rem}

/* ---------------------------------------------------------------- 2c. ficheros (Mi cuenta) y documentos (Expediente) */
/* a 1280 la tabla de documentos se salía 13 px: el nombre del fichero parte */
body.app .docs-t td.fichero-nombre{white-space:normal;overflow-wrap:anywhere;max-width:26ch;min-width:9rem}
body.app .docs-t td.et{white-space:normal;min-width:16rem;text-wrap:pretty}
/* equipo de la empresa en la ficha (a 1024 la tabla se deslizaba 125 px): el correo y las fechas parten */
@media (max-width:1180px){
  body.app.shell .p2-asig td.et{white-space:normal}
  body.app.shell .p2-asig .p2-emp-txt b{overflow-wrap:anywhere}
  body.app.shell .p2-asig td.v{white-space:normal;min-width:6.5rem}
}
@media (max-width:640px){
  body.app :is(#ficheros .table-scroll,.table-scroll:has(>.docs-t)){overflow:visible;-webkit-mask-image:none;mask-image:none}
  body.app :is(#ficheros .dash-t,.docs-t),body.app :is(#ficheros .dash-t,.docs-t) tbody{display:block;width:100%;min-width:0!important}
  body.app :is(#ficheros .dash-t,.docs-t) thead{display:none}
  body.app :is(#ficheros .dash-t,.docs-t) tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:12px 0;
    background:linear-gradient(90deg,var(--p-hilo-2,rgba(28,35,51,.14)),var(--p-hilo,rgba(28,35,51,.08)) 60%,transparent) 0 100%/100% 1px no-repeat}
  body.app :is(#ficheros .dash-t,.docs-t) td{display:block;padding:0!important;border:0!important;background:none!important;position:static!important;
    text-align:left!important;white-space:normal!important;min-width:0!important;max-width:none!important}
  body.app :is(#ficheros .dash-t,.docs-t) td.et{grid-column:1 / -1;width:auto!important}
  body.app #ficheros .dash-t td.et a.p2-fichero{max-width:100%}
  body.app #ficheros .dash-t td.et a.p2-fichero span{white-space:normal;overflow-wrap:anywhere}
  body.app #ficheros .dash-t td:nth-child(2),body.app .docs-t td.v:not(:last-child){font:var(--fw-medium) var(--fs-xs) var(--font-sans);color:var(--f-tenue)}
  body.app :is(#ficheros .dash-t,.docs-t) td:last-child{grid-column:2;grid-row:span 1;justify-self:end}
  body.app .docs-t td.et{font-weight:var(--fw-semibold);color:var(--f-tinta)}
  body.app .docs-t td.fichero-nombre{grid-column:1 / -1;font:var(--fw-medium) var(--fs-xs) var(--font-sans);color:var(--f-suave)}
}

/* ---------------------------------------------------------------- 3a. «El momento del crédito» (termómetro) */
/* antes: la etiqueta y el titular en una línea corrida y el consejo a 15 px y a todo el ancho; ahora, un aparte con su
   filete del color del clima, el titular como entradilla y el consejo a ancho de lectura */
body.app .termometro{position:relative;max-width:76ch;margin-top:1.15rem;padding:2px 0 2px 18px;--tm-c:rgba(28,35,51,.28)}
body.app .termometro:has(.termometro-tit .estado-warn){--tm-c:#b07a2a}
body.app .termometro:has(.termometro-tit .estado-ok){--tm-c:var(--f-ok,#2f7a68)}
body.app .termometro::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--tm-c),color-mix(in srgb,var(--tm-c) 18%,transparent))}
body.app .termometro p{margin:0}
body.app .termometro .termometro-tit{margin:0 0 6px;font:var(--fw-semibold) var(--fs-base)/1.45 var(--font-sans);letter-spacing:-.005em;color:var(--f-tinta);text-wrap:pretty}
body.app .termometro .termometro-tit .estado{display:flex;width:fit-content;margin:0 0 5px}
body.app .termometro p:not(.termometro-tit):not(.nota-fuente){font:var(--fw-medium) var(--fs-sm)/1.62 var(--font-sans);color:var(--f-tinta-2);text-wrap:pretty}
body.app .termometro .nota-fuente{margin-top:9px;max-width:92ch;font:var(--fw-medium) var(--fs-xs)/1.55 var(--font-sans);color:var(--f-tenue)}

/* ---------------------------------------------------------------- 3b. «Tu acompañamiento»: piezas con su filete */
/* el mismo lenguaje que los KPI del servicio: filete fino con el acento en lo que se suma y en gris en lo que no */
body.app .acomp-piezas{gap:6px 30px}
body.app .acomp-piezas li{padding:12px 0 10px;
  background:linear-gradient(90deg,var(--f-acento) 0 22px,var(--p-hilo,rgba(28,35,51,.08)) 22px 85%,transparent) 0 0/100% 1px no-repeat}
body.app .acomp-piezas li.ap-otro{background:linear-gradient(90deg,rgba(28,35,51,.3) 0 22px,var(--p-hilo,rgba(28,35,51,.08)) 22px 85%,transparent) 0 0/100% 1px no-repeat}
body.app .acomp-piezas small{text-wrap:pretty;color:var(--f-suave)}
body.app .acomp-piezas .ap-fuente{opacity:1;color:var(--f-tenue)}
body.app .acomp-piezas .nk-et i{opacity:1;color:var(--f-tenue)}
/* «Plan →» al final de la frase del plan: en línea (app.css le daba 14 px de margen arriba y abría un hueco entre líneas) */
body.app .acomp-plan .enlace-mas{display:inline;margin:0 0 0 6px}

/* ---------------------------------------------------------------- 3c. nota de traspaso y ficha del consultor */
/* los datos de «Cómo está la empresa» iban a 16 px en una columna estrecha: a la medida del resto de la nota */
body.app .pr-nota .p2-datos>div{grid-template-columns:minmax(120px,34%) minmax(0,1fr);gap:4px 18px}
@media (max-width:640px){body.app .pr-nota .p2-datos>div{grid-template-columns:1fr;gap:2px}}
body.app .pr-nota .p2-datos dt{font:var(--fw-medium) var(--fs-xs)/1.45 var(--font-sans);color:var(--f-tenue)}
body.app .pr-nota .p2-datos dd{font:var(--fw-medium) var(--fs-sm)/1.5 var(--font-sans);color:var(--f-tinta);overflow-wrap:anywhere}
/* los informes del mes: el mes y «generado el…» se pisaban en columnas de 250 px */
body.app.shell .app-contenido .informes-hist.p2-meses{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
body.app.shell .app-contenido .p2-meses li{flex-wrap:wrap;row-gap:2px}
body.app.shell .app-contenido .p2-meses small{white-space:nowrap}
/* Libro de ahorro: el concepto parte en líneas (a 1280 y 1024 la tabla se deslizaba) */
body.app #libro .dash-t td.izq{white-space:normal;min-width:15rem;text-wrap:pretty}
/* la portada de la cartera: la frase larga en 7 líneas a 34 px; a ancho de lectura y un punto más pequeña */
body.app.shell .app-contenido .portada.cartera-portada .portada-texto h2{max-width:34ch;font-size:var(--fs-lg);line-height:1.24}

@media (max-width:640px){
  body.app #libro .table-scroll{overflow:visible;-webkit-mask-image:none;mask-image:none}
  body.app #libro .dash-t,body.app #libro .dash-t tbody{display:block;width:100%;min-width:0!important}
  body.app #libro .dash-t thead{display:none}
  body.app #libro .dash-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;padding:12px 0;
    background:linear-gradient(90deg,var(--p-hilo-2,rgba(28,35,51,.14)),var(--p-hilo,rgba(28,35,51,.08)) 60%,transparent) 0 100%/100% 1px no-repeat}
  body.app #libro .dash-t td{display:block;padding:0!important;border:0!important;background:none!important;position:static!important;
    text-align:left!important;white-space:normal!important;min-width:0!important}
  body.app #libro .dash-t td.et{font:var(--fw-medium) var(--fs-xs) var(--font-sans);color:var(--f-tenue)}
  body.app #libro .dash-t td.izq{grid-column:1 / -1;grid-row:2}
  body.app #libro .dash-t td.v:nth-child(3){grid-column:1;grid-row:3}
  body.app #libro .dash-t td.v:last-child{grid-column:2;grid-row:1;justify-self:end}
}

/* ---------------------------------------------------------------- 3d. la Mesa: las ofertas retiradas, legibles */
/* antes, opacidad .55 (2,3:1); ahora, en gris pero con su contraste */
body.app .mesa-oferta.of-rechazada{opacity:1;filter:saturate(.25)}
body.app .mesa-oferta.of-rechazada .mesa-of-cifras b{color:var(--f-tenue)}

/* ---------------------------------------------------------------- 3e. una sola escala en las portadas de la app */
/* dos familias convivían: las pantallas repasadas en pulido (Rating, Mesa, Expediente, Avisos…) con el título a 28,8 px y la
   línea de estado a 14 px, y el resto (Inicio, Plan, Tesorería, Impuestos, Vigilancia, Seguridad…) a 27,2 px y 12 px; al pasar
   de una a otra, el título saltaba. Ahora, todas con la escala de pulido.css (frase · cifra · título · cuerpo · etiqueta) */
body.app.shell .app-contenido :is(.portada,.plan-cabina,.nivel,.bienvenida) h2{font:var(--fw-semibold) var(--p-fs-frase)/1.2 var(--font-sans);
  letter-spacing:-.022em;text-wrap:balance}
body.app.shell .app-contenido .portada-linea{margin:0 0 14px;font:var(--fw-medium) var(--p-fs-et)/1.4 var(--font-sans);color:var(--f-tenue)}
body.app.shell .app-contenido .portada-linea .estado{font:var(--fw-semibold) var(--p-fs-et)/1.4 var(--font-sans)}
body.app.shell .app-contenido .portada-entradilla{font:var(--fw-regular) var(--p-fs-cuerpo)/1.62 var(--font-sans)}
body.app.shell .app-contenido :is(.seccion-cab h3,.w-cab h3,.tarjeta-cab h3){font:var(--fw-semibold) var(--p-fs-titulo)/1.3 var(--font-sans);letter-spacing:-.012em}
/* Impuestos: el texto de la portada se centraba frente a la hoja sellada y empezaba 18 px más abajo que en las demás */
body.app.shell .portada.con-sello{align-items:start}

/* ---------------------------------------------------------------- 4. cabeceras de sección en el móvil */
/* el enlace («Análisis →», «Agenda →», «Todo →») caía solo en una línea, alineado a la derecha: ahora en la línea del
   título y la explicación debajo, a todo el ancho */
@media (max-width:640px){
  body.app.shell :is(.seccion-cab,.w-cab){flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
  body.app.shell :is(.seccion-cab,.w-cab)>h3{flex:1 1 auto;min-width:0}
  body.app.shell :is(.seccion-cab,.w-cab)>p{order:3;flex:1 1 100%}
  body.app.shell :is(.seccion-cab,.w-cab)>.enlace-mas{order:2;margin:0 0 0 auto;flex:none}
}

/* ---------------------------------------------------------------- 5. contraste AA */
body.app.publico .pub-legal{color:var(--muted)}
body.app.publico .m-num{color:var(--muted)}
body.app.publico :is(.ver-o,.nota-fuente){color:var(--f-tenue,#5f687a)}

/* ---------------------------------------------------------------- 6. objetivos táctiles de 44 px en el móvil */
@media (max-width:640px){
  body.app .btn:not(.btn-icono){min-height:44px!important}
  body.app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not(.sr):not(.hp),select){min-height:44px!important}
  body.app .btn-icono{min-width:44px!important;min-height:44px!important}
  body.app :is(.ajustes-indice a,.anclas a,.pr-toca a,.indice-peligro){min-height:44px}
  /* las × y ↺ de cada ejercicio (Análisis): un área de toque mayor sin mover la cabecera */
  body.app .del-ej button{position:relative}
  body.app .del-ej button::after{content:"";position:absolute;inset:-14px -12px}
  body.app.shell .tb-menu{width:44px;height:44px}
  body.app.shell .enlace-analista{min-height:44px}
  body.app :is(.enlace-mas,.cab-mas,.franja-ir,.doc-abrir,.p2-fichero):not(p *){display:inline-flex;align-items:center;min-height:44px}
  body.app.publico :is(.pub-entrar,.marca){display:inline-flex;align-items:center;min-height:44px}
  body.app details>summary{min-height:44px;align-content:center}
}