/* ==========================================================================
   AMF INGENIERÍA · Dimensionamiento de baterías — hoja de estilos de marca
   Manual de Marca AMF v1.1: IBM Plex Sans/Mono, grafito + tricolor, radio 4px,
   sin gradientes, sin sombras decorativas, filete tricolor de 6px como firma.
   Mantiene el vocabulario de clases de la herramienta (card, kpi, aviso, btn…)
   para que el motor de cálculo no se toque.
   ========================================================================== */
/* ==========================================================================
   TIPOGRAFÍAS LOCALES — v4.2
   ---------------------------------------------------------------------------
   Hasta la v4.11 el index.html pedía IBM Plex y Noto a fonts.googleapis.com,
   pero el CSP de _headers declaraba style-src 'self' y font-src 'self' data:,
   sin autorizar ni googleapis ni gstatic. Publicada, el navegador rechazaba las
   dos hojas y la página caía al fallback; abierta con doble clic no se notaba,
   porque en file:// no hay CSP de cabecera. Es decir: el defecto sólo aparecía
   en el único lugar donde importa.

   Ahora las tipografías viajan con el paquete y la página no tiene NINGUNA
   referencia externa: vuelve a cumplirse la regla del proyecto de funcionar
   offline con doble clic. Los archivos se bajaron de Google Fonts el 21/08/2026
   (IBM Plex, licencia SIL Open Font License 1.1), subsets latin y latin-ext
   —latin-ext hace falta para el turco: ğ ı ş İ no están en latin—.

   IBM Plex Sans se distribuye como fuente VARIABLE: un solo archivo por subset
   cubre el eje de peso 100–700, y por eso los cuatro pesos que usa la marca
   (400/500/600/700) salen del mismo woff2. Verificado contra la API: la sintaxis
   de rango wght@100..700 devuelve 200 para Sans y 400 para Mono, que es estática
   y necesita un archivo por peso.

   Noto Sans Arabic y Noto Sans SC NO se auto-hospedan: SC pesa megabytes. Las
   reglas html[dir="rtl"] y html[lang="zh"] de más abajo caen al fallback del
   sistema (Segoe UI / Microsoft YaHei), que existe en toda máquina de destino.
   ========================================================================== */
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:100 700;
  font-display:swap; src:url(fonts/ibm-plex-sans-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:100 700;
  font-display:swap; src:url(fonts/ibm-plex-sans-var-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url(fonts/ibm-plex-mono-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url(fonts/ibm-plex-mono-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500;
  font-display:swap; src:url(fonts/ibm-plex-mono-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500;
  font-display:swap; src:url(fonts/ibm-plex-mono-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


:root{
  /* --- Paleta AMF (Manual cap. 15) --- */
  --amf-orange:#FD9905; --amf-green:#6DB64F; --amf-blue:#0F8ED3;
  --amf-orange-deep:#D17F04; --amf-green-deep:#56913E; --amf-blue-deep:#0C73AC;
  --ink-900:#0E1116; --ink-800:#1A1F2A; --ink-700:#2A313D; --ink-500:#5A6273;
  --ink-400:#8A93A4; --ink-300:#B8BEC9; --ink-200:#DDE1E8; --ink-100:#ECEFF4;
  --ink-050:#F4F6FA; --paper:#FFFFFF; --paper-warm:#FAFAF7;
  --state-success:#56913E; --state-warning:#D9A123; --state-critical:#C8412B;
  --state-success-bg:#EDF5EA; --state-warning-bg:#FBF3E0; --state-critical-bg:#FBEFEC;
  --state-info-bg:#EDF3F9;

  /* --- Puente con los nombres que ya usa el motor --- */
  --azul:var(--amf-blue-deep); --azul2:var(--amf-blue); --azulc:var(--amf-blue);
  --verde:var(--amf-green-deep); --naranja:var(--amf-orange-deep);
  --gris:var(--ink-500); --gris2:var(--ink-400); --borde:var(--ink-200);
  --fondo:var(--paper-warm); --rojo:var(--state-critical);
  --radio:4px;
  --sombra:none; --sombra2:none;
  --shadow-overlay:0 10px 28px -12px rgba(14,17,22,.28);
  --sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,"Courier New",monospace;
  --ease:cubic-bezier(.2,0,0,1);

  /* --- Grilla de página --------------------------------------------------
     Un solo eje de márgenes para encabezado, nav, contenido y pie: todo se
     alinea sobre la misma medida y el ancho útil crece con la pantalla en
     lugar de dejar gutters muertos a los costados.                       */
  --shell:1560px;
  --gutter:clamp(14px,2.6vw,44px);
}

/* Alineación única: el contenido se centra en --shell y, cuando la ventana es
   más angosta, cae al gutter mínimo. Sin wrappers extra en el HTML. */
header.app,nav,main,footer.pie,.barra-informe{
  padding-inline:max(var(--gutter),calc((100% - var(--shell)) / 2));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper-warm);color:var(--ink-900);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
a{color:var(--amf-blue-deep);text-decoration:none;border-bottom:1px solid rgba(12,115,172,.35)}
a:hover{color:var(--ink-900);border-bottom-color:var(--ink-400)}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--amf-blue-deep);outline-offset:2px}

/* ---------- firma: filete tricolor ---------- */
.stripe{display:flex;height:6px;width:100%}
.stripe i{display:block;height:100%;flex:1}
.stripe i:nth-child(1){background:var(--amf-orange)}
.stripe i:nth-child(2){background:var(--amf-green)}
.stripe i:nth-child(3){background:var(--amf-blue)}

/* ---------- encabezado ---------- */
header.app{
  background:var(--ink-900);color:var(--paper);
  padding-block:18px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
header.app .logo{display:flex;align-items:center;flex:none}
header.app img{height:42px;width:auto;display:block}
header.app .tit{flex:1 1 320px;min-width:0}
header.app .marca-hdr{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-300);margin-bottom:6px;
}
header.app h1{
  margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.15;
}
header.app .sub{
  font-family:var(--mono);font-size:11px;line-height:1.5;margin-top:6px;
  color:var(--ink-300);letter-spacing:.02em;
}
header.app .ver{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.28);padding:2px 7px;margin-left:8px;
  color:var(--paper);white-space:nowrap;
}

/* selector de idioma — desplegable, igual que el del sitio: siete idiomas no
   entran como botones en fila, y el globo terráqueo se entiende sin rótulo. */
.lang{position:relative;flex:none}
.lang-btn{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:1px solid rgba(255,255,255,.28);
  color:var(--ink-300);font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;padding:7px 11px;cursor:pointer;min-height:34px;
  transition:color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);
}
.lang-btn:hover{color:var(--paper);border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}
.lang-btn svg{display:block;flex:none}
.lang-lista{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:196px;background:var(--ink-900);border:1px solid var(--ink-700);
  box-shadow:0 18px 44px rgba(0,0,0,.45);padding:5px;
  flex-direction:column;gap:1px;
}
.lang.on .lang-lista{display:flex}
.lang-lista button{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  background:none;border:0;padding:9px 11px;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:13px;color:var(--ink-300);min-height:38px;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.lang-lista button .cod{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-500)}
.lang-lista button:hover{background:var(--ink-800);color:var(--paper)}
.lang-lista button.act{background:var(--amf-orange);color:var(--ink-900);font-weight:600}
.lang-lista button.act .cod{color:rgba(20,22,28,.62)}

/* árabe: el atributo dir en <html> da vuelta la maquetación; sólo hay que
   corregir lo que estaba anclado a un lado y la tipografía. */
html[dir="rtl"] body{font-family:"Noto Sans Arabic",var(--sans)}
html[dir="rtl"] .lang-lista{right:auto;left:0}
html[lang="zh"] body{font-family:"Noto Sans SC",var(--sans)}

/* ---------- navegación ---------- */
nav{
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  display:flex;gap:2px;border-bottom:1px solid var(--ink-200);
  position:sticky;top:0;z-index:6;overflow-x:auto;scrollbar-width:none;
}
nav::-webkit-scrollbar{display:none}
nav button{
  background:none;border:none;border-bottom:3px solid transparent;
  color:var(--ink-500);font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.02em;padding:14px 16px 11px;cursor:pointer;white-space:nowrap;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
nav button:hover{color:var(--ink-900)}
nav button.act{color:var(--ink-900);font-weight:600;border-bottom-color:var(--amf-orange)}

main{margin:22px auto 40px}

/* Metodología y Equivalencias usan el MISMO ancho que la hoja de cálculo, y el
   texto llena la tarjeta de lado a lado: sin tope de medida y justificado, con
   guionado, que es lo que evita los ríos blancos en una columna ancha. */
#secAyuda p,#secAyuda li,#secEquiv p,#secEquiv li,
details.ayuda .cont p,details.ayuda .cont li,.nibanner p{
  max-width:none;text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty;
}
#secAyuda .tabla-scroll,#secEquiv .tabla-scroll{margin-inline:0}
/* Las listas traían la sangría por omisión del navegador (40 px): más profunda
   que el margen de la tarjeta, así que el texto de las viñetas no alineaba con
   el de los párrafos. 1.35em deja la viñeta en el margen y el texto alineado. */
#secAyuda ul,#secAyuda ol,#secEquiv ul,#secEquiv ol,
details.ayuda .cont ul,details.ayuda .cont ol{padding-left:1.35em;margin:0 0 15px}
html[dir="rtl"] #secAyuda ul,html[dir="rtl"] #secAyuda ol,
html[dir="rtl"] #secEquiv ul,html[dir="rtl"] #secEquiv ol{padding-left:0;padding-right:1.35em}
#secAyuda li,#secEquiv li{margin-bottom:5px}
#secAyuda li:last-child,#secEquiv li:last-child{margin-bottom:0}

/* ---------- cards y superficies ---------- */
.card{
  background:var(--paper);border:1px solid var(--ink-200);border-radius:4px;
  padding:20px;margin-bottom:16px;
}
.card>h2{
  margin:-20px -20px 18px;padding:12px 20px;
  background:var(--ink-050);border-bottom:1px solid var(--ink-200);
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-900);
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
}
.card>h2 .num{
  background:var(--ink-900);color:var(--paper);width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;flex:none;border-radius:2px;
}

/* --- Qué hay que completar -----------------------------------------------
   El formulario tiene mucha información y no se distinguía el dato que el
   usuario debe aportar del que ya viene fijado por norma. Dos señales: un
   chip en el encabezado de cada sección y un punto naranja en el rótulo de
   los campos que salen impresos en el informe. */
.card>h2 .chip{
  margin-left:auto;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:2px;
  flex:none;white-space:nowrap;
}
.chip-compl{background:#FBF3E0;color:#7A5A12;border:1px solid #EBD9AE}
.chip-norma{background:#EDF3F9;color:#0B5C8A;border:1px solid #CBDDEB}
.chip-opc{background:var(--ink-050);color:var(--ink-500);border:1px solid var(--ink-200)}
.leyenda-req{
  margin:0 0 16px;padding:11px 14px;background:var(--ink-050);
  border:1px solid var(--ink-200);border-left:3px solid var(--amf-orange);
  font-size:12.5px;line-height:1.6;color:var(--ink-700);
}
.leyenda-req b{color:var(--ink-900);font-weight:600}
/* Dos marcadores dibujados con CSS —no con el glifo— para que se vean iguales
   en cualquier tipografía: ● naranja lleno = completar (el campo est\u00e1 vac\u00edo y
   sale impreso); ○ azul hueco = revisar (trae un valor de partida, pero define
   el banco y hay que confirmarlo contra el proyecto). */
.req,.rev{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-left:6px;vertical-align:1px;font-size:0;line-height:0;flex:none;
}
.req{background:var(--amf-orange)}
.rev{width:8px;height:8px;background:transparent;border:1.5px solid var(--amf-blue);margin-left:5px}
.leyenda-req .req,.leyenda-req .rev{margin:0 2px}
/* `required` se usa sólo como enganche de estilo para «todavía vacío»: los
   campos no están dentro de un form, así que no dispara validación nativa. */
input:required:invalid,textarea:required:invalid{
  border-color:#F0BE72;background:#FFFCF6;
  box-shadow:inset 3px 0 0 var(--amf-orange);
}
input:required:invalid:focus,textarea:required:invalid:focus{
  border-color:var(--amf-blue);
  box-shadow:inset 3px 0 0 var(--amf-orange),0 0 0 3px rgba(15,142,211,.16);
}
h3.mini{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-900);margin:22px 0 9px;
  display:flex;align-items:center;gap:9px;
}
h3.mini::before{content:"";width:14px;height:2px;background:var(--amf-orange);flex:none}
.hint{font-size:12.5px;color:var(--ink-500);margin-top:4px;line-height:1.45}
.oculto{display:none !important}
.ok{color:var(--state-success);font-weight:600}
.no{color:var(--state-critical);font-weight:600}

/* ---------- formularios ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 16px;align-items:start}
label{
  display:flex;align-items:center;font-family:var(--mono);font-size:10.5px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);
  margin-bottom:6px;line-height:1.35;
}
/* Los rótulos de una y de dos líneas reservan la misma altura, de modo que todos
   los campos de una fila arrancan sobre la misma línea de base. En bloque, no en
   flex, para que el botón de ayuda quede pegado al texto y no en el borde. */
.grid>div>label{display:block;min-height:2.7em}
.grid>div>label>button.i{vertical-align:1px}
input,select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--ink-300);border-radius:3px;
  font-family:var(--sans);font-size:14.5px;background:var(--paper);color:var(--ink-900);
  transition:border-color .16s var(--ease);
}
input[type=number],#perfilTabla input{font-family:var(--mono);font-variant-numeric:tabular-nums}
input:hover,select:hover{border-color:var(--ink-400)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--amf-blue-deep);box-shadow:0 0 0 2px rgba(12,115,172,.22);
}
input:disabled,select:disabled{opacity:.4;cursor:not-allowed}

