/* Cadena. Riesgo de movimiento fuerte en materias primas.
   El color dice cuánto se aparta de lo normal, no hacia dónde va el precio. */
:root{
  --ground:#0A1316;      /* petroleo profundo, con tono, no negro teñido */
  --ground-rgb:10,19,22;
  --slab:#0F1D21;
  --slab-2:#152730;
  --rule:#1E353B;
  --rule-2:#527A86;      /* borde de control: 3:1 sobre los tres fondos */
  --bone:#EAF2F4;
  --ash:#A8BFC4;
  --dim:#7B99A3;
  --brass:#E8B057;       /* atención: se aparta de lo normal, o el modelo falla */
  --brass-rgb:232,176,87;
  --brass-d:#A5762C;
  --laton-marca:#A5762C;   /* el pip de la marca sobre la ficha de hueso: 4,3:1 */
  --on-brass:#14181A;    /* tinta sobre un fondo de laton */
  --steel:#6ABBE0;       /* el modelo acierta */
  --steel-d:#3B7C9E;
  --mute:#7A9AA3;        /* lo que roza la moneda */
  --linea:#4F7A86;       /* la referencia de la moneda: tiene que verse */
  --nac:#5E8794;         /* el tramo nacional de las barras de exposicion */
  --luz:#F3D9A6;         /* la luz de la cascada: el cabezal y los aros */
  --luz-rgb:243,217,166;
  --mapa-vacio:#16262B;  /* pais sin peso en la cadena, y extremo bajo de la rampa */
  --mapa-es:#557C8A;     /* Espana en el mapa de origen del producto */
  --sombra:rgba(0,0,0,.55);
  --ink:var(--ground);   /* contorno de las marcas de la serie */
  --tz-nodo:#C9D6DA;         /* trazabilidad: el bloque de un pais */
  --tz-nodo-resto:#5C6B70;   /* trazabilidad: el bloque del resto */
  /* un color por insumo, en la familia de la pieza. Se distinguen entre si en deuteranopia */
  --ins-quimica:#EEBA68;
  --ins-elec:#A2CCE4;
  --ins-refino:#F0A070;
  --ins-metales:#E4DECC;
  --ins-agri:#D3E6B0;
  --ins-otros:#D9A8F0;
  --ins-otros-cinta:#7F8F95; /* trazabilidad: la cinta cuyo insumo no se sabe, apagada a proposito */
  --sans:"Helvetica Neue",Helvetica,"Liberation Sans","DejaVu Sans","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"DejaVu Sans Mono","Liberation Mono",monospace;
}
/* El tema claro. Papel calido y tinta con el mismo tinte petroleo: no es el oscuro invertido.
   Las dos listas de abajo son la MISMA lista: la segunda solo existe para que el sistema mande
   si tema.js no llega a correr. Quien toque un valor toca los dos sitios. */
:root[data-theme="light"]{
  --ground:#F7F4ED;
  --ground-rgb:247,244,237;
  --slab:#F0ECE3;
  --slab-2:#E7E2D6;
  --rule:#D6CFC0;
  --rule-2:#857C69;
  --bone:#15201F;
  --ash:#354749;
  --dim:#56686C;
  --brass:#7F520A;
  --brass-rgb:127,82,10;
  --brass-d:#A2721F;
  --laton-marca:#E8B057;   /* el pip de la marca sobre la ficha de tinta: 8,6:1 */
  --on-brass:#F7F4ED;
  --steel:#1C6486;
  --steel-d:#2F7EA3;
  --mute:#54676E;
  --linea:#6F8489;
  --nac:#6A828B;
  --luz:#7A4F00;
  --luz-rgb:122,79,0;
  --mapa-vacio:#E6E1D5;
  --mapa-es:#66808A;
  --sombra:rgba(21,32,31,.18);
  --ink:var(--ground);
  --tz-nodo:#2C3B3F;
  --tz-nodo-resto:#6E8085;
  --ins-quimica:#8C5A08;
  --ins-elec:#1B5F80;
  --ins-refino:#8B3A1E;
  --ins-metales:#5F5B4E;
  --ins-agri:#4E8A3A;
  --ins-otros:#7A3FB0;
  --ins-otros-cinta:#7E8C91;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --ground:#F7F4ED;
    --ground-rgb:247,244,237;
    --slab:#F0ECE3;
    --slab-2:#E7E2D6;
    --rule:#D6CFC0;
    --rule-2:#857C69;
    --bone:#15201F;
    --ash:#354749;
    --dim:#56686C;
    --brass:#7F520A;
    --brass-rgb:127,82,10;
    --brass-d:#A2721F;
    --laton-marca:#E8B057;   /* el pip de la marca sobre la ficha de tinta: 8,6:1 */
    --on-brass:#F7F4ED;
    --steel:#1C6486;
    --steel-d:#2F7EA3;
    --mute:#54676E;
    --linea:#6F8489;
    --nac:#6A828B;
    --luz:#7A4F00;
    --luz-rgb:122,79,0;
    --mapa-vacio:#E6E1D5;
    --mapa-es:#66808A;
    --sombra:rgba(21,32,31,.18);
    --ink:var(--ground);
    --tz-nodo:#2C3B3F;
    --tz-nodo-resto:#6E8085;
    --ins-quimica:#8C5A08;
    --ins-elec:#1B5F80;
    --ins-refino:#8B3A1E;
    --ins-metales:#5F5B4E;
    --ins-agri:#4E8A3A;
    --ins-otros:#7A3FB0;
    --ins-otros-cinta:#7E8C91;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--bone);
  font-family:var(--sans);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;
  display:grid;grid-template-rows:auto auto 1fr auto;height:100vh;overflow:hidden}
/* El minimo automatico de un elemento de rejilla es su CONTENIDO, asi que sin esto la cabecera
   podia empujar el ancho del documento entero: media 1.309 px y no habia forma de que encogiera.
   La regla existia, pero solo por debajo de 1.100 px, que es donde la pantalla ya se apila; entre
   1.101 y 1.308 no la aplicaba nadie y la pagina se desbordaba a lo ancho (medido el 9-sep-2026 a
   1.280 y a 1.152 px, las dos anchuras de portatil mas comunes). Aqui vale para cualquier ancho.
   Quien encoge son las fichas del contexto, que ya recortan su texto con puntos suspensivos. */
body>*{min-width:0}
h1,h2{margin:0;font-weight:600}

.top{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;
  padding:13px 24px 11px;border-bottom:1px solid var(--rule)}
.ident h1{font-size:26px;letter-spacing:-.025em;line-height:1}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/archivo-600.woff2") format("woff2")}
/* La marca: tres fichas, la tuya de pie con el pip de laton. Tinta = texto, pips = fondo. */
.marca{display:flex;align-items:center;gap:10px;margin:0}
.marca-svg{height:34px;width:auto;flex:none}
.marca .m-ficha{fill:var(--bone)}
.marca .m-pip{fill:var(--ground)}
.marca .m-laton{fill:var(--laton-marca)}
.marca-txt{display:flex;flex-direction:column;line-height:1}
.marca-sup{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-bottom:3px}
.marca-nom{font-family:"Archivo",var(--sans);font-weight:600;letter-spacing:-.015em}
.ident .q{margin:3px 0 0;font-size:13.5px;color:var(--ash)}
.meta{display:flex;gap:26px;margin:0}
.meta div{display:flex;flex-direction:column;gap:1px}
.meta dt{font-size:10px;color:var(--dim)}
.meta dd{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--ash);
  font-variant-numeric:tabular-nums}

/* tres zonas arriba, la tira de sucesos abajo a todo lo ancho */
/* container-type:size para que la vista pueda pedir "el alto de main" (100cqh) a una fila del
   grid: con grid-template-rows:100% la vista no crece y la segunda fila se queda en cero. */
main#contenido{min-height:0;position:relative;container-type:size;overflow-y:auto}
.vista{display:none;height:100%;min-height:0}
.vista.on{display:grid}
#v-resumen{grid-template-columns:1fr 392px 296px;grid-template-rows:1fr 232px}
#v-sector{grid-template-columns:330px 1fr 340px}
/* La fila de graficos va a todo lo ancho: en los 300 px de un panel, un grafo con etiquetas no
   se lee. La primera fila mide el alto entero de la vista, igual que cuando no habia grafico:
   los paneles de arriba conservan su altura y el grafico queda debajo, al desplazar. Con
   minmax(...,1fr) los paneles se cortaban a media fila y el mapa quedaba en una franja. */
#v-materia{grid-template-columns:330px 1fr 340px}
#v-mapa{grid-template-columns:1fr 300px}
#v-materia,#v-mapa{height:auto;min-height:100%;grid-template-rows:100cqh auto}

/* La franja de escaparate: solo sin sesion, bajo la cabecera. Con ella el cuerpo tiene una fila
   mas; escondida es `display:none` y la rejilla vuelve sola a sus cuatro. */
.escaparate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;
  padding:6px 24px;background:var(--slab);border-bottom:1px solid var(--rule);
  font-size:11.5px;color:var(--ash);line-height:1.4}
.escaparate p{margin:0}
.escaparate .btn-entrar{min-height:24px;padding:0 10px;font-size:11.5px}
/* El aviso del freno por IP: rompe la fila y se pone en linea propia, porque no acompana a los
   botones, los contradice. En --bone y no en --ash, que es el gris del resto de la franja: es
   lo unico que hay que leer cuando sale (15,19:1 en el tema oscuro y 14,16:1 en el claro). */
.escaparate .freno{flex-basis:100%;color:var(--bone)}
/* el reintento es un boton y no un enlace: recarga, no navega. La tipografia hay que heredarla
   a mano, que a un boton el navegador no se la da; cae debajo del aviso porque .freno ocupa fila */
.escaparate .freno-reintentar{font-family:inherit;cursor:pointer}
/* "Que hace, planes y precio" es un boton de contorno, no el relleno de Entrar: se lee como
   boton y no compite con lo que se pide de verdad. Lleva el fondo de la franja a proposito,
   porque heredar el relleno de --bone con el texto de --ash lo dejaba con pinta de
   deshabilitado. Texto y borde en --bone sobre --slab: 15,19:1 en el tema oscuro y 14,16:1 en
   el claro, contra el 4,5:1 que pide AA para texto y el 3:1 para el borde. */
