:root{
  --bg:#1a1512; --panel:#241d18; --panel2:#2e251e; --line:#3a2f26;
  --ink:#f2e9dd; --ink-dim:#a8998a; --ink-faint:#6b5f52;
  --amber:#e0a548; --copper:#c67b3d; --gold:#f0c674;
  --good:#7bb661; --warn:#d98b4a; --bad:#c65d5d;
  --r:14px; --max:680px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:dark}
html,body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;overscroll-behavior:none;line-height:1.4}
body{padding-top:env(safe-area-inset-top);min-height:100vh}
body.hasBar{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
a{color:var(--amber);text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font:inherit;color:var(--ink)}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.9em;background:var(--panel2);padding:1px 5px;border-radius:5px}
small{font-size:.8em;color:var(--ink-dim)}

/* ---- top bar ---- */
#top{position:sticky;top:0;z-index:50;background:rgba(26,21,18,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 14px}
#topRow{display:flex;align-items:center;gap:12px;max-width:1100px;margin:0 auto}
#brand{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
#brand span{color:var(--amber)}
#nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
#nav a{padding:6px 10px;border-radius:9px;color:var(--ink-dim);font-size:13px;font-weight:600;white-space:nowrap}
#nav a.on{background:var(--panel2);color:var(--ink)}
#styleTag{flex:1;font-size:12px;color:var(--ink-dim);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{font-family:ui-monospace,monospace;font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px;background:var(--panel2);color:var(--ink-dim);white-space:nowrap}
.badge:empty{display:none}
.badge.pro,.badge.warn,.badge{text-decoration:none}
@media(max-width:640px){#styleTag{display:none}#brand{font-size:16px}#nav{gap:2px}#nav a{font-size:12px;padding:6px 7px}#topRow{gap:8px}}
.badge.pro{background:linear-gradient(135deg,var(--amber),var(--copper));color:#1a1512}
.badge.warn{color:var(--warn);border:1px solid var(--warn)}

main#app{padding:16px 14px 40px;max-width:1100px;margin:0 auto}
.narrow{max-width:var(--max);margin:0 auto}

/* ---- typography ---- */
.h1{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:6px 0 4px}
.sub{color:var(--ink-dim);font-size:13.5px;margin-bottom:16px;line-height:1.45}
.kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--copper);font-weight:700}
h2{font-size:22px;letter-spacing:-.02em;margin:0 0 14px}
h3{font-size:15px;margin:14px 0 8px}
h4{font-size:15px;margin-bottom:6px}
.hint{font-size:11.5px;color:var(--ink-faint);text-align:center;margin-top:12px;line-height:1.45}
.hint.left{text-align:left;margin:4px 0 8px}
.empty{color:var(--ink-faint);font-size:13px;padding:8px 0}
.warnText{color:var(--warn);font-size:13px;margin-top:8px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 16px;border-radius:11px;font-size:14px;font-weight:700;border:1px solid var(--line);background:var(--panel2);color:var(--ink);transition:.12s}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(135deg,var(--amber),var(--copper));color:#1a1512;border-color:transparent}
.btn.ghost{color:var(--ink-dim)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.big{padding:14px 22px;font-size:15px}
.btn.small{padding:7px 11px;font-size:12px}
.rowBtns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.rowBtns.end{justify-content:flex-end;margin-top:24px}
.rowBtns>.btn{flex:1}
.copyAll{flex:1 1 100%;padding:14px;border-radius:12px;border:1px solid var(--amber);background:linear-gradient(135deg,var(--amber),var(--copper));color:#1a1512;font-size:14px;font-weight:700}
.copyAll:active{transform:scale(.99)}

/* ---- landing ---- */
.landing section{margin:0 auto 56px;max-width:1000px}
.hero{text-align:center;padding:36px 0 10px}
.hero h1{font-size:clamp(30px,6vw,52px);line-height:1.05;letter-spacing:-.035em;margin:12px 0 16px}
.hero h1 span{color:var(--amber)}
.lead{max-width:640px;margin:0 auto 22px;color:var(--ink-dim);font-size:16px;line-height:1.5}
.ctaRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--amber);color:#1a1512;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.step p,.card p,.card li{color:var(--ink-dim);font-size:13.5px;line-height:1.5}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.card ul{padding-left:18px;margin:8px 0 12px}
.card.plan .planName{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--copper);font-weight:800}
.card.plan .price{font-size:32px;font-weight:800;letter-spacing:-.03em;margin:4px 0 8px}
.card.plan .price small{font-size:14px;color:var(--ink-dim);font-weight:600}
.card.plan.pro{border-color:var(--amber);background:linear-gradient(160deg,var(--panel2),var(--panel))}
.foot{text-align:center;color:var(--ink-faint);font-size:12px;padding:20px 0 40px}
.steps-ol{padding-left:20px;color:var(--ink-dim);font-size:14px;line-height:1.6;margin-bottom:10px}

