/* Layout: una sola columna tipo libreta de bolsillo, con la tarjeta de abonos perforada como pieza central y barra inferior */
:root{
  --bg:#F8F3F7;--paper:#FFFFFF;--ink:#2A1430;--soft:#6F5A75;--line:#E7DBE5;--grid:#F0E6EE;
  --rosa:#BE1259;--on-rosa:#FFFFFF;--rosa-soft:#FBE1EC;
  --ok:#0B6E5B;--ok-soft:#D9F2EB;--warn:#8A5A00;--warn-soft:#FBEBC8;--bad:#B3261E;--bad-soft:#FBE0DD;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1A1120;--paper:#261A2D;--ink:#F6ECF5;--soft:#B9A7BE;--line:#3D2E45;--grid:#2F2237;
  --rosa:#FF6FA8;--on-rosa:#2A0716;--rosa-soft:#47203A;
  --ok:#6FDCC2;--ok-soft:#173E38;--warn:#F2C766;--warn-soft:#42341A;--bad:#FF9C94;--bad-soft:#4A2120;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1A1120;--paper:#261A2D;--ink:#F6ECF5;--soft:#B9A7BE;--line:#3D2E45;--grid:#2F2237;
  --rosa:#FF6FA8;--on-rosa:#2A0716;--rosa-soft:#47203A;
  --ok:#6FDCC2;--ok-soft:#173E38;--warn:#F2C766;--warn-soft:#42341A;--bad:#FF9C94;--bad-soft:#4A2120;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
body{background:var(--bg);color:var(--ink);font:1rem/1.45 var(--body);font-variant-numeric:tabular-nums}
#app{max-width:620px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 112px;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.12}
h1{font-size:1.75rem;font-weight:800;letter-spacing:-.02em}
h2{font-size:1.12rem;font-weight:700}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--rosa);outline-offset:2px}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.brand{font:800 1.05rem var(--display);color:var(--rosa)}
.tag{font-size:.74rem;font-weight:600;color:var(--soft);text-align:right}
.lead{color:var(--soft);font-size:.94rem}
.stack{display:flex;flex-direction:column;gap:10px}
.sec{display:flex;flex-direction:column;gap:8px}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sechead span{font-size:.86rem;color:var(--soft);font-weight:600}

