:root{
  --bg:#2A0A06; --surface:#45110C; --surface-2:#5A1610;
  --gold:#C9A961; --gold-dark:#A88A47; --cream:#F4EDE0; --text-2:#C9B4A0;
  --line:rgba(201,169,97,.24); --danger:#C0564F; --ok:#6FA57C; --warn:#C9A961;
  --font-display:'League Spartan',system-ui,sans-serif; --font-body:'DM Sans',system-ui,sans-serif;
  --radius-card:18px; --shadow-card:0 8px 24px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--cream);font-family:var(--font-body);font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;color:var(--cream);letter-spacing:-.01em;margin:0}
p{margin:0;color:var(--text-2);line-height:1.5}
button{font-family:var(--font-body);cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:var(--font-body)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.app-shell{max-width:520px;margin:0 auto;min-height:100vh;position:relative;background:var(--bg)}
.header{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.header-brand{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.16em;color:var(--cream)}
.header-brand .thin{color:var(--gold);font-weight:700}
main{min-height:calc(100vh - 130px)}
.page{padding:24px 20px 108px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.texto-secundario{color:var(--text-2);font-size:14px}
h1.title{font-size:26px;font-weight:900;margin:6px 0 2px;line-height:1.1}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px}
.card+.card{margin-top:14px}
.card-destacada{background:var(--surface-2)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:var(--gold);color:#1F1815;font-weight:700;font-size:15px;border-radius:999px;padding:12px 24px;transition:background .2s,transform .15s}
.btn-primary:hover{background:var(--gold-dark);color:var(--cream)}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.5;pointer-events:none}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;color:var(--cream);font-weight:500;font-size:14px}
.btn-ghost:hover{border-color:var(--gold)}

/* progreso */
.progress{height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold));border-radius:999px;transition:width .4s}
.stat-row{display:flex;gap:10px;margin-top:14px}
.stat{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.stat .num{font-family:var(--font-display);font-weight:900;font-size:22px;color:var(--gold)}
.stat .lbl{font-size:11px;color:var(--text-2);margin-top:2px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{font-size:12px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text-2);background:transparent;white-space:nowrap}
.chip.on{background:var(--gold);color:#1F1815;border-color:var(--gold);font-weight:600}

/* etapa (nivel) */
.etapa{margin-bottom:12px}
.etapa-head{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card)}
.etapa-head.abierta{border-color:var(--gold);border-bottom-left-radius:0;border-bottom-right-radius:0}
.etapa-num{width:40px;height:40px;flex:none;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;color:var(--gold);font-size:18px}
.etapa-info{flex:1;min-width:0}
.etapa-info .n{font-family:var(--font-display);font-weight:800;font-size:16px}
.etapa-info .d{font-size:12px;color:var(--text-2)}
.etapa-mini{font-size:12px;color:var(--gold);font-weight:600;white-space:nowrap}
.etapa-body{border:1px solid var(--gold);border-top:none;border-radius:0 0 var(--radius-card) var(--radius-card);padding:12px;background:var(--surface)}

/* microaccion */
.micro{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;background:var(--bg)}
.micro .area{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:600}
.micro .txt{margin:5px 0 4px;color:var(--cream);font-size:14.5px;line-height:1.4}
.micro .fort{font-size:12px;color:var(--text-2)}
.micro .crit{font-size:12.5px;color:var(--text-2);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);display:none}
.micro.expand .crit{display:block}
.sem{display:flex;gap:6px;margin-top:10px}
.sem button{flex:1;min-height:36px;border-radius:10px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--text-2);transition:.15s}
.sem button .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.sem button[data-k="Hecho"] .dot{background:var(--ok)}
.sem button[data-k="A medias"] .dot{background:var(--warn)}
.sem button[data-k="No"] .dot{background:var(--danger)}
.sem button.on[data-k="Hecho"]{border-color:var(--ok);background:rgba(111,165,124,.14);color:var(--cream)}
.sem button.on[data-k="A medias"]{border-color:var(--warn);background:rgba(200,169,110,.14);color:var(--cream)}
.sem button.on[data-k="No"]{border-color:var(--danger);background:rgba(192,86,79,.14);color:var(--cream)}
.micro-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.link{font-size:12px;color:var(--gold);background:none;padding:0}