.btn-entrar.btn-linea{background:transparent;border-color:var(--bone);color:var(--bone)}
.btn-entrar.btn-linea:hover{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
body.sin-sesion{grid-template-rows:auto auto auto 1fr auto}
/* El alta de contratos no se pinta sin cuenta, asi que su apunte tampoco: hablaria de unos
   campos que no estan. El titulo se queda y debajo va la invitacion. */
body.sin-sesion #fa-alta-scope{display:none}

/* El wordmark de Team Banzai en los pies, aqui y en las paginas que pinta el Worker. La
   monoespaciada y el ambar en "ai" son el sistema de logo de la casa; el ambar sale de --brass,
   que ya esta medido en los dos temas. Sin subrayado: es un logotipo, y lo que lo distingue del
   texto de alrededor no es solo el color sino la monoespaciada y el peso. */
.tb{font-family:var(--mono);font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-decoration:none}
.tb span{color:var(--brass)}

/* Las paginas que pinta el Worker (/entrar, /planes, /cuenta, las legales) no tenian color de
   enlace y salian en el azul del navegador. El mismo que el pie de /valor. */
.oauth a{color:var(--ash)}
.oauth a:hover{color:var(--brass)}

/* barra de vistas y contexto compartido */
.tabs{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--rule);
  background:var(--slab)}
.tabs button{background:transparent;border:0;border-right:1px solid var(--rule);
  color:var(--dim);font-family:var(--sans);font-size:12.5px;padding:8px 16px;cursor:pointer;
  display:flex;align-items:center;gap:7px}
.tabs button b{font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--dim);
  border:1px solid var(--rule-2);padding:0 4px;line-height:1.4}
.tabs button:hover{color:var(--ash)}
.tabs button.on{color:var(--bone);background:var(--ground);box-shadow:inset 0 -2px 0 var(--brass)}
.tabs button.on b{color:var(--brass);border-color:var(--brass-d)}
/* `min-width:0` es lo que deja que esta barra ENCOJA. Sin el, el minimo de un elemento flexible es
   su contenido, asi que la cabecera pedia 1.309 px pasara lo que pasara y la PAGINA ENTERA se
   desbordaba a lo ancho entre 1.101 y 1.308 px de ventana (medido el 9-sep-2026: a 1280 y a 1152
   el documento salia de 1309 px). Por debajo de 1.100 no se veia porque la pantalla ya se apila, y
   por encima de 1.366 tampoco porque cabe: el defecto vivia justo en medio, y 1.280 es la anchura
   de portatil mas comun. Quien encoge es la ficha del contexto, que ya recorta su texto con puntos
   suspensivos; la fila de atajos se queda entera. */
.ctx{margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 18px;font-size:11.5px;
  color:var(--dim);min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule-2);
  background:var(--slab-2);color:var(--ash);padding:2px 4px 2px 8px;border-radius:2px;
  font-size:11.5px;min-width:0;flex:0 1 auto}
.chip u{color:var(--dim);text-decoration:none;font-size:10px;flex:0 0 auto;white-space:nowrap}
/* el nombre se recorta antes que empujar a la ficha de al lado; entero, al pasar el cursor */
.chip .chip-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip button{border:0;background:transparent;color:var(--dim);cursor:pointer;padding:0 3px;
  font-size:13px;line-height:1}
.chip button:hover{color:var(--brass)}
/* dentro de la barra de contexto, esconder algo tiene que ganar a su display:inline-flex */
.ctx [hidden]{display:none}
/* La barra de pestanas tiene alto fijo, asi que aqui las fichas ENCOGEN y recortan su texto;
   envolver dejaria la segunda fila cortada por debajo. Solo envuelven al apilar la pantalla. */
.ctx-chips{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;overflow:hidden}
/* La fila de atajos no encoge: quien cede sitio son las fichas, que para eso recortan su texto. */
.ctx-kbd{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}

/* Selector de dimension. La caja pone el borde, el rotulo y el galon; el <select> va sin
   apariencia propia y solo pone el texto, que se recorta con puntos suspensivos. Asi el nombre
   largo no se monta debajo de la flecha del control nativo, que es lo que pasaba en aleman. */
.selcaja{display:inline-flex;align-items:center;gap:6px;min-width:0;
  max-width:min(28ch,100%);border:1px solid var(--rule-2);background:var(--slab-2);
  border-radius:2px;padding:0 7px 0 8px;min-height:24px;flex:0 1 auto}
.selcaja:hover{border-color:var(--brass-d)}
.selcaja u.sel-rot{color:var(--dim);text-decoration:none;font-size:10px;flex:0 0 auto;white-space:nowrap}
/* el galon: dos lados de un cuadrado girado, sin imagen ni fuente de iconos */
.selcaja::after{content:"";flex:0 0 auto;width:6px;height:6px;margin-left:1px;
  border-right:1.4px solid var(--dim);border-bottom:1.4px solid var(--dim);
  transform:translateY(-2px) rotate(45deg)}
.selcaja:hover::after{border-color:var(--brass)}
.selfil{appearance:none;background:transparent;border:0;border-radius:0;color:var(--bone);
  font-family:var(--sans);font-size:10.5px;padding:3px 0;cursor:pointer;
  flex:1 1 auto;min-width:0;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* el anillo va en el propio <select>, que es lo que recibe el foco: en la caja no lo verian ni
   el usuario de teclado ni la comprobacion, que mira el elemento activo y no a su padre */
.selfil:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.selfil option{background:var(--slab-2);color:var(--bone)}
/* la ficha ya pone su borde y su rotulo: dentro de ella la caja solo aporta el galon */
.chip .selcaja{border:0;background:transparent;padding:0;min-height:0;max-width:min(24ch,100%)}
.chip .selcaja u.sel-rot{display:none}
.chip .selfil{font-size:11.5px;padding:0}

.vista>.pane{min-height:0;overflow:hidden;display:flex;flex-direction:column;
  padding:12px 18px 8px;border-right:1px solid var(--rule)}
.vista>.pane:last-child{border-right:0}
.pane-lista .ramas{max-height:none;flex:1}
.pane h3{margin:0 0 3px;font-size:15px;font-weight:600;color:var(--bone);letter-spacing:-.015em}
.pane .sub2{margin:0 0 9px;font-size:11px;color:var(--dim);line-height:1.4}
.pane .sub2 b{color:var(--brass);font-weight:600}

/* mapa */
.pane-mapa{position:relative}
/* capa de movimiento: va encima del mapa y no captura el raton; el mapa de debajo se pinta una vez */
#mapa-fx{position:absolute;pointer-events:none;left:0;top:0;width:0;height:0}
/* la onda al llegar a Espana ilumina el sector afectado: un cambio de fondo y color, no de tamano */
.onda-hit{transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
  background:rgba(var(--brass-rgb),.22)!important;box-shadow:inset 2px 0 0 var(--brass)}
.onda-fin{transition:background-color .55s ease,color .55s ease,box-shadow .55s ease}
#mapa{display:block;width:100%;height:auto;aspect-ratio:350/139;flex:none;max-height:64vh}
.mleyenda .bur{width:9px;height:9px;border-radius:50%;border:1px solid var(--brass);
  background:rgba(var(--brass-rgb),.2);display:inline-block}
.conmut{display:flex;gap:0}
.conmut{flex:0 0 auto}
.conmut button{border:1px solid var(--rule-2);border-right:0;background:transparent;
  font-family:var(--sans);font-size:10.5px;padding:3px 9px;cursor:pointer;color:var(--dim);min-height:24px}
.conmut button:last-child{border-right:1px solid var(--rule-2)}
.conmut button.on{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.mleyenda{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);
  padding:5px 0 1px}
/* leyenda fija: color de cada insumo en la cascada */
.mleyins{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:10px;color:var(--ash);padding:2px 0 0;min-height:14px}
.mleyins span{display:inline-flex;align-items:center;gap:5px}
.mleyins i{width:14px;height:2px;display:inline-block;background:var(--ci)}
#mapa-scope{cursor:help}
.mleyenda .esc{display:flex;height:9px;width:150px}
.mleyenda .esc i{flex:1;display:block;background:var(--c)}
.mpais{display:grid;grid-template-columns:1fr 52px 62px;gap:0 8px;align-items:center;
  padding:3.5px 4px;border-bottom:1px solid var(--rule);font-size:11.5px;cursor:pointer}
.mpais:hover{background:var(--slab)}
.mpais.on{background:var(--slab-2)}
.mpais .pn{color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpais .pv{font-family:var(--mono);text-align:right;color:var(--brass);
  font-variant-numeric:tabular-nums;font-size:11.5px}
.mpais .pb{height:8px;background:var(--slab-2);position:relative;display:block}
.mpais .pb i{position:absolute;inset:0 auto 0 0;width:var(--w,0);background:var(--brass-d);display:block}

.lista2{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}
.lista2 li{display:grid;grid-template-columns:1fr auto;gap:0 8px;padding:3.5px 4px;
  border-bottom:1px solid var(--rule);font-size:11.5px;color:var(--ash)}
.lista2 li:last-child{border-bottom:0}
.lista2 .n{font-family:var(--mono);color:var(--dim);font-variant-numeric:tabular-nums;
  font-size:11px}
.lista2 .via{grid-column:1/3;font-size:10px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kbd{font-family:var(--mono);font-size:9.5px;color:var(--dim);border:1px solid var(--rule-2);
  padding:0 3px;border-radius:2px}
.fia{grid-column:1;grid-row:1}
.expo{grid-column:2;grid-row:1}
.hoy{grid-column:3;grid-row:1}
.ev{grid-column:1/3;grid-row:2}
.prensa{grid-column:3;grid-row:2;border-right:0;border-top:1px solid var(--rule)}
#v-resumen>section{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:12px 18px 8px;
  border-right:1px solid var(--rule)}

.ev{border-top:1px solid var(--rule);border-right:0;padding-bottom:6px}
/* envuelve por defecto, no solo en pantalla estrecha: con un selector delante, los grupos de
   botones se comprimian hasta apilarse uno sobre otro y perdian el objetivo de toque de 24 px */
.secbar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;row-gap:6px}
/* flex:none dejaba al titulo con su ancho de max-content: en aleman y en ingles se salia del
   panel, que recorta. Con 1 1 auto y min-width:0 parte linea dentro de su columna. */
.secbar h2{font-size:15px;letter-spacing:-.015em;flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.scope{margin:2px 0 7px;font-size:10.5px;color:var(--dim);line-height:1.4;max-width:96ch}
.ev .scope{margin:0;text-align:right}

.cols{display:grid;align-items:end;gap:0 9px;padding:0 5px 5px;
  border-bottom:1px solid var(--rule-2);font-size:10px;color:var(--dim);line-height:1.25}
.cols .r{text-align:right}
.cols .c{text-align:center}
.rows{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}
.row{display:grid;align-items:center;gap:0 9px;padding:0 5px;border-bottom:1px solid var(--rule)}
.row:hover{background:var(--slab)}
.v{font-family:var(--mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--ash)}
.dimv{color:var(--dim)}
.mat{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* fiabilidad por tramo: hero */
.fcols,.frow{grid-template-columns:106px 1fr 44px 44px 44px 36px}
.frow{height:26px}
.blocks{display:flex;gap:8px;align-items:stretch;height:26px;position:relative}
.blocks::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--linea);pointer-events:none}
.bl{flex:1;display:block;position:relative;min-width:16px}
.bl b{position:absolute;left:0;right:0;display:block;height:var(--h,0)}
.bl b.up{bottom:50%}
.bl b.dn{top:50%}
.bl u{position:absolute;left:-1px;right:-1px;height:2px;display:block;
  background:var(--ash);opacity:.55}
.bl u.up{bottom:calc(50% + var(--y,0))}
.bl u.dn{top:calc(50% + var(--y,0))}
.bl.g b{background:var(--steel)}
.bl.r b{background:var(--steel-d)}
.bl.c b{background:var(--mute)}
.bl.m b{background:var(--brass)}
.moneda{position:absolute;left:0;right:0;height:1px;background:var(--rule-2);pointer-events:none}
.frow .est{font-size:11.5px}
.frow.est-si .mat{color:var(--bone);font-weight:600}
.frow.inest .mat{color:var(--ash)}
.fi{display:block;width:9px;height:9px;border-radius:50%;margin:0 auto;border:1px solid}
.fi.ok{background:var(--steel);border-color:var(--steel)}
.fi.mal{background:transparent;border-color:var(--rule-2)}
.leyenda{display:flex;gap:13px;font-size:10px;color:var(--dim);align-items:center}
.leyenda span{display:flex;gap:5px;align-items:center}
.leyenda i{width:9px;height:9px;display:block}
.leyenda i.c-alto{background:var(--steel)}
.leyenda i.c-medio{background:var(--steel-d)}
.leyenda i.c-roza{background:var(--mute)}
.leyenda i.c-bajo{background:var(--brass)}
.leyenda i.c-arbol{background:var(--ash);height:2px}

/* hoy */
.sub{margin:10px 0 5px;font-size:10.5px;font-weight:400;color:var(--dim)}
.estado{border-left:2px solid var(--brass);background:var(--slab);padding:7px 10px}
.estado p{margin:0;font-size:12px;color:var(--bone);line-height:1.4}
.estado p+p{margin-top:5px;font-size:10.5px;color:var(--dim)}
.vacio{border-left:2px solid var(--rule-2);padding:5px 9px;background:var(--slab);
  display:flex;align-items:baseline;gap:8px}
.vacio .n{font-family:var(--mono);font-size:16px;color:var(--ash);line-height:1}
.vacio p{margin:0;font-size:10.5px;color:var(--dim);line-height:1.35}
/* El bloque que sustituye a una cifra que solo se ve con cuenta: sin numero y con la salida. */
.vacio.invita{flex-wrap:wrap;align-items:center;gap:6px 10px}
.vacio.invita .btn-entrar{min-height:24px;padding:0 9px;font-size:11px}
.huecos{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0;font-size:11px}
.huecos li{display:flex;justify-content:space-between;gap:8px;padding:2.5px 0;
  border-bottom:1px solid var(--rule);color:var(--ash)}
.huecos li:last-child{border-bottom:0}
.huecos li.det{border-bottom:0;padding:0 0 5px}
.huecos li.det .por{max-width:none;white-space:normal;color:var(--dim);font-family:var(--sans);font-size:10px}
.huecos .por{color:var(--dim);font-family:var(--mono);font-size:10px;
  text-align:right;line-height:1.35}

/* prensa */
.now{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}
.now li{display:grid;grid-template-columns:1fr auto;gap:0 8px;padding:4.5px 0;
  border-bottom:1px solid var(--rule)}
.now li:last-child{border-bottom:0}
.now .mt{font-size:12px}
.now .ct{font-family:var(--mono);font-size:11.5px;color:var(--ash);text-align:right;
  font-variant-numeric:tabular-nums}
.nowhead{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);
  padding-bottom:4px;border-bottom:1px solid var(--rule-2);margin-bottom:2px}