/* ---------- botones ---------- */
.btn{
  background:var(--ink-900);color:var(--paper);border:1px solid var(--ink-900);
  padding:10px 20px;border-radius:3px;font-family:var(--sans);font-size:14px;
  font-weight:500;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease);
}
.btn:hover{background:var(--ink-700);border-color:var(--ink-700)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sec{background:var(--paper);color:var(--ink-900);border-color:var(--ink-300)}
.btn.sec:hover{background:var(--ink-050);border-color:var(--ink-400)}
.btn.small{padding:6px 13px;font-size:12.5px}
.btn.verde{background:var(--amf-green-deep);border-color:var(--amf-green-deep)}
.btn.verde:hover{background:#47792f;border-color:#47792f}
.btn.rojo{background:var(--state-critical);border-color:var(--state-critical)}
.btn.rojo:hover{background:#a8351f;border-color:#a8351f}
.fila-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:flex-end}

/* botón de ayuda inline */
button.i{
  width:16px;height:16px;border-radius:50%;border:1px solid var(--ink-300);
  background:var(--paper);color:var(--ink-500);font-family:var(--mono);font-size:10px;
  font-weight:500;cursor:pointer;margin-left:6px;padding:0;line-height:1;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
button.i:hover{border-color:var(--amf-blue-deep);color:var(--amf-blue-deep)}

/* ---------- tablas ---------- */
table{
  border-collapse:collapse;width:100%;font-size:13.5px;background:var(--paper);
  border:1px solid var(--ink-200);font-variant-numeric:tabular-nums;
}
th{
  background:var(--ink-100);color:var(--ink-900);padding:8px 9px;text-align:center;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;border-bottom:1px solid var(--ink-200);
  border-right:1px solid var(--ink-200);
}
th:last-child{border-right:none}
td{border-top:1px solid var(--ink-100);padding:7px 9px;text-align:center}
tbody tr:nth-child(even) td{background:var(--paper-warm)}
tbody tr.sel td{
  background:var(--state-success-bg) !important;font-weight:600;
  box-shadow:inset 3px 0 0 var(--amf-green-deep);
}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--ink-050)}
#perfilTabla td{padding:5px 6px}
#perfilTabla td input{text-align:center;padding:7px 6px}
.tabla-scroll{-webkit-overflow-scrolling:touch}

/* ---------- KPI ---------- */
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 4px}

