/* TrueML · tokens del sistema de diseño (fuente única: apps/trueml). Claro y oscuro.
   Los colores --tm-* son los de trueml-mark.js (THEMES.claro y THEMES.oscuro). El oscuro aplica con el sistema en
   oscuro, salvo data-theme="light" en <html>, o siempre con data-theme="dark". Cada app copia este archivo con sync.mjs. */
:root {
  --tm-bg: #EDEFF7; --tm-grid: rgba(14,21,48,.055); --tm-card: #FFFFFF; --tm-ink: #0E1530; --tm-ink2: #3A4364; --tm-ink3: #5A6385;
  --tm-line: #E3E6F0; --tm-chip: #EEF1FF; --tm-acc: #3D5AFE; --tm-nav: rgba(237,239,247,.86); --tm-sh: 0 1px 0 rgba(14,21,48,.08);
  --tm-btn2: #FFFFFF; --tm-btn2sh: #C9CEE0; --tm-code: #0E1530; --tm-codeink: #E6EAFB; --tm-codeink2: #8F9BC9;
  --tm-ok: #E3F7EF; --tm-okink: #0C7A5B; --tm-lead: #9AA2C0;
  --tm-dojo: #B07A0C; --tm-warn: #D9532A; --tm-mon: #1B2550; --tm-off: #DCE0EC;
  --y: #E8AE36; --yt: #FFC857; --yd: #D99A1E; --o: #EC6A3F; --g: #17B386; --b: #3D5AFE; --p: #7A69EE; --n: #5A6699; --navy: #0E1530;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tm-bg: #0A0F22; --tm-grid: rgba(255,255,255,.045); --tm-card: #121A36; --tm-ink: #EEF1FB; --tm-ink2: #B4BCDD; --tm-ink3: #8C95BD;
    --tm-line: #232C52; --tm-chip: #1B2450; --tm-acc: #8FA2FF; --tm-nav: rgba(10,15,34,.82); --tm-sh: 0 0 0 1px #1E2750;
    --tm-btn2: #1B2450; --tm-btn2sh: #070B1A; --tm-code: #070B1A; --tm-codeink: #DDE3FA; --tm-codeink2: #7F8AB8;
    --tm-ok: #0F3B30; --tm-okink: #5BE0B5; --tm-lead: #4A5480; --tm-dojo: #FFC857; --tm-warn: #FF8A5C; --tm-mon: #5A6699; --tm-off: #2A3360;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tm-bg: #0A0F22; --tm-grid: rgba(255,255,255,.045); --tm-card: #121A36; --tm-ink: #EEF1FB; --tm-ink2: #B4BCDD; --tm-ink3: #8C95BD;
  --tm-line: #232C52; --tm-chip: #1B2450; --tm-acc: #8FA2FF; --tm-nav: rgba(10,15,34,.82); --tm-sh: 0 0 0 1px #1E2750;
  --tm-btn2: #1B2450; --tm-btn2sh: #070B1A; --tm-code: #070B1A; --tm-codeink: #DDE3FA; --tm-codeink2: #7F8AB8;
  --tm-ok: #0F3B30; --tm-okink: #5BE0B5; --tm-lead: #4A5480; --tm-dojo: #FFC857; --tm-warn: #FF8A5C; --tm-mon: #5A6699; --tm-off: #2A3360;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- piezas compartidas */
.tm-stripe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 4px; }
.tm-c-datos { background: var(--y); } .tm-c-modelo { background: var(--o); } .tm-c-api { background: var(--g); }
.tm-c-contenedor { background: var(--b); } .tm-c-orquestacion { background: var(--p); } .tm-c-monitoreo { background: var(--n); }

/* la T chica: barra de 3 arriba y el tronco en la columna del centro */
.tm-mini-wrap { display: inline-flex; gap: 10px; align-items: center; }
.tm-mini-txt { font: 500 11px/1.3 var(--mono); color: var(--tm-ink3); text-align: right; }
.tm-mini { display: grid; grid-template-columns: repeat(3, 8px); grid-auto-rows: 8px; gap: 2px; flex: none; }
.tm-mini i { border-radius: 2px; }
.tm-mini .tm-mini-api, .tm-mini .tm-mini-modelo, .tm-mini .tm-mini-datos { grid-column: 2; }
.tm-mini-contenedor { background: var(--b); } .tm-mini-orquestacion { background: var(--p); } .tm-mini-monitoreo { background: var(--tm-mon); }
.tm-mini-api { background: var(--g); } .tm-mini-modelo { background: var(--o); } .tm-mini-datos { background: var(--y); }
.tm-mini i.tm-off { background: var(--tm-off); }

/* selector de tema */
.tm-tema { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tm-card); box-shadow: var(--tm-sh); }
.tm-tema button { border: 0; cursor: pointer; font: 600 13px/1 var(--sans); padding: 8px 12px; border-radius: 999px; background: transparent; color: var(--tm-ink2); }
.tm-tema button[aria-pressed="true"] { background: var(--tm-ink); color: var(--tm-bg); }

