/* =========================================================================
   Python a fondo · colección Polyglot · notdefined.dev
   Un solo :root (claro) + html.dark que solo cambia valores.
   Todo el cromo va por tokens. Los colores de DATOS (familias, estados) son
   contrato fijo: idénticos en claro y oscuro.
   ========================================================================= */

/* ---- Fuentes (self-hosted; el sitio funciona sin ellas con el fallback) --- */
@font-face { font-family:"Spectral"; font-weight:600; font-style:normal; font-display:swap; src:url("./fonts/Spectral-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Spectral"; font-weight:700; font-style:normal; font-display:swap; src:url("./fonts/Spectral-Bold.woff2") format("woff2"); }
@font-face { font-family:"Spectral"; font-weight:500; font-style:italic; font-display:swap; src:url("./fonts/Spectral-MediumItalic.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:400; font-style:normal; font-display:swap; src:url("./fonts/SourceSans3-Regular.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:500; font-style:normal; font-display:swap; src:url("./fonts/SourceSans3-Medium.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:600; font-style:normal; font-display:swap; src:url("./fonts/SourceSans3-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:400; font-style:italic; font-display:swap; src:url("./fonts/SourceSans3-Italic.woff2") format("woff2"); }
@font-face { font-family:"Spline Sans Mono"; font-weight:400; font-style:normal; font-display:swap; src:url("./fonts/SplineSansMono-Regular.woff2") format("woff2"); }
@font-face { font-family:"Spline Sans Mono"; font-weight:600; font-style:normal; font-display:swap; src:url("./fonts/SplineSansMono-SemiBold.woff2") format("woff2"); }

/* ---- Tokens: CLARO (papel azul-gris, tinta azul, detalles dorados) -------- */
:root {
  --color-primary:#275B8C;  --color-primary-hover:#1E4970;  --color-primary-muted:#D8E4F0;

  --color-bg-canvas:#EBF1F7; --color-bg-muted:#DDE7F0; --color-bg-surface:#F8FAFD;
  --color-bg-lit:#FDFEFF;    --color-bg-code:#122138;

  --color-fg-default:#1E2A38; --color-fg-subtle:#56677A; --color-fg-faint:#8795A6;

  --color-border-default:#C9D7E4; --color-border-strong:#AFC2D3; --color-border-soft:#D9E4EE;

  --font-display:"Spectral", Georgia, "Times New Roman", serif;
  --font-sans:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:"Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;

  --shadow-sm:0 1px 2px rgba(20,40,70,.08), 0 1px 3px rgba(20,40,70,.06);
  --shadow-md:0 3px 8px rgba(20,40,70,.10), 0 2px 4px rgba(20,40,70,.08);
  --shadow-lg:0 12px 34px rgba(20,40,70,.18), 0 4px 10px rgba(20,40,70,.10);

  /* textura decorativa: rombos entrelazados (±30deg) — NUNCA codifica datos */
  --grid-line:rgba(39,91,140,0.05);

  /* Code panel: fijo oscuro en ambos temas (permitido por contrato) */
  --code-bg:#122138; --code-fg:#E4ECF7; --code-dim:#7E93B4;
}

/* ---- Tokens: OSCURO — ES EL DEFAULT (azul marino nocturno + oro) ---------- */
html.dark {
  --color-primary:#E8B93E;  --color-primary-hover:#EFC95F;  --color-primary-muted:#3A2E14;

  --color-bg-canvas:#16233B; --color-bg-muted:#101A2D; --color-bg-surface:#1E2F4C;
  --color-bg-lit:#253957;    --color-bg-code:#0F1B30;

  --color-fg-default:#EAF0F8; --color-fg-subtle:#A6B4C8; --color-fg-faint:#76839A;

  --color-border-default:#2C4266; --color-border-strong:#3A557E; --color-border-soft:#233755;

  --grid-line:rgba(232,185,62,0.04);
}

/* ---- Colores de DATOS: contrato fijo, iguales en claro y oscuro ----------- */
:root, html.dark {
  --fam-1:#1FA198;  /* Bloque 1 · Compilación y ejecución (teal)   */
  --fam-2:#E06B3B;  /* Bloque 2 · Concurrencia (naranja)           */
  --fam-3:#9B6BD6;  /* Bloque 3 · Memoria y objetos (violeta)      */
  --fam-4:#CE5E8A;  /* Bloque 4 · Modelo de objetos (rosa)         */

  --ok:#1F9D5B;   --ok-bg:rgba(31,157,91,.14);
  --bad:#E15A4D;  --bad-bg:rgba(225,90,77,.14);
  --warn:#E0A32E; --warn-bg:rgba(224,163,46,.16);
}

/* ============================ Base ======================================== */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--color-bg-canvas); color:var(--color-fg-default);
  font-family:var(--font-sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
/* Textura de fondo: dos gradientes a ±30deg formando rombos anchos */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient( 30deg, var(--grid-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(-30deg, var(--grid-line) 0 1px, transparent 1px 40px);
}
#app { position:relative; z-index:1; }

a { color:var(--color-primary); text-decoration:none; }
a:hover { color:var(--color-primary-hover); text-decoration:underline; text-underline-offset:2px; }
code, .mono { font-family:var(--font-mono); }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:3px; }

.wrap { max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,40px); }

/* ============================ Barra superior ============================== */
.topbar {
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--color-bg-canvas) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-border-default);
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; height:54px; }
.topbar a.back { font-family:var(--font-mono); font-size:12px; color:var(--color-fg-subtle); }
.topbar a.back:hover { color:var(--color-primary); text-decoration:none; }

