:root{
  --bg:#F7F4EE; --surface:#FFFFFF; --surface-2:#F0ECE3;
  --text:#28261F; --text-muted:#6E6A5E; --border:#E4DECF;
  --accent:#3D6B5C; --accent-strong:#2B4E43; --accent-soft:#E3EEE8;
  --danger:#B23A3A; --danger-soft:#FDF3F3; --danger-border:#F0D2D2;
  --shadow:0 20px 40px -28px rgba(40,38,31,0.35);
  --weekend-bg:#F1E6D6; --weekend-text:#8A6A3C;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17181A; --surface:#1F2124; --surface-2:#26282B;
    --text:#ECE9E2; --text-muted:#A19C90; --border:#34363A;
    --accent:#74C2A6; --accent-strong:#8FD3B9; --accent-soft:rgba(116,194,166,0.14);
    --danger:#E08585; --danger-soft:rgba(224,133,133,0.1); --danger-border:rgba(224,133,133,0.35);
    --shadow:0 20px 40px -22px rgba(0,0,0,0.55);
    --weekend-bg:#2E2A20; --weekend-text:#D9B77C;
  }
}
:root[data-theme="dark"]{
  --bg:#17181A; --surface:#1F2124; --surface-2:#26282B;
  --text:#ECE9E2; --text-muted:#A19C90; --border:#34363A;
  --accent:#74C2A6; --accent-strong:#8FD3B9; --accent-soft:rgba(116,194,166,0.14);
  --danger:#E08585; --danger-soft:rgba(224,133,133,0.1); --danger-border:rgba(224,133,133,0.35);
  --shadow:0 20px 40px -22px rgba(0,0,0,0.55);
  --weekend-bg:#2E2A20; --weekend-text:#D9B77C;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:var(--bg); color:var(--text); font-family:'Archivo',system-ui,sans-serif;
  line-height:1.5; -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font-family:inherit;}
.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;padding-bottom:70px;transition:max-width .15s;}
body.modo-rejilla .app{max-width:1080px;}
.modo-toggle{margin-left:4px;}

/* ---------- pantallas de arranque (setup / login / identidad) ---------- */
.gate{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 24px;gap:18px;}
.gate h1{font-family:'Fraunces',serif;font-size:1.8rem;margin:0;}
.gate p{color:var(--text-muted);margin:0 0 4px;}
.gate input{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 14px;font-size:1rem;color:var(--text);}
.gate .err{color:var(--danger);font-size:0.85rem;min-height:1.2em;}
.identity-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.identity-btn{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px;font-size:1.05rem;font-weight:600;text-align:left;color:var(--text);
}
.identity-btn:active{background:var(--accent-soft);border-color:var(--accent);}

/* ---------- barra superior ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;position:sticky;top:0;background:var(--bg);z-index:5;
  border-bottom:1px solid var(--border);
}
.topbar .week{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;}
.topbar .who{font-size:0.72rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em;}
.nav-btns{display:flex;gap:4px;align-items:center;}
.icon-btn{
  width:34px;height:34px;border-radius:10px;background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text);font-size:1.1rem;
}
.icon-btn:active{background:var(--accent-soft);}

/* ---------- lista semanal ---------- */
.week-body{flex:1;padding:14px 18px 24px;touch-action:pan-y;}
.day-group{margin-bottom:16px;}
.day-head{display:flex;align-items:baseline;gap:7px;margin-bottom:7px;padding:4px 8px;border-radius:8px;}
.day-head .dname{font-weight:700;font-size:0.92rem;}
.day-head .dnum{font-size:0.8rem;color:var(--text-muted);}
.day-head.today .dname{color:var(--accent-strong);}
.day-head.weekend{background:var(--weekend-bg);}
.day-head.weekend .dname{color:var(--weekend-text);}
.day-head .badge{
  font-family:'JetBrains Mono',monospace;font-size:0.6rem;text-transform:uppercase;letter-spacing:.05em;
  background:var(--accent-soft);color:var(--accent-strong);border-radius:5px;padding:2px 6px;
}
.day-empty{font-size:0.82rem;color:var(--text-muted);padding:2px 2px 4px;}
.act-card{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--border);border-radius:12px;padding:11px 12px;margin-bottom:7px;
  cursor:grab;touch-action:none;
}
.act-icon{font-size:1.05rem;line-height:1;margin-top:1px;flex:0 0 auto;}
.act-txt{flex:1;min-width:0;}
.act-txt .t{font-size:0.92rem;font-weight:600;}
.act-txt .m{font-size:0.78rem;opacity:0.75;margin-top:1px;}
.act-txt .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;}
.act-txt .chip{font-size:0.66rem;background:color-mix(in srgb, currentColor 14%, transparent);border-radius:5px;padding:2px 6px;}