/* ---- forms ---- */
.form label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);font-weight:700;margin-bottom:12px}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:5px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px;font-size:15px;text-transform:none;letter-spacing:0;font-weight:400}
.form input:focus,.form select:focus,.form textarea:focus,.metaField input:focus,.searchbar input:focus,textarea:focus{outline:none;border-color:var(--copper)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .btn{width:100%;margin-top:8px}
.metaRow{display:flex;gap:10px;margin-bottom:10px}
.metaField{flex:1}
.metaField label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);margin-bottom:5px;font-weight:700}
.metaField input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px;font-size:15px}
.searchbar{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;margin-bottom:12px}
.searchbar span{color:var(--ink-faint)}
.searchbar input{background:none;border:none;font-size:15px;flex:1;outline:none}
.searchbar input::placeholder{color:var(--ink-faint)}
.guideToggle{display:flex;gap:6px;margin-bottom:12px}
.gt{flex:1;padding:9px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);font-size:12.5px;font-weight:600}
.gt.on{background:var(--copper);color:#fff;border-color:var(--copper)}
.gt.tone{flex:0 0 auto;padding:9px 14px}
.styleList{display:flex;flex-direction:column;gap:7px}
.styleRow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 14px;text-align:left;width:100%;transition:.12s}
.styleRow:active{background:var(--panel2);transform:scale(.99)}
.styleRow .num{font-family:ui-monospace,monospace;font-size:12px;color:var(--amber);font-weight:700;min-width:44px}
.styleRow .nm{flex:1;font-size:14.5px;font-weight:600}
.styleRow .arr{color:var(--ink-faint);font-size:18px}
.flightBox{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.flightBox summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--ink-dim)}
.flightBox textarea{width:100%;margin-top:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13.5px;font-family:ui-monospace,monospace}

/* ---- banners ---- */
.banner{display:block;background:var(--panel2);border:1px solid var(--copper);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:13.5px;font-weight:600;color:var(--ink)}
.banner.warn{border-color:var(--warn);color:var(--gold)}

