/* Reset base */
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box;height:100%}
body{margin:0;font-size:14px;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
code{font-family:var(--f-num);font-size:.92em}

/* Layout: tira de papel a la izquierda (cinta editable), columna derecha con resultado + teclado; en móvil el teclado baja como hoja inferior */
:root{
  --bg:#e8ebee; --paper:#fdfdfb; --rule:#e4e8eb; --ink:#1b2329; --muted:#67737d; --line:#d3d9de;
  --accent:#1f5f99; --accent-ink:#ffffff; --accent-soft:#e3ecf6;
  --user:#0f766e; --user-soft:#dbf0ec; --neg:#b42318; --warn:#c2410c;
  --key:#ffffff; --key2:#eef3f8; --hl:#fff4cf; --err-bg:#fdecea; --shadow:rgba(20,32,44,.09);
  --f-ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --z:1;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1317; --paper:#151c22; --rule:#212a31; --ink:#e2e8ed; --muted:#8a97a2; --line:#2a343c;
  --accent:#72b2ee; --accent-ink:#0b1520; --accent-soft:#1b2b3b;
  --user:#4fd1bf; --user-soft:#123733; --neg:#ff8a7e; --warn:#f59e5b;
  --key:#1c242b; --key2:#1d2a36; --hl:#3a3320; --err-bg:#3a1e1d; --shadow:rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1317; --paper:#151c22; --rule:#212a31; --ink:#e2e8ed; --muted:#8a97a2; --line:#2a343c;
  --accent:#72b2ee; --accent-ink:#0b1520; --accent-soft:#1b2b3b;
  --user:#4fd1bf; --user-soft:#123733; --neg:#ff8a7e; --warn:#f59e5b;
  --key:#1c242b; --key2:#1d2a36; --hl:#3a3320; --err-bg:#3a1e1d; --shadow:rgba(0,0,0,.45); color-scheme:dark}
/* Paleta "Libro mayor" */
:root[data-palette="mayor"]{
  --bg:#dde5da; --paper:#f4f8ef; --rule:#d2e2ca; --ink:#1c2a1f; --muted:#5b6f5f; --line:#c6d5c1;
  --accent:#1f6b3a; --accent-soft:#dcecdf; --user:#8a5a12; --user-soft:#f4e7cc; --neg:#c0392b;
  --key:#fbfdf9; --key2:#e4efe1; --hl:#fff1bd; --err-bg:#f8e0dc}
@media (prefers-color-scheme: dark){:root[data-palette="mayor"]:not([data-theme="light"]){
  --bg:#0d1510; --paper:#132019; --rule:#1e3025; --ink:#dce9de; --muted:#88a08e; --line:#25392c;
  --accent:#6fd394; --accent-ink:#0b1a10; --accent-soft:#173123; --user:#e2b45c; --user-soft:#3a2d14; --neg:#ff8f80;
  --key:#192720; --key2:#1b3023; --hl:#39341a; --err-bg:#3b1e1b}}
:root[data-palette="mayor"][data-theme="dark"]{
  --bg:#0d1510; --paper:#132019; --rule:#1e3025; --ink:#dce9de; --muted:#88a08e; --line:#25392c;
  --accent:#6fd394; --accent-ink:#0b1a10; --accent-soft:#173123; --user:#e2b45c; --user-soft:#3a2d14; --neg:#ff8f80;
  --key:#192720; --key2:#1b3023; --hl:#39341a; --err-bg:#3b1e1b}

html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);overflow:hidden}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{height:100%;display:flex;flex-direction:column;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box}

/* header */
header{display:flex;align-items:center;gap:10px;padding-block:10px;flex:none}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.01em;margin-right:auto}
.brand small{font-weight:500;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ib{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;border:1px solid transparent;background:none;cursor:pointer;color:var(--ink)}
.ib:hover{background:var(--key2)}
.ib:disabled{opacity:.35;cursor:default;background:none}
.ib svg{width:19px;height:19px}
.btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--key);cursor:pointer;font-weight:600;font-size:14px}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn svg{width:16px;height:16px}

main{flex:1;min-height:0;display:flex;gap:18px;padding-bottom:12px}
.tapepane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px var(--shadow),0 8px 24px var(--shadow);overflow:hidden}
.toolbar{display:flex;align-items:center;gap:2px;padding:6px 8px;border-bottom:1px solid var(--rule);flex:none;overflow-x:auto}
.toolbar .sep{width:1px;height:22px;background:var(--line);margin:0 6px;flex:none}
.zoomv{font-family:var(--f-num);font-size:12px;color:var(--muted);border:0;background:none;cursor:pointer;padding:4px 6px;border-radius:6px;min-width:46px}
.zoomv:hover{background:var(--key2)}
.ib.on{color:var(--accent);background:var(--accent-soft)}

/* pestañas */
.tabs{display:flex;align-items:center;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--rule);flex:none}
.tablist{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tab{display:flex;align-items:center;flex:none;max-width:200px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0}
.tab.on{background:var(--accent-soft);border-color:var(--line)}
.tabname{border:0;background:none;cursor:pointer;padding:7px 4px 7px 10px;font-size:13px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab.on .tabname{color:var(--ink);font-weight:600}
.tabmore{border:0;background:none;cursor:pointer;padding:4px 7px;color:var(--muted);border-radius:6px;flex:none;line-height:1}
.tabmore:hover{color:var(--accent)}
#tabAdd{width:30px;height:30px;flex:none}
.userbtn{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:14px}
.who{font-size:13px;color:var(--muted);margin:6px 10px;overflow-wrap:anywhere}

/* tape */
.scroll{flex:1;overflow:auto;position:relative;overscroll-behavior:contain}
#tape{font-family:var(--f-num);font-size:calc(15px * var(--z));padding:10px 0 40vh;min-height:100%;box-sizing:border-box;cursor:text;--numw:15ch}
.row{position:relative;display:flex;align-items:center;min-height:2.05em;padding:0 14px 0 22px;font-variant-numeric:tabular-nums}
#tape.ruled .row{box-shadow:inset 0 -1px 0 var(--rule)}
.row::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:3px;border-radius:2px}
.row.t-calc::before,.row.t-sum::before,.row.t-open::before,.row.t-close::before,.row.t-def::before,.row.t-oponly::before{background:var(--user);opacity:.28}
.row.act{background:var(--accent-soft)}
.row.act::before{background:var(--accent);opacity:1}
.row.err{background:var(--err-bg)}
.row.err::before{background:var(--neg);opacity:1}
.row.hl{background:var(--hl)}
.vw{flex:1;min-width:0;display:flex;align-items:baseline;white-space:nowrap;overflow:hidden;margin-left:calc(var(--d,0) * 2.4ch);}
.row[style*="--d:1"] .vw,.row[style*="--d:2"] .vw,.row[style*="--d:3"] .vw,.row[style*="--d:4"] .vw{border-left:1px solid var(--muted);padding-left:1ch}
.act .vw{display:none}
.op{width:1.8ch;flex:none;color:var(--muted)}
.num{min-width:var(--numw);text-align:right;flex:none}
.neg{color:var(--neg)}
.pc{width:1.8ch;flex:none;padding-left:.3ch;color:var(--muted)}
.amt{color:var(--muted);font-size:.84em;margin-left:.6ch;flex:none}
.cmt{font-family:var(--f-ui);margin-left:1.4ch;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vref,.vn{color:var(--accent);font-weight:500}
.eq{margin:0 .8ch;color:var(--muted)}
.ex{color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.paren{color:var(--accent);font-weight:600}
.ph{color:var(--muted)}
.tx{font-family:var(--f-ui);overflow:hidden;text-overflow:ellipsis}
.hd{font-family:var(--f-ui);font-weight:700}
.hd.h1{font-size:1.08em}
.hd.h3{font-size:.95em;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.t-sum .vw{font-weight:600;position:relative}
.t-sum{box-shadow:inset 0 1px 0 transparent}
.t-sum .vw::before{content:"";position:absolute;left:0;top:0;width:calc(1.8ch + var(--numw));border-top:1.5px dashed var(--ink);opacity:.55}
.t-sum.fin .num{font-weight:700}
.sname{color:var(--accent);margin-left:1ch;font-weight:500}
.row.unc .vw{text-decoration:underline dashed var(--muted)}
.edit{flex:1;min-width:0;display:none;align-items:center;gap:1ch;margin-left:calc(var(--d,0) * 2.4ch)}
.act .edit{display:flex}
#inp{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:var(--ink);padding:0;height:2em;caret-color:var(--accent)}
.hint{color:var(--muted);font-size:.84em;flex:none;white-space:nowrap}
.acts{display:none;gap:2px;margin-left:8px;flex:none}
.t-sum:hover .acts,.t-sum.act .acts{display:flex}
.acts button{border:1px solid var(--line);background:var(--paper);border-radius:6px;font-family:var(--f-ui);font-size:11.5px;padding:2px 7px;cursor:pointer;color:var(--muted)}
.acts button:hover{color:var(--accent);border-color:var(--accent)}
.row.err .vw,.row.err #inp{text-decoration:underline wavy var(--neg);text-decoration-thickness:1px;text-underline-offset:4px}

/* status */
.status{display:flex;align-items:center;gap:6px;padding:6px 10px;border-top:1px solid var(--rule);flex:none;font-size:12px;color:var(--muted);flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:999px;padding:2px 9px;background:none;font-size:12px;color:var(--muted);font-family:var(--f-num);cursor:default;white-space:nowrap}
button.chip{cursor:pointer}
.chip.errc{color:var(--neg);border-color:var(--neg);font-family:var(--f-ui);white-space:normal}
.chip.ok{font-family:var(--f-ui);margin-left:auto}
.banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--rule);background:var(--hl);font-size:13px}
.banner input{font-family:var(--f-num);border:1px solid var(--line);border-radius:6px;padding:4px 8px;width:9em;background:var(--paper);color:var(--ink)}
.banner .btn{height:30px;padding:0 10px;font-size:13px}
.limit{padding:4px 12px;font-size:12px;border-top:1px solid var(--rule);color:var(--warn)}
.limit.full{color:var(--neg);font-weight:600}
.shake{animation:sh .35s}
@keyframes sh{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* side */
.side{width:336px;flex:none;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}
.res{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.res .lbl{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.big{font-family:var(--f-num);font-size:30px;font-weight:600;text-align:right;border:0;background:none;cursor:pointer;padding:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.big:hover{color:var(--accent)}
.sub{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px solid var(--rule);padding-top:6px;font-size:13px;color:var(--muted)}
.sub button{font-family:var(--f-num);border:0;background:none;cursor:pointer;color:var(--ink);font-size:14px;padding:0;font-variant-numeric:tabular-nums}
.sub button:hover{color:var(--accent)}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.k{position:relative;height:52px;border-radius:11px;border:1px solid var(--line);background:var(--key);font-family:var(--f-num);font-size:20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;box-shadow:0 1px 0 var(--shadow)}
.k:active{transform:translateY(1px);filter:brightness(.96)}
.k.o{background:var(--key2);color:var(--accent);font-weight:600}
.k.eq{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.k.ac{color:var(--warn);font-weight:600;font-family:var(--f-ui);font-size:16px}
.k.m{height:40px;font-size:13px;font-family:var(--f-ui);font-weight:600;color:var(--muted)}
.k.m small{font-family:var(--f-num);font-size:9.5px;font-weight:400;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.k.ar{height:34px;font-size:14px;color:var(--muted)}
.k.u{grid-column:span 2;background:var(--user-soft);color:var(--user);border-color:transparent;font-family:var(--f-ui);font-size:16px;font-weight:600}
.k.u small{font-family:var(--f-num);font-size:10px;font-weight:400;opacity:.8}
.gear{position:absolute;right:6px;bottom:5px;width:20px;height:20px;display:grid;place-items:center;border-radius:5px;opacity:0}
.gear svg{width:13px;height:13px}
.k.u:hover .gear{opacity:.8}
.gear:hover{background:var(--paper)}
@media (pointer:coarse){.gear{opacity:.7}}
.sheethead{display:none}

/* acceso */
.gate{position:fixed;inset:0;z-index:35;background:var(--bg);display:grid;place-items:center;padding:16px}
.gatebox{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px;width:min(380px,100%);text-align:center;box-shadow:0 8px 24px var(--shadow)}
.gatebox h1{margin:0 0 8px;font-size:24px;letter-spacing:-.01em}
.gatebox p{margin:0 0 18px;color:var(--muted);line-height:1.5}
.gatebox p:last-child{margin-bottom:0}

/* overlays */
.pop{position:fixed;z-index:30;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px var(--shadow),0 2px 6px var(--shadow);padding:6px;min-width:250px;max-width:calc(100vw - 32px);max-height:calc(100% - 80px);overflow:auto}
.mi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left;font-size:14px}
.mi:hover{background:var(--key2)}
.mi kbd{margin-left:auto;font-family:var(--f-num);font-size:11px;color:var(--muted)}
.mi .ck{width:16px;color:var(--accent);font-weight:700}
.mh{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;padding:10px 10px 4px}
.seg{display:flex;gap:4px;padding:2px 10px 6px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:var(--paper);border-radius:7px;padding:5px 10px;font-size:13px;cursor:pointer}
.seg button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.msep{height:1px;background:var(--rule);margin:5px 4px}
.modalbg{position:fixed;inset:0;z-index:40;background:rgba(10,16,22,.45);display:grid;place-items:center;padding:16px}
.dlg{background:var(--paper);color:var(--ink);border-radius:14px;border:1px solid var(--line);width:min(520px,100%);max-height:calc(100% - 32px);overflow:auto;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);box-sizing:border-box}
.dlg h2{margin:0 0 6px;font-size:18px;text-wrap:balance}
.dlg p{margin:6px 0 12px;color:var(--muted);font-size:14px;line-height:1.5}
.dlg label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px}
.dlg input[type=text],.dlg textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--f-num);font-size:14px;background:var(--bg);color:var(--ink)}
.dlg textarea{min-height:150px;resize:vertical}
.dlg .row2{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.dlg .row2 .grow{margin-right:auto}
.tg{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px}
.help{width:100%;border-collapse:collapse;font-size:13.5px}
.help td{padding:6px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.help td:first-child{font-family:var(--f-num);white-space:nowrap;color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--paper);border-radius:10px;padding:9px 14px;font-size:14px;display:flex;gap:12px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
.toast button{border:0;background:none;color:var(--accent-soft);font-weight:700;cursor:pointer;text-decoration:underline}

@media (max-width:760px){
  header{padding-block:6px}
  .brand small{display:none}
  main{flex-direction:column;gap:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .side{width:auto;overflow:visible;gap:8px}
  .res{flex-direction:row;align-items:center;flex-wrap:wrap;padding:8px 12px;gap:4px 12px}
  .res .lbl{display:none}
  .big{font-size:22px;flex:1;min-width:0;order:2}
  .sub{border:0;padding:0;font-size:12px;gap:6px;justify-content:flex-start}
  .sheethead{display:flex;order:1;border:0;background:none;width:36px;height:24px;cursor:pointer;place-items:center;color:var(--muted);padding:0}
  .kp{gap:5px}
  .k{height:44px;font-size:18px}
  .k.m{height:34px}
  .k.ar{display:none}
  .k.u{height:38px}
  .side.folded .kp{display:none}
  #tape{padding-bottom:30vh}
  .tbx{display:none}
}
@media (max-height:640px) and (min-width:761px){.k{height:42px}.k.m{height:32px}.k.ar{height:28px}}
@media (prefers-reduced-motion:reduce){.shake{animation:none}}