/* TradeAdvisor — hoja de estilo única.
 *
 * Los valores salen del brand kit de montedacosta.com v1.0 (handoff de diseño,
 * 11-ago-2026). Se declaran como variables y NO se repiten literales por el
 * fichero: un hex suelto es como un color se queda fuera del sistema.
 *
 * Reglas del kit que aquí son estructura, no gusto:
 *  - Sin animaciones, sin sombras, sin degradados. Es un instrumento de medida.
 *  - El oro es acento único: si ocupa más de una décima parte de la pantalla,
 *    algo se ha hecho mal.
 *  - TODAS las cifras van en mono con tabular-nums y alineadas a la derecha, o
 *    las columnas dejan de comparar.
 *  - Los colores semánticos base (rojo/naranja) sólo alcanzan AA en cifras
 *    grandes: por debajo de 24px se usan las variantes claras. Por eso hay dos
 *    de cada y no una.
 */

:root {
  /* Neutros */
  --ink: #0a0a0b;
  --card: #16171a;
  --alt: #1b1c20;
  --line: #232429;
  --muted: #8c8d93;
  --ivory: #f5f4f1;
  --off: #4a4b50;
  --off-2: #3a3b40;

  /* Oro: acento único */
  --gold: #c9a227;
  --gold-l: #e3c567;
  --gold-m: #7a6420;
  --veil: #1e1a0e;

  /* Semánticos */
  --fav: #5fa57c;
  --unfav: #c0564b;
  --unfav-l: #db7a6d;
  --infeas: #b4552f;
  --infeas-l: #d98551;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --serif: Newsreader, Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-m); }
a:hover { color: var(--gold-l); border-bottom-color: var(--gold); }
input, select, button { font-family: inherit; }
select option { background: var(--card); color: var(--ivory); }
::selection { background: var(--gold-m); color: var(--ivory); }

/* Cifras: una sola regla para toda la aplicación. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.versal {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------- */
/* Armazón                                                                */
/* --------------------------------------------------------------------- */

/* Una sola columna: la navegación es una fila bajo el header, no una lateral.
   Sigue siendo rejilla con `minmax(0, 1fr)` --y no un `display: block`-- porque
   eso es lo que impide que las tablas anchas empujen la página entera: la
   rejilla de diferenciales declara `min-width: 940px` y la del comparador
   1100 px, y su scroll horizontal tiene que quedarse DENTRO de su caja. */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }

header.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 20px; height: 56px;
  border-bottom: 1px solid var(--line); background: var(--ink);
  position: sticky; top: 0; z-index: 20;
  grid-column: 1 / -1;
}

/* Isotipo: el delta cortado por una línea = el precio de indiferencia.
   No rotar, no redondear, no separar la línea del glifo. */
.iso { position: relative; width: 26px; height: 26px; display: flex; align-items: flex-end; justify-content: center; }
.iso span.glifo { font-family: var(--serif); font-size: 25px; line-height: 0.95; color: var(--gold); }
.iso span.corte { position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--ink); border-top: 2px solid var(--gold); }

