/* PortSync V2.5 · prototipo «4 · Fusión» · pilote.css — Panel: zoom al pilote (forma «Medusa JF-4», letra y colores de
   PortSync). Tablero claro y técnico alrededor del modelo, en una retícula de 12 columnas; tarjetas de vidrio; una sola
   línea de tiempo abajo. Colores: solo tokens (portsync-tokens.css + pilote-tokens.css). Letra: tipografia.css. */

/* Base, barra y pie: comun.css / comun.js (los de todo el prototipo). Aquí solo lo propio del tablero. */
:root { --alto-barra: 64px; --margen: 32px; --canal: 24px; --fila: 12px; }
html { background: var(--bg); color: var(--ink); }
body { background: var(--bg); color: var(--ink); }
main { padding-top: var(--alto-barra); }
:is(.tablero, .detalle) a { color: var(--accent-ink); }
[hidden] { display: none !important; }
.f-rotulo { color: var(--ink-3); }

/* ================= tablero ================= */
.tablero { position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--canal); row-gap: var(--fila);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  /* llena la pantalla; si una columna necesita más (pantallas bajas), el tablero crece en vez de recortar tarjetas */
  height: auto; min-height: max(740px, calc(100svh - var(--alto-barra))); padding: 14px var(--margen) 10px;
  background: radial-gradient(85% 75% at 50% 48%, var(--pl-fondo-1) 0%, var(--pl-fondo-2) 58%, var(--pl-fondo-3) 100%); }
/* retícula visible: una cruz fina en el centro de cada columna, como en una hoja de dibujo. Solo detrás del escenario
   (columnas 4-9, filas del modelo y del registro): así no pasa sobre los textos de la cabecera ni de las tarjetas. */
.tablero::before { content: ''; position: absolute; z-index: 0; grid-column: 4 / 10; grid-row: 2 / 4; top: 0; bottom: 0;
  left: calc(var(--canal) / -2); right: calc(var(--canal) / -2);
  pointer-events: none; opacity: 0.9;
  background-image: linear-gradient(to right, transparent calc(50% - 0.5px), var(--pl-cruz) calc(50% - 0.5px), var(--pl-cruz) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--pl-cruz) calc(50% - 0.5px), var(--pl-cruz) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-size: calc(100% / 6) 72px; background-position: 0 36px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, var(--blanco) 0 5px, transparent 5.5px); mask-image: radial-gradient(circle at 50% 50%, var(--blanco) 0 5px, transparent 5.5px);
  -webkit-mask-size: calc(100% / 6) 72px; mask-size: calc(100% / 6) 72px; -webkit-mask-position: 0 36px; mask-position: 0 36px; }
/* el lienzo cubre todo el tablero (el modelo pasa suave detrás de las tarjetas de vidrio) y se desvanece abajo, antes del
   pie técnico, para que el fondo marino nunca quede bajo esos textos */
.tablero__modelo { position: absolute; inset: 0; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, var(--blanco) calc(100% - 64px), transparent calc(100% - 26px));
  mask-image: linear-gradient(to bottom, var(--blanco) calc(100% - 64px), transparent calc(100% - 26px)); }
.tablero > :not(.tablero__modelo) { position: relative; z-index: 1; min-width: 0; }

/* cabecera: pilote · índice · tiempo, estado y selectores */
.cab--izq { grid-column: 1 / 5; grid-row: 1; }
.cab--centro { grid-column: 5 / 9; grid-row: 1; align-self: start; padding-top: 2px; }
.cab--der { grid-column: 9 / 13; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.volver { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.volver a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); text-decoration: none; font: 500 var(--t-rotulo)/1.3 var(--f-texto); letter-spacing: 0.02em; }
.volver a:hover { text-decoration: underline; text-underline-offset: 3px; }
.volver svg { width: 14px; height: 14px; }
.cab__titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.cab__titulo h1 { margin: 0; font-size: var(--t-h2); display: flex; align-items: baseline; gap: 10px; }
.cab__id { font: 500 var(--t-rotulo)/1 var(--f-texto); letter-spacing: 0.08em; color: var(--ink-3); padding: 5px 8px; border: 1px solid var(--line-strong);
  border-radius: var(--r-xs); font-variant-numeric: tabular-nums; }
