/* ==========================================================================
   Serie de consistencia · carriles de transacciones, versiones y el cajero
   El color es el de siempre: azul en curso, verde confirmado, naranja
   esperando o pendiente, rojo fallo (un abort, una regla rota, lo que no cuadra).
   ========================================================================== */

/* ---------- Carriles: el tiempo corre hacia abajo ---------- */

.carril__nombre { font-size: 10px; font-weight: 500; fill: var(--tinta); }
.carril__estado { font-size: 8px; fill: var(--tinta-suave); }
.carril__estado--activo { fill: var(--activo); }
.carril__estado--ok { fill: var(--ok); }
.carril__estado--lento { fill: var(--lento); }
.carril__estado--fallo { fill: var(--fallo); }

.banda { fill: var(--papel-2); stroke: var(--linea-suave); stroke-width: 0.8; }
.banda__nombre { font-size: 8.5px; font-weight: 500; fill: var(--tinta); }
.banda__nota { font-size: 7px; fill: var(--tinta-suave); letter-spacing: 0.04em; }
.banda__valor { font-size: 8.5px; fill: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.banda__valor--cambia { fill: var(--ok); font-weight: 500; }
.banda__valor--negativo { fill: var(--fallo); font-weight: 500; }
.banda__cambio { fill: var(--ok-fondo); }
.banda__pendiente { font-size: 6.5px; fill: var(--lento); }

.paso { fill: var(--papel); stroke: var(--linea); stroke-width: 0.8; }
.paso__texto { font-size: 8px; fill: var(--tinta); }
.paso--lee { stroke: var(--activo); fill: var(--activo-fondo); }
.paso--escribe { stroke: var(--activo); stroke-width: 1.3; fill: var(--activo-fondo); }
.paso--commit { stroke: var(--ok); fill: var(--ok-fondo); }
.paso--espera { stroke: var(--lento); fill: var(--lento-fondo); stroke-dasharray: 3 2; }
.paso--aborto, .paso--conflicto, .paso--luz { stroke: var(--fallo); fill: var(--fallo-fondo); }
.paso--luz { stroke-width: 1.6; }
.paso--rechazo { stroke: var(--linea); fill: var(--papel-2); }
.paso--externo { stroke: var(--tinta); fill: var(--papel-3); }
.paso--siguiente { fill: none; stroke: var(--linea); stroke-dasharray: 3 3; }
.paso--siguiente + .rotulo .paso__texto { fill: var(--tinta-suave); }
.lab .paso__texto { font-size: 9.4px; }
.lab .banda__valor { font-size: 9.4px; }
.lab .carril__nombre { font-size: 11px; }

/* ---------- Detalle: versiones, WAL y registro de fuera ---------- */

.versiones { list-style: none; padding: 0; margin: 0.2rem 0 0; font-family: var(--mono); font-size: 0.74rem; }
.versiones li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem; margin: 0.15rem 0; }
.versiones__fila { color: var(--tinta-suave); min-width: 4.2rem; }
.version { border: 1px solid var(--linea); border-radius: 2px; padding: 0 0.3rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.version--viva { border-color: var(--ok); color: var(--ok); }
.version--pendiente { border-color: var(--lento); color: var(--lento); border-style: dashed; }
.version--retenida { border-color: var(--lento); color: var(--lento); background: var(--lento-fondo); }
.version--muerta { border-color: var(--linea-suave); color: var(--tinta-suave); text-decoration: line-through; }
.versiones__mas { color: var(--tinta-suave); }

.wal { list-style: none; padding: 0; margin: 0.2rem 0 0; font-family: var(--mono); font-size: 0.72rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.wal li { border: 1px solid var(--linea); border-radius: 2px; padding: 0 0.3rem; margin: 0; color: var(--tinta-suave); }
.wal .wal--commit { border-color: var(--ok); color: var(--ok); }
.wal .wal--perdido { border-color: var(--linea-suave); text-decoration: line-through; }

.cuadra .ficha-sim__cabecera { font-weight: 500; }
.cuadra .ficha-sim__filas dt, .cuadra .ficha-sim__filas dd { white-space: nowrap; }

/* Laboratorio: las tarjetas en fila, para que el diagrama tenga todo el alto posible.
   Al comparar, el código se esconde y «¿Cuadra?» ocupa una sola línea. */
.lab .panel__detalle { grid-template-columns: minmax(max-content, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.1fr); }
.lab .panel__detalle > .cuadra { grid-column: 1; grid-row: 1; }
.lab .panel__detalle > .ficha-sim:not(.cuadra) { grid-column: 2; grid-row: 1; }
.lab .panel__detalle > .codigo { grid-column: 3; grid-row: 1 / span 2; overflow-x: auto; }
.lab .panel__detalle > .panel__registro { grid-column: 1 / span 2; grid-row: 2; }
/* Al comparar, el detalle va a la derecha del diagrama: el tiempo corre hacia
   abajo y el diagrama necesita todo el alto del panel. El código solo se ve
   con un panel. */
.lab--comparar .panel {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "cab cli" "diag det";
}
.lab--comparar .panel__detalle,
.pixel .lab--comparar .panel__detalle { min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; overflow-y: auto; padding-top: 0.3rem; }
.lab.lab--comparar .panel__detalle > * { flex: none; }
.lab--comparar .panel__detalle > .codigo { display: none; }
.lab--comparar .cuadra .ficha-sim__filas dt, .lab--comparar .cuadra .ficha-sim__filas dd { white-space: normal; }

/* ---------- Contención (episodio 3): una barra por operación ---------- */

.gantt__eje { stroke: var(--linea); stroke-width: 0.8; }
.gantt__marca { font-size: 7px; fill: var(--tinta-suave); }
.gantt__nombre { font-size: 7px; fill: var(--tinta-suave); }
.gantt__espera { fill: var(--lento-fondo); stroke: var(--lento); stroke-width: 0.6; stroke-dasharray: 2 2; }
.gantt__trabajo { fill: var(--activo); }
.gantt__trabajo--ok { fill: var(--ok); }
.gantt__trabajo--conflicto { fill: var(--fallo); opacity: 0.75; }
.gantt__trabajo--antifraude { fill: var(--lento); }
.gantt__ahora { stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 2 2; }

/* ---------- El cajero sin conexión (episodio 5) ---------- */

.red--cortada { stroke: var(--fallo); stroke-dasharray: 4 3; }
.corte { font-size: 12px; font-weight: 500; fill: var(--fallo); }
.nodo--sin-red rect { stroke: var(--lento); stroke-dasharray: 4 2; }
.anotaciones { font-size: 7.5px; fill: var(--lento); }
.replica__retraso { font-size: 8px; fill: var(--lento); }

/* ---------- Estilo 8 bits ---------- */

.pixel .banda { rx: 0; fill: #0b0e1f; stroke: #34427a; stroke-width: 2; }
.pixel .banda__nombre.rotulo-pixel { fill: var(--acento); }
.pixel .banda__nota.rotulo-pixel { fill: var(--linea); }
.pixel .banda__valor.rotulo-pixel { fill: var(--tinta-suave); }
.pixel .banda__valor--cambia.rotulo-pixel { fill: var(--ok); }
.pixel .banda__valor--negativo.rotulo-pixel { fill: var(--fallo); }
.pixel .banda__cambio { fill: rgba(61, 220, 132, 0.18); }
.pixel .banda__pendiente.rotulo-pixel { fill: var(--lento); }
.pixel .carril__nombre.rotulo-pixel { fill: var(--acento); }
.pixel .carril__estado.rotulo-pixel { fill: var(--tinta-suave); }
.pixel .carril__estado--activo.rotulo-pixel { fill: #8fb3ff; }
.pixel .carril__estado--ok.rotulo-pixel { fill: var(--ok); }
.pixel .carril__estado--lento.rotulo-pixel { fill: var(--lento); }
.pixel .carril__estado--fallo.rotulo-pixel { fill: var(--fallo); }
.pixel .paso { rx: 0; fill: #05060d; stroke: #34427a; stroke-width: 2; }
.pixel .paso__texto.rotulo-pixel { fill: var(--tinta); }
.pixel .paso--lee, .pixel .paso--escribe { stroke: var(--activo); }
.pixel .paso--commit { stroke: var(--ok); }
.pixel .paso--espera { stroke: var(--lento); stroke-dasharray: 4 2; }
.pixel .paso--aborto, .pixel .paso--conflicto, .pixel .paso--luz { stroke: var(--fallo); fill: #2a0a14; }
.pixel .paso--externo { stroke: var(--acento); }
.pixel .paso--siguiente { fill: none; stroke: var(--linea); stroke-dasharray: 2 4; }
.pixel .paso--siguiente + .rotulo .rotulo-pixel { fill: var(--linea); }
.pixel .gantt__eje { stroke: #34427a; stroke-width: 2; }
.pixel .gantt__marca.rotulo-pixel, .pixel .gantt__nombre.rotulo-pixel { fill: var(--linea); }
.pixel .gantt__espera { fill: none; stroke: var(--lento); stroke-width: 1; }
.pixel .gantt__ahora { stroke: var(--acento); stroke-width: 2; }
.pixel .corte.rotulo-pixel { fill: var(--fallo); }
.pixel .anotaciones.rotulo-pixel, .pixel .replica__retraso.rotulo-pixel { fill: var(--lento); }
.pixel .red--cortada { stroke: var(--fallo); stroke-width: 2; }
.pixel .versiones, .pixel .wal { font-family: var(--pixel); font-size: 8px; line-height: 2; }
.pixel .version, .pixel .wal li { border-width: 2px; border-radius: 0; }