/* ---------- vista rejilla (pantalla grande) ---------- */
.grid-wrap{flex:1;padding:16px 18px 24px;overflow-x:auto;}
.week-grid{
  display:grid;grid-template-columns:84px repeat(7,minmax(120px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;
}
.grid-head{background:var(--surface);padding:10px 8px;text-align:center;}
.grid-head.today{background:var(--accent-soft);}
.grid-head.weekend{background:var(--weekend-bg);}
.grid-head.weekend .dname{color:var(--weekend-text);}
.grid-head .dname{font-weight:700;font-size:0.82rem;}
.grid-head.today .dname{color:var(--accent-strong);}
.grid-head .dnum{font-size:0.7rem;color:var(--text-muted);}
.grid-row-label{
  background:var(--surface-2);display:flex;align-items:center;padding:10px 10px;
  font-family:'JetBrains Mono',monospace;font-size:0.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);
}
.grid-cell{background:var(--surface);min-height:52px;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:4px;}
.grid-cell.weekend{background:color-mix(in srgb, var(--weekend-bg) 40%, var(--surface));}
.grid-cell:hover{outline:2px dashed var(--border);outline-offset:-2px;}
.grid-cell.drop-target{outline:2px dashed var(--accent);outline-offset:-2px;}
.day-group.drop-target{background:var(--accent-soft);border-radius:12px;}
.grid-pill{
  border-radius:6px;padding:4px 7px;font-size:0.72rem;font-weight:600;
  line-height:1.25;cursor:grab;display:flex;align-items:center;gap:4px;touch-action:none;
}
.grid-pill .act-icon{font-size:0.85rem;}

/* ---------- arrastrar y soltar ---------- */
.act-card.dragging,.grid-pill.dragging{opacity:0.35;}
.drag-ghost{
  position:fixed;z-index:50;pointer-events:none;opacity:0.95;transform:rotate(-1.5deg);
  box-shadow:0 14px 30px rgba(0,0,0,0.25);border-radius:10px;
}

/* ---------- botón flotante ---------- */
.fab{
  position:fixed;right:24px;bottom:88px;width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:1.6rem;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);z-index:10;
}
.fab:active{transform:scale(0.94);}

/* ---------- barra inferior ---------- */
.bottombar{
  position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--border);
  display:flex;justify-content:center;gap:36px;padding:10px 0;
}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:0.66rem;color:var(--text-muted);}
.tab.on{color:var(--accent-strong);}
.tab .ic{font-size:1.15rem;}

/* ---------- modal / bottom sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,18,14,0.35);z-index:19;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;background:var(--surface);
  border-radius:20px 20px 0 0;padding:18px 20px calc(20px + env(safe-area-inset-bottom));
  z-index:20;max-height:88vh;overflow-y:auto;box-shadow:0 -10px 30px rgba(0,0,0,0.15);
}
.sheet h2{font-family:'Fraunces',serif;font-size:1.25rem;margin:0 0 4px;}
.sheet .sub{color:var(--text-muted);font-size:0.85rem;margin-bottom:16px;}
.field{margin-bottom:14px;}
.field label{display:block;font-family:'JetBrains Mono',monospace;font-size:0.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px;}
.field input[type=text],.field input[type=time],.field select{
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:0.92rem;color:var(--text);
}
.chip-row{display:flex;gap:7px;flex-wrap:wrap;}
.opt{
  font-size:0.82rem;border-radius:20px;padding:7px 13px;border:1px solid var(--border);background:var(--bg);color:var(--text);
}
.opt.on{color:#fff;border-color:transparent;background:var(--accent);}
.tag-input{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:8px 10px;}
.tag-input .tag{background:var(--surface-2);border-radius:6px;padding:3px 8px;font-size:0.78rem;display:flex;align-items:center;gap:5px;}
.tag-input .tag button{border:none;background:none;color:var(--text-muted);font-size:0.9rem;cursor:pointer;padding:0;}
.tag-input input{border:none;background:none;flex:1;min-width:80px;font-size:0.85rem;outline:none;color:var(--text);}
.btn{width:100%;text-align:center;border-radius:12px;padding:12px;font-size:0.95rem;font-weight:600;border:none;}
.btn.primary{background:var(--accent);color:#fff;}
.btn.ghost{background:transparent;color:var(--text-muted);}
.btn.danger{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger-border);}
.btn-row{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.recurrence-days{display:flex;gap:5px;flex-wrap:wrap;}
.recurrence-days .opt{padding:7px 10px;}
.divider-note{font-size:0.78rem;color:var(--text-muted);background:var(--surface-2);border-radius:9px;padding:9px 11px;margin:10px 0;}
.close-x{position:absolute;top:16px;right:16px;color:var(--text-muted);font-size:1.3rem;background:none;border:none;}

/* ---------- categorías ---------- */
.cat-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px 12px;margin-bottom:7px;}
.cat-row .left{display:flex;align-items:center;gap:10px;font-weight:600;font-size:0.9rem;}
.cat-row .left .ic{font-size:1.15rem;}
.cat-row .count{font-size:0.72rem;color:var(--text-muted);}
.cat-row .del{background:none;border:none;color:var(--text-muted);font-size:0.95rem;padding:4px;}
.add-cat-btn{display:flex;align-items:center;gap:8px;border:1.5px dashed var(--border);border-radius:11px;padding:11px;color:var(--text-muted);font-size:0.88rem;margin-top:6px;background:none;width:100%;text-align:left;}
.icon-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:4px;}
.icon-palette button{
  font-size:1.2rem;padding:8px 0;border-radius:9px;border:1.5px solid var(--border);background:var(--bg);
}
.icon-palette button.on{border-color:var(--accent);background:var(--accent-soft);}

/* ---------- ajustes: apariencia y franjas ---------- */
.color-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);}
.color-row:last-child{border-bottom:none;}
.color-row .label{font-size:0.88rem;font-weight:600;}
.color-row input[type=color]{width:38px;height:30px;border:none;border-radius:7px;background:none;padding:0;}

.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--text);color:var(--bg);
  padding:9px 16px;border-radius:20px;font-size:0.82rem;z-index:30;box-shadow:var(--shadow);
}
.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px;font-size:0.9rem;}