/* Toggle de tema (3 botones) */
.theme-toggle { display:inline-flex; gap:2px; padding:3px; border-radius:999px;
  background:var(--color-bg-muted); border:1px solid var(--color-border-default); }
.theme-toggle button {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:26px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--color-fg-faint); transition:background .14s, color .14s;
}
.theme-toggle button:hover { color:var(--color-fg-default); }
.theme-toggle button[aria-pressed="true"] { background:var(--color-primary); color:var(--color-bg-canvas); }
.theme-toggle svg { width:16px; height:16px; display:block; }

/* ============================ Hero ======================================== */
.hero { padding:clamp(34px,6vw,64px) 0 26px; }
.hero-brand { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.hero-mark { display:flex; align-items:center; gap:12px; }
.hero-mark svg { width:26px; height:26px; color:var(--color-primary); flex:0 0 auto; }
.eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-fg-subtle); }
.hero-meta { text-align:right; font-family:var(--font-mono); font-size:10.5px; line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--color-fg-faint); }
.hero-meta b { color:var(--color-primary); font-weight:600; }
.hero h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4.5vw,50px);
  line-height:1.05; letter-spacing:-.015em; margin:22px 0 0; text-wrap:balance; }
.hero .lede { font-family:var(--font-sans); font-size:16px; line-height:1.5; color:var(--color-fg-subtle);
  max-width:66ch; margin:14px 0 0; text-wrap:pretty; }

.rule-double { height:4px; border:0; margin:26px 0 0;
  border-top:1px solid var(--color-border-strong); border-bottom:1px solid var(--color-border-strong); }

/* ---- Contexto (hechos que atraviesan todo) ---- */
.facts { margin-top:26px; background:var(--color-bg-surface); border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:20px 24px; }
.facts h2 { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-fg-faint); font-weight:600; margin:0 0 14px; }
.facts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 26px; }
.fact { display:flex; gap:10px; }
.fact .n { font-family:var(--font-mono); font-size:12px; font-weight:600; padding-top:1px; }
.fact p { margin:0; font-size:13.5px; line-height:1.5; color:var(--color-fg-subtle); }
.fact p b { color:var(--color-fg-default); font-weight:600; }

/* ============================ Catálogo ==================================== */
.block-head { margin:38px 0 14px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.block-head .eyebrow { font-size:11px; }
.block-head h2 { font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin:0; }
.block-head .desc { font-family:var(--font-sans); font-size:13px; color:var(--color-fg-subtle); }

.catalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }

.card { display:flex; flex-direction:column; gap:0; text-decoration:none; color:inherit;
  background:var(--color-bg-surface); border:1px solid var(--color-border-default);
  border-left:3px solid var(--fam); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:16px 18px 15px; transition:border-color .14s, box-shadow .14s, transform .14s, background .14s; }
.card:hover { border-color:var(--color-border-strong); border-left-color:var(--fam);
  box-shadow:var(--shadow-md); background:var(--color-bg-lit); text-decoration:none; transform:translateY(-1px); }
.card:hover .card-title { color:var(--color-primary); }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.card-folio { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--fam); letter-spacing:.02em; }
.card-badges { display:flex; align-items:center; gap:9px; }
.difficulty { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--fam); }
.difficulty .off { color:var(--color-border-strong); }
.star { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:9.5px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--warn);
  padding:2px 7px; border-radius:999px; background:var(--warn-bg); }
.card-title { font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.2;
  letter-spacing:-.01em; margin:0 0 6px; transition:color .14s; text-wrap:pretty; }
.card-tagline { font-size:13px; line-height:1.5; color:var(--color-fg-subtle); margin:0 0 12px; text-wrap:pretty; }
.card-avoid { margin-top:auto; display:flex; gap:7px; align-items:baseline; padding-top:10px;
  border-top:1px dotted var(--color-border-strong); }
.card-avoid .lbl { font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bad); flex:0 0 auto; }
.card-avoid .txt { font-size:12px; line-height:1.45; color:var(--color-fg-faint); }

.colofon { margin:46px 0 70px; text-align:center; font-size:12.5px; line-height:1.6;
  color:var(--color-fg-faint); }
.colofon .mono { font-family:var(--font-mono); }

/* ============================ Ficha (tema) ================================ */
.ficha { padding:30px 0 80px; max-width:960px; }
.breadcrumb { display:flex; align-items:center; gap:11px; margin-bottom:22px; font-family:var(--font-mono); font-size:12px; }
.breadcrumb a { color:var(--color-fg-subtle); }
.breadcrumb .sep { color:var(--color-border-strong); }
.breadcrumb .here { letter-spacing:.14em; text-transform:uppercase; font-size:11px; }

.ficha-head { display:flex; gap:22px; align-items:flex-start; }
.ficha-folio { font-family:var(--font-mono); font-size:clamp(38px,7vw,52px); font-weight:600;
  color:var(--color-fg-faint); letter-spacing:-.03em; line-height:.9; flex:0 0 auto; }
.ficha-head h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(27px,4vw,34px);
  letter-spacing:-.02em; line-height:1.12; margin:0 0 8px; text-wrap:balance; }
.ficha-head h1 .mono { font-size:.8em; }
.ficha-lede { font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(16px,2.4vw,18px);
  line-height:1.45; color:var(--color-fg-subtle); margin:0; max-width:66ch; }
.ficha-lede em { font-style:italic; color:var(--color-fg-default); }
.star-flag { display:inline-flex; align-items:center; gap:6px; margin-bottom:9px; padding:3px 10px;
  border-radius:999px; background:var(--warn-bg); color:var(--warn); font-family:var(--font-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.star-flag svg { width:13px; height:13px; }

.section-label { display:flex; align-items:center; gap:9px; margin:34px 0 12px; }
.section-label svg { width:18px; height:18px; color:var(--fam); flex:0 0 auto; }
.section-label span { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-fg-faint); }

.prose { font-size:15px; line-height:1.62; color:var(--color-fg-subtle); max-width:68ch; margin:0; text-wrap:pretty; }
.prose + .prose { margin-top:12px; }
.prose strong { color:var(--color-fg-default); font-weight:600; }
.prose em { font-family:var(--font-display); font-style:italic; color:var(--color-fg-default); }
.prose code { font-family:var(--font-mono); font-size:.9em;
  background:var(--color-bg-muted); border:1px solid var(--color-border-soft);
  border-radius:4px; padding:.05em .35em; color:var(--color-fg-default); }

/* En breve — 4 datos */
.enbreve { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.enbreve li { display:flex; gap:10px; align-items:flex-start; background:var(--color-bg-surface);
  border:1px solid var(--color-border-default); border-radius:var(--radius-md); padding:11px 13px; }
.enbreve .n { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--fam); padding-top:2px; }
.enbreve p { margin:0; font-size:12.5px; line-height:1.45; color:var(--color-fg-subtle); }
.enbreve b { color:var(--color-fg-default); font-weight:600; }

/* La fuerza (callout) */
.fuerza { display:flex; gap:13px; align-items:flex-start; margin-top:16px; padding:15px 17px;
  background:color-mix(in srgb, var(--fam) 8%, var(--color-bg-surface));
  border:1px solid color-mix(in srgb, var(--fam) 35%, var(--color-border-default));
  border-left:3px solid var(--fam); border-radius:var(--radius-md); }
.fuerza svg { width:20px; height:20px; color:var(--fam); flex:0 0 auto; margin-top:1px; }
.fuerza .body { font-size:13.5px; line-height:1.5; color:var(--color-fg-subtle); }
.fuerza .tag { display:block; font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fam); margin-bottom:3px; }

