/* ══════════════ AuDHD OS v7 — app.css ══════════════ */

/* ── KEYFRAMES ─────────────────────────────────────── */
@keyframes fadeUp   {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown {from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn   {from{opacity:0}to{opacity:1}}
@keyframes slideR   {from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn  {from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes bounce   {0%,100%{transform:translateY(0)}45%{transform:translateY(-6px)}70%{transform:translateY(-2px)}}
@keyframes spin     {to{transform:rotate(360deg)}}
@keyframes shimmer  {from{background-position:-200% center}to{background-position:200% center}}
@keyframes urgPulse {0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 var(--urg)}50%{opacity:.8;transform:scale(1.04);box-shadow:0 0 0 8px rgba(240,101,101,0)}}
@keyframes modePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.6)}}
@keyframes starFloat{0%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}100%{opacity:0;transform:translateY(-120px) scale(0.3) rotate(180deg)}}
@keyframes freezeFall{from{transform:translateY(-20px) rotate(0deg);opacity:0}to{transform:translateY(110vh) rotate(360deg);opacity:.6}}
@keyframes timerWarn{0%,100%{background:var(--s3)}50%{background:rgba(240,101,101,.2)}}
@keyframes adhdGlow {0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
@keyframes confetti {from{transform:translateY(0) rotate(0deg);opacity:1}to{transform:translateY(120vh) rotate(720deg);opacity:0}}
@keyframes pulse    {0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ── LAYOUT ─────────────────────────────────────────── */
#app {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "topbar" "main";
  height:100vh; overflow:hidden;
  transition: none;
}
/* Sidebar is always a fixed drawer, never part of grid */

/* ── TOPBAR ─────────────────────────────────────────── */
.topbar {
  grid-area:topbar;
  display:flex; align-items:center; gap:8px;
  padding:0 16px;
  background:var(--s1); border-bottom:1px solid var(--border);
  z-index:50; position:relative;
  animation:fadeDown .3s ease both;
  transition:background var(--ease-s);
}
.tb-l { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.tb-r { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.tb-date { font-family:var(--ff-m); font-size:.68rem; color:var(--tx3); text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }

/* Modo pill */
.mpill { display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:99px; font-size:.74rem; font-weight:500; border:1px solid transparent; transition:all var(--ease); cursor:pointer; user-select:none; }
.mpill.low  { background:var(--low-bg); color:var(--low); border-color:var(--low-ring); }
.mpill.op   { background:var(--op-bg);  color:var(--op);  border-color:var(--op-ring); }
.mpill.deep { background:var(--dp-bg);  color:var(--dp);  border-color:var(--dp-ring); }
.mdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.mpill.low  .mdot { background:var(--low); box-shadow:0 0 8px var(--low); animation:modePulse 2.2s ease-in-out infinite; }
.mpill.op   .mdot { background:var(--op);  box-shadow:0 0 8px var(--op);  animation:modePulse 2.2s ease-in-out infinite .3s; }
.mpill.deep .mdot { background:var(--dp);  box-shadow:0 0 8px var(--dp);  animation:modePulse 2.2s ease-in-out infinite .6s; }

/* Brain toggle */
.brain-toggle { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; font-size:.74rem; font-weight:600; border:1.5px solid var(--border2); transition:all var(--ease); cursor:pointer; background:var(--s2); color:var(--tx2); white-space:nowrap; }
.brain-toggle:hover { background:var(--s3); color:var(--tx); transform:translateY(-1px); }
.brain-toggle.autism-active { background:var(--dp-bg); color:var(--dp); border-color:var(--dp-ring); }
.brain-toggle.adhd-active   { background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#b57cfc); background-size:200% auto; color:white; border:none; animation:shimmer 2s linear infinite; text-shadow:0 1px 3px rgba(0,0,0,.3); }

/* Icon button */
.ibtn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--tx2); font-size:.9rem; transition:all var(--ease); flex-shrink:0; }
.ibtn:hover { background:var(--s3); color:var(--tx); transform:scale(1.08); }

/* Hamburger menu button — fixed top-right */
.hamburger-menu { position:fixed; top:16px; right:16px; width:44px; height:44px; display:none; align-items:center; justify-content:center; border-radius:10px; background:var(--s2); color:var(--tx); font-size:1.4rem; z-index:500; cursor:pointer; transition:all var(--ease); box-shadow:0 4px 16px rgba(0,0,0,.25); border:1px solid var(--border2); }
.hamburger-menu:hover { background:var(--s3); transform:scale(1.1); }
.hamburger-menu.close::before { content:'✕'; position:absolute; font-size:1.2rem; }
.hamburger-menu.close { font-size:0; }

@media(max-width:768px) {
  .hamburger-menu { display:flex; }
}

/* Timer pill */
.tpill { display:none; align-items:center; gap:7px; padding:4px 11px; border-radius:99px; background:var(--s3); border:1px solid var(--border2); font-family:var(--ff-m); font-size:.8rem; color:var(--tx); }
.tpill.on       { display:inline-flex; animation:fadeIn .2s ease both; }
.tpill.warn     { background:rgba(245,197,67,.15); border-color:var(--op-ring); color:var(--op); animation:timerWarn 1s ease-in-out infinite; }
.tpill.critical { background:rgba(240,101,101,.15); border-color:var(--urg-ring); color:var(--urg); animation:timerWarn .4s ease-in-out infinite; }
.tstop { color:var(--tx3); font-size:.7rem; cursor:pointer; transition:var(--ease); }
.tstop:hover { color:var(--urg); }

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar {
  position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w);
  background:var(--s1); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  height:100vh; overflow:hidden;
  z-index:400; transform:translateX(-100%);
  transition:transform var(--ease-s), background var(--ease-s);
  animation:none;
}
.sidebar.open {
  transform:translateX(0); box-shadow:0 12px 48px rgba(0,0,0,.6);
}

.sb-logo { padding:13px 13px 11px; border-bottom:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; gap:10px; min-height:var(--topbar-h); }
.sb-icon { width:30px; height:30px; border-radius:7px; background:var(--s3); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; transition:var(--ease); }
.sb-icon:hover { transform:rotate(10deg) scale(1.1); }
.sb-name { font-size:.875rem; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
.sb-sub  { font-size:.62rem; color:var(--tx3); font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }

.sb-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:10px 0 16px; }
.nav-sec  { padding:0 8px 10px; }
.nav-lbl  { font-size:.62rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.1em; color:var(--tx3); padding:10px 8px 4px; display:block; white-space:nowrap; overflow:hidden; }

.nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; font-size:.84rem; color:var(--tx2); cursor:pointer; transition:all var(--ease); user-select:none; animation:slideR .28s ease both; white-space:nowrap; overflow:hidden; }
.nav-item:hover  { background:var(--s2); color:var(--tx); padding-left:14px; }
.nav-item.active { background:var(--s3); color:var(--tx); }
.nav-icon { width:18px; text-align:center; font-size:.9rem; flex-shrink:0; }
.nav-badge { margin-left:auto; font-size:.62rem; font-family:var(--ff-m); background:var(--s4); padding:1px 6px; border-radius:99px; color:var(--tx3); }
.nav-item.active .nav-badge { background:var(--s2); }

