/* ==========================================================================
   Estilo propio de New Capital Bank.
   Se carga después de style.css y simulation.css, que son el motor del kit.
   ========================================================================== */

:root {
  /* Tipos de equipo de Team Topologies */
  --tt-stream: #d9a514;
  --tt-platform: #3f6fd0;
  --tt-enabling: #8a5cc4;
  --tt-complicated: #d0602e;
  /* Origen de un componente (dominio-new-capital-bank.md): construido,
     comprado o heredado de la matriz. No se confunden con los colores de
     estado del motor (azul, verde, ámbar, rojo). */
  --origin-built: #a2378f;
  --origin-bought: #1b7f8c;
  --origin-inherited: #5b6b82;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --origin-built: #e47fd0;
    --origin-bought: #4fc1cf;
    --origin-inherited: #9aa9bf;
    --tt-stream: #e8bd3c;
    --tt-platform: #7b9ae6;
    --tt-enabling: #b18ce6;
    --tt-complicated: #ec8155;
  }
}
:root[data-theme="dark"] {
  --origin-built: #e47fd0;
  --origin-bought: #4fc1cf;
  --origin-inherited: #9aa9bf;
  --tt-stream: #e8bd3c;
  --tt-platform: #7b9ae6;
  --tt-enabling: #b18ce6;
  --tt-complicated: #ec8155;
}

/* ---------- Mapa de Wardley (web/assets/wardley.js) ---------- */

.wmap__axis { stroke: var(--ink-soft); stroke-width: 1; }
.wmap__stage-line { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 4; }
.wmap__stage { font-size: 10px; fill: var(--ink-soft); text-anchor: middle; letter-spacing: 0.06em; text-transform: uppercase; }
.wmap__axis-label { font-size: 9px; fill: var(--ink-soft); letter-spacing: 0.06em; }
.wmap__edge { stroke: var(--line); stroke-width: 1; }
.wmap__edge--active { stroke: var(--active); stroke-width: 1.6; }
.wmap__edge--dim { opacity: 0.25; }

.wmap__node circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.wmap__node text { font-size: 11px; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.wmap__node .wmap__detail { font-size: 9px; fill: var(--ink-soft); }
.wmap__node--need circle { stroke-width: 2.4; }
.wmap__node--need .wmap__name { font-weight: 700; }
.wmap__node--legacy circle { stroke-dasharray: 2 2; stroke: var(--ink-soft); }
.wmap__node--legacy .wmap__name { fill: var(--ink-soft); }

.wmap__node--active circle { stroke: var(--active); stroke-width: 2.6; fill: var(--active-bg); }
.wmap__node--active .wmap__name { fill: var(--active); font-weight: 600; }
.wmap__node--ok circle { stroke: var(--ok); stroke-width: 2.4; }
.wmap__node--slow circle { stroke: var(--slow); stroke-width: 2.4; }
.wmap__node--fail circle { stroke: var(--fail); stroke-width: 2.4; }
.wmap__node--dim { opacity: 0.3; }

/* Coloreado por origen (o por decisión: construir, comprar, heredar) */
.wmap--color .wmap__node--built circle { fill: var(--origin-built); stroke: var(--origin-built); }
.wmap--color .wmap__node--bought circle { fill: var(--origin-bought); stroke: var(--origin-bought); }
.wmap--color .wmap__node--inherited circle { fill: var(--origin-inherited); stroke: var(--origin-inherited); }

/* Subdominios (DDD): núcleo, de soporte, genérico */
.wmap--subdomains .wmap__node--core-domain circle { fill: var(--fail); stroke: var(--fail); }
.wmap--subdomains .wmap__node--supporting circle { fill: var(--slow); stroke: var(--slow); }
.wmap--subdomains .wmap__node--generic circle { fill: var(--paper-3); stroke: var(--ink-soft); }

/* La posición que le da el banco, cuando no coincide con la del lector */
.wmap__ghost { fill: none; stroke: var(--ok); stroke-width: 1.4; stroke-dasharray: 3 2; }
.wmap__ghost-line { stroke: var(--ok); stroke-width: 1; stroke-dasharray: 2 3; }

/* Banda del lado izquierdo del mapa: lo que se puede construir */
.wmap__band { fill: var(--origin-built); opacity: 0.07; }
.wmap__band-label { font-size: 9px; fill: var(--origin-built); letter-spacing: 0.06em; text-transform: uppercase; }

/* Un mapa con doce rótulos no cabe en un móvil: se desplaza dentro del panel */
.panel__diagram { overflow-x: auto; }
.panel__svg.wmap { min-width: 600px; }

/* ---------- Leyendas y barras en el detalle de un panel ---------- */

.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8rem; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; border: 1.4px solid var(--ink); }
.legend .legend--built { background: var(--origin-built); border-color: var(--origin-built); }
.legend .legend--bought { background: var(--origin-bought); border-color: var(--origin-bought); }
.legend .legend--inherited { background: var(--origin-inherited); border-color: var(--origin-inherited); }
.legend .legend--core-domain { background: var(--fail); border-color: var(--fail); }
.legend .legend--supporting { background: var(--slow); border-color: var(--slow); }
.legend .legend--generic { background: var(--paper-3); border-color: var(--ink-soft); }
.legend[hidden] { display: none; }

