/* ============================================================
herramienta.css — chasis común de las páginas de herramienta
kinegalvez.com
marca.css = tokens (color, tipografía, retícula, foco)
herramienta.css = estructura repetida de una página de herramienta
index.html de cada herramienta = solo lo que es propio de ella
Orden obligatorio en el :
Ninguna regla de este archivo declara un color literal: todo
resuelve contra los tokens de marca.css, de modo que un cambio
de paleta se propaga a todas las herramientas de una vez.
============================================================ */
/* ---------- caja de página ---------- */
.wrap{
max-width:1080px;
margin:0 auto;
padding:clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 2rem) clamp(3.5rem, 7vw, 5rem);
}
/* ---------- retorno a la portada ---------- */
.home{
display:inline-block;margin-bottom:20px;
font-family:var(--tipo-dato);font-weight:600;
font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--texto-medio);text-decoration:none;
border-bottom:1px solid var(--linea);
transition:color var(--transicion-rapida),border-color var(--transicion-rapida);
}
.home:hover{color:var(--accion-texto);border-bottom-color:var(--acento)}
/* ---------- encabezado ---------- */
header{
border-bottom:2px solid var(--acento);
padding-bottom:20px;
margin-bottom:clamp(1.5rem, 4vw, 2.5rem);
}
h1{
font-family:var(--tipo-titulo);font-weight:400;
font-size:clamp(1.55rem,3.6vw,2.25rem);line-height:1.1;
margin:0 0 12px;letter-spacing:-.025em;
}
.lede{margin:0;max-width:62ch;color:var(--texto-medio);font-weight:300;font-size:1.02rem}
.meta{margin-top:14px;font-size:.84rem;color:var(--texto-tenue);max-width:62ch}
/* ---------- bloques ---------- */
section{margin-bottom:clamp(2rem, 5vw, 3rem)}
h2{
font-family:var(--tipo-titulo);font-size:1.02rem;font-weight:400;
margin:0 0 5px;letter-spacing:-.015em;
}
h3{font-family:var(--tipo-titulo);font-size:.95rem;font-weight:400;margin:0 0 4px;letter-spacing:-.01em}
.sub{margin:0 0 16px;font-size:.88rem;color:var(--texto-medio);max-width:74ch;font-weight:300}
.panel{
background:var(--superficie-alta);
border:1px solid var(--linea);
border-radius:var(--radio);
padding:clamp(1rem, 3vw, 1.5rem);
box-shadow:var(--sombra-bajo);
transition:box-shadow var(--transicion-normal),transform var(--transicion-normal);
}
.panel:hover{
box-shadow:var(--sombra-medio);
transform:translateY(-1px);
}
/* ---------- retícula de formulario ---------- */
.grid{display:grid;gap:14px;align-items:end}
.grid>div{display:flex;flex-direction:column;justify-content:flex-end}
.grid.cols2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.cols3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grid.cols4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
label{
display:block;margin-bottom:5px;
font-family:var(--tipo-dato);font-weight:500;
font-size:.95rem;letter-spacing:.02em;line-height:1.25;color:var(--texto-medio);
}
input,select,textarea{
width:100%;font:inherit;font-variant-numeric:tabular-nums;
padding:clamp(0.6rem, 2vw, 0.75rem) clamp(0.75rem, 2vw, 0.875rem);
border:1px solid var(--linea-control);border-radius:var(--radio);
background:var(--superficie-alta);color:var(--texto);
transition:border-color var(--transicion-rapida),background-color var(--transicion-rapida),box-shadow var(--transicion-rapida);
}
input:focus,select:focus,textarea:focus{
outline:none;
border-color:var(--accion);
box-shadow:0 0 0 2px var(--dato-lavado-1);
}
input:invalid:not(:placeholder-shown){
border-color:var(--critico);
background-color:var(--critico-tinte);
}
input:invalid:not(:placeholder-shown):focus{
box-shadow:0 0 0 2px var(--critico-tinte);
}
textarea{font-size:.86rem;padding:clamp(0.75rem, 2vw, 1rem);margin-top:10px}
.unidad{
font-family:var(--tipo-dato);font-size:.82rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--texto-tenue);margin-top:4px;
}
/* ---------- ítem de escala (una pregunta, sus opciones) ---------- */
.item{
border:1px solid var(--linea);border-radius:var(--radio);
background:var(--superficie-alta);padding:16px 18px;margin-bottom:10px;
box-shadow:var(--sombra-bajo);
transition:box-shadow var(--transicion-rapida),border-color var(--transicion-rapida);
}
.item:hover{
box-shadow:var(--sombra-medio);
border-color:var(--accion);
}
.item .pista{margin:6px 0 0;font-size:.85rem;color:var(--texto-tenue);max-width:74ch}
/* ---------- marcador: la cifra que devuelve la herramienta ---------- */
.marcador{
display:flex;align-items:baseline;gap:10px;
border:1px solid var(--linea-control);border-radius:var(--radio);
padding:14px 16px;background:var(--superficie-base);
box-shadow:var(--sombra-bajo);
}
.marcador .cifra{
font-family:var(--tipo-titulo);font-size:2.1rem;line-height:1;
font-variant-numeric:tabular-nums;
}
.marcador .de{font-family:var(--tipo-dato);font-size:1rem;color:var(--texto-tenue);letter-spacing:.03em}
.marcador .rotulo{
font-family:var(--tipo-dato);font-size:.9rem;letter-spacing:.05em;
text-transform:uppercase;color:var(--texto-medio);margin-left:auto;text-align:right;
}
/* ---------- veredicto: la interpretación, no el número ---------- */
.veredicto{
margin-top:12px;padding:12px 14px;border-radius:var(--radio);
border-left:3px solid var(--grafico-neutro);background:var(--superficie-alta);
font-size:.92rem;line-height:1.5;
animation:fadeSlideIn 0.3s ease-out;
}
@keyframes fadeSlideIn{
from{opacity:0;transform:translateY(-8px)}
to{opacity:1;transform:translateY(0)}
}
.veredicto.ok{border-left-color:var(--senal);background:var(--senal-tinte);color:var(--senal)}
.veredicto.alerta{border-left-color:var(--precaucion);background:var(--precaucion-tinte);color:var(--precaucion)}
.veredicto.critico{border-left-color:var(--critico);background:var(--critico-tinte);color:var(--critico)}
.veredicto.vacio{color:var(--texto-tenue)}
/* ---------- tablas ---------- */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--linea-suave);vertical-align:middle}
th{
font-family:var(--tipo-dato);font-weight:600;font-size:.86rem;
letter-spacing:.05em;text-transform:uppercase;color:var(--texto-medio);
border-bottom:1px solid var(--linea);
}
td.num,th.num{text-align:right}
tfoot td{border-bottom:0;border-top:1px solid var(--linea);font-weight:500}
/* ---------- citas numeradas (Vancouver) ---------- */
a.cita{
color:var(--accion-texto);text-decoration:none;white-space:nowrap;
font-family:var(--tipo-dato);font-size:.9em;font-weight:600;letter-spacing:.02em;
}
a.cita:hover{text-decoration:underline;text-decoration-color:var(--acento)}
.refs li:target{background:var(--precaucion-tinte);outline:1px solid var(--linea)}
/* ---------- avisos ---------- */
.nota{font-size:.85rem;color:var(--texto-tenue);line-height:1.55;margin:12px 0 0;max-width:74ch}
.caveat{
border:1px solid var(--linea);border-left:3px solid var(--precaucion);
border-radius:0;background:var(--precaucion-tinte);padding:16px 18px;
box-shadow:var(--sombra-bajo);
}
.caveat p{margin:0 0 10px;font-size:.92rem;line-height:1.6}
.caveat p:last-child{margin-bottom:0}
/* ---------- acciones ---------- */
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
button{
font-family:var(--tipo-texto);font-weight:500;font-size:.95rem;
padding:clamp(0.6rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.125rem);
border-radius:var(--radio);cursor:pointer;
background:var(--accion);color:var(--marca-blanco);
border:1px solid var(--accion);
box-shadow:var(--sombra-bajo);
transition:background var(--transicion-rapida),filter var(--transicion-rapida),box-shadow var(--transicion-rapida);
}
button.ghost{background:transparent;color:var(--accion-texto);border-color:var(--linea-control);box-shadow:none}
button:hover{
filter:brightness(1.06);
box-shadow:var(--sombra-medio);
}
button:active{
filter:brightness(0.96);
}
.status{font-size:.85rem;color:var(--texto-medio);margin-top:10px;min-height:1.2em}
.fallback{display:none}
.fallback.on{display:block}
/* ---------- referencias ---------- */
.refs{padding-left:1.2rem;font-size:.9rem;line-height:1.6;color:var(--texto-medio)}
.refs li{margin-bottom:12px}
.doi{
display:inline-block;margin-left:6px;padding:2px 9px;
font-family:var(--tipo-dato);font-size:.8rem;font-weight:600;letter-spacing:.05em;
color:var(--accion-texto);border:1px solid var(--linea-control);border-radius:var(--radio);
text-decoration:none;white-space:nowrap;
transition:background var(--transicion-rapida),color var(--transicion-rapida),border-color var(--transicion-rapida);
}
.doi:hover{
background:var(--accion);color:var(--marca-blanco);border-color:var(--accion);
}
/* ---------- pie ---------- */
.pie{
margin-top:44px;padding-top:18px;border-top:1px solid var(--linea);
font-size:.82rem;color:var(--texto-tenue);display:flex;flex-wrap:wrap;gap:6px 18px;
}
.pie a{color:var(--accion-texto);text-decoration:none;border-bottom:1px solid var(--linea);transition:border-color var(--transicion-rapida)}
.pie a:hover{border-bottom-color:var(--acento)}
/* =============================================================
PANEL DE RESULTADOS Y GRÁFICOS
Piezas comunes a todas las herramientas. Las dibuja
/js/graficos.js; aquí solo se decide su aspecto.
============================================================= */
.tablero{display:grid;gap:14px;margin-top:14px}
.tablero.dos{grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
.tablero .fig-ancha{grid-column:1/-1}
.minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:8px 14px}
.mini-titulo{
margin:0 0 2px;font-family:var(--tipo-dato);font-size:.8rem;font-weight:600;
letter-spacing:.04em;color:var(--texto);
}
.mini-titulo span{font-weight:500;color:var(--texto-tenue);margin-left:4px}
.acciones-informe{
display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;
padding-top:12px;border-top:1px solid var(--linea-suave);
}
.acciones-informe .nota{margin:0;flex:1 1 260px}
/* ---------- cifras clave ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{
display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;
border:1px solid var(--linea);border-left:3px solid var(--grafico-neutro);
border-radius:var(--radio);background:var(--superficie-base);padding:10px 12px;
}
.kpi.ok{border-left-color:var(--senal)}
.kpi.alerta{border-left-color:var(--precaucion)}
.kpi.critico{border-left-color:var(--critico)}
.kpi.dato{border-left-color:var(--dato-1)}
.kpi-rotulo{
font-family:var(--tipo-dato);font-weight:500;font-size:.78rem;
letter-spacing:.06em;text-transform:uppercase;color:var(--texto-medio);line-height:1.2;
}
.kpi-valor{
font-family:var(--tipo-titulo);font-size:1.7rem;line-height:1.05;color:var(--texto);
font-variant-numeric:proportional-nums;
}
.kpi-valor small{
font-family:var(--tipo-dato);font-size:.88rem;font-weight:500;
letter-spacing:.03em;color:var(--texto-tenue);margin-left:4px;
}
.kpi-nota{font-size:.78rem;color:var(--texto-tenue);line-height:1.35}
/* ---------- chip de estado: icono y texto, nunca solo color ---------- */
.chip{
display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
font-family:var(--tipo-dato);font-weight:600;font-size:.74rem;line-height:1.5;
letter-spacing:.05em;text-transform:uppercase;
padding:1px 8px;border-radius:var(--radio);border:1px solid currentColor;
color:var(--texto-medio);background:transparent;
}
.chip::before{font-family:var(--tipo-texto);font-weight:700;content:"–"}
.chip.ok{color:var(--senal);background:var(--senal-tinte)}
.chip.ok::before{content:"✓"}
.chip.alerta{color:var(--precaucion);background:var(--precaucion-tinte)}
.chip.alerta::before{content:"!"}
.chip.critico{color:var(--critico);background:var(--critico-tinte)}
.chip.critico::before{content:"✕"}
.chip.info{color:var(--accion-texto);background:var(--dato-lavado-1)}
.chip.info::before{content:"i"}
/* ---------- figura ---------- */
.fig{
position:relative;margin:0;min-width:0;
border:1px solid var(--linea);border-radius:var(--radio);
background:var(--superficie-alta);padding:14px 14px 10px;
}
.fig-titulo{font-family:var(--tipo-titulo);font-size:.95rem;line-height:1.2;margin:0 0 3px;letter-spacing:-.01em}
.fig-sub{font-size:.8rem;color:var(--texto-tenue);margin:0 0 8px;line-height:1.4;max-width:78ch}
.fig svg{display:block;width:100%;height:auto;overflow:visible}
.fig-vacia{
margin:6px 0 2px;padding:22px 12px;text-align:center;
font-size:.85rem;color:var(--texto-tenue);
border:1px dashed var(--linea);border-radius:var(--radio);
}
.leyenda-g{
display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;
font-family:var(--tipo-dato);font-size:.8rem;letter-spacing:.03em;color:var(--texto-medio);
}
.leyenda-g i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.leyenda-g i.linea{width:20px;height:0;border-radius:0;border-top:2px solid;vertical-align:3px;background:none}
.sw-1{background:var(--dato-1)}
.sw-2{background:var(--dato-2)}
.sw-v{background:var(--dato-v)}
.sw-ap{background:var(--dato-ap)}
.sw-ml{background:var(--dato-ml)}
.leyenda-g i.linea.sw-1{border-top:2px solid var(--dato-1)}
.leyenda-g i.linea.sw-2{border-top:2px dashed var(--dato-2)}
.leyenda-g i.linea.sw-v{border-top:2px solid var(--dato-v)}
.leyenda-g i.linea.sw-ap{border-top:2px dashed var(--dato-ap)}
.leyenda-g i.linea.sw-ml{border-top:2px dotted var(--dato-ml)}
.sw-ok{background:var(--senal)}
.sw-alerta{background:var(--precaucion)}
.sw-critico{background:var(--critico)}
.sw-neutro{background:var(--grafico-neutro)}
.sw-banda{background:var(--linea-suave);border:1px solid var(--linea)}
.leyenda-g i.linea.sw-umbral{border-top:2px dashed var(--texto-medio)}
.sw-n0{background:var(--nivel-0)} .sw-n1{background:var(--nivel-1)} .sw-n2{background:var(--nivel-2)}
/* ---------- marcas SVG ---------- */
.g-rejilla{stroke:var(--linea-suave);stroke-width:1;fill:none;shape-rendering:crispEdges}
.g-eje{stroke:var(--linea-control);stroke-width:1;fill:none;shape-rendering:crispEdges}
.g-cero{stroke:var(--texto);stroke-width:1.2;shape-rendering:crispEdges}
.g-franja{fill:var(--reticula)}
/* Un umbral no es rejilla: va discontinuo y en tinta media para leerse
como línea de referencia. */
.g-umbral{stroke:var(--texto-medio);stroke-width:1.5;stroke-dasharray:5 3;fill:none}
.g-corte{stroke:var(--texto);stroke-width:2}
.g-banda{fill:var(--linea-suave)}
.g-pista{fill:var(--reticula-fuerte)}
.g-txt{font-family:var(--tipo-dato);font-size:11.5px;fill:var(--texto-medio);letter-spacing:.02em}
.g-txt-f{font-family:var(--tipo-dato);font-size:12.5px;font-weight:600;fill:var(--texto);letter-spacing:.01em}
.g-txt-t{fill:var(--texto-tenue)}
.g-txt-inv{fill:var(--tinta-sobre-nivel)}
.g-f1{fill:var(--dato-1)}
.g-f2{fill:var(--dato-2)}
.g-a1{fill:var(--dato-lavado-1)}
.g-a2{fill:var(--dato-lavado-2)}
.g-l1,.g-l2,.g-lv,.g-lap,.g-lml,.g-lneutra{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.g-l1{stroke:var(--dato-1)}
.g-l2{stroke:var(--dato-2);stroke-dasharray:6 3}
.g-lv{stroke:var(--dato-v);stroke-width:1.4}
.g-lap{stroke:var(--dato-ap);stroke-width:1.4;stroke-dasharray:6 3}
.g-lml{stroke:var(--dato-ml);stroke-width:1.4;stroke-dasharray:1.5 3}
.g-lneutra{stroke:var(--grafico-neutro)}
.g-ok{fill:var(--senal)}
.g-alerta{fill:var(--precaucion)}
.g-critico{fill:var(--critico)}
.g-neutro{fill:var(--grafico-neutro)}
.g-punto{stroke:var(--superficie-alta);stroke-width:2}
.g-hit{fill:transparent;stroke:none}
.g-media{stroke:var(--texto);stroke-width:2.5;stroke-linecap:round}
.g-mediana{stroke:var(--superficie-alta);stroke-width:2.5}
.g-media-punto{fill:var(--superficie-alta);stroke:var(--texto);stroke-width:1.2}
.g-bigote{stroke-width:1.5;fill:none}
.t1{stroke:var(--dato-1)} .t2{stroke:var(--dato-2)}
.g-n0{fill:var(--nivel-0)} .g-n1{fill:var(--nivel-1)} .g-n2{fill:var(--nivel-2)}
.g-vacio{fill:none;stroke:var(--linea-control);stroke-dasharray:3 3}
.g-pleno{fill:var(--dato-1);stroke:var(--dato-1);stroke-width:1.5}
.g-hueco{fill:none;stroke:var(--linea-control);stroke-width:1.5}
.g-marca{fill:var(--texto)}
.g-ventana-1{fill:var(--dato-lavado-1)}
.g-ventana-2{fill:var(--dato-lavado-2)}
.fig [data-tip]{cursor:crosshair}
.fig path[data-tip]:hover,.fig rect[data-tip]:not(.g-hit):hover,.fig circle[data-tip]:not(.g-hit):hover{opacity:.82}
/* ---------- lectura al pasar el cursor ---------- */
.kg-tip{
position:fixed;z-index:60;pointer-events:none;max-width:280px;
background:var(--marca-azul);color:var(--marca-blanco);
font-size:.8rem;line-height:1.4;padding:6px 10px;border-radius:var(--radio);
box-shadow:var(--sombra-medio);opacity:0;transition:opacity .12s ease;
}
.kg-tip.on{opacity:1}
/* =============================================================
INFORME IMPRIMIBLE
Hoja propia de cada herramienta. En pantalla solo aparece en la
vista previa; al imprimir sustituye a la página entera. Lleva
datos, cifras, gráficos y una lectura breve: sin descripción de
las pruebas y sin referencias.
============================================================= */
.informe{display:none}
.informe.en-pantalla{
display:block;position:relative;max-width:210mm;margin:18px auto 0;
background:var(--papel);border:1px solid var(--linea);box-shadow:var(--sombra-alto);
padding:14mm 12mm;
}
/* Un solo juego de corchetes por pieza: el de la hoja. */
.informe::before,.informe::after{
content:"";position:absolute;width:14px;height:14px;border:1px solid var(--accion);
}
.informe::before{top:6mm;left:5mm;border-right:0;border-bottom:0}
.informe::after{bottom:6mm;right:5mm;border-left:0;border-top:0}
.informe section{margin-bottom:0}
.inf-cabecera{
display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
margin:0;padding-bottom:9px;border-bottom:2px solid var(--acento);
}
.inf-cabecera img{display:block;width:38px;height:38px}
.inf-marca{
margin:0;font-family:var(--tipo-dato);font-size:.7rem;font-weight:500;
letter-spacing:.09em;text-transform:uppercase;color:var(--texto-medio);
}
.inf-titulo{font-family:var(--tipo-titulo);font-size:1.22rem;line-height:1.1;margin:2px 0 0;letter-spacing:-.02em}
.inf-fecha{
margin:0;text-align:right;font-family:var(--tipo-dato);font-size:.72rem;
letter-spacing:.05em;text-transform:uppercase;color:var(--texto-medio);line-height:1.3;
}
.inf-fecha b{font-size:.95rem;color:var(--texto);letter-spacing:.02em}
.inf-ficha{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 14px;
margin:9px 0 2px;
}
.inf-ficha div{border-bottom:1px solid var(--linea-suave);padding:3px 0;min-width:0}
.inf-ficha dt{
font-family:var(--tipo-dato);font-size:.64rem;letter-spacing:.07em;
text-transform:uppercase;color:var(--texto-tenue);
}
.inf-ficha dd{margin:0;font-size:.8rem;font-weight:600;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inf-seccion{margin-top:11px}
.inf-h{
margin:0 0 6px;padding-bottom:3px;border-bottom:1px solid var(--linea-suave);
font-family:var(--tipo-dato);font-size:.72rem;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;color:var(--accion-texto);
}
.inf-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.inf-rejilla .fig-ancha{grid-column:1/-1}
.inf-rejilla.tres{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.inf-rejilla.tres .leyenda-g{gap:2px 8px}
.informe .kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.informe .kpi{padding:6px 8px;background:var(--papel);gap:2px}
.informe .kpi-rotulo{font-size:.64rem}
.informe .kpi-valor{font-size:1.28rem}
.informe .kpi-valor small{font-size:.74rem}
.informe .kpi-nota{font-size:.66rem}
.informe .chip{font-size:.62rem;padding:0 6px}
.informe .fig{padding:7px 8px 5px;background:var(--papel)}
.informe .fig-titulo{font-size:.8rem}
.informe .fig-sub{font-size:.66rem;margin-bottom:3px}
.informe .leyenda-g{font-size:.68rem;margin-top:3px}
.informe .minis{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px}
.informe .mini-titulo{font-size:.68rem}
.informe .g-punto,.informe .g-mediana{stroke:var(--papel)}
.informe .g-media-punto{fill:var(--papel)}
.informe table{font-size:.74rem;line-height:1.3}
.informe th{font-size:.64rem}
.informe th,.informe td{padding:3px 6px}
.inf-lectura{list-style:none;margin:0;padding:0}
.inf-lectura li{
display:grid;grid-template-columns:128px 1fr;gap:10px;align-items:baseline;
padding:4px 0;border-bottom:1px solid var(--linea-suave);font-size:.78rem;line-height:1.4;
}
.inf-lectura .chip{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.inf-glosario{margin:9px 0 0;font-size:.66rem;line-height:1.45;color:var(--texto-medio)}
.inf-pie{
display:flex;justify-content:space-between;gap:14px;margin-top:8px;padding-top:5px;
border-top:1px solid var(--linea);font-size:.62rem;line-height:1.35;color:var(--texto-tenue);
}
.inf-salto{break-before:page}
@media (max-width:640px){
.informe.en-pantalla{padding:18px 14px}
.inf-ficha,.informe .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.inf-rejilla{grid-template-columns:1fr}
.inf-lectura li{grid-template-columns:1fr;gap:3px}
}
/* ---------- impresión: sale el informe, se va la página ---------- */
@media print{
@page{size:A4;margin:10mm 12mm}
html,body{background:var(--papel) !important}
body.reticula{background-image:none !important}
.home,.actions,.fallback,.pie,.kg-tip{display:none !important}
.panel,.item,table{break-inside:avoid}
body.con-informe .wrap{max-width:none;padding:0}
body.con-informe .wrap > :not(.informe){display:none !important}
body.con-informe .informe{
display:block !important;max-width:none;margin:0;padding:0 0 0;
border:0;box-shadow:none;
}
.informe::before,.informe::after{display:none}
.informe,.informe *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.informe .fig,.informe .kpi,.informe .kpis,.inf-lectura li,.inf-cabecera,.inf-ficha{break-inside:avoid}
.inf-h{break-after:avoid}
.informe tr{break-inside:avoid}
.panel:hover{transform:none}
}