/* ==========================================================================
   Serie de IaC · las tres columnas (código | estado | nube real), las fichas
   de recurso, los símbolos del plan, la salida del plan y las piezas de
   cada episodio (carriles, pilas, módulo y cuentas).
   El color es el de siempre: azul en curso, verde creado o sin cambios,
   naranja cambio o drift, rojo destruir, reemplazar o fallo.
   ========================================================================== */

/* ---------- Las tres columnas ---------- */

.columna__cabecera rect { fill: var(--papel-2); stroke: var(--linea-suave); stroke-width: 0.8; }
.columna__cabecera--activa rect { stroke: var(--activo); fill: var(--activo-fondo); stroke-width: 1.2; }
.columna__titulo { font-size: 9px; font-weight: 500; }
.columna__sub { font-size: 7px; fill: var(--tinta-suave); }
.columna__cabecera--activa .columna__titulo { fill: var(--activo); }
.columna__hueco { stroke: var(--linea-suave); stroke-dasharray: 2 3; stroke-width: 0.8; }
.columna__nota { font-size: 7.5px; fill: var(--tinta-suave); font-style: italic; }

/* Una ficha de recurso */
.rec rect { fill: var(--papel); stroke: var(--linea); stroke-width: 0.8; transition: fill 0.2s, stroke 0.2s; }
.rec__nombre { font-size: 7.8px; font-weight: 500; }
.rec__detalle { font-size: 6.8px; fill: var(--tinta-suave); }
.rec--nuevo rect { stroke: var(--ok); stroke-dasharray: 3 2; }
.rec--nuevo .rec__nombre { fill: var(--ok); }
.rec--ok rect { stroke: var(--ok); fill: var(--ok-fondo); stroke-width: 1.2; }
.rec--deriva rect { stroke: var(--lento); fill: var(--lento-fondo); stroke-width: 1.2; }
.rec--deriva .rec__detalle { fill: var(--lento); }
.rec--borrado rect { stroke: var(--fallo); stroke-dasharray: 3 2; fill: none; }
.rec--borrado text { fill: var(--fallo); }
.rec--fallo rect { stroke: var(--fallo); fill: var(--fallo-fondo); stroke-width: 1.4; }
.rec--fallo .rec__nombre, .rec--fallo .rec__detalle { fill: var(--fallo); }
.rec--suelto rect { stroke: var(--linea); stroke-dasharray: 2 2; fill: var(--papel-2); }
.rec--suelto .rec__nombre { fill: var(--tinta-suave); }
.rec--tenue { opacity: 0.4; }
.rec--duplicado rect { stroke: var(--fallo); stroke-dasharray: 3 2; fill: var(--fallo-fondo); }
.rec--duplicado .rec__nombre { fill: var(--fallo); }
.rec--activo rect { stroke: var(--activo); fill: var(--activo-fondo); stroke-width: 1.6; }

/* Símbolo del plan a la izquierda de cada fila */
.plan-simbolo { font-size: 9.5px; font-weight: 500; }
.plan-simbolo--crear { fill: var(--ok); }
.plan-simbolo--cambiar { fill: var(--lento); }
.plan-simbolo--destruir, .plan-simbolo--reemplazar { fill: var(--fallo); }
.plan-simbolo--reemplazar { font-size: 8px; }

/* Marcador: +3 ~1 -0 -/+1 */
.plan-cifra { font-variant-numeric: tabular-nums; }
.plan-cifra--cero { color: var(--tinta-suave); font-weight: 400; }
.plan-cifra--peligro { color: var(--fallo); }

/* ---------- La salida del plan ---------- */

.ficha-salida .codigo.salida { margin: 0.35rem 0 0; max-height: 11.5em; overflow-y: auto; font-size: 0.68rem; line-height: 1.45; padding: 0.35rem 0; }
.salida .codigo__linea { padding: 0 0.6rem; }
.salida__linea--crear { color: var(--ok); }
.salida__linea--cambiar { color: var(--lento); }
.salida__linea--destruir, .salida__linea--reemplazar { color: var(--fallo); }
.salida__linea--nota { color: var(--tinta-suave); }
.salida__linea--ok { color: var(--ok); }
.salida__linea--fuerte { color: var(--tinta); font-weight: 500; }

/* El código de cada panel: algo más compacto */
.panel__detalle > .codigo { font-size: 0.7rem; }

/* Chivato de estado bajo el diagrama (ep. 2: lo que ve Ana; ep. 3: el bucket…) */
.caja__etiqueta { font-size: 8px; fill: var(--tinta-suave); }

/* ---------- Carriles: dos personas en el tiempo (ep. 3) ---------- */

.carril__nombre { font-size: 9.5px; font-weight: 500; }
.carril__estado { font-size: 7.5px; fill: var(--tinta-suave); }
.carril__estado--lento { fill: var(--lento); }
.carril__estado--fallo { fill: var(--fallo); }
.carril__estado--ok { fill: var(--ok); }
.banda { fill: var(--papel-2); stroke: var(--linea-suave); stroke-width: 0.8; }
.banda__nombre { font-size: 8.5px; font-weight: 500; }
.banda__nota { font-size: 7px; fill: var(--tinta-suave); }
.banda__valor { font-size: 7.5px; }
.banda__valor--cambia { font-weight: 500; }
.banda__valor--fallo { fill: var(--fallo); font-weight: 500; }
.banda__cambio { fill: var(--activo-fondo); stroke: var(--activo); stroke-width: 0.6; }
.banda__cambio--fallo { fill: var(--fallo-fondo); stroke: var(--fallo); }
.banda__lock { fill: var(--lento-fondo); stroke: var(--lento); stroke-width: 0.8; }
.banda__lock-texto { font-size: 7px; fill: var(--lento); font-weight: 500; }
.paso rect, rect.paso { stroke-width: 0.8; }
.paso--lee { fill: var(--papel); stroke: var(--linea); }
.paso--plan { fill: var(--activo-fondo); stroke: var(--activo); }
.paso--escribe { fill: var(--ok-fondo); stroke: var(--ok); }
.paso--espera { fill: var(--lento-fondo); stroke: var(--lento); stroke-dasharray: 3 2; }
.paso--fallo { fill: var(--fallo-fondo); stroke: var(--fallo); }
.paso__texto { font-size: 7px; }
.paso--fallo + g .paso__texto, .paso__texto--fallo { fill: var(--fallo); }