.capacity { font-size: 0.8rem; font-family: var(--mono); }
.capacity__bar { position: relative; height: 0.9rem; border: 1px solid var(--line); border-radius: 2px; margin-top: 0.3rem; overflow: hidden; }
.capacity__fill { position: absolute; inset: 0 auto 0 0; background: var(--active-bg); border-right: 2px solid var(--active); }
.capacity__fill--fail { background: var(--fail-bg); border-right-color: var(--fail); }
.capacity__limit { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed var(--ink); }

/* Filas de mandos con muchos componentes: el nombre arriba, el control debajo */
.sim .service--stacked { flex-direction: column; align-items: stretch; gap: 0.25rem; }
.sim .service--stacked .segmented { align-self: flex-start; }

/* ---------- Portada del proyecto ---------- */

/* El recorrido: las series como paradas a uno y otro lado de un camino en S.
   El camino y sus hitos los dibuja web/assets/portada.js detrás de las paradas. */
.route-intro { max-width: var(--width-text); margin: 3rem auto 0; }
.route-intro h2 { margin-bottom: 0.2rem; }
.route-intro__note { font-size: 0.8rem; color: var(--ink-soft); }

.route { position: relative; margin-top: 2rem; }
.route__stops { list-style: none; padding: 0; margin: 0; }
.route__stop { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 17rem 1fr; min-height: 12rem; margin: 0; }
.route__stop--cap { min-height: 7rem; }
.route__stop--cap:last-child { min-height: 0; }
.route__mark { grid-column: 2; grid-row: 1; width: 2.4rem; height: 2.4rem; box-sizing: border-box; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); color: var(--accent); font-weight: 700; display: grid; place-items: center; }
.route__mark--cap { width: 1rem; height: 1rem; margin: 0.7rem; background: var(--accent); }
.route__stop--left .route__mark { justify-self: start; }
.route__stop--right .route__mark { justify-self: end; }
.route__card { grid-row: 1; padding: 0.2rem 1.2rem 0; margin: 0; }
.route__stop--left .route__card { grid-column: 1; text-align: right; }
.route__stop--right .route__card { grid-column: 3; }
.route__card h3 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.route__card h3::before { content: none; }
.route__question { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.route__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.route__stop--left .route__tags { justify-content: flex-end; }
.route__tag { font-size: 0.72rem; color: var(--ink-soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0 0.55em; white-space: nowrap; }
.route__start { font-size: 0.8rem; }
.route__episodes { text-align: left; }
.route__episodes summary { cursor: pointer; font-size: 0.82rem; color: var(--accent); }
.route__stop--left .route__episodes summary { text-align: right; }
.route__act { margin: 0.8rem 0 0.1rem; font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.route__episodes ol { font-size: 0.85rem; padding-left: 1.6rem; margin: 0; }
.route__episodes li::marker { color: var(--accent); }
.route__concept { color: var(--ink-soft); }
.route__cap { font-size: 0.82rem; color: var(--ink-soft); padding-top: 0.55rem; }
.route__cap--end::after { content: "▍"; color: var(--accent); animation: parpadeo 1.1s steps(1) infinite; }

.route__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route__path a { pointer-events: auto; }
.route__trail { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 7; }
.route__milestone { fill: var(--paper); stroke: var(--accent); stroke-width: 1.6; }
.route__path a:hover .route__milestone { fill: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .route__trail { animation: marcha 1.6s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .route__cap--end::after { animation: none; }
}
@keyframes marcha { to { stroke-dashoffset: -16; } }

@media (max-width: 760px) {
  .route__stop { grid-template-columns: 3.2rem 1fr; min-height: 10rem; }
  .route__stop--cap { min-height: 6rem; }
  .route__mark { grid-column: 1; }
  .route__stop--left .route__card, .route__stop--right .route__card { grid-column: 2; text-align: left; padding: 0.2rem 0 0 0.8rem; }
  .route__stop--left .route__tags { justify-content: flex-start; }
  .route__stop--left .route__episodes summary { text-align: left; }
}

/* Buscador por concepto, debajo del recorrido */
.finder { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line-soft); }
.finder h2 { margin-top: 0; }
.finder__input { font: inherit; font-size: 0.95rem; width: 100%; box-sizing: border-box; padding: 0.6rem 0.9rem; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
.finder__suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0; }
.finder__suggestions button { font: inherit; font-size: 0.75rem; background: none; color: var(--ink-soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.1rem 0.7rem; cursor: pointer; }
.finder__suggestions button:hover { border-color: var(--accent); color: var(--accent); }
.finder__results { list-style: none; padding: 0; margin: 0; }
.finder__results li { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--line-soft); font-size: 0.88rem; margin: 0; }
.finder__concept { color: var(--code); grid-column: 1 / -1; font-size: 0.78rem; }
.finder__series { color: var(--ink-soft); font-size: 0.78rem; }
.finder__empty { color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- Equipos como recuadros sobre las piezas (episodio 4) ---------- */

.team-box > rect { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 3; }
.team-box .broker__name { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-soft); }

/* ---------- Equipos con la notación de Team Topologies ---------- */

.tt { stroke-width: 1.6; }
.tt--stream { fill: color-mix(in srgb, var(--tt-stream) 22%, var(--paper)); stroke: var(--tt-stream); }
.tt--platform { fill: color-mix(in srgb, var(--tt-platform) 20%, var(--paper)); stroke: var(--tt-platform); }
.tt--enabling { fill: color-mix(in srgb, var(--tt-enabling) 20%, var(--paper)); stroke: var(--tt-enabling); }
.tt--complicated { fill: color-mix(in srgb, var(--tt-complicated) 20%, var(--paper)); stroke: var(--tt-complicated); }
.tt--external { fill: none; stroke: var(--ink-soft); stroke-dasharray: 5 4; }
.tt--over { stroke: var(--fail); stroke-width: 2.4; }
.tt--active { stroke: var(--active); stroke-width: 2.6; }
.tt--dim { opacity: 0.35; }
.tt__name { font-size: 12px; font-weight: 600; }
.tt__sub { font-size: 9.5px; fill: var(--ink-soft); }
.tt__state { font-size: 10px; fill: var(--ink-soft); }
.tt__state--fail { fill: var(--fail); font-weight: 600; }
.tt__state--ok { fill: var(--ok); font-weight: 600; }
.tt__state--active { fill: var(--active); }

/* Carga cognitiva: barra apilada con la línea de capacidad (episodio 5) */
.load__track { fill: none; stroke: var(--line-soft); }
.load__seg { stroke: var(--paper); stroke-width: 1; }
.load__seg--domain { fill: var(--active); opacity: 0.75; }
.load__seg--other { fill: var(--ink-soft); opacity: 0.55; }
.load__over { fill: var(--fail-bg); stroke: var(--fail); stroke-width: 1.2; stroke-dasharray: 3 2; }
.load__cap { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 4 3; }
.load__cap-label { font-size: 9px; fill: var(--ink-soft); }
.load__label { font-size: 9.5px; fill: var(--paper); font-weight: 600; }
.legend .legend--domain { background: var(--active); border-color: var(--active); border-radius: 2px; }
.legend .legend--other { background: var(--ink-soft); border-color: var(--ink-soft); border-radius: 2px; }
.legend .legend--stream { background: var(--tt-stream); border-color: var(--tt-stream); border-radius: 2px; }
.legend .legend--platform { background: var(--tt-platform); border-color: var(--tt-platform); border-radius: 2px; }
.legend .legend--enabling { background: var(--tt-enabling); border-color: var(--tt-enabling); border-radius: 2px; }
.legend .legend--complicated { background: var(--tt-complicated); border-color: var(--tt-complicated); border-radius: 2px; }

/* Relaciones entre equipos (episodio 6): la forma dice el modo, el color el veredicto */
.tt-link { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.tt-link--pendiente { stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 3 3; }
.tt-link--colaboracion { fill: var(--paper-3); fill-opacity: 0.9; stroke-width: 1.6; }
.tt-link--facilitacion { stroke-width: 4; stroke-dasharray: 0.5 6; stroke-linecap: round; }
.tt-link--ok { stroke: var(--ok); }
.tt-link--slow { stroke: var(--slow); }
.tt-link--fail { stroke: var(--fail); }
.tt-link--colaboracion.tt-link--ok { fill: var(--ok-bg); }
.tt-link--colaboracion.tt-link--slow { fill: var(--slow-bg); }
.tt-link--colaboracion.tt-link--fail { fill: var(--fail-bg); }
.tt-badge { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1.2; }
.tt-badge--ok { stroke: var(--ok); }
.tt-badge--slow { stroke: var(--slow); }
.tt-badge--fail { stroke: var(--fail); }
.tt-badge__text { font-size: 10px; font-weight: 700; }
.sim .service__what { font-size: 0.8rem; color: var(--ink-soft); }

/* Cola de tickets (episodio 7) */
.queue-box rect { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1; }

/* Línea de tiempo hasta producción (episodio 9) */
.step--work { fill: var(--active); opacity: 0.8; }
.step--wait { fill: var(--slow-bg); stroke: var(--slow); stroke-width: 1.2; stroke-dasharray: 3 2; }
.step__label { font-size: 10px; }
.step__label--wait { fill: var(--slow); }
.legend .legend--wait { background: var(--slow-bg); border: 1.2px dashed var(--slow); border-radius: 2px; }

/* Movimiento en el eje de evolución (episodio 10) */
.wmap__ghost--past { stroke: var(--ink-soft); }
.wmap__trail { stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 4 3; }

/* ==========================================================================
   Las áreas del banco
   ========================================================================== */

/* Un color por contexto, el mismo en toda la serie. Se usan como borde y
   relleno suave de las cajas; los colores de estado del motor (azul, verde,
   ámbar, rojo) quedan para lo que pasa durante la simulación. */
:root {
  --ctx-alta: #7a4fb5;
  --ctx-cuentas: #1b7f8c;
  --ctx-operaciones: #b5446e;
  --ctx-remuneracion: #8c6d1f;
  --ctx-tarjetas: #4a5fa8;
  --ctx-fraude: #5f7a2a;
  --ctx-otros: #6b7684;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ctx-alta: #b18ce6;
    --ctx-cuentas: #4fc1cf;
    --ctx-operaciones: #e5809f;
    --ctx-remuneracion: #d4b05a;
    --ctx-tarjetas: #8ea2e8;
    --ctx-fraude: #a6c46a;
    --ctx-otros: #9aa5b3;
  }
}
:root[data-theme="dark"] {
  --ctx-alta: #b18ce6;
  --ctx-cuentas: #4fc1cf;
  --ctx-operaciones: #e5809f;
  --ctx-remuneracion: #d4b05a;
  --ctx-tarjetas: #8ea2e8;
  --ctx-fraude: #a6c46a;
  --ctx-otros: #9aa5b3;
}

.ctx > rect { stroke-width: 1.4; }
.ctx__title { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ctx--alta > rect { fill: color-mix(in srgb, var(--ctx-alta) 12%, var(--paper)); stroke: var(--ctx-alta); }
.ctx--cuentas > rect { fill: color-mix(in srgb, var(--ctx-cuentas) 12%, var(--paper)); stroke: var(--ctx-cuentas); }
.ctx--operaciones > rect { fill: color-mix(in srgb, var(--ctx-operaciones) 12%, var(--paper)); stroke: var(--ctx-operaciones); }
.ctx--remuneracion > rect { fill: color-mix(in srgb, var(--ctx-remuneracion) 12%, var(--paper)); stroke: var(--ctx-remuneracion); }
.ctx--tarjetas > rect { fill: color-mix(in srgb, var(--ctx-tarjetas) 12%, var(--paper)); stroke: var(--ctx-tarjetas); }
.ctx--fraude > rect { fill: color-mix(in srgb, var(--ctx-fraude) 12%, var(--paper)); stroke: var(--ctx-fraude); }
.ctx--otros > rect { fill: var(--paper-2); stroke: var(--ctx-otros); stroke-dasharray: 4 3; }
.ctx--alta .ctx__title { fill: var(--ctx-alta); }
.ctx--cuentas .ctx__title { fill: var(--ctx-cuentas); }
.ctx--operaciones .ctx__title { fill: var(--ctx-operaciones); }
.ctx--remuneracion .ctx__title { fill: var(--ctx-remuneracion); }
.ctx--tarjetas .ctx__title { fill: var(--ctx-tarjetas); }
.ctx--fraude .ctx__title { fill: var(--ctx-fraude); }
.ctx--otros .ctx__title { fill: var(--ink-soft); }
.ctx--active > rect { stroke: var(--active); stroke-width: 2.6; }
.ctx--ok > rect { stroke: var(--ok); stroke-width: 2.4; }
.ctx--slow > rect { stroke: var(--slow); stroke-width: 2.4; fill: var(--slow-bg); }
.ctx--fail > rect { stroke: var(--fail); stroke-width: 2.4; fill: var(--fail-bg); }
.ctx--dim { opacity: 0.3; }
.ctx-text { font-size: 10px; }
.ctx-text--soft { font-size: 9px; fill: var(--ink-soft); }
.ctx-text--fail { fill: var(--fail); font-weight: 600; }
.ctx-text--ok { fill: var(--ok); font-weight: 600; }
.ctx-text--slow { fill: var(--slow); font-weight: 600; }
.ctx-text--active { fill: var(--active); font-weight: 600; }
.ctx-text--strong { font-weight: 700; }

.legend .legend--alta { background: var(--ctx-alta); border-color: var(--ctx-alta); border-radius: 2px; }
.legend .legend--cuentas { background: var(--ctx-cuentas); border-color: var(--ctx-cuentas); border-radius: 2px; }
.legend .legend--operaciones { background: var(--ctx-operaciones); border-color: var(--ctx-operaciones); border-radius: 2px; }
.legend .legend--remuneracion { background: var(--ctx-remuneracion); border-color: var(--ctx-remuneracion); border-radius: 2px; }
.legend .legend--tarjetas { background: var(--ctx-tarjetas); border-color: var(--ctx-tarjetas); border-radius: 2px; }
.legend .legend--fraude { background: var(--ctx-fraude); border-color: var(--ctx-fraude); border-radius: 2px; }

/* Rejilla de marcas (episodio 1: qué cuenta cada contexto como «transacción») */
.mark-cell { fill: var(--paper); stroke: var(--line-soft); }
.mark-cell--on { fill: var(--active-bg); stroke: var(--active); stroke-width: 1.4; }
.mark-cell--ok { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 1.4; }
.mark-cell--fail { fill: var(--fail-bg); stroke: var(--fail); stroke-width: 1.4; }
.mark-cell__text { font-size: 10px; font-weight: 700; }
.mark-cell__text--on { fill: var(--active); }
.mark-cell__text--ok { fill: var(--ok); }
.mark-cell__text--fail { fill: var(--fail); }
.row-line { stroke: var(--line-soft); stroke-width: 1; }
.row-label { font-size: 10.5px; }
.row-label--soft { font-size: 9px; fill: var(--ink-soft); }
.col-label { font-size: 10px; font-weight: 700; text-anchor: middle; }
.col-label--soft { font-size: 9px; fill: var(--ink-soft); text-anchor: middle; }

/* Post-its de Event Storming (episodio 2): los colores son los de la técnica
   y no cambian con el tema, como un post-it de verdad. */
.postit rect { stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.8; filter: drop-shadow(0 1px 1.5px var(--shadow)); }
.postit .postit__text { font-size: 9px; fill: #1f2328; text-anchor: middle; }
.postit--event rect { fill: #f6a04d; }
.postit--command rect { fill: #7fb6e6; }
.postit--aggregate rect { fill: #f5d75a; }
.postit--policy rect { fill: #c9a7e0; }
.postit--external rect { fill: #f3b3c8; }
.postit--actor rect { fill: #fff3a8; }
.postit--hotspot rect { fill: #e5484d; }
.postit--hotspot .postit__text { fill: #ffffff; font-weight: 600; }
.postit--fail rect { stroke: var(--fail); stroke-width: 2.4; }
.postit--ok rect { stroke: var(--ok); stroke-width: 2; }
.postit--dim { opacity: 0.35; }
.legend .legend--event { background: #f6a04d; border-color: #f6a04d; border-radius: 1px; }
.legend .legend--command { background: #7fb6e6; border-color: #7fb6e6; border-radius: 1px; }
.legend .legend--aggregate { background: #f5d75a; border-color: #f5d75a; border-radius: 1px; }
.legend .legend--policy { background: #c9a7e0; border-color: #c9a7e0; border-radius: 1px; }
.legend .legend--external { background: #f3b3c8; border-color: #f3b3c8; border-radius: 1px; }
.legend .legend--hotspot { background: #e5484d; border-color: #e5484d; border-radius: 1px; }
.wall { fill: var(--paper-2); stroke: var(--line-soft); }
.wall__time { stroke: var(--ink-soft); stroke-width: 1.2; }
.wall__tray { fill: none; stroke: var(--line); stroke-dasharray: 3 3; }
.frontier { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; }
.frontier__label { font-size: 9.5px; font-weight: 700; text-anchor: middle; letter-spacing: 0.05em; text-transform: uppercase; }
.clue { font-size: 9px; text-anchor: middle; }
.clue--lenguaje { fill: var(--active); font-style: italic; }
.clue--pivote { fill: var(--fail); font-weight: 700; }
.clue--quien { fill: var(--ink-soft); }

/* Relaciones de un mapa de contextos (episodio 4) */
.rel { stroke: var(--line); stroke-width: 1.6; fill: none; }
.rel--ok { stroke: var(--ok); stroke-width: 2.2; }
.rel--slow { stroke: var(--slow); stroke-width: 2.2; }
.rel--fail { stroke: var(--fail); stroke-width: 2.2; }
.rel-badge { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1; }
.rel-badge--ok { stroke: var(--ok); }
.rel-badge--slow { stroke: var(--slow); }
.rel-badge--fail { stroke: var(--fail); }
.rel-badge__text { font-size: 9px; font-weight: 700; text-anchor: middle; }
.ud { font-size: 8.5px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }
.acl rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2 2; }
.leak { font-size: 9px; fill: var(--fail); font-weight: 600; }

/* Diagrama de secuencia con carriles (episodio 5) */
.lane__head rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.lane__name { font-size: 10px; font-weight: 600; text-anchor: middle; }
.lane__line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.lane--down .lane__head rect { stroke: var(--fail); stroke-dasharray: 4 3; fill: var(--fail-bg); }
.lane--down .lane__name { fill: var(--fail); }
.lane--new .lane__head rect { stroke: var(--ok); stroke-width: 1.8; }
.seq { stroke: var(--ink); stroke-width: 1.3; fill: none; }
.seq--sync { stroke: var(--ink); }
.seq--command { stroke: var(--active); stroke-width: 1.6; }
.seq--event { stroke: var(--ok); stroke-dasharray: 5 3; }
.seq--fail { stroke: var(--fail); }
.seq__text { font-size: 9px; text-anchor: middle; }
.seq__text--command { fill: var(--active); font-weight: 600; }
.seq__text--event { fill: var(--ok); font-weight: 600; }
.seq__text--fail { fill: var(--fail); font-weight: 600; }
.wait-bar { fill: var(--slow-bg); stroke: var(--slow); stroke-width: 1; }
.wait-bar__text { font-size: 8.5px; fill: var(--slow); font-weight: 600; }
.legend .legend--sync { background: var(--ink); border-color: var(--ink); border-radius: 1px; height: 0.2rem; }
.legend .legend--command-line { background: var(--active); border-color: var(--active); border-radius: 1px; height: 0.2rem; }
.legend .legend--event-line { background: var(--ok); border-color: var(--ok); border-radius: 1px; height: 0.2rem; }

/* Cajas de agregado (episodio 7) */
.agg rect { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 7 4; }
.agg__title { font-size: 9.5px; font-weight: 700; }
.agg--active rect { stroke: var(--active); stroke-width: 2.6; fill: var(--active-bg); }
.agg--slow rect { stroke: var(--slow); stroke-width: 2.6; fill: var(--slow-bg); }
.agg--fail rect { stroke: var(--fail); stroke-width: 2.6; fill: var(--fail-bg); }
.datum rect { fill: var(--paper); stroke: var(--line); }
.datum text { font-size: 9px; text-anchor: middle; }
.datum--limit rect { stroke: var(--ctx-operaciones); stroke-width: 1.4; }
.datum--shared rect { stroke: var(--ctx-cuentas); stroke-width: 1.4; stroke-dasharray: 3 2; }
.seq--reply { stroke: var(--ink-soft); stroke-dasharray: 2 2; }
.seq--queued { stroke: var(--slow); stroke-dasharray: 3 3; }
.seq__text--queued { fill: var(--slow); font-weight: 600; }
.seq__note { font-size: 9px; fill: var(--slow); font-weight: 600; }

/* Diagramas anchos de Las áreas del banco: en un móvil se desplazan dentro
   del panel en lugar de encogerse hasta no leerse (como el mapa de Wardley) */
.panel__svg--wide { min-width: 640px; }

/* ==========================================================================
   El dinero no se duplica
   ========================================================================== */

/* Una cifra grande dentro de un diagrama (lo que recibe Marcos, un saldo) */
.big-figure { font-size: 17px; font-weight: 700; }
.big-figure--fail { fill: var(--fail); }
.big-figure--ok { fill: var(--ok); }

/* Pasos de una saga (episodio 2): el pivote, las compensaciones y el
   cursor que recorre las semanas del recibo */
.pivot { stroke: var(--fail); stroke-width: 1.4; stroke-dasharray: 5 4; }
.pivot__label { font-size: 9px; font-weight: 700; fill: var(--fail); letter-spacing: 0.06em; }
.edge--comp { stroke: var(--ok); stroke-width: 1.4; stroke-dasharray: 4 3; }
.cursor { stroke: var(--active); stroke-width: 2; }
.cursor__label { font-size: 10px; font-weight: 700; fill: var(--active); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }

/* Base de datos de un contexto y caída de un servicio (episodio 3) */
.db rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.db__title { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; fill: var(--ink-soft); }
.crash { font-size: 20px; fill: var(--fail); }

/* Dos transacciones en líneas de tiempo (episodio 4) */
.lane-title { font-size: 10px; font-weight: 700; }
.tx-lane { stroke: var(--ink); stroke-width: 1.4; }
.band { fill: var(--paper-2); stroke: var(--line); stroke-dasharray: 4 3; }
.tx-link { stroke-width: 1.1; stroke-dasharray: 2 2; }
.tx-link--lee { stroke: var(--active); }
.tx-link--escribe { stroke: var(--slow); }
.step-dot { stroke: var(--paper); stroke-width: 1.5; }
.step-dot--lee { fill: var(--active); }
.step-dot--comprueba { fill: var(--ink-soft); }
.step-dot--escribe { fill: var(--slow); }
.step-dot--confirma { fill: var(--ok); }
.step-dot--aborta, .step-dot--rechaza { fill: var(--fail); }
.step-label { font-size: 9px; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.step-label--ok { fill: var(--ok); font-weight: 600; }
.step-label--fail { fill: var(--fail); font-weight: 600; }
.cell--dashed rect { stroke-dasharray: 3 2; }
.legend .legend--step-lee { background: var(--active); border-color: var(--active); }
.legend .legend--step-escribe { background: var(--slow); border-color: var(--slow); }
.legend .legend--step-confirma { background: var(--ok); border-color: var(--ok); }
.legend .legend--step-aborta { background: var(--fail); border-color: var(--fail); }

/* Barras de espera y reintento, y grafo de espera (episodio 5) */
.arrival { stroke: var(--ink); stroke-width: 1.4; }
.bar--espera { fill: var(--slow-bg); stroke: var(--slow); stroke-width: 1; stroke-dasharray: 3 2; }
.bar--trabajo { fill: var(--active); opacity: 0.85; }
.bar--fallido { fill: var(--fail-bg); stroke: var(--fail); stroke-width: 1.2; }
.bar--agotado { fill: var(--fail); }
.legend .legend--bar-espera { background: var(--slow-bg); border: 1px dashed var(--slow); border-radius: 2px; }
.legend .legend--bar-trabajo { background: var(--active); border-color: var(--active); border-radius: 2px; }
.legend .legend--bar-fallido { background: var(--fail-bg); border-color: var(--fail); border-radius: 2px; }
.legend .legend--bar-agotado { background: var(--fail); border-color: var(--fail); border-radius: 2px; }
.wf { stroke-width: 2; }
.wf--tiene { stroke: var(--ink); }
.wf--espera { stroke: var(--slow); stroke-dasharray: 5 4; }
.wf--cycle { stroke: var(--fail); stroke-width: 2.6; }
.cycle-label { font-size: 11px; font-weight: 700; fill: var(--fail); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.legend .legend--wf-tiene { background: var(--ink); border-color: var(--ink); border-radius: 1px; height: 0.2rem; }
.legend .legend--wf-espera { background: var(--slow); border-color: var(--slow); border-radius: 1px; height: 0.2rem; }

/* Dos líneas de saldo y la tabla de garantías (episodio 6) */
.zero-line { stroke: var(--ink-soft); stroke-width: 1; }
.saldo-banda { fill: var(--slow-bg); stroke: none; }
.saldo-contable { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.saldo-disponible { fill: none; stroke: var(--active); stroke-width: 2; stroke-dasharray: 5 3; }
.saldo-negativo { fill: var(--fail); stroke: var(--paper); stroke-width: 1.5; }
.legend .legend--saldo-contable { background: var(--ink); border-color: var(--ink); border-radius: 1px; height: 0.2rem; }
.legend .legend--saldo-disponible { background: var(--active); border-color: var(--active); border-radius: 1px; height: 0.2rem; }
.legend .legend--saldo-retencion { background: var(--slow-bg); border-color: var(--slow); border-radius: 2px; }
.explain { font-size: 0.85rem; padding-left: 1.1rem; margin: 0.4rem 0 0; }
.explain li { margin: 0.3rem 0; }
.explain--ok strong { color: var(--ok); }
.explain--pending strong { color: var(--slow); }
.explain--fail strong { color: var(--fail); }

/* La red entre dos zonas (episodio 7) */
.net { stroke: var(--ok); stroke-width: 3; }
.net--cut { stroke: var(--fail); stroke-dasharray: 4 5; }
.net__label { font-size: 16px; fill: var(--fail); }

/* ==========================================================================
   Lo que no controlamos
   ========================================================================== */

/* Plazas de atención y barras de espera (episodio 1) */
.legend .legend--plaza-libre { background: var(--paper); border-color: var(--line); border-radius: 2px; }
.legend .legend--plaza-activa { background: var(--active); border-color: var(--active); border-radius: 2px; }
.legend .legend--plaza-lenta { background: var(--slow); border-color: var(--slow); border-radius: 2px; }
.bar--huerfano { fill: var(--fail-bg); stroke: var(--fail); stroke-width: 1.2; stroke-dasharray: 3 2; }
.legend .legend--bar-huerfano { background: var(--fail-bg); border: 1.2px dashed var(--fail); border-radius: 2px; }

/* Plazas con extractos y compartimentos (episodio 2) */
.legend .legend--plaza-extracto { background: var(--ink); border-color: var(--ink); border-radius: 2px; }
.legend .legend--tipo-bizum { background: var(--active); border-color: var(--active); border-radius: 2px; }
.legend .legend--tipo-nacionales { background: var(--ok); border-color: var(--ok); border-radius: 2px; }
.legend .legend--tipo-internacionales { background: var(--ink); border-color: var(--ink); border-radius: 2px; }
.ctx--cuentas .ctx__title { fill: var(--ctx-cuentas); }

/* Operaciones que reintentan (episodio 3) */
.legend .legend--reintento-hecha { background: var(--ok); border-color: var(--ok); border-radius: 2px; }
.legend .legend--reintento-espera { background: var(--slow); border-color: var(--slow); border-radius: 2px; }
.legend .legend--reintento-lanza { background: var(--active); border-color: var(--active); border-radius: 2px; }
.legend .legend--reintento-fallida { background: var(--fail); border-color: var(--fail); border-radius: 2px; }

/* Circuit breaker (episodio 4) */
.legend .legend--corr-ok { background: var(--ok); border-color: var(--ok); border-radius: 2px; }
.legend .legend--corr-fail { background: var(--fail); border-color: var(--fail); border-radius: 2px; }
.legend .legend--corr-colateral { background: var(--slow); border-color: var(--slow); border-radius: 2px; }
.legend .legend--corr-tokio { background: var(--fail-bg); border: 1.2px dashed var(--fail); border-radius: 2px; }

/* Qué hacer sin Fraude (episodio 5) */
.legend .legend--carta-ok { background: var(--ok); border-color: var(--ok); border-radius: 2px; }
.legend .legend--carta-fail { background: var(--fail); border-color: var(--fail); border-radius: 2px; }
.legend .legend--carta-den { background: var(--slow); border-color: var(--slow); border-radius: 2px; }
.legend .legend--carta-frenada { background: var(--paper); border: 1.2px dashed var(--ink-soft); border-radius: 2px; }
.legend .legend--carta-espera { background: var(--active); border-color: var(--active); border-radius: 2px; }

/* Cubo de fichas y cola con prioridades (episodio 6): reutiliza .queue-box del episodio 7 de De cero a neobanco */

/* ==========================================================================
   Laura no ve su Bizum
   ========================================================================== */

/* Plazas de la primaria y las réplicas (episodio 1): reutiliza .legend--plaza-* de Lo que no controlamos */
.legend .legend--plaza-lectura { background: var(--ink); border-color: var(--ink); border-radius: 2px; }
.ctx--replica > rect { fill: var(--paper-2); stroke: var(--ctx-cuentas); stroke-dasharray: 5 3; stroke-width: 1.4; }
.ctx--replica .ctx__title { fill: var(--ctx-cuentas); }
.ctx--replica.ctx--off { opacity: 0.35; }
.ctx--off > rect { stroke-dasharray: 2 4; }

/* Un valor que no cuadra en un diagrama (episodio 5): .diagram text fija el relleno, así que hace falta más especificidad */
.diagram .val--fail { fill: var(--fail); font-weight: 600; }

/* Tabla de movimientos por filas o por columnas (episodio 6) */
.tabla__celda { fill: var(--paper); stroke: var(--line-soft); stroke-width: 0.6; }
.tabla__celda--util { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 1; }
.tabla__celda--sobra { fill: var(--slow-bg); stroke: var(--slow); stroke-width: 1; }
.tabla__texto { font-size: 8px; text-anchor: middle; }
.tabla__cab { font-size: 9px; font-weight: 700; text-anchor: middle; }
.tabla__linea { stroke: var(--ink); stroke-width: 1.4; opacity: 0.55; }
.legend .legend--tabla-util { background: var(--ok-bg); border-color: var(--ok); border-radius: 2px; }
.legend .legend--tabla-sobra { background: var(--slow-bg); border-color: var(--slow); border-radius: 2px; }

/* ==========================================================================
   Guías de referencia (web/guias/) y episodio cero (web/episodio-cero/)
   ========================================================================== */

/* Diagrama estático de una guía: reutiliza las clases de las simulaciones */
.guide-figure { margin: 1.6rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 1rem 1rem 0.8rem; overflow-x: auto; }
.guide-figure__svg { min-width: 560px; }
.guide-figure figcaption { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.6rem; }
.wmap__inertia { stroke: var(--fail); stroke-width: 4; stroke-linecap: round; }

/* Guía de arquitectura orientada a eventos: reutiliza carriles, cajas de
   contexto y celdas de las series. .diagram text fija el relleno, así que el
   color de un texto va con .val--* (como .val--fail de Laura no ve su Bizum). */
.diagram .val--ok { fill: var(--ok); font-weight: 600; }
.diagram .val--slow { fill: var(--slow); font-weight: 600; }
.diagram .val--active { fill: var(--active); font-weight: 600; }
.diagram .val--soft { fill: var(--ink-soft); }
.arrowhead--ink { fill: var(--ink); }
.arrowhead--ok { fill: var(--ok); }
.arrowhead--active { fill: var(--active); }
/* Árbol de carpetas coloreado con las piezas del diagrama de anatomía */
.tree .tree--contratos { color: var(--ctx-alta); font-weight: 700; }
.tree .tree--entrada { color: var(--ctx-cuentas); font-weight: 700; }
.tree .tree--nucleo { color: var(--ctx-remuneracion); font-weight: 700; }
.tree .tree--salida { color: var(--ctx-operaciones); font-weight: 700; }
.tree .tree--operacion { color: var(--ctx-otros); font-weight: 700; }
.tree .tree__note { color: var(--ink-soft); }

/* Enlace desde un episodio a la guía del marco que usa */
.guide-link { display: flex; gap: 0.8rem; align-items: baseline; margin: 1.2rem 0; padding: 0.7rem 1rem; border: 1px dashed var(--accent); border-radius: var(--radius); font-size: 0.88rem; color: var(--ink); text-decoration: none; }
.guide-link:hover { border-style: solid; color: var(--ink); }
.guide-link__label { flex: none; font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.guide-link__label::before { content: "§ "; }
.guide-link strong { color: var(--ink-strong); }

/* Guías y episodio cero en la portada */
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.extras__item { display: block; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.extras__item:hover { border-color: var(--active); color: var(--ink); }
.extras__kind { display: block; font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.2rem; }
.extras__title { display: block; font-weight: 700; color: var(--ink-strong); }
.extras__concept { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.2rem; }
.finder__kind { font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }

/* Episodio cero: las áreas y los sistemas en la simulación de operaciones */
/* :where() deja la especificidad a cero para que ganen los estados del motor (activo, ok…) */
:where(.node--role-externo) rect { stroke-dasharray: 5 3; }
:where(.node--role-cliente) rect { stroke-width: 1.6; }
.diagram .zona__titulo { font-size: 9px; fill: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; }
.zona { fill: none; stroke: var(--line-soft); stroke-dasharray: 3 4; }

/* Línea de etapas del episodio cero */
.etapas { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.etapas li { border-top: 3px solid var(--accent); padding: 0.6rem 0.2rem 0; }
.etapas li::before { content: none !important; }
.etapas__nombre { display: block; font-weight: 700; color: var(--ink-strong); }
.etapas__cifra { display: block; font-size: 0.82rem; color: var(--ink-soft); }
.etapas__series { display: block; font-size: 0.82rem; margin-top: 0.4rem; }
@media (max-width: 640px) { .etapas { grid-template-columns: 1fr 1fr; } }