.pnav { display:flex; align-items:center; gap:7px; padding:5px 10px; border-radius:7px; font-size:.8rem; color:var(--tx2); cursor:pointer; transition:all var(--ease); animation:slideR .25s ease both; white-space:nowrap; overflow:hidden; }
.pnav:hover { background:var(--s2); color:var(--tx); padding-left:14px; }
.pdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* Energy widget */
.energy-w { margin:0 8px 10px; padding:11px; background:var(--s2); border:1px solid var(--border); border-radius:10px; flex-shrink:0; animation:fadeUp .3s ease both; }
.energy-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.energy-lbl { font-size:.62rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.08em; color:var(--tx3); }
.energy-val { font-size:.7rem; font-family:var(--ff-m); color:var(--tx2); }
.energy-bar { height:4px; background:var(--s4); border-radius:99px; overflow:hidden; }
.energy-fill { height:100%; border-radius:99px; transition:width var(--ease-s), background var(--ease-s); }
input[type=range].eslider { width:100%; height:3px; cursor:pointer; margin-top:8px; -webkit-appearance:none; appearance:none; background:transparent; }
input[type=range].eslider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--tx2); border:2px solid var(--s1); cursor:pointer; transition:var(--ease); }
input[type=range].eslider::-webkit-slider-thumb:hover { background:var(--tx); transform:scale(1.3); }

