/* Layout: app shell — sidebar on desktop, bottom tab bar on phone; tinaco gauge anchors the dashboard */
:root{
  --bg:#EDF2F3; --surface:#FFFFFF; --surface-2:#F4F8F9; --ink:#0F2531; --muted:#58707B; --line:#D3DFE3;
  --water:#1878B0; --water-2:#56BCDD; --water-soft:#DCEEF6; --on-water:#FFFFFF;
  --stamp:#B23E2C; --stamp-soft:#F7E3DF;
  --good:#1D8657; --good-soft:#DDF1E7; --warn:#A96F12; --warn-soft:#F8EBD2; --bad:#BD3526; --bad-soft:#F8DEDA;
  --tank:#2B3B44; --shadow:0 1px 2px rgba(15,37,49,.06),0 8px 24px -12px rgba(15,37,49,.18);
  --violet:#6A4FD3; --cyan:#0B8AA2; --orange:#C25A12; --pink:#C23C78; --indigo:#3F55C9; --olive:#6E7A14;
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B161C; --surface:#12212A; --surface-2:#172A34; --ink:#E3EDF0; --muted:#8FA5AF; --line:#24404C;
  --water:#43A5DB; --water-2:#7FD2EC; --water-soft:#123447; --on-water:#06131A;
  --stamp:#E57A64; --stamp-soft:#3A1F1A;
  --good:#4DC48C; --good-soft:#123326; --warn:#E3AA4B; --warn-soft:#352812; --bad:#EF6D5C; --bad-soft:#3A1914;
  --violet:#A792F5; --cyan:#4CC7DE; --orange:#F29A57; --pink:#F07FAF; --indigo:#8C9CF2; --olive:#B9C55A;
  --tank:#6C838D; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B161C; --surface:#12212A; --surface-2:#172A34; --ink:#E3EDF0; --muted:#8FA5AF; --line:#24404C;
  --water:#43A5DB; --water-2:#7FD2EC; --water-soft:#123447; --on-water:#06131A;
  --stamp:#E57A64; --stamp-soft:#3A1F1A;
  --good:#4DC48C; --good-soft:#123326; --warn:#E3AA4B; --warn-soft:#352812; --bad:#EF6D5C; --bad-soft:#3A1914;
  --violet:#A792F5; --cyan:#4CC7DE; --orange:#F29A57; --pink:#F07FAF; --indigo:#8C9CF2; --olive:#B9C55A;
  --tank:#6C838D; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:1.75rem;font-weight:800}
h2{font-size:1.2rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ic{flex:none}
:focus-visible{outline:2px solid var(--water);outline-offset:2px}

/* shell */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;padding:0 6px}
.brand-mark{width:36px;height:36px;border-radius:10px;background:var(--water);color:var(--on-water);display:grid;place-items:center}
.brand b{font-family:var(--f-display);font-size:1rem;line-height:1.15;display:block}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;gap:10px;align-items:center;border:0;background:none;padding:9px 10px;border-radius:9px;cursor:pointer;color:var(--muted);font-weight:600;text-align:left}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--water-soft);color:var(--water)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:0 6px}
.main{min-width:0;padding:0 28px 48px}
.topbar{display:flex;align-items:center;gap:12px;padding:18px 0;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:5}
.topbar .grow{flex:1;min-width:0}
.role-chip{display:inline-flex;gap:6px;align-items:center;font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.iconbtn{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;border-radius:99px;background:var(--bad);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;padding:0 5px}
.tabbar{display:none}
.mobile-only{display:none}

/* building blocks */
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.card.pad-0{padding:0}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);padding:9px 14px;font-weight:600;cursor:pointer;white-space:nowrap}
a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:var(--on-water)}
.btn:hover{border-color:var(--water)}
.btn.primary{background:var(--water);border-color:var(--water);color:var(--on-water)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.stamp{background:var(--stamp);border-color:var(--stamp);color:#fff}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);border-color:var(--line)}
.btn.sm{padding:5px 10px;font-size:.84rem;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:.8rem;font-weight:600;color:var(--muted)}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:9px 11px;min-width:0}
.input:focus{outline:2px solid var(--water);outline-offset:0;border-color:transparent}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;align-items:end}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.seg button{flex:1;border:0;background:none;padding:8px 10px;font-weight:600;font-size:.84rem;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--water);color:var(--on-water)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.water{background:var(--water-soft);color:var(--water)}
.pill.plain{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--water);border-color:var(--water)}
.scroll-x{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.empty{padding:28px;text-align:center;color:var(--muted)}
.divider{height:1px;background:var(--line);margin:4px 0}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi .v{font-family:var(--f-num);font-size:1.45rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.hero{background:var(--water);border-color:var(--water);color:var(--on-water)}
.kpi.hero .label,.kpi.hero .muted{color:var(--on-water);opacity:.85}
.kpi.neg .v{color:var(--bad)}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}

/* tinaco */
.tank-wrap{display:grid;grid-template-columns:190px minmax(0,560px);gap:18px;align-items:center}
.tank{width:100%;max-width:190px;height:auto;display:block;overflow:visible}
.tank text{fill:var(--muted);font:600 9px var(--f-num)}
.tank .tick{stroke:var(--muted);stroke-width:1.2}
.tank .rib{fill:none;stroke:#9FB0B8;stroke-width:1.4;opacity:.55}
.tank .rib-hi{fill:none;stroke:#FFFFFF;stroke-width:1.2;opacity:.7}
.tank .edge{fill:none;stroke:#AFC0C7;stroke-width:1.2}
.shimmer{animation:shimmer 4s ease-in-out infinite}
@keyframes shimmer{0%,100%{transform:translateX(-18px);opacity:.35}50%{transform:translateX(18px);opacity:.7}}
@media (prefers-reduced-motion:reduce){.shimmer{animation:none}}
.meter-list{display:flex;flex-direction:column;gap:8px}
.meter-list div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:6px}

/* lists */
.list{display:flex;flex-direction:column}
.li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .grow{flex:1;min-width:0}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--water-soft);color:var(--water);display:grid;place-items:center;font-weight:700;font-family:var(--f-display);flex:none}
.alert-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.alert-row.warn{background:var(--warn-soft)}
.alert-row.bad{background:var(--bad-soft)}
.alert-row .ic{margin-top:2px}

/* client cards */
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.client{cursor:pointer;display:flex;flex-direction:column;gap:12px;text-align:left}
.client:hover{border-color:var(--water)}
.client .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.client .facts b{display:block;font-family:var(--f-num);font-size:.95rem;font-weight:600}
.client-alert{display:flex;gap:8px;align-items:center;font-size:.84rem;font-weight:600;color:var(--warn);background:var(--warn-soft);padding:7px 10px;border-radius:8px}

/* charts */
.chart{width:100%;height:auto;display:block}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font:500 11px var(--f-num)}
.chart .s1{fill:var(--water)}
.chart .s2{fill:var(--water-2);opacity:.9}
.chart .s3{fill:var(--stamp);opacity:.75}
.chart .today{fill:var(--ink);font-weight:700}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.hbar{display:grid;grid-template-columns:110px minmax(0,1fr) 90px;gap:10px;align-items:center;font-size:.9rem}
.hbar .track{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.hbar .fill{height:100%;background:var(--stamp);opacity:.75;border-radius:99px}

/* formula */
.formula{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.term{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;min-width:0}
.term .num{font-weight:600}
.term.pos{background:var(--water-soft);border-color:transparent}
.term.res{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.term.res .label{color:var(--bg);opacity:.75}
.op{display:grid;place-items:center;font-family:var(--f-num);font-size:1.2rem;color:var(--muted);padding:0 2px}

/* bitácora */
.bit-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.entry-list .li{padding:9px 0}
.status-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.cash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cash div{background:var(--surface-2);border-radius:10px;padding:10px 12px}
.cash b{display:block;font-family:var(--f-num);font-size:1.1rem}

.sales-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.sales-col{min-width:0}
.sales-col-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:10px;border-bottom:2px solid var(--water)}
.sales-col-h h3{margin-right:auto}
.sales-col-h .muted{order:3;width:100%;margin-left:26px;margin-top:-4px}
@media (max-width:720px){.sales-cols{grid-template-columns:minmax(0,1fr)}}
.driver-cut{margin-top:14px;display:flex;flex-direction:column}
.driver-cut .label{padding-bottom:4px}
.driver-cut .li{padding:8px 0}
.q-num{width:28px;height:28px;border-radius:50%;background:var(--water-soft);color:var(--water);display:grid;place-items:center;font:700 .8rem var(--f-num);flex:none}
.q-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){.q-item{flex-wrap:wrap}.q-acts{width:100%;padding-left:40px;justify-content:flex-start}}
.ticket-lines{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px}
.tk-row{display:grid;grid-template-columns:minmax(0,1fr) auto 92px 80px;gap:10px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--line);border-radius:8px}
.tk-row.on{background:var(--water-soft)}
.tk-row .nm{min-width:0}
.tk-row .nm b{display:block}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.stepper button{width:34px;height:36px;border:0;background:var(--surface-2);font:700 1.1rem var(--f-num);cursor:pointer;color:var(--ink)}
.stepper input{width:44px;border:0;text-align:center;background:transparent;font:600 1rem var(--f-num);padding:0;height:36px;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.tk-row .pr{width:100%;padding:7px 8px;background:var(--surface)}
.tk-row .sub{text-align:right;font-family:var(--f-num);font-weight:600}
.tk-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px}
.tk-total b{font:600 1.5rem var(--f-num)}
@media (max-width:560px){.tk-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}}
/* cofepris */
.logs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.logbtn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.logbtn[aria-pressed="true"]{border-color:var(--water);box-shadow:inset 0 0 0 1px var(--water)}
.logbtn b{font-size:.92rem;line-height:1.3}
.logtable td{padding:6px 6px}
.logtable .input{padding:6px 8px;font-size:.88rem;background:transparent;border-color:transparent}
.logtable .input:hover{border-color:var(--line)}
.logtable tr.sealed .input{pointer-events:none;color:var(--muted)}
.logtable td.oor .input{color:var(--bad);font-weight:700}
.seal{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;border:2.5px solid var(--stamp);color:var(--stamp);transform:rotate(-12deg);text-align:center;font:700 .55rem/1.1 var(--f-num);letter-spacing:.04em;text-transform:uppercase;padding:6px;box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4.5px var(--stamp);cursor:pointer;background:var(--surface)}
.seal span{display:block}