/* ---------- Pilas: estados por capa y entorno (ep. 4) ---------- */

.pila rect { fill: var(--papel); stroke: var(--linea); stroke-width: 0.8; transition: fill 0.2s, stroke 0.2s; }
.pila__nombre { font-size: 8px; font-weight: 500; }
.pila__cifra { font-size: 7px; fill: var(--tinta-suave); }
.pila--lee rect { fill: var(--activo-fondo); stroke: var(--activo); }
.pila--toca rect { fill: var(--lento-fondo); stroke: var(--lento); stroke-width: 1.3; }
.pila--roto rect { fill: var(--fallo-fondo); stroke: var(--fallo); stroke-width: 1.3; }
.pila--roto .pila__nombre, .pila--roto .pila__cifra { fill: var(--fallo); }
.pila--ok rect { fill: var(--ok-fondo); stroke: var(--ok); }
.pila--critica .pila__nombre { text-decoration: underline; }
.estado-borde { fill: none; stroke: var(--tinta); stroke-width: 1.2; stroke-dasharray: 6 3; }
.estado-borde--fino { stroke: var(--linea); stroke-width: 0.8; stroke-dasharray: 3 2; }
.estado-borde__rotulo { font-size: 7.5px; fill: var(--tinta-suave); }
.grano { fill: var(--papel-2); stroke: var(--linea-suave); stroke-width: 0.4; }
.grano--estado { stroke: var(--linea); stroke-width: 0.6; }
.grano--toca { fill: var(--lento); stroke: var(--lento); }
.grano--roto { fill: var(--fallo); stroke: var(--fallo); }
.eje__rotulo { font-size: 8px; fill: var(--tinta-suave); }
.flecha-orden { stroke: var(--lento); stroke-dasharray: 2 2; fill: none; }

/* ---------- Módulo y equipos (ep. 5) ---------- */

.modulo > rect { fill: var(--activo-fondo); stroke: var(--activo); stroke-width: 1; }
.modulo__titulo { font-size: 9px; font-weight: 500; fill: var(--activo); }
.modulo__entrada { font-size: 7px; }
.modulo__entrada--tenue { fill: var(--tinta-suave); }
.modulo__oculto { font-size: 7px; fill: var(--tinta-suave); font-style: italic; }
.equipo > rect { fill: var(--papel); stroke: var(--tinta); stroke-width: 1; }
.equipo--fallo > rect { stroke: var(--fallo); fill: var(--fallo-fondo); }
.equipo--lento > rect { stroke: var(--lento); fill: var(--lento-fondo); }
.equipo--ok > rect { stroke: var(--ok); fill: var(--ok-fondo); }
.equipo__nombre { font-size: 9px; font-weight: 500; }
.equipo__linea { font-size: 7.2px; fill: var(--tinta-suave); }
.equipo__linea--fallo { fill: var(--fallo); font-weight: 500; }
.equipo__linea--lento { fill: var(--lento); }
.equipo__linea--ok { fill: var(--ok); }
.version { font-size: 7.5px; font-weight: 500; }

/* ---------- Cuentas (ep. 6) ---------- */

.org > rect { fill: none; stroke: var(--tinta); stroke-width: 1.2; }
.org__titulo { font-size: 8.5px; font-weight: 500; }
.cuenta > rect { fill: var(--papel); stroke: var(--linea); stroke-width: 0.9; transition: fill 0.2s, stroke 0.2s; }
.cuenta--red > rect { fill: var(--papel-2); stroke: var(--tinta); }
.cuenta__nombre { font-size: 7.8px; font-weight: 500; }
.cuenta__sub { font-size: 6.6px; fill: var(--tinta-suave); }
.cuenta--alcance > rect { fill: var(--fallo-fondo); stroke: var(--fallo); stroke-width: 1.3; }
.cuenta--alcance .cuenta__nombre { fill: var(--fallo); }
.cuenta--nueva > rect { stroke: var(--ok); stroke-dasharray: 3 2; fill: var(--ok-fondo); }
.cuenta--nueva .cuenta__nombre { fill: var(--ok); }
.cuenta--pendiente > rect { stroke: var(--lento); stroke-dasharray: 3 2; fill: none; }
.cuenta--pendiente .cuenta__nombre { fill: var(--lento); }
.cuenta--deriva > rect { stroke: var(--lento); fill: var(--lento-fondo); }
.vpc-mini { fill: var(--activo-fondo); stroke: var(--activo); stroke-width: 0.6; }
.vpc-mini__rotulo { font-size: 6.4px; fill: var(--activo); }
.guardarrail { fill: none; stroke: var(--ok); stroke-width: 1.4; stroke-dasharray: 1 2.5; stroke-linecap: round; }
.guardarrail--estricto { stroke: var(--lento); stroke-width: 2.2; }
.guardarrail__rotulo { font-size: 7px; fill: var(--ok); }
.guardarrail--estricto + g .guardarrail__rotulo, .guardarrail__rotulo--estricto { fill: var(--lento); }
.cola__casilla { fill: var(--lento-fondo); stroke: var(--lento); stroke-width: 0.7; }