.now .cf{font-style:normal;color:var(--brass)}
.now .pz{grid-column:1/3;font-size:10px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* tira de sucesos, dos columnas */
.ecols,.erow{grid-template-columns:196px 92px 1fr 58px 58px 62px 44px}
.erow{height:25px}
.ev-n{min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.12}
.ev-n .nm{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-n .dt{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.sp{min-width:0}
svg.spark{display:block;width:100%;height:23px}
svg.spark .zero,svg.spark .evt{stroke:var(--rule-2);stroke-width:1;vector-effect:non-scaling-stroke}
svg.spark .evt{stroke-dasharray:2 2}
svg.spark path.p{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
svg.spark path.hot{stroke:var(--brass)}
svg.spark path.cool{stroke:var(--steel)}
svg.spark path.lo{stroke:var(--mute)}
.erow .v{font-size:11.5px}
.erow.q-hi .nm{color:var(--bone);font-weight:600}
.erow.q-hi .hot{color:var(--brass)}
.erow.q-hi .cool{color:var(--steel)}
.erow.q-md .nm{color:var(--ash)}
.erow.q-lo .nm,.erow.q-lo .mat,.erow.q-lo .v{color:var(--mute)}

.foot{margin:6px 0 0;font-size:11px;color:var(--dim);line-height:1.35}
.pie{padding:8px 24px 14px}
.pie p{margin:0;font-size:10px;color:var(--dim);line-height:1.6}
.pie a{color:var(--dim)}
.bot{padding:6px 24px 9px;border-top:1px solid var(--rule)}
.bot p{margin:0;font-size:10px;color:var(--dim);line-height:1.5;font-family:var(--sans)}
.bot .privacidad{margin-top:3px}
.bot .privacidad a{color:var(--ash)}

.tip{position:fixed;z-index:40;background:var(--slab-2);border:1px solid var(--rule-2);
  padding:9px 11px;max-width:340px;font-size:11px;color:var(--ash);pointer-events:none;
  line-height:1.55;box-shadow:0 12px 30px var(--sombra)}
.tip b{color:var(--bone);display:block;margin-bottom:4px;font-size:12px}
.tip span{font-family:var(--mono);color:var(--bone);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:no-preference){
  svg.spark path.p{stroke-dasharray:1000;stroke-dashoffset:1000;
    animation:draw .8s cubic-bezier(.3,.7,.4,1) forwards;animation-delay:var(--d,0ms)}
}
@keyframes draw{to{stroke-dashoffset:0}}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:var(--dim)}

/* exposicion: la cadena rama -> insumo -> materia */
.ramas{flex:0 0 auto;max-height:150px}
.rama{display:grid;grid-template-columns:minmax(150px,1fr) 44px 40px 58px;align-items:center;gap:0 7px;
  padding:0 5px;height:25px;border-bottom:1px solid var(--rule);cursor:pointer}
.rama:hover{background:var(--slab)}
.rama.on{background:var(--slab-2)}
.rama.on .rn{color:var(--bone);font-weight:600}
.rn{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ash)}
.rv{font-family:var(--mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--brass)}
.ri{font-family:var(--mono);font-size:10.5px;text-align:right;color:var(--dim);
  font-variant-numeric:tabular-nums}
.rb{height:8px;background:var(--slab-2);display:block;position:relative}
.rb i{position:absolute;top:0;bottom:0;display:block}
.rb .imp{left:0;width:var(--w,0);background:var(--brass-d)}
.rb .nac{left:var(--x,0);width:var(--w,0);background:var(--nac);box-shadow:-1px 0 0 var(--ground)}
.rama.on .rb .imp{background:var(--brass)}
.rama.on .ri{color:var(--ash)}

.cadena{margin-top:11px;border-top:1px solid var(--rule-2);padding-top:9px;
  flex:1;min-height:0;display:flex;flex-direction:column}
.cadena h3{margin:0 0 2px;font-size:13px;font-weight:600;color:var(--bone)}
.cadena .cl{margin:0 0 7px;font-size:10.5px;color:var(--dim);line-height:1.35}
.cadena .cl b{color:var(--brass);font-weight:600}
.chead{display:grid;grid-template-columns:1fr 11px 80px 40px 40px 50px;gap:0 6px;flex:none;
  font-size:10px;color:var(--dim);padding:0 4px 4px;border-bottom:1px solid var(--rule)}
.chead .r{text-align:right}
.clist{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}
.clist li{display:grid;grid-template-columns:1fr 11px 80px 40px 40px 50px;gap:0 6px;
  align-items:center;padding:3px 4px;border-bottom:1px solid var(--rule);font-size:11.5px}
.clist li:last-child{border-bottom:0}
.clist .ins{color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clist .ins em{font-style:normal;color:var(--dim);font-size:10.5px}
.clist .paises{grid-column:1/7;font-size:10px;color:var(--dim);padding-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clist .fl{color:var(--dim);text-align:center}
.clist .ser{color:var(--bone)}
.clist .n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;
  color:var(--dim);font-size:11px}
.clist .pp{color:var(--brass)}

/* hoy: probabilidad frente a su base */
.ph{display:grid;grid-template-columns:1fr 42px 42px 52px;gap:0 7px;font-size:10px;
  color:var(--dim);padding:0 4px 4px;border-bottom:1px solid var(--rule-2)}
.ph .r{text-align:right}
.plist{list-style:none;margin:0;padding:0;max-height:190px;overflow-y:auto}
.plist li{display:grid;grid-template-columns:1fr 42px 42px 52px;gap:0 7px;align-items:center;
  padding:1px 4px;border-bottom:1px solid var(--rule);font-size:11px;height:19px}
.plist li:last-child{border-bottom:0}
.plist .nm{color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plist .p,.plist .b{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.plist .p{color:var(--bone)}
.plist .b{color:var(--dim)}
.plist .g{height:7px;background:var(--slab-2);position:relative;display:block}
.plist .g i{position:absolute;inset:0 auto 0 0;width:var(--w,0);background:var(--mute);display:block}
.plist .g u{position:absolute;top:-2px;bottom:-2px;left:var(--x,0);width:1px;background:var(--ash);display:block}
.plist li.alza .p{color:var(--brass)}
.plist li.alza .g i{background:var(--brass)}
.plist li.fuera .nm,.plist li.fuera .p,.plist li.fuera .b{color:var(--mute)}

/* serie descalificada */
.frow.fuera .mat,.frow.fuera .v{color:var(--mute)}
.frow.fuera .mat{text-decoration:line-through;text-decoration-color:var(--rule-2)}
.tagf{font-family:var(--mono);font-size:8.5px;color:var(--brass);border:1px solid var(--brass-d);
  padding:0 3px;margin-left:5px;vertical-align:1px;text-decoration:none;display:inline-block}

.rhead{display:grid;grid-template-columns:1fr 44px 40px 58px;gap:0 7px;padding:0 5px 4px;
  border-bottom:1px solid var(--rule-2);font-size:10px;color:var(--dim)}
.rhead .r{text-align:right}
.tblm{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px;
  font-variant-numeric:tabular-nums}
.tblm td{padding:4px 0;border-bottom:1px solid var(--rule);color:var(--ash);text-align:right}
.tblm td:first-child{text-align:left;font-family:var(--sans);font-size:12px;color:var(--bone)}
.tblm tr:last-child td{border-bottom:0}
.pane-lista .rama{grid-template-columns:1fr 44px 40px 58px}

.sucesos{flex:none;border-top:1px solid var(--rule-2);padding-top:8px;margin-top:4px;
  max-height:186px;overflow-y:auto}
.sucesos h4{margin:0 0 6px;font-size:11px;font-weight:400;color:var(--dim)}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px}
.sfila{display:grid;grid-template-columns:1fr 42px 68px;gap:0 6px;align-items:center;white-space:nowrap;
  padding:3px 0;border-bottom:1px solid var(--rule);font-size:11.5px;cursor:pointer}
.sfila:hover{background:var(--slab)}
.sfila .sn{color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfila .sw{font-family:var(--mono);font-size:10.5px;color:var(--dim);text-align:right}
.sfila .se{font-family:var(--mono);font-size:11px;color:var(--brass);text-align:right;white-space:nowrap}
.sfila.sinc .se{color:var(--mute)}
.aviso{border-left:2px solid var(--brass);background:var(--slab);padding:7px 10px;margin:0 0 9px}
.aviso p{margin:0;font-size:11px;color:var(--ash);line-height:1.4}
.val{font-family:var(--mono);font-size:11px;padding:0 3px;margin-left:5px;border:1px solid;
  vertical-align:1px;display:inline-block}
.val.ok{color:var(--steel);border-color:var(--steel-d)}
.val.debil{color:var(--dim);border-color:var(--steel-d)}
.val.no{color:var(--brass);border-color:var(--brass-d)}

.selloleyenda{margin:0 0 8px;font-size:10.5px;color:var(--dim);line-height:1.5}
.selloleyenda .val{margin:0 2px}
.saltar{background:transparent;border:0;padding:0;font:inherit;color:var(--steel);cursor:pointer;
  border-bottom:1px dotted var(--steel-d);text-decoration:none;
  /* 2.5.8: el objetivo mide 24 px de alto aunque el texto sea de 10 */
  min-height:24px;display:inline-flex;align-items:center}
.saltar:hover{color:var(--bone);border-bottom-color:var(--bone)}
.clist .ser.saltar{text-align:left}
.rastro{display:inline-flex;align-items:center;gap:5px;margin-right:10px}
.rastro button{background:transparent;border:0;color:var(--dim);cursor:pointer;font:inherit;
  font-size:11px;padding:2px 5px;border:1px solid var(--rule-2);border-radius:2px}
.rastro button:hover{color:var(--brass);border-color:var(--brass-d)}
.rastro i{color:var(--rule-2);font-style:normal}
.raros{list-style:none;margin:0;padding:0}
.raros li{display:grid;grid-template-columns:110px 1fr 46px 118px;gap:0 8px;align-items:center;
  padding:2.5px 4px;border-bottom:1px solid var(--rule);font-size:11px;color:var(--mute)}
.raros li.sig{color:var(--ash)}
.raros li.on{background:var(--slab-2)}
.raros li.on .rn{color:var(--bone);font-weight:600}
.raros .rn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raros .rb2{height:8px;background:var(--slab-2);display:block;position:relative}
.raros .rb2 i{position:absolute;inset:0 auto 0 0;width:var(--w,0);background:var(--mute);display:block}
.raros li.sig .rb2 i{background:var(--brass)}
.raros .rv2{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.raros li.sig .rv2{color:var(--brass)}
.raros .rp{font-family:var(--mono);font-size:10px;color:var(--dim);text-align:right}
.linea{list-style:none;margin:0;padding:0;max-height:210px;overflow-y:auto}
.linea li,.chead2{display:grid;grid-template-columns:62px 1fr 48px 48px 92px;gap:0 8px;align-items:center}
.linea li{padding:3px 4px;border-bottom:1px solid var(--rule);font-size:11px}
.linea li.mayor{background:var(--slab-2);box-shadow:inset 2px 0 0 var(--brass)}
.linea li.mayor .lf{color:var(--brass);font-weight:600}
.linea .lf{font-family:var(--mono);color:var(--ash);font-variant-numeric:tabular-nums}
.linea .lt{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linea .lr{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.linea .lr.up{color:var(--brass)} .linea .lr.dn{color:var(--steel)}
.linea .lz{font-size:10px;text-align:right}
.chead2{font-size:10px;color:var(--dim);padding:0 4px 3px;border-bottom:1px solid var(--rule-2)}
.chead2 .r{text-align:right}
.impacto{border:1px solid var(--rule-2);padding:9px 12px;margin:0 0 9px;background:var(--slab)}
.impacto .ib{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.impacto .in{font-family:var(--mono);font-size:24px;color:var(--brass);letter-spacing:-.02em;line-height:1}
.impacto .iu{font-size:12px;color:var(--bone)}
.impacto .scope{margin:0}
.titulares a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}

/* la cadena del mapa, con palabras: por insumo, con su color, y sus paises */
.sgrid2{grid-template-columns:repeat(2,1fr)}
.sgrid2 .sfila{grid-template-columns:110px 1fr auto}
.sfila .sv{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfila .sv b{font-weight:600}
.cgrupo{padding:6px 0 5px;border-bottom:1px solid var(--rule)}
.cins{font-size:11px;color:var(--ash);line-height:1.4;overflow-wrap:anywhere}
.cins i{display:inline-block;width:12px;height:2px;background:var(--ci);vertical-align:middle;margin-right:6px}
.cins b{color:var(--ci);font-weight:600}
.cpaises{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0 18px}
.cpais{border:1px solid var(--rule-2);background:transparent;color:var(--ash);font-family:var(--sans);
  font-size:10.5px;padding:1px 6px;cursor:pointer;border-radius:2px;
  min-height:24px;display:inline-flex;align-items:center}
.cpais span{font-family:var(--mono);color:var(--dim);margin-left:3px}
.cpais:hover,.cpais.on{border-color:var(--ci);color:var(--bone)}
.cpais.on span{color:var(--ci)}

/* terminos con definicion: marca discreta, y el tooltip que se abre con clic o con foco */
.def{all:unset;cursor:help;text-decoration:underline dotted;text-decoration-color:var(--dim);text-underline-offset:2px;color:inherit;font:inherit}
.def:hover{text-decoration-color:var(--brass)}
.def:focus-visible{text-decoration-color:var(--brass);outline:2px solid var(--brass);outline-offset:2px}
.deftip{position:fixed;z-index:60;max-width:340px;background:var(--slab-2);border:1px solid var(--steel-d);
  padding:9px 11px;font-size:11.5px;line-height:1.5;color:var(--ash);box-shadow:0 12px 30px var(--sombra)}
.deftip b{display:block;color:var(--bone);margin-bottom:3px;font-size:12px}
#glosario{position:fixed;inset:0;z-index:70;background:rgba(var(--ground-rgb),.82);display:grid;place-items:center;padding:24px}
#glosario[hidden]{display:none}
#glosario .gbox{background:var(--ground);border:1px solid var(--rule-2);max-width:820px;width:100%;max-height:90vh;overflow:auto;padding:16px 20px}
#glosario dl{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;margin:10px 0 0;font-size:12px}
#glosario dt{color:var(--bone);font-weight:600}
#glosario dd{margin:0;color:var(--ash);line-height:1.45}
.gcerrar{border:1px solid var(--rule-2);background:transparent;color:var(--ash);cursor:pointer;font-size:14px;padding:0 8px}
/* el contexto de arranque se declara como ejemplo hasta que el usuario toque algo */
.chip.ej{border-style:dashed}
.chip.ej u{color:var(--brass)}
/* por debajo de un portatil, apilar y dejar desplazar: que no se pierda contenido.
   1.4.10: nada de desplazamiento lateral. Las filas del grid del cuerpo llevan min-width:0
   para que puedan encogerse por debajo de su contenido, y las tiras de controles envuelven. */
@media (max-width:1100px){
  body{height:auto;overflow:auto}
  body>*{min-width:0}
  /* main es contenedor de tamano para que una vista pueda pedir 100cqh. Al apilar, esa
     contencion le deja altura cero y el contenido se pierde entero: aqui se suelta. */
  main#contenido{display:block;min-width:0;container-type:normal;height:auto;overflow:visible}
  .vista{height:auto;min-height:0}
  .vista.on{display:block}
  #v-materia,#v-mapa{grid-template-rows:none}
  .vista>.pane{overflow:visible;border-right:0;border-bottom:1px solid var(--rule);min-width:0}
  .top{flex-wrap:wrap;gap:12px 20px}
  .escaparate{padding:6px 12px}
  .meta{flex-wrap:wrap;gap:8px 20px}
  .ctrl-cab{flex-wrap:wrap}
  #atajos{white-space:normal}
  .tabs{flex-wrap:wrap}
  .ctx{margin-left:0;flex-wrap:wrap;padding:4px 12px;min-width:0}
  /* al apilar, la barra ya no tiene alto fijo: aqui las fichas si pueden envolver */
  .ctx-chips{flex-wrap:wrap;row-gap:6px}
  .chip{max-width:100%;min-width:0}
  .secbar{flex-wrap:wrap;row-gap:4px}
  .secbar h2{flex:1 1 auto;min-width:0}
  .conmut,.tz-ctl,.gconmut{flex-wrap:wrap;margin-left:0}
  .conmut button,.tz-ctl button{white-space:normal}
  .rhead,.cols,.rama,.row,.chead,.chead2,.linea li{min-width:0}
  .buscador,.pane-lista,.traza-main{min-width:0}
  #pr-q{max-width:100%}
  /* las tablas anchas y el diagrama se desplazan dentro de su caja, no del documento */
  .serie-wrap,.pr-cadena-wrap,.tabla-envuelta{overflow-x:auto}
  .rhead,.cols{overflow-x:auto}
}

/* ---------- vista trazabilidad ---------- */
#v-traza{grid-template-columns:1fr 300px}
.traza-main{padding:14px 18px 10px}
.tz-ctl{flex:0 0 auto}
.tz-ctl button{border:1px solid var(--rule-2);background:transparent;color:var(--ash);font:inherit;font-size:10.5px;padding:3px 9px;cursor:pointer;min-height:24px}
.tz-ctl button+button{border-left:0}
.tz-ctl button.on{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.tz-ctl button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.tz-lectura{margin:0 0 8px;font-size:13px;line-height:1.45;color:var(--bone);max-width:96ch}
.tz-lectura b{font-weight:600}
#tz-svg{display:block;width:100%;flex:1;min-height:0}
#tz-svg text{font-family:var(--sans);fill:var(--ash)}
#tz-svg .col-t{font-size:10.5px;fill:var(--dim)}
#tz-svg .nodo{cursor:pointer}
#tz-svg .nodo:focus{outline:none}
#tz-svg .nodo:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#tz-svg .nodo:focus-visible rect{stroke:var(--bone);stroke-width:1.5}
#tz-svg .nodo text{font-size:11px;fill:var(--bone);pointer-events:none}
#tz-svg .nodo .v{font-size:10px;fill:var(--dim);font-family:var(--mono)}
#tz-svg .cinta{transition:opacity .18s}
#tz-svg.foco .cinta:not(.luz){opacity:.09}
#tz-svg.foco .nodo:not(.luz) rect{opacity:.3}
#tz-svg.foco .nodo:not(.luz) text{opacity:.35}
#tz-svg .tu rect{fill:var(--slab-2);stroke:var(--brass);stroke-width:1.2}
#tz-svg .tu text{font-size:12px;font-weight:600}
.tz-leyenda{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:10.5px;color:var(--ash);margin:6px 0 2px}
/* el trazo de los chips de la pantalla, con las variables del tema: un boton sin estilar sale
   con el gris y el negro del navegador, iguales en los dos temas */
.tz-leyenda button{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;line-height:1.4;
  border:1px solid var(--rule-2);background:var(--slab-2);color:var(--ash);
  padding:2px 8px;border-radius:2px;min-height:24px}
.tz-leyenda button:hover{color:var(--bone);border-color:var(--brass-d)}
.tz-leyenda button.on{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.tz-leyenda button.on i{box-shadow:0 0 0 1px var(--on-brass)}
.tz-leyenda button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.tz-leyenda i{width:14px;height:3px;display:inline-block;background:var(--ci)}
.tz-ambito{margin:4px 0 0;font-size:10px;color:var(--dim);line-height:1.4;max-width:110ch}
.traza-side{padding:14px 16px;overflow-y:auto}
.traza-side h2{font-size:15px;margin:0 0 8px}
.tz-dato{font-size:12.5px;line-height:1.45;color:var(--bone);margin:0 0 10px}
.tz-dato b{color:var(--brass)}
.tz-lista{list-style:none;margin:0;padding:0;font-size:11.5px}
.tz-lista li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dotted var(--rule)}
.tz-lista li i{width:8px;height:8px;display:inline-block;margin-right:6px;vertical-align:middle;background:var(--ci)}
.tz-lista .n{color:var(--ash)}
.tz-lista .v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--bone)}
.tz-lista-t{font-size:10.5px;color:var(--dim);margin:10px 0 3px;font-weight:400}
#tz-svg .nodo text.et{paint-order:stroke;stroke:var(--ground);stroke-width:3px;stroke-linejoin:round}

/* vista materia: dos columnas en la ficha, para que la serie de precios tenga sitio */
#m-ficha{overflow:hidden}
.mcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 22px;align-items:stretch;height:100%;min-height:0}
.mcol-a,.mcol-b{min-width:0;min-height:0;display:flex;flex-direction:column}
.mcol-b .linea{flex:1;min-height:120px}
.mcol-b .secbar:first-child{margin-top:0 !important}
.mcol-b .linea{max-height:none}
.serie-wrap{position:relative}
.serie{display:block;width:100%;height:clamp(150px,26vh,240px);background:var(--slab);border:1px solid var(--rule)}
.serie .p{fill:none;stroke:var(--bone);stroke-width:1.1;vector-effect:non-scaling-stroke}
.serie .gx{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.serie .ax,.serie .ay{font-family:var(--mono);font-size:9px;fill:var(--dim)}
.serie .ay{text-anchor:end}
.serie .mk line{stroke:var(--brass);stroke-opacity:.28;stroke-width:1;vector-effect:non-scaling-stroke}
.serie .mk circle{fill:var(--brass);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;cursor:help}
.serie .mk:hover circle,.serie .mk:focus circle{fill:var(--bone)}
.serie .mk:focus{outline:none}
.serie .mk:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.serie .mk:hover line,.serie .mk:focus line{stroke-opacity:.9}
.serie-tip{position:absolute;max-width:320px;background:var(--slab-2);border:1px solid var(--rule-2);
  color:var(--ash);font-size:10.5px;padding:5px 8px;pointer-events:none;z-index:5;line-height:1.35}

/* ---------- vista producto: buscador, origen en el mapa, quien lo consume, precio ---------- */
#v-producto{grid-template-columns:330px 1fr 340px}
.buscador{display:block;margin:0 0 8px}
.buscador .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#pr-q{width:100%;background:var(--slab);border:1px solid var(--rule-2);color:var(--bone);
  font-family:var(--sans);font-size:12.5px;padding:6px 9px;border-radius:2px}
#pr-q:focus{border-color:var(--brass-d);box-shadow:0 0 0 2px rgba(var(--brass-rgb),.18)}
#pr-q::placeholder{color:var(--dim)}
.pr-fam{font-size:10px;color:var(--dim);padding:8px 5px 2px;border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--ground);z-index:1}
#pr-lista .rama{grid-template-columns:1fr 62px 58px}
#pr-lista .rama .hs{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:5px}
#pr-lista .rama .rv{font-size:11.5px}
#pr-lista .sin{padding:14px 5px;color:var(--dim);font-size:12px}
/* la ficha: el mapa de origen es el elemento que manda */
.pr-cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.pr-cab .hs{font-family:var(--mono);font-size:11px;color:var(--dim)}
.pr-total{font-family:var(--mono);font-size:22px;letter-spacing:-.02em;color:var(--bone);
  font-variant-numeric:tabular-nums;line-height:1.1;margin:4px 0 0}
.pr-total small{font-family:var(--sans);font-size:11px;color:var(--dim);margin-left:6px;letter-spacing:0}
.pr-mapa{position:relative;height:236px;margin:8px 0 4px;background:var(--slab);border:1px solid var(--rule)}
.pr-mapa canvas{display:block;width:100%;height:100%}
.pr-origen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin:0;padding:0;list-style:none}
.pr-origen li{display:grid;grid-template-columns:1fr 46px;gap:0 8px;align-items:center;padding:2.5px 0;
  border-bottom:1px solid var(--rule);font-size:12px;color:var(--ash)}
.pr-origen .n{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--bone);font-variant-numeric:tabular-nums}
.pr-origen .b{grid-column:1/3;height:3px;background:var(--slab-2);margin:1px 0 2px}
.pr-origen .b i{display:block;height:100%;width:var(--w,0);background:var(--brass-d)}
.pr-origen li.top .b i{background:var(--brass)}
.pr-origen li.agr{color:var(--dim)}
.pr-consume{list-style:none;margin:0;padding:0}
.pr-consume li{display:grid;grid-template-columns:1fr 60px;gap:0 8px;align-items:center;padding:3px 0;
  border-bottom:1px solid var(--rule);font-size:12px}
.pr-consume li:last-child{border-bottom:0}
.pr-consume .n{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--ash);font-variant-numeric:tabular-nums}
.pr-consume .saltar{background:transparent;border:0;padding:0;color:var(--ash);font:inherit;cursor:pointer;
  text-align:left;border-bottom:1px dotted var(--dim)}
.pr-consume .saltar:hover,.pr-consume .saltar:focus-visible{color:var(--brass);border-bottom-color:var(--brass)}
.pr-consume .b{grid-column:1/3;height:3px;background:var(--slab-2);margin:0 0 2px}
.pr-consume .b i{display:block;height:100%;width:var(--w,0);background:var(--steel-d)}
/* precio: cuatro cifras con su etiqueta debajo, solo aqui son el dato */
.pr-precio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:2px 0 6px}
.pr-precio div{border-top:1px solid var(--rule);padding-top:5px}
.pr-precio .v{font-family:var(--mono);font-size:19px;letter-spacing:-.02em;color:var(--bone);font-variant-numeric:tabular-nums;line-height:1.1}
.pr-precio .v.up{color:var(--brass)} .pr-precio .v.dn{color:var(--steel)}
.pr-precio .k{font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.35}
.pr-sinprecio{border-left:2px solid var(--rule-2);padding:6px 10px;margin:4px 0 8px;font-size:11.5px;color:var(--ash);line-height:1.45}
.pr-temas{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0}
.pr-temas span{font-family:var(--mono);font-size:10px;color:var(--ash);border:1px solid var(--rule-2);padding:1px 6px;border-radius:2px}
#pr-lado .serie-wrap{margin-top:4px}
/* el filtro se lee como parte del titulo de la lista que filtra: sin esto la barra lo empuja al
   extremo derecho, encima de la columna de importes, y parece que ordena por importe */
#v-producto .secbar h2{flex:0 1 auto}
.selcaja-lista{margin-right:auto}
#pr-lado .secbar{margin-top:10px}
#pr-lado .secbar:first-child{margin-top:0}
#pr-ficha,#pr-lado{overflow-y:auto}

/* el bloque de sucesos extremos viene de la vista Materia, mas ancha: aqui se apila y no desborda */
#pr-lado .secbar h2{white-space:normal;line-height:1.25}
#pr-lado .raros,#pr-lado .raros li,#pr-lado .linea{max-width:100%;min-width:0}
#pr-lado *{overflow-wrap:anywhere}
#pr-lado .rn{white-space:normal}

/* ---------- vista compra: la respuesta de la semana, partida a partida ---------- */
#v-compra{grid-template-columns:330px 1fr 340px}
#cp-lista .rama,#v-compra .rhead{grid-template-columns:1fr 96px}
/* La vista 8 lleva la lista mas ancha que las demas: debajo de ella va el formulario de alta, y
   con 330 px los rotulos de los campos se parten en tres lineas.

   La columna del medio va con `minmax(0,1fr)` y no con `1fr` porque el minimo por defecto de una
   pista de rejilla es `auto`, o sea su contenido. Que quede claro lo que NO fue: el desbordamiento
   medido a 1280 y a 1152 px el 9-sep-2026 no salia de aqui. Con la cabecera oculta, la vista
   media exactamente el ancho de la ventana; quien pedia 1.309 px era la cabecera, y eso se
   arregla arriba, en `body>*{min-width:0}`. Esto es una guarda, no la cura. */
#v-factura{grid-template-columns:360px minmax(0,1fr) 340px}
#fa-lista .rama,#v-factura .rhead{grid-template-columns:1fr 88px}
/* En las demas vistas la lista es lo unico del panel y se lleva el alto entero con `flex:1`. Aqui
   debajo va el formulario de alta, y esa misma regla dejaba la lista en cero de alto con los
   contratos desbordando por arriba: se veian la cabecera y el formulario, y ni una fila. La lista
   crece con su contenido hasta un tope y lo que se desplaza es el panel. */
/* Los tres paneles se desplazan solos. Sin esto, el ultimo bloque del lado (la cifra del aviso
   con su explicacion debajo) quedaba cortado por el borde del panel y no habia forma de leerlo. */
#v-factura .pane-lista,#fa-ficha,#fa-lado{overflow-y:auto}
#v-factura #fa-lista{flex:0 0 auto;max-height:32vh;overflow-y:auto}
/* El nombre de un contrato no cabe en una linea de 260 px, asi que estas filas crecen a dos: la
   altura fija de 25 px que traen las demas listas hacia que se montaran unas encima de otras. */
#fa-lista .rama{height:auto;min-height:25px;padding:4px 5px;align-items:center}
#fa-lista .rama .rn{white-space:normal;line-height:1.3;overflow:visible}
#cp-lista .rama .rr{font-size:10.5px;text-align:right;color:var(--ash);align-self:center}
#cp-lista .rama .rr.prueba{color:var(--dim)}
#cp-lista .rama .rr.r-compra_ahora{color:var(--brass)}
#cp-lista .rama .rr.r-espera{color:var(--steel)}
#cp-ficha,#cp-lado{overflow-y:auto}
.cp-cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
/* La respuesta es lo primero que se lee y lo unico grande de la ficha */
.cp-resp{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--bone);line-height:1.15;margin:6px 0 2px}
.cp-resp small{display:block;font-family:var(--sans);font-size:11px;font-weight:400;color:var(--dim);letter-spacing:0;margin-top:3px}
.cp-resp.r-compra_ahora{color:var(--brass)}
.cp-resp.r-espera{color:var(--steel)}
.cp-resp.prueba{font-size:17px;color:var(--ash)}
.cp-precio{font-family:var(--mono);font-size:22px;letter-spacing:-.02em;color:var(--bone);
  font-variant-numeric:tabular-nums;line-height:1.1;margin:10px 0 0}
.cp-precio small{font-family:var(--sans);font-size:11px;color:var(--dim);margin-left:6px;letter-spacing:0}
/* El rotulo que dice QUE es la cifra grande de la vista 8. Va pegado encima de ella y no como una
   nota mas: sin el, a la pregunta "que cifra es esta" la pantalla respondia por contexto. */
#fa-ficha .cp-rotulo{margin:12px 0 1px;font-size:10.5px;line-height:1.3;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em}
#fa-ficha .cp-rotulo+.cp-precio{margin-top:0}
/* las tres cifras del techo: el ahorro del comprador anual, el maximo posible y lo que queda entre ambos */
.cp-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;margin:2px 0 6px;padding:0;list-style:none}
.cp-cifras li{border-top:1px solid var(--rule);padding-top:5px}
.cp-cifras .v{display:block;font-family:var(--mono);font-size:18px;letter-spacing:-.02em;color:var(--bone);
  font-variant-numeric:tabular-nums;line-height:1.15}