/* Mode selector */
.mode-sel { margin:0 8px 10px; padding:10px; background:var(--s2); border:1px solid var(--border); border-radius:10px; flex-shrink:0; }
.mode-sel-lbl { font-size:.62rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.09em; color:var(--tx3); margin-bottom:7px; display:block; }
.msb { display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:7px; font-size:.8rem; color:var(--tx2); border:1px solid transparent; transition:all var(--ease); text-align:left; width:100%; margin-bottom:5px; }
.msb:last-child { margin-bottom:0; }
.msb:hover { background:var(--s3); color:var(--tx); transform:translateX(3px); }
.msb.active.low  { background:var(--low-bg); color:var(--low); border-color:var(--low-ring); }
.msb.active.op   { background:var(--op-bg);  color:var(--op);  border-color:var(--op-ring); }
.msb.active.deep { background:var(--dp-bg);  color:var(--dp);  border-color:var(--dp-ring); }
.msdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.msb.low  .msdot { background:var(--low); } .msb.op .msdot { background:var(--op); } .msb.deep .msdot { background:var(--dp); }

/* ── MAIN ───────────────────────────────────────────── */
.main  { grid-area:main; overflow-y:auto; overflow-x:hidden; background:transparent; padding-bottom:var(--bottom-nav); }
.inner { max-width:860px; margin:0 auto; padding:28px 24px 80px; }