/* barras por area/nivel */
.bar-row{display:flex;align-items:center;gap:10px;margin:9px 0}
.bar-row .lbl{width:150px;flex:none;font-size:12.5px;color:var(--text-2)}
.bar-row .track{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.bar-row .track>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold))}
.bar-row .pct{width:38px;text-align:right;font-size:12px;color:var(--gold);font-weight:600}

/* chat */
.chat{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.msg{max-width:80%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.45}
.msg.me{align-self:flex-end;background:var(--gold);color:#1F1815;border-bottom-right-radius:5px}
.msg.other{align-self:flex-start;background:var(--surface-2);color:var(--cream);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg .who{display:block;font-size:10.5px;opacity:.7;margin-bottom:2px;letter-spacing:.04em;text-transform:uppercase}
.msg .ts{display:block;font-size:10px;opacity:.6;margin-top:3px;text-align:right}
.composer{position:fixed;bottom:calc(60px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:100%;max-width:520px;display:flex;gap:8px;padding:10px 14px;background:var(--surface);border-top:1px solid var(--line)}
.composer input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:11px 16px;color:var(--cream);font-size:14px}
.composer button{width:44px;height:44px;flex:none;border-radius:50%;background:var(--gold);color:#1F1815;display:flex;align-items:center;justify-content:center}

/* forms */
.field{margin:12px 0}
.field label{display:block;font-size:12px;color:var(--text-2);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 14px;color:var(--cream);font-size:14px}
.scale{display:flex;gap:5px;flex-wrap:wrap}
.scale button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);color:var(--text-2);font-weight:600;font-size:13px}
.scale button.on{background:var(--gold);color:#1F1815;border-color:var(--gold)}

.legal{font-size:12.5px;color:var(--text-2);line-height:1.55;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.frase{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--cream);letter-spacing:.01em;text-align:center;padding:6px 4px}
.rol-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--gold)}
.divider{height:1px;background:var(--line);margin:18px 0}
.empty{text-align:center;color:var(--text-2);font-size:13px;padding:30px 10px}

/* nav */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;display:flex;justify-content:space-around;background:var(--surface);border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:20}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;min-height:44px;padding:4px 8px;border-radius:12px;color:var(--text-2);font-size:10.5px;font-weight:500;transition:color .2s;background:none}
.nav-item svg{width:22px;height:22px}
.nav-item.activa{color:var(--gold)}
.badge{position:absolute;top:2px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.nav-item{position:relative}

/* panel del acompañante · lista de personas */
.personas-list{display:flex;flex-direction:column;gap:10px}
.persona-card{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .15s,background .15s}
.persona-card:hover{border-color:var(--gold)}
.persona-card.activa{border-color:var(--gold);background:var(--surface-2)}
.persona-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.persona-nom{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--cream)}
.persona-pct{font-family:var(--font-display);font-weight:900;font-size:16px;color:var(--gold)}
.persona-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin:9px 0 6px}
.persona-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold))}
.persona-sub{font-size:11px;color:var(--text-2)}
.personas-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.pchip{flex:none;font-size:12.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--text-2);background:transparent;white-space:nowrap}
.pchip.on{background:var(--gold);color:#1F1815;border-color:var(--gold);font-weight:600}

.splash{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.splash span{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.18em;color:var(--gold);animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.5}50%{opacity:1}}


/* fondo artístico aleatorio (solo vista persona) */
#bg-art{position:fixed;inset:0;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;display:none;pointer-events:none}
body.con-fondo #bg-art{display:block}
.app-shell{position:relative;z-index:1}
body.con-fondo .app-shell{background:transparent}
body.con-fondo .page>.eyebrow,body.con-fondo h1.title,body.con-fondo .frase,body.con-fondo .texto-secundario{text-shadow:0 2px 10px rgba(0,0,0,.6)}