/* ==========================================================================
   Serie de lecturas · marcador de carga y edad, cajas de base de datos y la
   tira del espectro del artículo.
   El color es el de siempre: azul en curso, verde al día o bien, naranja
   viejo o esperando, rojo saturado, perdido o roto.
   ========================================================================== */

/* ---------- Marcador: la barra de carga del primario ---------- */

.marcador__carga { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.45rem; white-space: nowrap; }
.barra {
  display: inline-block;
  width: 4.2rem; height: 0.55rem;
  border: 1px solid var(--linea);
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
  background: var(--papel);
}
.barra__relleno { display: block; height: 100%; width: 0; background: var(--ok); transition: width 0.2s linear; }
.barra--lento .barra__relleno { background: var(--lento); }
.barra--fallo { border-color: var(--fallo); }
.barra--fallo .barra__relleno { background: var(--fallo); }
.lab .barra { width: 3.4rem; }
@media (prefers-reduced-motion: reduce) { .barra__relleno { transition: none; } }

/* ---------- Diagrama: cajas de base de datos ---------- */

.nodo--caja.nodo--caido rect { stroke-dasharray: 4 3; }
.nodo--primario-nuevo > rect { stroke: var(--ok); stroke-width: 1.6; }
.caja__rotulo--ok { fill: var(--ok); }
.caja__rotulo--lento { fill: var(--lento); }
.caja__rotulo--fallo { fill: var(--fallo); font-weight: 500; }
.caja__rotulo--activo { fill: var(--activo); }
.caja__cifra--activo { fill: var(--activo); }

/* Mensaje con rótulo que viaja con el reloj del modo carga (la edad de una lectura) */
.particula-etiquetada .rotulo__fondo { fill: var(--papel); opacity: 0.94; }

/* Enlace roto (el conector de CDC caído, la réplica sin conexión) */
.arista--rota { stroke: var(--fallo); stroke-dasharray: 4 3; }
.arista--apagada { opacity: 0.25; }

/* Bloques de almacenamiento (episodio 5) */
.bloques__rotulo { font-size: 7.5px; fill: var(--tinta-suave); }
.lab .bloques__rotulo { font-size: 8.5px; }

/* ---------- La tira del espectro (artículo) ---------- */

.espectro { margin: 1.4rem 0 1.6rem; }
.espectro__titulo {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta-suave); margin-bottom: 0.5rem;
}
.espectro__aqui-leyenda { color: var(--activo); letter-spacing: 0.02em; text-transform: none; }
.espectro__tira {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem;
  counter-reset: tramo;
}
.espectro__tramo {
  position: relative;
  margin: 0;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  padding: 0.5rem 0.6rem 0.6rem;
  color: var(--tinta-suave);
  background: transparent;
  min-width: 0;
}
/* Flecha hacia el siguiente tramo */
.espectro__tramo + .espectro__tramo::before {
  content: "›";
  position: absolute; left: -0.78rem; top: 0.45rem;
  font-family: var(--mono); color: var(--linea);
}
.espectro__tramo--visto { border-style: solid; color: var(--tinta); background: var(--papel-2); }
.espectro__tramo--aqui { border-color: var(--activo); box-shadow: inset 0 0 0 1px var(--activo); background: var(--activo-fondo); }
.espectro__nombre { display: block; font-family: var(--mono); font-size: 0.82rem; font-weight: 500; }
.espectro__detalle { display: block; font-size: 0.74rem; color: var(--tinta-suave); margin-top: 0.1rem; }
.espectro__lecturas { list-style: none; padding: 0; margin: 0.45rem 0 0; font-size: 0.76rem; line-height: 1.3; }
.espectro__lecturas li { margin: 0.25rem 0 0; padding-left: 0.55rem; border-left: 2px solid var(--linea-suave); }
.espectro__lecturas .espectro__nueva { border-left-color: var(--activo); color: var(--tinta); }
.espectro__extremos {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.7rem; color: var(--tinta-suave); margin-top: 0.45rem;
}
@media (max-width: 640px) {
  .espectro__tira { grid-template-columns: 1fr; gap: 0.5rem; }
  .espectro__tramo + .espectro__tramo::before { content: "⌄"; left: 0.6rem; top: -0.85rem; }
  .espectro__extremos { flex-direction: column; gap: 0.1rem; }
}

/* ---------- Figuras estáticas del artículo (modelo en estrella, filas y columnas) ---------- */

.figura { margin: 1.4rem 0; }
.figura svg { display: block; width: 100%; height: auto; }
.figura figcaption { font-size: 0.85rem; color: var(--tinta-suave); margin-top: 0.4rem; }
.figura .tabla-caja { fill: var(--papel-2); stroke: var(--linea); stroke-width: 1; }
.figura .tabla-caja--hechos { fill: var(--activo-fondo); stroke: var(--activo); }
.figura .tabla-nombre { font-family: var(--mono); font-size: 11px; font-weight: 500; fill: var(--tinta); }
.figura .tabla-campo { font-family: var(--mono); font-size: 9.5px; fill: var(--tinta-suave); }
.figura .tabla-rel { stroke: var(--linea); stroke-width: 1; fill: none; }
.figura .figura__titulo { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; fill: var(--tinta-suave); text-transform: uppercase; }

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

.pixel .barra { border-width: 2px; border-radius: 0; background: #05060d; height: 8px; }
.pixel .barra__relleno { transition: none; }
.pixel .nodo--caja.nodo--papel-central > rect { fill: #05060d; stroke: var(--tinta); }
.pixel .nodo--caja.nodo--papel-replica > rect { fill: #05060d; stroke: #8fb3ff; }
.pixel .nodo--caja.nodo--papel-externo > rect { fill: #1e1033; stroke: #c49bff; }
.pixel .nodo--primario-nuevo > rect { stroke: var(--ok); }
.pixel .caja__titulo.rotulo-pixel { fill: var(--tinta); }
.pixel .caja__rotulo--ok.rotulo-pixel { fill: var(--ok); }
.pixel .caja__rotulo--lento.rotulo-pixel { fill: var(--lento); }
.pixel .caja__rotulo--fallo.rotulo-pixel { fill: var(--fallo); }
.pixel .caja__rotulo--activo.rotulo-pixel { fill: #8fb3ff; }
.pixel .arista--rota { stroke: var(--fallo); }
.pixel .bloques__rotulo.rotulo-pixel { fill: var(--tinta-suave); }

/* ---------- Laboratorio ---------- */

/* Al comparar, el código se esconde: el marcador ocupa todo el detalle */
.lab--comparar .panel__detalle { grid-template-columns: minmax(0, 1fr); }
.lab--comparar .panel__detalle > .codigo { display: none; }
.nodo--papel-replica .caja__titulo { font-size: 10px; }
.lab .nodo--papel-replica .caja__titulo { font-size: 10.5px; }
.pixel .nodo--caja.nodo--papel-consumidor > rect { fill: #05060d; stroke: #c9cedd; }
.pixel .nodo--caja.nodo--papel-consumidor .caja__titulo.rotulo-pixel { fill: #dfe6ff; }
.figura { overflow-x: auto; }
.figura svg { min-width: 520px; }