.sello { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink);
  font: 600 12px/1 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; }
.sello::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sello--chico { padding: 4px 8px; font-size: 11px; }
.cab__lugar { margin: 4px 0 0; font: 400 var(--t-chico)/1.35 var(--f-texto); color: var(--ink-2); }
.cab__aviso { margin: 4px 0 0; font: 500 12px/1.35 var(--f-texto); color: var(--ink-3); }

.indice__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.indice__valor { margin: 0; font: var(--peso-titulo) var(--t-h2)/1 var(--f-titulo); letter-spacing: var(--tr-titulo); font-variant-numeric: tabular-nums lining-nums; }
.indice__valor small { margin-left: 3px; font: 500 var(--t-chico)/1 var(--f-texto); color: var(--ink-3); letter-spacing: 0; }
.indice__celdas { display: grid; grid-template-columns: repeat(50, minmax(0, 1fr)); gap: 2px; height: 22px; margin-top: 8px; }
.indice__celdas i { background: var(--line-strong); border-radius: 1px; transition: background-color 120ms linear; }
.indice__celdas i.on[data-e="good"] { background: var(--pl-ok-graf); }
.indice__celdas i.on[data-e="warn"] { background: var(--pl-warn-graf); }
.indice__celdas i.on[data-e="crit"] { background: var(--pl-crit-graf); }
.indice__celdas[data-sin="1"] i { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 4px); }
.indice__escala { position: relative; height: 16px; margin-top: 4px; font: 500 12px/1 var(--f-texto); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.indice__escala span { position: absolute; top: 2px; transform: translateX(-50%); }
.indice__escala span:first-child { transform: none; }
.indice__escala span:last-child { transform: translateX(-100%); }
.indice__escala span::before { content: ''; position: absolute; left: 50%; top: -6px; width: 1px; height: 4px; background: var(--ink-4); }
.indice__escala span:first-child::before { left: 0; }
.indice__escala span:last-child::before { left: 100%; }
.indice__leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; padding: 0; font: 500 12px/1.3 var(--f-texto); color: var(--ink-2); }
.indice__leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.indice__leyenda i { width: 8px; height: 8px; border-radius: 2px; }
.indice__leyenda i[data-e="good"] { background: var(--pl-ok-graf); }
.indice__leyenda i[data-e="warn"] { background: var(--pl-warn-graf); }
.indice__leyenda i[data-e="crit"] { background: var(--pl-crit-graf); }