/* Mito → realidad */
.mito { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.mito .col { border-radius:var(--radius-md); padding:14px 16px; border:1px solid var(--color-border-default); }
.mito .m { background:var(--bad-bg); border-color:color-mix(in srgb, var(--bad) 40%, var(--color-border-default)); }
.mito .r { background:var(--ok-bg); border-color:color-mix(in srgb, var(--ok) 40%, var(--color-border-default)); }
.mito .lbl { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; }
.mito .m .lbl { color:var(--bad); }
.mito .r .lbl { color:var(--ok); }
.mito p { margin:0; font-size:13.5px; line-height:1.55; color:var(--color-fg-subtle); }
.mito p strong, .mito p em { color:var(--color-fg-default); }
.mito p em { font-family:var(--font-display); font-style:italic; }
.mito code { font-family:var(--font-mono); font-size:.9em; }

/* Recursos */
.recursos { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.recursos li { font-size:14px; line-height:1.5; color:var(--color-fg-subtle); }
.recursos .nota { color:var(--color-fg-faint); }
.recursos .star-r { color:var(--warn); }

/* Pie de ficha (prev / índice / next) */
.ficha-foot { display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:44px; padding-top:18px; border-top:1px solid var(--color-border-default);
  font-family:var(--font-mono); font-size:12.5px; }
.ficha-foot a { color:var(--color-fg-subtle); }
.ficha-foot a.next { color:var(--color-primary); font-weight:600; }
.ficha-foot .disabled { color:var(--color-fg-faint); }

/* ============================ Widget (paso a paso) ======================== */
.widget { background:var(--color-bg-surface); border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:20px 22px; }
.widget-intro { margin:0 0 16px; font-size:13px; line-height:1.5; color:var(--color-fg-subtle); }
.widget-stage { min-height:120px; }
.widget-note { display:flex; gap:9px; align-items:flex-start; margin-top:14px; padding:11px 14px;
  background:var(--color-bg-muted); border:1px solid var(--color-border-default); border-radius:var(--radius-md); }
.widget-note .idx { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--fam); padding-top:1px; flex:0 0 auto; }
.widget-note p { margin:0; font-size:13px; line-height:1.5; color:var(--color-fg-subtle); }
.widget-note.ok { background:var(--ok-bg); border-color:color-mix(in srgb, var(--ok) 40%, transparent); }
.widget-note.bad { background:var(--bad-bg); border-color:color-mix(in srgb, var(--bad) 40%, transparent); }
.widget-note.warn { background:var(--warn-bg); border-color:color-mix(in srgb, var(--warn) 40%, transparent); }

.widget-controls { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; align-items:center; }
.widget-dots { display:flex; gap:6px; margin-left:auto; align-items:center; }
.widget-dots i { width:8px; height:8px; border-radius:999px; background:var(--color-border-strong); transition:background .18s, width .18s; }
.widget-dots i.on { background:var(--fam); width:20px; }

.btn { appearance:none; font-family:var(--font-sans); font-size:13px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px; padding:0 14px; height:38px; white-space:nowrap;
  border-radius:var(--radius-sm); cursor:pointer; background:var(--color-bg-surface);
  color:var(--color-fg-default); border:1px solid var(--color-border-strong);
  transition:background .14s, border-color .14s, transform .1s; }
.btn:hover { border-color:var(--color-fg-subtle); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn.play { background:var(--color-fg-default); color:var(--color-bg-canvas); border-color:var(--color-fg-default); }
.btn.play.on { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-bg-canvas); }
.btn svg { width:17px; height:17px; }

/* Segmented (cambia de vista dentro de un widget) */
.segmented { display:inline-flex; gap:4px; background:var(--color-bg-muted); border-radius:var(--radius-md);
  padding:3px; margin-bottom:16px; flex-wrap:wrap; }
.segmented button { padding:7px 13px; border:0; border-radius:var(--radius-sm); cursor:pointer;
  font-family:var(--font-sans); font-size:12px; font-weight:600; background:transparent;
  color:var(--color-fg-subtle); transition:background .14s, color .14s; }
.segmented button[aria-pressed="true"] { background:var(--color-bg-surface); color:var(--fam); box-shadow:var(--shadow-sm); }

/* ---- Utilidades de visualización (para el HTML de cada paso) ---- */
.w-row { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.w-col { display:flex; flex-direction:column; gap:8px; }
.w-grow { flex:1; min-width:0; }
.w-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-fg-subtle); }
.w-box { background:var(--color-bg-muted); border:1px solid var(--color-border-default); border-radius:var(--radius-md); padding:12px 14px; }
.w-surface { background:var(--color-bg-surface); border:1px solid var(--color-border-default); border-radius:var(--radius-md); padding:12px 14px; }
.w-big { font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--fam); line-height:1; }
.w-mono { font-family:var(--font-mono); font-size:12.5px; color:var(--color-fg-default); }

