/* Base */
html{color-scheme:light}
body{margin:0}
img{max-width:100%}

/* Layout: cabecera + pestañas de mockup; el editor es una mesa de 3 columnas (pasos, edición, móvil). */
/* Aplicación: barra lateral + vistas por rol. Tokens en violeta (como la app) con naranja de acento. */
:root{
  --bg:#F4F2F9; --surface:#FFFFFF; --surface2:#ECE8F5; --ink:#1E1736; --muted:#5F5878; --line:#DAD4E8;
  --accent:#5A32A6; --accent-ink:#FFFFFF; --accent-soft:#E8DFF9;
  --orange:#C96A0F; --orange-soft:#FCEBD7;
  --c0:#3453CF; --c0-soft:#E2E8FB; --c1:#A63D80; --c1-soft:#F5E3EE;
  --ok:#2B7A4B; --ok-soft:#DDF1E4; --warn:#9A5B00; --warn-soft:#FBEDD3; --bad:#B8362A; --bad-soft:#FADFDB;
  --side-bg:#25173F; --side-ink:#EFE9FB; --side-muted:#A99DC9; --side-line:#3A2B5E; --side-active:#3A2766;
  --code-bg:#120D20; --code-ink:#E2D9F5;
  --f-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#130F1D; --surface:#1C1630; --surface2:#271F40; --ink:#ECE7F8; --muted:#A79FC0; --line:#342B50;
  --accent:#B195F5; --accent-ink:#1A0E38; --accent-soft:#32265A;
  --orange:#F2A04D; --orange-soft:#3B2813;
  --c0:#8DA6FF; --c0-soft:#1D2848; --c1:#E68CC3; --c1-soft:#3A1F31;
  --ok:#6CCB93; --ok-soft:#14301F; --warn:#E5A84A; --warn-soft:#38290F; --bad:#F2857D; --bad-soft:#3A1B18;
  --side-bg:#0E0A18; --side-ink:#ECE7F8; --side-muted:#8F85AD; --side-line:#261E3D; --side-active:#2B2150;
  --code-bg:#0B0813; --code-ink:#E2D9F5; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#130F1D; --surface:#1C1630; --surface2:#271F40; --ink:#ECE7F8; --muted:#A79FC0; --line:#342B50;
  --accent:#B195F5; --accent-ink:#1A0E38; --accent-soft:#32265A;
  --orange:#F2A04D; --orange-soft:#3B2813;
  --c0:#8DA6FF; --c0-soft:#1D2848; --c1:#E68CC3; --c1-soft:#3A1F31;
  --ok:#6CCB93; --ok-soft:#14301F; --warn:#E5A84A; --warn-soft:#38290F; --bad:#F2857D; --bad-soft:#3A1B18;
  --side-bg:#0E0A18; --side-ink:#ECE7F8; --side-muted:#8F85AD; --side-line:#261E3D; --side-active:#2B2150;
  --code-bg:#0B0813; --code-ink:#E2D9F5; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.5;padding:0}
.wrap{max-width:1240px;margin-inline:auto;display:flex;flex-direction:column;gap:28px}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(28px,4vw,40px);line-height:1.1}
h2{font-size:22px}
h3{font-size:15px}
p{margin:0}
.lead{max-width:68ch;color:var(--muted);font-size:15px}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
button,select,textarea,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* flujo antes/después */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.flow>div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.chip{padding:3px 9px;border-radius:99px;background:var(--surface2);border:1px solid var(--line);white-space:nowrap}
.chip.hand{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.chip.good{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.arrow{color:var(--muted)}
.flow ul{margin:0;padding-left:18px;color:var(--muted)}

/* pestañas */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;font-weight:600;color:var(--muted)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tab small{font-family:var(--f-mono);font-weight:400;margin-right:6px;color:var(--muted)}
.panel[hidden]{display:none}

/* ventana de la herramienta */
.app{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.topbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface2)}
.crumb{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.crumb b{font-family:var(--f-display);font-size:16px}
.crumb span{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:6px 12px;font-family:var(--f-mono);font-size:12px;display:flex;gap:6px;align-items:center}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.seg i{font-style:normal;font-size:10px;opacity:.85}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font-weight:500}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.ghost{background:none}

.desk{display:grid;grid-template-columns:240px minmax(0,1fr) 322px;min-height:640px}
.steps{border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:4px;background:var(--surface)}
.step{display:grid;grid-template-columns:22px auto minmax(0,1fr);gap:8px;align-items:center;text-align:left;border:1px solid transparent;background:none;border-radius:8px;padding:6px}
.step:hover{background:var(--surface2)}
.step[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent)}
.step .n{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.step .tp{font-family:var(--f-mono);font-size:10px;text-align:center;border-radius:5px;padding:2px 6px;background:var(--surface2);color:var(--muted)}
.step .tp.dialogue{background:var(--c0-soft);color:var(--c0)}
.step .tp.question{background:var(--warn-soft);color:var(--warn)}
.step .tp.ar{background:var(--ok-soft);color:var(--ok)}
.step .sm{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.addrow{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.addrow .btn{flex:1 1 auto}

.editor{padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.edhead{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.edhead h3{font-size:18px}
.rows{display:flex;flex-direction:column;gap:8px}
.line{display:grid;grid-template-columns:18px 64px minmax(0,1fr) 128px;gap:8px;align-items:start;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.line .grip{color:var(--muted);font-size:14px;line-height:30px;text-align:center;cursor:grab;user-select:none}
.line select,.line textarea,.field textarea,.field input,.field select,.cell textarea{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:6px 8px}
.line textarea,.field textarea,.cell textarea{resize:vertical;min-height:34px;line-height:1.4}
.who{font-weight:600}
.who.c0{color:var(--c0)} .who.c1{color:var(--c1)}
.meta{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.pill{font-family:var(--f-mono);font-size:10px;border-radius:99px;padding:1px 7px;background:var(--ok-soft);color:var(--ok)}
.pill.miss{background:var(--bad-soft);color:var(--bad)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.info{background:var(--surface2);color:var(--muted)}
.hint{font-size:12px;color:var(--muted)}
.hint code,.mono{font-family:var(--f-mono)}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.04em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.opt .row{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;align-items:start}
.opt .fb{display:grid;grid-template-columns:64px minmax(0,1fr) 128px;gap:8px;align-items:start;padding-left:10px;border-left:3px solid var(--line)}
.opt .tag{font-family:var(--f-mono);font-size:11px;color:var(--muted);line-height:30px}
.exit{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}

/* móvil: imita la app (pantalla completa, caja de texto con borde naranja, 6 hexágonos de progreso) */
.preview{border-left:1px solid var(--line);padding:16px;background:var(--surface2);display:flex;flex-direction:column;align-items:center;gap:10px}
.phone{width:272px;aspect-ratio:1170/2532;border-radius:30px;border:6px solid #0b1117;background:#1a1030;overflow:hidden;position:relative;box-shadow:0 8px 24px rgba(0,0,0,.25);container-type:inline-size;font-family:"Lato",var(--f-body),sans-serif;flex:none}
.pv{position:absolute;inset:0;overflow:hidden;cursor:pointer;color:#fff}
.pv-img{position:absolute;left:0;top:9%;width:100%;display:block;-webkit-mask-image:linear-gradient(transparent 0,#000 7%,#000 78%,transparent);mask-image:linear-gradient(transparent 0,#000 7%,#000 78%,transparent)}
.pv-img.dim{filter:brightness(.45)}
.pv-ab{position:absolute;left:0;right:0;top:9%;height:57%;display:grid;place-items:center;text-align:center;font-size:4.4cqw;line-height:1.5;color:#e8dff7;background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 10px,rgba(255,255,255,.02) 10px 20px)}
.pv-ab b{font-family:var(--f-mono);font-size:4.6cqw}
.pv-hdr{position:absolute;top:2.4%;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;z-index:3;pointer-events:none}
.pv-logo{font-family:var(--f-display);font-weight:700;font-size:7.4cqw;color:#f2a15a;text-shadow:0 1px 4px rgba(0,0,0,.45);letter-spacing:-.04em}
.pv-exit{width:9.5cqw;aspect-ratio:1/1.1;background:#f39a3a;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;font-size:4.4cqw;color:#fff;box-shadow:0 0 10px #f39a3a}
.pv-tag{position:absolute;left:50%;top:7.4%;transform:translateX(-50%);z-index:3;font-family:var(--f-mono);font-size:2.9cqw;background:rgba(0,0,0,.55);color:#fff;border-radius:99px;padding:.6cqw 2.6cqw;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.pv-tag.bad{background:#b8362a}
.pv-box{position:absolute;left:3.5%;right:3.5%;bottom:14.5%;min-height:17%;padding:5.2% 6%;border-radius:5.5cqw;border:2px solid #f6a24a;background:rgba(58,32,102,.8);box-shadow:0 0 10px rgba(243,154,58,.55),inset 0 0 10px rgba(243,154,58,.18);font-weight:700;font-size:5.1cqw;line-height:1.3;z-index:3}
.pv-box::before,.pv-box::after{content:"";position:absolute;left:50%;width:18%;height:2px;background:#f6a24a;box-shadow:0 0 6px #f6a24a;transform:translateX(-50%)}
.pv-box::before{top:-3cqw}.pv-box::after{bottom:-3cqw}
.pv-box small{font-weight:400;opacity:.8}
.nick{border-bottom:1px dotted rgba(255,255,255,.7)}
.pv-hex{position:absolute;left:5%;right:5%;bottom:1.6%;display:flex;align-items:center;justify-content:space-between;z-index:3;pointer-events:none}
.pv-hex::before{content:"";position:absolute;left:6%;right:6%;top:50%;height:2px;background:rgba(255,255,255,.85)}
.pv-hex b{position:relative;width:11cqw;aspect-ratio:1/1.12;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,#7a46b4,#2a1352)}
.pv-hex b.on{background:linear-gradient(135deg,#7fe0ff,#1b97d6)}
.pv-opts{position:absolute;left:5%;right:5%;bottom:14%;display:flex;flex-direction:column;gap:2.6cqw;z-index:3}
.pv-opt{border:2px solid #f6a24a;border-radius:99px;background:rgba(90,40,120,.7);color:#fff;font-family:inherit;font-weight:900;font-size:5.2cqw;padding:3cqw 4cqw;text-align:center;box-shadow:0 0 8px rgba(243,154,58,.5);cursor:pointer}
.pv-opt[aria-pressed="true"]{background:rgba(246,162,74,.92);color:#2a1050}
.pv-top{position:absolute;left:5%;right:5%;top:12%;z-index:3;background:rgba(20,12,40,.62);border-radius:4cqw;padding:3cqw 4cqw;font-weight:700;font-size:4.6cqw;line-height:1.3}
.pv-ar3d{position:absolute;left:9%;right:9%;top:26%;height:34%;border:2px dashed rgba(255,255,255,.65);border-radius:4cqw;display:grid;place-items:center;text-align:center;font-family:var(--f-mono);font-size:4cqw;line-height:1.5;color:#fff;background:rgba(20,30,50,.3);z-index:2}
.pv-send{position:absolute;left:22%;right:22%;bottom:11%;height:7.6%;display:grid;place-items:center;font-weight:900;font-size:7cqw;color:#1b2a3a;background:linear-gradient(180deg,#5fe0ff,#17b4ff);clip-path:polygon(6% 0,94% 0,100% 20%,100% 80%,94% 100%,6% 100%,0 80%,0 20%);z-index:3}

/* juegos AR: píldora translúcida, temporizador, retícula, botón de ayuda y ventana de ayuda */
.pv-pill{position:absolute;left:7%;right:7%;bottom:20%;min-height:8%;display:grid;place-items:center;padding:3cqw 5cqw;border-radius:9cqw;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:5cqw;line-height:1.3;text-align:center;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.pv-pill.top{bottom:auto;top:11%}
.pv-pill.bad{background:rgba(184,54,42,.5)}
.pv-timer{position:absolute;left:50%;top:10%;transform:translateX(-50%);padding:1.4cqw 7cqw;border-radius:99px;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.22);font-weight:900;font-size:9cqw;color:#fff;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
.pv-ret{position:absolute;left:50%;top:50%;width:19cqw;height:8cqw;transform:translate(-50%,-50%);border:2px solid #5fe3ff;border-radius:50%;box-shadow:0 0 10px #5fe3ff,inset 0 0 8px #5fe3ff;z-index:2}
.pv-helpw{position:absolute;left:50%;bottom:7.6%;transform:translateX(-50%);filter:drop-shadow(0 0 7px #f6a24a);z-index:3}
.pv-help{width:14cqw;aspect-ratio:1/1.12;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(#f9b568,#e98a2c);display:grid;place-items:center;font-weight:900;font-size:8.5cqw;color:#fff}
.pv-pop{position:absolute;inset:0;background:radial-gradient(circle at 78% 22%,rgba(80,20,70,.55),transparent 45%),radial-gradient(circle at 14% 30%,rgba(10,30,80,.5),transparent 40%)}
.pv-popbox{position:absolute;left:6.5%;right:6.5%;top:34%;padding:9cqw 6cqw 8cqw;border-radius:6cqw;border:2px solid #f6a24a;background:linear-gradient(#4a2a5e,#241638);box-shadow:0 0 14px rgba(243,154,58,.6),inset 0 0 10px rgba(243,154,58,.18);text-align:center;font-weight:900;font-size:6.1cqw;line-height:1.3;color:#fff;z-index:3}
.pv-ok{width:36%;margin:5cqw auto 0;padding:2.4cqw 0;clip-path:polygon(14% 0,86% 0,100% 28%,100% 72%,86% 100%,14% 100%,0 72%,0 28%);background:linear-gradient(#63e1ff,#12b0ff);font-weight:900;font-size:7.4cqw;color:#101820}
.pv-send{bottom:9.5%}
.pv-ar3d{background:rgba(20,30,50,.28);top:25%;height:32%}
.pvnav{display:flex;align-items:center;gap:10px}
.pvnav .mono{font-size:12px;color:var(--muted);min-width:44px;text-align:center}
.pvcap{text-align:center;max-width:290px;min-height:2.6em}
.chsel{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 8px;font-family:var(--f-display);font-weight:700;font-size:15px}
.btn:disabled{opacity:.4;cursor:default}

/* traducciones */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface2)}
.tscroll{overflow-x:auto}
table.tr{border-collapse:collapse;width:100%;min-width:900px}
table.tr th{position:sticky;top:0;background:var(--surface2);text-align:left;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--line)}
table.tr td{vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--line)}
table.tr td.k{font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap;width:120px}
.cell.flag textarea{border-color:var(--warn);background:var(--warn-soft)}
.cell .why{font-size:11px;color:var(--warn);margin-top:2px}

/* validar / exportar */
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0}
.col{padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.col+.col{border-left:1px solid var(--line)}
.issue{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.sev{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;border-radius:6px;padding:3px 0;text-align:center;height:fit-content}
.sev.warn{background:var(--warn-soft);color:var(--warn)} .sev.ok{background:var(--ok-soft);color:var(--ok)} .sev.err{background:var(--bad-soft);color:var(--bad)} .sev.info{background:var(--surface2);color:var(--muted)}
.issue b{display:block}
.issue .fix{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.files{display:flex;flex-direction:column;gap:6px}
.file{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--surface)}
.file span{font-family:var(--f-mono);font-size:12px;min-width:0;overflow-wrap:anywhere}
pre.json{margin:0;background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:12px;font-family:var(--f-mono);font-size:11.5px;line-height:1.5;max-height:380px;overflow:auto}
.cov{display:flex;gap:8px;flex-wrap:wrap}
.cov div{border:1px solid var(--line);border-radius:9px;padding:8px 12px;background:var(--surface);min-width:96px}
.cov b{font-family:var(--f-display);font-size:20px;display:block}

/* importar */
.drop{border:2px dashed var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--bg)}
.screenplay{width:100%;min-height:210px;font-family:var(--f-mono);font-size:12.5px;line-height:1.6;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg);resize:vertical}
.diff{width:100%;border-collapse:collapse;font-size:13px}
.diff th,.diff td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.diff th{font-family:var(--f-mono);font-size:11px;color:var(--muted)}

/* guía */
.gcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gcard{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface);display:flex;flex-direction:column;gap:8px;min-width:0}
.gcard .tp{align-self:flex-start;font-family:var(--f-mono);font-size:11px;border-radius:5px;padding:2px 8px}
.gcard .tp.dialogue{background:var(--c0-soft);color:var(--c0)} .gcard .tp.question{background:var(--warn-soft);color:var(--warn)} .gcard .tp.ar{background:var(--ok-soft);color:var(--ok)}
.gcard dl,.gbox dl{margin:0;display:grid;gap:2px}
.gcard dt,.gbox dt{font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:6px}
.gcard dd,.gbox dd{margin:0}
.gbox{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px;background:var(--surface);min-width:0}
.gbox ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
#catTable th,#catTable td{padding:6px 6px}#catTable td.mono{font-size:12.5px;white-space:nowrap}#catTable td:nth-child(3){font-size:12.5px}#catTable td:last-child{width:34px;text-align:right}#catTable td.k{width:auto;white-space:nowrap}
.catform{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;padding-top:6px}
.catform input,.catform select{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:6px 8px}
.chain .mono{font-family:var(--f-mono)}
.numgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.numgrid input,.field input[type="number"]{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:6px 8px}
.addrow .btn{font-size:11px}
@media (max-width:760px){.catform{grid-template-columns:1fr}.numgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.help{border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:8px 12px}
.help summary{cursor:pointer;font-weight:600}
.help p{margin-top:6px;color:var(--muted)}
.rv{font-family:var(--f-mono);font-size:11px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:3px 10px;white-space:nowrap}
.rv[aria-pressed="true"]{background:var(--ok-soft);color:var(--ok);border-color:transparent}
@media (max-width:1020px){.gcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gcards{grid-template-columns:1fr}}

/* notas finales */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.notes>div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.notes ul,.notes ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.mockbadge{font-family:var(--f-mono);font-size:11px;color:var(--muted)}

@media (max-width:1020px){
  .desk{grid-template-columns:200px minmax(0,1fr)}
  .preview{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .flow,.notes,.two,.grid2{grid-template-columns:1fr}
  .col+.col{border-left:0;border-top:1px solid var(--line)}
  .desk{grid-template-columns:1fr}
  .steps{border-right:0;border-bottom:1px solid var(--line);max-height:230px;overflow:auto}
  .line{grid-template-columns:18px minmax(0,1fr)}
  .line .grip{grid-row:span 3}
  .line>*:nth-child(n+3){grid-column:2}
  .opt .fb{grid-template-columns:1fr}
  .opt .row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

/* ===== aplicación ===== */
[hidden]{display:none!important}
.shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
.side{background:var(--side-bg);color:var(--side-ink);padding:20px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.05em}
.brand i{width:26px;aspect-ratio:1/1.12;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,#f8b25c,#e2661f);display:block;flex:none}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{background:none;border:0;color:var(--side-muted);text-align:left;padding:9px 10px;border-radius:8px;font-weight:500;font-size:14px}
.nav button:hover{color:var(--side-ink);background:rgba(255,255,255,.05)}
.nav button[aria-current="page"]{background:var(--side-active);color:var(--side-ink)}
.helpbtn{margin-top:auto;display:flex;align-items:center;gap:10px;background:none;border:1px solid var(--side-line);color:var(--side-muted);padding:8px 10px;border-radius:10px;font-weight:500;font-size:14px;text-align:left}
.helpbtn i{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;flex:none}
.helpbtn:hover,.helpbtn[aria-current="page"]{color:var(--side-ink);background:var(--side-active);border-color:transparent}
.me{margin-top:auto;border-top:1px solid var(--side-line);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.sidelabel{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--side-muted)}
.roleseg{display:flex;flex-direction:column;gap:4px}
.roleseg button{background:none;border:1px solid var(--side-line);color:var(--side-muted);text-align:left;padding:7px 10px;border-radius:8px;font-size:13px}
.roleseg button[aria-pressed="true"]{background:var(--side-active);border-color:transparent;color:var(--side-ink);font-weight:600}
.sidehint{margin:0;font-size:12px;color:var(--side-muted)}
main{min-width:0;padding:24px 28px 64px;display:flex;flex-direction:column;gap:18px}
.view{display:flex;flex-direction:column;gap:18px;min-width:0}
.view[hidden],#tp-guion[hidden],#tp-trans[hidden],#tp-export[hidden],.modal-wrap[hidden]{display:none}
.view h1{font-size:26px;line-height:1.15}
.pagehead{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-end}
.sub{color:var(--muted);margin-top:4px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions input[type="search"]{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 10px;min-width:200px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stat b{font-family:var(--f-display);font-size:30px;line-height:1}
.stat span{color:var(--muted);font-size:13px}
.stat.focus{border-color:var(--accent);background:var(--accent-soft)}
.chtable{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.dash{width:100%;border-collapse:collapse;min-width:760px}
table.dash th{text-align:left;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface2);white-space:nowrap}
table.dash td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.dash tr:last-child td{border-bottom:0}
table.dash tr.rowopen:hover td{background:var(--surface2);cursor:pointer}
.rname b{display:block;font-size:15px}
.rname span{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.langbars{display:grid;grid-template-columns:repeat(3,66px);gap:10px}
.langbars>div{display:flex;flex-direction:column;gap:3px;font-family:var(--f-mono);font-size:10px;color:var(--muted);white-space:nowrap}
.bar{height:6px;border-radius:99px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.bar.ok i{background:var(--ok)}
.st{font-family:var(--f-mono);font-size:11px;border-radius:99px;padding:3px 10px;white-space:nowrap;background:var(--surface2);color:var(--muted)}
.st.review{background:var(--warn-soft);color:var(--warn)}
.st.ready{background:var(--ok-soft);color:var(--ok)}
.nbadge{font-family:var(--f-mono);font-size:10px;border-radius:99px;padding:1px 7px;background:var(--warn-soft);color:var(--warn);margin-left:4px}
.nbadge:empty{display:none}
.nbadge.ok{background:var(--ok-soft);color:var(--ok)}
.chhead{display:flex;flex-direction:column;gap:6px}
.linkback{background:none;border:0;color:var(--accent);padding:0;font-weight:600;align-self:flex-start;font-size:13px}
.linkback:hover{text-decoration:underline}
.chrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.chtitle{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.chtitle .mono{font-size:12px;color:var(--muted)}
.chactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.subtabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;font-weight:600;color:var(--muted)}
.subtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.banner{margin:0 0 12px;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--ink);border:1px solid var(--line)}
.banner.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.banner .linkback{display:inline}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn[hidden]{display:none}
.trstat{display:flex;flex-direction:column;gap:6px;min-width:220px}
.trstat .bar{width:100%}
fieldset.ro{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:14px}
fieldset.ro:disabled textarea,fieldset.ro:disabled input,fieldset.ro:disabled select{opacity:.75}
.modal-wrap{position:fixed;inset:0;background:rgba(14,8,28,.6);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--surface);color:var(--ink);border-radius:14px;width:min(640px,100%);max-height:92vh;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.mhead{display:flex;justify-content:space-between;align-items:center}
.mfoot{display:flex;justify-content:flex-end;gap:8px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.desk{grid-template-columns:210px minmax(0,1fr) 304px}
.line{grid-template-columns:18px 88px minmax(0,1fr) 124px}
@media (max-width:1240px){
  .desk{grid-template-columns:200px minmax(0,1fr)}
  .preview{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)}
}

/* estado del reto: fases visibles y siguiente paso */
.status{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--muted);border-radius:12px;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:center}
.status[data-state="review"]{border-left-color:var(--warn);background:var(--warn-soft)}
.status[data-state="ready"]{border-left-color:var(--ok);background:var(--ok-soft)}
.stepper{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start}
.stepper li{flex:1;display:flex;flex-direction:column;gap:4px;position:relative;padding-right:10px;min-width:0}
.stepper li::before{content:"";position:absolute;top:13px;left:32px;right:4px;height:2px;background:var(--line)}
.stepper li:last-child::before{display:none}
.stepper li.done::before{background:var(--ok)}
.stepper .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;border:2px solid var(--line);background:var(--surface);color:var(--muted);position:relative;z-index:1}
.stepper li.cur .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 4px var(--accent-soft)}
.stepper li.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.stepper b{font-size:14px}
.stepper li:not(.cur):not(.done) b{color:var(--muted)}
.stepper small{color:var(--muted);font-size:11.5px;line-height:1.3}
.status[data-state="review"] .stepper small,.status[data-state="ready"] .stepper small{color:var(--ink);opacity:.7}
.statusbody{display:flex;flex-direction:column;gap:10px}
.statusmsg{margin:0;font-weight:600;font-size:15px;line-height:1.35}
.statusact{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.statusact .hint{flex-basis:100%;color:var(--ink);opacity:.75}
.btn.big{padding:10px 18px;font-weight:700;font-size:14px}
.actionbar{position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 -8px 22px rgba(20,10,40,.16);font-weight:600}
@media (max-width:860px){.status{grid-template-columns:1fr}}

/* acceso */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(circle at 18% 14%,#4b2a88 0,transparent 46%),radial-gradient(circle at 86% 92%,#7b3b12 0,transparent 42%),#1b1030}
.logincard{width:min(400px,100%);background:var(--surface);color:var(--ink);border-radius:16px;padding:28px 26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.brand.big{font-size:21px;color:var(--ink)}
.loginsub{margin:0;color:var(--muted)}
.pwrow{display:flex;gap:8px;align-items:center}
.pwrow input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:10px 12px;font-size:15px}
.loginerr{margin:0;color:var(--bad);background:var(--bad-soft);padding:9px 12px;border-radius:8px;font-weight:600}
.loginmock{margin:0;padding-top:10px;border-top:1px solid var(--line)}
.logincard.shake{animation:shake .32s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.logincard.shake{animation:none}}
.logoutbtn{background:none;border:0;color:var(--side-muted);text-align:left;padding:8px 10px;border-radius:8px;font-size:13px}
.logoutbtn:hover{color:var(--side-ink);background:rgba(255,255,255,.05)}
.helpbtn+.logoutbtn{margin-top:-10px}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px}
  .nav{flex-direction:row;flex-wrap:wrap}
  .helpbtn{margin-top:0;margin-left:auto}
  .helpbtn+.logoutbtn{margin-top:0}
  .me{margin-top:0;border-top:0;padding-top:0;flex-basis:100%}
  .roleseg{flex-direction:row;flex-wrap:wrap}
  .sidehint{display:none}
  main{padding:18px 16px 56px}
  .stats{grid-template-columns:1fr}
  .desk{grid-template-columns:1fr}
}

/* guardado */
.savestat{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;font-size:13px;color:var(--side-muted)}
.savestat+.helpbtn{margin-top:0}
.savestat span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#4cc38a;margin-right:8px}
.savestat[data-kind="busy"] span::before{background:#e0b341}
.savestat[data-kind="error"] span::before,.savestat[data-kind="conflict"] span::before{background:#e5604d}
.savestat button{background:none;border:0;padding:2px 0;color:var(--side-muted);font-size:12px;text-decoration:underline;text-align:left}
.savestat button:hover{color:var(--side-ink)}
.loadmsg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:60vh;color:var(--muted,#667)}
.loadmsg[hidden]{display:none}
.verlist{display:grid;gap:6px;max-height:60vh;overflow:auto}
.verrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line,#e5e7eb)}
@media (max-width:860px){
  .savestat{margin-top:0;margin-left:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:0}
  .savestat+.helpbtn{margin-left:0}
}

/* base de datos (solo lectura) */
.banner.err{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.st.nojson{background:var(--bad-soft);color:var(--bad)}
.dbcard{margin:0 0 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dbcard>summary{cursor:pointer;padding:10px 14px;font-weight:600;display:flex;align-items:center;gap:8px}
.dbtab{width:100%;border-collapse:collapse;font-size:13px}
.dbtab th,.dbtab td{text-align:left;padding:6px 14px;border-top:1px solid var(--line);vertical-align:top}
.dbtab th{width:290px;font-family:var(--f-mono);font-weight:500;font-size:12px}
.dbtab td.t{width:90px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.dbtab td.v{word-break:break-word}
#v-ch.nojson .status,#v-ch.nojson #chNotice,#v-ch.nojson .subtabs,#v-ch.nojson #chState{display:none}

/* aventuras y retos reales */
.modal.wide{width:min(820px,100%)}
.fgroup{display:flex;flex-direction:column;gap:10px}
.fgroup h3{margin:4px 0 0;font-size:14px;display:flex;align-items:center;gap:8px}
.fgroup h3 .mono{font-size:11px;color:var(--muted);font-weight:400}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:640px){.grid4{grid-template-columns:1fr 1fr}}
.upload{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.upload>div{display:flex;flex-direction:column;gap:2px}
.pill.pub{background:var(--warn-soft);color:var(--warn)}
.banner.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.dbtab td.v .pill{margin-left:6px}
.pill.dep{background:var(--surface2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-left:6px}
.dbtab tr.dep th,.dbtab tr.dep td.v{color:var(--muted)}

/* app texts */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.grid3{grid-template-columns:1fr}}
.txtsum{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.txttab th,.txttab td{vertical-align:top;padding:8px 10px}
.txttab th.k{font-family:var(--f-mono);font-size:12px;font-weight:500;width:230px;word-break:break-all;text-align:left}
.txttab td textarea{width:100%;min-width:170px;border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:6px 8px;resize:vertical;line-height:1.4}
.txttab td.act{width:44px;text-align:right}
.txttab tr.new th.k{box-shadow:inset 3px 0 0 var(--ok)}
.txttab tr.mod th.k{box-shadow:inset 3px 0 0 var(--warn)}
.pill.new{background:var(--ok-soft);color:var(--ok)}
.txtlist{margin:4px 0 10px;padding-left:18px;font-size:13px}
.txtlist .mono{font-size:12px}