.cp-cifras .k{display:block;font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.35}
/* En la vista 8 las dos medidas van UNA POR FILA y no en la rejilla de tres. Sus rotulos son
   frases enteras con su ambito («en 20 pares de fechas del regimen vigente, medido el ...»), y en
   los ~100 px de una tercera parte del panel hasta la cifra se partia en dos lineas. */
#fa-lado .cp-cifras{grid-template-columns:1fr;gap:8px 0}
/* `.v` va alineada a la derecha en toda la pantalla, que es lo que cuadra las columnas de cifras.
   Aqui la fila ocupa el panel entero y la cifra encabeza una frase, asi que se lee por la izquierda. */
#fa-lado .cp-cifras .v{text-align:left}
.cp-nulos,.cp-puentes{list-style:none;margin:0;padding:0}
.cp-nulos li,.cp-puentes li{padding:4px 0;border-bottom:1px solid var(--rule);font-size:12px;color:var(--ash)}
.cp-nulos li:last-child,.cp-puentes li:last-child{border-bottom:0}
.cp-nulos .n,.cp-puentes .n{display:block;color:var(--bone)}
.cp-nulos .d,.cp-puentes .d{display:block;font-size:10.5px;color:var(--dim);line-height:1.4;margin-top:1px}
.cp-nulos .s{display:block;font-size:10.5px;margin-top:1px}
.cp-nulos li.gana .s{color:var(--steel)}
.cp-nulos li.pierde .s{color:var(--brass)}
.cp-puentes .saltar{background:transparent;border:0;padding:0;color:var(--bone);font:inherit;cursor:pointer;
  text-align:left;border-bottom:1px dotted var(--dim)}