/* Bloque de código monoespaciado (fijo oscuro en ambos temas) */
.w-code { font-family:var(--font-mono); font-size:12.5px; line-height:1.65; white-space:pre; overflow-x:auto;
  background:var(--code-bg); color:var(--code-fg); border-radius:var(--radius-md); padding:14px 16px; margin:0; }
.w-code .dim { color:var(--code-dim); }
.w-code .hl { color:#F6C651; font-weight:600; }
.w-code .add { color:#7FE0A8; }

/* Etapas (cadena de tarjetas) */
.w-stages { display:flex; gap:6px; align-items:stretch; flex-wrap:wrap; }
.w-stage { flex:1; min-width:120px; background:var(--color-bg-muted); border:1px solid var(--color-border-default);
  border-top:3px solid var(--color-border-default); border-radius:var(--radius-md); padding:11px 12px;
  display:flex; flex-direction:column; gap:6px; opacity:.5; transition:opacity .2s, border-color .2s, background .2s; }
.w-stage.done { opacity:1; border-top-color:color-mix(in srgb, var(--fam) 45%, transparent); }
.w-stage.active { opacity:1; background:var(--color-bg-lit); border-color:var(--fam); border-top-color:var(--fam); }
.w-stage .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-fg-subtle); font-weight:600; }
.w-stage.active .k { color:var(--fam); }
.w-stage pre { margin:0; font-family:var(--font-mono); font-size:11px; line-height:1.5; color:var(--color-fg-default); white-space:pre-wrap; word-break:break-word; }

/* Celdas (grid de bloques) */
.w-cells { display:flex; flex-wrap:wrap; gap:5px; }
.w-cell { width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:5px; font-family:var(--font-mono); font-size:13px; font-weight:600;
  background:var(--color-bg-muted); border:1px dashed var(--color-border-strong); color:var(--color-fg-faint); transition:all .18s; }
.w-cell.on { background:color-mix(in srgb, var(--fam) 40%, var(--color-bg-surface)); border-style:solid; border-color:var(--fam); color:var(--fam); }
.w-cell.hot { box-shadow:0 0 0 2px color-mix(in srgb, var(--fam) 45%, transparent); border-color:var(--color-fg-default); }