.marca { display: flex; align-items: center; gap: 14px; }
.marca .nombre { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.marca .sub { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sep { width: 1px; height: 24px; background: var(--line); }

.acciones { display: flex; align-items: center; gap: 10px; }
.btn {
  height: 28px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 2px; background: transparent;
  color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
}
.btn:hover:not(:disabled) { color: var(--gold-l); border-color: var(--gold-m); }
.btn:disabled { color: var(--off); cursor: default; }
.btn.activo { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.segmentado { display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.segmentado .btn { border: 0; border-radius: 0; }

/* Las cinco vistas en una fila propia bajo el header. Sustituye a una lateral de
   196 px de ancho fijo: la tabla de diferenciales ES el producto --su rejilla
   pide 940 px y la del comparador 1100-- y una columna de navegación se comía
   ese ancho en todas las pantallas para enseñar cinco enlaces.
   Sigue pegada bajo el header (`top: 56px`, su altura exacta) con z-index por
   debajo del suyo: cambiar de vista no puede obligar a volver arriba. */
nav.navbar {
  position: sticky; top: 56px; z-index: 19;
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px;
  padding: 0 20px; min-height: 40px;
  border-bottom: 1px solid var(--line); background: var(--ink);
}
nav.navbar button {
  display: flex; align-items: center; gap: 8px;
  /* Alto propio (39 px = los 40 de la barra menos su borde) y no heredado del
     contenedor: sin él las pestañas sólo medían lo que su texto, y al envolverse
     en dos filas --medido a 560 px-- las dos se repartían los 40 px del
     `min-height` y quedaban en 18 px cada una. */
  min-height: 39px; padding: 0 12px; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 0; border-bottom: 2px solid transparent;
}
nav.navbar button:hover { color: var(--ivory); }
/* El activo se marca por DEBAJO y no a la izquierda: en una fila horizontal el
   subrayado es lo que ata la pestaña al contenido que hay bajo ella. */
nav.navbar button[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--gold); }
nav.navbar button .tecla { font-family: var(--mono); font-size: 10px; color: var(--muted); }
/* El estado del pliego, empujado a la derecha. Es lo que queda del bloque
   «Escenario» de la lateral, y se conserva porque el aviso de tanteo sin
   guardar no puede perderse al cambiar de armazón: distingue una cifra
   publicable de un «qué pasaría si». */
nav.navbar .escenario {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}

.contexto {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  padding: 10px 24px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.contexto .dato { color: var(--ivory); }
.contexto .piezas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contexto .piezas .sep { height: 12px; }
.estado-motor { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.cuadro { width: 6px; height: 6px; flex: none; }

main { padding: 26px 24px 0; min-width: 0; }

footer.pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 12px 24px; margin-top: 26px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
footer.pie .atajos { display: flex; flex-wrap: wrap; gap: 18px; }

/* --------------------------------------------------------------------- */
/* Cabecera de vista                                                      */
/* --------------------------------------------------------------------- */

.cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
h1 { font-family: var(--serif); font-weight: 300; font-size: 31px; letter-spacing: -0.02em; margin: 0 0 8px; }
.entradilla { font-size: 13px; color: var(--muted); line-height: 1.6; text-wrap: pretty; max-width: 620px; margin: 0; }
.chip { border: 1px solid var(--line); border-radius: 2px; padding: 5px 10px; font-size: 12px; }
.chip.oro { color: var(--gold-l); border-color: var(--gold-m); }

/* --------------------------------------------------------------------- */
/* Tablas                                                                 */
/* --------------------------------------------------------------------- */

.tabla { border: 1px solid var(--line); border-radius: 2px; background: var(--card); overflow-x: auto; }
.rejilla { min-width: 940px; }
.fila { display: grid; grid-template-columns: minmax(220px, 2fr) 130px 150px 130px 120px minmax(180px, 1.2fr); border-bottom: 1px solid var(--line); }
.fila > * { padding: 9px 14px; min-width: 0; }
.fila.encabezado { background: var(--ink); border-bottom: 1px solid var(--line); }
.fila.encabezado button {
  width: 100%; background: transparent; border: 0; cursor: pointer; padding: 0;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.fila.encabezado button.activa { color: var(--ivory); }
.fila.encabezado button .flecha { font-family: var(--mono); color: var(--gold); }
.fila.encabezado .der button { justify-content: flex-end; }
.fila:nth-child(odd of .cuerpo) { background: var(--card); }
.fila.par { background: var(--alt); }
.der { text-align: right; }
.celda-nombre { font-size: 14px; display: flex; align-items: baseline; gap: 8px; }
.etq { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.senal { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.nota-fila { font-size: 11px; }
.pie-tabla { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 11px; color: var(--muted); }
.pie-tabla .der { font-family: var(--mono); }
.leyenda { display: flex; flex-wrap: wrap; gap: 22px; font-size: 11px; color: var(--muted); margin-top: 14px; }
.leyenda span { display: flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------------------- */
/* Panel plegable                                                         */
/* --------------------------------------------------------------------- */

.panel { border: 1px solid var(--line); border-radius: 2px; background: var(--card); margin-top: 26px; }
.panel > button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: transparent; border: 0; cursor: pointer; color: var(--ivory); text-align: left;
}
.panel > button .icono { font-family: var(--mono); color: var(--gold); }
.panel > button .titulo { font-size: 13px; }
.panel > button .resumen { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.panel .contenido { border-top: 1px solid var(--line); }
.fila-sombra { display: grid; grid-template-columns: minmax(200px, 1.6fr) 140px 170px; border-bottom: 1px solid var(--line); }
.fila-sombra > * { padding: 8px 16px; }
.fila-sombra .mono { font-family: var(--mono); font-size: 13px; }

/* --------------------------------------------------------------------- */
/* Infactible                                                             */
/* --------------------------------------------------------------------- */

.infactible { border: 1px solid var(--gold-m); background: var(--veil); border-radius: 2px; padding: 22px 24px; max-width: 900px; display: flex; flex-direction: column; gap: 18px; }
.infactible h2 { font-family: var(--serif); font-weight: 300; font-size: 31px; color: var(--infeas-l); margin: 0; }
.infactible .lead { font-size: 15px; line-height: 1.65; margin: 0; }
.culpable { border: 1px solid var(--line); background: var(--ink); padding: 16px 18px; }
.culpable .regla { font-family: var(--mono); font-size: 17px; color: var(--infeas-l); }
.culpable .explica { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.salida { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; }
.salida .btn { border-color: var(--gold-m); color: var(--gold-l); }
.sello { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* --------------------------------------------------------------------- */
/* Comparador                                                             */
/* --------------------------------------------------------------------- */

.lectura-par { border: 1px solid var(--gold-m); background: var(--veil); padding: 22px 24px; display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 32px; margin-bottom: 22px; }
.lectura-par .cifra { font-family: var(--mono); font-size: 49px; line-height: 1; font-weight: 500; }
.lectura-par .unidad { font-size: 14px; color: var(--muted); }
.lectura-par .veredicto { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-top: 14px; }
.lectura-par .veredicto .cuadro { width: 8px; height: 8px; }
.lectura-par .prosa { font-size: 16px; line-height: 1.6; max-width: 62ch; margin: 0; }
.metricas { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 18px; }
.metricas .metrica { padding-right: 24px; border-right: 1px solid var(--line); }
.metricas .metrica:last-child { border-right: 0; }
.metricas .valor { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; }

.matriz-par { border: 1px solid var(--line); background: var(--card); overflow-x: auto; }
.matriz-par .interior { min-width: 1100px; }
.mtx-fila { display: grid; grid-template-columns: 200px repeat(var(--n, 12), minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.mtx-fila > * { padding: 7px 8px; }
.mtx-fila .etiqueta { display: flex; flex-direction: column; gap: 2px; }
.mtx-fila .etiqueta .cod { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.mtx-fila .etiqueta .nom { font-size: 12px; }
.mtx-fila button { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; background: transparent; border: 1px solid transparent; cursor: pointer; padding: 6px 4px; }
.mtx-fila button.diagonal { color: var(--off-2); background: var(--ink); cursor: default; }
.mtx-fila button.sindato { color: var(--muted); cursor: not-allowed; }
.mtx-fila button.activa { border-color: var(--gold); background: var(--veil); }
.mtx-cabecera { font-family: var(--mono); font-size: 11px; text-align: center; }

/* --------------------------------------------------------------------- */
/* Modelo: tres capas                                                     */
/* --------------------------------------------------------------------- */

.capas { display: grid; grid-template-columns: minmax(210px, 0.72fr) minmax(400px, 1.4fr) minmax(360px, 1.32fr); gap: 16px; align-items: start; overflow-x: auto; }
.capa { border: 1px solid var(--line); background: var(--card); border-radius: 2px; min-width: 0; }
.capa.acento { border-color: var(--gold-m); }
.capa > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.capa.acento > header { background: var(--veil); }
.capa > header .titulo { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.capa.acento > header .titulo { color: var(--gold-l); }
.capa > header .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.detalle { background: var(--veil); padding: 16px 14px; border-bottom: 1px solid var(--line); }
.detalle .cifra { font-family: var(--mono); font-size: 31px; }
.detalle .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; }
.detalle .campos .valor { font-family: var(--mono); font-size: 13px; }
.detalle .nota { font-size: 11px; margin-top: 12px; line-height: 1.5; }
.lista button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 7px 12px; background: transparent; border: 0; border-left: 2px solid transparent; cursor: pointer; color: var(--ivory); text-align: left; }
.lista button:hover { background: var(--alt); }
.lista button.par { background: var(--alt); }
.lista button.sel { background: var(--veil); border-left-color: var(--gold); }
.lista .nombre { font-size: 13px; }
.lista .meta { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.capa .pie { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); line-height: 1.5; }

.ingredientes .fila-ing { display: grid; grid-template-columns: minmax(0, 1.5fr) 92px 100px 84px; }
.ingredientes .fila-ing > * { padding: 7px 10px; }

/* Las restricciones NO se esconden en «ajustes avanzados»: son el corazón del
   modelo, aunque ocupen poco. Cuadro discontinuo para que se lean como lo que
   son -- supuestos editables, no datos firmados. */
.restricciones { margin: 12px; border: 1px dashed var(--gold-m); background: var(--ink); }
.restricciones > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.restricciones > header .titulo { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-l); }
.restricciones > header .meta { font-family: var(--mono); font-size: 9px; color: var(--muted); }
.fila-cons { display: grid; grid-template-columns: minmax(0, 1.5fr) 52px 76px 68px; gap: 6px; align-items: center; padding: 5px 10px; border-top: 1px solid var(--line); }
.fila-cons .nombre { font-size: 11px; }
.fila-cons .estado { font-family: var(--mono); font-size: 9px; }
.fila-cons select, .fila-cons input { height: 22px; background: var(--card); color: var(--ivory); border: 1px solid var(--line); border-radius: 2px; padding: 0 5px; font-size: 11px; }
.fila-cons input { font-family: var(--mono); text-align: right; width: 100%; }
.fila-cons .defecto { font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: right; }
.fila-cons.mod { background: var(--alt); }
.fila-cons.mod input { border-color: var(--gold-m); color: var(--gold-l); }
.fila-cons.culpable { background: var(--veil); }
.fila-cons.culpable input { color: var(--infeas-l); }

.ficha-nutriente { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 110px); gap: 10px; align-items: center; padding: 6px 0; }
.ficha-nutriente .k { font-size: 12px; color: var(--muted); }
.ficha-nutriente .v { font-family: var(--mono); font-size: 15px; text-align: right; }
/* Un hueco se dibuja COMO hueco: recuadro discontinuo, nunca un cero. */
.hueco { border: 1px dashed var(--gold-m); color: var(--infeas-l); padding: 2px 6px; text-align: center; font-family: var(--mono); font-size: 12px; }
.tabla-matriz .fila-mtx { display: grid; grid-template-columns: minmax(0, 2.3fr) repeat(var(--nut, 5), minmax(48px, 0.72fr)); }
.tabla-matriz .fila-mtx > * { padding: 6px 8px; }
.tabla-matriz .fila-mtx .celda { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.tabla-matriz .cab { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------- */
/* Móvil (maqueta) y escenarios                                           */
/* --------------------------------------------------------------------- */

.maqueta { width: 390px; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--ink); overflow: hidden; }
.maqueta .barra-m { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.maqueta .fila-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.maqueta .fila-m .nom { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.maqueta .fila-m .sub { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
.maqueta .fila-m .delta { font-family: var(--mono); font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.escenario-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 18px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.escenario-fila .nombre { font-size: 14px; }
.escenario-fila .fecha { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.escenario-fila .detalle { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------------- */
/* Avisos, carga y errores                                                */
/* --------------------------------------------------------------------- */

.aviso { border: 1px solid var(--gold-m); background: var(--veil); padding: 14px 16px; border-radius: 2px; font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
.aviso .titulo { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-l); display: block; margin-bottom: 6px; }
.aviso ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.cargando { padding: 40px 0; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.error { border: 1px solid var(--infeas); background: var(--veil); padding: 18px 20px; border-radius: 2px; }
.error .titulo { color: var(--infeas-l); font-size: 15px; margin-bottom: 8px; }
.error .detalle { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: pre-wrap; line-height: 1.5; }

.acceso { max-width: 460px; margin: 80px auto; border: 1px solid var(--line); background: var(--card); padding: 26px 28px; border-radius: 2px; }
.acceso h1 { font-size: 25px; }
.acceso p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.acceso input { width: 100%; height: 34px; background: var(--ink); color: var(--ivory); border: 1px solid var(--line); border-radius: 2px; padding: 0 10px; font-family: var(--mono); font-size: 13px; margin: 14px 0; }
.acceso .btn { height: 34px; }

.oculto { display: none !important; }

/* La navbar ya no necesita aquí lo que la lateral sí: era una columna que había
   que tumbar a fila por debajo de 900 px, y ahora nace en fila. Sólo se ajusta
   el margen y se suelta el chip, que al envolverse no puede seguir pegado a la
   derecha de una fila que ya no comparte con las pestañas. */
@media (max-width: 900px) {
  nav.navbar { padding: 0 14px; }
  nav.navbar .escenario { margin-left: 0; }
  .lectura-par { grid-template-columns: 1fr; gap: 20px; }
}

/* --------------------------------------------------------------------- */
/* Compactación (2026-08-11): tooltip global, icono ⓘ, chips de aviso     */
/* --------------------------------------------------------------------- */

/* Un único tooltip para toda la aplicación, posicionado por JS: dentro de
   las tablas (overflow-x: auto) un ::after absoluto se recorta, y dos
   mecanismos de hover divergirían a la primera corrección. */
#tooltip {
  position: fixed; z-index: 50; max-width: 380px;
  background: var(--ink); border: 1px solid var(--gold-m); border-radius: 2px;
  padding: 8px 11px; font-size: 12px; line-height: 1.55; color: var(--ivory);
  font-family: var(--sans); white-space: pre-line; pointer-events: none;
  letter-spacing: normal; text-transform: none; text-align: left;
}
[data-info] { cursor: help; }

/* Icono de información: sustituye a las entradillas y a los pies. */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none;
  border: 1px solid var(--gold-m); border-radius: 50%;
  color: var(--gold-l); font-family: var(--serif); font-style: italic;
  font-size: 11px; line-height: 1; vertical-align: 4px; margin-left: 8px;
}
.info:focus-visible { outline: 1px solid var(--gold); }

/* Los avisos del motor, compactados a una fila de chips. El color de aviso
   se conserva: ocupan una línea, no desaparecen. */
.chips-aviso { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip-aviso {
  border: 1px solid var(--gold-m); background: var(--veil); border-radius: 2px;
  padding: 4px 10px; font-size: 11px; color: var(--gold-l);
}
.chip-aviso:focus-visible { outline: 1px solid var(--gold); }

/* --------------------------------------------------------------------- */
/* Menú contextual de fila                                               */
/* --------------------------------------------------------------------- */

/* Menú contextual de fila: un solo menú abierto, posicionado por JS. */
.menu-ctx {
  position: fixed; z-index: 45; min-width: 220px;
  background: var(--card); border: 1px solid var(--gold-m); border-radius: 2px;
  padding: 4px;
}
.menu-ctx button {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  background: transparent; border: 0; color: var(--ivory);
  font-size: 12px; cursor: pointer;
}
.menu-ctx button:hover { background: var(--veil); color: var(--gold-l); }
.btn-menu {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 14px; padding: 0 4px;
}
.btn-menu:hover { color: var(--gold-l); }

/* --------------------------------------------------------------------- */
/* Histórico                                                              */
/* --------------------------------------------------------------------- */

.hist-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.hist-chips .chip { cursor: pointer; background: var(--card); color: var(--muted); }
.hist-chips .chip.oro { color: var(--gold-l); }
.grafica-caja { border: 1px solid var(--line); border-radius: 2px; background: var(--card); }
.grafica-caja svg { display: block; width: 100%; height: auto; }
.grafica-caja .ge { stroke: var(--line); stroke-width: 1; }
.grafica-caja .gt { font-family: var(--mono); font-size: 11px; fill: var(--muted); text-anchor: middle; }
.grafica-caja .gt.der-svg { text-anchor: end; }
.grafica-caja circle:focus-visible { outline: none; stroke: var(--gold); stroke-width: 2; }

.conclusiones { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 2px 2px; background: var(--card); overflow-x: auto; margin-bottom: 18px; }
.ccl-fila { display: grid; grid-template-columns: 180px repeat(var(--m, 8), minmax(56px, 1fr)); border-bottom: 1px solid var(--line); align-items: center; }
.ccl-fila > * { padding: 7px 10px; min-width: 0; }
.ccl-celda { text-align: center; }
.ccl-chip { display: inline-block; min-width: 44px; border: 1px solid var(--line); border-radius: 2px; padding: 2px 6px; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.ccl-chip.hueco-mes { border-style: dashed; color: var(--muted); }