.cp-puentes .saltar:hover,.cp-puentes .saltar:focus-visible{color:var(--brass);border-bottom-color:var(--brass)}
.cp-pie{margin:12px 0 0;padding-top:7px;border-top:1px solid var(--rule);font-size:10.5px;color:var(--dim);line-height:1.45}
#cp-lado .secbar{margin-top:10px}
#cp-lado .secbar:first-child{margin-top:0}
#cp-lado .secbar h2{white-space:normal;line-height:1.25}
#cp-ficha *,#cp-lado *{min-width:0;overflow-wrap:anywhere}

/* ---- vista 8, la factura ----
   La barra dice que parte del periodo ya tiene precio publicado. Es la cifra que separa el dato
   del escenario, asi que se dibuja ademas de escribirse: leida de lejos es lo primero que aclara
   si esa revision esta cerrada o todavia se puede mover. */
/* `flex:none` porque la ficha es una columna flexible: sin el, en cuanto el contenido pasa del
   alto del panel, el navegador encoge a los hijos que puede y una barra de 6 px se queda en
   cero. Medido el 9-sep-2026 al anadir la conciliacion y el expediente: la barra seguia en el
   marcado, con su `width` puesta, y no se veia. */
.fa-barra{height:6px;flex:none;border-radius:3px;background:var(--rule);margin:8px 0 4px;overflow:hidden}
.fa-barra span{display:block;height:100%;background:var(--brass)}
#fa-lista .rama .rr{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
#fa-lista .rama .val{font-size:10px;color:var(--dim);margin-left:5px}
/* El rotulo va ENCIMA del control y no al lado: en un panel estrecho, dos columnas dejan los
   campos a cuarenta pixeles de ancho y el selector de periodo recortado a la mitad. */