/* Barras (carriles de progreso) */
.w-lane { display:flex; align-items:center; gap:10px; }
.w-lane .lbl { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--color-fg-subtle); width:40px; flex:0 0 auto; }
.w-lane .track { flex:1; height:22px; border-radius:999px; background:var(--color-bg-muted);
  border:1px solid var(--color-border-default); overflow:hidden; }
.w-lane .track > i { display:block; height:100%; background:color-mix(in srgb, var(--fam) 45%, var(--color-bg-surface)); transition:width .2s; }
.w-lane .track > i.ok { background:color-mix(in srgb, var(--ok) 50%, var(--color-bg-surface)); }
.w-lane .track > i.warn { background:color-mix(in srgb, var(--warn) 50%, var(--color-bg-surface)); }
.w-lane .st { font-family:var(--font-mono); font-size:10.5px; width:88px; flex:0 0 auto; text-align:right; color:var(--color-fg-faint); }
.w-token { font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.05em; padding:3px 7px;
  border-radius:999px; background:var(--color-primary); color:var(--color-bg-canvas); }

/* Nodos (cajas etiquetadas en fila) */
.w-nodes { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.w-node { flex:1; min-width:120px; display:flex; flex-direction:column; gap:4px; align-items:center;
  padding:16px 14px; border-radius:var(--radius-lg); background:color-mix(in srgb, var(--fam) 8%, var(--color-bg-surface));
  border:2px solid var(--fam); text-align:center; transition:all .25s; }
.w-node.dim { background:var(--color-bg-muted); border-style:dashed; border-color:var(--color-border-strong); opacity:.5; }
.w-node.bad { background:var(--bad-bg); border-color:var(--bad); }
.w-node .t { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-fg-faint); }
.w-node .v { font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--color-fg-default); }
.w-node .c { font-family:var(--font-mono); font-size:24px; font-weight:700; color:var(--fam); line-height:1; }

/* Pastillas / cadena de flujo */
.w-chips { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.w-chip { font-family:var(--font-mono); font-size:12px; font-weight:600; padding:7px 11px; border-radius:var(--radius-sm);
  background:var(--color-bg-muted); border:1px solid var(--color-border-default); color:var(--color-fg-default); transition:all .18s; }
.w-chip.done { background:color-mix(in srgb, var(--fam) 12%, var(--color-bg-surface)); border-color:var(--fam); color:var(--fam); }
.w-chip.active { background:var(--color-fg-default); border-color:var(--color-fg-default); color:var(--color-bg-canvas); }
.w-chip.miss { opacity:.5; text-decoration:line-through; color:var(--color-fg-faint); }
.w-arrow { color:var(--color-border-strong); font-family:var(--font-mono); }
.w-arrow.on { color:var(--fam); }

/* Filas clave/valor */
.w-kv { display:flex; justify-content:space-between; gap:10px; padding:8px 11px; border-radius:var(--radius-sm);
  background:var(--color-bg-muted); border:1px solid var(--color-border-default); font-family:var(--font-mono); font-size:13px; }
.w-kv .k { color:var(--color-fg-subtle); }
.w-kv .v { font-weight:600; color:var(--color-fg-default); }
.w-kv.hit { background:var(--ok-bg); border-color:color-mix(in srgb,var(--ok) 40%, transparent); }

.w-pill { display:inline-block; font-family:var(--font-mono); font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; }
.w-pill.ok { background:var(--ok-bg); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 45%, transparent); }
.w-pill.bad { background:var(--bad-bg); color:var(--bad); border:1px solid color-mix(in srgb,var(--bad) 45%, transparent); }
.w-pill.warn { background:var(--warn-bg); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 45%, transparent); }

/* ============================ Responsive ================================== */
@media (max-width:720px) {
  body { font-size:15px; }
  .hero-meta { text-align:left; }
  .mito { grid-template-columns:1fr; }
  .ficha-head { gap:14px; }
  .ficha-foot { flex-wrap:wrap; gap:8px; font-size:11.5px; }
  .widget { padding:16px 15px; }
  .w-lane .st { width:auto; }
}
@media (max-width:520px) {
  .ficha-head { flex-direction:column; gap:6px; }
  .card { min-width:0; }
}

/* ============================ Reduced motion ============================== */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; animation:none !important; }
}