/* Contenedor de desborde para las tablas anchas. En Equivalencias las tablas
   tienen 4 a 8 columnas de cifras: sin un ancho mínimo el navegador las
   comprime hasta partir cada celda en tres renglones en lugar de ofrecer scroll.
   El mínimo escala con la cantidad de columnas para no forzar scroll de más. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.eqtab{min-width:560px}
.eqtab:has(th:nth-child(5)){min-width:660px}
.eqtab:has(th:nth-child(7)){min-width:780px}
/* Aviso de desborde: un filete a la derecha mientras haya más tabla que ancho. */
.tabla-scroll{
  background:
    linear-gradient(to right,var(--paper) 30%,rgba(255,255,255,0)),
    linear-gradient(to left,var(--paper) 30%,rgba(255,255,255,0)) 100% 0,
    linear-gradient(to right,rgba(18,22,28,.14),rgba(18,22,28,0)),
    linear-gradient(to left,rgba(18,22,28,.14),rgba(18,22,28,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll;
}

/* Tablas de perfil: antes la columna de carga era la única sin ancho y absorbía
   todo el remanente de `table{width:100%}`. Ahora las columnas son
   proporcionales (table-layout fijo, anchos en %), así la tabla ocupa la tarjeta
   completa sin que ninguna columna se coma el sobrante. */
#perfilTabla,#niPerfilTabla{width:100%;table-layout:fixed;min-width:660px}
#perfilTabla th:nth-child(1),#perfilTabla td:nth-child(1){width:9%}
#perfilTabla th:nth-child(2),#perfilTabla td:nth-child(2){width:30%}
#perfilTabla th:nth-child(3),#perfilTabla td:nth-child(3){width:16%}
#perfilTabla th:nth-child(4),#perfilTabla td:nth-child(4){width:18%}
#perfilTabla th:nth-child(5),#perfilTabla td:nth-child(5){width:18%}
#perfilTabla th:nth-child(6),#perfilTabla td:nth-child(6){width:9%}
#niPerfilTabla th:nth-child(1),#niPerfilTabla td:nth-child(1){width:12%}
#niPerfilTabla th:nth-child(2),#niPerfilTabla td:nth-child(2){width:44%}
#niPerfilTabla th:nth-child(3),#niPerfilTabla td:nth-child(3){width:32%}
#niPerfilTabla th:nth-child(4),#niPerfilTabla td:nth-child(4){width:12%}
#perfilTabla td input,#niPerfilTabla td input{max-width:280px;margin-inline:auto}

/* Bloque §5.4: deja de flotar a la derecha con un espaciador flex —era el hueco
   grande en el medio de la sección 4— y pasa a ser un panel propio. */
.panel-aleat{
  margin-top:16px;background:var(--ink-050);border:1px solid var(--ink-200);
  border-radius:3px;padding:4px 16px 16px;
}
.panel-aleat>h3.mini{margin:14px 0 12px}
.panel-aleat .grid{grid-template-columns:repeat(auto-fit,minmax(220px,340px));justify-content:start}

.barra-calcular{
  display:flex;margin-top:18px;padding-top:16px;border-top:1px solid var(--ink-200);
}
.btn-calcular{font-size:16px;padding:13px 40px;min-height:48px}
#perfilTabla td input,#niPerfilTabla td input{text-align:center}
#perfilTabla td,#niPerfilTabla td{padding:5px 7px}
#perfilTabla th,#niPerfilTabla th{white-space:nowrap}

.kpi{
  background:var(--paper);border:1px solid var(--ink-200);border-top:4px solid var(--amf-blue);
  padding:12px 16px 11px;min-width:150px;flex:1 1 150px;border-radius:0 0 3px 3px;
}
.kpi.v{border-top-color:var(--amf-green)}
.kpi.n{border-top-color:var(--amf-orange)}
.kpi .v{
  font-family:var(--mono);font-size:19px;font-weight:500;line-height:1.2;
  color:var(--ink-900);letter-spacing:-.01em;
}
.kpi.v .v{color:var(--amf-green-deep)}
.kpi .t{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-500);margin-top:5px;
}

/* ---------- avisos ---------- */
.aviso{
  background:var(--state-warning-bg);border:1px solid #EFDCB2;border-radius:3px;
  padding:11px 14px;font-size:13px;line-height:1.5;color:#6B5209;margin:10px 0;
}
.aviso b{color:#4F3D06}
.aviso.rojo{background:var(--state-critical-bg);border-color:#E8C8C0;color:#6B2A1F}
.aviso.rojo b{color:#542017}
.aviso.verde{background:var(--state-success-bg);border-color:#C6DDBB;color:#31541F}
.aviso.verde b{color:#244016}
.badge{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;
  background:var(--ink-900);color:var(--paper);padding:2px 7px;border-radius:2px;
  vertical-align:2px;
}
.badge.v{background:var(--amf-green-deep)}
.badge.n{background:var(--amf-orange-deep)}
.est{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px}
.est.ok{background:var(--amf-green-deep)}
.est.pend{background:var(--amf-orange-deep)}

/* ---------- selectores de tecnología y de modo ---------- */
.quim{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qcard{
  text-align:left;background:var(--paper);border:1px solid var(--ink-200);
  border-top:4px solid var(--ink-300);border-radius:0 0 3px 3px;padding:16px 18px;
  cursor:pointer;font-family:var(--sans);transition:border-color .16s var(--ease);
}
.qcard .tit{
  display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;
  color:var(--ink-900);margin-bottom:7px;letter-spacing:-.01em;
}
.qcard .ic{
  width:26px;height:26px;border-radius:2px;display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:12px;font-weight:500;
  color:var(--paper);flex:none;background:var(--ink-500);
}
.qcard p{margin:0;font-size:12.5px;color:var(--ink-500);line-height:1.5}
.qcard .tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.qcard .tags span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink-050);border:1px solid var(--ink-200);color:var(--ink-500);
  border-radius:999px;padding:3px 9px;
}
.qcard:hover{border-color:var(--ink-400)}
.qcard.act{border-color:var(--ink-300);border-top-color:var(--amf-blue);background:var(--ink-050)}
.qcard.act .ic{background:var(--amf-blue-deep)}
.qcard.ni.act{border-top-color:var(--amf-orange)}
.qcard.ni.act .ic{background:var(--amf-orange-deep)}
.qcard.li.act{border-top-color:var(--amf-green)}
.qcard.li.act .ic{background:var(--amf-green-deep)}

.modos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.modo{
  text-align:left;background:var(--paper);border:1px solid var(--ink-200);border-radius:3px;
  padding:13px 16px;cursor:pointer;font-family:var(--sans);display:block;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.modo b{display:block;font-size:14px;font-weight:600;color:var(--ink-900);margin-bottom:3px}
.modo span{display:block;font-size:12px;color:var(--ink-500);line-height:1.45}
.modo:hover{border-color:var(--ink-400)}
.modo.act{border-color:var(--ink-900);background:var(--ink-050)}
.ups{
  background:var(--ink-050);border:1px solid var(--ink-200);border-top:4px solid var(--amf-blue);
  border-radius:0 0 3px 3px;padding:16px 18px;margin:6px 0 4px;
}

/* ---------- ayuda desplegable y tooltip ---------- */
details.ayuda{
  margin:14px 0 2px;border:1px solid var(--ink-200);border-radius:3px;
  background:var(--paper);overflow:hidden;
}
details.ayuda summary{
  cursor:pointer;padding:11px 15px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-900);list-style:none;
  display:flex;align-items:center;gap:10px;
}
details.ayuda summary::-webkit-details-marker{display:none}
details.ayuda summary::before{
  content:"+";width:16px;height:16px;border:1px solid var(--ink-300);color:var(--ink-500);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none;
}
details.ayuda[open] summary::before{content:"–"}
details.ayuda[open] summary{border-bottom:1px solid var(--ink-200);background:var(--ink-050)}
details.ayuda .cont{padding:14px 18px 16px;font-size:13.5px;color:var(--ink-700);line-height:1.55}
details.ayuda .cont p{margin:0 0 10px}
details.ayuda .cont ul{margin:0 0 10px;padding-left:20px}
details.ayuda .cont li{margin-bottom:6px}

#tipBox{
  position:fixed;z-index:60;max-width:400px;background:var(--paper);
  border:1px solid var(--ink-300);border-radius:4px;box-shadow:var(--shadow-overlay);
  padding:0;display:none;
}
#tipBox.on{display:block}
#tipBox .th{
  background:var(--ink-050);border-bottom:1px solid var(--ink-200);padding:10px 14px;
  display:flex;align-items:center;gap:10px;
}
#tipBox .th b{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-900);flex:1;
}
#tipBox .th button{
  background:none;border:none;color:var(--ink-400);font-size:17px;cursor:pointer;
  line-height:1;padding:0 2px;
}
#tipBox .th button:hover{color:var(--ink-900)}
#tipBox .tb{padding:13px 14px 15px;font-size:13px;color:var(--ink-700);line-height:1.55;text-align:left}
#tipBox .tb .ref{
  margin-top:10px;padding-top:9px;border-top:1px solid var(--ink-200);
  font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--ink-500);
}