.hero{background:var(--rosa);color:var(--on-rosa);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
.hero small{font-size:.86rem;font-weight:600}
.hero .big{font:800 clamp(2.5rem,12vw,3.4rem)/1 var(--display);letter-spacing:-.03em}
.hero .split{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:.88rem}
.hero .split b{display:block;font:700 1.15rem var(--display)}
.bar{height:8px;border-radius:9px;background:color-mix(in srgb,var(--on-rosa) 28%,transparent);overflow:hidden}
.bar i{display:block;height:100%;background:var(--on-rosa);border-radius:9px}

.list{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;background:none;border:0;text-align:left;min-height:62px}
.row+.row{border-top:1px solid var(--line)}
button.row:hover{background:var(--grid)}
.rmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rmain b{font-weight:700;overflow-wrap:anywhere}
.rmain span{font-size:.84rem;color:var(--soft);overflow-wrap:anywhere}
.ramt{font:700 1.02rem var(--display);white-space:nowrap;text-align:right}
.ava{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--rosa-soft);color:var(--rosa);font:700 .86rem var(--display)}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.74rem;font-weight:700;white-space:nowrap}
.p-ok{background:var(--ok-soft);color:var(--ok)}.p-warn{background:var(--warn-soft);color:var(--warn)}.p-bad{background:var(--bad-soft);color:var(--bad)}.p-mute{background:var(--grid);color:var(--soft)}
.btn{border:0;border-radius:11px;padding:11px 15px;font-weight:700;background:var(--rosa);color:var(--on-rosa);text-align:center;text-decoration:none;display:inline-block;min-height:44px}
.btn.ghost{background:var(--rosa-soft);color:var(--rosa)}
.btn.line{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.sm{padding:7px 12px;min-height:36px;font-size:.88rem}
.btn.wide{width:100%}
.btns{display:flex;gap:8px;flex-wrap:wrap}.btns>*{flex:1 1 130px}
.back{background:none;border:0;color:var(--rosa);font-weight:700;padding:6px 0;align-self:flex-start}
.empty{padding:18px;text-align:center;color:var(--soft);font-size:.92rem}

/* Tarjeta de abonos: la pieza que reemplaza la tarjeta de cartón */
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:18px 18px}
.card>*{position:relative}
.cardhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kv div{background:var(--paper);border-radius:8px}
.kv span{display:block;font-size:.76rem;color:var(--soft);font-weight:600}
.kv b{font:700 1.08rem var(--display)}
.holes{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.hole{aspect-ratio:1;max-width:100%;border-radius:10px;border:1.5px dashed var(--line);background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.68rem;color:var(--soft);line-height:1.15;text-align:center}
.hole b{font:700 .95rem var(--display);color:var(--ink)}
.hole.paid{background:var(--rosa);border:1.5px solid var(--rosa);color:var(--on-rosa)}
.hole.paid b{color:var(--on-rosa)}
.hole.late{background:var(--bad-soft);border:1.5px solid var(--bad);color:var(--bad)}
.hole.late b{color:var(--bad)}
.hole.part{background:var(--warn-soft);border:1.5px solid var(--warn);color:var(--warn)}
.hole.part b{color:var(--warn)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.76rem;color:var(--soft)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* Tanda: números */
.nums{display:flex;gap:6px;overflow-x:auto;padding:3px 3px 6px;scrollbar-width:thin}
.num{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);font:700 .95rem var(--display);display:grid;place-items:center}
.num.done{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.num.sel{background:var(--rosa);border-color:var(--rosa);color:var(--on-rosa)}
.toggle{border:0;border-radius:99px;padding:7px 13px;font-weight:700;font-size:.84rem;min-width:84px;min-height:36px}
.toggle.on{background:var(--ok-soft);color:var(--ok)}.toggle.off{background:var(--bad-soft);color:var(--bad)}
.recibe{background:var(--rosa-soft);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.recibe .big{font:800 1.5rem var(--display)}
.meter{height:7px;background:var(--grid);border-radius:9px;overflow:hidden}.meter i{display:block;height:100%;background:var(--rosa)}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:13px}
.tile span{display:block;font-size:.82rem;color:var(--soft);font-weight:600}
.tile b{font:800 1.4rem var(--display)}
.tile em{display:block;font-style:normal;font-size:.76rem;color:var(--soft);margin-top:2px}
.chart{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;align-items:flex-end;gap:5px;height:178px}
.col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;font-size:.66rem;color:var(--soft)}
.col i{display:block;width:100%;max-width:34px;background:var(--rosa);border-radius:5px 5px 0 0;min-height:2px}
.col b{color:var(--ink);font-weight:700;white-space:nowrap}

nav{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);display:flex;justify-content:safe center;overflow-x:auto;scrollbar-width:none;padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));z-index:5}
nav button{flex:1 0 58px;max-width:124px;background:none;border:0;border-radius:10px;padding:7px 1px;font-size:11px;font-weight:600;color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:2px}
nav button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
nav button.on{color:var(--rosa);background:var(--rosa-soft)}