/* inventory */
.stock-bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:80px}
.stock-bar i{display:block;height:100%;border-radius:99px;background:var(--good)}
.stock-bar i.warn{background:var(--warn)}
.stock-bar i.bad{background:var(--bad)}

/* modal / toasts / panel */
.overlay{position:fixed;inset:0;background:rgba(6,19,26,.45);display:grid;place-items:center;padding:16px;z-index:50}
.modal{background:var(--surface);border-radius:16px;max-width:620px;width:100%;max-height:calc(100% - 32px);overflow:auto;padding:22px;box-shadow:var(--shadow);border:1px solid var(--line)}
.modal-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.panel{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));right:16px;width:min(380px,calc(100% - 32px));background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:40;padding:14px;max-height:70vh;overflow:auto}
.toasts{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:60;width:min(420px,calc(100% - 32px))}
.toast{background:var(--ink);color:var(--bg);padding:11px 14px;border-radius:10px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow);animation:tin .2s ease-out}
@keyframes tin{from{transform:translateY(8px);opacity:0}}

/* login */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.login-art{background:var(--water);color:var(--on-water);padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.login-art h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;max-width:12ch}
.login-art .triad{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--f-display);font-weight:700;font-size:1.15rem}
.login-art .triad span{opacity:.9}
.login-art svg.drops{position:absolute;right:-60px;bottom:-40px;width:380px;opacity:.14}
.login-form{padding:48px 16px;display:grid;place-items:center}
.login-box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:18px}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role-pick button{border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:16px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
.role-pick button[aria-pressed="true"]{border-color:var(--water);background:var(--water-soft)}
.role-pick small{color:var(--muted);font-size:.78rem;line-height:1.3}
.dots{display:flex;gap:12px;justify-content:center;padding:6px 0}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line)}
.dots i.on{background:var(--water);border-color:var(--water)}
.dots.err i{border-color:var(--bad)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keypad button{height:52px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:600 1.2rem var(--f-num);cursor:pointer}
.keypad button:active{background:var(--water-soft)}
.hint{font-size:.82rem;color:var(--muted);text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:8px}
.steps{display:flex;gap:6px}
.steps i{flex:1;height:4px;border-radius:99px;background:var(--line)}
.steps i.on{background:var(--water)}
.demo-flag{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft);padding:3px 8px;border-radius:6px}