/* ---------- fichas técnicas y series ---------- */
.fichas{background:var(--ink-050);border:1px solid var(--ink-200);border-radius:3px;padding:15px 18px;margin-top:8px}
.fichas .lst{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:12px 0 6px}
.fichas label.f{
  display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13px;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-700);
  background:var(--paper);border:1px solid var(--ink-200);border-radius:3px;
  padding:8px 11px;cursor:pointer;margin:0;
}
.fichas label.f:hover{border-color:var(--ink-400)}
.fichas label.f input{width:15px;height:15px;flex:none;accent-color:var(--amf-blue-deep);padding:0}
.fichas label.f.sel{border-color:var(--amf-green-deep);background:var(--state-success-bg)}
.fichas label.f b{font-weight:600;color:var(--ink-900)}
.fichas label.f a{margin-left:auto;border:none;font-size:15px;line-height:1}
.fichas .cnt{font-family:var(--mono);font-size:11px;color:var(--ink-500)}
.serie-box{
  border:1px solid var(--ink-200);border-radius:3px;padding:13px 16px;margin-bottom:10px;
  display:flex;align-items:center;gap:14px;background:var(--paper);flex-wrap:wrap;
}
.serie-box:hover{border-color:var(--ink-400)}
.graf{background:var(--paper);border:1px solid var(--ink-200);border-radius:3px;padding:10px}

