:root{
  --red:#DA1E28; --ink:#141414; --g1:#6B6B6B; --g2:#E0E0E0; --g3:#F2F2F2; --white:#fff; --ok:#1E7B3C;
  --sans:"Helvetica Neue",Helvetica,-apple-system,system-ui,sans-serif;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--white)}
body{color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:var(--ink)}
a{color:var(--red)}
[hidden]{display:none!important}
#app{max-width:560px;margin:0 auto;padding:calc(var(--st) + 8px) 16px calc(var(--sb) + 96px)}
.view{display:flex;flex-direction:column;gap:14px}

.brand{display:flex;justify-content:space-between;align-items:center;padding:8px 0 14px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.brand-logo{height:20px;width:auto}
.badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;background:var(--ink);color:#fff}
.badge.wait{background:var(--g2);color:var(--ink)}

.eyebrow{color:var(--red);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.h1{font-size:34px;line-height:1;font-weight:700;letter-spacing:-.02em}
.h2{font-size:22px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.h3{font-size:17px;font-weight:700}
.red{color:var(--red)}
.muted{color:var(--g1)}
.small{font-size:13px}
.error{color:var(--red);font-weight:700}

.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.field input,.field select{border:0;border-bottom:2px solid var(--ink);padding:8px 0;font-size:19px;outline:none;border-radius:0;background:transparent}
.field input:focus{border-bottom-color:var(--red)}
textarea{border:2px solid var(--g2);padding:10px;font-size:16px;min-height:80px;resize:vertical;border-radius:0;outline:none;width:100%}
textarea:focus{border-color:var(--ink)}
.search{border:2px solid var(--ink);padding:10px 12px;font-size:16px;border-radius:0;outline:none;width:100%;-webkit-appearance:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:15px;border-radius:0;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{border:2px solid var(--ink)}
.btn-full{width:100%}
.btn-sm{min-height:38px;padding:6px 12px;font-size:13px}
.btn[aria-disabled="true"]{opacity:.4}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;align-self:flex-start;padding:6px 0}

.hint{background:var(--g3);border-left:4px solid var(--red);padding:12px 14px;font-size:14px;margin-bottom:12px}
.hint .btn{margin-top:8px}
.outbox{background:var(--ink);color:#fff;padding:10px 14px;font-size:14px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.outbox .btn{background:#fff;color:var(--ink);min-height:34px;padding:4px 10px;font-size:12px}

.lock-logo{width:120px;margin:20px 0 6px}

/* listas para elegir personas */
.pick-list{list-style:none;border-top:2px solid var(--ink)}
.sheet .pick-list{max-height:60vh;overflow:auto}
.pick-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--g2);cursor:pointer}
.pick-list li small{color:var(--g1);font-size:12px}
.pick-list li.done b::after{content:" ✓";color:var(--ok)}
.pick-list li.me{opacity:.4;cursor:default}

/* inicio */
.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.change{font-size:13px;text-decoration:underline;color:var(--g1)}
.progress{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcard{border:2px solid var(--ink);padding:12px;display:flex;flex-direction:column;gap:6px;text-align:left;min-height:110px}
.pcard b{font-size:28px;line-height:1}
.pcard span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pcard small{color:var(--g1);font-size:12px}
.pcard.done{border-color:var(--ok)}
.pcard.done b{color:var(--ok)}
.bar{height:8px;background:var(--g2);position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--red)}
.loading{font-family:ui-monospace,Menlo,monospace;font-size:13px;display:flex;justify-content:space-between}

/* tarjetas de valor */
.vlist{display:flex;flex-direction:column;gap:10px}
.vcard{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;border:2px solid var(--ink);padding:10px;text-align:left;width:100%}
.vcard img{width:64px;height:64px}
.vcard .k{color:var(--red);font-weight:700;font-size:13px;letter-spacing:.08em}
.vcard b{display:block;font-size:17px}
.vcard small{color:var(--g1);font-size:13px;display:block}
.chip{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;background:var(--g3);white-space:nowrap}
.chip.ok{background:var(--ok);color:#fff}
.chip.red{background:var(--red);color:#fff}
.vhead{display:flex;gap:14px;align-items:center}
.vhead img{width:84px;height:84px}
.lema{font-size:18px;font-weight:700;border-left:4px solid var(--red);padding-left:12px}
.box{background:var(--g3);padding:14px}
.box ul{padding-left:18px;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.reading p{margin-bottom:10px}
.res{list-style:none;border-top:2px solid var(--ink)}
.res li{padding:10px 2px;border-bottom:1px solid var(--g2);display:flex;flex-direction:column;gap:2px}
.res .tipo{font-size:11px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.06em}
.res small{color:var(--g1)}

/* quiz */
.q{border:2px solid var(--g2);padding:12px;display:flex;flex-direction:column;gap:8px}
.q.bad{border-color:var(--red)}
.q.good{border-color:var(--ok)}
.q p{font-weight:700}
.opt{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--g2);text-align:left;width:100%}
.opt.on{border-color:var(--ink);background:var(--g3)}
.opt.right{border-color:var(--ok);background:#E8F4EC}
.opt.wrong{border-color:var(--red);background:#FBE9EA}
.opt i{flex:0 0 18px;height:18px;border:2px solid var(--ink);border-radius:50%;margin-top:2px}
.opt.on i{background:var(--ink);box-shadow:inset 0 0 0 3px #fff}
.result{padding:16px;text-align:center;border:2px solid var(--ink)}
.result b{font-size:40px;display:block}
.result.ok{border-color:var(--ok)}

/* autoevaluación y calificación */
.vblock{border-top:2px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.vblock-head{display:flex;gap:10px;align-items:center}
.vblock-head img{width:44px;height:44px}
.vblock-head .score{margin-left:auto;font-weight:700;font-size:20px}
.stmt{display:flex;flex-direction:column;gap:6px}
.stmt.invalid p{color:var(--red)}
.scale{display:grid;gap:4px}
.scale5{grid-template-columns:repeat(5,1fr)}
.scale10{grid-template-columns:repeat(10,1fr)}
.scale button{min-height:40px;border:2px solid var(--g2);font-weight:700;font-size:15px}
.scale button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.scale-legend{display:flex;justify-content:space-between;font-size:11px;color:var(--g1)}
.sticky{position:sticky;bottom:calc(var(--sb) + 70px);background:#fff;padding:10px 0;border-top:1px solid var(--g2)}
.status{font-size:14px;padding:8px 12px;background:var(--g3)}
.status.ok{background:#E8F4EC;color:var(--ok);font-weight:700}
.status.err{background:#FBE9EA;color:var(--red);font-weight:700}

.seg{display:flex;border:2px solid var(--ink);overflow-x:auto}
.seg button{flex:1;padding:8px 10px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.seg button.on{background:var(--ink);color:#fff}

/* perfil */
.profile{display:flex;flex-direction:column;gap:8px}
.prow{display:grid;grid-template-columns:96px 1fr 36px;gap:8px;align-items:center;font-size:14px}
.prow b{text-align:right}

/* nominaciones */
.nom{border:2px solid var(--g2);padding:12px;display:flex;flex-direction:column;gap:8px}
.nom.filled{border-color:var(--ink)}
.nom-pick{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink);padding:8px 0;text-align:left;width:100%;font-size:17px}
.nom-pick .ph{color:var(--g1)}

/* ranking */
.rank{list-style:none;border-top:2px solid var(--ink)}
.rank li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--g2)}
.rank .pos{font-weight:700;font-size:18px}
.rank li:nth-child(1) .pos{color:var(--red)}
.rank small{display:block;color:var(--g1);font-size:12px}
.rank .pts{font-weight:700;font-size:20px;text-align:right;white-space:nowrap}
.rank .pts small{font-weight:400}

.tabs{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--ink);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:var(--sb);z-index:10}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--g1)}
.tabs .ti{font-size:16px;line-height:1}
.tabs button.on{color:var(--red)}

.sheet{position:fixed;inset:0;background:rgba(20,20,20,.5);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet-card{background:#fff;width:100%;max-width:560px;padding:18px 16px calc(var(--sb) + 18px);display:flex;flex-direction:column;gap:12px;max-height:92vh;overflow:auto}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.modal-text{font-size:15px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 84px);background:var(--ink);color:#fff;padding:10px 16px;font-size:14px;font-weight:700;z-index:30;max-width:90vw;text-align:center}
.foot{margin-top:28px;padding-top:12px;border-top:1px solid var(--g2);font-size:12px;color:var(--g1);text-align:center}