/* Diseño «Dojo» de TrueML para las páginas de estación (Claude Design: «Dojo Estacion 01»).
   Los tokens --tm-* vienen de vendor/trueml/tokens.css (el build los pone antes de este archivo). El tema lo
   elige el selector de la app (data-theme en <html>, clave taller-tema). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body.dojo {
  margin: 0; min-height: 100vh; padding-bottom: 40px;
  background-color: var(--tm-bg);
  background-image: linear-gradient(var(--tm-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tm-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--tm-ink); font: 16px/1.5 var(--sans);
}
.dojo a { color: var(--tm-acc); }
.dojo a:hover { opacity: .85; }
.dojo code { font: .875em var(--mono); overflow-wrap: anywhere; }
.dojo summary { list-style: none; cursor: pointer; }
.dojo summary::-webkit-details-marker { display: none; }
.dojo h1, .dojo h2, .dojo h3 { margin: 0; }
.dojo b, .dojo strong { color: var(--tm-ink); }
.dojo :focus-visible { outline: 2px solid var(--tm-acc); outline-offset: 2px; border-radius: 6px; }

.d-wrap { max-width: 1280px; margin: 0 auto; padding-left: clamp(16px, 5vw, 56px); padding-right: clamp(16px, 5vw, 56px); }

/* barra fija: franja de 6 colores, marca, tema e índice */
.d-top { position: sticky; top: 0; z-index: 20; background: var(--tm-nav); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--tm-line); }
.d-stripe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 4px; }
.d-stripe span:nth-child(1) { background: var(--y); } .d-stripe span:nth-child(2) { background: var(--o); } .d-stripe span:nth-child(3) { background: var(--g); }
.d-stripe span:nth-child(4) { background: var(--b); } .d-stripe span:nth-child(5) { background: var(--p); } .d-stripe span:nth-child(6) { background: var(--n); }
.d-head { max-width: 1280px; margin: 0 auto; padding: 10px clamp(16px, 5vw, 56px) 0; display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; }
.d-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.d-logo { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--tm-ink) !important; }
.d-logo-mark { width: 24px; display: block; }
.d-word { font: 800 21px/1 var(--sans); letter-spacing: -.04em; }
.d-word span { color: var(--tm-acc); }
.d-sep { width: 1px; height: 22px; background: var(--tm-line); }
.d-dojo { font: 700 15px/1 var(--sans); color: var(--tm-ink) !important; text-decoration: none; }
.d-ruta { font: 500 13px/1 var(--mono); color: var(--tm-ink3); white-space: nowrap; }
.d-tema { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tm-card); box-shadow: var(--tm-sh); }
.d-tema button { border: 0; cursor: pointer; font: 600 13px/1 var(--sans); padding: 8px 12px; border-radius: 999px; background: transparent; color: var(--tm-ink2); }
.d-tema button[aria-pressed="true"] { background: var(--tm-ink); color: var(--tm-bg); }
.d-nav { max-width: 1280px; margin: 0 auto; padding: 8px clamp(16px, 5vw, 56px) 10px; display: flex; gap: 4px; overflow-x: auto; font: 600 13px/1 var(--sans); white-space: nowrap; scrollbar-width: none; }
.d-nav::-webkit-scrollbar { display: none; }
.d-nav a { padding: 8px 12px; border-radius: 999px; color: var(--tm-ink2); text-decoration: none; }
.d-nav a:hover { background: var(--tm-chip); color: var(--tm-ink); opacity: 1; }

/* hero */
.d-hero { padding-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 32px 56px; align-items: center; }
.d-hero-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.d-back { font: 600 13px/1.3 var(--mono); text-decoration: none; }
.d-pill { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: var(--yt); padding: 9px 14px; border-radius: 999px; }
.d-hero h1 { font: 800 clamp(40px, 6vw, 84px)/.95 var(--sans); letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
.d-lead { margin: 0; font: 20px/1.5 var(--sans); color: var(--tm-ink2); max-width: 560px; text-wrap: pretty; }
.d-stats { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; width: 100%; max-width: calc(var(--n, 5) * 112px); }
@media (max-width: 560px) { .d-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.d-stats a { background: var(--tm-card); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--tm-ink); box-shadow: var(--tm-sh); }
.d-stats a:hover { box-shadow: 0 0 0 2px var(--y); opacity: 1; }
.d-stats b { font: 800 26px/1 var(--sans); }
.d-stats span { font: 12px/1.2 var(--sans); color: var(--tm-ink3); }
.d-btns { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 6px; }
.d-btn { display: inline-block; font: 700 16px/1.2 var(--sans); background: var(--yt); color: var(--navy) !important; padding: 16px 22px; border-radius: 14px; box-shadow: 0 6px 0 var(--yd); text-decoration: none; transition: transform .08s ease, box-shadow .08s ease; }
.d-btn:hover { transform: translateY(-1px); opacity: 1; }
.d-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--yd); }
.d-btn2 { background: var(--tm-btn2); color: var(--tm-ink) !important; box-shadow: 0 6px 0 var(--tm-btn2sh); }
.d-btn2:active { box-shadow: 0 1px 0 var(--tm-btn2sh); }
.d-hero-mark { width: 100%; max-width: 470px; justify-self: center; }