/* ---------- tabla de equivalencias ---------- */
.eqtab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.eqtab th{
  background:var(--ink-100);color:var(--ink-900);font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;padding:9px;border-bottom:1px solid var(--ink-200);
  text-align:center;
}
.eqtab th:first-child{text-align:left}
.eqtab td{padding:8px 9px;border-bottom:1px solid var(--ink-100);text-align:center;font-size:13.5px}
.eqtab td:first-child{text-align:left}
.eqtab tr.destaca td{background:var(--ink-050);font-weight:600}
.eqtab td.pend{color:var(--amf-orange-deep)}
/* Tabla de factores por temperatura: columnas de igual ancho para que los pares
   °C/factor llenen la tarjeta, con un filete que separa cada par del siguiente. */
.tabtemp{table-layout:fixed;min-width:0}
.tabtemp th,.tabtemp td{text-align:center;width:auto}
.tabtemp td.fv{font-variant-numeric:tabular-nums}
.tabtemp th:nth-child(odd):not(:first-child),
.tabtemp td:nth-child(odd):not(:first-child){border-left:1px solid var(--ink-200)}
.nibanner{
  border:1px solid var(--ink-200);border-top:4px solid var(--amf-orange);
  background:var(--paper);border-radius:0 0 3px 3px;padding:15px 17px;margin-bottom:16px;
}
.nibanner b{color:var(--ink-900)}

/* ---------- identificación de usuario ---------- */
.usuario{
  margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;
  color:var(--ink-300);flex:none;
}
.usuario>span{font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.usuario button{
  background:none;border:1px solid rgba(255,255,255,.28);color:var(--paper);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;cursor:pointer;transition:background .16s var(--ease);
}
.usuario button:hover{background:rgba(255,255,255,.12)}

.velo{
  position:fixed;inset:0;background:rgba(14,17,22,.72);display:none;
  align-items:center;justify-content:center;z-index:40;padding:20px;overflow-y:auto;
}
.velo.on{display:flex}
.modal{
  background:var(--paper);border-radius:4px;max-width:520px;width:100%;
  box-shadow:var(--shadow-overlay);overflow:hidden;margin:auto;
}
.modal>.top{
  display:flex;align-items:center;gap:14px;padding:18px 22px;
  background:var(--ink-900);color:var(--paper);
}
.modal>.top img{height:34px;width:auto;flex:none}
.modal>.top b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.modal>.top span{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--ink-300);margin-top:3px;
}
.modal .body{padding:20px 22px 22px}
.modal .body>p{font-size:13.5px;color:var(--ink-700);margin:0 0 16px;line-height:1.55}
.modal .campo{margin-bottom:12px}
.modal .dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .check{
  display:flex;gap:10px;align-items:flex-start;margin:8px 0 4px;font-family:var(--sans);
  font-size:13.5px;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--ink-700);
  cursor:pointer;
}
.modal .check input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--ink-900)}
.modal .err{color:var(--state-critical);font-size:13px;margin:8px 0 0;min-height:1px}
.modal .legal{font-size:11.5px;color:var(--ink-500);line-height:1.55;margin-top:14px}
.modal .pie{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.modal .sso{display:grid;gap:9px;margin-bottom:14px}
.modal .sso button{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--paper);border:1px solid var(--ink-300);border-radius:3px;
  padding:10px;font-family:var(--sans);font-size:14px;font-weight:500;
  color:var(--ink-900);cursor:pointer;
}
.modal .sso button:hover{background:var(--ink-050);border-color:var(--ink-400)}
.modal .sso svg{width:18px;height:18px;flex:none}
.modal .ssoerr{color:var(--state-critical);font-size:12.5px;margin-bottom:10px}
.modal .sep{
  text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-400);margin:4px 0 14px;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- pie ---------- */