#veil{position:fixed;inset:0;background:rgb(20 8 25 / .5);z-index:20;display:flex;align-items:flex-end;justify-content:center}
#sheet{background:var(--bg);width:100%;max-width:620px;max-height:90%;overflow:auto;border-radius:20px 20px 0 0;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
.shead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.x{background:var(--grid);border:0;border-radius:50%;width:36px;height:36px;font-weight:700;flex:none}
form{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;font-weight:600;min-width:0}
input,select,textarea{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 11px;font-size:16px;font-weight:400;width:100%;min-height:44px}
textarea{min-height:128px;resize:vertical}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:6px 12px;font-weight:600;font-size:.88rem;min-height:36px}
.calc{background:var(--rosa-soft);border-radius:12px;padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:.84rem}
.calc b{display:block;font:700 1.12rem var(--display)}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(78px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 14px;font-weight:600;font-size:.9rem;z-index:30;display:flex;gap:12px;align-items:center;width:max-content;max-width:calc(100vw - 32px)}
#toast button{background:none;border:0;color:inherit;text-decoration:underline;font-weight:700;padding:2px}
.alerta{background:var(--bad-soft);color:var(--bad);border:1.5px solid var(--bad);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;font-size:.9rem}
.alerta b{font:700 1.05rem var(--display)}
.alerta span{color:var(--ink)}
.price{display:flex;flex-direction:row;align-items:center;gap:4px;font-weight:700;flex:none}
.price input{width:88px;padding:7px 8px;min-height:40px;text-align:right}
.stepper{display:flex;align-items:center;gap:4px;flex:none}
.stepper button{width:38px;height:38px;border:0;border-radius:10px;background:var(--rosa-soft);color:var(--rosa);font:700 1.2rem var(--display)}
.stepper input{width:50px;padding:6px 2px;min-height:38px;text-align:center}
.total{position:sticky;bottom:-20px;background:var(--bg);padding-block:10px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line)}
.total div{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.total b{font:800 1.4rem var(--display)}
.seg{display:flex;background:var(--grid);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;min-width:0;border:0;border-radius:9px;background:none;padding:9px 4px;font-weight:700;font-size:.88rem;color:var(--soft);min-height:42px}
.seg button.on{background:var(--paper);color:var(--rosa)}
label.check{flex-direction:row;align-items:center;gap:10px;font-size:.95rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
label.check input{width:22px;height:22px;min-height:22px;flex:none;accent-color:var(--rosa)}
#terms{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.tbox{width:100%;max-width:620px;display:flex;flex-direction:column;gap:12px;min-height:0}
.tscroll{flex:1;min-height:0;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:.94rem}
.tscroll h3{font-size:1rem;margin-top:8px}
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.swatch{display:flex;align-items:center;gap:10px;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;font-weight:600;font-size:.9rem;text-align:left;min-height:48px}
.swatch i{width:26px;height:26px;border-radius:50%;flex:none}
.swatch.on{border-color:var(--rosa);box-shadow:inset 0 0 0 1px var(--rosa)}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--rosa)}
#neg-list{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.oculta #neg-list{filter:blur(9px)}
.login{max-width:400px;width:100%;margin:6vh auto 0;display:flex;flex-direction:column;gap:14px}
.ok{background:var(--ok-soft);color:var(--ok)}.warn{background:var(--warn-soft);color:var(--warn)}.bad{background:var(--bad-soft);color:var(--bad)}.mute{background:var(--grid);color:var(--soft)}
.note{background:var(--warn-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:.88rem}
.sh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.m{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.m b{font-weight:700;overflow-wrap:anywhere}.m span{font-size:.84rem;color:var(--soft);overflow-wrap:anywhere}
.amt{font:700 1rem var(--display);white-space:nowrap;text-align:right}
.btn.g{background:var(--rosa-soft);color:var(--rosa)}.btn.l{background:none;border:1px solid var(--line);color:var(--ink)}.btn.d{background:var(--bad-soft);color:var(--bad)}.btn.s{padding:6px 11px;min-height:34px;font-size:.86rem}.btn.w{width:100%}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chips{overflow-x:auto}.cnt{display:inline-block;min-width:16px;padding:0 4px;border-radius:9px;background:var(--bad);color:var(--paper);font-size:.66rem;margin-left:3px}
#ayuda{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:6;width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font:800 1.3rem var(--display);box-shadow:0 3px 10px rgb(0 0 0 / .25)}
#app{padding-bottom:132px}
details.tut{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 13px}details.tut summary{font-weight:700;cursor:pointer}details.tut ol{margin:8px 0 2px;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:.92rem}
@media (prefers-reduced-motion:no-preference){#sheet{animation:up .18s ease-out}@keyframes up{from{transform:translateY(24px)}to{transform:none}}}
.marca{display:flex;align-items:center;gap:12px;color:var(--rosa)}.marca img{border-radius:22%;flex:none}.marca svg{flex:0 1 auto;width:auto;max-width:100%;display:block}
.ayv{display:block;width:100%;max-width:300px;margin:10px auto 4px;border-radius:12px;background:#000;aspect-ratio:1/2}
details.tut summary{list-style:none}details.tut summary::-webkit-details-marker{display:none}