/* Colores del tema claro. .tema-claro los repite sobre un contenedor: lo usa la exportación a PNG,
   que siempre sale en tema claro aunque la pantalla esté en oscuro. */
:root, .tema-claro {
  color-scheme: light;
  --bg: #fcfcfb;
  --text: #0b0b0b;
  --muted: #52514e;
  --faint: #7a7974;
  --grid: #e6e5e1;
  --rule: #dcdad4;
  --axis: #b5b3ad;
  --shade-a: #f6f5f2;
  --shade-b: #ebeae6;
  --card: #ffffff;
  --border: #d8d6d0;
  --seg-bg: #efeee9;
  --oil: #52514e;
  --hito: #52514e;
  --promo: #2f6f8f;
  --accent: #2a78d6;
  --link: #1f5fae;
  --sube: #b42318;
  --baja: #067647;
  --sube-bg: #fdebe9;
  --sube-tx: #8a1c12;
  --baja-bg: #e4f4ea;
  --baja-tx: #05603a;
  --c-diesel_mbarete: #2a78d6;
  --c-diesel_pora: #eb6834;
  --c-nafta_aratiri97: #1baf7a;
  --c-nafta_oikoite93: #eda100;
  --c-nafta_kape88: #e87ba4;
  --c-nafta_ecoflex85: #6250d6;
  --c-glp_kg: #3d3c39;
  --c-glp_litro: #8f8d86;
}
/* El tema lo fija data-theme en <html> (ver index.html); no se sigue prefers-color-scheme. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1a19;
  --text: #f0efeb;
  --muted: #c3c2b7;
  --faint: #8f8d86;
  --grid: #2e2e2c;
  --rule: #3a3a37;
  --axis: #5a5955;
  --shade-a: #222221;
  --shade-b: #2c2c2a;
  --card: #232322;
  --border: #3d3c39;
  --seg-bg: #262625;
  --oil: #9a998f;
  --hito: #c3c2b7;
  --promo: #6fb0d0;
  --accent: #3987e5;
  --link: #7fb0ee;
  --sube: #ff8f86;
  --baja: #5fd08a;
  --sube-bg: #3f1d1a;
  --sube-tx: #ffb8b0;
  --baja-bg: #15382a;
  --baja-tx: #92deb1;
  --c-diesel_mbarete: #3987e5;
  --c-diesel_pora: #d95926;
  --c-nafta_aratiri97: #199e70;
  --c-nafta_oikoite93: #c98500;
  --c-nafta_kape88: #d55181;
  --c-nafta_ecoflex85: #9085e9;
  --c-glp_kg: #d8d6cf;
  --c-glp_litro: #8f8d86;
}
/* Escala de espaciado: 4 / 8 / 16 / 24 / 32 / 48. Ancho máximo de lectura: 1100px. */
:root {
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  --ancho: 1100px;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--fuente);
  font-feature-settings: "cv11";   /* Inter: "a" de un piso, más legible en cifras y textos cortos */
}
a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
.cab, main, .pie { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--s3); }
.cab { padding-top: var(--s5); }
h1 { font-size: clamp(1.4rem, 4.8vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; margin: 0; max-width: 24ch; }
.cab-fila { display: flex; align-items: flex-start; gap: var(--s3); justify-content: space-between; }
.btn-tema {
  flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; padding: 0;
}
.btn-tema:hover { color: var(--text); background: var(--seg-bg); }
.btn-tema .ic-luna { display: none; }
:root[data-theme="dark"] .btn-tema .ic-sol { display: none; }
:root[data-theme="dark"] .btn-tema .ic-luna { display: block; }
h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 var(--s2); letter-spacing: -.01em; }
.sub { color: var(--muted); margin: 0; max-width: 72ch; }
.frescura { color: var(--faint); font-size: .86rem; white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* secciones */
.seccion { margin-top: var(--s6); scroll-margin-top: var(--s2); }
#hoy.seccion { margin-top: var(--s5); }
.seccion > h2, .sec-cab h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; margin: 0 0 var(--s1); }
.sec-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.sec-cab > div:first-child { min-width: 0; }
#h-hist:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* botón de contorno discreto (Descargar, Descargar imagen) */
.btn-linea {
  flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .82rem; font-weight: 500;
  color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 6px;
  padding: var(--s1) 10px; cursor: pointer; white-space: nowrap; line-height: 1.5;
}
.btn-linea:hover { border-color: var(--muted); }
.btn-linea[disabled] { opacity: .5; cursor: progress; }
.menu { position: relative; flex: none; }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 10; min-width: 210px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: var(--s1);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.menu-lista[hidden] { display: none; }
.menu-lista button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: .86rem; color: var(--text);
  background: transparent; border: 0; border-radius: 4px; padding: 6px var(--s2); cursor: pointer;
}
.menu-lista button:hover, .menu-lista button:focus-visible { background: var(--seg-bg); outline: none; }