footer.pie{margin:0 auto 36px}
footer.pie .caja{background:var(--paper);border:1px solid var(--ink-200);border-radius:4px;padding:20px 22px}
footer.pie .top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
footer.pie .top img{height:36px;width:auto;flex:none}
footer.pie .marca b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
footer.pie .marca span{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-500);margin-top:2px;
}
footer.pie .cont{margin-left:auto;font-size:13px;text-align:right;line-height:1.6}
footer.pie .leg{
  font-size:11px;color:var(--ink-500);line-height:1.6;text-align:justify;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--ink-200);
}
footer.pie .ver2{
  margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--ink-400);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ---------- gráficos ---------- */
svg text{font-family:var(--mono)}
#grafico{overflow-x:auto;-webkit-overflow-scrolling:touch}
#grafico svg,.graf svg{display:block;max-width:100%;height:auto}
.g-hit{fill:transparent;cursor:crosshair}
.g-tip{
  position:fixed;z-index:30;background:var(--ink-900);color:var(--paper);
  font-family:var(--mono);font-size:11px;line-height:1.5;padding:7px 10px;border-radius:3px;
  pointer-events:none;display:none;white-space:nowrap;
}
.g-tip.on{display:block}
.g-wrap{position:relative}

/* ==========================================================================
   MEMORIA DE CÁLCULO — documento AMF sobre papel blanco.
   Regla de la pieza: ningún fondo oscuro, ninguna trama pesada, nada que
   consuma tóner. La jerarquía se hace con filetes, mono y aire.
   ========================================================================== */
#informe{
  display:none;background:var(--paper);max-width:210mm;margin:0 auto;
  padding:0;font-size:12.6px;line-height:1.55;color:var(--ink-900);
}
#informe .stripe{height:6px;margin:0 0 14px}

/* --- membrete --- */
#informe .doc-mb{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--ink-300);padding-bottom:11px;
}
#informe .doc-mb .mrc{display:flex;align-items:center;gap:11px}
#informe .doc-mb img{height:38px;width:auto;display:block}
#informe .doc-mb b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
#informe .doc-mb .mrc span{
  display:block;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-500);margin-top:3px;
}
#informe .doc-id{
  font-family:var(--mono);font-size:9.2px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-500);text-align:right;line-height:1.75;white-space:nowrap;
}
#informe .doc-id b{color:var(--ink-900);font-weight:500}

/* --- bloque de título --- */
#informe .doc-kick{
  display:flex;align-items:center;gap:9px;margin:22px 0 9px;
  font-family:var(--mono);font-size:9.6px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amf-orange-deep);
}
#informe .doc-kick::before{content:"";width:18px;height:2px;background:var(--amf-orange);flex:none}
#informe h1{
  font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink-900);
  margin:0 0 6px;line-height:1.12;max-width:26em;
}
#informe .doc-sub{
  font-size:13.5px;color:var(--ink-700);line-height:1.4;margin:0;max-width:40em;
}

/* --- ficha de identificación del documento --- */
#informe .doc-ficha{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--ink-200);margin:16px 0 4px;
}
#informe .doc-ficha>div{padding:8px 12px 9px;border-left:1px solid var(--ink-200);min-width:0}
#informe .doc-ficha>div:first-child{border-left:none}
#informe .doc-ficha .k{
  font-family:var(--mono);font-size:8.4px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-500);
}
#informe .doc-ficha .v{font-size:12px;font-weight:600;margin-top:4px;line-height:1.3;word-break:break-word}

/* --- secciones · los títulos van en negrita y con filete grueso, para que la
       jerarquía se lea también impreso en blanco y negro --- */
#informe h2{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:10.8px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-900);margin:26px 0 10px;
  border-bottom:2px solid var(--ink-900);padding-bottom:6px;
}
#informe h2 .n{color:var(--amf-orange-deep);font-weight:700;letter-spacing:.1em}
#informe h3{
  font-family:var(--mono);font-size:9.8px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-900);margin:16px 0 6px;
}
#informe p{margin:0 0 9px;text-align:justify;max-width:none}
#informe .nota{font-size:11px;color:var(--ink-500);line-height:1.5;margin:4px 0 10px;text-align:left}

/* --- tablas --- */
#informe table{font-size:11px;margin:9px 0 4px;border:1px solid var(--ink-200)}
#informe th{
  background:var(--ink-100);color:var(--ink-900);padding:6px 7px;font-size:9.2px;
  letter-spacing:.07em;border-right:1px solid var(--ink-200);border-bottom:1px solid var(--ink-300);
}
#informe td{padding:5px 7px;border-top:1px solid var(--ink-100)}
#informe tbody tr:nth-child(even) td{background:var(--paper-warm)}
#informe table.datos td:first-child{text-align:left;width:52%;color:var(--ink-700)}
#informe table.datos td:last-child{font-family:var(--mono);font-size:10.6px}
#informe tr.sel td,#informe td.sel{background:var(--state-success-bg) !important;font-weight:600}

/* --- resultado destacado --- */
#informe .doc-res{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:14px;
  border:1px solid #C6DDBB;border-top:3px solid var(--amf-green);
  background:var(--state-success-bg);padding:13px 16px 12px;margin:12px 0 6px;
}
#informe .doc-res.no{border-color:#EFDCB2;border-top-color:var(--amf-orange);background:var(--state-warning-bg)}
#informe .doc-res .k{
  font-family:var(--mono);font-size:8.4px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-500);
}
#informe .doc-res .v{
  font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink-900);
  margin-top:4px;line-height:1.2;letter-spacing:-.01em;
}