/* ── PSYCHEDELIC CANVAS ─────────────────────────────── */
#psycho-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .8s ease; }
body.adhd-mode #psycho-canvas { opacity:1; }
body.adhd-mode .tcard, body.adhd-mode .pcard, body.adhd-mode .sblock { background:rgba(255,255,255,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

/* ── FREEZE CANVAS ──────────────────────────────────── */
#freeze-canvas { position:fixed; inset:0; z-index:150; pointer-events:none; opacity:0; transition:opacity .6s ease; }
#freeze-canvas.active { opacity:1; }
.freeze-active .main   { filter:saturate(0.15) hue-rotate(190deg); transition:filter .8s; }
.freeze-active .topbar { background:#1a2a3a !important; }
.freeze-active .sidebar { background:#0e1c2a !important; }

/* ── LOFI BAR ───────────────────────────────────────── */
.lofi-bar { 
  position:fixed; bottom:calc(var(--bottom-nav) + 12px); left:50%; transform:translateX(-50%); 
  display:none; align-items:center; gap:8px; 
  background:rgba(30,30,34,.92); backdrop-filter:blur(16px); 
  border:1px solid rgba(255,255,255,.15); border-radius:99px; 
  padding:8px 16px; z-index:90; 
  font-size:.8rem; color:var(--tx); 
  box-shadow:0 8px 32px rgba(0,0,0,.4); 
  animation:fadeUp .4s ease both; 
}
.lofi-bar.on { display:flex; }
.lofi-dot  { width:8px; height:8px; border-radius:50%; background:#f06565; animation:modePulse 1.5s ease-in-out infinite; }
.lofi-lbl  { font-family:var(--ff-m); letter-spacing:.04em; white-space:nowrap; font-size:.75rem; }
.lofi-btn  { cursor:pointer; opacity:.65; padding:4px 8px; border-radius:6px; transition:var(--ease); font-size:.85rem; }
.lofi-btn:hover { opacity:1; background:rgba(255,255,255,.12); }
.lofi-vol  { width:50px; accent-color:var(--dp); cursor:pointer; height:4px; }
.lofi-stop { opacity:.55; color:var(--urg); }
.lofi-stop:hover { color:var(--urg); opacity:1; }

/* ── PAGE HEADER ────────────────────────────────────── */
.ph { margin-bottom:24px; animation:fadeUp .3s ease both; }
.ph-title { font-family:var(--ff-h); font-size:1.75rem; font-weight:600; letter-spacing:-.03em; line-height:1.15; }
.ph-sub   { font-size:.875rem; color:var(--tx2); margin-top:4px; line-height:1.5; }

/* ── CHECK-IN ───────────────────────────────────────── */
.checkin { background:var(--s1); border:1px solid var(--border); border-radius:20px; padding:20px; margin-bottom:20px; animation:scaleIn .35s ease both; }
.checkin-ttl { font-size:.7rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.08em; color:var(--tx3); margin-bottom:14px; }
.checkin-opts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.copt { padding:16px 10px; border-radius:12px; border:1px solid var(--border); background:var(--s2); text-align:center; cursor:pointer; transition:all .22s ease; animation:fadeUp .3s ease both; }
.copt:nth-child(1){animation-delay:.04s} .copt:nth-child(2){animation-delay:.09s} .copt:nth-child(3){animation-delay:.14s}
.copt:hover { border-color:var(--border2); background:var(--s3); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.copt.sel.low  { background:var(--low-bg); border-color:var(--low-ring); transform:translateY(-3px); }
.copt.sel.op   { background:var(--op-bg);  border-color:var(--op-ring);  transform:translateY(-3px); }
.copt.sel.deep { background:var(--dp-bg);  border-color:var(--dp-ring);  transform:translateY(-3px); }
.copt-emoji { font-size:1.5rem; margin-bottom:7px; transition:transform .2s; }
.copt:hover .copt-emoji { transform:scale(1.15) rotate(5deg); }
.copt-name { font-size:.8rem; font-weight:500; color:var(--tx); margin-bottom:2px; }
.copt-desc { font-size:.7rem; color:var(--tx3); line-height:1.4; }
.copt.sel.low .copt-name { color:var(--low); } .copt.sel.op .copt-name { color:var(--op); } .copt.sel.deep .copt-name { color:var(--dp); }

/* ── FREEZE BANNER ──────────────────────────────────── */
.freeze { background:var(--frz-bg); border:1px solid var(--frz-ring); border-radius:14px; padding:16px 20px; margin-bottom:20px; display:none; }
.freeze.open { display:block; animation:scaleIn .25s ease both; }
.frz-hd { font-size:.875rem; font-weight:600; color:var(--frz); margin-bottom:6px; display:flex; align-items:center; gap:7px; }
.frz-p  { font-size:.8rem; color:var(--tx2); margin-bottom:12px; }
.frz-grid { display:flex; flex-wrap:wrap; gap:7px; }
.fopt { padding:7px 14px; border-radius:8px; background:var(--s2); border:1px solid var(--border); font-size:.82rem; cursor:pointer; transition:all .18s; animation:fadeUp .2s ease both; font-weight:500; }
.fopt:hover { background:var(--s3); border-color:var(--border2); transform:translateY(-2px); }
.fopt.music-btn { background:var(--dp-bg); border-color:var(--dp-ring); color:var(--dp); }
.fopt.music-btn:hover { background:var(--dp); color:white; }

/* ── SECCIÓN ────────────────────────────────────────── */
.section { margin-bottom:24px; }
.sec-hd  { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sec-title { font-family:var(--ff-h); font-size:1.05rem; font-weight:500; letter-spacing:-.02em; }
.sec-meta  { font-size:.72rem; color:var(--tx3); font-family:var(--ff-m); }

/* ── FILTROS ────────────────────────────────────────── */
.mfilter { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; animation:fadeUp .25s ease both; }
.mfb { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:99px; font-size:.7rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--border); color:var(--tx3); cursor:pointer; transition:all .18s; }
.mfb:hover { border-color:var(--border2); color:var(--tx2); transform:translateY(-1px); }
.mfb.on.all  { background:var(--s3);    color:var(--tx);  border-color:var(--border2); }
.mfb.on.low  { background:var(--low-bg); color:var(--low); border-color:var(--low-ring); }
.mfb.on.op   { background:var(--op-bg);  color:var(--op);  border-color:var(--op-ring); }
.mfb.on.deep { background:var(--dp-bg);  color:var(--dp);  border-color:var(--dp-ring); }

/* ── BTN ADD ────────────────────────────────────────── */
.btn-add { display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border-radius:8px; font-size:.82rem; font-weight:500; color:var(--tx2); background:var(--s2); border:1px solid var(--border); cursor:pointer; transition:all .18s; }
.btn-add:hover { background:var(--s3); color:var(--tx); border-color:var(--border2); transform:translateY(-1px); }

/* ── TASK CARD ──────────────────────────────────────── */
.task-list { display:flex; flex-direction:column; gap:7px; }

.tcard {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px;
  background:var(--s1); border:1px solid var(--border);
  border-radius:12px; cursor:pointer;
  transition:all .2s; position:relative; overflow:hidden;
  animation:fadeUp .28s ease both;
}
.tcard::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; transition:width .2s; }
.tcard.low ::before { background:var(--low); } .tcard.op::before { background:var(--op); } .tcard.deep::before { background:var(--dp); }
.tcard:hover { background:var(--s2); border-color:var(--border2); transform:translateX(3px); box-shadow:var(--shadow); }
.tcard:hover::before { width:5px; }
.tcard.done { opacity:.35; }
.tcard.done .tc-title { text-decoration:line-through; }
.tcard.urgent { animation:fadeUp .28s ease both, urgPulse 2.2s ease-in-out infinite; }
.tcard.urgent::before { background:var(--urg) !important; }
.tcard.recurring::after { content:'🔄'; position:absolute; top:8px; right:8px; font-size:.75rem; opacity:.5; }

.tcheck { width:20px; height:20px; border-radius:50%; border:2px solid var(--tx3); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; transition:all .2s; cursor:pointer; }
.tcheck:hover { border-color:var(--low); transform:scale(1.15); }
.tcard.done .tcheck { background:var(--tx3); border-color:var(--tx3); }
.chkmark { font-size:.6rem; display:none; color:white; }
.tcard.done .chkmark { display:block; }

.tc-body  { flex:1; min-width:0; }
.tc-title { font-size:.875rem; font-weight:500; color:var(--tx); line-height:1.4; margin-bottom:5px; }
.tc-meta  { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }

.tag { display:inline-flex; align-items:center; gap:2px; font-size:.65rem; font-family:var(--ff-m); padding:2px 8px; border-radius:99px; letter-spacing:.04em; text-transform:uppercase; }
.tag-low  { background:var(--low-bg); color:var(--low); }
.tag-op   { background:var(--op-bg);  color:var(--op);  }
.tag-deep { background:var(--dp-bg);  color:var(--dp);  }
.tag-urg  { background:var(--urg-bg); color:var(--urg); animation:urgPulse 2s ease-in-out infinite; }
.tag-proj { background:var(--s3);     color:var(--tx2); }
.tag-date { background:var(--s3);     color:var(--tx3); }
.tag-rec  { background:var(--s3);     color:var(--tx2); }

.tc-acts { display:flex; align-items:center; gap:3px; flex-shrink:0; opacity:0; transition:opacity .18s; }
.tcard:hover .tc-acts { opacity:1; }
.ta-btn { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--tx3); transition:all .18s; }
.ta-btn:hover { background:var(--s3); color:var(--tx); transform:scale(1.1); }
.ta-btn.focus-b:hover { color:var(--op); }
.ta-btn.del-b:hover   { color:var(--urg); background:var(--urg-bg); }

/* ── STAR PARTICLES ─────────────────────────────────── */
.star-particle { position:fixed; pointer-events:none; z-index:9990; font-size:1.2rem; animation:starFloat 1.4s ease-out both; }

/* ── HORARIO ────────────────────────────────────────── */
.sched-list { display:flex; flex-direction:column; gap:7px; }
.sblock { display:flex; gap:14px; padding:12px 14px; background:var(--s1); border:1px solid var(--border); border-radius:12px; position:relative; overflow:hidden; animation:fadeUp .28s ease both; transition:all .18s; }
.sblock::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; transition:width .2s; }
.sblock.low::before{background:var(--low)} .sblock.op::before{background:var(--op)} .sblock.deep::before{background:var(--dp)} .sblock.rest::before{background:var(--rest)}
.sblock.now { border-color:var(--border2); background:var(--s2); }
.sblock:hover { background:var(--s2); transform:translateX(2px); }
.sb-time { font-family:var(--ff-m); font-size:.7rem; color:var(--tx3); min-width:85px; padding-top:2px; flex-shrink:0; }
.sb-body { flex:1; min-width:0; }
.sb-label { font-size:.875rem; font-weight:500; color:var(--tx); margin-bottom:3px; }
.sb-notes { font-size:.78rem; color:var(--tx2); line-height:1.45; }
.sb-tag { display:inline-flex; align-items:center; gap:3px; font-size:.6rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:99px; margin-top:5px; }
.sb-tag.low{background:var(--low-bg);color:var(--low)} .sb-tag.op{background:var(--op-bg);color:var(--op)} .sb-tag.deep{background:var(--dp-bg);color:var(--dp)} .sb-tag.rest{background:var(--rest-bg);color:var(--rest)}
.sb-tbtn { flex-shrink:0; align-self:flex-start; width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--tx3); transition:all .18s; }
.sb-tbtn:hover { background:var(--s3); color:var(--op); transform:scale(1.1); }

/* ── FOCUS CARD ─────────────────────────────────────── */
.focus-card { background:var(--s1); border:1px solid var(--border2); border-radius:22px; padding:40px; text-align:center; position:relative; overflow:hidden; animation:scaleIn .35s ease both; }
.focus-card::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,var(--dp-bg) 0%,transparent 68%); pointer-events:none; }
.fc-mode  { margin-bottom:20px; animation:fadeDown .3s ease both .08s; }
.fc-title { font-family:var(--ff-h); font-size:1.55rem; font-weight:500; letter-spacing:-.03em; line-height:1.25; color:var(--tx); margin-bottom:8px; animation:fadeUp .3s ease both .12s; }
.fc-proj  { font-size:.8rem; color:var(--tx3); margin-bottom:20px; animation:fadeUp .3s ease both .16s; }
.fc-notes { font-size:.8rem; color:var(--tx2); margin-bottom:20px; line-height:1.6; animation:fadeUp .3s ease both .18s; }
.fc-timer { font-family:var(--ff-m); font-size:3.2rem; font-weight:400; color:var(--tx); letter-spacing:.06em; margin-bottom:20px; line-height:1; transition:color .4s; animation:fadeUp .3s ease both .2s; }
.fc-timer.running { color:var(--op); } .fc-timer.warn { color:var(--urg); animation:urgPulse 1s ease-in-out infinite; } .fc-timer.done { color:var(--low); animation:bounce .6s ease 3; }
.fc-acts { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; animation:fadeUp .3s ease both .25s; }
.fc-btn  { padding:10px 20px; border-radius:10px; font-size:.875rem; font-weight:500; border:1px solid var(--border2); background:var(--s3); color:var(--tx); cursor:pointer; transition:all .18s; }
.fc-btn:hover { background:var(--s4); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2); }
.fc-btn.prime { background:var(--tx); color:var(--bg); border-color:transparent; } .fc-btn.prime:hover { opacity:.85; }
.fc-btn.done-b { background:var(--low-bg); color:var(--low); border-color:var(--low-ring); } .fc-btn.done-b:hover { background:var(--low); color:white; }
.fc-nav { display:flex; justify-content:center; gap:10px; margin-top:16px; align-items:center; animation:fadeUp .3s ease both .3s; }
.fc-nav-btn { font-size:.8rem; color:var(--tx3); cursor:pointer; transition:all .18s; padding:4px 10px; border-radius:7px; }
.fc-nav-btn:hover { background:var(--s3); color:var(--tx); }
.fc-nav-cnt { font-size:.72rem; color:var(--tx3); font-family:var(--ff-m); padding:4px 8px; }