/* sucursales y encargados */
.branches{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.branch{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--surface);min-width:0}
.branch.on{border-color:var(--water);box-shadow:inset 0 0 0 1px var(--water)}
.branch .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.branch .facts b{display:block;font-family:var(--f-num);font-weight:600}
.sched th.c,.sched td.c{text-align:center;padding:8px 3px}
.sched th.today{color:var(--water)}
.sched tr.grp td{background:var(--surface-2);padding:8px 12px}
.sched tr.cov td{padding-top:6px;padding-bottom:6px}
.daychip{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);font-weight:700;font-size:.76rem;color:var(--muted);cursor:pointer}
.daychip[aria-pressed="true"]{background:var(--water);border-color:var(--water);color:var(--on-water)}
.avatar.sm{width:30px;height:30px;font-size:.78rem}
.daypicks{display:flex;gap:6px;flex-wrap:wrap}
.daypick{position:relative;cursor:pointer}
.daypick input{position:absolute;opacity:0;width:1px;height:1px}
.daypick span{display:grid;place-items:center;min-width:44px;height:38px;padding:0 8px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);font-weight:700;font-size:.8rem;color:var(--muted)}
.daypick input:checked+span{background:var(--water);border-color:var(--water);color:var(--on-water)}
.daypick input:focus-visible+span{outline:2px solid var(--water);outline-offset:2px}
.branch-sel{width:auto;max-width:230px;padding:8px 10px;background:var(--surface);font-weight:600}
.mini-tank{display:flex;align-items:center;gap:8px}
.mini-tank .stock-bar{min-width:60px;flex:1}

/* responsive */
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.dash-grid,.bit-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .mobile-only{display:grid}
  .main{padding:0 16px calc(88px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:30;overflow-x:auto;gap:2px}
  .tabbar button{flex:1 0 64px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:600;color:var(--muted);padding:6px 4px;border-radius:8px;cursor:pointer}
  .tabbar button[aria-current="page"]{color:var(--water);background:var(--water-soft)}
  .login{grid-template-columns:minmax(0,1fr)}
  .login-art{padding:28px 16px}
  .login-art .triad{font-size:1rem}
  h1{font-size:1.45rem}
}
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi.hero{grid-column:1/-1}
  .tank-wrap{grid-template-columns:120px minmax(0,1fr)}
  .cash{grid-template-columns:1fr}
  .hbar{grid-template-columns:84px minmax(0,1fr) 76px}
  .card{padding:14px}
  .role-chip.user{display:none}
  .branch-sel{max-width:150px}
}

/* pagos pendientes */
.debt-row{align-items:flex-start}
.debt-row .q-acts{flex-wrap:wrap;justify-content:flex-end}
.debt-box{border:1px solid color-mix(in srgb, var(--bad) 35%, transparent);background:color-mix(in srgb, var(--bad) 6%, transparent);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.debt-box .card-h{margin-bottom:4px;flex-wrap:wrap;gap:8px}
.debt-box h3{color:var(--bad)}
.tk-more{border-bottom:1px solid var(--line)}
.tk-more summary{cursor:pointer;padding:10px 6px;font-weight:600;list-style:none;display:flex;align-items:center;gap:6px}
.tk-more summary::-webkit-details-marker{display:none}
.tk-more summary::before{content:'+';display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--surface-2);font:700 .95rem var(--f-num)}
.tk-more[open] summary::before{content:'−'}
.tk-more .tk-row:last-child{border-bottom:0}

/* garrafones prestados */
.env-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px 4px;display:flex;flex-direction:column}
.env-step{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.env-step:first-of-type{border-top:0}
.env-step .nm{min-width:0}
.env-step .nm b{display:block}

/* tipos de tapa */
.cap-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--cap);box-shadow:0 0 0 2px color-mix(in srgb, var(--cap) 30%, transparent);flex:none}
.cap-box{grid-column:1/-1;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.cap-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.cap-st{font-weight:600;color:var(--warn)}
.cap-st[data-ok="true"]{color:var(--good)}
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cap{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;border-left:4px solid var(--cap);background:color-mix(in srgb, var(--cap) 9%, var(--surface))}
.cap .nm{flex:1;min-width:0;display:flex;flex-direction:column}
.cap .nm b{line-height:1.2}
.cap .stepper button{width:28px;height:32px}
.cap .stepper input{width:34px;height:32px}
.cap-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.cap-chip{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;padding:2px 8px 2px 6px;border-radius:999px;background:color-mix(in srgb, var(--cap) 14%, transparent);color:var(--ink)}
.cap-chip::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cap)}
.cap-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cap-tile{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;border-top:5px solid var(--cap);background:color-mix(in srgb, var(--cap) 7%, var(--surface-2))}
.cap-name{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-family:var(--f-display);font-size:1.05rem}
.cap-qty{display:flex;align-items:baseline;gap:8px}
.cap-qty b{font-size:1.6rem}
@media (max-width:560px){.caps{grid-template-columns:1fr}}