.fa-campo{margin:0 0 9px}
.fa-campo label{display:block;font-size:11px;color:var(--dim);margin-bottom:3px}
.fa-campo input,.fa-campo select{width:100%;box-sizing:border-box;background:var(--panel);
  color:var(--bone);border:1px solid var(--rule);border-radius:3px;padding:5px 7px;font:inherit;font-size:12px}
/* `:focus-within` y no solo `:focus-visible`, por el campo de fecha: al tabular, Chrome mete el
   foco en uno de los segmentos internos del control (dia, mes, ano), y entonces el elemento que
   lo aloja NO casa ni con `:focus` ni con `:focus-visible`, aunque `document.activeElement` siga
   siendo el. El anillo desaparecia justo en el unico campo donde hace falta saber donde estas.
   Medido con el barrido de accesibilidad el 9-sep-2026: era el unico control de la vista sin
   anillo, y con `page.focus()` si salia, que es lo que despista. */
.fa-campo input:focus-within,.fa-campo select:focus-within,
.fa-campo input:focus-visible,.fa-campo select:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.fa-campo .scope{margin:3px 0 0}
/* El aviso de error va pegado al campo que lo provoca, entre el control y su texto de ayuda, y se
   distingue de ese texto: color de atencion, filete a la izquierda y algo mas de cuerpo. */
