/* ═══════════════════════════════════════════════════════
   MI SISTEMA — Estilos Globales
   Responsive: Mobile · Tablet · Desktop
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0d0d12;--sur:#17172a;--sur2:#1f1f35;--bdr:#2a2a45;
  --acc:#7c5cfc;--acc2:#45d9c7;--grn:#3dd68c;--yel:#f7ce45;
  --red:#f95a5a;--org:#ff8c42;--txt:#eeeef8;--mut:#8080aa;
  --nav:64px;--top:56px;--sb:240px;
  --sit:env(safe-area-inset-top,0px);
  --sib:env(safe-area-inset-bottom,0px);
  --sil:env(safe-area-inset-left,0px);
  --sir:env(safe-area-inset-right,0px);
  --radius:16px;--shadow:0 4px 24px rgba(0,0,0,.4);
}

html,body{height:100%;overflow:hidden;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,'Segoe UI',Helvetica,sans-serif;background:var(--bg);color:var(--txt);font-size:15px;-webkit-font-smoothing:antialiased;overscroll-behavior:none}

/* ── LAYOUT PRINCIPAL ──────────────────────────────────── */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;position:relative}
#mainWrap{display:flex;flex-direction:column;flex:1;overflow:hidden;min-width:0}

/* ── TOP BAR ────────────────────────────────────────────── */
#topBar{
  height:calc(var(--top) + var(--sit));padding-top:var(--sit);
  padding-left:calc(14px + var(--sil));padding-right:calc(14px + var(--sir));
  background:var(--sur);border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:10;
}
#topTitle{font-weight:800;font-size:1rem;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.top-acts{display:flex;gap:6px;align-items:center}
.top-btn{background:var(--sur2);border:1px solid var(--bdr);color:var(--txt);border-radius:9px;min-width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;-webkit-tap-highlight-color:transparent;padding:0 8px;gap:3px;font-weight:700;font-family:inherit}
.top-btn:active{opacity:.65}
.bc{background:var(--red);color:#fff;border-radius:10px;font-size:.6rem;font-weight:900;padding:1px 5px;min-width:16px;text-align:center;display:none}

/* Sync status */
#syncStatus{font-size:.7rem;color:var(--mut);display:flex;align-items:center;gap:4px;white-space:nowrap}
#syncStatus.syncing{color:var(--acc2)}
#syncStatus.error{color:var(--red)}

/* ── BANNERS ─────────────────────────────────────────────── */
#alertBanner{background:#1e0e00;border-bottom:2px solid var(--org);padding:8px calc(14px + var(--sil));font-size:.8rem;color:var(--org);font-weight:700;display:none;align-items:center;gap:8px;flex-shrink:0;cursor:pointer;animation:pulse 2s infinite}
#alertBanner.show{display:flex}
@keyframes pulse{0%,100%{border-bottom-color:var(--org)}50%{border-bottom-color:#ff6000}}
#iosBanner{background:#140d30;border-bottom:1px solid var(--acc);padding:9px calc(14px + var(--sil));font-size:.77rem;color:var(--acc2);display:none;align-items:center;gap:8px;flex-shrink:0}
#iosBanner.show{display:flex}
#offlineBanner{background:#1a0505;border-bottom:1px solid var(--red);padding:6px 14px;font-size:.76rem;color:var(--red);font-weight:700;display:none;text-align:center;flex-shrink:0}
#offlineBanner.show{display:block}

/* ── PÁGINAS ─────────────────────────────────────────────── */
#pages{flex:1;overflow:hidden;position:relative}
.page{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px calc(14px + var(--sir)) calc(84px + var(--sib)) calc(14px + var(--sil));
  display:none;flex-direction:column;gap:14px}
.page.active{display:flex}

/* ── BOTTOM NAV (mobile) ─────────────────────────────────── */
#bottomNav{height:calc(var(--nav) + var(--sib));padding-bottom:var(--sib);
  background:var(--sur);border-top:1px solid var(--bdr);display:flex;flex-shrink:0;z-index:10}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:none;border:none;color:var(--mut);cursor:pointer;font-size:.6rem;font-weight:700;
  -webkit-tap-highlight-color:transparent;padding:6px 0;transition:color .2s;position:relative;min-height:44px}
.ni{font-size:1.25rem;line-height:1;transition:transform .2s}
.nav-item.active{color:var(--acc)}
.nav-item.active .ni{filter:drop-shadow(0 0 7px var(--acc));transform:scale(1.18)}
.nbadge{position:absolute;top:5px;right:calc(50% - 18px);background:var(--red);color:#fff;
  border-radius:10px;font-size:.55rem;font-weight:900;padding:1px 4px;min-width:15px;text-align:center;display:none}

/* ── SIDEBAR DESKTOP ─────────────────────────────────────── */
#sidebar{display:none;flex-direction:column;width:var(--sb);min-width:var(--sb);
  height:100vh;background:var(--sur);border-right:1px solid var(--bdr);flex-shrink:0;z-index:20}