/* ===== Colores por sección: cada clase a-* define --acc y los componentes la usan ===== */
.a-water{--acc:var(--water)} .a-violet{--acc:var(--violet)} .a-cyan{--acc:var(--cyan)} .a-amber{--acc:var(--warn)}
.a-green{--acc:var(--good)} .a-red{--acc:var(--bad)} .a-orange{--acc:var(--orange)} .a-pink{--acc:var(--pink)}
.a-indigo{--acc:var(--indigo)} .a-olive{--acc:var(--olive)} .a-stamp{--acc:var(--stamp)}
.card.acc{border-top:4px solid var(--acc)}
.card.acc .card-h h2 > .ic{color:var(--acc);background:color-mix(in srgb, var(--acc) 15%, transparent);border-radius:9px;padding:5px;width:32px;height:32px}
.card.acc .card-h h2{color:color-mix(in srgb, var(--acc) 35%, var(--ink))}
.pill.acc{background:color-mix(in srgb, var(--acc) 15%, transparent);color:var(--acc)}
.kpi.acc{border-top:4px solid var(--acc)}
.kpi.acc .label{color:var(--acc)}
.avatar[class*="a-"]{background:color-mix(in srgb, var(--acc) 16%, var(--surface));color:var(--acc)}

/* corte de caja */
.cash div[class*="a-"]{background:color-mix(in srgb, var(--acc) 10%, var(--surface-2));border-left:4px solid var(--acc)}
.cash div[class*="a-"] .label{color:var(--acc)}

/* cola de entregas */
.q-item[class*="a-"] .q-num{background:color-mix(in srgb, var(--acc) 16%, transparent);color:var(--acc)}

/* ventas registradas */
.sales-col-h[class*="a-"]{border-bottom-color:var(--acc)}
.sales-col-h[class*="a-"] > .ic,.li.sale > .ic{color:var(--acc)}
.sales-col-h[class*="a-"] h3{color:var(--acc)}

/* forma de pago: el botón elegido toma el color del método */
.seg button[data-p][aria-pressed="true"]{background:var(--water);color:var(--on-water)}
.seg button[data-p="mostrador"][aria-pressed="true"],.seg button[data-p="pagado"][aria-pressed="true"]{background:var(--good);color:var(--surface)}
.seg button[data-p="transferencia"][aria-pressed="true"]{background:var(--violet);color:var(--surface)}
.seg button[data-p="pendiente"][aria-pressed="true"]{background:var(--bad);color:var(--surface)}

/* garrafones prestados y estado de la bitácora */
.env-box{border-color:color-mix(in srgb, var(--orange) 45%, var(--line));background:color-mix(in srgb, var(--orange) 5%, transparent)}
.env-box > .label{color:var(--orange)}
.cap-box{border-color:color-mix(in srgb, var(--pink) 35%, var(--line))}
.cap-box .cap-h .label{color:var(--pink)}

/* menú: cada sección con su color */
.nav button[data-v="dash"],.tabbar button[data-v="dash"]{--acc:var(--water)}
.nav button[data-v="bitacora"],.tabbar button[data-v="bitacora"]{--acc:var(--violet)}
.nav button[data-v="clientes"],.tabbar button[data-v="clientes"]{--acc:var(--indigo)}
.nav button[data-v="cofepris"],.tabbar button[data-v="cofepris"]{--acc:var(--stamp)}
.nav button[data-v="inventario"],.tabbar button[data-v="inventario"]{--acc:var(--olive)}
.nav button[data-v="finanzas"],.tabbar button[data-v="finanzas"]{--acc:var(--good)}
.nav button[data-v="config"],.tabbar button[data-v="config"]{--acc:var(--muted)}
.nav button > .ic{color:var(--acc)}
.nav button[aria-current="page"]{background:color-mix(in srgb, var(--acc) 15%, transparent);color:var(--acc)}
.tabbar button[aria-current="page"]{color:var(--acc);background:color-mix(in srgb, var(--acc) 15%, transparent)}

/* categorías de gasto */
.a-gray{--acc:var(--muted)}
.cat-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.cat-opt{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:10px;cursor:pointer;font-weight:600;font-size:.9rem;background:var(--surface)}
.cat-opt .ic{color:var(--acc)}
.cat-opt input{position:absolute;opacity:0;pointer-events:none}
.cat-opt:hover{background:color-mix(in srgb, var(--acc) 7%, var(--surface))}
.cat-opt:has(input:checked){background:color-mix(in srgb, var(--acc) 16%, var(--surface));border-color:var(--acc);color:color-mix(in srgb, var(--acc) 55%, var(--ink));box-shadow:inset 0 0 0 1px var(--acc)}
.cat-opt:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.hbar[class*="a-"] .fill{background:var(--acc);opacity:.85}
.hbar .cat-l{display:inline-flex;align-items:center;gap:6px;min-width:0}
.hbar .cat-l .ic{color:var(--acc)}

/* filtro de periodos en Finanzas */
.fin-filter{display:flex;flex-direction:column;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 12px;font-weight:600;font-size:.84rem;color:var(--muted);cursor:pointer}
.chips button:hover{color:var(--ink);border-color:var(--water)}
.chips button[aria-pressed="true"]{background:var(--water);border-color:var(--water);color:var(--on-water)}
.fin-range{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.fin-range .field{min-width:150px}
.fin-range .fin-len{padding-bottom:10px}
.fin-range > .btn{margin-left:auto}
.fin-cmp{padding-top:12px;border-top:1px dashed var(--line)}
.kpi .pill{font-size:.7rem;padding:1px 7px}
.track-wrap{display:flex;flex-direction:column;gap:3px;min-width:0}
.hbar .track.thin{height:5px}
.hbar[class*="a-"] .track.thin .fill{opacity:.4}
@media (max-width:560px){.fin-range .field{min-width:0;flex:1}.fin-range > .btn{margin-left:0;width:100%}}
.fin-group{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;border-left:4px solid var(--acc);background:color-mix(in srgb, var(--acc) 6%, transparent)}
.fin-group > .label{color:var(--acc)}
.fin-group .chips button:hover{border-color:var(--acc)}
.fin-group .chips button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--surface)}
.fin-custom-l{flex-basis:100%}
.fin-range.is-custom .fin-custom-l{color:var(--water)}
.fin-range.is-custom .input[type="date"]{border-color:var(--water);box-shadow:inset 0 0 0 1px var(--water)}