.fa-error{margin:4px 0 0;padding:3px 0 3px 8px;border-left:2px solid var(--brass);
  font-size:11px;line-height:1.4;color:var(--brass)}
.fa-campo [aria-invalid="true"]{border-color:var(--brass)}
.fa-campo button{background:var(--brass);color:var(--ink);border:0;border-radius:3px;padding:6px 12px;
  font:inherit;font-size:12px;cursor:pointer}
.fa-campo button:hover,.fa-campo button:focus-visible{filter:brightness(1.1)}
#fa-lado .secbar{margin-top:10px}
#fa-lado .secbar:first-child{margin-top:0}
#fa-lado .secbar h2{white-space:normal;line-height:1.25}
#fa-ficha *,#fa-lado *{min-width:0;overflow-wrap:anywhere}
#fa-ficha .saltar{background:transparent;border:1px solid var(--rule);border-radius:3px;padding:4px 9px;
  color:var(--ash);font:inherit;font-size:11.5px;cursor:pointer}
#fa-ficha .saltar:hover,#fa-ficha .saltar:focus-visible{color:var(--brass);border-color:var(--brass)}
#fa-lado .saltar{background:transparent;border:0;padding:0;color:var(--bone);font:inherit;cursor:pointer;
  text-align:left;border-bottom:1px dotted var(--dim)}
#fa-lado .saltar:hover,#fa-lado .saltar:focus-visible{color:var(--brass);border-bottom-color:var(--brass)}
#pr-lista .rama .rv{white-space:nowrap}
#pr-lado .secbar h2{flex:1 1 auto;min-width:0}
#pr-lado .secbar{flex-wrap:wrap}

/* la cadena del producto */
.pr-cadena-wrap{margin:6px 0 2px;background:var(--slab);border:1px solid var(--rule);padding:4px 6px}
#pr-cadena{display:block;width:100%}
#pr-cadena text{font-family:var(--sans);fill:var(--ash);font-size:11px}
#pr-cadena .col-t{font-size:10px;fill:var(--dim)}
#pr-cadena .nodo{cursor:pointer}
#pr-cadena .nodo:focus{outline:none}
#pr-cadena .nodo:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#pr-cadena .nodo text{fill:var(--bone);pointer-events:none}
#pr-cadena .nodo .v{font-size:9.5px;fill:var(--dim);font-family:var(--mono)}
#pr-cadena .nodo.insumo{cursor:default}
#pr-cadena .ins-t{font-size:11px;fill:var(--ground);font-weight:600}
#pr-cadena .nodo:focus-visible rect{stroke:var(--bone);stroke-width:1.5}
#pr-cadena .cinta{transition:fill-opacity .18s}
#pr-cadena .cinta.vivo{fill-opacity:.62}
#pr-cadena .cinta.apagado{fill-opacity:.07}
#pr-cadena .nodo.apagado{opacity:.35}
.pr-cadena-ambito{margin-top:4px}
.pr-mensual{display:flex;align-items:flex-end;gap:10px;margin:2px 0 6px}
.pr-mensual .barras{display:inline-flex;align-items:flex-end;gap:2px;height:22px;flex:none}
.pr-mensual .barras i{display:block;width:6px;min-height:1px;height:var(--h,0);background:var(--dim);opacity:.85;border-radius:1px 1px 0 0}
.pr-mensual .barras i:last-child{background:var(--bone)}
.pr-mensual small{font-size:11px;color:var(--dim);line-height:1.35}


/* ---------- color por insumo: el marcado dice cual, la hoja dice cual es ----------
   El guion pone data-ci con la clave del color, no el color: asi no hace falta 'unsafe-inline'. */
[data-ci="quimica"]{--ci:var(--ins-quimica)}
[data-ci="elec"]{--ci:var(--ins-elec)}
[data-ci="refino"]{--ci:var(--ins-refino)}
[data-ci="metales"]{--ci:var(--ins-metales)}
[data-ci="agri"]{--ci:var(--ins-agri)}
[data-ci="otros"]{--ci:var(--ins-otros)}
.ins-col{color:var(--ci) !important}   /* sustituye a un style en linea, que ganaba a .pane .sub2 b */

/* separaciones que antes iban en el marcado. Van con !important porque sustituyen a un
   atributo style, que ganaba a reglas mas especificas como #pr-lado .secbar */
.mt6{margin-top:6px !important}
.mt7{margin-top:7px !important}
.mt10{margin-top:10px !important}
.mt12{margin-top:12px !important}
.mt14{margin-top:14px !important}
.chead-m{grid-template-columns:1fr 50px 50px 66px 50px 36px}
.cadmapa{overflow-y:auto;flex:1;min-height:0}
.mley-nota{margin-left:16px}
.nowhead .cf{font-style:normal;color:var(--brass)}
.frow .est.alerta,.tblm td.alerta{color:var(--brass)}   /* mas especifico que .frow.fuera .v, que antes perdia contra el style en linea */

/* accesibilidad: salto al contenido, region de anuncios y control de atajos */
.visualmente-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.salto{position:absolute;left:8px;top:-40px;z-index:90;background:var(--slab-2);color:var(--bone);
  border:1px solid var(--brass);padding:6px 12px;font-size:12px;text-decoration:none;transition:top .12s}
.salto:focus{top:8px}
.ctrl-cab{display:flex;align-items:flex-end;gap:8px}
#atajos{background:transparent;border:1px solid var(--rule-2);color:var(--dim);font-family:var(--sans);
  font-size:10.5px;padding:3px 8px;border-radius:2px;cursor:pointer;min-height:24px;white-space:nowrap}
#atajos:hover{color:var(--ash);border-color:var(--brass-d)}
#atajos b{color:var(--ash);font-weight:600}
/* selector de idioma: mismo trazo que el resto de la cabecera, alto de toque de 24 px */
.sel-idioma{display:flex;align-items:center}
#idioma{background:transparent;border:1px solid var(--rule-2);color:var(--ash);font-family:var(--sans);
  font-size:10.5px;padding:3px 6px;border-radius:2px;cursor:pointer;min-height:24px}
#idioma:hover{color:var(--brass);border-color:var(--brass-d)}
#idioma option{background:var(--slab-2);color:var(--bone)}
#tema{background:transparent;border:1px solid var(--rule-2);color:var(--ash);
  min-width:28px;min-height:28px;padding:2px;border-radius:2px;cursor:pointer;display:grid;place-items:center}
#tema:hover{color:var(--brass);border-color:var(--brass-d)}
#tema svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* el icono ensena el tema al que se va, no el que hay: sol para ir al claro, luna para volver al oscuro */
#tema .luna{display:none}
#tema.es-claro .sol{display:none}
#tema.es-claro .luna{display:block;fill:currentColor;stroke:none}
.kbd.off{opacity:.4;text-decoration:line-through}

/* graficos ECharts: la caja la mide ECharts al arrancar, asi que tiene alto propio y no
   depende del contenido. El conmutador reusa .conmut y solo fija el objetivo minimo. */
/* El panel de graficos no se encoge: los demas paneles llevan min-height:0 para poder
   comprimirse dentro de la vista, y con eso este colapsaba a cero y el lienzo se salia. */
.vista>.pane-graficos{grid-column:1/-1;border-top:1px solid var(--rule);min-height:auto;overflow:visible}
.vista>.pane-graficos:empty{display:none}
.grafico{width:100%;margin:6px 0 4px;flex:0 0 auto}
.grafico-lienzo{width:100%;height:460px}
.gconmut{margin-left:auto}
.gconmut button{min-width:24px;min-height:24px;padding:3px 10px}
@media (max-width:1100px){.grafico-lienzo{height:420px}}

/* trazabilidad: el color de la cinta y del nodo, tambien en la hoja */
#tz-svg .cinta{fill:var(--ci,var(--ins-otros-cinta))}
#tz-svg .nodo rect.pais{fill:var(--tz-nodo)}
#tz-svg .nodo rect.pais.resto{fill:var(--tz-nodo-resto)}

/* paginas del Worker: entrar, cuenta, admin, consentimiento, legales (sin estilos en linea, por la CSP) */
/* el body de la pantalla es una rejilla de 100vh sin scroll; una pagina del Worker es un documento normal */
body:has(> main.oauth){display:block;height:auto;min-height:100vh;overflow:auto}
.oauth{display:block;max-width:560px;margin:8vh auto;padding:24px;font-family:var(--sans);font-size:15px;color:var(--bone);container-type:normal;height:auto;overflow:visible}
.oauth h1{font-size:22px;margin:0 0 12px}
.oauth p{color:var(--ash);line-height:1.5}
.oauth ul{columns:2;color:var(--ash)}
.oauth form{display:flex;gap:12px;margin-top:20px}
.oauth button{padding:10px 18px;border-radius:6px;border:1px solid var(--dim);background:var(--slab-2);color:var(--bone);cursor:pointer;font-size:15px}
.oauth button.si{background:var(--bone);color:var(--ground);border-color:var(--bone)}
.oauth small{color:var(--dim)}
.oauth input{padding:10px 12px;border-radius:6px;border:1px solid var(--dim);background:var(--ground);color:var(--bone);font-size:15px;flex:1}
.oauth dl{color:var(--ash)}
.oauth dt{color:var(--dim);font-size:13px;margin-top:12px}
.oauth.ancho{max-width:1180px}
.oauth h2{font-size:17px;margin:28px 0 8px}
.oauth table{width:100%;border-collapse:collapse;font-size:13px;color:var(--ash);margin-bottom:8px}
.oauth th{text-align:left;color:var(--dim);font-weight:600;border-bottom:1px solid var(--rule);padding:6px 8px}
.oauth td{border-bottom:1px solid var(--slab-2);padding:6px 8px;vertical-align:top}
.oauth table form{display:inline-flex;gap:4px;margin:4px 0 0}
.oauth table button,.oauth table select{padding:3px 8px;font-size:12px}
.oauth select{border-radius:6px;border:1px solid var(--dim);background:var(--ground);color:var(--bone);padding:4px 8px}
.oauth .arriba{margin-top:8px}
.oauth .en-linea{display:inline}
.oauth .una-columna{columns:1}