/* pestañas con subrayado */
.tabs { display: flex; gap: var(--s4); margin: 0 0 var(--s3); border-bottom: 1px solid var(--rule); }
.tab {
  font: inherit; font-size: .95rem; font-weight: 500; color: var(--muted); background: transparent; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--s2) 0;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); font-weight: 700; border-bottom-color: var(--text); }

/* controles: segmentados livianos */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: .72rem; font-weight: 500; color: var(--faint); padding: 0 0 var(--s1); text-transform: uppercase; letter-spacing: .05em; }
.controles { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.seg-g { display: inline-flex; background: var(--seg-bg); border-radius: 8px; padding: 2px; gap: 2px; }
.seg label { display: inline-block; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: inline-block; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  font-size: .82rem; font-weight: 500; color: var(--muted); white-space: nowrap;
}
.seg span:hover { color: var(--text); }
.seg input:checked + span { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.05); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.con-puntero .seg input:focus-visible + span { outline: none; }

/* chips de producto (botones de alternancia) */
.chips { margin-bottom: var(--s3); }
.chips-box { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chipb {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--faint);
}
.chipb .sw { opacity: .5; }
.chipb .chip-ck { display: none; font-weight: 700; }
.chipb[aria-pressed="true"] .chip-ck { display: inline; }
.chipb[aria-pressed="true"] { color: var(--text); border-color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, transparent); }
.chipb[aria-pressed="true"] .sw { opacity: 1; }

.aviso { font-size: .86rem; color: var(--muted); margin: var(--s2) 0; }
.aviso:empty { display: none; }
.nota-eje { font-size: .78rem; color: var(--faint); margin: var(--s1) 0 0; text-align: right; }
.nota-eje:empty { display: none; }

