/* Tablero de proyectos ML. Los colores salen del sistema de diseño TrueML (vendor/trueml/tokens.css va antes que este
   archivo): aquí los tokens propios del tablero apuntan a los --tm-*, que cambian solos entre claro y oscuro.
   La forma TrueML (cuadrícula, franja de 6 colores, T de vidrio, botones amarillos, mapa sobre azul marino) está en
   trueml.css, que va al final. El color de cada línea del mapa es la etapa de la T donde cae el paso
   (datos amarillo, modelo naranja, API verde, contenedor azul, orquestación violeta, monitoreo gris azulado);
   la cadencia (semanas, días, milisegundos, continuo) va escrita en el mapa y en cada paso. */
:root {
  --bg: var(--tm-bg); --paper: var(--tm-card); --ink: var(--tm-ink); --ink2: var(--tm-ink2); --muted: var(--tm-ink3); --rule: var(--tm-line); --grid: var(--tm-grid);
  --accent: var(--tm-acc); --accent-ink: #2C45D6; --accent-soft: var(--tm-chip); --accent2: var(--tm-okink); --ok-soft: var(--tm-ok);
  --hi: var(--yd); --hi-soft: #FBF0D8; --hi-ink: #8F6210; --warn: #C2441D; --warn-soft: #FCE9E1; --free: var(--tm-line); --onbar: #FFFFFF;
  --code-bg: var(--tm-chip); --pu: #6150D9; --pu-soft: #EEEBFF; --new: var(--p); --new-soft: #EEEBFF;
  /* las 6 etapas de la T: --st-* es el color de línea y --st-*-ink el de texto (más oscuro en claro, para que se lea) */
  --st-diseno: var(--tm-lead); --st-diseno-ink: var(--tm-ink2); --st-diseno-soft: var(--tm-chip);
  --st-datos: var(--y); --st-datos-ink: #8F6210; --st-datos-soft: #FCF1D9;
  --st-modelo: var(--o); --st-modelo-ink: #B8441F; --st-modelo-soft: #FDECE4;
  --st-api: var(--g); --st-api-ink: #0C7A5B; --st-api-soft: #E3F7EF;
  --st-contenedor: var(--b); --st-contenedor-ink: #2C45D6; --st-contenedor-soft: #EEF1FF;
  --st-orquestacion: var(--p); --st-orquestacion-ink: #6150D9; --st-orquestacion-soft: #EEEBFF;
  --st-monitoreo: var(--n); --st-monitoreo-ink: #3A4364; --st-monitoreo-soft: #E8EAF3;
  --band: rgba(14, 21, 48, 0.04); --shadow: 0 1px 0 rgba(14, 21, 48, 0.07), 0 0 0 1px rgba(14, 21, 48, 0.06);
  --f-display: var(--sans); --f-body: var(--sans); --f-mono: var(--mono);
  --r: 20px; color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --accent-ink: #A9B7FF; --hi: var(--yt); --hi-soft: #352A12; --hi-ink: #FFC857; --warn: #FF8A5C; --warn-soft: #3A1F1A; --free: #1B2450; --onbar: #0A0F22;
  --pu: #A99CFF; --pu-soft: #221E4A; --new-soft: #221E4A;
  --st-datos-ink: #FFC857; --st-datos-soft: #33280F; --st-modelo-ink: #FF8A5C; --st-modelo-soft: #3A1E14; --st-api-ink: #5BE0B5; --st-api-soft: #0F3B30;
  --st-contenedor: #6F86FF; --st-contenedor-ink: #8FA2FF; --st-contenedor-soft: #1B2450; --st-orquestacion: #9A8BFF; --st-orquestacion-ink: #A99CFF; --st-orquestacion-soft: #221E4A;
  --st-monitoreo: #8C95BD; --st-monitoreo-ink: #B4BCDD; --st-monitoreo-soft: #1E2547; --st-diseno: #C9D0EE; --st-diseno-ink: var(--tm-ink2);
  --band: rgba(255, 255, 255, 0.04); --shadow: 0 0 0 1px #232C52; color-scheme: dark; } }
:root[data-theme="dark"] {
  --accent-ink: #A9B7FF; --hi: var(--yt); --hi-soft: #352A12; --hi-ink: #FFC857; --warn: #FF8A5C; --warn-soft: #3A1F1A; --free: #1B2450; --onbar: #0A0F22;
  --pu: #A99CFF; --pu-soft: #221E4A; --new-soft: #221E4A;
  --st-datos-ink: #FFC857; --st-datos-soft: #33280F; --st-modelo-ink: #FF8A5C; --st-modelo-soft: #3A1E14; --st-api-ink: #5BE0B5; --st-api-soft: #0F3B30;
  --st-contenedor: #6F86FF; --st-contenedor-ink: #8FA2FF; --st-contenedor-soft: #1B2450; --st-orquestacion: #9A8BFF; --st-orquestacion-ink: #A99CFF; --st-orquestacion-soft: #221E4A;
  --st-monitoreo: #8C95BD; --st-monitoreo-ink: #B4BCDD; --st-monitoreo-soft: #1E2547; --st-diseno: #C9D0EE; --st-diseno-ink: var(--tm-ink2);
  --band: rgba(255, 255, 255, 0.04); --shadow: 0 0 0 1px #232C52; color-scheme: dark;
}
/* la etapa de la T de un paso (map.js → stageOf): --ln es el color de la línea, --ln-ink el del texto */
.stg-diseno { --ln: var(--st-diseno); --ln-soft: var(--st-diseno-soft); --ln-ink: var(--st-diseno-ink); }
.stg-datos { --ln: var(--st-datos); --ln-soft: var(--st-datos-soft); --ln-ink: var(--st-datos-ink); }
.stg-modelo { --ln: var(--st-modelo); --ln-soft: var(--st-modelo-soft); --ln-ink: var(--st-modelo-ink); }
.stg-api { --ln: var(--st-api); --ln-soft: var(--st-api-soft); --ln-ink: var(--st-api-ink); }
.stg-contenedor { --ln: var(--st-contenedor); --ln-soft: var(--st-contenedor-soft); --ln-ink: var(--st-contenedor-ink); }
.stg-orquestacion { --ln: var(--st-orquestacion); --ln-soft: var(--st-orquestacion-soft); --ln-ink: var(--st-orquestacion-ink); }
.stg-monitoreo { --ln: var(--st-monitoreo); --ln-soft: var(--st-monitoreo-soft); --ln-ink: var(--st-monitoreo-ink); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--f-body); overflow-wrap: break-word;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: 56px;
}
.wrap { max-width: 1120px; margin: 0 auto; }
h1, h2, h3, h4, .ui, button, input, select, textarea, .chip, .tabs, label, .k { font-family: var(--f-display); }
h1 { font-size: 30px; line-height: 1.15; margin: 18px 0 6px; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: 21px; line-height: 1.25; margin: 0 0 10px; text-wrap: balance; }
h3 { font-size: 16.5px; margin: 0 0 8px; }
a { color: var(--accent); }
p { margin: 0 0 10px; }
code, .mono { font-family: var(--f-mono); font-size: 0.86em; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
code { background: var(--code-bg); border: 1px solid var(--rule); border-radius: 5px; padding: 0 4px; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.small { font-size: 14.5px; color: var(--muted); }
.muted { color: var(--muted); }
.k { font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.nb { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ic { width: 1.05em; height: 1.05em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.16em; }

/* ---------- barra superior */
.bar { position: sticky; top: 0; z-index: 20; margin: 0 -16px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.bar__in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 800 17px var(--f-display); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; flex: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.bar__title { flex: 1; min-width: 0; font: 600 15px var(--f-display); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--f-display); color: var(--muted); padding: 4px 10px; border-radius: 99px; background: var(--paper); border: 1px solid var(--rule); white-space: nowrap; }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); flex: none; }
.sync[data-s="saving"] i { background: var(--accent); animation: pulse 1s infinite; }
.sync[data-s="offline"] i { background: var(--hi); }
.sync[data-s="error"] i { background: var(--warn); }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (max-width: 520px) { .sync b { display: none; } .bar__title { display: none; } }

/* ---------- botones y formularios */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); font: 650 15px var(--f-display); cursor: pointer; text-decoration: none; touch-action: manipulation; }
.btn:hover { border-color: var(--accent); }
.btn--primary { background: var(--accent); color: var(--onbar); border-color: var(--accent); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); border-color: transparent; }
.btn--danger { color: var(--warn); }
.btn--danger:hover { border-color: var(--warn); }
.btn--sm { min-height: 34px; padding: 5px 10px; font-size: 14px; border-radius: 8px; }
.btn--icon { width: 40px; padding: 0; }
.btn--sm.btn--icon { width: 34px; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row--end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
label.f { display: grid; gap: 4px; font-weight: 650; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
input[type="text"], input[type="password"], input[type="date"], input[type="url"], select, textarea {
  width: 100%; font: 400 16px var(--f-display); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 9px; padding: 9px 11px; min-height: 42px;
}
textarea { font: 400 16px/1.5 var(--f-body); resize: vertical; min-height: 84px; }
textarea.mono, input.mono { font-family: var(--f-mono); font-size: 14.5px; font-variant-ligatures: none; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.grid2 { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid2 .span2 { grid-column: span 2; } }

/* segmentados: estado y vueltas */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { min-height: 38px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 650 14px var(--f-display); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg button[aria-pressed="true"].st-hecho { background: var(--accent2); border-color: var(--accent2); color: var(--onbar); }
.seg button[aria-pressed="true"].st-en_curso { background: var(--accent); border-color: var(--accent); color: var(--onbar); }
.seg button[aria-pressed="true"].st-bloqueado { background: var(--warn); border-color: var(--warn); color: var(--onbar); }
.seg button[aria-pressed="true"].st-no_aplica { background: var(--muted); border-color: var(--muted); color: var(--paper); }

/* chips de estado */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-weight: 650; font-size: 12.5px; line-height: 1.6; background: var(--free); color: var(--muted); white-space: nowrap; }
.chip--hecho { background: var(--ok-soft); color: var(--accent2); }
.chip--en_curso { background: var(--accent-soft); color: var(--accent); }
.chip--bloqueado { background: var(--warn-soft); color: var(--warn); }
.chip--no_aplica { background: transparent; border: 1px dashed var(--rule); color: var(--muted); }
.chip--next { background: var(--hi-soft); color: var(--hi-ink); }
.chip--line { background: var(--ln-soft); color: var(--ln-ink); }
.chip--claude { background: var(--pu-soft); color: var(--pu); }
.chip--gate { background: var(--hi-soft); color: var(--hi-ink); }
.chip--waived { background: transparent; border: 1px dashed var(--hi); color: var(--hi-ink); }
.chip--wrong { background: var(--warn-soft); color: var(--warn); }
.chip--revealed { background: var(--pu-soft); color: var(--pu); }

/* ---------- tarjetas */
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.card + .card { margin-top: 12px; }
.stack > * + * { margin-top: 14px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.pcard { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.pcard:hover { border-color: var(--accent); }
.pcard h2 { margin: 0; font-size: 19px; }
.pbar { height: 8px; border-radius: 99px; background: var(--free); overflow: hidden; display: flex; }
.pbar i { display: block; height: 100%; background: var(--accent2); }
.pbar i + i { background: var(--accent); }
.days { font: 800 15px var(--f-display); }
.days[data-l="ok"] { color: var(--accent2); } .days[data-l="mid"] { color: var(--hi-ink); } .days[data-l="old"] { color: var(--warn); }

/* ---------- encabezado del proyecto y pestañas */
.phead { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; justify-content: space-between; margin: 6px 0 14px; }
.phead h1 { margin: 10px 0 4px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: 18px 0 14px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 12px; font-weight: 700; font-size: 15px; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }

/* ---------- panel Retomar */
.resume { display: grid; gap: 14px; grid-template-columns: 1fr; border-left: 5px solid var(--hi); }
@media (min-width: 900px) { .resume { grid-template-columns: 1.5fr 1fr; } }
.resume h2 { display: flex; align-items: center; gap: 8px; }
.rblock { border-top: 1px dashed var(--rule); padding-top: 10px; margin-top: 10px; }
.rblock:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.rtext { white-space: pre-wrap; }
.rtext:empty::before { content: "Toca «Editar» para escribirlo."; color: var(--muted); font-style: italic; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--bg); border-radius: 10px; padding: 10px; text-align: center; }
.stat b { display: block; font: 800 26px/1.1 var(--f-display); }
.stat span { font: 600 12.5px var(--f-display); color: var(--muted); }
.stat[data-l="ok"] b { color: var(--accent2); } .stat[data-l="mid"] b { color: var(--hi-ink); } .stat[data-l="old"] b { color: var(--warn); }
.mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mini li { display: flex; gap: 8px; align-items: baseline; }
.mini a { font-weight: 650; }

/* ---------- mapa de metro: siempre sobre azul marino, como el mapa del C01 del Dojo (map.js)
   En marino, el azul, el violeta y el gris de monitoreo van en su versión clara (#6F86FF, #9A8BFF, #8C95BD). */
.map {
  --m-diseno: #C9D0EE; --m-datos: var(--y); --m-modelo: var(--o); --m-api: var(--g); --m-contenedor: #6F86FF; --m-orquestacion: #9A8BFF; --m-monitoreo: #8C95BD;
  --m-ink: #EEF1FB; --m-ink2: #C9D0EE; --m-ink3: #8C95BD; --m-navy: var(--navy);
  /* los chips y textos de adentro leen estos tokens: versión para fondo marino */
  --ink: var(--m-ink); --muted: var(--m-ink3); --paper: #141C3A; --rule: rgba(255, 255, 255, 0.14); --free: rgba(255, 255, 255, 0.09);
  --accent: #8FA2FF; --accent-soft: rgba(143, 162, 255, 0.18); --accent2: #5BE0B5; --ok-soft: rgba(91, 224, 181, 0.16);
  --hi: var(--yt); --hi-soft: rgba(255, 200, 87, 0.16); --hi-ink: var(--yt); --warn: #FF8A5C; --warn-soft: rgba(255, 138, 92, 0.18);
  --pu: #A99CFF; --pu-soft: rgba(169, 156, 255, 0.18);
  position: relative; overflow: hidden; border-radius: 24px; color: var(--m-ink);
  background-color: var(--navy); background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 24px 24px; box-shadow: 0 18px 40px -18px rgba(14, 21, 48, 0.55);
  padding: 26px clamp(22px, 2.6vw, 34px) 18px;
}
:root[data-theme="dark"] .map { box-shadow: 0 0 0 1px #232C52, 0 18px 40px -18px rgba(0, 0, 0, 0.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map { box-shadow: 0 0 0 1px #232C52, 0 18px 40px -18px rgba(0, 0, 0, 0.7); } }
.map .stg-diseno { --mc: var(--m-diseno); } .map .stg-datos { --mc: var(--m-datos); } .map .stg-modelo { --mc: var(--m-modelo); }
.map .stg-api { --mc: var(--m-api); } .map .stg-contenedor { --mc: var(--m-contenedor); } .map .stg-orquestacion { --mc: var(--m-orquestacion); } .map .stg-monitoreo { --mc: var(--m-monitoreo); }
.map__stripe { position: absolute; top: 0; left: 0; right: 0; height: 6px; }

/* encabezado: el avance y la T */
.map__head { display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; padding: 0 2px 18px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.map__sum { flex: 1; min-width: 0; display: grid; gap: 8px; }
.map__eyebrow { margin: 0; font: 700 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-ink3); }
.map__big { margin: 0; font: 600 15px/1.3 var(--sans); color: var(--m-ink2); }
.map__big b { font: 800 26px/1 var(--sans); letter-spacing: -0.02em; color: #fff; margin-right: 2px; }
.map__big span { color: var(--m-ink3); } .map__big .warn { color: var(--warn); }
.map__pips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; max-width: 520px; }
.map__pips i { height: 7px; border-radius: 2px; background: var(--mc); opacity: 0.24; }
.map__pips i[data-s="hecho"] { opacity: 1; }
.map__pips i[data-s="en_curso"] { opacity: 1; background: linear-gradient(90deg, var(--mc) 50%, color-mix(in srgb, var(--mc) 24%, transparent) 50%); }
.map__pips i[data-s="bloqueado"] { opacity: 1; background: var(--warn); }
.map__pips i[data-s="no_aplica"] { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.map__hint { margin: 0; min-height: 1.45em; font: 500 12px/1.45 var(--mono); color: var(--m-ink3); }
.map[data-focus] .map__hint { color: var(--m-ink); }
.map__t { flex: none; width: clamp(76px, 10vw, 120px); margin: -6px 4px -10px 0; }
.map__t svg { display: block; width: 100%; height: auto; }

/* la línea: el brillo ancho debajo, el trazo de color de cada etapa encima y los puntos que fluyen */
.map__body { position: relative; }
.map__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map__lines path { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.25s ease; }
.map__lines .glow { stroke: var(--mc); stroke-width: 24; stroke-linecap: butt; opacity: 0.16; }
.map__lines .ln { stroke: var(--mc); stroke-width: 9; }
.map__lines .na { stroke: rgba(255, 255, 255, 0.28); stroke-width: 4; stroke-dasharray: 0.1 10; }
.map__lines .flow { stroke: #fff; stroke-width: 3; stroke-dasharray: 0.1 22; opacity: 0.5; animation: map-flow 1.4s linear infinite; }
@keyframes map-flow { to { stroke-dashoffset: -22; } }

/* las estaciones */
.stations { position: relative; display: grid; gap: 0; }
.stations .st { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 2px; text-decoration: none; color: inherit; border-radius: 14px; transition: opacity 0.25s ease; }
.stations .st:focus-visible { outline: 2px solid var(--yt); outline-offset: 0; }
.st__dot, .lg__dot { width: 48px; height: 48px; display: grid; place-items: center; position: relative; z-index: 1; }
.st__dot svg, .lg__dot svg { width: 48px; height: 48px; overflow: visible; transition: transform 0.2s ease; }
.stations .st:hover .st__dot svg, .stations .st:focus-visible .st__dot svg { transform: scale(1.08); }
:is(.st, .lg) .o { fill: var(--m-navy); stroke: var(--mc); stroke-width: 5; }
:is(.st, .lg) .n { font: 800 14px var(--mono); fill: #fff; }
:is(.st, .lg) .ck { fill: none; stroke: var(--m-navy); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.st, .lg) .half { fill: var(--mc); opacity: 0.55; }
:is(.st, .lg) .halo { fill: none; stroke: var(--mc); stroke-width: 2; opacity: 0.5; animation: halo 1.8s ease-out infinite; transform-origin: 24px 24px; }
:is(.st, .lg) .nx { fill: none; stroke: var(--yt); stroke-width: 3; }
:is(.st, .lg) .own circle { fill: var(--m-ink); stroke: var(--m-navy); stroke-width: 2; }
:is(.st, .lg) .own path { stroke: var(--m-navy); stroke-width: 1.8; stroke-linecap: round; }
@keyframes halo { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.5); opacity: 0; } }
:is(.st, .lg)[data-s="hecho"] .o { fill: var(--mc); }
:is(.st, .lg)[data-s="en_curso"] .n { paint-order: stroke; stroke: var(--m-navy); stroke-width: 3px; }
:is(.st, .lg)[data-s="bloqueado"] .o { fill: var(--warn); stroke: #fff; stroke-width: 3; }
:is(.st, .lg)[data-s="bloqueado"] .n { fill: var(--m-navy); font-size: 18px; }
:is(.st, .lg)[data-s="no_aplica"] .o { stroke: rgba(255, 255, 255, 0.34); stroke-width: 2.5; stroke-dasharray: 4 4; }
:is(.st, .lg)[data-s="no_aplica"] .n { fill: var(--m-ink3); }
.st__b { min-width: 0; padding-top: 2px; }
.st__t { font: 700 15.5px/1.25 var(--sans); letter-spacing: -0.01em; display: block; color: var(--m-ink); text-wrap: balance; }
.stations .st:hover .st__t, .stations .st:focus-visible .st__t { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.stations .st[data-next] .st__t { color: var(--yt); }
.stations .st[data-s="no_aplica"] .st__t { color: var(--m-ink3); }
.st__m { display: flex; flex-wrap: wrap; gap: 4px 5px; margin-top: 6px; align-items: center; }
.st__x { display: block; margin-top: 5px; font: 500 11.5px/1.45 var(--mono); color: var(--m-ink3); }
.vv b { color: var(--accent2); }
.st__why { font: 13px/1.4 var(--sans); color: var(--m-ink3); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.map .chip { font: 700 11.5px/1.65 var(--sans); padding: 1px 8px; }
.map .chip--next { background: var(--yt); color: var(--navy); }
/* el tramo y su cadencia (solo en la línea vertical) */
.band { grid-column: 1 / -1; font: 500 11px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--m-ink3); padding: 14px 4px 4px 62px; }
.band b { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc); }
.stations .band:first-child { padding-top: 0; }
.map__empty { margin: 0; padding: 10px 2px; color: var(--m-ink3); font: 500 14px var(--sans); }
.loopnote { display: flex; gap: 8px; align-items: center; margin: 4px 0 0; padding: 8px 2px 0 62px; font: 600 12px/1.4 var(--mono); letter-spacing: 0.02em; color: var(--m-monitoreo); }
.loopnote span { font-size: 15px; }
/* al pasar por una estación: su etapa queda y las demás se atenúan */
.map[data-focus="diseno"] .stations .st:not(.stg-diseno), .map[data-focus="datos"] .stations .st:not(.stg-datos),
.map[data-focus="modelo"] .stations .st:not(.stg-modelo), .map[data-focus="api"] .stations .st:not(.stg-api),
.map[data-focus="contenedor"] .stations .st:not(.stg-contenedor), .map[data-focus="orquestacion"] .stations .st:not(.stg-orquestacion),
.map[data-focus="monitoreo"] .stations .st:not(.stg-monitoreo) { opacity: 0.34; }
.map[data-focus="diseno"] .map__lines path:not(.stg-diseno), .map[data-focus="datos"] .map__lines path:not(.stg-datos),
.map[data-focus="modelo"] .map__lines path:not(.stg-modelo), .map[data-focus="api"] .map__lines path:not(.stg-api),
.map[data-focus="contenedor"] .map__lines path:not(.stg-contenedor), .map[data-focus="orquestacion"] .map__lines path:not(.stg-orquestacion),
.map[data-focus="monitoreo"] .map__lines path:not(.stg-monitoreo) { opacity: 0.12; }
.map[data-focus] .map__lines .flow { opacity: 0; }
@media (prefers-reduced-motion: reduce) { :is(.st, .lg) .halo, .map__lines .flow { animation: none; } .map__lines .flow { display: none; } .sync[data-s="saving"] i { animation: none; } }

/* serpentina en pantallas anchas: map.js pone cada estación en su fila y columna */
.map[data-layout="grid"] .stations { gap: 18px 10px; padding: 4px 0 6px; }
.map[data-layout="grid"] .stations .st { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 0 4px 6px; gap: 8px; }
.map[data-layout="grid"] .st__m { justify-content: center; }
.map[data-layout="grid"] .band { display: none; }
.map[data-layout="grid"] .loopnote { padding-left: 2px; justify-content: center; }
.map[data-layout="grid"] .st__why { -webkit-line-clamp: 3; }

/* la clave del mapa */
.legend { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); font: 600 12.5px/1.4 var(--sans); color: var(--m-ink2); }
.legend__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.legend__k { font: 700 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-ink3); min-width: 92px; }
.legend__row > span:not(.legend__k) { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 22px; height: 6px; border-radius: 99px; background: var(--mc); display: inline-block; box-shadow: 0 0 10px color-mix(in srgb, var(--mc) 45%, transparent); }
.legend .lg { gap: 4px; }
.lg__dot, .lg__dot svg { width: 24px; height: 24px; }
@media (max-width: 520px) { .legend__k { min-width: 0; width: 100%; } }
.edit-steps { display: grid; gap: 8px; }
.erow { display: flex; gap: 8px; align-items: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 6px 8px; }
.erow .grow { font: 650 15px var(--f-display); }
.erow .dotmini { width: 14px; height: 14px; border-radius: 50%; background: var(--ln); flex: none; box-shadow: 0 0 0 3px var(--ln-soft); }

/* ---------- detalle del paso */
.crumbs { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 14px var(--f-display); }
.crumbs a { text-decoration: none; }
.shead { border-left: 6px solid var(--ln); padding-left: 12px; margin: 8px 0 14px; }
.shead h1 { margin: 4px 0 6px; }
.question { font-style: italic; color: var(--muted); }
.sec { margin-top: 12px; }
.sec h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.sec h2 .count { font: 700 13px var(--f-display); color: var(--muted); }
.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.item { min-width: 0; display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); }
.item .grow > :last-child { margin-bottom: 0; }
.item__acts { display: flex; gap: 2px; flex: none; }
.item--ok .item__text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule); }
.check { width: 24px; height: 24px; flex: none; margin-top: 1px; accent-color: var(--accent2); }
.res { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.res__v { font: 800 17px var(--f-mono); font-variant-ligatures: none; white-space: nowrap; text-align: right; }
.res__v small { font: 600 13px var(--f-display); color: var(--muted); }
pre.cmd { margin: 0; white-space: pre-wrap; word-break: break-word; font: 14px/1.5 var(--f-mono); font-variant-ligatures: none; background: var(--code-bg); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; }
.form { border: 1px dashed var(--accent); border-radius: 10px; padding: 12px; background: var(--paper); }
.notes { white-space: pre-wrap; }
.links { display: grid; gap: 6px; }
.links a { display: flex; gap: 8px; align-items: baseline; text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.links a:hover { background: var(--accent-soft); }
.links a span { text-decoration: underline; text-decoration-color: var(--accent-soft); }
.stepnav { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
.stepnav a { max-width: 48%; }
details.about { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; }
details.about summary { cursor: pointer; font: 700 15px var(--f-display); }

/* ---------- bitácora y decisiones */
.log { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.log li .card { margin: 0; }
.log dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.log dt { font: 700 13px var(--f-display); color: var(--muted); padding-top: 2px; }
.log dd { margin: 0; white-space: pre-wrap; }

/* ---------- patrones (nuevo proyecto) */
.patterns { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pat { text-align: left; cursor: pointer; display: grid; gap: 6px; align-content: start; font: inherit; color: inherit; }
.pat[aria-pressed="true"] { border-color: var(--accent); outline: 2px solid var(--accent); }
.pat h3 { margin: 0; font-size: 17px; }
.pat ol { margin: 4px 0 0; padding-left: 20px; font: 500 13.5px/1.45 var(--f-display); color: var(--muted); }

/* ---------- diálogos y avisos */
dialog { border: 1px solid var(--rule); border-radius: 14px; padding: 0; background: var(--paper); color: var(--ink); width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5); }
dialog::backdrop { background: rgba(14, 19, 26, 0.55); }
.dlg { display: grid; grid-template-rows: auto 1fr auto; max-height: calc(100vh - 34px); }
.dlg header, .dlg footer { padding: 12px 16px; display: flex; gap: 8px; align-items: center; }
.dlg header { border-bottom: 1px solid var(--rule); justify-content: space-between; }
.dlg header h2 { margin: 0; font-size: 18px; }
.dlg footer { border-top: 1px solid var(--rule); justify-content: flex-end; flex-wrap: wrap; }
.dlg .body { padding: 14px 16px; overflow: auto; }
.dlg pre.md { margin: 0; white-space: pre-wrap; word-break: break-word; font: 13.5px/1.5 var(--f-mono); font-variant-ligatures: none; background: var(--code-bg); border: 1px solid var(--rule); border-radius: 8px; padding: 10px; }
.pick { display: grid; gap: 6px; }
.pick button { text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); color: var(--ink); font: 650 15px var(--f-display); cursor: pointer; }
.pick button:hover { border-color: var(--accent); }
.pick button small { font: 500 13px var(--f-body); color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--paper); font: 600 14.5px var(--f-display); padding: 10px 16px; border-radius: 12px; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.toast[data-kind="error"] { background: var(--warn); color: #fff; }
.banner { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--hi-soft); color: var(--hi-ink); font: 600 14.5px var(--f-display); }
.banner--error { background: var(--warn-soft); color: var(--warn); }
.empty { text-align: center; padding: 28px 16px; }
.login { max-width: 420px; margin: 9vh auto 0; }
.login img { width: 56px; height: 56px; border-radius: 14px; }
.footer { margin-top: 36px; font: 500 13px var(--f-display); color: var(--muted); text-align: center; }

/* ---------- entry gate (sizing) */
.gate { border-left: 5px solid var(--hi); }
.gate[data-state="met"] { border-left-color: var(--accent2); }
.gate[data-state="waived"] { border-left-color: var(--muted); }
.calcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.calc { border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); padding: 10px 12px; min-width: 0; }
.calc__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.calc__head b { font: 750 15.5px var(--f-display); }
.calc__why { font-size: 14px; color: var(--muted); margin: 2px 0 6px; }
.calc__in { font: 500 13px/1.5 var(--f-mono); font-variant-ligatures: none; color: var(--muted); overflow-wrap: anywhere; }
.calc__in .miss { color: var(--warn); }
.calc__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.calc__row input { width: 11em; flex: none; font-family: var(--f-mono); font-variant-ligatures: none; }
.calc__unit { font: 600 14px var(--f-display); color: var(--muted); }
.calc__fx { margin-top: 6px; font: 13.5px/1.5 var(--f-mono); font-variant-ligatures: none; background: var(--code-bg); border: 1px dashed var(--rule); border-radius: 8px; padding: 6px 8px; overflow-wrap: anywhere; }
.calc__val { font: 800 15px var(--f-mono); font-variant-ligatures: none; color: var(--pu); }
.calc__check { font: 600 13.5px var(--f-display); margin-top: 6px; }
.calc__check[data-ok="true"] { color: var(--accent2); } .calc__check[data-ok="false"] { color: var(--warn); }
.vars { width: 100%; border-collapse: collapse; font: 500 14.5px var(--f-display); }
.vars th { text-align: left; font: 700 12.5px var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 6px 6px; border-bottom: 1px solid var(--rule); }
.vars td { padding: 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.vars td input { min-height: 36px; padding: 6px 8px; font-family: var(--f-mono); font-variant-ligatures: none; }
.vars code { font-size: 12.5px; }
.tablewrap { overflow-x: auto; }
@media (max-width: 640px) {
  .vars thead { display: none; }
  .vars tr { display: grid; grid-template-columns: 1fr 9em; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .vars td { border: 0; padding: 2px 0; }
  .vars td.src { grid-column: 1 / -1; }
}

/* demo */
#logout { display: none !important; }
.demo-banner { max-width: 1120px; margin: 14px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 10px 10px 18px; background: var(--tm-card, #fff); border-radius: 16px; box-shadow: var(--shadow, 0 0 0 1px rgba(14, 21, 48, .08)), inset 4px 0 0 var(--yt, #FFC857); font: 14px/1.45 var(--sans, system-ui, sans-serif); color: var(--ink2, #3A4364); }
.demo-banner strong { color: var(--ink, #0E1530); }
.demo-banner p { margin: 0; }
.demo-banner__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-weight: 600; }