/* ---- dashboard ---- */
.dashHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.tile .tv{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1}
.tile .tv small{font-size:14px;color:var(--ink-faint);font-weight:600}
.tile .tl{font-size:12px;color:var(--ink-dim);margin-top:5px}
.bar{height:6px;background:var(--panel2);border-radius:4px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--copper))}
.pill{display:inline-block;font-size:10px;font-weight:800;padding:3px 8px;border-radius:8px;margin-top:8px;background:var(--panel2)}
.pill.pro{background:linear-gradient(135deg,var(--amber),var(--copper));color:#1a1512}
.cols{display:grid;grid-template-columns:3fr 2fr;gap:12px}
@media(max-width:760px){.cols{grid-template-columns:1fr}.form .row{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.panel h3:first-child{margin-top:0}
.ph{display:flex;justify-content:space-between;align-items:baseline}
.ph h3{margin:0 0 8px}
.ph a{font-size:12px}
.rank{list-style:none}
.rank li{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid var(--line);color:var(--ink-dim)}
.rank li b{color:var(--gold)}
.evRow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.evList .evRow{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.evRow .num{font-family:ui-monospace,monospace;font-weight:800;color:var(--amber);min-width:36px;font-size:15px}
.evRow .nm{flex:1;font-size:13.5px;font-weight:600;line-height:1.3}
.evRow .nm small{display:block;font-weight:500}
.evRow .meta{font-size:11.5px;color:var(--ink-dim);text-align:right;white-space:nowrap}
.evRow .meta b{color:var(--gold);font-size:14px}

/* ---- evaluation form ---- */
.refCard{background:linear-gradient(135deg,var(--panel2),var(--panel));border:1px solid var(--copper);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.refCard .rt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--copper);font-weight:700;margin-bottom:8px}
.refGrid{display:flex;flex-wrap:wrap;gap:5px 14px}
.refGrid div{font-size:12px;color:var(--ink-dim)}
.refGrid b{color:var(--ink);font-family:ui-monospace,monospace}
.refDesc{font-size:12px;color:var(--ink-dim);line-height:1.5;margin-top:9px;border-top:1px solid var(--line);padding-top:9px}
.secCard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;scroll-margin-top:70px}
.secHead{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;user-select:none}
.secHead .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-faint)}
.secHead.filled .dot{background:var(--good)}
.secHead .t{flex:1;font-weight:700;font-size:15px}
.secHead .mx{font-family:ui-monospace,monospace;font-size:12px;color:var(--ink-dim)}
.secHead .chev{color:var(--ink-faint);transition:.2s;font-size:13px}
.secCard.open .chev{transform:rotate(90deg)}
.secBody{display:none;padding:0 15px 15px}
.secCard.open .secBody{display:block}
.dlab{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim);margin:14px 0 8px;font-weight:700}
.dlab.bad{color:var(--bad)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:8px 13px;border-radius:20px;border:1px solid var(--line);background:var(--panel2);color:var(--ink-dim);font-size:13px;font-weight:600;transition:.1s}
.chip:active{transform:scale(.94)}
.chip.on{background:var(--amber);color:#1a1512;border-color:var(--amber)}
.chip.on.fault{background:var(--bad);border-color:var(--bad);color:#fff}
.subgroup{margin-top:10px}
.subgroup .sgt{font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.intens{display:flex;gap:6px}
.ipill{flex:1;padding:8px 0;text-align:center;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink-dim);font-size:11.5px;font-weight:600}
.ipill.on{background:var(--copper);color:#fff;border-color:var(--copper)}
.scoreCtl{display:flex;align-items:center;gap:8px;margin-top:16px}
.scoreCtl .dlab{margin:0;flex:1}
.sBtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);font-size:20px;font-weight:700}
.sInp{width:64px;height:40px;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;font-size:18px;font-weight:700;-moz-appearance:textfield}
.sInp::-webkit-inner-spin-button{-webkit-appearance:none}
.scoreCtl .mx{font-family:ui-monospace,monospace;color:var(--ink-dim)}
.noteWrap{margin-top:6px}
.preview{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:12px;font-size:13.5px;line-height:1.55;color:var(--ink-dim);min-height:44px;user-select:text}
.noteBox{width:100%;min-height:64px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:14px;line-height:1.5;resize:vertical}
.noteTools{display:flex;gap:8px;margin-top:8px}
.vBtn{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:13px;font-weight:600}
.vBtn[disabled]{opacity:.5;cursor:not-allowed}
.vBtn.rec{background:var(--bad);border-color:var(--bad);color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.6}}
.vBtn.copyInline{color:#1a1512;background:var(--copper);border-color:var(--copper);font-weight:700;margin-left:auto}

/* ---- action bar ---- */
#actionBar{position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(26,21,18,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center}
#actionBar>*{max-width:var(--max)}
.abtn{flex:1;padding:15px;border-radius:12px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px}
.abtn.ghost{flex:0 0 auto;padding:15px 16px;background:var(--panel2);color:var(--ink-dim);border:1px solid var(--line)}
.abtn.primary{background:linear-gradient(135deg,var(--amber),var(--copper));color:#1a1512}
.abtn:active{transform:scale(.98)}
.barScore{font-family:ui-monospace,monospace;font-size:20px;font-weight:800;color:var(--gold);min-width:60px;text-align:center}
.barScore small{font-size:12px;color:var(--ink-faint)}
@media(min-width:760px){#actionBar{justify-content:center}.abtn{flex:0 1 320px}}

/* ---- result ---- */
.resHead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.bigScore{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:96px}
.bigScore b{font-size:32px;letter-spacing:-.03em;line-height:1}
.bigScore small{color:var(--ink-faint)}
.band{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-top:4px}
.band.top{color:var(--good)}.band.mid{color:var(--gold)}.band.low{color:var(--bad)}
.sumRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-bottom:14px}
.sumCard{border-radius:12px;padding:12px 14px;border:1px solid var(--line);background:var(--panel)}
.sumCard.good{border-color:rgba(123,182,97,.5)}.sumCard.warn{border-color:rgba(217,139,74,.5)}
.sumCard .sct{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-bottom:6px}
.sumCard.good .sct{color:var(--good)}.sumCard.warn .sct{color:var(--warn)}
.sumCard ul{padding-left:18px;font-size:13px;color:var(--ink-dim);line-height:1.5}
.copyCard{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.ccHead{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
.ccName{flex:1;font-weight:700;font-size:14px}
.ccScore{font-size:12px;color:var(--gold);font-family:ui-monospace,monospace}
.ccBtn{padding:7px 15px;border-radius:9px;border:1px solid var(--copper);background:var(--copper);color:#1a1512;font-size:12px;font-weight:700;min-width:64px}
.ccBtn.ghost{background:none;color:var(--ink-dim);border-color:var(--line);min-width:0}
.ccBtn:active{transform:scale(.95)}
.ccText{display:block;width:100%;padding:12px 14px;font-size:13.5px;line-height:1.55;color:var(--ink);background:transparent;border:none;resize:none;overflow:hidden}
.ccText:focus{outline:none;background:var(--bg)}

/* ---- toast ---- */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--copper);color:var(--ink);padding:11px 18px;border-radius:22px;font-size:13px;font-weight:600;z-index:100;opacity:0;transition:.3s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;bottom:110px}

/* Toggle Prosa / Notas en la pantalla de resultado */
.modeToggle{display:inline-flex;gap:4px;margin:0 0 14px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:3px}
.mtBtn{padding:6px 18px;border:0;border-radius:9px;background:transparent;color:var(--ink-dim);font-size:12.5px;font-weight:600;cursor:pointer}
.mtBtn.on{background:var(--copper);color:#fff}