.meta { display: grid; grid-template-columns: repeat(3, auto); gap: 0; margin: 0; }
.meta > div { min-width: 92px; padding: 0 14px; border-left: 1px solid var(--line-strong); }
.meta dt { font: 500 12px/1 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.meta dd { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font: 500 var(--t-chico)/1.2 var(--f-texto); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.punto { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.punto[data-e="good"] { background: var(--pl-ok-graf); }
.punto[data-e="warn"] { background: var(--pl-warn-graf); }
.punto[data-e="crit"] { background: var(--pl-crit-graf); }
.segmentos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.segmentos a { padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--pl-vidrio); color: var(--ink-2);
  font: 500 var(--t-rotulo)/1 var(--f-texto); text-decoration: none; white-space: nowrap; transition: border-color var(--dur-rapida), color var(--dur-rapida); }
.segmentos a:hover { border-color: var(--accent); color: var(--ink); }
.segmentos a[aria-current="page"] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.segmentos--pilotes a { padding: 4px 8px; font-variant-numeric: tabular-nums; }

/* columnas de tarjetas */
.col { display: grid; gap: var(--fila); min-height: 0; }
.col--izq { grid-column: 1 / 4; grid-row: 2 / 4; grid-template-rows: repeat(3, minmax(0, 1fr)); }
/* derecha: las dos primeras a su alto natural; «Ver por dentro» toma el resto (su lista se desplaza si no cabe) */
.col--der { grid-column: 10 / 13; grid-row: 2 / 4; grid-template-rows: auto auto minmax(0, 1fr); }
.col--izq:focus-visible { outline-offset: 4px; border-radius: var(--r-md); }
.tarjeta { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 14px 11px; border-radius: var(--r-md);
  background: var(--pl-vidrio); border: 1px solid var(--pl-vidrio-borde); box-shadow: var(--sombra-2);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); }
.tarjeta__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tarjeta__t { margin: 0; padding-left: 9px; border-left: 3px solid var(--accent); color: var(--ink);
  font: var(--peso-rotulo) var(--t-rotulo)/1.2 var(--f-texto); letter-spacing: var(--tr-rotulo); text-transform: uppercase; }
.tarjeta__n { font: 500 12px/1 var(--f-texto); letter-spacing: 0.08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tarjeta__nota { margin: 8px 0 0; font: 400 12px/1.4 var(--f-texto); color: var(--ink-3); }

/* tarjeta de señal: valor, estado, umbrales, gráfico (fracción del umbral Crítico con sus bandas) */
.senal { min-height: 0; }
.senal__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.senal__valor { margin: 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap;
  font: var(--peso-titulo) var(--t-h2)/1 var(--f-titulo); letter-spacing: var(--tr-titulo); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.senal__u { font: 500 var(--t-chico)/1 var(--f-texto); color: var(--ink-2); letter-spacing: 0; }
.senal__sub { margin: 6px 0 0; font: 400 12px/1.35 var(--f-texto); color: var(--ink-3); }
.senal__grafico { display: block; width: 100%; flex: 1 1 30px; min-height: 30px; margin-top: 8px; }
.senal__pie { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font: 500 12px/1.3 var(--f-texto); letter-spacing: 0.02em; color: var(--ink-3); }
.senal__frac b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.senal__mide, .senal__extra { text-align: right; }
.pildora { flex: none; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  font: 600 12px/1 var(--f-texto); letter-spacing: 0.03em; white-space: nowrap; }
.pildora[data-estado="good"] { color: var(--ok-ink); background: var(--ok-bg); border-color: var(--ok-line); }
.pildora[data-estado="warn"] { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }
.pildora[data-estado="crit"] { color: var(--crit-ink); background: var(--crit-bg); border-color: var(--crit-line); }
.tarjeta--simulada { gap: 0; }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); flex: 1; min-height: 0; }
.tarjeta--simulada .sello { background: var(--surface-2); color: var(--ink-2); }
.senal--mini { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.senal--mini + .senal--mini { padding-left: 14px; border-left: 1px solid var(--line); }
.senal--mini .senal__fila:first-child { margin-top: 0; }
.senal--mini .senal__fila { flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.senal--mini .pildora { padding: 4px 7px; font-size: 11px; }
.senal--mini .senal__frac, .senal--mini .senal__extra { margin: 4px 0 0; font: 500 12px/1.3 var(--f-texto); color: var(--ink-3); }
.senal--mini .senal__extra { text-align: left; }
.senal__sub--sim { margin-top: 8px; }
.senal--mini .senal__valor { font-size: var(--t-h3); }
.senal__t { margin: 0; font: 600 var(--t-rotulo)/1.2 var(--f-texto); letter-spacing: 0.04em; color: var(--ink-2); }
.senal__umbral { margin-left: auto; font: 500 12px/1 var(--f-texto); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.senal--mini .senal__grafico { flex: none; height: 28px; min-height: 0; margin-top: 6px; }
.senal--mini .senal__pie { margin-top: 5px; }

/* medidor: la señal como fracción de su umbral Crítico (de 0 a 2 veces), con las bandas de Advertencia y Crítico */
.medidor { --w: 25%; position: relative; height: 7px; margin-top: 8px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(to right, var(--line-strong) 0 var(--w), var(--warn-bg) var(--w) 50%, var(--crit-bg) 50% 100%); box-shadow: inset 0 0 0 1px var(--line); }
.medidor::before, .medidor::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; }
.medidor::before { left: var(--w); background: var(--pl-warn-graf); }
.medidor::after { left: 50%; background: var(--pl-crit-graf); }
.medidor i { position: absolute; left: 0; top: 1px; bottom: 1px; width: 0; border-radius: 1px; background: var(--pl-curva); }
.medidor i[data-e="good"] { background: var(--pl-ok-graf); }
.medidor i[data-e="warn"] { background: var(--pl-warn-graf); }
.medidor i[data-e="crit"] { background: var(--pl-crit-graf); }

/* LAFKEN: enlace y energía */
.enlace { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 8px 0 0; font: 400 var(--t-rotulo)/1.3 var(--f-texto); color: var(--ink-2); }
.enlace b { font: var(--peso-titulo) 20px/1 var(--f-titulo); letter-spacing: var(--tr-titulo); color: var(--ink); }
.enlace .punto { width: 10px; height: 10px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.enlace .punto[data-en-linea="0"] { background: var(--ink-4); box-shadow: none; }
.enlace__via { flex-basis: 100%; padding-left: 18px; color: var(--ink-3); }
.chip--corte { margin-left: auto; min-height: 26px; padding: 4px 9px; font-size: 12px; }
.enlace__det { margin: 6px 0 0; font: 400 12px/1.4 var(--f-texto); color: var(--ink-2); }
.energia { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.energia__celdas { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; flex: 1; height: 14px; }
.energia__celdas i { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 4px); border-radius: 1px; }
.pendiente { font: 600 12px/1 var(--f-texto); letter-spacing: 0.04em; color: var(--ink-2); }
.energia__det { margin: 6px 0 0; font: 400 12px/1.4 var(--f-texto); color: var(--ink-3); }

/* chips y botones del tablero */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 6px 11px; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); background: var(--pl-vidrio); color: var(--ink); cursor: pointer; white-space: nowrap;
  font: 500 var(--t-rotulo)/1 var(--f-texto); letter-spacing: 0.02em; transition: border-color var(--dur-rapida), background-color var(--dur-rapida), color var(--dur-rapida); }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip:disabled { opacity: 0.45; cursor: not-allowed; }
.chip--ancho { width: 100%; margin-top: 10px; }
.chip--warn::before, .chip--crit::before { content: ''; width: 8px; height: 8px; transform: rotate(45deg); }
.chip--warn::before { background: var(--pl-warn-graf); }
.chip--crit::before { background: var(--pl-crit-graf); }

/* ver por dentro */
.desarme { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.boton-dentro { flex: none; min-height: 34px; padding: 8px 14px; border: 0; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent); cursor: pointer;
  font: 600 var(--t-rotulo)/1 var(--f-texto); letter-spacing: 0.02em; transition: background-color var(--dur-rapida); }
.boton-dentro:hover { background: var(--accent-fill-2); }
.desarme__rango { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.desarme__rango input { flex: 1; min-width: 40px; accent-color: var(--accent-fill); }
.desarme__rango output { width: 38px; text-align: right; font: 500 12px/1 var(--f-texto); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.piezas { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 1px; align-content: start; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.piezas button { position: relative; width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 2px 6px 2px 8px; min-height: 24px; font: 500 var(--t-rotulo)/1.2 var(--f-texto);
  border: 0; border-radius: var(--r-xs); background: none; text-align: left; cursor: pointer; color: var(--ink); transition: background-color var(--dur-rapida); }
.piezas button:hover { background: var(--accent-soft); }
.piezas .n { font: 500 12px/1 var(--f-texto); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.piezas .nom { display: block; font: 500 var(--t-rotulo)/1.2 var(--f-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piezas .det { display: none; font: 400 12px/1.3 var(--f-texto); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piezas .est { font: 600 11px/1 var(--f-texto); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 7px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); }
.piezas li[data-e="activa"] button::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--accent); }
.piezas li[data-e="activa"] .est, .piezas li[data-e="separada"] .est { background: var(--accent-fill); color: var(--on-accent); }
.piezas li[data-e="activa"] .nom { color: var(--accent-ink); }
.piezas__actual { display: none; }
/* escritorio: las 6 piezas como una tira de celdas (número + barra de estado, como las celdas del índice y de la batería);
   el nombre, el estado y el detalle de la pieza señalada (o la que se está separando) van en la línea de abajo */
@media (min-width: 1100px) {
  .tarjeta--piezas .piezas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 10px; overflow: visible; }
  .tarjeta--piezas .piezas button { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; padding: 6px 5px 6px;
    border: 1px solid var(--line-strong); text-align: center; }
  .tarjeta--piezas .piezas button > span:nth-child(2) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tarjeta--piezas .piezas .est { display: block; height: 4px; padding: 0; font-size: 0; border-radius: 2px; background: var(--line-strong); }
  .tarjeta--piezas .piezas li[data-e="activa"] .est { background: linear-gradient(to right, var(--accent-fill) 50%, var(--line-strong) 50%); }
  .tarjeta--piezas .piezas li[data-e="separada"] .est { background: var(--accent-fill); }
  .tarjeta--piezas .piezas li[data-e="activa"] button { border-color: var(--accent); }
  .tarjeta--piezas .piezas li[data-e="activa"] button::before { display: none; }
  .tarjeta--piezas .piezas li[data-e="activa"] .n, .tarjeta--piezas .piezas li[data-e="separada"] .n { color: var(--accent-ink); }
  .tarjeta--piezas .piezas button[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .piezas__actual { display: block; min-height: 1.35em; margin: 8px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 12px/1.35 var(--f-texto); color: var(--ink-2); }
  .piezas__actual b { font-weight: 600; color: var(--ink); }
}

/* centro: herramientas, marco del modelo, estado y escala */
.centro { grid-column: 4 / 10; grid-row: 2; display: flex; flex-direction: column; pointer-events: none; min-height: 0; }
.herramientas { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; pointer-events: auto; }
.herramientas__grupo { display: flex; flex-wrap: wrap; gap: 4px; }
.centro { position: relative; }
.centro__marco { position: relative; flex: 1; min-height: 0; }
/* estado: sobre la esquina inferior izquierda del marco, con un velo de vidrio de bordes difusos (el modelo pasa suave
   por detrás, como en la referencia, sin cortar la lectura) */
.estado { position: absolute; left: 0; bottom: 2px; max-width: 36%; pointer-events: none; isolation: isolate; }
.estado::before, .exagerado::before { content: ''; position: absolute; z-index: -1; inset: -16px -30px -12px -18px; border-radius: 28px;
  background: color-mix(in srgb, var(--pl-fondo-2) 78%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--blanco) 18px, var(--blanco) calc(100% - 30px), transparent), linear-gradient(to bottom, transparent, var(--blanco) 16px, var(--blanco) calc(100% - 12px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, var(--blanco) 18px, var(--blanco) calc(100% - 30px), transparent), linear-gradient(to bottom, transparent, var(--blanco) 16px, var(--blanco) calc(100% - 12px), transparent);
  mask-composite: intersect; }
.exagerado::before { inset: -10px -14px -10px -26px; }
.estado__t { margin: 0; font: 500 12px/1 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.estado__nombre { margin: 6px 0 4px; font: var(--peso-titulo) var(--t-h1)/1.02 var(--f-titulo); letter-spacing: var(--tr-titulo); color: var(--ink-2); }
.estado__nombre[data-estado="good"] { color: var(--ok-ink); }
.estado__nombre[data-estado="warn"] { color: var(--warn-ink); }
.estado__nombre[data-estado="crit"] { color: var(--crit-ink); }
.estado__causa { margin: 0; font: 400 var(--t-chico)/1.4 var(--f-texto); color: var(--ink-2); text-shadow: 0 0 12px var(--pl-fondo-2); }
.exagerado { position: absolute; right: 0; top: 38px; max-width: 30%; margin: 0; text-align: right; font: 400 12px/1.4 var(--f-texto); color: var(--ink-2); pointer-events: none; isolation: isolate; }

/* registro: la línea de tiempo única */
.registro { grid-column: 4 / 10; grid-row: 3; padding: 10px 16px 10px; }
.registro .tarjeta__cab { justify-content: flex-start; }
.registro__escenario { margin-left: auto; font: 500 12px/1.2 var(--f-texto); color: var(--ink-3); letter-spacing: 0.02em; text-align: right; }
.registro__cuerpo { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 6px; }
.reproducir { width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent);
  cursor: pointer; box-shadow: 0 0 0 5px var(--accent-soft); transition: background-color var(--dur-rapida); }
.reproducir:hover { background: var(--accent-fill-2); }
.reproducir svg { width: 16px; height: 16px; }
.reproducir path { fill: currentColor; }
.registro__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 500 12px/1.3 var(--f-texto); letter-spacing: 0.04em; color: var(--ink-3); }
.registro__msg { flex: 1; min-width: 0; text-align: center; font: 600 var(--t-rotulo)/1.3 var(--f-texto); letter-spacing: 0; color: var(--accent-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registro__msg[data-tipo="warn"] { color: var(--warn-ink); }
.registro__msg[data-tipo="crit"] { color: var(--crit-ink); }
.registro__msg[data-tipo="nodata"] { color: var(--ink-2); }
.riel { position: relative; height: 24px; margin-top: 4px; cursor: pointer; touch-action: none; border-radius: var(--r-xs); }
.riel:focus-visible { outline-offset: 3px; }
.riel__base { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line-strong); }
.riel__relleno { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: 0; background: var(--accent); }
.riel__marcas { position: absolute; inset: 0; pointer-events: none; }
.riel__marcas i { position: absolute; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: var(--ink-4); }
.riel__marcas i[data-t="hito"] { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--pl-vidrio); border: 1.5px solid var(--accent); }
.riel__marcas i[data-t="warn"], .riel__marcas i[data-t="crit"], .riel__marcas i[data-t="nodata"] { width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); }
.riel__marcas i[data-t="warn"] { background: var(--pl-warn-graf); }
.riel__marcas i[data-t="crit"] { background: var(--pl-crit-graf); }
.riel__marcas i[data-t="nodata"] { background: var(--ink-4); }
.riel__perilla { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--accent-fill); box-shadow: var(--sombra-1); }
.riel__textos { position: relative; height: 14px; font: 500 11px/1 var(--f-texto); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.riel__textos span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.riel__textos span:first-child { transform: none; }
.riel__textos span:last-child:not(:first-child) { transform: translateX(-100%); }
.registro__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.registro__tc { font: 500 var(--t-chico)/1 var(--f-texto); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.registro__tc b { color: var(--ink); font-weight: 600; }
.saltos { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.saltos .chip { min-height: 28px; padding: 5px 10px; font-size: 12px; }
.registro__eventos { font: 500 12px/1.2 var(--f-texto); color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.registro__nota { margin: 6px 0 0; font: 400 12px/1.4 var(--f-texto); color: var(--ink-3); }

.pie-tecnico { grid-column: 1 / 13; grid-row: 4; display: flex; justify-content: space-between; gap: 16px; font: 500 11px/1.4 var(--f-texto);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.pie-tecnico b { color: var(--accent-ink); font-weight: 500; letter-spacing: 0.06em; }

/* ================= detalle del caso ================= */
.detalle { padding: 56px var(--margen) 64px; border-top: 1px solid var(--line); background: var(--bg); }
.detalle__cab { max-width: 980px; }
.detalle__ojo { margin: 0 0 10px; }
.detalle__cab h2 { margin: 0; font-size: var(--t-h1); }
.detalle__lede { margin: 14px 0 0; max-width: 72ch; font-size: var(--t-cuerpo); line-height: var(--lh-cuerpo); color: var(--ink-2); }
.detalle__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); margin-top: 32px; }
.ficha { grid-column: span 4; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sombra-1); min-width: 0; }
.ficha h3 { margin: 0 0 10px; font-size: var(--t-h3); }
.ficha p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ficha p + p { margin-top: 10px; }
.ficha__sub { font: 500 var(--t-rotulo)/1.4 var(--f-texto) !important; letter-spacing: 0.02em; color: var(--ink-3) !important; }
.ficha__nota { font-size: var(--t-rotulo) !important; color: var(--ink-3) !important; }
.ficha--aviso { background: var(--accent-soft); border-color: transparent; }
.ficha--aviso h3 { font-size: var(--t-h3); }
.cuenta { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font: 400 var(--t-rotulo)/1.45 var(--f-texto); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cuenta li { padding-left: 12px; border-left: 2px solid var(--line-strong); }
.cuenta li.total { border-left-color: var(--accent); color: var(--ink); }
.pasos { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font: 400 14px/1.5 var(--f-texto); color: var(--ink-2); }
.pasos b { display: block; font-weight: 600; color: var(--ink); font-size: var(--t-rotulo); letter-spacing: 0.02em; }
.eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 340px; overflow: auto; }
.eventos button { width: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 8px; border: 0; border-radius: var(--r-xs); background: none;
  text-align: left; cursor: pointer; font: 400 14px/1.45 var(--f-texto); color: var(--ink-2); }
.eventos button:hover { background: var(--accent-soft); }
.eventos .cuando { font: 600 12px/1.5 var(--f-texto); color: var(--ink); font-variant-numeric: tabular-nums; }
.eventos li[data-t="warn"] .cuando { color: var(--warn-ink); }
.eventos li[data-t="crit"] .cuando { color: var(--crit-ink); }
.entradas { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font: 400 14px/1.4 var(--f-texto); }
.entradas dt { color: var(--ink-2); }
.entradas dd { margin: 0; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.entradas dd small { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.formulas { margin-top: 14px; display: grid; gap: 6px; }
.formulas code { display: block; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font: 400 12px/1.5 var(--f-dato); overflow-wrap: anywhere; }

/* ================= pantallas medianas ================= */
@media (max-width: 1279px) and (min-width: 1100px) {
  :root { --margen: 24px; --canal: 18px; }
  .cab--izq { grid-column: 1 / 5; }
  .meta > div { min-width: 80px; padding: 0 10px; }
}
@media (max-height: 820px) and (min-width: 1100px) {
  .senal__sub { display: none; }
  .tarjeta__nota { display: none; }
}

/* ================= teléfono y tableta: el modelo arriba, tarjetas en carrusel y apiladas ================= */
@media (max-width: 1099px) {
  :root { --margen: 16px; --canal: 12px; --alto-modelo: clamp(440px, 64svh, 620px); --alto-herr: 42px; }

  .tablero { display: flex; flex-direction: column; gap: var(--fila); height: auto; min-height: 0; overflow: visible; padding: 14px var(--margen) 18px; }
  .tablero::before { display: none; }
  .cab--izq { order: 1; }
  .cab--der { order: 2; align-items: stretch; }
  .tablero__modelo { order: 3; position: relative; inset: auto; height: var(--alto-modelo); margin: 0 calc(-1 * var(--margen)); -webkit-mask-image: none; mask-image: none; }
  /* el escenario se monta sobre el lienzo (herramientas en una fila + marco); el estado queda debajo, fuera del modelo */
  .centro { order: 4; height: auto; margin-top: calc(-1 * var(--alto-modelo) - var(--fila)); }
  .centro__marco { flex: none; height: calc(var(--alto-modelo) - var(--alto-herr)); }
  .registro { order: 5; }
  .cab--centro { order: 6; padding: 12px 14px; border-radius: var(--r-md); background: var(--pl-vidrio); border: 1px solid var(--pl-vidrio-borde); }
  .col--izq { order: 7; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 84%); grid-template-rows: none; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--margen); margin: 0 calc(-1 * var(--margen)); padding: 2px var(--margen) 8px; }
  .col--izq .tarjeta { scroll-snap-align: start; min-height: 220px; }
  .col--der { order: 8; grid-template-rows: none; }
  .tarjeta--simulada .minis { min-height: 190px; }
  .tarjeta--piezas { min-height: 0; }
  .piezas .det { display: block; }
  .pie-tecnico { order: 9; flex-direction: column; gap: 4px; }

  .meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .meta > div { min-width: 0; padding: 0 10px; }
  .meta > div:first-child { border-left: 0; padding-left: 0; }
  .meta dd { white-space: normal; }
  .segmentos { justify-content: flex-start; }
  .herramientas { flex-wrap: nowrap; justify-content: flex-start; height: var(--alto-herr); margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .herramientas::-webkit-scrollbar { display: none; }
  .herramientas__grupo { flex: none; flex-wrap: nowrap; }
  .herramientas__grupo + .herramientas__grupo { padding-left: 6px; border-left: 1px solid var(--line-strong); }
  .estado { position: static; max-width: none; margin-top: 6px; }
  .estado::before { display: none; }
  .estado__nombre { font-size: var(--t-h2); }
  .estado__causa { font-size: var(--t-rotulo); text-shadow: none; }
  .exagerado { position: static; max-width: none; margin-top: 6px; text-align: left; font-size: 12px; color: var(--ink-3); }
  .exagerado::before { display: none; }
  .registro__cuerpo { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .registro__escenario { display: none; }
  .registro__pie { flex-wrap: wrap; }
  .registro__msg { text-align: left; white-space: normal; }
  .registro__cab { flex-wrap: wrap; }
  .registro__cab #r-ini, .registro__cab #r-fin { display: none; }

  .detalle { padding: 40px var(--margen) 48px; }
  .ficha { grid-column: 1 / -1; }
}
@media (max-width: 560px) { :root { --alto-barra: 58px; } }   /* alto de .c-barra en comun.css */
@media (min-width: 700px) and (max-width: 1099px) {
  .col--der { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta--piezas { grid-column: 1 / -1; }
  .ficha { grid-column: span 6; }
}

/* ================= R1 · la misma familia que el Panel (revisión independiente, 07-nov) =================
   El Panel dejó de verse «hecho por IA» (Lucas, 07-nov): estados como forma + palabra en su tono (sin pastillas),
   «Simulación» con su cuadrito rayado, títulos en minúscula de oración, sin numeración de índice y controles
   segmentados con una raya azul bajo la opción elegida. El zoom conserva la forma Medusa JF-4 que pidió Lucas (modelo al
   centro, tarjetas de vidrio alrededor, una sola línea de tiempo) pero con esas mismas piezas, para que el paso del
   Panel al pilote no cambie de idioma. Solo tokens; nada de esto toca la lógica ni las medidas del tablero. */
.sello, .sello--chico, .tarjeta--simulada .sello {
  gap: 7px; padding: 0; border-radius: 0; background: none; color: var(--ink-3);
  font: 500 12.5px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none;
}
.sello::before { width: 10px; height: 10px; border-radius: 0; border: 1px solid var(--ink-4);
  background: repeating-linear-gradient(135deg, var(--ink-4) 0 1px, transparent 1px 3.5px); }
.tarjeta { box-shadow: none; }
.tarjeta__t { padding-left: 0; border-left: 0; font: var(--peso-titulo) 18px/1.15 var(--f-titulo); letter-spacing: var(--tr-titulo); text-transform: none; }
.tarjeta__n { display: none; }
.meta dt, .estado__t { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.tablero .f-rotulo { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.registro__eventos, .pie-tecnico { letter-spacing: 0; text-transform: none; }
.pie-tecnico { font-size: 12px; }
.pie-tecnico b { letter-spacing: 0; }
.entradas dd small { letter-spacing: 0; text-transform: none; font-size: 12px; }
.pildora {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none;
  font: 500 13.5px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none;
}
.pildora[data-estado] { background: none; }
.pildora::before { content: ''; flex: none; width: 9px; height: 9px; background: var(--ink-4); }
.pildora[data-estado="good"]::before { border-radius: 50%; background: var(--pl-ok-graf); }
.pildora[data-estado="warn"]::before { width: 10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--pl-warn-graf); }
.pildora[data-estado="crit"]::before { width: 10px; height: 10px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--pl-crit-graf); }
.pildora[data-estado="nodata"]::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.senal--mini .pildora { padding: 0; font-size: 12.5px; }
.piezas .est { padding: 0; border-radius: 0; background: none; letter-spacing: 0; text-transform: none; font: 600 12px/1 var(--f-texto); color: var(--ink-2); }
.piezas li[data-e="activa"] .est, .piezas li[data-e="separada"] .est { background: none; color: var(--accent-ink); }
/* selectores de escenario y de pilote, y las vistas del modelo: opciones sobre una regla, la elegida con su raya azul */
.segmentos { gap: 0 2px; border-bottom: 1px solid var(--line-strong); }
.segmentos a { position: relative; padding: 7px 9px 8px; border: 0; border-radius: 0; background: none; }
.segmentos a:hover { color: var(--ink); }
.segmentos a[aria-current="page"] { background: none; color: var(--ink); font-weight: 600; }
.segmentos a[aria-current="page"]::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px; background: var(--accent); }
.herramientas__grupo { gap: 0 2px; }
.herramientas .chip { min-height: 32px; padding: 6px 10px; border: 0; border-radius: 0; background: none; color: var(--ink-2); }
.herramientas .chip:hover { color: var(--ink); }
.herramientas .chip[aria-pressed="true"] { background: none; color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.herramientas .chip:disabled { color: var(--ink-3); }