/* --- figuras y fórmulas --- */
#informe .doc-fig{border:1px solid var(--ink-200);background:var(--paper);padding:10px 8px 6px;margin:10px 0 0}
#informe .doc-cap{
  font-family:var(--mono);font-size:9.2px;letter-spacing:.06em;color:var(--ink-500);
  margin:6px 0 14px;line-height:1.5;
}
#informe .form{
  font-family:var(--mono);font-size:10.6px;line-height:1.7;background:var(--ink-050);
  border:1px solid var(--ink-200);padding:10px 13px;margin:9px 0;text-align:center;
}
#informe svg{max-width:100%;height:auto;display:block}

/* --- cierre --- */
#informe .doc-firm{
  margin-top:26px;padding-top:12px;border-top:1px solid var(--ink-300);
  display:flex;gap:14px;align-items:flex-start;
}
#informe .doc-firm img{height:30px;width:auto;flex:none}
#informe .doc-firm .id b{font-size:12px;font-weight:600}
#informe .doc-firm .id{flex:1;font-size:11.5px;line-height:1.55;color:var(--ink-700)}
#informe .doc-firm .nrm{
  text-align:right;font-family:var(--mono);font-size:9.2px;letter-spacing:.08em;
  color:var(--ink-500);line-height:1.7;white-space:nowrap;
}
#informe .doc-legal{
  font-size:9.6px;color:var(--ink-500);line-height:1.6;text-align:justify;margin:12px 0 0;
}
#informe .doc-run{display:none}
#informe table,#informe .doc-res,#informe .doc-fig,#informe .doc-ficha,#informe .form{page-break-inside:avoid}
#informe p{orphans:3;widows:3}
#informe h1,#informe h2,#informe h3,#informe .doc-kick{page-break-after:avoid}

body.modo-informe header.app,body.modo-informe nav,body.modo-informe main,
body.modo-informe footer.pie{display:none}
body.modo-informe{background:var(--ink-100)}
body.modo-informe #informe{
  display:block;background:var(--paper);border:1px solid var(--ink-200);
  box-shadow:0 1px 3px rgba(14,17,22,.08);margin:22px auto 40px;padding:0 17mm 20mm;
}
body.modo-informe #informe .stripe{margin:0 -17mm 14px}
.barra-informe{
  position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--ink-200);
  padding-block:12px;display:none;gap:12px;z-index:5;align-items:center;flex-wrap:wrap;
}
body.modo-informe .barra-informe{display:flex}
.barra-informe .hint{color:var(--ink-500);margin:0}

/* ---------- impresión ----------
   v4.8 — Dos cambios pedidos sobre la memoria impresa: un punto menos de cuerpo y
   que los cuadros y los gráficos no se partan entre hojas.

   Se aprovechó para sacar SIETE reglas que apuntaban a cosas que NO EXISTEN en el
   informe: .doc-sub, .doc-res, .doc-legal y .doc-run —el bloque de resultado nunca
   recibió su fondo verde al imprimir, y el pie corrido con el número de página nunca
   se dibujó, porque ningún elemento lleva esa clase—, más .kpi y .kpis, que son del
   calculador y no del informe, y tfoot, que ninguna de las once tablas emite.
   Una regla muerta es peor que ninguna: hace creer que el caso está cubierto.

   QUEDA PENDIENTE, y no es menor: el informe impreso no lleva número de página. Con
   position:fixed no se puede numerar en Chrome; hace falta @page con contadores. */