.chart { position: relative; width: 100%; overflow: hidden; background: var(--bg); min-height: 200px; }
.chart svg { display: block; max-width: 100%; touch-action: pan-y; }
.chart .vacio { padding: 40px 12px; text-align: center; color: var(--muted); }
.chart text { font-family: inherit; fill: var(--muted); }
.chart .tick line { stroke: none; }
.chart .domain { stroke: var(--axis); }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .pres { font-weight: 700; fill: var(--muted); }
.chart .lbl-v { fill: var(--text); }
.chart .lbl-oil { fill: var(--muted); font-weight: 700; }
.chart .halo { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.chart .hito-l { stroke: var(--hito); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: .85; }
.chart .hito-t { fill: var(--hito); font-weight: 700; }
.chart .tramo-t { fill: var(--muted); font-style: italic; }
.chart .promo-t { fill: var(--promo); }
.chart .guia { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.chart .base-l { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .hito-halo { stroke: var(--bg); stroke-width: 5; }

.tt {
  position: absolute; z-index: 5; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: var(--s2) 10px; font-size: .8rem; line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0,0,0,.14); pointer-events: none; max-width: min(320px, calc(100% - 8px));
  overflow-wrap: anywhere;
}
.tt.fijo { pointer-events: auto; }
.tt[hidden] { display: none; }
.tt h3 { margin: 0 0 var(--s1); font-size: .88rem; }
.tt .f { color: var(--muted); }
.tt .sep { border-top: 1px solid var(--border); margin: 6px 0 var(--s1); padding-top: var(--s1); }
.tt a { color: var(--link); }
.tt .x { position: absolute; top: 2px; right: 4px; border: 0; background: none; color: var(--text); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; }
.tt .nofirme { font-variant-caps: all-small-caps; letter-spacing: .04em; color: var(--faint); font-weight: 600; }

.finales { list-style: none; margin: var(--s1) 0 0; padding: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: .84rem; border-top: 1px solid var(--rule); }
.finales li { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 14px; height: 0; border-top: 3px solid; vertical-align: middle; }
.sw-oil { border-top-style: dotted; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: .78rem; color: var(--faint); margin: var(--s2) 0 0; }
.leyenda .it { display: inline-flex; align-items: center; gap: 6px; }
.leyenda svg { flex: none; }

/* desplegables: sin caja, solo filetes */
.bloque { margin-top: var(--s5); border-bottom: 1px solid var(--rule); }
details { border-top: 1px solid var(--rule); }
summary { cursor: pointer; padding: var(--s3) 0; font-weight: 600; font-size: .95rem; }
summary:hover { color: var(--link); }
details > div { padding-bottom: var(--s3); }

table { border-collapse: collapse; width: 100%; font-size: .85rem; }
th, td { text-align: left; padding: 6px var(--s2); border-bottom: 1px solid var(--grid); vertical-align: top; }
th { color: var(--faint); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--rule); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td a, .ev a { color: var(--link); }
.ev { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.ev li { padding: 6px 0; border-bottom: 1px solid var(--grid); }
.ev li:last-child { border-bottom: 0; }
.ev .tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }

.nota ul { max-width: 72ch; margin: 0; padding-left: 1.1em; font-size: .9rem; color: var(--muted); }
.nota li { margin-bottom: var(--s2); }
.nota strong { color: var(--text); }

/* pie */
.pie { margin-top: var(--s6); padding-bottom: var(--s6); font-size: .82rem; color: var(--muted); }
.pie-grid { display: grid; grid-template-columns: 2.4fr 1fr 1fr; gap: var(--s4); border-top: 1px solid var(--text); padding-top: var(--s3); }
.pie h2 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin: 0 0 var(--s1); }
.pie p { margin: 0 0 var(--s2); }
@media (max-width: 760px) { .pie-grid { grid-template-columns: 1fr 1fr; } .pie-fuentes { grid-column: 1 / -1; } }
.redes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.redes a { display: inline-flex; align-items: center; gap: var(--s2); color: var(--muted); text-decoration: none; }
.redes a:hover, .redes a:focus-visible { color: var(--text); }
.redes a:hover span { text-decoration: underline; text-underline-offset: 2px; }
.redes svg { flex: none; }
@media (max-width: 460px) { .pie-grid { grid-template-columns: 1fr; gap: var(--s3); } }

@media (max-width: 640px) {
  thead { position: absolute; left: -9999px; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { border-bottom: 1px solid var(--rule); padding: 6px 0; }
  td { border: 0; padding: 2px 0; white-space: normal !important; }
  td::before { content: attr(data-l) ": "; color: var(--faint); font-size: .75rem; }
  td.prod::before { content: none; }
  td.prod { font-weight: 700; }
}

/* Precios hoy: lista sin contenedor, filetes entre filas. Todas las filas usan la MISMA grilla
   (punto | nombre | precio | variación | fecha), así en dos columnas las posiciones coinciden. */
.hoy-nota { margin: 0; font-size: .82rem; color: var(--faint); }
#verif:not(:empty)::after { content: " · "; }
.hoy-nd { color: var(--muted); margin: var(--s2) 0; }
.hoy-pie { margin: var(--s2) 0 0; font-size: .82rem; }
.lista-hoy { --cols: 12px minmax(0, 1fr) 6.6rem 4.6rem 6.2rem; border-top: 1px solid var(--text); }
@media (min-width: 1000px) {
  .lista-hoy { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); align-items: start; }
}
.fila {
  align-content: start;
  font: inherit; color: var(--text); text-align: left; cursor: pointer; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--grid); padding: var(--s2) 0; min-width: 0;
  display: grid; align-items: baseline; column-gap: var(--s3); grid-template-columns: var(--cols);
}
.fila:hover .f-nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.f-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tc); align-self: start; margin-top: calc(.75em - 5px); }
.f-nom { font-weight: 600; min-width: 0; }
.f-precio { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* unidad con ancho fijo: las cifras quedan alineadas aunque sea /L o /kg */
.f-precio small { display: inline-block; width: 1.9em; text-align: left; font-weight: 500; color: var(--faint); font-size: .78em; }
.f-precio .f-alt { display: block; font-weight: 500; font-size: .78rem; color: var(--faint); }
.f-cambio { justify-self: start; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1.5; padding: 0 7px; border-radius: 999px; white-space: nowrap; }
.pill.sube { background: var(--sube-bg); color: var(--sube-tx); }
.pill.baja { background: var(--baja-bg); color: var(--baja-tx); }
.f-meta { font-size: .78rem; line-height: 1.4; color: var(--faint); min-width: 0; font-variant-numeric: tabular-nums; }
.f-pc { font-variant-caps: all-small-caps; letter-spacing: .05em; font-size: .86rem; color: var(--faint); font-weight: 500; }
/* celular: precio a la derecha del nombre; variación y fecha en una segunda línea */
@media (max-width: 560px) {
  .lista-hoy { --cols: 12px auto minmax(0, 1fr) auto; }
  .fila { grid-template-areas: "d n n p" ". c m m"; row-gap: 2px; column-gap: var(--s2); padding: var(--s2) 0; }
  .f-dot { grid-area: d; } .f-nom { grid-area: n; } .f-precio { grid-area: p; }
  .f-cambio { grid-area: c; } .f-meta { grid-area: m; }
  #historico .sec-cab { flex-wrap: wrap; }
  .frescura { white-space: normal; }
}

/* tabla de datos completa */
.tb-filtros { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-bottom: var(--s2); font-size: .86rem; }
.tb-filtros label { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.tb-filtros select { font: inherit; padding: var(--s1) 6px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 6px; max-width: 100%; }
.tb-cuenta { color: var(--faint); }
.tabla-wrap { max-height: 70vh; overflow: auto; border-top: 1px solid var(--rule); }
.tabla-wrap thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }

/* Modo imagen para compartir (?og=1): 1200×630, solo título y gráfico. Lo captura etl/og_image.py. */
.modo-og body { width: 1200px; height: 630px; overflow: hidden; }
.modo-og .cab { max-width: none; padding: var(--s4) var(--s5) 0; }
.modo-og h1 { max-width: none; font-size: 30px; }
.modo-og .btn-tema, .modo-og #hoy, .modo-og .sec-cab, .modo-og .tabs, .modo-og .controles, .modo-og .chips,
.modo-og .nota-eje, .modo-og .leyenda, .modo-og .bloque, .modo-og #metodologia, .modo-og .pie { display: none !important; }
.modo-og main { max-width: none; padding: 0 var(--s5); }
.modo-og .seccion { margin-top: var(--s2); }
.modo-og .og-fuente { display: block; font-size: 14px; color: var(--faint); margin: 6px 0 0; }
.og-fuente { display: none; }
#metodologia { scroll-margin-top: var(--s3); }

/* Navegación temporal: variación del período en las etiquetas finales y navegador bajo el gráfico */
.chart .lbl-var { font-weight: 600; }
.chart .lbl-var.sube { fill: var(--sube); }
.chart .lbl-var.baja { fill: var(--baja); }
.chart .lbl-var.igual, .chart .lbl-sep { fill: var(--faint); }
.var-p { font-weight: 600; font-size: .92em; white-space: nowrap; }
.var-p.sube { color: var(--sube); } .var-p.baja { color: var(--baja); } .var-p.igual { color: var(--faint); }
.arrastrando, .arrastrando * { cursor: grabbing !important; user-select: none; }

.nav-t { margin-top: var(--s3); }
.nav-mini { position: relative; height: 76px; touch-action: pan-y; cursor: pointer; }
.nav-mini::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; border: 1px solid var(--rule); border-radius: 6px; pointer-events: none; }
.nav-mini .nav-tick { stroke: var(--axis); }
.nav-mini svg { display: block; }
.nav-mini .nav-anio { fill: var(--faint); font-size: 10px; font-family: inherit; }
.nav-mini .nav-rot { fill: var(--muted); font-size: 10.5px; font-weight: 600; font-family: inherit; }
.nav-sombra { position: absolute; top: 0; height: 60px; left: 0; width: 0; background: color-mix(in srgb, var(--text) 9%, transparent); pointer-events: none; }
.nav-ventana {
  position: absolute; top: 0; height: 60px; left: 0; width: 100%; cursor: grab; touch-action: none;
  border: 1.5px solid var(--muted); border-radius: 4px; background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.nav-ventana:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* manijas de 8 px con contraste (tinta del tema sobre el fondo), con área táctil más ancha */
.nav-h { position: absolute; top: 50%; width: 8px; height: 30px; margin-top: -15px; cursor: ew-resize; touch-action: none;
  background: var(--text); border: 1.5px solid var(--bg); border-radius: 3px; box-sizing: content-box; }
.nav-h::before { content: ""; position: absolute; left: -8px; right: -8px; top: -6px; bottom: -6px; }
.nav-h-a { left: -6px; } .nav-h-b { right: -6px; }
.nav-fechas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s2); font-size: .82rem; color: var(--muted); }
.nav-fechas label { display: inline-flex; align-items: center; gap: 6px; }
.nav-fechas input { font: inherit; font-size: .82rem; padding: 2px 6px; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 6px; }
.nav-ayuda { flex: 1 1 260px; font-size: .75rem; color: var(--faint); }
.modo-og .nav-t { display: none !important; }

