/* ==========================================================================
   Herramientas FISIQA — sistema visual
   Tomado de DosiFISIQA (app/static/css/estilo.css) para que toda la familia
   de aplicaciones se vea igual: misma paleta, mismas formas, misma
   tipografía del sistema. No se cargan tipografías externas.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Marca FISIQA --- */
  --marino:        #0E3A52;
  --marino-900:    #07293A;
  --marino-700:    #123A50;
  --marino-300:    #4A7D95;
  --turquesa:      #2B7C99;
  --turquesa-400:  #3E9DBD;
  --turquesa-100:  #E4F1F6;
  --carbon:        #2E2E2E;
  --naranja:       #F28C1E;
  --naranja-100:   #FDF0DF;

  /* --- Estados --- */
  --verde:         #1B8A5A;
  --verde-fondo:   #E7F5ED;
  --verde-borde:   #B4E0C7;
  --rojo:          #C0392B;
  --rojo-fondo:    #FCECEA;
  --rojo-borde:    #F3C4BE;
  --ambar:         #B57407;
  --ambar-fondo:   #FDF3E0;
  --ambar-borde:   #F2D9A8;

  /* --- Neutros --- */
  --fondo:         #F3F6F9;
  --superficie:    #FFFFFF;
  --superficie-2:  #F8FAFC;
  --borde:         #DCE5EC;
  --borde-fuerte:  #C3D0DA;
  --texto:         #16242F;
  --texto-suave:   #5B6C7A;
  --texto-tenue:   #8496A3;

  /* --- Marcas de datos ---
     Derivadas del turquesa y el naranja de marca, con algo más de croma para
     que funcionen como marcas de un gráfico. Elegidas con el validador de la
     guía de visualización: pasan banda de luminosidad, suelo de croma,
     separación bajo daltonismo y contraste, en claro y en oscuro. */
  --dato-curva:    #1E7FA3;
  --dato-punto:    #C2690B;
  --dato-rejilla:  #E3EAF0;
  --dato-eje:      #B9C7D2;

  /* --- Formas --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sombra:    0 1px 2px rgba(14, 58, 82, .06), 0 2px 8px rgba(14, 58, 82, .06);
  --sombra-md: 0 4px 16px rgba(14, 58, 82, .10);

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  /* Cursiva de serifa para los símbolos de magnitud, como la de los propios
     protocolos. Todas son tipografías del sistema: no se descarga ninguna. */
  --mat: Cambria, "Times New Roman", Georgia, "Nimbus Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --marino:       #9CD2E6;
    --marino-900:   #CDE7F1;
    --marino-700:   #B6DCEB;
    --turquesa:     #6FB8D4;
    --turquesa-400: #8CCBE3;
    --turquesa-100: #123141;
    --naranja:      #E3A76B;
    --naranja-100:  #2A1F12;

    --verde:        #63C59B;  --verde-fondo: #102A1F;  --verde-borde: #1F4D39;
    --rojo:         #E58A8A;  --rojo-fondo:  #2D1515;  --rojo-borde:  #5A2A2A;
    --ambar:        #E3A76B;  --ambar-fondo: #2A1F12;  --ambar-borde: #54401F;

    --fondo:        #0A1A23;
    --superficie:   #112733;
    --superficie-2: #0E212C;
    --borde:        #23404F;
    --borde-fuerte: #335264;
    --texto:        #E4EEF2;
    --texto-suave:  #9DB2BC;
    --texto-tenue:  #7A8F9B;

    --dato-rejilla: #1C3443;
    --dato-eje:     #2F4F61;

    --sombra:    0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
    --sombra-md: 0 4px 16px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --marino:       #9CD2E6;
  --marino-900:   #CDE7F1;
  --marino-700:   #B6DCEB;
  --turquesa:     #6FB8D4;
  --turquesa-400: #8CCBE3;
  --turquesa-100: #123141;
  --naranja:      #E3A76B;
  --naranja-100:  #2A1F12;

  --verde:        #63C59B;  --verde-fondo: #102A1F;  --verde-borde: #1F4D39;
  --rojo:         #E58A8A;  --rojo-fondo:  #2D1515;  --rojo-borde:  #5A2A2A;
  --ambar:        #E3A76B;  --ambar-fondo: #2A1F12;  --ambar-borde: #54401F;

  --fondo:        #0A1A23;
  --superficie:   #112733;
  --superficie-2: #0E212C;
  --borde:        #23404F;
  --borde-fuerte: #335264;
  --texto:        #E4EEF2;
  --texto-suave:  #9DB2BC;
  --texto-tenue:  #7A8F9B;

  --dato-rejilla: #1C3443;
  --dato-eje:     #2F4F61;

  --sombra:    0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --sombra-md: 0 4px 16px rgba(0, 0, 0, .35);
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` debe ganar siempre: cualquier regla que fije un `display` —y hay
   varias abajo— lo anularía y el elemento seguiría a la vista. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.5rem; letter-spacing: -.015em; }
h2 { font-size: 1.2rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; }
h4 { font-size: .9rem; }
p  { margin: 0; }
a  { color: var(--turquesa); }

.num   { font-variant-numeric: tabular-nums; }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.suave { color: var(--texto-suave); }
.tenue { color: var(--texto-tenue); }

.eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-suave);
}

/* ------------------------------------------------------------- logotipos */
.marca { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.marca__icono { width: 38px; height: 38px; flex: none; display: block; }
.marca__texto { display: flex; flex-direction: column; min-width: 0; }
.marca__nombre {
  font-weight: 800; font-size: 1.15rem; letter-spacing: .06em;
  color: var(--marino); line-height: 1.1; white-space: nowrap;
}
.marca__nombre em { font-style: normal; color: var(--turquesa); }
.marca__bajada {
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-suave); line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
a.marca { text-decoration: none; }

/* Con el imagotipo original —el de img/marca/, tal cual lo entregó FISIQA—
   el nombre ya viene dentro de la imagen. La bajada pasa entonces al lado,
   separada por un filete, en lugar de debajo. Es el mismo bloque que usa
   DosiFISIQA cuando encuentra el logotipo de verdad. */
.marca__imagotipo {
  height: 40px; width: auto; flex: none;
  display: block; object-fit: contain;
  /* El acolchado va siempre, con fondo o sin él, para que la cabecera mida
     lo mismo en los dos temas. El margen negativo lo devuelve a la vertical
     del texto de abajo. */
  padding: 3px 7px; box-sizing: content-box;
  border-radius: var(--r-sm); margin-left: -7px;
}

/* El imagotipo está dibujado para fondo claro: la «A» es azul marino y el aro
   del gantry casi negro, así que sobre el fondo oscuro desaparecen. Un
   logotipo no se retoca —es la marca, va tal cual— de modo que lo que se le
   da es el fondo claro para el que fue hecho. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca__imagotipo { background: #FFFFFF; }
}
:root[data-theme="dark"] .marca__imagotipo { background: #FFFFFF; }
.marca__bajada--suelta {
  padding-left: .7rem; margin-left: .7rem;
  border-left: 1px solid var(--borde-fuerte);
  min-width: 0;
}

/* En pantallas estrechas se reduce la altura, nunca el ancho: así el
   logotipo encoge entero en vez de aplastarse. */
@media (max-width: 420px) {
  .marca__imagotipo { height: 32px; }
  .marca__bajada--suelta { padding-left: .5rem; margin-left: .5rem; }
}

/* ------------------------------------------------------------- estructura */
.marco { max-width: 1140px; margin: 0 auto; padding: 20px 16px 56px; }

.cabecera {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: 1px solid var(--borde);
}
.cabecera__acciones { margin-left: auto; display: flex; gap: .4rem; align-items: center; }

/* ---------------------------------------------------------- tarjetas */
.modulos { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .modulos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .modulos { grid-template-columns: 1fr; } }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: .45rem;
  text-align: left; font: inherit; color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tarjeta:hover { border-color: var(--turquesa); box-shadow: var(--sombra-md); transform: translateY(-2px); }
.tarjeta:focus-visible { outline: 2px solid var(--turquesa-400); outline-offset: 2px; }
.tarjeta__icono {
  width: 46px; height: 46px; margin-bottom: .2rem;
  color: var(--turquesa);
}
.tarjeta__n {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  /* --texto-tenue da 3,1:1 sobre la superficie: por debajo del mínimo para
     texto pequeño. --texto-suave da 5,4:1. */
  color: var(--texto-suave);
}
.tarjeta h3 { margin: 0; color: var(--marino); }
.tarjeta p { font-size: .86rem; color: var(--texto-suave); }
.tarjeta--futura { opacity: .5; cursor: default; }
.tarjeta--futura:hover { border-color: var(--borde); box-shadow: var(--sombra); transform: none; }

/* ---------------------------------------------------------------- paneles */
.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.panel--agua {
  background: var(--turquesa-100);
  border-color: color-mix(in srgb, var(--turquesa) 32%, transparent);
  box-shadow: none;
}

.rejilla2 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.rejilla3 { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 940px) { .rejilla2, .rejilla3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ formulario */
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
legend {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave);
  padding: 0 0 6px;
}

.campo { display: flex; flex-direction: column; gap: .22rem; }
.campo > label {
  font-size: .78rem; font-weight: 700; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .04em;
}
.campo__ayuda { font-size: .74rem; color: var(--texto-tenue); }

/* La unidad va al lado del campo, no en la etiqueta: se lee junto a la cifra
   y conserva su caja, que en una unidad es significativa —mGy no es MGY—
   mientras que la etiqueta va en versales. */
.campo__caja { display: flex; align-items: center; gap: .5rem; }
.campo__caja > input, .campo__caja > select { flex: 1 1 auto; min-width: 0; }
.campo__unidad {
  flex: none; font-family: var(--mono); font-size: .82rem;
  color: var(--texto-suave); white-space: nowrap;
}

/* Las flechas del campo numérico estorban al lado de la unidad y, sobre todo,
   cambian el valor al pasar la rueda del ratón: en una hoja de dosis eso es
   un error que no deja rastro. Se quitan aquí y el desenfoque al girar la
   rueda está en pagina.js. */
.campo__caja input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.campo__caja input[type="number"]::-webkit-outer-spin-button,
.campo__caja input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Lo que lleva explicación al pasar el ratón se señala con un subrayado de
   puntos. Sin la señal nadie pasa el ratón, y la ayuda no existe. */
[data-ayuda] { cursor: help; }
th[data-ayuda], .campo[data-ayuda] > label {
  text-decoration: underline dotted var(--borde-fuerte);
  text-underline-offset: 3px;
}

/* ------------------------------------------- símbolos de magnitud
   El `text-transform: none` es imprescindible: las etiquetas van en
   versales y «k_Q» en versales no es el símbolo de nada. */
.mag { text-transform: none; letter-spacing: 0; white-space: nowrap; }
.mag > i { font-family: var(--mat); font-style: italic; font-size: 1.14em; }
.mag > i.mag__rm { font-style: normal; font-size: 1em; }
.mag > sub, .mag > sup {
  font-family: var(--mat); font-style: normal; font-size: .7em;
  letter-spacing: 0;
}
.mag > sub { vertical-align: -.28em; }
.mag > sup { vertical-align: .5em; }

/* Las etiquetas, los legend y las cabeceras van en versales, pero la caja de
   una unidad es significativa: mGy no es MGY. Esta clase la deja intacta
   dondequiera que aparezca dentro de uno de esos textos. */
.unidad { text-transform: none; letter-spacing: 0; }

/* Unidad tras la cifra en las tablas de resultado: espacio fino y color
   apagado, para que no compita con el número. */
td.num .unidad {
  font-family: var(--mono); font-size: .8em; color: var(--texto-suave);
  margin-left: .35em;
}

input, select, textarea {
  font: inherit; font-size: .94rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  padding: .5rem .6rem;
  width: 100%;
}
select { font-family: var(--fuente); padding-right: 1.8rem; cursor: pointer; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--turquesa-400); outline-offset: 1px;
  border-color: var(--turquesa);
}
input[type="checkbox"], input[type="radio"] { width: auto; }

.linea  { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.linea3 { display: grid; gap: 8px; grid-template-columns: 1fr 1fr 1fr; }
.opciones { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; }
.opciones label { display: flex; gap: 5px; align-items: center; }

/* --------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-size: .92rem; font-weight: 700;
  padding: .62rem 1.05rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: var(--marino); color: #fff;
  box-shadow: var(--sombra);
  cursor: pointer; text-decoration: none;
  transition: background .15s, transform .06s, box-shadow .15s;
}
/* En modo oscuro el botón primario lleva fondo claro (--marino se invierte),
   así que su texto tiene que oscurecerse. Sólo el primario: el secundario ya
   usa --marino como color de texto sobre la superficie.
   `:root:not([data-theme="light"])` por sí solo también casa en modo claro
   —cuando no hay atributo—, por eso va dentro de la consulta de medio. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.btn--sec) { color: var(--fondo); }
}
:root[data-theme="dark"] .btn:not(.btn--sec) { color: var(--fondo); }

.btn:active { transform: translateY(1px); }
.btn:hover { background: var(--marino-900); }
.btn--sec {
  background: var(--superficie); color: var(--marino);
  border-color: var(--borde-fuerte); box-shadow: none;
}
.btn--sec:hover { background: var(--turquesa-100); border-color: var(--turquesa); }
.btn--mini { padding: .35rem .7rem; font-size: .8rem; border-radius: var(--r-sm); }

/* -------------------------------------------------------------- etiquetas */
.etiqueta {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent;
}
.etiqueta::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.etiqueta--ok     { background: var(--verde-fondo); color: var(--verde); border-color: var(--verde-borde); }
.etiqueta--aviso  { background: var(--ambar-fondo); color: var(--ambar); border-color: var(--ambar-borde); }
.etiqueta--error  { background: var(--rojo-fondo);  color: var(--rojo);  border-color: var(--rojo-borde); }
.etiqueta--neutra { background: var(--superficie-2); color: var(--texto-suave); border-color: var(--borde); }
.etiqueta--literal { text-transform: none; letter-spacing: .01em; }

/* -------------------------------------------------------------- resultado */
.resultado { display: flex; flex-direction: column; gap: 14px; }

.cifra-grande {
  display: flex; flex-direction: column; gap: .1rem;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--turquesa-100);
  border: 1px solid color-mix(in srgb, var(--turquesa) 28%, transparent);
}
.cifra-grande b {
  font-family: var(--mono); font-size: 1.9rem; font-weight: 700;
  color: var(--marino); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cifra-grande span { font-size: .78rem; color: var(--texto-suave); }

table.datos { border-collapse: collapse; width: 100%; font-size: .86rem; }
table.datos th, table.datos td { text-align: left; padding: .45rem .55rem; border-bottom: 1px solid var(--borde); }
table.datos th {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-suave);
}
table.datos td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.datos tr.total td { border-top: 2px solid var(--marino); border-bottom: 0; font-weight: 700; }
table.datos td .fuente { display: block; font-size: .72rem; color: var(--texto-tenue); }
table.datos tbody tr:hover { background: var(--superficie-2); }

.aviso {
  font-size: .84rem; padding: .6rem .8rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--ambar-borde);
  background: var(--ambar-fondo);
  color: var(--texto);
}
.aviso--error { border-color: var(--rojo-borde); background: var(--rojo-fondo); }
.aviso--ok    { border-color: var(--verde-borde); background: var(--verde-fondo); }

.nota { font-size: .8rem; color: var(--texto-suave); }
.nota code {
  font-family: var(--mono); font-size: .82em;
  background: var(--turquesa-100); padding: 1px 5px;
  border-radius: var(--r-sm); color: var(--marino);
}

/* Las ecuaciones van en la tipografía matemática, no en la monoespaciada:
   una ecuación no es código. Las cifras y los operadores quedan en redonda
   y sólo los símbolos de magnitud, dentro de .mag, salen en cursiva. */
.ecuacion {
  display: block; padding: .8rem 1rem; font-size: .95rem; line-height: 2;
  font-family: var(--mat);
  background: var(--turquesa-100); border-radius: var(--r-sm); color: var(--marino);
}
/* Encabezado de un bloque de notas largas, para que el texto se pueda hojear
   en vez de leerse entero. */
.nota__titulo {
  margin: 1rem 0 .3rem; font-size: .76rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--marino);
}
.nota__titulo:first-of-type { margin-top: .5rem; }

/* Fracción apilada. `inline-grid` mantiene las dos filas centradas y
   `vertical-align: middle` deja la raya a la altura del signo igual. */
.frac {
  display: inline-grid; vertical-align: middle; text-align: center;
  margin: 0 .3em; line-height: 1.35;
}
.frac__n { border-bottom: 1px solid currentColor; padding: 0 .4em .12em; }
.frac__d { padding: .12em .4em 0; }
/* Una fracción dentro de otra se achica, como en la imprenta. */
.frac .frac { font-size: .88em; }

.hueco { display: inline-block; width: 1.7em; }

/* Raíz cuadrada: el signo y, pegado a él, el vínculo que cierra por arriba
   lo que entra en la raíz. */
.radical { display: inline-flex; align-items: flex-start; line-height: 1.15; }
.radical::before { content: "√"; font-size: 1.3em; line-height: .92; margin-right: -.06em; }
.radical__c { border-top: 1px solid currentColor; padding: .08em .28em 0 .16em; }

/* Paréntesis que crece con su contenido: se escala el glifo en vertical y se
   estrecha en horizontal para que no engorde. */
.par { display: inline-flex; align-items: center; }
.par::before, .par::after {
  font-family: var(--mat); font-size: 1.75em; line-height: .62;
  transform: scaleX(.55); display: inline-block;
}
.par::before { content: "("; }
.par::after { content: ")"; }

.ecuacion .ref {
  font-family: var(--fuente); font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-tenue); margin-left: .9em;
}

.ref { font-family: var(--mono); font-size: .7rem; color: var(--texto-tenue); }

details.plegable { border-top: 1px solid var(--borde); padding-top: 10px; }
details.plegable > summary {
  cursor: pointer; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--turquesa);
}
details.plegable > div { padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------- gráficos */
.grafico {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: 12px 14px 8px;
  display: flex; flex-direction: column; gap: .3rem;
  /* El SVG escala con el ancho disponible; sin tope, dentro de un panel ancho
     crece hasta ocupar media pantalla de alto sin ganar nada de legibilidad. */
  max-width: 620px;
}
.grafico__titulo { font-size: .82rem; font-weight: 700; color: var(--marino); }
.grafico__sub { font-size: .72rem; color: var(--texto-tenue); }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico__leyenda {
  display: flex; gap: .9rem; flex-wrap: wrap;
  font-size: .72rem; color: var(--texto-suave); padding-top: .2rem;
}
.grafico__leyenda span { display: inline-flex; align-items: center; gap: .3rem; }
.grafico__llave { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.g-rejilla { stroke: var(--dato-rejilla); stroke-width: 1; }
.g-eje     { stroke: var(--dato-eje); stroke-width: 1; }
.g-curva   { fill: none; stroke: var(--dato-curva); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-ref     { stroke: var(--dato-eje); stroke-width: 1; stroke-dasharray: 3 3; }
.g-punto   { fill: var(--dato-punto); stroke: var(--superficie); stroke-width: 2; }
.g-texto   { fill: var(--texto-tenue); font-size: 10px; font-family: var(--mono); }
.g-etiqueta { fill: var(--dato-punto); font-size: 11px; font-weight: 700; font-family: var(--mono); }
.g-banda   { fill: var(--dato-curva); opacity: .08; }

/* ------------------------------------------------------------------- pie */
.pie {
  border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 32px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .76rem; color: var(--texto-tenue);
}

/* ------------------------------------------- banco de pruebas (verificación) */
.prueba { display: grid; grid-template-columns: 2rem 1fr; gap: 8px; padding: 4px 0; font-size: .86rem; align-items: start; }
.prueba__m { font-weight: 800; }
.ok   .prueba__m { color: var(--verde); }
.fall .prueba__m { color: var(--rojo); }
.fall { background: var(--rojo-fondo); border-radius: var(--r-sm); }
.prueba__d { font-size: .78rem; color: var(--texto-suave); font-family: var(--mono); }
.bloque { border-top: 1px solid var(--borde); padding: 14px 0 6px; }
.bloque h3 { margin-bottom: 2px; color: var(--marino); }

/* ----------------------------------------------------------- impresión -- */
@media print {
  body { background: #fff; }
  .panel, .tarjeta, .grafico { box-shadow: none; }
  .cabecera__acciones, .btn, .modulos { display: none !important; }
  .marco { padding: 0; }
  details.plegable { break-inside: avoid; }
  details.plegable > div { display: block !important; }
  .grafico { break-inside: avoid; }
}