@media print{
  .velo,#tipBox,.barra-informe,.g-tip{display:none !important}
  html,body{background:#fff !important}
  header.app,nav,main,footer.pie{display:none !important}
  /* El filete tricolor de la PÁGINA (index.html, hijo directo del body) no es el del
     informe: son dos. Al imprimir salían los dos, uno encima del otro, y el de arriba
     sin nada al lado. El informe trae el suyo propio, que es el que corresponde. */
  body>.stripe{display:none !important}
  #informe{
    display:block !important;padding:0 !important;margin:0 !important;max-width:none;
    border:none !important;box-shadow:none !important;font-size:9.6pt;line-height:1.45;
  }
  #informe,#informe *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #informe .stripe{margin:0 0 9px !important;height:4.5px !important}
  #informe h1{font-size:17pt}
  #informe h2{font-size:8.2pt;font-weight:700;margin:13pt 0 5pt}
  #informe table{font-size:8pt}
  #informe th{background:#F1F3F7 !important;color:#0E1116 !important;font-size:7pt}
  #informe tbody tr:nth-child(even) td{background:#FAFAF7 !important}
  #informe tr.sel td,#informe td.sel{font-weight:600 !important;background:#EDF5EA !important}
  #informe .form{background:#F4F6FA !important}
  /* Las fichas de cifra (.kpi) NO llevan fondo: ya se distinguen por el filete de
     color de arriba, que es un borde y se imprime siempre. Las reglas viejas les
     ponían fondo a través de .doc-res, una clase que el informe nunca emitió. */

  /* --- que nada se parta donde no corresponde -------------------------------
     Un cuadro partido en dos hojas deja de ser un cuadro: la mitad de abajo queda
     sin encabezado, y sin encabezado una columna de números no significa nada.

       · una FILA no se parte nunca por el medio;
       · un GRÁFICO no se parte nunca, es indivisible por definición;
       · un TÍTULO no queda nunca solo al pie de una hoja;
       · una TABLA tampoco se parte.

     Lo último se pudo poner porque se MIDIÓ: con el cuerpo de esta versión, sobre
     las 28 series del catálogo, la tabla más alta del informe ocupa 407 px de los
     998 de la caja útil de una A4 —el 41 %—, así que forzarla entera nunca deja
     media página vacía. Y si alguna vez una tabla no entrara en una página, la
     regla no rompe nada: `break-inside:avoid` es una preferencia, no una orden, y
     el navegador la parte igual antes que perder contenido. Para ese caso está el
     encabezado repetido, que es lo que hace legible la segunda mitad. */
  #informe tr,#informe img,#informe svg{break-inside:avoid;page-break-inside:avoid}
  #informe table{break-inside:avoid;page-break-inside:avoid}
  #informe .graf,#informe .form{break-inside:avoid;page-break-inside:avoid}
  #informe h1,#informe h2{break-inside:avoid;break-after:avoid;page-break-after:avoid}
  #informe thead{display:table-header-group}
  #informe p,#informe li{orphans:3;widows:3}
  /* Un epígrafe explica el gráfico que tiene arriba: en la hoja siguiente no explica
     nada. Y el gráfico de la curva va después de su tabla, así que tampoco puede
     despegarse de ella. */
  #informe .graf+p{break-before:avoid;page-break-before:avoid}
  #informe table+.graf{break-before:avoid;page-break-before:avoid}
  /* El bloque de cierre —firma, contacto y aviso legal— es uno solo: se estaba
     partiendo con la firma al pie de una hoja y el aviso legal solo en la siguiente. */
  #informe>div:last-child{break-inside:avoid;page-break-inside:avoid}

  a{color:#0C73AC !important;border:none !important;text-decoration:none}
  @page{size:A4;margin:15mm 15mm 18mm}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  header.app{padding-block:16px 14px}
  main{margin:18px auto 34px}
  .quim{grid-template-columns:1fr 1fr}
  .quim>:last-child:nth-child(3){grid-column:1 / -1}
  #informe .doc-ficha{grid-template-columns:repeat(2,minmax(0,1fr))}
  #informe .doc-ficha>div:nth-child(3){border-left:none}
  #informe .doc-ficha>div:nth-child(n+3){border-top:1px solid var(--ink-200)}
}
@media (max-width:760px){
  header.app{padding-block:14px 12px;gap:12px}
  header.app img{height:34px}
  header.app h1{font-size:16px}
  header.app .sub{font-size:10px}
  header.app .tit{flex:1 1 100%;order:3}
  .lang{order:2;margin-left:auto}
  html[dir="rtl"] .lang{margin-left:0;margin-right:auto}
  .usuario{order:4;flex:1 1 100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap}
  .usuario>span{flex:1 1 100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  nav button{padding:13px 12px 10px;font-size:12.5px}
  main{margin:14px auto 28px}
  footer.pie .cont{margin-left:0;text-align:left;flex:1 1 100%}
  .card{padding:16px 15px;border-radius:3px;margin-bottom:12px}
  .card>h2{margin:-16px -15px 16px;padding:11px 15px;font-size:10.5px}
  .card>h2 .chip{margin-left:0;font-size:8.5px;padding:3px 7px}
  .leyenda-req{font-size:12px;padding:10px 12px}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .quim,.modos{grid-template-columns:1fr}
  .kpi{flex:1 1 44%;min-width:0;padding:11px 13px}
  .kpi .v{font-size:17px}
  table{font-size:12.5px}
  th,td{padding:6px 7px}
  .eqtab td,.eqtab th{padding:7px}
  .eqtab{font-size:12.5px}
  .eqtab td{font-size:12.5px}
  /* en columna angosta el justificado abre huecos entre palabras: se alinea a la
     izquierda, que es lo legible a ese ancho */
  #secAyuda p,#secAyuda li,#secEquiv p,#secEquiv li,
  details.ayuda .cont p,details.ayuda .cont li,.nibanner p{text-align:left}
  details.ayuda .cont{font-size:13px;padding:12px 14px 14px}
  #tipBox{max-width:calc(100vw - 24px)}
  .fichas .lst{grid-template-columns:1fr}
  .barra-informe{padding-block:10px}
  .barra-informe .btn{flex:1 1 auto}
  body.modo-informe #informe{padding:0 18px 26px;margin:12px auto 26px}
  body.modo-informe #informe .stripe{margin:0 -18px 12px}
  #informe{font-size:12px}
  #informe .doc-mb{flex-wrap:wrap;gap:10px;align-items:flex-start}
  #informe .doc-id{text-align:left;white-space:normal}
  #informe h1{font-size:19px}
  #informe .doc-res{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:11px}
  #informe .doc-firm{flex-wrap:wrap}
  #informe .doc-firm .nrm{text-align:left;white-space:normal;flex:1 1 100%}
  #informe table{font-size:10.5px}
  #informe th,#informe td{padding:5px 6px}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  #perfilTabla th:nth-child(3),#perfilTabla td:nth-child(3){display:none}
  #perfilTabla,#niPerfilTabla{table-layout:auto;min-width:520px}
  #perfilTabla th,#perfilTabla td,#niPerfilTabla th,#niPerfilTabla td{width:auto}
  #perfilTabla td input,#niPerfilTabla td input{max-width:none}
  .panel-aleat{padding:2px 13px 14px}
  .panel-aleat .grid{grid-template-columns:1fr}
  .btn-calcular{width:100%}
  #perfilTabla{font-size:12px}
  #perfilTabla th,#perfilTabla td{padding:5px 4px}
  #niPerfilTabla th,#niPerfilTabla td{padding:5px 4px}
  .fila-btns .btn{flex:1 1 100%}
  .fila-btns>div[style*="min-width"]{min-width:0 !important;flex:1 1 100%}
  .modal>.top{padding:14px 16px}
  .modal .body{padding:16px}
  .modal .dos{grid-template-columns:1fr}
  #informe .doc-ficha{grid-template-columns:1fr}
  #informe .doc-ficha>div{border-left:none;border-top:1px solid var(--ink-200)}
  #informe .doc-ficha>div:first-child{border-top:none}
}

/* En pantalla táctil los campos y botones no bajan de 44 px de alto. */
@media (hover:none) and (pointer:coarse){
  input,select,textarea{min-height:44px;font-size:16px}
  #perfilTabla td input,#niPerfilTabla td input{min-height:42px}
  .btn{min-height:44px}
  .btn.small{min-height:38px}
  nav button{min-height:46px}
  button.i{width:26px;height:26px;font-size:12px}
  .g-tip{font-size:12px;padding:9px 12px}
}