/* ── PROJECTS ───────────────────────────────────────── */
.proj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:14px; }
.pcard { background:var(--s1); border:1px solid var(--border); border-radius:18px; padding:20px; cursor:pointer; transition:all .22s; position:relative; overflow:hidden; animation:fadeUp .3s ease both; }
.pcard:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:var(--shadow); }
/* Delete button on project */
.pcard-del { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--tx3); opacity:0; transition:all .18s; }
.pcard:hover .pcard-del { opacity:1; }
.pcard-del:hover { background:var(--urg-bg); color:var(--urg); transform:scale(1.1); }
.pcard-emoji-wrap { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pcard-emoji { font-size:1.7rem; transition:transform .3s; }
.pcard:hover .pcard-emoji { transform:scale(1.2) rotate(5deg); }
.pcard-name { font-family:var(--ff-h); font-size:1rem; font-weight:500; letter-spacing:-.02em; margin-bottom:4px; }
.pcard-desc { font-size:.8rem; color:var(--tx2); line-height:1.5; margin-bottom:14px; }
.prog-bg   { height:3px; background:var(--s4); border-radius:99px; overflow:hidden; margin-bottom:5px; }
.prog-fill { height:100%; border-radius:99px; transition:width .8s cubic-bezier(.4,0,.2,1); }
.prog-lbl  { font-size:.65rem; font-family:var(--ff-m); color:var(--tx3); }

/* ── BRAIN DUMP ─────────────────────────────────────── */
.bdump { background:var(--s1); border:1px solid var(--border); border-radius:18px; padding:20px; animation:scaleIn .3s ease both; }
.bdump-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.bdump-ttl { font-size:.7rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.08em; color:var(--tx3); }
.bdump-ta { width:100%; min-height:140px; resize:vertical; background:var(--s2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:.875rem; color:var(--tx); line-height:1.6; transition:all .2s; }
.bdump-ta:focus { border-color:var(--border2); background:var(--s3); }
.bdump-ta::placeholder { color:var(--tx3); }
.bdump-foot { display:flex; justify-content:flex-end; gap:7px; margin-top:10px; }
.dbtn { padding:6px 14px; border-radius:7px; font-size:.8rem; cursor:pointer; transition:all .18s; border:1px solid var(--border); color:var(--tx2); }
.dbtn:hover { background:var(--s3); color:var(--tx); transform:translateY(-1px); }
.dbtn.save { background:var(--tx); color:var(--bg); border-color:transparent; } .dbtn.save:hover { opacity:.84; }

/* ── SEMANA ─────────────────────────────────────────── */
.week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-bottom:20px; animation:fadeUp .3s ease both; }
.wday { background:var(--s1); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:all .18s; }
.wday:hover { border-color:var(--border2); transform:translateY(-2px); }
.wday.today { border-color:var(--op-ring); }
.wday-hd { padding:7px 8px; border-bottom:1px solid var(--border); font-size:.62rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.07em; color:var(--tx3); }
.wday.today .wday-hd { color:var(--op); }
.wday-num { font-size:.9rem; font-weight:600; color:var(--tx); font-family:var(--ff-b); display:block; margin-top:1px; }
.wday.today .wday-num { color:var(--op); }
.wblocks { padding:7px; display:flex; flex-direction:column; gap:2px; min-height:60px; }
.wchip { height:5px; border-radius:99px; width:100%; animation:fadeIn .3s ease both; }
.wchip.low{background:var(--low-bg);border:1px solid var(--low-ring)} .wchip.op{background:var(--op-bg);border:1px solid var(--op-ring)} .wchip.deep{background:var(--dp-bg);border:1px solid var(--dp-ring)} .wchip.rest{background:var(--rest-bg);border:1px solid var(--rest)}

/* ── EMPTY ──────────────────────────────────────────── */
.empty { text-align:center; padding:52px 20px; color:var(--tx3); animation:fadeUp .3s ease both; }
.empty-icon { font-size:2.2rem; margin-bottom:12px; opacity:.4; animation:bounce 2.5s ease-in-out infinite; }
.empty-txt  { font-size:.875rem; line-height:1.6; }
.empty-cta  { margin-top:16px; }
.done-sep   { font-size:.65rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.09em; color:var(--tx3); padding:14px 0 6px; }

/* ── MODAL ──────────────────────────────────────────── */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:200; display:flex; align-items:flex-end; justify-content:center; padding:14px; opacity:0; pointer-events:none; transition:opacity .2s; }
.overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--s1); border:1px solid var(--border2); border-radius:22px 22px 16px 16px; width:100%; max-width:540px; padding:28px; max-height:92vh; overflow-y:auto; transform:translateY(24px); transition:transform .22s ease; }
.overlay.open .modal { transform:translateY(0); animation:fadeUp .22s ease both; }
.modal-title { font-family:var(--ff-h); font-size:1.15rem; font-weight:500; letter-spacing:-.02em; margin-bottom:20px; }
.field { margin-bottom:14px; }
.flbl { display:block; font-size:.65rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.09em; color:var(--tx3); margin-bottom:6px; }
.finput { width:100%; background:var(--s2); border:1px solid var(--border); border-radius:10px; padding:9px 12px; font-size:.875rem; color:var(--tx); transition:all .2s; }
.finput:focus { border-color:var(--border2); background:var(--s3); }
.finput::placeholder { color:var(--tx3); }
textarea.finput { resize:vertical; min-height:72px; line-height:1.6; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.chk-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
.chk-row input[type=checkbox] { width:17px; height:17px; cursor:pointer; accent-color:var(--op); }
.chk-row label { font-size:.875rem; cursor:pointer; color:var(--tx2); }

/* Mode picker */
.mode-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.mpick { padding:10px 8px; border-radius:10px; border:1px solid var(--border); background:var(--s2); text-align:center; cursor:pointer; transition:all .18s; font-size:.75rem; color:var(--tx2); }
.mpick:hover { border-color:var(--border2); background:var(--s3); transform:translateY(-2px); }
.mpick.sel.low  { background:var(--low-bg); color:var(--low); border-color:var(--low-ring); }
.mpick.sel.op   { background:var(--op-bg);  color:var(--op);  border-color:var(--op-ring);  }
.mpick.sel.deep { background:var(--dp-bg);  color:var(--dp);  border-color:var(--dp-ring);  }

/* ── EMOJI PICKER ───────────────────────────────────── */
.emoji-trigger { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; background:var(--s2); border:1px solid var(--border); cursor:pointer; transition:all .18s; }
.emoji-trigger:hover { border-color:var(--border2); background:var(--s3); }
.emoji-trigger-val { font-size:1.4rem; }
.emoji-trigger-hint { font-size:.75rem; color:var(--tx2); font-family:var(--ff-m); }
.emoji-picker { background:var(--s2); border:1px solid var(--border2); border-radius:14px; padding:14px; margin-top:8px; display:none; animation:fadeUp .2s ease both; max-height:220px; overflow-y:auto; }
.emoji-picker.open { display:block; }
.emoji-cat-lbl { font-size:.62rem; font-family:var(--ff-m); text-transform:uppercase; letter-spacing:.08em; color:var(--tx3); margin:8px 0 6px; display:block; }
.emoji-cat-lbl:first-child { margin-top:0; }
.emoji-grid { display:flex; flex-wrap:wrap; gap:3px; }
.emoji-opt { width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; transition:all .15s; }
.emoji-opt:hover { background:var(--s3); transform:scale(1.2); }
.emoji-opt.sel { background:var(--dp-bg); box-shadow:0 0 0 2px var(--dp-ring); }

/* Recurring options */
.rec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:6px; }
.rec-opt { padding:8px 6px; border-radius:8px; border:1px solid var(--border); background:var(--s2); text-align:center; cursor:pointer; transition:all .18s; font-size:.75rem; color:var(--tx2); }
.rec-opt:hover { border-color:var(--border2); background:var(--s3); }
.rec-opt.sel { background:var(--op-bg); color:var(--op); border-color:var(--op-ring); }