/* ---------- favoritos ----------
   La estrella de cada fila y la tira "Lo tuyo" del Resumen. La columna de la estrella solo
   existe cuando la cuenta puede tener favoritos (body.con-fav): sin ella, las listas miden y
   se reparten exactamente igual que antes. */
.fav{width:24px;height:24px;padding:0;border:0;background:transparent;color:var(--dim);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.fav svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.fav:hover{color:var(--brass)}
.fav.on{color:var(--brass)}
.fav.on svg{fill:currentColor}
.fav-col{display:none}
body.con-fav .fav-col{display:block}
body.con-fav .rama,body.con-fav .rhead{grid-template-columns:24px minmax(150px,1fr) 44px 40px 58px}
body.con-fav .pane-lista .rama,body.con-fav .pane-lista .rhead{grid-template-columns:24px 1fr 44px 40px 58px}
body.con-fav #pr-lista .rama,body.con-fav #v-producto .rhead{grid-template-columns:24px 1fr 62px 58px}
body.con-fav #cp-lista .rama,body.con-fav #v-compra .rhead{grid-template-columns:24px 1fr 96px}
body.con-fav .fcols,body.con-fav .frow{grid-template-columns:24px 106px 1fr 44px 44px 44px 36px}
#mapa-ficha h3 .fav{vertical-align:-6px;margin-right:2px}
/* la raya que separa los favoritos del resto de su lista: mas marcada que la de una fila */
.sep-fav{border-bottom-color:var(--rule-2)}

/* Una sola linea de tarjetas de dos renglones; si no caben, se desplaza a lo ancho dentro de su
   caja y no crece hacia abajo. */
#v-resumen>.tuyo{display:none;max-height:80px;padding-top:7px;padding-bottom:5px}
/* La tira solo aparece si la pantalla da de si. Medido el 7-sep-2026 a 1440 de ancho, con la
   tira puesta y contando solo las filas que se ven de verdad: a 900 px de alto la lista de
   fiabilidad conserva seis filas, a 860 se queda en cuatro, a 840 en tres y a 768 en una. Por
   debajo de 900 no se pinta: los favoritos siguen donde mas valen, arriba de cada lista y con
   su estrella, y la lista principal queda igual que si no hubiera favoritos. */
@media (min-height:900px){
  body.tiene-fav #v-resumen{grid-template-rows:auto 1fr 232px}
  body.tiene-fav #v-resumen>.tuyo{display:flex;grid-column:1/4;grid-row:1;border-right:0;
    border-bottom:1px solid var(--rule)}
  body.tiene-fav .fia,body.tiene-fav .expo,body.tiene-fav .hoy{grid-row:2}
  body.tiene-fav .ev,body.tiene-fav .prensa{grid-row:3}
}
.tuyo .secbar{align-items:baseline}
.tuyo .secbar .scope{margin:0;text-align:right;flex:0 1 auto}
.tuyo .tarjetas{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;flex:1;min-height:0;
  padding-bottom:4px;align-items:start}
.tuyo .tj{flex:0 0 176px;display:flex;flex-direction:column;gap:0;text-align:left;
  justify-content:flex-start;
  border:1px solid var(--rule);background:var(--slab);color:var(--ash);cursor:pointer;
  font-family:var(--sans);padding:4px 9px 5px}
/* los renglones no se encogen: al recortar el alto de la tira, el nombre y el dato se pisaban */
.tuyo .tj>*{flex:none}
.tuyo .tj:hover{background:var(--slab-2);border-color:var(--rule-2)}
.tuyo .tj .tf{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.tuyo .tj .tk{color:var(--ash)}
.tuyo .tj .tn{font-size:12.5px;color:var(--bone);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.tuyo .tj .tv{font-family:var(--mono);font-size:12.5px;color:var(--brass);flex:none;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px}
.tuyo .tj .tv .fi{margin:0}
.tuyo .tj .ta{font-size:10px;color:var(--dim);line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ---------- página pública de valor y planes (/valor) ---------- */
/* Es un documento con scroll, no la rejilla de 100vh de la pantalla. */
body.valor-body{display:block;height:auto;min-height:100vh;overflow:auto}
.valor-top{align-items:center}
.btn-entrar{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:6px;border:1px solid var(--bone);
  background:var(--bone);color:var(--ground);text-decoration:none;font-size:13px;font-weight:600}
.btn-contacto{background:transparent;color:var(--bone)}
.btn-entrar:hover{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
/* main#contenido lleva la contención de tamaño de la rejilla de la pantalla; aquí se anula con más peso */
body.valor-body main#contenido.valor{display:block;height:auto;min-height:0;container-type:normal;overflow:visible;position:static;max-width:1180px;margin:0 auto;padding:12px 24px 40px;font-size:15px;color:var(--ash)}
main.valor h2{font-size:22px;color:var(--bone);margin:0 0 10px;line-height:1.3}
main.valor h3{font-size:16px;color:var(--bone);margin:0 0 6px;font-weight:600}
main.valor p{margin:0 0 8px;line-height:1.55}
main.valor section{padding:30px 0;border-bottom:1px solid var(--rule)}
main.valor section:last-child{border-bottom:0}

.v-hero{padding-top:36px}
.v-quien{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.v-hero h2{font-size:28px;letter-spacing:-.015em;max-width:900px;font-weight:600}
.v-sub{font-size:16px;color:var(--ash);max-width:760px}

.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:paso}
.pasos li{counter-increment:paso;position:relative}
.pasos li h3::before{content:counter(paso) ". ";color:var(--brass)}
.paso-svg{display:block;width:100%;max-width:240px;height:auto;margin:0 0 10px;background:var(--slab);border:1px solid var(--rule);border-radius:6px;padding:8px}
.paso-svg .s-linea{fill:none;stroke:var(--steel);stroke-width:1.8;stroke-linejoin:round}
.paso-svg .s-puntos{fill:var(--brass)}
.paso-svg .s-prensa{fill:var(--rule-2)}
.paso-svg .s-nodo{fill:var(--brass)}
.paso-svg .s-cinta path{fill:none;stroke:var(--steel);stroke-width:2.2}
.paso-svg .s-rama{fill:var(--rule-2)}
.paso-svg .s-sello rect{fill:none;stroke:var(--rule-2);stroke-width:1.6}
.paso-svg .s-sello path{stroke:var(--rule-2);stroke-width:1.6}
.paso-svg .s-check circle{fill:none;stroke:var(--steel);stroke-width:2}
.paso-svg .s-check path{fill:none;stroke:var(--steel);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.v-no{border-left:3px solid var(--brass);padding-left:20px;margin:0}
main.valor section.v-no{padding-left:20px}
.v-no p{max-width:820px}

.tarjetas{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.tarjeta{background:var(--slab);border:1px solid var(--rule);border-radius:8px;padding:18px 20px}
.tarjeta figure{margin:0 0 8px}
.tarjeta .grafico{display:block;width:100%;background:var(--ground);border:1px solid var(--rule);border-radius:6px;padding:8px}
.tarjeta .g{display:block;width:100%;height:auto;font-family:var(--sans)}
.tarjeta figcaption{font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.45}
.g-eti{fill:var(--ash);font-size:11px}
.g-num{fill:var(--bone);font-size:11px;font-family:var(--mono)}
.g-ley{fill:var(--dim);font-size:10px}
.g-grande{fill:var(--brass);font-size:24px;font-weight:600;font-family:var(--mono)}
.g-base{fill:var(--rule-2)}
.g-sobre{fill:var(--brass)}
.g-bajo{fill:var(--steel)}
.g-eje{stroke:var(--rule-2);stroke-width:1}
.g-marca{stroke:var(--rule);stroke-width:1}
.g-moneda{stroke:var(--linea);stroke-width:1.5;stroke-dasharray:3 3}
.g-guia{stroke:var(--rule);stroke-width:1}
.g-punto{fill:var(--steel)}
.g-punto-fiable{fill:var(--brass)}
.g-punto-mal{fill:none;stroke:var(--mute);stroke-width:1.6}
.v-mcp{margin-top:18px;max-width:900px}

.v-planes-nota{color:var(--dim);font-size:13px;margin-bottom:14px}
.planes-tabla-envoltorio{overflow-x:auto}
.planes-tabla{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.planes-tabla th,.planes-tabla td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.planes-tabla thead th{vertical-align:bottom;border-bottom:2px solid var(--rule-2)}
.planes-tabla thead th.plan-pro{background:var(--slab);border-radius:6px 6px 0 0}
.planes-tabla tbody th{font-weight:400;color:var(--ash);width:40%}
.planes-tabla td{color:var(--bone)}
.plan-nombre{display:block;font-size:18px;font-weight:600;color:var(--bone)}
.plan-precio{display:block;font-size:13px;color:var(--ash);margin-top:4px}
.plan-aviso{display:inline-block;margin-top:6px;font-size:11px;color:var(--on-brass);background:var(--brass);padding:2px 8px;border-radius:3px}
.planes-tabla .si{color:var(--steel);font-weight:600}
.planes-tabla .no{color:var(--dim)}
.planes-tabla .pronto{color:var(--brass)}
.planes-tabla tfoot td{border-bottom:0;padding-top:16px}
.btn-plan{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:6px;border:1px solid var(--rule-2);
  color:var(--bone);text-decoration:none;font-weight:600}
.btn-plan:hover{border-color:var(--brass);color:var(--brass)}
.btn-plan.principal{background:var(--bone);color:var(--ground);border-color:var(--bone)}
.btn-plan.principal:hover{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}

.valor-pie{max-width:1180px;margin:0 auto;border-top:0}
.valor-pie p{font-size:12px}
.valor-pie a{color:var(--ash)}
.valor-pie a:hover{color:var(--brass)}

main.valor :is(a,button,select):focus-visible,.valor-top :is(a,button,select):focus-visible{outline:2px solid var(--brass);outline-offset:2px}

@media (max-width:900px){
  .pasos{grid-template-columns:1fr}
  .tarjetas{grid-template-columns:1fr}
  .v-hero h2{font-size:22px}
  .valor-top{flex-wrap:wrap;gap:12px}
}