/* secciones */
.d-main { margin-top: 72px; display: flex; flex-direction: column; gap: 80px; }
.d-sec { scroll-margin-top: 130px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.d-h2 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.d-h2 h2 { font: 800 32px/1.15 var(--sans); letter-spacing: -.02em; }
.d-tag { font: 600 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tm-acc); }
.d-p { margin: 0; font: 17px/1.65 var(--sans); color: var(--tm-ink2); max-width: 820px; text-wrap: pretty; }
.d-txt { margin: 0; font: 15px/1.55 var(--sans); color: var(--tm-ink2); }
.d-nota { margin: 0; font: 14px/1.55 var(--sans); color: var(--tm-ink3); }
.d-lbl { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tm-ink3); }
.d-card { background: var(--tm-card); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--tm-sh); min-width: 0; }
.d-card h3 { font: 800 19px/1.25 var(--sans); }
.d-card h3 small { font: 500 13px var(--mono); color: var(--tm-ink3); margin-left: 4px; }
.d-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start; }
.d-ul, .d-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font: 15px/1.5 var(--sans); color: var(--tm-ink2); }

/* mapa */
.d-io { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.d-io > .d-card { flex: 1 1 280px; }
.d-io ul { list-style: none; padding: 0; gap: 9px; }
.d-io-n { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 4px; color: var(--tm-ink3); font: 700 18px/1 var(--sans); margin: 0 auto; }
.d-io-n b { width: 52px; height: 52px; border-radius: 14px; background: var(--y); color: var(--navy); display: flex; align-items: center; justify-content: center; font: 800 22px/1 var(--mono); }
@media (max-width: 700px) { .d-io-n { flex-direction: row; width: 100%; } .d-io-n span { transform: rotate(90deg); } }
.d-tabla { overflow-x: auto; background: var(--tm-card); border-radius: 20px; box-shadow: var(--tm-sh); }
.d-tabla table { width: 100%; min-width: 680px; border-collapse: collapse; font: 14px/1.5 var(--sans); color: var(--tm-ink2); }
.d-tabla thead th { text-align: left; padding: 14px 18px; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tm-ink3); }
.d-tabla thead th.d-th-dojo { color: var(--tm-dojo); }
.d-tabla tbody th, .d-tabla td { text-align: left; vertical-align: top; padding: 12px 18px; border-top: 1px solid var(--tm-line); }
.d-tabla tbody th { color: var(--tm-ink); width: 22%; }

