/* Atestado: panel. Claro y oscuro elegidos a mano (no un volteo automático); los colores de las series están validados
   para daltonismo contra cada superficie. Nada de estilos en línea: la CSP no los deja. */
:root {
  color-scheme: light dark;
  --pagina: #f9f9f7;
  --superficie: #fcfcfb;
  --hundido: #f1f0ec;
  --tinta: #0b0b0b;
  --tinta2: #52514e;
  --tenue: #7a7872;
  --rejilla: #e1e0d9;
  --eje: #c3c2b7;
  --borde: #dddcd4;
  --pista: #ebeae4;
  --resalte: rgba(11, 11, 11, 0.06);
  --enlace: #1c5cab;
  --foco: #2a78d6;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --sx: #a5a39b;
  --bueno: #0a7a0a;
  --bueno-fondo: #e3f3e1;
  --aviso: #8a5a00;
  --aviso-fondo: #fdf0cf;
  --malo: #b42b2b;
  --malo-fondo: #fbe4e1;
  --c1: #cde2fb;
  --c2: #9ec5f4;
  --c3: #6da7ec;
  --c4: #2a78d6;
  --c5: #184f95;
  --c-tinta-fuerte: #ffffff;
  --lado: #151514;
  --lado-tinta: #e9e8e3;
  --lado-tenue: #9a988f;
  --lado-activo: #2b2b29;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pagina: #0d0d0d;
    --superficie: #1a1a19;
    --hundido: #232321;
    --tinta: #f0efec;
    --tinta2: #c3c2b7;
    --tenue: #969489;
    --rejilla: #2c2c2a;
    --eje: #44443f;
    --borde: #30302d;
    --pista: #2a2a28;
    --resalte: rgba(240, 239, 236, 0.08);
    --enlace: #86b6ef;
    --foco: #5598e7;
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --sx: #6b6a63;
    --bueno: #4cc04c;
    --bueno-fondo: #14301a;
    --aviso: #f0b93a;
    --aviso-fondo: #3a2d0c;
    --malo: #f08a80;
    --malo-fondo: #3d1a18;
    --c1: #0d366b;
    --c2: #184f95;
    --c3: #256abf;
    --c4: #3987e5;
    --c5: #86b6ef;
    --c-tinta-fuerte: #0b0b0b;
    --lado: #141413;
    --lado-activo: #2a2a28;
    --sombra: none;
  }
}