/* Color picker */
.clr-grid { display:flex; flex-wrap:wrap; gap:6px; }
.clr-sw { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:all .18s; }
.clr-sw:hover { transform:scale(1.18); }
.clr-sw.sel { border-color:white; transform:scale(1.12); }
body.adhd-mode .clr-sw.sel { border-color:#333; }

.btn-primary { width:100%; padding:12px 14px; background:var(--tx); color:var(--bg); border-radius:10px; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .18s; border:none; margin-top:10px; }
.btn-primary:hover { opacity:.84; transform:translateY(-1px); }
.btn-danger { width:100%; padding:10px 14px; background:var(--urg-bg); color:var(--urg); border-radius:10px; font-size:.82rem; cursor:pointer; transition:all .18s; border:1px solid var(--urg-ring); margin-top:6px; }
.btn-danger:hover { background:var(--urg); color:white; }

/* ── TOAST ──────────────────────────────────────────── */
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--s3); border:1px solid var(--border2); border-radius:99px; padding:9px 20px; font-size:.82rem; color:var(--tx); z-index:9999; pointer-events:none; animation:fadeUp .22s ease both; white-space:nowrap; box-shadow:0 8px 32px rgba(0,0,0,.35); }

/* ── CONFETTI ───────────────────────────────────────── */
.confetti-piece { position:fixed; z-index:9990; pointer-events:none; animation:confetti 2.5s ease-in both; }