/* ===== Color de la página (Personalizar) ===== */
:root[data-accent="turquesa"]{--water:#0E8A8A; --water-2:#7ABFBF; --water-soft:#DDEFEF; --on-water:#FFFFFF}
:root[data-accent="bosque"]{--water:#2E7D4F; --water-2:#8CB89E; --water-soft:#E2EDE6; --on-water:#FFFFFF}
:root[data-accent="uva"]{--water:#6A4FD3; --water-2:#AD9EE7; --water-soft:#EAE6F9; --on-water:#FFFFFF}
:root[data-accent="coral"]{--water:#CF5340; --water-2:#E5A096; --water-soft:#F8E7E4; --on-water:#FFFFFF}
:root[data-accent="miel"]{--water:#B7791F; --water-2:#D7B584; --water-soft:#F5ECE0; --on-water:#FFFFFF}
:root[data-accent="rosa"]{--water:#C23C78; --water-2:#DD94B5; --water-soft:#F6E4EC; --on-water:#FFFFFF}
:root[data-accent="grafito"]{--water:#3D4F5C; --water-2:#949EA5; --water-soft:#E4E6E8; --on-water:#FFFFFF}
@media (prefers-color-scheme: dark){:root[data-accent="turquesa"]:not([data-theme="light"]){--water:#5BAFAF; --water-2:#9FD0D0; --water-soft:#0C363B; --on-water:#06131A}:root[data-accent="bosque"]:not([data-theme="light"]){--water:#71A787; --water-2:#ABCBB9; --water-soft:#15332A; --on-water:#06131A}:root[data-accent="uva"]:not([data-theme="light"]){--water:#9A87E1; --water-2:#C3B9ED; --water-soft:#26264F; --on-water:#06131A}:root[data-accent="coral"]:not([data-theme="light"]){--water:#DE8A7D; --water-2:#ECBAB3; --water-soft:#422726; --on-water:#06131A}:root[data-accent="miel"]:not([data-theme="light"]){--water:#CEA467; --water-2:#E2C9A5; --water-soft:#3B321D; --on-water:#06131A}:root[data-accent="rosa"]:not([data-theme="light"]){--water:#D67AA3; --water-2:#E7B1C9; --water-soft:#3E2136; --on-water:#06131A}:root[data-accent="grafito"]:not([data-theme="light"]){--water:#7B8790; --water-2:#B1B9BE; --water-soft:#19262E; --on-water:#06131A}}
:root[data-accent="turquesa"][data-theme="dark"]{--water:#5BAFAF; --water-2:#9FD0D0; --water-soft:#0C363B; --on-water:#06131A}
:root[data-accent="bosque"][data-theme="dark"]{--water:#71A787; --water-2:#ABCBB9; --water-soft:#15332A; --on-water:#06131A}
:root[data-accent="uva"][data-theme="dark"]{--water:#9A87E1; --water-2:#C3B9ED; --water-soft:#26264F; --on-water:#06131A}
:root[data-accent="coral"][data-theme="dark"]{--water:#DE8A7D; --water-2:#ECBAB3; --water-soft:#422726; --on-water:#06131A}
:root[data-accent="miel"][data-theme="dark"]{--water:#CEA467; --water-2:#E2C9A5; --water-soft:#3B321D; --on-water:#06131A}
:root[data-accent="rosa"][data-theme="dark"]{--water:#D67AA3; --water-2:#E7B1C9; --water-soft:#3E2136; --on-water:#06131A}
:root[data-accent="grafito"][data-theme="dark"]{--water:#7B8790; --water-2:#B1B9BE; --water-soft:#19262E; --on-water:#06131A}

/* menú del usuario */
.user-wrap{position:relative}
button.role-chip{cursor:pointer;color:var(--ink)}
button.role-chip:hover,button.role-chip[aria-expanded="true"]{border-color:var(--water);color:var(--water)}
.user-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:45;display:flex;flex-direction:column}
.user-menu .um-h{display:flex;flex-direction:column;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.user-menu button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:10px;border-radius:8px;font-weight:600;cursor:pointer;text-align:left;color:var(--ink)}
.user-menu button:hover{background:var(--surface-2)}
.user-menu button .ic{color:var(--water)}
.user-menu button.danger,.user-menu button.danger .ic{color:var(--bad)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font-weight:600;font-size:.84rem;color:var(--ink)}
.swatch i{width:34px;height:34px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 3px color-mix(in srgb, #fff 35%, transparent)}
.swatch[aria-checked="true"]{border-color:var(--sw);box-shadow:inset 0 0 0 2px var(--sw);background:color-mix(in srgb, var(--sw) 10%, var(--surface))}
.chars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.char{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:.84rem;font-weight:600;opacity:.7}
@media (max-width:560px){
  .topbar .role-chip.user{display:inline-flex;width:40px;height:40px;padding:0;justify-content:center;border-radius:10px}
  .role-chip.user .um-name,.role-chip.user .ic:last-child{display:none}
  .chars{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Personaje (abajo a la izquierda) ===== */
#mascot{position:fixed;right:36px;bottom:32px;z-index:35;display:flex;align-items:flex-end;pointer-events:none}
#mascot .m-wrap{order:2;position:relative;pointer-events:auto;display:flex;flex-direction:column;align-items:center}
#mascot .m-body{pointer-events:auto;border:0;background:none;padding:0;cursor:pointer;width:156px;height:156px;position:relative;animation:m-idle 3.2s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 8px 10px rgba(15,37,49,.25))}
#mascot .m-img{width:100%;height:100%;object-fit:contain;display:block}
#mascot .m-sprite{display:none;position:absolute;inset:0;background:var(--src) 0 0/calc(var(--frames)*100%) 100% no-repeat}
#mascot .m-body.sprite{animation:none}
#mascot .m-body.sprite .m-img{visibility:hidden}
#mascot .m-body.sprite .m-sprite{display:block;animation:m-sprite var(--dur) steps(var(--frames), jump-none) var(--iter)}
@keyframes m-sprite{to{background-position:100% 0}}
#mascot .m-bubble{order:1;pointer-events:auto;margin:0 -4px 96px 0;max-width:260px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px 14px 4px 14px;box-shadow:var(--shadow);padding:10px 13px;font-size:.88rem;line-height:1.4;animation:m-pop .25s ease-out}
@keyframes m-pop{from{opacity:0;transform:translateY(6px) scale(.96)}}
/* animaciones de respaldo mientras no hay spritesheets */
@keyframes m-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#mascot .anim-saludar{animation:m-wave 1.1s ease-in-out 2, m-idle 3.2s ease-in-out 2.2s infinite}
@keyframes m-wave{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
#mascot .anim-notificar{animation:m-jump .55s ease-out 3, m-idle 3.2s ease-in-out 1.7s infinite}
@keyframes m-jump{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-22px) scale(1.04,.96)}60%{transform:translateY(0) scale(1.06,.92)}}
#mascot .anim-cerrar-caja{animation:m-spin 1.2s cubic-bezier(.3,1.4,.5,1), m-idle 3.2s ease-in-out 1.3s infinite}
@keyframes m-spin{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}
#mascot .anim-meta{animation:m-jump .5s ease-out 4, m-spin 1s 2s, m-idle 3.2s ease-in-out 3.1s infinite}
@media (prefers-reduced-motion:reduce){#mascot .m-body,#mascot .m-body[class*="anim-"]{animation:none}}
@media (max-width:820px){#mascot{right:18px;bottom:calc(96px + env(safe-area-inset-bottom,0px))}#mascot .m-body{width:108px;height:108px}#mascot .m-bubble{margin-bottom:62px;max-width:210px;font-size:.84rem}}
.chars{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
button.char{cursor:pointer;opacity:1;border-style:solid;background:var(--surface);color:var(--ink)}
button.char img{width:64px;height:64px;object-fit:contain}
button.char.none{color:var(--muted)}
button.char.none .ic{width:64px;height:40px;margin:12px 0}
button.char[aria-checked="true"]{border-color:var(--water);box-shadow:inset 0 0 0 2px var(--water);background:var(--water-soft)}

/* meta diaria en el personaje */
#mascot .m-goal{margin-top:-6px;font:600 .74rem var(--f-num);padding:3px 9px;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow);white-space:nowrap}
#mascot .m-goal.empty{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 50%, var(--line))}
#mascot .m-goal.done{background:var(--good);border-color:var(--good);color:var(--surface)}
#mascot .m-menu{position:absolute;right:0;bottom:calc(100% + 8px);width:300px;max-width:calc(100vw - 36px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:12px;animation:m-pop .2s ease-out;color:var(--ink)}
.mm-h{display:flex;justify-content:space-between;align-items:center}
.mm-h b{font-family:var(--f-display);font-size:1.05rem}
.mm-sec{display:flex;flex-direction:column;gap:8px}
.mm-prog{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:var(--surface-2)}
.mm-prog .stock-bar i{background:var(--water)}
.mm-prog.done{background:var(--good-soft)}
.mm-prog.done .stock-bar i{background:var(--good)}
.mm-opts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.mm-opts button{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 0;font:600 .95rem var(--f-num);cursor:pointer;color:var(--ink)}
.mm-opts button:hover{border-color:var(--water)}
.mm-opts button[aria-checked="true"]{background:var(--water);border-color:var(--water);color:var(--on-water)}
.mm-acts{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.linkbtn{border:0;background:none;padding:0;color:var(--bad);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}

/* ===== Entrar con correo y contraseña ===== */
.pw{position:relative}
.pw .input{padding-right:44px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;border-radius:8px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.pw-eye:hover,.pw-eye.on{color:var(--water)}
.btn.lg{padding:12px 16px;font-size:1rem;justify-content:center}
.login-err{display:flex;align-items:center;gap:8px;color:var(--bad);background:var(--bad-soft);border-radius:10px;padding:9px 12px;font-size:.88rem;font-weight:600}
.muted-link{color:var(--water);text-decoration:none;align-self:center;font-size:.9rem}
.muted-link:hover{text-decoration:underline}
.demo-accts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:8px;text-align:left}
.demo-accts button{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:6px 9px;cursor:pointer;font-weight:600;font-size:.8rem;color:var(--ink);text-align:left}
.demo-accts button span{font:500 .72rem var(--f-num);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-accts button:hover{border-color:var(--water)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.82rem}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}

/* ===== Cuentas reales: invitaciones y avisos ===== */
.code-in{font-family:var(--f-num);letter-spacing:.18em;text-transform:uppercase;font-size:1.1rem}
.code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;background:var(--water-soft);border:1px dashed var(--water)}
.code-box b{font-size:1.7rem;letter-spacing:.14em;color:var(--water)}
.invites{display:flex;flex-direction:column;padding:4px 18px 12px}
.invites > .label{padding:8px 0 2px}
.seg-opt{flex:1;position:relative;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{display:block;text-align:center;padding:8px 10px;font-weight:600;font-size:.84rem;color:var(--muted)}
.seg-opt input:checked + span{background:var(--water);color:var(--on-water)}
.seg-opt input:focus-visible + span{outline:2px solid var(--water);outline-offset:-2px}
.notice-ok{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:12px;background:var(--water-soft)}
.notice-ok .ic{color:var(--water);margin-top:4px}
.notice-ok h2{margin-bottom:6px}
.notice-ok p + p{margin-top:6px}
.btn[disabled]{opacity:.65;cursor:progress}
.btn.google{background:var(--surface);color:var(--ink);border-color:var(--line);gap:10px}
.btn.google:hover{border-color:var(--water)}

/* ===== Avisos con regalo y enlaces para copiar ===== */
.gift-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:color-mix(in srgb, var(--pink) 12%, var(--surface));border:1px solid color-mix(in srgb, var(--pink) 35%, var(--line))}
.gift-banner .ic{color:var(--pink);flex:none;margin-top:2px}
.gift-banner b{display:block;color:color-mix(in srgb, var(--pink) 60%, var(--ink))}
.gift-banner .small{color:var(--muted)}
.code-box.link{padding:6px 6px 6px 10px;background:var(--surface-2);border-style:solid;border-color:var(--line)}
.code-box.link .input{border:0;background:none;padding:6px 0;font:500 .86rem var(--f-num);min-width:0;flex:1}

/* ===== Tutorial guiado ===== */
#tour{position:fixed;inset:0;z-index:90}
#tour .t-block{position:absolute;inset:0}
#tour .t-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(4,14,20,.72),0 0 0 3px var(--water),0 0 24px 6px color-mix(in srgb, var(--water) 55%, transparent);pointer-events:none;transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease}
#tour .t-arrow{position:fixed;width:32px;height:32px;color:var(--water-2);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));pointer-events:none;transform:rotate(var(--rot,0deg));animation:t-bounce 1s ease-in-out infinite;transition:left .3s ease,top .3s ease}
@keyframes t-bounce{0%,100%{translate:0 0}50%{translate:var(--bx,0) var(--by,6px)}}

#tour .t-card{position:fixed;width:min(340px,calc(100vw - 28px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px -12px rgba(0,0,0,.6);padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:left .3s ease,top .3s ease;animation:m-pop .25s ease-out}
#tour .t-head{display:flex;align-items:center;gap:10px}
#tour .t-head img{width:56px;height:56px;object-fit:contain;flex:none;animation:m-wave 1.1s ease-in-out 1}
#tour .t-head h3{font-size:1.08rem;line-height:1.25}
#tour .t-card p{font-size:.92rem;line-height:1.45;color:color-mix(in srgb, var(--ink) 85%, var(--muted))}
#tour .t-dots{display:flex;gap:4px;flex-wrap:wrap}
#tour .t-dots i{width:6px;height:6px;border-radius:99px;background:var(--line)}
#tour .t-dots i.done{background:color-mix(in srgb, var(--water) 45%, var(--line))}
#tour .t-dots i.on{width:18px;background:var(--water)}
#tour .t-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
body.touring #mascot .m-bubble,body.touring #mascot .m-menu,body.touring .toasts{display:none!important}
@media (prefers-reduced-motion:reduce){#tour .t-arrow,#tour .t-head img{animation:none}#tour .t-spot,#tour .t-card,#tour .t-arrow{transition:none}}

/* ===== Membresía ===== */
.pay-head{display:flex;align-items:center;gap:12px}
.pay-head img{width:64px;height:64px;object-fit:contain;animation:m-wave 1.1s ease-in-out 1}
.plan-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--surface);border-top:4px solid var(--water)}
.plan-price{font-size:1.5rem;color:var(--water)}
.plan-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.plan-list li{display:flex;align-items:center;gap:8px}
.plan-list .ic{color:var(--good)}
.plan-steps{display:flex;flex-direction:column;gap:0;padding-left:4px}
.plan-steps > div{display:flex;gap:12px;align-items:flex-start;position:relative;padding-bottom:12px}
.plan-steps > div:not(:last-child)::before{content:'';position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--line)}
.plan-steps i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 .75rem var(--f-num);font-style:normal;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);flex:none}
.plan-steps i.on{background:var(--good);border-color:var(--good);color:var(--surface)}
.plan-steps b{display:block;font-size:.92rem}
.sub-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin-bottom:14px;background:var(--water-soft);color:var(--ink);border:1px solid color-mix(in srgb, var(--water) 35%, var(--line))}
.sub-banner > span{flex:1;font-size:.9rem}
.sub-banner .ic{color:var(--water)}
.sub-banner.warn{background:var(--warn-soft);border-color:color-mix(in srgb, var(--warn) 40%, var(--line))}
.sub-banner.warn .ic{color:var(--warn)}
.sub-banner.bad{background:var(--bad-soft);border-color:color-mix(in srgb, var(--bad) 40%, var(--line))}
.sub-banner.bad .ic{color:var(--bad)}

/* ===== home pública (js/home.js): hero, funciones, aviso de privacidad y eliminar cuenta ===== */
html:has(.home){scroll-behavior:smooth}
.home{min-height:100%;background:var(--bg)}
.home [id]{scroll-margin-top:80px}
.h-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.h-top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.h-top-in{display:flex;align-items:center;gap:20px;height:68px}
.h-logo{display:block;line-height:0;border-radius:10px}
.h-logo img{height:40px;width:auto}
.h-nav{display:flex;gap:4px;margin-left:auto}
.h-nav a{color:var(--muted);font-weight:600;text-decoration:none;padding:8px 12px;border-radius:9px}
.h-nav a:hover{color:var(--ink);background:var(--surface)}
.h-hero{padding:64px 0 72px;background:radial-gradient(60% 80% at 85% 30%,var(--water-soft),transparent 70%)}
.h-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.h-hero-txt{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.h-hero h1{font-size:clamp(2.3rem,5vw,3.8rem);line-height:1.02;max-width:13ch}
.h-eyebrow{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:.85rem;color:var(--water);background:var(--water-soft);padding:5px 12px;border-radius:99px}
.h-lead{font-size:1.12rem;color:var(--muted);max-width:52ch}
.h-cta{display:flex;gap:12px;flex-wrap:wrap}
.h-hero-art{position:relative;display:flex;justify-content:center;padding:10px 0 10px 40px}
.h-phone{width:290px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:22px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow),0 40px 70px -40px rgba(24,120,176,.55);transform:rotate(2deg)}
.h-phone-h{display:flex;flex-direction:column;margin-bottom:2px}
.h-phone-h b{font-family:var(--f-display);font-size:1.25rem}
.h-phone-k{background:var(--surface-2);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;min-width:0}
.h-phone-k .num{font-size:1.7rem;font-weight:600;line-height:1.2}
.h-phone-k.sm .num{font-size:1.15rem}
.h-phone-k .num.good{color:var(--good)}
.h-phone-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.h-tank{position:relative;height:118px;border:2px solid var(--tank);border-radius:10px 10px 16px 16px;overflow:hidden;display:grid;place-items:center;background:var(--surface-2)}
.h-tank-fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(var(--water-2),var(--water))}
.h-tank .num{position:relative;font-weight:600;font-size:1.1rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.h-garr{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:118px}
.h-garr img{height:108px;width:auto}
.h-garr img.g10{height:76px}
.h-mascot{position:absolute;left:-30px;bottom:-24px;width:160px;height:auto;filter:drop-shadow(0 12px 18px rgba(15,37,49,.2))}
.h-triad{background:var(--water);color:var(--on-water)}
.h-triad .h-wrap{display:flex;gap:12px 32px;justify-content:center;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;font-family:var(--f-display);font-weight:700;font-size:1.3rem}
.h-sec{padding:72px 0}
.h-sec.alt{background:var(--surface);border-block:1px solid var(--line)}
.h-sec-h{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}
.h-sec-h h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.h-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.h-feat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px}
.h-feat-ic{width:42px;height:42px;border-radius:12px;background:var(--water-soft);color:var(--water);display:grid;place-items:center;margin-bottom:4px}
.h-feat p{font-size:.92rem}
.h-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.h-steps li{display:flex;gap:14px;align-items:flex-start}
.h-steps p{margin-top:4px}
.h-step-n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--water);color:var(--on-water);display:grid;place-items:center;font-weight:600}
.h-legal{max-width:880px}
.h-legal h3{font-size:1.15rem;margin:36px 0 10px}
.h-legal p,.h-legal li{line-height:1.65}
.h-legal p+p{margin-top:10px}
.h-legal ul,.h-list-n{padding-left:22px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.h-legal a{color:var(--water)}
.h-toc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.h-toc ol{margin:0;padding-left:20px;columns:3;column-gap:28px}
.h-toc li{break-inside:avoid;padding:3px 0}
.h-toc a{text-decoration:none;font-weight:600}
.h-toc a:hover{text-decoration:underline}
.h-tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:12px 0;background:var(--surface)}
.h-tbl table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
.h-tbl th,.h-tbl td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.h-tbl th{background:var(--surface-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.h-tbl td:first-child{font-weight:700;white-space:nowrap}
.h-tbl tr:last-child td{border-bottom:0}
.h-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:20px 0}
.h-sec.alt .card{background:var(--bg)}
.h-grid2 .card ul{margin-bottom:0}
mark.fill{background:var(--warn-soft);color:var(--warn);padding:0 4px;border-radius:4px;font-weight:600}
.h-foot{padding:36px 0 44px}
.h-foot-in{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.h-foot img{height:36px;width:auto;border-radius:8px}
.h-foot nav{display:flex;gap:8px 18px;flex-wrap:wrap;margin-left:auto}
.h-foot a{color:var(--muted);font-weight:600;text-decoration:none}
.h-foot a:hover{color:var(--water)}
.h-foot a.btn{color:var(--ink)}
.h-nav a{display:inline-flex;align-items:center;gap:4px}
.legal-page .h-sec:first-of-type{padding-top:48px}
.h-foot p{width:100%}
.back-home{align-self:flex-start;display:inline-flex;align-items:center;gap:4px}
/* el logo es azul oscuro: en modo oscuro va sobre una placa blanca */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .h-logo img,:root:not([data-theme="light"]) .h-foot img{background:#fff;padding:4px 10px;border-radius:10px}}
:root[data-theme="dark"] .h-logo img,:root[data-theme="dark"] .h-foot img{background:#fff;padding:4px 10px;border-radius:10px}
@media (max-width:960px){
  .h-hero-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .h-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-steps{grid-template-columns:minmax(0,1fr)}
  .h-toc ol{columns:2}
}
@media (max-width:640px){
  .h-wrap{padding:0 16px}
  .h-top-in{height:60px;justify-content:space-between}
  .h-nav{display:none}
  .h-logo img{height:32px}
  .h-hero{padding:36px 0 48px}
  .h-cta,.h-cta .btn{width:100%}
  .h-hero-art{padding-left:0}
  .h-phone{width:250px}
  .h-mascot{width:110px;left:0;bottom:-18px}
  .h-triad .h-wrap{font-size:1.05rem;gap:6px 18px}
  .h-sec{padding:48px 0}
  .h-feats,.h-grid2{grid-template-columns:minmax(0,1fr)}
  .h-toc ol{columns:1}
  /* tablas del aviso: cada renglón se apila como tarjeta */
  .h-tbl table,.h-tbl tbody,.h-tbl tr,.h-tbl td{display:block;min-width:0}
  .h-tbl thead{display:none}
  .h-tbl tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .h-tbl tr:last-child{border-bottom:0}
  .h-tbl td{padding:0;border:0}
  .h-tbl td:first-child{font-family:var(--f-display);font-size:1rem;margin-bottom:4px}
  .h-tbl td:last-child{color:var(--muted);font-size:.86rem;margin-top:6px}
  .h-foot nav{margin-left:0}
}