/* por dónde ir: las prácticas desde cero y el proyecto con kit, en orden, con su momento y si usan kit */
.d-camino { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: stretch; counter-reset: none; }
.d-camino > li { display: flex; min-width: 0; }
.d-camino-p { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-decoration: none; color: var(--tm-ink) !important; padding-top: 22px; }
.d-camino-p h3 { font: 800 20px/1.25 var(--sans); letter-spacing: -.01em; }
.d-camino-n { width: 34px; height: 34px; border-radius: 10px; background: var(--tm-ink); color: var(--tm-bg); display: flex; align-items: center; justify-content: center; font: 800 15px/1 var(--mono); }
.d-camino-kit { box-shadow: var(--tm-sh), inset 4px 0 0 var(--b); }
.d-camino-kit:hover { box-shadow: 0 0 0 2px var(--b); opacity: 1; }
.d-camino-kit .d-camino-n { background: var(--b); color: #fff; }
.d-etqs { display: flex; flex-wrap: wrap; gap: 6px; }
.d-etq { font: 700 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.d-etq-antes { background: rgba(232,174,54,.18); color: var(--tm-dojo); }
.d-etq-prod { background: rgba(23,179,134,.16); color: var(--tm-okink); }
.d-etq-sin { box-shadow: inset 0 0 0 1px var(--tm-line); color: var(--tm-ink2); }
.d-etq-kit { background: var(--b); color: #fff; }

/* el proyecto con kit: todo lo suyo (precálculos, kit, rondas, guiado, solo, romper) va junto, con un riel azul */
.d-proy { display: flex; flex-direction: column; gap: 80px; border-left: 3px solid var(--b); padding-left: clamp(14px, 3vw, 32px); margin-left: clamp(-35px, -3vw, -17px); }
.d-proy-h { background: var(--tm-card); border-radius: 20px; box-shadow: var(--tm-sh); padding: clamp(18px, 3vw, 28px); gap: 14px; }
.d-proy-h .d-lbl { color: var(--tm-acc); }
@media (max-width: 600px) { .d-proy { margin-left: 0; padding-left: 12px; } }

/* rondas: construir/romper × con ayuda/solo */
.d-rondas { display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.d-eje { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tm-ink3); padding: 2px; }
.d-eje-v { align-self: stretch; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
@media (max-width: 720px) { .d-rondas { grid-template-columns: minmax(0, 1fr); } .d-eje { display: none; } }
.d-ronda { padding: 20px; gap: 10px; }
.d-ronda-t { font: 800 19px/1.2 var(--sans); }
.d-ronda-t i { font: 700 14px var(--mono); color: var(--tm-acc); font-style: normal; }
.d-prompt { border-radius: 14px; background: var(--tm-code); overflow: hidden; }
.d-prompt summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; font: 600 13px/1.2 var(--sans); color: var(--tm-codeink); }
.d-prompt summary i { font-style: normal; display: inline-block; transition: transform .2s; }
.d-prompt[open] summary i { transform: rotate(180deg); }
.d-prompt pre { margin: 0; padding: 4px 16px 16px; color: var(--tm-codeink); font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; }
.d-copy-y { border: 0; cursor: pointer; font: 600 12px/1 var(--sans); padding: 8px 11px; border-radius: 8px; background: var(--yt); color: var(--navy); flex: none; }

/* desde cero */
.d-practica { text-decoration: none; color: var(--tm-ink) !important; box-shadow: var(--tm-sh), inset 4px 0 0 var(--y); }
.d-practica:hover { box-shadow: 0 0 0 2px var(--y); opacity: 1; }
.d-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.d-mini span { font: 600 12px/1 var(--sans); padding: 7px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--tm-line); color: var(--tm-ink2); }
.d-ir { font: 700 14px/1.2 var(--sans); color: var(--tm-acc); margin-top: auto; }

/* conceptos */
.d-kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: start; }
.d-k { background: var(--tm-card); border-radius: 20px; box-shadow: var(--tm-sh); scroll-margin-top: 130px; min-width: 0; }
.d-k summary { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.d-k-t { font: 800 18px/1.25 var(--sans); }
.d-k-en { font: 500 12px/1.3 var(--mono); color: var(--tm-acc); }
.d-k-def { font: 15px/1.5 var(--sans); color: var(--tm-ink2); }
.d-mas { font: 600 13px/1.2 var(--sans); color: var(--tm-acc); padding-top: 4px; }
.d-mas i, .d-arreglo summary i { font-style: normal; display: inline-block; transition: transform .2s; }
details[open] > summary .d-mas i, .d-arreglo[open] summary i { transform: rotate(180deg); }
.d-k-body { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 12px; font: 14px/1.55 var(--sans); color: var(--tm-ink2); }
.d-k-body p { margin: 0; }
.d-k-body b { display: block; }
.d-trampa { background: var(--tm-chip); border-radius: 12px; padding: 12px 14px; }
.d-trampa b, .d-ojo b { color: var(--tm-warn); }
.d-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.d-chips a { font: 600 12px/1.2 var(--sans); padding: 7px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--tm-line); text-decoration: none; }

/* precálculos */
.d-pc { padding: 24px; gap: 14px; scroll-margin-top: 130px; }
.d-pc-h { display: flex; gap: 14px; align-items: flex-start; }
.d-pc-h h3 { margin-top: 6px; font: 800 20px/1.3 var(--sans); text-wrap: pretty; }
.d-num { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--y); color: var(--navy); display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--mono); }
.d-formula { display: block; padding: 12px 16px; border-radius: 12px; background: var(--tm-chip); font: 13.5px/1.5 var(--mono) !important; color: var(--tm-ink); }
.d-ver > summary { display: inline-flex; font: 700 14px/1 var(--sans); padding: 11px 14px; border-radius: 10px; background: var(--tm-ink); color: var(--tm-bg); }
.d-ver[open] > summary { background: var(--tm-chip); color: var(--tm-ink); }
.d-ver-body { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; min-width: 0; }
.d-escalas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.d-esc { border-radius: 14px; padding: 16px; box-shadow: inset 0 0 0 1px var(--tm-line); display: flex; flex-direction: column; gap: 8px; font: 14px/1.5 var(--sans); color: var(--tm-ink2); min-width: 0; }
.d-esc strong { font: 800 17px/1.3 var(--sans); }
.d-esc-dojo { box-shadow: inset 0 0 0 1.5px var(--y); }
.d-esc-dojo .d-lbl { color: var(--tm-dojo); }
.d-decide { margin: 0; font: 14px/1.6 var(--sans); color: var(--tm-ink2); max-width: 820px; }