/* ── BOTTOM NAV (mobile) ────────────────────────────── */
/* ── BOTTOM NAV ───────────────────────────────────── */
.bottom-nav { 
  display:block; 
  position:fixed; bottom:0; left:0; right:0; z-index:100; 
  background:var(--s1); border-top:2px solid var(--border2); 
  padding:0 4px; height:var(--bottom-nav); 
}
.bottom-nav-inner { display:flex; align-items:center; justify-content:space-around; height:100%; }
.bnav-btn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 12px; border-radius:10px; font-size:.63rem; font-weight:600; color:var(--tx3); cursor:pointer; transition:all .18s; min-width:48px; }
.bnav-btn .bicon { font-size:1.25rem; }
.bnav-btn.active { color:var(--op); }
.bnav-btn.active .bicon { transform:scale(1.15); }
.bnav-btn:hover { color:var(--tx); }

  #app { grid-template-columns:1fr !important; grid-template-areas:"topbar""main"; }
  .sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:350; backdrop-filter:blur(2px); transition:opacity var(--ease); }
  .sb-overlay.active { display:block; opacity:1; }
  .inner { padding:16px 14px calc(var(--bottom-nav) + 24px); }
  .checkin-opts { grid-template-columns:1fr; }
  .proj-grid  { grid-template-columns:1fr; }
  .week-grid  { grid-template-columns:repeat(4,1fr); }
  .grid2      { grid-template-columns:1fr; }
  .fc-timer   { font-size:2.4rem; }
  .lofi-bar   { bottom:calc(var(--bottom-nav) + 10px); font-size:.78rem; }
  .toast      { bottom:calc(var(--bottom-nav) + 14px); }
  /* Higher contrast on mobile */
  .tb-date    { display:none; }
  .ibtn       { width:38px; height:38px; font-size:1rem; }
  .mpill      { font-size:.78rem; padding:5px 12px; }
  .brain-toggle { font-size:.78rem; padding:6px 12px; }
  .tcard      { padding:13px 14px; }
  .tc-acts    { opacity:1; }  /* always visible on mobile */
  .ta-btn     { width:32px; height:32px; font-size:.85rem; }
  .btn-add    { padding:8px 16px; font-size:.84rem; }
  .rec-grid   { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 400px) {
  .fc-timer { font-size:2rem; }
  .week-grid { grid-template-columns:repeat(3,1fr); }
  .proj-grid { grid-template-columns:1fr; }
}