.sb-header{padding:20px 16px 14px;border-bottom:1px solid var(--bdr)}
.sb-logo{font-weight:900;font-size:1.1rem;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}
.sb-user{font-size:.78rem;color:var(--mut)}
.sb-user strong{display:block;color:var(--txt);font-size:.88rem;margin-bottom:2px}
.sb-user span{font-size:.72rem;color:var(--mut)}
.sb-nav{flex:1;padding:10px 8px;overflow-y:auto}
.snav-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:10px;
  background:none;border:none;color:var(--mut);cursor:pointer;font-size:.88rem;font-weight:600;
  font-family:inherit;text-align:left;transition:all .15s;position:relative;margin-bottom:2px}
.snav-item:hover{background:var(--sur2);color:var(--txt)}
.snav-item.active{background:rgba(124,92,252,.15);color:var(--acc)}
.snav-item .sni{font-size:1.1rem;width:22px;text-align:center;flex-shrink:0}
.snbadge{margin-left:auto;background:var(--red);color:#fff;border-radius:10px;
  font-size:.55rem;font-weight:900;padding:2px 5px;min-width:16px;text-align:center;display:none}
.sb-footer{padding:10px 8px 16px;border-top:1px solid var(--bdr);display:flex;flex-direction:column;gap:2px}
.sb-foot-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;
  background:none;border:none;color:var(--mut);cursor:pointer;font-size:.84rem;font-weight:600;
  font-family:inherit;text-align:left;transition:all .15s}
.sb-foot-btn:hover{background:var(--sur2);color:var(--txt)}
.sb-sync{font-size:.7rem;color:var(--mut);padding:4px 12px;display:flex;align-items:center;gap:6px}

/* ── FAB ─────────────────────────────────────────────────── */
#fab{position:fixed;bottom:calc(var(--nav) + var(--sib) + 14px);right:calc(16px + var(--sir));
  width:52px;height:52px;background:var(--acc);color:#fff;border:none;border-radius:50%;
  font-size:1.6rem;cursor:pointer;box-shadow:0 4px 24px rgba(124,92,252,.55);
  display:flex;align-items:center;justify-content:center;z-index:20;
  -webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s}
#fab:active{transform:scale(.88);box-shadow:0 2px 12px rgba(124,92,252,.4)}

/* ── URGENT OVERLAY ──────────────────────────────────────── */
#urgentOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;
  align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s}
#urgentOverlay.show{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.ucard{background:var(--sur);border:2px solid var(--red);border-radius:20px;padding:24px;
  width:100%;max-width:360px;text-align:center;animation:shakeIn .4s}