/* código y salidas */
.d-code { border-radius: 14px; overflow: hidden; background: var(--tm-code); min-width: 0; }
.d-code-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 8px 4px 16px; font: 600 12px/1.2 var(--mono); color: var(--tm-codeink2); }
.d-code-h span { overflow-wrap: anywhere; }
.d-copy { border: 0; cursor: pointer; font: 600 12px/1 var(--sans); padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.1); color: var(--tm-codeink); flex: none; }
.d-code pre { margin: 0; padding: 6px 16px 16px; color: var(--tm-codeink); font: 12.5px/1.6 var(--mono); overflow-x: auto; }
.d-code pre code { font: inherit; overflow-wrap: normal; }
.d-salida { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--tm-line); min-width: 0; }
.d-salida-h { padding: 12px 16px 0; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tm-okink); }
.d-salida pre { margin: 0; padding: 8px 16px 14px; font: 12.5px/1.55 var(--mono); color: var(--tm-ink); overflow-x: auto; }
.d-salida pre code { font: inherit; overflow-wrap: normal; }
.d-listo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.d-ok, .d-ojo { border-radius: 14px; padding: 14px 16px; font: 14px/1.5 var(--sans); }
.d-ok { background: var(--tm-ok); color: var(--tm-ink); }
.d-ok b { color: var(--tm-okink); }
.d-ojo { background: var(--tm-chip); color: var(--tm-ink2); }
.d-cuando { font-size: 15px; max-width: 820px; }

/* kit */
.d-kit-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.d-lista p { margin: 0 0 12px; font: 14px/1.55 var(--sans); color: var(--tm-ink2); }
.d-linea { list-style: none; margin: 0; padding: 0; }
.d-linea li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 0 0 14px 34px; font: 14px/1.45 var(--sans); color: var(--tm-ink2); }
.d-linea li::before { content: ""; position: absolute; left: 5px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--y); }
.d-linea li::after { content: ""; position: absolute; left: 10px; top: 18px; bottom: 0; width: 2px; background: var(--tm-line); }
.d-linea li:last-child::after { display: none; }
.d-linea code { font: 600 13px/1.4 var(--mono); color: var(--tm-ink); }