* { box-sizing: border-box; }
html { font-size: 13.5px; }
body {
  margin: 0;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--pagina);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
}
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 3px; }
code, pre, .mono { font-family: var(--mono); font-size: 0.92em; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.tenue { color: var(--tenue); }
.nowrap { white-space: nowrap; }
.derecha { margin-left: auto; }
.salto { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: 8px 12px; z-index: 20; }
.salto:focus { left: 8px; top: 8px; }
html.js .sin-js { display: none; }

/* ── menú ── */
.lado {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--lado); color: var(--lado-tinta);
  display: flex; flex-direction: column; padding: 14px 10px 12px;
}
.marca { display: flex; align-items: center; gap: 10px; color: inherit; padding: 2px 8px 14px; }
.marca:hover { text-decoration: none; }
.marca span { display: flex; flex-direction: column; line-height: 1.2; }
.marca b { font-size: 15px; letter-spacing: 0.01em; }
.marca small { color: var(--lado-tenue); font-size: 11.5px; }
.lado nav { display: flex; flex-direction: column; gap: 1px; }
.lado .grupo { color: var(--lado-tenue); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 10px 4px; }
.lado nav a {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--lado-tinta); padding: 6px 10px; border-radius: 6px; font-weight: 500;
}
.lado nav a:hover { background: var(--lado-activo); text-decoration: none; }
.lado nav a.activo { background: var(--lado-activo); color: #fff; box-shadow: inset 3px 0 0 var(--s1); }
.globo { background: #fab219; color: #1a1300; border-radius: 9px; font-size: 11px; font-weight: 700; padding: 0 6px; min-width: 18px; text-align: center; }
.quien { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid #2c2c2a; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.quien .tenue { color: var(--lado-tenue); }
.quien .enlace { color: var(--lado-tinta); }

/* ── cabecera y filtros ── */
main { min-width: 0; }
.cima {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--pagina); border-bottom: 1px solid var(--borde);
}
.cima h1 { font-size: 18px; font-weight: 650; margin-right: auto; }
.filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filtros label, .comparar label { display: flex; align-items: center; gap: 6px; color: var(--tinta2); font-size: 12.5px; }
select, input[type="text"], input[type="search"], input[type="url"], input[type="password"], textarea {
  font: inherit; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 6px; padding: 5px 8px; min-height: 30px;
}
textarea { width: 100%; resize: vertical; }
.segmentos { display: inline-flex; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; background: var(--superficie); }
.segmentos a { padding: 5px 10px; color: var(--tinta2); border-left: 1px solid var(--borde); font-size: 12.5px; }
.segmentos a:first-child { border-left: 0; }
.segmentos a:hover { background: var(--hundido); text-decoration: none; }
.segmentos a.activo { background: var(--tinta); color: var(--superficie); font-weight: 600; }
.todo-historial { color: var(--tenue); font-size: 12.5px; border: 1px dashed var(--borde); border-radius: 6px; padding: 5px 10px; }
.cuerpo { padding: 18px 24px 48px; display: flex; flex-direction: column; gap: 16px; max-width: 1480px; }

/* ── piezas ── */
.caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px 16px; box-shadow: var(--sombra); min-width: 0; }
.caja > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.caja h2 { font-size: 14px; font-weight: 650; }
.caja h3 { font-size: 12px; font-weight: 650; color: var(--tinta2); text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 6px; }
.caja h3:first-child { margin-top: 0; }
.caja .sub { color: var(--tenue); font-size: 12.5px; }
.caja.sin-relleno { padding: 0; overflow: hidden; }
.caja.sin-relleno > header { padding: 14px 16px 0; }
.caja.sin-relleno .vacio, .caja.sin-relleno .mas { padding: 0 16px 14px; }
.caja.fina { padding-bottom: 12px; }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vacio { color: var(--tenue); padding: 6px 0; }
.mas { color: var(--tenue); font-size: 12.5px; margin-top: 8px; }
.ayuda { color: var(--tenue); font-size: 12px; }
.desliza { overflow-x: auto; }

.teselas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tesela { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; color: inherit; box-shadow: var(--sombra); display: block; }
a.tesela:hover { text-decoration: none; border-color: var(--eje); }
.tesela .rotulo { color: var(--tinta2); font-size: 12.5px; font-weight: 550; }
.tesela .cifra { font-size: 28px; font-weight: 650; line-height: 1.2; margin: 2px 0; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tesela .unidad { font-size: 14px; font-weight: 500; color: var(--tinta2); letter-spacing: 0; }
.tesela .nota { color: var(--tenue); font-size: 12.5px; }
.tend { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta2); }
.tend.malo { color: var(--malo); }
.tend.bueno { color: var(--bueno); }
.icono { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -2px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  border: 1px solid var(--borde); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; color: var(--tinta2); background: var(--superficie);
}
.chip.liso { background: var(--hundido); border-color: transparent; }
.chip.bueno { color: var(--bueno); background: var(--bueno-fondo); border-color: transparent; }
.chip.aviso-chip { color: var(--aviso); background: var(--aviso-fondo); border-color: transparent; font-weight: 600; }
.chip.malo-chip { color: var(--malo); background: var(--malo-fondo); border-color: transparent; font-weight: 600; }
.chip.apagado { color: var(--tenue); }
a.chip:hover { text-decoration: none; border-color: var(--eje); }
.muestra { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.muestra.linea { height: 3px; width: 14px; border-radius: 2px; }
.muestra.s1 { background: var(--s1); } .muestra.s2 { background: var(--s2); } .muestra.s3 { background: var(--s3); } .muestra.s4 { background: var(--s4); } .muestra.sx { background: var(--sx); }

.boton, button.principal {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
  color: var(--tinta); background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; padding: 5px 10px; min-height: 30px;
}
.boton:hover { background: var(--hundido); text-decoration: none; }
.boton.principal, button.principal { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.boton.principal:hover, button.principal:hover { opacity: 0.88; }
button.enlace { font: inherit; background: none; border: 0; padding: 0; color: var(--enlace); cursor: pointer; }
button.enlace:hover { text-decoration: underline; }
button.enlace.peligro { color: var(--malo); }
.aviso { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px; background: var(--aviso-fondo); color: var(--aviso); margin-bottom: 10px; }
.aviso.malo { background: var(--malo-fondo); color: var(--malo); }

/* ── tablas ── */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--tenue); padding: 7px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 7px 10px; border-bottom: 1px solid var(--rejilla); vertical-align: middle; }
.tabla tbody tr:last-child td, .tabla tbody tr:last-child th { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--resalte); }
.caja.sin-relleno .tabla th:first-child, .caja.sin-relleno .tabla td:first-child { padding-left: 16px; }
.caja.sin-relleno .tabla th:last-child, .caja.sin-relleno .tabla td:last-child { padding-right: 16px; }
.tabla .num, .reparto-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .fuerte { font-weight: 650; }
.tabla.estrecha td, .tabla.estrecha th { padding: 3px 10px; }
.tabla tr.apagada td { color: var(--tenue); }
.celda-barra { width: 120px; min-width: 70px; }
.barra { display: block; width: 100%; height: 8px; }
.barra .pista { fill: var(--pista); }
.barra .s1, .reparto .s1, .grafico .s1 { fill: var(--s1); }
.barra .sx, .reparto .sx, .grafico .sx { fill: var(--sx); }
.reparto .s2, .grafico .s2 { fill: var(--s2); }
.reparto .s3, .grafico .s3 { fill: var(--s3); }
.reparto .s4, .grafico .s4 { fill: var(--s4); }
.problema { max-width: 620px; }
.problema .titulo { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.problema .titulo:hover { color: var(--enlace); }
.problema .sub { display: flex; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; gap: 6px; align-items: center; margin-top: 3px; font-size: 12px; min-height: 21px; }
.problema .sub > * { flex: 0 0 auto; }
/* Filas de alto estable: el título en UNA línea (entero en el `title`) y la línea de etiquetas siempre presente. */
td.problema .titulo { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.problema .sub code { color: var(--tinta2); overflow-wrap: anywhere; }
.acciones-fila form { display: flex; gap: 12px; justify-content: flex-end; }

.tabla.calor td { text-align: right; min-width: 56px; }
.tabla.calor th[scope="row"] { font-size: 12.5px; color: var(--tinta); font-weight: 550; border-bottom: 1px solid var(--rejilla); }
.tabla.calor td { border: 2px solid var(--superficie); border-radius: 5px; }
.calor-1 { background: var(--c1); } .calor-2 { background: var(--c2); } .calor-3 { background: var(--c3); }
.calor-4 { background: var(--c4); color: var(--c-tinta-fuerte); } .calor-5 { background: var(--c5); color: var(--c-tinta-fuerte); }
@media (prefers-color-scheme: dark) { .calor-4 { color: #0b0b0b; } .calor-1, .calor-2, .calor-3 { color: #f0efec; } }

.reparto-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.reparto-tabla td { padding: 3px 0; font-size: 12.5px; }
.reparto-tabla .nombre { width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }
.reparto-tabla .celda-barra { width: 36%; }
.reparto-tabla .num { width: 18%; padding-left: 8px; color: var(--tinta2); }
.reparto-tabla tr.otros .nombre { color: var(--tenue); }

/* ── gráficos ── */
.grafico { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .rejilla { stroke: var(--rejilla); stroke-width: 1; shape-rendering: crispEdges; }
.grafico .base, .chispa .base { stroke: var(--eje); stroke-width: 1; shape-rendering: crispEdges; }
.grafico text { font-size: 11px; fill: var(--tenue); font-variant-numeric: tabular-nums; }
.grafico text.directa { fill: var(--tinta2); font-weight: 600; }
.grafico .linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .linea.s1 { stroke: var(--s1); } .grafico .linea.s2 { stroke: var(--s2); } .grafico .linea.s3 { stroke: var(--s3); } .grafico .linea.s4 { stroke: var(--s4); }
.grafico .punto { stroke: var(--superficie); stroke-width: 2; }
.grafico .diana { fill: transparent; outline: none; }
.grafico .diana:hover, .grafico .diana:focus { fill: var(--resalte); }
.chispa { display: block; }
.chispa rect { fill: var(--s1); }
.reparto { display: block; width: 100%; height: 14px; border-radius: 4px; }
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 0 auto; padding: 0; font-size: 12.5px; color: var(--tinta2); }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda.con-cifras { margin: 10px 0 0; }
.leyenda.con-cifras b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.como-tabla { margin-top: 8px; font-size: 12.5px; }
.como-tabla summary, .plegable > summary { cursor: pointer; color: var(--tinta2); }
.como-tabla table { margin-top: 6px; max-width: 560px; }
#tip {
  position: fixed; z-index: 50; pointer-events: none; max-width: 340px;
  background: var(--tinta); color: var(--superficie); border-radius: 6px; padding: 7px 10px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); font-variant-numeric: tabular-nums;
}
#tip .t { font-weight: 650; margin-bottom: 2px; }

/* ── listas de problemas ── */
.barra-lista { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pestanas { display: inline-flex; gap: 2px; background: var(--hundido); border-radius: 8px; padding: 3px; }
.pestanas a { padding: 4px 10px; border-radius: 6px; color: var(--tinta2); font-weight: 550; font-size: 12.5px; }
.pestanas a:hover { text-decoration: none; color: var(--tinta); }
.pestanas a.activo { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.cuenta { color: var(--tenue); font-variant-numeric: tabular-nums; font-weight: 500; }
.busca input { width: 280px; }
.orden { display: flex; gap: 10px; align-items: center; font-size: 12.5px; margin-left: auto; flex-wrap: wrap; }
.orden a { color: var(--tinta2); }
.orden a.activo { color: var(--tinta); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ── detalle ── */
.cabecera-grupo { display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.titulo-grupo { font-size: 17px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.culpable code { color: var(--tinta2); overflow-wrap: anywhere; }
.resumen-grupo { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--tinta2); align-items: center; }
.resumen-grupo b { color: var(--tinta); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detalle { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.columna, .lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.datos dt { color: var(--tenue); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.datos.en-linea { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 10px; }
.datos.en-linea div { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.enlace-fuera { overflow-wrap: anywhere; margin-top: 8px; }
.dos-lineas span { display: block; font-size: 12px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.graficos { gap: 28px; }
.pila { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rejilla); border-radius: 8px; overflow: hidden; }
.pila li { display: grid; grid-template-columns: 28px minmax(0, 1fr) fit-content(48%); gap: 2px 10px; padding: 5px 10px; border-bottom: 1px solid var(--rejilla); font-family: var(--mono); font-size: 12px; }
.pila li:last-child { border-bottom: 0; }
.pila li:first-child { background: var(--hundido); }
.pila .n { color: var(--tenue); text-align: right; }
.pila .donde { overflow-wrap: anywhere; }
.pila .funcion { font-weight: 600; }
.pila .archivo { color: var(--tinta2); }
.pila .modulo { color: var(--tinta2); text-align: right; overflow-wrap: anywhere; }
.pila .modulo .dudoso { white-space: nowrap; }
.pila .ctx { grid-column: 2 / 4; color: var(--tinta2); background: var(--hundido); border-radius: 4px; padding: 2px 6px; overflow-wrap: anywhere; }
.pila li.flojo .donde { color: var(--tenue); }
.plegable { margin-top: 10px; }
.plegable > summary { font-weight: 550; font-size: 12.5px; padding: 2px 0; }
.plegable.dentro { margin: 6px 0 2px 0; }
.plegable.sesion { border-top: 1px solid var(--rejilla); padding-top: 10px; }
.plegable.sesion:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.plegable.sesion > summary { font-size: 13px; margin-bottom: 8px; }
.lista-mono { font-family: var(--mono); font-size: 12px; margin: 6px 0 0; padding-left: 18px; }
.excepcion { margin: 0 0 8px; overflow-wrap: anywhere; }
.registro { margin: 6px 0 0; padding: 8px 10px; background: var(--hundido); border-radius: 6px; font-size: 11.5px; line-height: 1.5; overflow-x: auto; max-height: 340px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tiempo { list-style: none; margin: 0; padding: 0; }
.tiempo li { display: grid; grid-template-columns: 62px 86px minmax(0, 1fr); gap: 10px; padding: 4px 6px; border-left: 3px solid var(--rejilla); align-items: baseline; }
.tiempo li + li { margin-top: 1px; }
.tiempo time { color: var(--tenue); font-variant-numeric: tabular-nums; font-size: 12px; }
.tiempo .tipo { font-size: 11.5px; color: var(--tinta2); }
.tiempo .que { overflow-wrap: anywhere; min-width: 0; }
.tiempo li.m-crash { border-left-color: var(--s1); } .tiempo li.m-error { border-left-color: var(--s2); } .tiempo li.m-cierre { border-left-color: var(--s3); }
.tiempo li.m-crash .tipo, .tiempo li.m-cierre .tipo, .tiempo li.m-error .tipo { font-weight: 650; color: var(--tinta); }
.tiempo li.este { background: var(--resalte); border-radius: 0 6px 6px 0; }
.gestion { display: flex; flex-direction: column; gap: 6px; }
.gestion + .gestion { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rejilla); }
.gestion label { font-size: 12px; color: var(--tinta2); margin-top: 4px; }
.gestion input, .gestion select { width: 100%; }
.gestion .junto { display: flex; gap: 6px; }
.gestion .boton { align-self: flex-start; }
.adjuntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

/* ── comentarios ── */
.comentarios { display: flex; flex-direction: column; gap: 10px; max-width: 1080px; }
.comentario { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 8px 18px; box-shadow: var(--sombra); }
.comentario header { grid-column: 1 / 3; }
.comentario .lo-dicho { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.comentario header { display: flex; gap: 8px; align-items: center; font-size: 12.5px; flex-wrap: wrap; }
.comentario .texto { font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.comentario .contexto { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--tinta2); font-size: 12px; }
.acciones-comentario { display: flex; gap: 6px; flex-wrap: wrap; align-content: flex-start; border-left: 1px solid var(--rejilla); padding-left: 16px; }
.acciones-comentario input[type="url"] { flex: 1 1 100%; min-width: 0; }

/* ── ajustes ── */
.en-linea { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rejilla); }
.en-linea label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--tinta2); }
.en-linea fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 10px; align-items: center; }
.en-linea legend { font-size: 12px; color: var(--tinta2); padding: 0; margin-bottom: 3px; }
.en-linea .casilla { flex-direction: row; align-items: center; gap: 4px; color: var(--tinta); }
.secreto { border-color: var(--s1); }
code.grande { font-size: 14px; background: var(--hundido); padding: 5px 9px; border-radius: 6px; overflow-wrap: anywhere; }
.comparar { display: flex; gap: 10px; align-items: center; margin-left: auto; }

/* ── entrada y errores ── */
body.entrada { display: grid; grid-template-columns: 1fr; place-items: center; padding: 24px; }
.tarjeta-entrada { width: 100%; max-width: 360px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 26px 26px 20px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); }
.tarjeta-entrada .marca { color: var(--tinta); padding: 0 0 18px; }
.tarjeta-entrada .marca small { color: var(--tenue); }
.tarjeta-entrada form { display: flex; flex-direction: column; gap: 6px; }
.tarjeta-entrada label { font-size: 12.5px; color: var(--tinta2); margin-top: 6px; }
.tarjeta-entrada input { min-height: 36px; }
.tarjeta-entrada button { justify-content: center; min-height: 38px; margin-top: 14px; font-size: 14px; }
.tarjeta-entrada .pie { margin-top: 16px; font-size: 12px; }
.tarjeta-entrada .codigo { font-size: 44px; font-weight: 700; color: var(--tenue); line-height: 1; }
.tarjeta-entrada h1 { font-size: 18px; margin: 8px 0; }
.tarjeta-entrada p + p { margin-top: 8px; }

@media (max-width: 1100px) {
  .dos, .tres, .detalle, .comentario { grid-template-columns: minmax(0, 1fr); }
  .comentario header { grid-column: 1; }
}
@media (max-width: 760px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .lado { position: static; height: auto; }
  .cima { position: static; padding: 10px 14px; }
  .cuerpo { padding: 14px; }
}
@media (forced-colors: active) {
  .muestra, .barra rect, .grafico rect, .grafico path { forced-color-adjust: none; }
}

/* ══ Ronda 2 ══ */
/* Paletas FIJAS: cada color significa una sola cosa en todo el panel.
   · tipo de informe: fallo (rojo), error (naranja), cierre sucio (violeta), nota (gris)
   · build: una rampa de un solo tono; la más nueva (bn0) es la más marcada
   · culpa: juego (turquesa), motor (ocre), driver (magenta), sistema (pizarra), terceros (marrón) */
:root {
  --t-fallo: #c8372d; --t-error: #dd7a16; --t-cierre: #7a55c7; --t-nota: #9a988f;
  --bn0: #123f80; --bn1: #2f72c9; --bn2: #74a8e8; --bn3: #a9c9f1; --bn4: #cfdff5;
  --k-juego: #0f8f8c; --k-motor: #a98200; --k-driver: #c2408c; --k-sistema: #5d6b82; --k-tercero: #8c5a3a;
  --lado-borde: #2c2c2a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --t-fallo: #ec6a5e; --t-error: #e8963c; --t-cierre: #a58bea; --t-nota: #7f7d75;
    --bn0: #b9d6fa; --bn1: #6fa9ee; --bn2: #3b7fd6; --bn3: #2a5ea6; --bn4: #213f6b;
    --k-juego: #2fb8b3; --k-motor: #d0a82a; --k-driver: #e06aae; --k-sistema: #8d9bb3; --k-tercero: #b98562;
    /* Menú, fondo y tarjetas distinguibles: tres pasos de claridad y borde visible. */
    --pagina: #101010; --superficie: #1c1c1b; --hundido: #262624; --borde: #3a3a36; --rejilla: #30302d;
    --lado: #060606; --lado-activo: #262624; --lado-borde: #2e2e2b;
  }
}
.t-fallo { --col: var(--t-fallo); } .t-error { --col: var(--t-error); } .t-cierre { --col: var(--t-cierre); } .t-nota { --col: var(--t-nota); }
.bn0 { --col: var(--bn0); } .bn1 { --col: var(--bn1); } .bn2 { --col: var(--bn2); } .bn3 { --col: var(--bn3); } .bn4 { --col: var(--bn4); }
.k-juego { --col: var(--k-juego); } .k-motor { --col: var(--k-motor); } .k-driver { --col: var(--k-driver); } .k-sistema { --col: var(--k-sistema); } .k-tercero { --col: var(--k-tercero); }
.c-pso { --col: #7a55c7; } .c-carga { --col: #2f72c9; } .c-cpu { --col: #dd7a16; } .c-gpu { --col: #0f8f8c; } .c-fisica { --col: #a98200; } .c-desconocida { --col: var(--sx); }
.sx { --col: var(--sx); } .s1 { --col: var(--s1); }
.muestra[class*="t-"], .muestra[class*="bn"], .muestra[class*="k-"], .muestra[class*="c-"] { background: var(--col); }
.barra rect:not(.pista), .reparto rect, .grafico rect:not(.diana):not(.a-medias), .grafico path, .apilada rect { fill: var(--col, var(--s1)); }
.grafico .linea { stroke: var(--col, var(--s1)); fill: none; }
.grafico .punto { fill: var(--col, var(--s1)); }
.lado { border-right: 1px solid var(--lado-borde); }

/* Gráficos: marcas de publicación, referencias y tramo sin terminar. */
.grafico .marca { stroke: var(--tinta2); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico text.marca { fill: var(--tinta2); font-weight: 600; stroke: none; }
.grafico .referencia { stroke: var(--malo); stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.7; }
.grafico text.referencia { fill: var(--malo); stroke: none; opacity: 1; }
.grafico .a-medias { fill: var(--resalte); }
.grafico text.unidad { fill: var(--tenue); }

/* Franja de arriba: juego, estado de la entrada y hora de los datos. */
.franja {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 5px 24px; font-size: 12.5px; color: var(--tinta2);
  background: var(--hundido); border-bottom: 1px solid var(--borde);
}
.franja .juego, .franja .juego label { display: inline-flex; align-items: center; gap: 6px; }
.franja select { min-height: 26px; padding: 2px 6px; font-weight: 600; }
.franja .entrada-estado { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.franja .entrada-estado .icono { color: var(--bueno); }
.franja .actualizado { margin-left: auto; color: var(--tenue); font-variant-numeric: tabular-nums; }
.franja.ambar { background: var(--aviso-fondo); color: var(--aviso); border-bottom-color: var(--aviso); }
.franja.roja { background: var(--malo-fondo); color: var(--malo); border-bottom-color: var(--malo); }
.franja.ambar .entrada-estado .icono, .franja.roja .entrada-estado .icono, .franja.ambar .tenue, .franja.roja .tenue, .franja.ambar .actualizado, .franja.roja .actualizado { color: inherit; }
.globo.rojo { background: var(--t-fallo); color: #fff; font-weight: 650; white-space: nowrap; }

/* Portada. */
.tesela.alarma { border-color: var(--t-fallo); box-shadow: inset 3px 0 0 var(--t-fallo); }
.tesela.alarma .cifra { color: var(--malo); }
.tesela .cifra .unidad { font-size: 13px; }
.pie-teselas { color: var(--tenue); font-size: 12px; margin-top: -8px; }
.tabla tfoot td { font-weight: 650; border-top: 1px solid var(--borde); border-bottom: 0; }
.tabla.pega td { height: 52px; }
.tabla tr.urgente td:first-child { box-shadow: inset 3px 0 0 var(--t-fallo); }
.chip.tipo { color: #fff; background: var(--col); border-color: transparent; font-weight: 600; }
@media (prefers-color-scheme: dark) { .chip.tipo { color: #0b0b0b; } }

/* Lista: pestañas pequeñas del filtro de culpa. */
.pestanas.pequenas a { padding: 3px 9px; font-size: 12.5px; }
/* «A quién le pasa»: barra del problema con la raya de la población. */
.a-quien .hallazgo { font-weight: 650; margin: 0 0 6px; line-height: 1.4; overflow-wrap: anywhere; }
.a-quien .ayuda { margin: 0 0 4px; }
.a-quien .raya { display: inline-block; width: 2px; height: 11px; background: var(--tinta); vertical-align: -2px; margin: 0 2px; }
.barra .poblacion { stroke: var(--tinta); stroke-width: 2; }
.reparto-tabla td.nombre { white-space: normal; overflow-wrap: anywhere; max-width: 170px; }
.reparto-tabla tr.destaca td.nombre { font-weight: 650; }
.reparto-tabla td.veces { color: var(--malo); white-space: nowrap; padding-left: 6px; min-width: 40px; text-align: right; }
.reparto-tabla td.veces:not(:has(b)) { color: var(--tinta2); }

/* Detalle: volver, identificadores enteros, diagnóstico del registro, el fallo como fila más visible. */
.volver { margin: 0 0 6px; font-size: 12.5px; }
.titulo-grupo, .culpable code, .problema .titulo, .pila code { overflow-wrap: break-word; word-break: normal; }
.diagnostico { margin: 6px 0 2px; padding: 6px 9px; border-radius: 6px; background: var(--malo-fondo); color: var(--malo); display: flex; gap: 7px; align-items: baseline; }
.diagnostico code { color: inherit; font-weight: 650; overflow-wrap: anywhere; }
pre.registro .resalta { background: var(--malo-fondo); color: var(--malo); font-weight: 650; }
.tiempo li.m-crash, .tiempo li.m-cierre { border-left-width: 5px; padding-top: 7px; padding-bottom: 7px; background: var(--malo-fondo); border-radius: 0 6px 6px 0; }
.tiempo li.m-crash { border-left-color: var(--t-fallo); } .tiempo li.m-error { border-left-color: var(--t-error); } .tiempo li.m-cierre { border-left-color: var(--t-cierre); }
.tiempo li.m-crash .que > a, .tiempo li.m-cierre .que > a { font-weight: 650; }
.tiempo li.este { outline: 2px solid var(--tinta2); outline-offset: -1px; }
.reparto-tabla .nombre { width: 42%; } .reparto-tabla .celda-barra { width: 28%; } .reparto-tabla .num { width: 15%; } .reparto-tabla .veces { width: 15%; }

/* Rendimiento: umbrales con color, muestra pequeña atenuada, barras apiladas por causa. */
.tabla td.avisa { color: var(--aviso); background: var(--aviso-fondo); }
.tabla td.mal { color: var(--malo); background: var(--malo-fondo); font-weight: 650; }
.tabla tr.poca td { color: var(--tenue); }
.tabla tr.poca td.fuerte { font-weight: 400; }
.veces { color: var(--malo); }
.apilada { display: block; }
.apiladas .nombre { width: 34%; } .apiladas .celda-barra { width: 50%; } .apiladas .num { width: 16%; }
.concentra .tabla td { height: 38px; }
.estrecha { max-width: 420px; }

/* Bandeja de comentarios: filas de una o dos líneas, acciones al pasar o enfocar, selección múltiple. */
.ultimas .datos.en-linea dd { font-size: 12.5px; }
.barra-marcados { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--superficie); z-index: 2; border-radius: 10px 10px 0 0; }
.barra-marcados .teclas { font-size: 12px; }
html:not(.js) .barra-marcados .teclas { display: none; }
.bandeja td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
.bandeja th.marca, .bandeja td.marca { width: 30px; padding-right: 0; }
.bandeja .dicho { min-width: 300px; max-width: 520px; }
.bandeja .dicho p { margin: 0; }
.bandeja .dicho .texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.4; }
.bandeja .dicho .traduccion { color: var(--tinta2); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.bandeja .dicho .pegado { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.bandeja tr:focus { outline: 2px solid var(--enlace); outline-offset: -2px; }
.bandeja .enlace-tarea { margin-top: 4px; font-size: 12px; }
.bandeja .enlace-tarea > summary { color: var(--tinta2); cursor: pointer; width: fit-content; opacity: 0.45; }
.bandeja tr:hover .enlace-tarea > summary, .bandeja tr:focus-within .enlace-tarea > summary, .bandeja .enlace-tarea[open] > summary { opacity: 1; }
.bandeja .enlace-tarea .linea-enlace { display: flex; gap: 6px; margin-top: 4px; }
.bandeja .enlace-tarea input[type="url"] { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 3px 6px; }
.bandeja tr:focus .texto, .bandeja tr:hover .texto { -webkit-line-clamp: 8; }
.bandeja .acciones-fila { opacity: 0.25; text-align: right; }
.bandeja tr:hover .acciones-fila, .bandeja tr:focus-within .acciones-fila, .bandeja tr:focus .acciones-fila { opacity: 1; }
.boton.mini { min-height: 24px; padding: 1px 8px; font-size: 12px; font-weight: 650; }
.miniatura { display: inline-block; vertical-align: middle; margin-right: 8px; }
.miniatura img { display: block; border-radius: 4px; border: 1px solid var(--borde); object-fit: cover; }
details.cortos { margin: 0; padding: 0 0 6px; }
details.cortos > summary { padding: 10px 16px; color: var(--tinta2); }
form.caja { display: block; }
.bandeja { table-layout: auto; }
.bandeja .dicho { min-width: 240px; max-width: none; width: 46%; }
.bandeja td.grafica { white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.bandeja th, .bandeja td { padding-left: 8px; padding-right: 8px; }
.bandeja .acciones-fila { padding-right: 12px; }
.tabla.rend th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.dos .tabla.rend .celda-barra { width: 70px; min-width: 50px; }
.dos .tabla.rend th, .dos .tabla.rend td { padding-left: 7px; padding-right: 7px; }
.tabla.compacta th, .tabla.compacta td { padding-left: 6px; padding-right: 6px; }
.tabla.compacta th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.tabla.compacta .celda-barra { width: 56px; min-width: 40px; }
.bandeja .dicho { width: auto; min-width: 200px; }
.bandeja .dicho .pegado * { white-space: normal; overflow-wrap: anywhere; }
.bandeja td.nowrap:nth-child(7) { white-space: normal; }