/* Tooltip compacto: una línea con producto y precio, otra chica con fecha y vigencia */
.tt-c { padding: 6px 10px; max-width: min(280px, calc(100% - 8px)); }
.tt-l1 { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.tt-l1 .tt-f { color: var(--faint); font-size: .9em; }
.tt-l2 { font-size: .74rem; color: var(--faint); margin-top: 2px; }
.tt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: 6px; vertical-align: middle; }
.tt-l1 .tt-dot { margin-right: 0; }
.tt-ver { margin-top: 6px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tt-det { width: 300px; padding-right: 26px; overflow: auto; }
.tt-det h3 { display: flex; align-items: center; }
.chart .lbl-fecha { fill: var(--muted); font-weight: 700; }
.finales .fin-fecha { flex-basis: 100%; font-weight: 700; color: var(--muted); font-size: .78rem; }
.chart svg:focus { outline: none; }
.chart svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* el anillo de foco aparece solo navegando con teclado: un click (que enfoca el control) no lo muestra, en ningún grupo */
.con-puntero :focus-visible, .con-puntero .seg input:focus-visible + span { outline: none !important; }
.seg-off span { opacity: .4; cursor: not-allowed; }
.chart .lbl-con { transition: none; }
.chart .lbl-nota { fill: var(--faint); }
/* en celular los grupos con muchas opciones (Vista, Período) pasan a otra línea en vez de salirse de la pantalla */
.seg-g { flex-wrap: wrap; max-width: 100%; }
.finales li { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.finales li strong, .finales .var-p { white-space: nowrap; }