/* pasos */
.d-pasos { display: flex; flex-direction: column; gap: 10px; }
.d-paso { background: var(--tm-card); border-radius: 20px; box-shadow: var(--tm-sh); scroll-margin-top: 130px; min-width: 0; }
.d-paso > summary { padding: 18px 22px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.d-circ { width: 40px; height: 40px; border-radius: 50%; background: var(--y); color: var(--navy); display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--mono); }
.d-paso-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.d-paso-t > span:first-child { font: 800 18px/1.25 var(--sans); }
.d-paso-t > span:last-child { font: 14px/1.45 var(--sans); color: var(--tm-ink2); }
.d-pm::before { content: "+"; font: 700 20px/1 var(--sans); color: var(--tm-ink3); }
.d-paso[open] .d-pm::before { content: "−"; }
.d-paso-body { padding: 0 22px 22px 76px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.d-paso-body .d-txt { max-width: 820px; }
@media (max-width: 600px) { .d-paso > summary { padding: 16px; gap: 12px; } .d-paso-body { padding: 0 16px 18px; } }

/* solo */
.d-reglas { background: var(--navy); border-radius: 20px; padding: 22px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 28px; font: 14px/1.55 var(--sans); color: #C9D0EE; }
.d-reglas p { margin: 0; }
.d-reglas code { color: var(--yt); }
.d-reglas b { color: #fff; }
.d-reglas a { color: #AFC0FF; }
.d-objs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 8px; }
.d-obj { background: var(--tm-card); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; box-shadow: var(--tm-sh); font: 14px/1.5 var(--sans); color: var(--tm-ink2); }
.d-obj > span:first-child { font: 700 13px/1.5 var(--mono); color: var(--tm-ink3); }
.d-obj > span:last-child { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.d-obj > span:last-child > code { font: 600 12px/1 var(--mono); padding: 6px 8px; border-radius: 6px; background: var(--tm-chip); color: var(--tm-ink); }
.d-obj small { font: 13px/1.45 var(--sans); color: var(--tm-ink3); }

/* romper */
.d-catalogo { border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--o); }
.d-catalogo > summary { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.d-catalogo > summary > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.d-cat-t { font: 800 18px/1.25 var(--sans); }
.d-cat-t em { color: var(--tm-warn); font-style: normal; }
.d-cat-b { font: 700 14px/1 var(--sans); padding: 11px 14px; border-radius: 10px; background: var(--o); color: var(--navy); }
.d-catalogo[open] .d-cat-b { background: var(--tm-chip); color: var(--tm-ink); }
.d-fallas { padding: 0 12px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; align-items: start; }
.d-falla { border-radius: 16px; padding: 20px; gap: 10px; }
.d-falla h3 { font: 800 17px/1.3 var(--sans); }
.d-falla ul { margin: 0 0 4px; padding-left: 18px; font: 14px/1.5 var(--sans); color: var(--tm-ink2); }
.d-tipo { align-self: flex-start; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; }
.d-t-mundo { background: #FFF1D6; color: #8A5A00; }
.d-t-config { background: #ECE9FF; color: #4B3BC0; }
.d-t-infra { background: #E3F7EF; color: #0C7A5B; }
.d-t-entorno { background: #FFE6DC; color: #9A3414; }
.d-arreglo > summary { font: 700 13px/1.3 var(--sans); color: var(--tm-acc); padding: 4px 0; }
.d-arreglo > div { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; min-width: 0; }
.d-meta { font: 500 12px/1.4 var(--mono); color: var(--tm-ink3); }

/* repaso */
.d-memo { background: var(--navy); color: #fff; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; min-width: 0; }
.d-memo .d-stripe { height: 6px; margin: -26px -26px 6px; }
.d-memo-t { font: 800 24px/1.25 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.d-memo-p { font: 16px/1.6 var(--sans); color: #C9D0EE; text-wrap: pretty; }
.d-memo b, .d-memo strong { color: #fff; }
.d-memo-trampa { font: 15px/1.55 var(--sans); color: #fff; background: rgba(236,106,63,.16); border-radius: 14px; padding: 14px 16px; }
.d-memo-trampa b { color: #FF8A5C; }
.d-memo .d-lbl { color: #AAB3D6; padding-top: 4px; }
.d-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font: 15px/1.5 var(--sans); color: #E6EAFB; }
.d-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.d-checks li::before { content: "✓"; color: #3FD3A6; font-weight: 700; }
.d-memo code { color: var(--yt); }
.d-qas { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.d-qas h3 { font: 800 19px/1.25 var(--sans); padding: 4px 2px; }
.d-qa { background: var(--tm-card); border-radius: 16px; box-shadow: var(--tm-sh); }
.d-qa summary { padding: 16px 18px; font: 700 15px/1.4 var(--sans); }
.d-qa p { margin: 0; padding: 0 18px 16px; font: 14px/1.6 var(--sans); color: var(--tm-ink2); }

/* pie y aviso de copiado */
.d-foot { margin-top: 72px; }
.d-foot p { margin: 0 0 8px; font: 14px/1.55 var(--sans); color: var(--tm-ink3); }
.d-foot p:first-child { border-top: 1px solid var(--tm-line); padding-top: 22px; }
.d-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; pointer-events: none; font: 700 14px/1 var(--sans); background: var(--navy); color: #fff; padding: 13px 18px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(14,21,48,.6); transition: opacity .2s ease; opacity: 0; white-space: nowrap; }
.d-toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .d-btn, .d-toast, .d-prompt summary i, .d-mas i { transition: none; } }
@media (max-width: 480px) { .d-ruta { display: none; } .d-lead { font-size: 18px; } .d-h2 h2 { font-size: 28px; } .d-card { padding: 18px; } .d-pc { padding: 18px; } }

/* ---------------------------------------------------------------- portada (Claude Design: «Dojo TrueML») */
.d-home { padding-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 56px; align-items: start; }
.d-home > * { min-width: 0; }
.d-home-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: clamp(8px, 4vw, 48px); }
.d-kick { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tm-acc); background: var(--tm-card); padding: 9px 14px; border-radius: 999px; box-shadow: var(--tm-sh); }
.d-home-hero h1 { font: 800 clamp(40px, 5vw, 76px)/.96 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.d-home-hero h1 span { color: var(--tm-acc); }
.d-home-hero .d-lead { font-size: 19px; line-height: 1.55; max-width: 540px; }
.d-pips { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; }
.d-pips > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.d-pips > div span { height: 8px; border-radius: 2px; }
.d-pips > span { font: 500 12px/1.4 var(--mono); color: var(--tm-ink3); }
.d-home-t { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.d-home-t .d-hero-mark { max-width: 640px; }
.d-t-chica { display: none; max-width: 340px !important; }
.d-t-cap { font: 500 12px/1.4 var(--mono); color: var(--tm-ink3); text-align: center; min-height: 17px; }
@media (max-width: 560px) { .d-t-grande { display: none; } .d-t-chica { display: block; } .d-t-cap { display: none; } }
/* las estaciones van en su propio bloque, después del mapa, con la misma T al lado para encender cada etapa */
.d-home-est { margin-top: 80px; }
@media (max-width: 1099px) { .d-home-est .d-home-t { display: none; } }
@media (min-width: 1100px) {
  .d-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .d-home > section { grid-column: 1; }
  .d-home-t { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 110px; }
}
.d-c01 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.d-c01 div { background: var(--tm-card); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--tm-sh); }
.d-c01 b { font: 800 24px/1 var(--sans); letter-spacing: -.02em; }
.d-c01 span { font: 13px/1.3 var(--sans); color: var(--tm-ink3); }

/* las 12 estaciones, por etapa de la T */
.d-etapas { display: flex; flex-direction: column; gap: 10px; }
.d-etapa { background: var(--tm-card); border-radius: 20px; padding: 8px; box-shadow: var(--tm-sh); transition: box-shadow .2s ease; }
.d-etapa:hover { box-shadow: 0 0 0 2px var(--c); }
.d-etapa-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px 4px; }
.d-etapa-h i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.d-etapa-h b { font: 700 15px/1 var(--sans); }
.d-etapa-h span { font: 500 12px/1 var(--mono); color: var(--tm-ink3); }
.d-est { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; text-decoration: none; color: inherit !important; }
.d-est:hover { background: var(--tm-chip); opacity: 1; }
.d-est-n { width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--c); color: var(--tm-ink2); display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--mono); }
.d-est.lista .d-est-n { background: var(--c); color: var(--navy); box-shadow: none; }
.d-est-t { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.d-est-t > span:first-child { font: 700 16px/1.25 var(--sans); color: var(--tm-ink); }
.d-est-t > span:nth-child(2) { font: 500 12px/1.4 var(--mono); color: var(--tm-ink3); }
.d-est-x { font: 600 12px/1.3 var(--sans); color: var(--tm-acc); }
.d-est-b { font: 700 13px/1 var(--sans); background: var(--yt); color: var(--navy); padding: 9px 13px; border-radius: 999px; white-space: nowrap; }
.d-est-p { font: 600 12px/1.3 var(--mono); color: var(--tm-ink3); text-align: right; }
@media (max-width: 420px) { .d-est { grid-template-columns: 36px minmax(0, 1fr); } .d-est-b, .d-est-p { grid-column: 2; justify-self: start; text-align: left; } .d-est-p br { display: none; } }
.d-reent { display: flex; align-items: center; gap: 10px; padding: 4px 12px; font: 600 13px/1.4 var(--mono); color: var(--tm-ink2); }
.d-reent span { width: 28px; height: 28px; border-radius: 8px; background: var(--y); color: var(--navy); display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--sans); flex: none; }

/* el mapa: siempre sobre azul marino, como el bloque del Dojo. Anillo en tablet y escritorio, vertical en el celular.
   La línea usa los colores de las etapas; en marino, el azul y el gris de monitoreo van en su versión clara. */
.d-sec-sola { margin-top: 80px; }
.d-mapa {
  --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;
  position: relative; overflow: hidden; border-radius: 24px; color: var(--m-ink);
  background-color: var(--navy); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 24px 24px; box-shadow: 0 18px 40px -18px rgba(14,21,48,.55); padding: clamp(14px, 2.4vw, 32px) clamp(10px, 2vw, 28px);
}
.d-mapa-franja { position: absolute; top: 0; left: 0; right: 0; height: 8px; }
.m-datos { --mc: var(--m-datos); } .m-modelo { --mc: var(--m-modelo); } .m-api { --mc: var(--m-api); }
.m-contenedor { --mc: var(--m-contenedor); } .m-orquestacion { --mc: var(--m-orquestacion); } .m-monitoreo { --mc: var(--m-monitoreo); }
.m-datos-f { fill: var(--m-datos); } .m-modelo-f { fill: var(--m-modelo); } .m-api-f { fill: var(--m-api); }
.m-contenedor-f { fill: var(--m-contenedor); } .m-orquestacion-f { fill: var(--m-orquestacion); } .m-monitoreo-f { fill: var(--m-monitoreo); }
.m-datos-c { --mc: var(--m-datos); } .m-modelo-c { --mc: var(--m-modelo); } .m-api-c { --mc: var(--m-api); }
.m-contenedor-c { --mc: var(--m-contenedor); } .m-orquestacion-c { --mc: var(--m-orquestacion); } .m-monitoreo-c { --mc: var(--m-monitoreo); }

.d-metro { display: block; overflow: visible; }
.d-metro text { font-family: var(--sans); }
.d-metro .m-regla { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.d-metro .m-tramo { font: 700 11px var(--mono); letter-spacing: .14em; fill: var(--m-ink2); }
.d-metro .m-tramo tspan { font-weight: 500; letter-spacing: .02em; fill: var(--m-ink3); }
.d-metro .m-linea { fill: none; stroke: var(--mc); stroke-width: 12; stroke-linecap: round; }
.d-metro .m-brillo { fill: none; stroke: var(--mc); stroke-width: 28; stroke-linecap: round; opacity: .16; }
.d-metro .m-flujo { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 22; opacity: .55; }
.d-metro .m-loop { fill: none; stroke: var(--m-monitoreo); stroke-width: 6; stroke-linecap: round; stroke-dasharray: .1 16; }
.d-metro .m-loop-f { fill: var(--m-monitoreo); }
.d-metro .m-loop-t { font: 700 12px var(--mono); letter-spacing: .08em; fill: var(--m-monitoreo); }
.d-metro .m-nodo { fill: var(--navy); stroke: var(--mc); stroke-width: 5; transition: transform .2s ease; }
.d-metro .m-nodo-dojo { fill: var(--yt); stroke: #fff; stroke-width: 4; }
.d-metro .m-pulso { fill: none; stroke: var(--yt); stroke-width: 3; }
.d-metro .m-num { font: 800 14px var(--mono); fill: #fff; pointer-events: none; }
.d-metro .m-num-dojo { fill: var(--navy); }
.d-metro .m-tit { font-size: 15px; font-weight: 700; fill: var(--m-ink); letter-spacing: -.01em; }
.d-metro .m-tit-dojo { fill: var(--yt); }
.d-metro .m-pill { fill: var(--yt); }
.d-metro .m-pill-t { font-size: 11.5px; font-weight: 800; fill: var(--navy); }
.d-metro .m-c1 { font: 700 11px var(--mono); letter-spacing: .16em; fill: var(--m-ink3); }
.d-metro .m-c2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; fill: #fff; }
.d-metro .m-c3 { font-size: 14px; fill: var(--m-ink2); }
.d-metro .m-apagado { opacity: .28; }
.d-metro a { cursor: pointer; outline: none; }
.d-metro a > * { transition: opacity .25s ease; }
.d-metro a:hover .m-tit, .d-metro a:focus-visible .m-tit { text-decoration: underline; }
.d-metro a:focus-visible .m-nodo { stroke: #fff; stroke-width: 6; }
.d-metro.m-foco a:not(.m-on) > * { opacity: .3; }

.d-metrov { display: none; position: relative; padding: 14px 4px 4px 18px; }
.d-metrov::before { content: ""; position: absolute; left: 6px; top: 30px; bottom: 30px; border-left: 3px dotted var(--m-monitoreo); }
.mv-tramo, .mv-st { position: relative; margin-left: 14px; padding-left: 46px; }
.mv-tramo::before, .mv-st::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 8px; background: var(--mc); }
.mv-tramo { padding-top: 14px; padding-bottom: 8px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--m-ink3); }
.mv-tramo b { font-weight: 700; letter-spacing: .14em; color: var(--m-ink2); text-transform: uppercase; }
.d-metrov > .mv-tramo:first-child::before { top: 22px; border-radius: 4px 4px 0 0; }
.mv-st { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 64px; padding-top: 8px; padding-bottom: 8px; text-decoration: none; color: inherit !important; }
.mv-n { position: absolute; left: 1px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--navy); box-shadow: inset 0 0 0 4px var(--mc); display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--mono); color: #fff; z-index: 1; }
.mv-dojo .mv-n { background: var(--yt); color: var(--navy); box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(255,200,87,.25); }
.mv-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mv-t b { font: 700 15.5px/1.25 var(--sans); color: var(--m-ink); }
.mv-dojo .mv-t b { color: var(--yt); }
.mv-t span { font: 500 11.5px/1.4 var(--mono); color: var(--m-ink3); }
.mv-pill { font: 800 12px/1 var(--sans); background: var(--yt); color: var(--navy); padding: 8px 11px; border-radius: 999px; white-space: nowrap; }
.mv-hoja { font: 600 11px/1 var(--mono); color: var(--m-ink3); white-space: nowrap; }
.mv-st:last-of-type::before { bottom: 50%; border-radius: 0 0 4px 4px; }
.mv-loop { margin: 10px 0 0 -12px; font: 500 12px/1.4 var(--mono); color: var(--m-monitoreo); }
.mv-loop b { color: var(--m-ink2); }
@media (max-width: 899px) { .d-metro { display: none; } .d-metrov { display: block; } .d-mapa { padding: 18px 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .m-flujo, .m-pulso { display: none; } }

/* cómo se usa */
.d-usos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.d-uso { padding: 24px; gap: 10px; }
.d-uso h3 { font: 800 20px/1.25 var(--sans); }
.d-uso-full { grid-column: 1 / -1; gap: 16px; }
.d-uso-full > .d-txt { max-width: 760px; }
.d-uso-n { font: 700 13px/1 var(--mono); color: var(--tm-acc); }
.d-rondas-uso { align-items: stretch; gap: 8px; }
.d-uso-r { background: var(--tm-chip); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.d-uso-r > span:first-child { font: 800 16px/1.2 var(--sans); }
.d-uso-r i { font: 700 13px var(--mono); color: var(--tm-acc); font-style: normal; }
.d-uso-r > span:last-child { font: 14px/1.5 var(--sans); color: var(--tm-ink2); }
.d-ok-lista { list-style: none; padding: 0 !important; }
.d-ok-lista li { display: flex; gap: 10px; align-items: baseline; }
.d-ok-lista li::before { content: "✓"; color: var(--g); font-weight: 700; }
.d-orden { background: var(--navy); color: #fff; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.d-orden h3 { font: 800 20px/1.25 var(--sans); color: #fff; }
.d-orden p { margin: 0; font: 15px/1.6 var(--sans); color: #C9D0EE; }
.d-orden .d-btn { margin-top: 4px; font-size: 15px; padding: 15px 20px; }