@keyframes shakeIn{0%{transform:scale(.8)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.uemoji{font-size:3rem;line-height:1;margin-bottom:10px}
.utitle{font-size:1.15rem;font-weight:900;margin-bottom:6px}
.usub{font-size:.82rem;color:var(--mut);margin-bottom:20px}
.ubtns{display:flex;gap:10px}
.ubtn{flex:1;padding:12px 8px;border-radius:12px;font-size:.85rem;font-weight:700;cursor:pointer;
  border:none;-webkit-tap-highlight-color:transparent;font-family:inherit}
.ubtn-snooze{background:var(--sur2);border:1px solid var(--bdr);color:var(--txt)}
.ubtn-done{background:var(--grn);color:#000}
.ubtn-dismiss{background:none;border:none;color:var(--mut);font-size:.8rem;cursor:pointer;
  padding:10px;margin-top:4px;width:100%;font-family:inherit}

/* ── AUTH OVERLAY ────────────────────────────────────────── */
#authOverlay{position:fixed;inset:0;background:var(--bg);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
#authOverlay.hidden{display:none}
.auth-card{background:var(--sur);border:1px solid var(--bdr);border-radius:24px;
  padding:28px 24px;width:100%;max-width:400px;animation:fadeIn .3s}
.auth-logo{font-size:2.5rem;text-align:center;margin-bottom:8px}
.auth-title{font-size:1.3rem;font-weight:900;text-align:center;margin-bottom:4px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.auth-sub{font-size:.82rem;color:var(--mut);text-align:center;margin-bottom:20px}
.auth-tabs{display:flex;background:var(--sur2);border-radius:10px;padding:3px;gap:3px;margin-bottom:18px}
.auth-tab{flex:1;background:none;border:none;color:var(--mut);border-radius:8px;padding:9px;
  font-size:.84rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}
.auth-tab.active{background:var(--acc);color:#fff}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form-hidden{display:none}
.auth-error{color:var(--red);font-size:.82rem;font-weight:700;text-align:center;min-height:20px;margin-top:4px}
.auth-divider{text-align:center;color:var(--mut);font-size:.78rem;margin:8px 0;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--bdr)}
.auth-divider::before{left:0}.auth-divider::after{right:0}
.auth-guest{background:transparent;border:1px solid var(--bdr);color:var(--mut);border-radius:10px;
  padding:11px;font-size:.82rem;cursor:pointer;width:100%;font-family:inherit;font-weight:600;transition:all .2s}
.auth-guest:hover{border-color:var(--mut);color:var(--txt)}

/* ── CARDS ───────────────────────────────────────────────── */
.card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--radius);padding:14px}

/* ── STATS ───────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.stat-box{background:var(--sur2);border:1px solid var(--bdr);border-radius:12px;padding:10px 5px;text-align:center;cursor:default}
.sv{font-size:1.5rem;font-weight:900;line-height:1.1}.sl{font-size:.58rem;color:var(--mut);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.cg{color:var(--grn)}.cy{color:var(--yel)}.cr{color:var(--red)}.cp{color:var(--acc)}

/* ── SECTION HDR ─────────────────────────────────────────── */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.st{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--mut)}
.sea{font-size:.75rem;color:var(--acc);background:none;border:none;cursor:pointer;font-weight:700;font-family:inherit}

/* ── GREETING ────────────────────────────────────────────── */
.greet{background:linear-gradient(135deg,#1c1648,#0d1e3f);border:1px solid #2d2d60;border-radius:18px;padding:16px}
.gname{font-size:1.05rem;font-weight:900}
.gtime{font-size:2.2rem;font-weight:900;color:var(--acc2);line-height:1;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:2px}
.gdate{font-size:.77rem;color:var(--mut);margin-top:2px}
.gpct{display:flex;align-items:center;gap:8px;margin-top:10px}
.gpctb{flex:1;height:6px;background:var(--bdr);border-radius:4px;overflow:hidden}
.gpctf{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .8s}
.gpctl{font-size:.76rem;font-weight:800;color:var(--acc2);min-width:36px;text-align:right}
.gtz{font-size:.68rem;color:var(--mut);margin-top:4px;opacity:.7}

/* ── ITEMS ───────────────────────────────────────────────── */
.items{display:flex;flex-direction:column;gap:8px}
.ic{background:var(--sur2);border:1px solid var(--bdr);border-radius:12px;padding:11px 13px;
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ic:active{opacity:.75}
.ic.done{opacity:.45}.ic.done .iname{text-decoration:line-through}
.ic.p-alta{border-left:3px solid var(--red)}.ic.p-media{border-left:3px solid var(--yel)}.ic.p-baja{border-left:3px solid var(--grn)}
.ic.late{border-left:3px solid var(--red);background:#1d1015}
.ic.late .iname{color:var(--red)}
.ic.soon{border-left:3px solid var(--org)}
.ic.now{border-left:3px solid var(--red);background:#1d1015;animation:glowRed 1.5s infinite}
@keyframes glowRed{0%,100%{box-shadow:0 0 0 0 rgba(249,90,90,0)}50%{box-shadow:0 0 12px 2px rgba(249,90,90,.3)}}
.chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--mut);background:transparent;flex-shrink:0;
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;margin-top:1px;
  transition:all .2s;-webkit-tap-highlight-color:transparent;min-width:22px}
.chk.done{background:var(--grn);border-color:var(--grn);color:#fff}
.ibody{flex:1;min-width:0}.iname{font-size:.9rem;font-weight:700;line-height:1.3}
.imeta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;align-items:center}
.b{font-size:.67rem;padding:2px 7px;border-radius:20px;font-weight:700}
.bg{background:#0d3622;color:var(--grn)}.br{background:#3d1212;color:var(--red)}
.by{background:#3a2d08;color:var(--yel)}.bp{background:#1e1558;color:var(--acc)}
.bt{background:#082428;color:var(--acc2)}.bo{background:#3a1e06;color:var(--org)}
.tb{font-size:.7rem;font-weight:700;background:var(--sur);border:1px solid var(--bdr);border-radius:6px;padding:2px 7px;color:var(--acc2);display:inline-flex;align-items:center;gap:3px}

/* ── PROGRESS ────────────────────────────────────────────── */
.pb{height:5px;background:var(--bdr);border-radius:4px;overflow:hidden}
.pf{height:100%;border-radius:4px;transition:width .5s}
.pl{display:flex;justify-content:space-between;font-size:.7rem;color:var(--mut);margin-top:3px}

/* ── OBJ CARD ────────────────────────────────────────────── */
.oc{background:var(--sur2);border:1px solid var(--bdr);border-radius:14px;padding:13px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.oc:active{opacity:.75}.oc.done{opacity:.45}
.oc-name{font-weight:700;font-size:.92rem}
.oc-sub{font-size:.74rem;color:var(--mut);margin-top:4px;display:flex;gap:5px;flex-wrap:wrap}

/* ── CHIPS ───────────────────────────────────────────────── */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0}
.chips::-webkit-scrollbar{display:none}
.chip{background:var(--sur2);border:1px solid var(--bdr);color:var(--mut);border-radius:20px;padding:6px 13px;font-size:.76rem;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent;min-height:36px;display:flex;align-items:center}
.chip.active{background:var(--acc);border-color:var(--acc);color:#fff}

/* ── SEGMENT ─────────────────────────────────────────────── */
.seg{display:flex;background:var(--sur2);border-radius:10px;padding:3px;gap:2px}
.sb{flex:1;background:none;border:none;color:var(--mut);border-radius:8px;padding:8px 4px;font-size:.74rem;font-weight:700;cursor:pointer;transition:all .2s;text-align:center;-webkit-tap-highlight-color:transparent;min-height:40px;font-family:inherit}
.sb.active{background:var(--acc);color:#fff}

/* ── NOTIF PERM ──────────────────────────────────────────── */
.nperm{background:linear-gradient(135deg,#1a1030,#0d1a30);border:1px solid #3a2a6a;border-radius:14px;padding:13px;display:none;align-items:center;gap:10px}
.nperm.show{display:flex}
.np-txt{flex:1;font-size:.79rem;color:var(--mut)}
.np-btn{background:var(--acc);color:#fff;border:none;border-radius:8px;padding:8px 13px;font-size:.76rem;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;min-height:36px;font-family:inherit}

/* ── ALERTS ──────────────────────────────────────────────── */
.ai{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--bdr)}
.ai:last-child{border-bottom:none}
.adot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.adot.r{background:var(--red);animation:dotPulse 1.5s infinite}.adot.o{background:var(--org)}.adot.g{background:var(--grn)}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.ai-txt{flex:1;font-size:.8rem}.ai-time{font-size:.72rem;color:var(--mut);white-space:nowrap}

/* ── QUOTE ───────────────────────────────────────────────── */
.qcard{background:var(--sur2);border-left:3px solid var(--acc);border-radius:0 12px 12px 0;padding:11px 13px}
.qtxt{font-size:.82rem;font-style:italic;color:var(--mut);line-height:1.5}

/* ── POMODORO ────────────────────────────────────────────── */
.pw2{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0}
.pring{position:relative;width:160px;height:160px}
.pring svg{transform:rotate(-90deg)}
.pctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ptm{font-size:2.1rem;font-weight:900;font-variant-numeric:tabular-nums}
.plbl{font-size:.7rem;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pbtns{display:flex;gap:8px}
.pbtn{background:var(--sur2);border:1px solid var(--bdr);color:var(--txt);border-radius:10px;padding:10px 18px;font-size:.88rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:44px;font-family:inherit}
.pbtn.pri{background:var(--acc);border-color:var(--acc)}
.pbtn:active{opacity:.7}
.psel{width:100%;background:var(--sur2);border:1px solid var(--bdr);border-radius:10px;padding:11px 12px;color:var(--txt);font-size:.88rem;outline:none;-webkit-appearance:none;min-height:44px;font-family:inherit}

/* ── BOTTOM SHEET ────────────────────────────────────────── */
.mover{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:50;align-items:flex-end}
.mover.open{display:flex}
.msheet{background:var(--sur);border-radius:20px 20px 0 0;padding:18px 16px calc(24px + var(--sib));
  width:100%;max-height:93vh;overflow-y:auto;animation:sUp .22s ease;-webkit-overflow-scrolling:touch}
@keyframes sUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.shdl{width:38px;height:4px;background:var(--bdr);border-radius:2px;margin:0 auto 14px}
.shtitle{font-size:1rem;font-weight:800;margin-bottom:14px;text-align:center}

/* ── FORM ────────────────────────────────────────────────── */
.fg{margin-bottom:12px}
.fg label{display:block;font-size:.72rem;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.fg input,.fg select,.fg textarea{width:100%;background:var(--sur2);border:1px solid var(--bdr);border-radius:10px;padding:11px 12px;color:var(--txt);font-size:.9rem;outline:none;font-family:inherit;-webkit-appearance:none;min-height:44px}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--acc)}
.fg textarea{resize:vertical;min-height:68px}
.fgr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tselector{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:14px}
.tbtn{background:var(--sur2);border:1px solid var(--bdr);border-radius:10px;padding:9px 4px;font-size:.68rem;font-weight:700;color:var(--mut);cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;min-height:52px;line-height:1.4;font-family:inherit}
.tbtn.active{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-big{width:100%;background:var(--acc);color:#fff;border:none;border-radius:12px;padding:14px;font-size:.95rem;font-weight:700;cursor:pointer;margin-top:4px;-webkit-tap-highlight-color:transparent;min-height:48px;font-family:inherit}
.btn-big:active{opacity:.85}
.btn-txt{width:100%;background:none;border:none;color:var(--mut);padding:13px;cursor:pointer;font-size:.85rem;min-height:44px;font-family:inherit}
.btn-row{display:flex;gap:8px;margin-top:12px}
.btn-ol{flex:1;background:transparent;border:1px solid var(--bdr);color:var(--mut);border-radius:10px;padding:10px;font-size:.82rem;font-weight:700;cursor:pointer;text-align:center;min-height:44px;font-family:inherit}
.btn-ol:active{opacity:.7}
.btn-danger{background:#3d1212;border:1px solid var(--red);color:var(--red);border-radius:10px;padding:10px 14px;font-size:.82rem;font-weight:700;cursor:pointer;min-height:44px;font-family:inherit}

/* ── DETAIL ──────────────────────────────────────────────── */
.dr{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bdr)}
.dr:last-child{border-bottom:none}
.dk{font-size:.78rem;color:var(--mut)}.dv{font-size:.86rem;font-weight:700}

/* ── TOGGLE ──────────────────────────────────────────────── */
.trow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bdr)}
.tlbl{font-size:.88rem;font-weight:600}.tslb{font-size:.73rem;color:var(--mut);margin-top:1px}
.tgl{position:relative;width:46px;height:26px;flex-shrink:0}
.tgl input{opacity:0;width:0;height:0}
.tslider{position:absolute;inset:0;background:var(--bdr);border-radius:26px;cursor:pointer;transition:.3s}
.tslider::before{content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.tgl input:checked+.tslider{background:var(--acc)}
.tgl input:checked+.tslider::before{transform:translateX(20px)}

/* ── NOTIF LOG ───────────────────────────────────────────── */
.nlog{max-height:220px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nli{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--bdr);align-items:flex-start}
.nli:last-child{border-bottom:none}
.nli-ic{font-size:1.05rem;flex-shrink:0;margin-top:1px}
.nli-t{font-size:.82rem;font-weight:600}
.nli-d{font-size:.72rem;color:var(--mut);margin-top:2px}

/* ── TOAST ───────────────────────────────────────────────── */
.toast{position:fixed;top:calc(var(--top) + var(--sit) + 8px);left:50%;transform:translateX(-50%) translateY(-16px);
  background:var(--sur);border:1px solid var(--bdr);color:var(--txt);padding:9px 18px;border-radius:22px;
  font-size:.83rem;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s;
  z-index:100;pointer-events:none;max-width:88%;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── EMPTY ───────────────────────────────────────────────── */
.empty{text-align:center;color:var(--mut);font-size:.83rem;padding:26px 0}

input[type="range"]{width:100%;accent-color:var(--acc);height:4px}

/* ── HELPER ──────────────────────────────────────────────── */
.hidden{display:none!important}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (768px+)
   ════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  #app { max-width: 760px; margin: 0 auto; }

  .stats-grid { grid-template-columns: repeat(4,1fr); gap: 10px; }
  .stat-box { padding: 14px 8px; }
  .sv { font-size: 1.7rem; }
  .sl { font-size: .63rem; }

  .gtime { font-size: 2.6rem; letter-spacing: 3px; }
  .gname { font-size: 1.15rem; }

  .ic { padding: 13px 16px; border-radius: 14px; }
  .iname { font-size: .95rem; }

  .pring { width: 190px; height: 190px; }
  .pring svg { width: 190px; height: 190px; }
  .ptm { font-size: 2.5rem; }

  /* Modal centrado en tablet */
  .mover { align-items: center; justify-content: center; }
  .msheet {
    border-radius: 20px;
    max-width: 500px;
    max-height: 85vh;
    padding: 24px;
    animation: fadeIn .22s ease;
  }

  /* Auth card más ancho en tablet */
  .auth-card { max-width: 440px; padding: 36px 32px; }

  /* FAB más lejos del borde */
  #fab { right: 24px; bottom: calc(var(--nav) + var(--sib) + 20px); width: 56px; height: 56px; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — DESKTOP (1024px+)
   ════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body { overflow: hidden; }

  /* Layout horizontal */
  #app {
    flex-direction: row;
    max-width: none;
    height: 100vh;
    margin: 0;
  }

  /* Sidebar visible */
  #sidebar { display: flex; }

  /* Main wrap */
  #mainWrap { flex: 1; overflow: hidden; }

  /* Ocultar bottom nav, mostrar sidebar nav */
  #bottomNav { display: none; }

  /* FAB sobre el contenido, esquina inferior derecha */
  #fab {
    bottom: 24px;
    right: 24px;
    width: 54px;
    height: 54px;
  }

  /* Pages sin padding inferior de nav */
  .page {
    padding: 20px 24px 24px;
  }

  /* Top bar ajustado */
  #topBar {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Dashboard: 2 columnas */
  #pDash {
    display: grid !important;
    grid-template-columns: 1fr 380px;
    align-content: start;
    column-gap: 20px;
  }
  .dash-col-left  { display: contents; }
  .dash-col-right { display: flex; flex-direction: column; gap: 14px; }

  /* Poner items del dashboard en columna correcta */
  #pDash .greet     { grid-column: 1; }
  #pDash .nperm     { grid-column: 1; }
  #pDash .stats-grid{ grid-column: 1; }
  #pDash #todayWrap { grid-column: 1; }
  #pDash #rightCol  { grid-column: 2; grid-row: 1 / 10; display: flex; flex-direction: column; gap: 14px; }

  /* Bottom sheet centrado como diálogo */
  .mover { align-items: center; justify-content: center; }
  .msheet {
    border-radius: 20px;
    max-width: 560px;
    max-height: 80vh;
    padding: 28px;
    animation: fadeIn .2s ease;
  }

  /* Stats más grandes */
  .stats-grid { gap: 12px; }
  .sv { font-size: 1.8rem; }

  /* Auth centrada */
  .auth-card { max-width: 420px; }

  /* Toast debajo del top bar */
  .toast { top: calc(var(--top) + var(--sit) + 12px); }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — WIDE DESKTOP (1280px+)
   ════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  #pDash { grid-template-columns: 1fr 420px; }
  .page { padding: 24px 32px 28px; }

  /* Pomodoro más grande */
  .pring { width: 200px; height: 200px; }
  .pring svg { width: 200px; height: 200px; }
}