/* =====================================================================
   ROTA NÔMADE
   Um arquivo só, em seções, para o celular não esperar uma cascata de
   @import. O celular é um app de quatro abas; o computador é a mesa de
   planejamento. Os dois usam os mesmos tokens, editor e checklist.
   ===================================================================== */

/* ---------- 1. tokens ---------- */
@font-face{font-family:"Outfit"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(../fonts/outfit.woff2) format("woff2")}

:root{
  --ground:#F6F4FB; --surface:#FFFFFF; --surface-2:#EFECF6; --surface-3:#E4E0EF;
  --ink:#17152A; --ink-2:#4D4966; --ink-3:#6E6A85; --on-ink:#FFFFFF;
  --line:#DCD8E8; --line-2:#C9C4DA;
  --brand:#B9A6FF; --brand-ink:#1E1545; --brand-deep:#5B45C2;
  --fiscal:#FF9EDB; --fiscal-ink:#4F0D38;
  --good:#2E9E6B; --warn:#C2410C; --bad:#C02648; --done:#F08A3C;
  --warn-bg:#FFE6D6; --bad-bg:#FFE0E6;
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-pill:999px;
  --shadow:0 18px 40px -18px rgba(23,21,42,.35);
  --font:"Outfit",ui-rounded,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --tone:#9CD8FF; --tone-ink:#0B3550;
  --card-mix:100%;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#121019; --surface:#1C1928; --surface-2:#262234; --surface-3:#302B40;
    --ink:#F2F0FA; --ink-2:#B9B4D0; --ink-3:#8A85A3; --on-ink:#17152A;
    --line:#332E45; --line-2:#433D58;
    --brand-deep:#B9A6FF;
    --good:#4CC28B; --warn:#F59E5B; --bad:#FF6B88; --done:#F59E5B;
    --warn-bg:#3A2418; --bad-bg:#3A1823;
    --shadow:0 18px 40px -18px rgba(0,0,0,.8);
    --card-mix:74%;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#121019; --surface:#1C1928; --surface-2:#262234; --surface-3:#302B40;
  --ink:#F2F0FA; --ink-2:#B9B4D0; --ink-3:#8A85A3; --on-ink:#17152A;
  --line:#332E45; --line-2:#433D58; --brand-deep:#B9A6FF;
  --good:#4CC28B; --warn:#F59E5B; --bad:#FF6B88; --done:#F59E5B;
  --warn-bg:#3A2418; --bad-bg:#3A1823; --shadow:0 18px 40px -18px rgba(0,0,0,.8);
  --card-mix:74%; color-scheme:dark;
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--font);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent; font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.02em; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; text-align:inherit}
button:disabled{opacity:.35; cursor:default}
input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand-deep); outline-offset:2px; border-radius:8px}
[hidden]{display:none !important}
.ic{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
body.sheet-open{overflow:hidden}

/* cor de um card de parada: o pastel, mais fundo no modo escuro */
.toned{background:color-mix(in oklab, var(--tone) var(--card-mix), var(--ground)); color:var(--tone-ink)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 15px;
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface);
  font-weight:500; font-size:14px; white-space:nowrap}
.btn .ic{width:17px; height:17px}
.btn:hover{border-color:var(--line-2)}
.btn-dark{background:var(--ink); border-color:var(--ink); color:var(--on-ink)}
.btn-dark:hover{opacity:.9}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn-sm{padding:7px 11px; font-size:13px}
.btn-danger{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 35%,transparent); background:transparent}
.iconbtn{width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--surface); flex:none}
.iconbtn:hover{border-color:var(--line-2)}

.pill{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:500; padding:3px 9px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.55); color:inherit; white-space:nowrap; line-height:1.4}
.pill .ic{width:13px; height:13px}
.pill.soft{background:rgba(255,255,255,.3)}
.chip{font-size:11px; font-weight:500; padding:3px 9px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-2); white-space:nowrap}
.chip.s-confirmed{background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good)}
.chip.s-pending{background:var(--warn-bg); color:var(--warn)}
.chip.s-idea{background:transparent; border:1px dashed var(--line-2); color:var(--ink-3)}

.ava{--ava:#B9A6FF; width:40px; height:40px; border-radius:50%; background:var(--ava); color:#1E1545;
  display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; flex:none}
.ava.sm{width:26px; height:26px; font-size:11px}
.ava.lg{width:56px; height:56px; font-size:22px}
.ava.ted{background:#5B45C2; color:#fff}
.ava.ted .ic{width:14px; height:14px}

.empty{padding:22px 16px; text-align:center; color:var(--ink-3); font-size:14px; background:var(--surface); border-radius:var(--r-md)}
.empty-state{padding:20px 16px; text-align:center; color:var(--ink-3); font-size:14px}
.hintline{font-size:12.5px; color:var(--ink-3)}
.hintline.center{text-align:center; margin-top:8px}
.warnbox{background:var(--warn-bg); color:var(--warn); border-radius:var(--r-sm); padding:9px 12px; font-size:13px}
.footnote{font-size:12.5px; color:var(--ink-3); text-align:center; padding:6px 12px 0}

/* sincronização */
.sync{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); white-space:nowrap}
.sync i{width:8px; height:8px; border-radius:50%; background:var(--good)}
.sync.pending i{background:var(--done)} .sync.off i{background:var(--ink-3)} .sync.err i{background:var(--bad)}
.syncbtn{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--good); flex:none}
.syncbtn.pending{color:var(--done)} .syncbtn.off{color:var(--ink-3)} .syncbtn.err{color:var(--bad)}
.syncbtn.is-busy .ic{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* toast */
.toast{position:fixed; left:50%; bottom:calc(92px + var(--safe-b)); z-index:250; display:flex; align-items:center; gap:14px;
  background:#17152A; color:#fff; padding:11px 12px 11px 18px; border-radius:var(--r-md); font-size:14px;
  opacity:0; transform:translate(-50%,14px); pointer-events:none; transition:opacity .18s, transform .18s;
  max-width:calc(100% - 32px); box-shadow:var(--shadow)}
.toast:not(:has(button)){padding-right:18px}
.toast.on{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.toast button{color:#B9A6FF; font-weight:600; padding:4px 6px; border-radius:8px}
body.is-desktop .toast{bottom:28px}

/* ---------- 3. login ---------- */
#login{position:fixed; inset:0; z-index:300; background:var(--ground); display:flex; align-items:center; justify-content:center;
  padding:calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b))}
.login-box{width:min(360px,100%); display:flex; flex-direction:column; gap:12px}
.login-mark{width:64px; height:64px; border-radius:22px; background:var(--brand); color:var(--brand-ink); display:flex; align-items:center; justify-content:center; margin-bottom:6px}
.login-mark .ic{width:32px; height:32px}
.login-box h1{font-size:32px}
.login-box p{color:var(--ink-3); font-size:14.5px; margin-bottom:6px}
.login-box input{padding:14px 16px; font-size:16px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface)}
.login-box input:focus{outline:2px solid var(--brand); border-color:transparent}
.login-box .go{padding:15px; font-size:16px; margin-top:4px}
.login-err{color:var(--bad); font-size:13.5px; min-height:18px}

/* =====================================================================
   4. CELULAR
   ===================================================================== */

.view{padding:calc(14px + var(--safe-t)) 16px calc(110px + var(--safe-b)); max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:14px}

/* a barra lateral é só do computador */
.side{display:none}

/* barra de abas em pílula */
.m-tabs{position:fixed; z-index:40; left:50%; transform:translateX(-50%); bottom:calc(10px + var(--safe-b));
  width:min(380px, calc(100% - 32px)); height:62px; padding:7px; border-radius:var(--r-pill);
  background:#17152A; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow)}
.m-tab{position:relative; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s, color .2s}
.m-tab .ic{width:23px; height:23px}
.m-tab[aria-selected="true"]{background:#fff; color:#17152A; width:72px; border-radius:var(--r-pill)}
.m-tab .badge{position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#FF6B88; color:#fff; font-size:10.5px; font-weight:600; display:flex; align-items:center; justify-content:center; border:2px solid #17152A}
.m-tab[aria-selected="true"] .badge{border-color:#fff; right:12px}
@media (prefers-color-scheme: dark){
  .m-tabs{background:#F2F0FA}
  .m-tab{color:#17152A}
  .m-tab[aria-selected="true"]{background:#17152A; color:#fff}
  .m-tab .badge{border-color:#F2F0FA}
  .m-tab[aria-selected="true"] .badge{border-color:#17152A}
}

.m-fab{position:fixed; z-index:41; right:max(16px, calc(50% - 264px)); bottom:calc(86px + var(--safe-b));
  width:56px; height:56px; border-radius:50%; background:var(--brand); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow)}
.m-fab .ic{width:26px; height:26px; stroke-width:2.2}

/* topo do Início */
.m-top{display:flex; align-items:center; gap:12px}
.ava-btn{border-radius:50%}
.m-hi{flex:1; min-width:0; text-align:center}
.m-hi-n{font-weight:600; font-size:17px}
.m-hi-d{font-size:13px; color:var(--ink-3)}

/* títulos das outras abas */
.m-title{padding-top:6px}
.m-title h1{font-size:30px; line-height:1.1}
.m-title p{color:var(--ink-3); font-size:14px; margin-top:3px}
.cal-h{display:flex; align-items:center; gap:8px}
.cal-h h1{flex:1}
.cal-h h1 span{color:var(--ink-3); font-weight:500}

.m-sec-h{display:flex; align-items:baseline; gap:8px; margin-top:8px}
.m-sec-h h2{font-size:20px; flex:1}
.link{color:var(--brand-deep); font-weight:500; font-size:14px; padding:4px}
.m-month{font-size:13px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; margin-top:10px}

/* hero */
.hero{display:block; width:100%; background:var(--brand); color:var(--brand-ink); border-radius:var(--r-lg); padding:18px 18px 16px; position:relative; overflow:hidden; cursor:pointer}
.hero::after{content:""; position:absolute; right:-34px; top:-34px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); pointer-events:none}
.hero-k{font-size:13.5px; font-weight:500; opacity:.8}
.hero-n{font-size:44px; font-weight:600; line-height:1.05; letter-spacing:-.035em; margin-top:2px}
.hero-s{font-size:14px; margin-top:4px; max-width:28ch}
.hero-p{display:flex; margin-top:14px}
.hero-p .ava{border:2px solid var(--brand); margin-right:-8px}
.hero.alert .hero-n{color:#8A1C00}
@media (prefers-color-scheme: dark){ .hero{background:color-mix(in oklab,var(--brand) 82%,var(--ground))} }

/* semana em cápsulas */
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.wd{border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 0 9px; display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:12px; color:var(--ink-3)}
.wd i{width:5px; height:5px; border-radius:50%; margin-bottom:2px}
.wd i.dot{background:currentColor}
.wd b{font-size:16px; font-weight:500; color:var(--ink)}
.wd.past{opacity:.55}
.wd.on{background:var(--ink); border-color:var(--ink); color:color-mix(in srgb,var(--on-ink) 70%,transparent)}
.wd.on b{color:var(--on-ink)}

.m-alert{display:flex; align-items:center; gap:10px; width:100%; background:var(--bad-bg); color:var(--bad); border-radius:var(--r-md); padding:12px 14px; font-size:14px; font-weight:500}

/* grade "Sua rota" */
.grid2{display:grid; grid-template-columns:1.12fr 1fr; gap:10px}
.tcard{display:flex; flex-direction:column; align-items:flex-start; gap:2px; border-radius:var(--r-lg); padding:14px; min-height:104px;
  background:color-mix(in oklab, var(--tone) var(--card-mix), var(--ground)); color:var(--tone-ink); width:100%}
.tcard.big{grid-row:span 2; min-height:220px}
.tc-n{font-size:22px; font-weight:600; letter-spacing:-.02em; margin:10px 0 4px; line-height:1.15}
.tc-n.sm{font-size:17px; margin:8px 0 2px}
.tc-l{font-size:13px; line-height:1.5}
.tc-k{font-size:12px; opacity:.85}
.tc-prog{display:block; width:100%; height:6px; background:rgba(255,255,255,.5); border-radius:3px; margin-top:auto; overflow:hidden}
.tc-prog i{display:block; height:100%; background:var(--tone-ink); border-radius:3px}
.tc-f{font-size:12px; margin-top:5px}
.tcard.big .tc-prog{margin-top:14px}
.tcard.fiscal{--tone:var(--fiscal); --tone-ink:var(--fiscal-ink)}
.tcard.fiscal .tc-n{margin-top:2px}
.tcard.fiscal.alert{outline:2px solid var(--bad); outline-offset:-2px}
.tcard.add-card{background:transparent; border:2px dashed var(--line-2); color:var(--ink-3); justify-content:center; align-items:center; gap:6px}
.tcard.idea, .scard.idea{background:var(--surface); border:2px dashed var(--tone); color:var(--ink)}
.tcard.idea .pill, .scard.idea .pill{background:color-mix(in srgb,var(--tone) 30%,transparent)}
.tcard.idea .tc-prog, .scard.idea .tc-prog{background:var(--surface-2)}
.tcard.idea .tc-prog i, .scard.idea .tc-prog i{background:var(--tone)}

.empty-card{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:22px; border-radius:var(--r-lg);
  border:2px dashed var(--line-2); color:var(--ink-2); font-weight:500}

/* aba Rota */
.scard{display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; border-radius:var(--r-lg); padding:15px 16px;
  background:color-mix(in oklab, var(--tone) var(--card-mix), var(--ground)); color:var(--tone-ink)}
.sc-top{display:flex; gap:6px; flex-wrap:wrap}
.sc-n{font-size:22px; font-weight:600; letter-spacing:-.02em; margin-top:8px; line-height:1.15}
.sc-d{font-size:13.5px}
.sc-p{display:flex; align-items:center; gap:10px; width:100%; margin-top:10px}
.sc-p .tc-prog{margin:0; flex:1}
.sc-p em{font-style:normal; font-size:12px}
.scard.mini .sc-n{font-size:18px; margin-top:6px}
.gapcard{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-lg); border:2px dashed var(--line-2); color:var(--ink-3); font-size:14px}
.gapcard button{margin-left:auto; flex:none; background:var(--ink); color:var(--on-ink); border-radius:var(--r-pill); padding:8px 14px; font-weight:500; font-size:13px}

/* aba Calendário */
.mcal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; touch-action:pan-y}
.mdow{text-align:center; font-size:11.5px; color:var(--ink-3); padding-bottom:4px}
.mday{aspect-ratio:1/1.15; border-radius:14px; display:flex; flex-direction:column; align-items:center; padding-top:6px; gap:4px; background:var(--surface); position:relative}
.mday > span:first-child{font-size:15px; font-weight:500}
.mday.other{background:transparent; color:var(--ink-3)}
.mday.other .mbands{opacity:.5}
.mday.today{box-shadow:inset 0 0 0 2px var(--brand)}
.mday.sel{background:var(--ink); color:var(--on-ink)}
.mbands{display:flex; flex-direction:column; gap:3px; width:100%}
.mb{display:block; height:6px; background:var(--tone); margin:0 -2px}
.mb.s0{margin-left:6px; border-radius:3px 0 0 3px}
.mb.e0{margin-right:6px; border-radius:0 3px 3px 0}
.mb.s0.e0{border-radius:3px}
.mb.idea{background:repeating-linear-gradient(90deg,var(--tone) 0 4px,transparent 4px 7px)}

/* aba Fazer */
.filters{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px}
.filters::-webkit-scrollbar{display:none}
.filters button{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--r-pill); border:1px solid var(--line); font-size:14px; font-weight:500; white-space:nowrap}
.filters button .ic{width:16px; height:16px}
.filters button em{font-style:normal; opacity:.6}
.filters button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--on-ink)}
.group{display:flex; flex-direction:column; gap:8px}
.group-h{display:flex; align-items:center; gap:9px; font-weight:600; font-size:15.5px; padding:4px 2px 0}
.group-h i{width:12px; height:12px; border-radius:50%}
.group-h span{flex:1}
.group-h em{font-style:normal; font-size:12.5px; font-weight:500; color:var(--ink-3)}
.group-h em.warn{color:var(--warn)} .group-h em.crit{color:var(--bad)}

/* contêineres das abas: em coluna no celular, viram grade no computador */
.stops, .groups, .cal-main, .cal-day{display:flex; flex-direction:column; gap:12px}
.groups{gap:18px}

/* =====================================================================
   5. CHECKLIST (celular e computador)
   ===================================================================== */
.cl{display:flex; flex-direction:column; gap:7px}
.ci{display:flex; align-items:center; gap:4px; background:var(--surface); border-radius:var(--r-md); padding:4px 6px 4px 4px; min-height:54px;
  position:relative; touch-action:pan-y; transition:transform .2s, opacity .25s, background .2s}
.ci-box{position:relative; width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%}
.ci-box::before{content:""; position:absolute; width:24px; height:24px; border-radius:50%; border:2px solid var(--line-2); transition:all .18s}
.ci-box .ic{position:relative; width:14px; height:14px; stroke:#fff; stroke-width:3; opacity:0; transform:scale(.4); transition:all .18s}
.ci.done .ci-box::before{background:var(--done); border-color:var(--done)}
.ci.done .ci-box .ic{opacity:1; transform:none}
.ci-body{flex:1; min-width:0; display:flex; flex-direction:column; padding:8px 0}
.ci-text{font-size:15px; line-height:1.35; overflow-wrap:anywhere; cursor:text; border-radius:6px}
.ci-paw .ic{width:15px; height:15px; vertical-align:-2px; margin-right:4px; color:var(--brand-deep)}
.ci.done .ci-text{color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--ink-3)}
.ci-meta{font-size:12px; color:var(--ink-3); margin-top:1px}
.ci-edit{font-size:16px; border:0; border-radius:8px; background:var(--surface-2); padding:6px 8px; margin:-6px -8px; width:calc(100% + 16px); outline:2px solid var(--brand)}
.ci-due{font-size:12px; color:var(--ink-3); flex:none; padding:0 6px; white-space:nowrap}
.ci-due.warn{color:var(--warn)} .ci-due.crit{color:var(--bad); font-weight:600}
.ci-del{width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--ink-3)}
.ci-del:hover{color:var(--bad); background:var(--bad-bg)}
.cl-tasks .ci-del{display:none}
@media (hover:hover){ .cl-tasks .ci:hover .ci-del{display:flex} }
.ci-grip{width:26px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--ink-3); cursor:grab; touch-action:none}
.ci-grip .ic{width:17px; height:17px; fill:currentColor; stroke:none}
.ci.is-dragging{box-shadow:var(--shadow); z-index:3; transform:scale(1.02)}
.ci.is-swiping{background:var(--bad-bg)}
.ci.is-leaving{opacity:0; transform:translateX(30px)}
.ci-add{display:flex; align-items:center; gap:10px; border:2px dashed var(--line-2); border-radius:var(--r-md); padding:0 14px; min-height:50px; color:var(--ink-3); cursor:text}
.ci-add input{flex:1; border:0; background:transparent; outline:0; font-size:16px; padding:12px 0; min-width:0}
.ci-add:focus-within{border-style:solid; border-color:var(--brand); color:var(--brand-deep)}

/* =====================================================================
   6. FOLHA / EDITOR
   ===================================================================== */
.scrim{position:fixed; inset:0; background:rgba(18,16,25,.45); z-index:60; opacity:0; transition:opacity .2s}
.scrim.on{opacity:1}
.modal{position:fixed; inset:0; z-index:61; display:flex; align-items:center; justify-content:center; padding:24px 16px; pointer-events:none}
.modal-box{pointer-events:auto; width:min(580px,100%); max-height:88vh; background:var(--ground); border-radius:var(--r-lg);
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(10px) scale(.985); transition:opacity .16s ease, transform .16s ease}
.modal.on .modal-box{opacity:1; transform:none}
body.is-mobile .modal{padding:0; align-items:flex-end}
body.is-mobile .modal-box{width:100%; max-height:94%; border-radius:28px 28px 0 0; opacity:1; transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1)}
body.is-mobile .modal.on .modal-box{transform:translateY(0)}
.sh-grab{width:42px; height:5px; border-radius:3px; background:var(--line-2); margin:9px auto 0; flex:none; display:none}
body.is-mobile .sh-grab{display:block}

.dw-head{display:flex; align-items:center; gap:10px; padding:14px 18px 12px; flex:none; touch-action:none}
.dw-dot{width:14px; height:14px; border-radius:50%; flex:none}
.dw-head h2{font-size:21px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dw-body{overflow-y:auto; padding:2px 14px 20px; flex:1; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.dw-foot{display:flex; gap:8px; padding:10px 16px calc(12px + var(--safe-b)); border-top:1px solid var(--line); flex:none; background:var(--ground)}

.dsec{background:var(--surface); border-radius:var(--r-md)}
.dsec-h{display:flex; align-items:center; gap:10px; width:100%; padding:14px 16px; min-height:52px}
.dsec-t{font-weight:600; font-size:15.5px; flex:none}
.dsec-t em{font-style:normal; font-weight:500; color:var(--ink-3); font-size:13.5px; margin-left:4px}
.dsec-s{flex:1; min-width:0; text-align:right; color:var(--ink-3); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dsec-c{margin-left:auto; color:var(--ink-3); transition:transform .2s; width:18px; height:18px}
.dsec.open .dsec-c{transform:rotate(180deg)}
.dsec.open .dsec-s{display:none}
.dsec-b{padding:0 14px 16px; display:flex; flex-direction:column; gap:10px}
.dsec .cl .ci{background:var(--surface-2)}

.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.f{display:flex; flex-direction:column; gap:5px; min-width:0}
.f.full{grid-column:1/-1}
.f label, .flabel{font-size:12.5px; color:var(--ink-3); font-weight:500}
.flabel{margin-top:4px}
.f input, .f textarea{width:100%; font-size:16px; background:var(--surface-2); border:1.5px solid transparent; border-radius:var(--r-sm); padding:11px 12px; min-width:0}
body.is-desktop .f input, body.is-desktop .f textarea{font-size:14.5px; padding:9px 11px}
.f input:focus, .f textarea:focus{outline:0; border-color:var(--brand-deep); background:var(--surface)}
.f input[type="date"]{-webkit-appearance:none; appearance:none; min-height:44px}
.f .m{font-family:var(--mono)}
.f textarea{resize:vertical; min-height:84px; line-height:1.45; field-sizing:content; max-height:420px}
.quick{display:flex; gap:5px; flex-wrap:wrap}
.quick button{flex:1; min-width:52px; border-radius:var(--r-pill); background:var(--surface-2); padding:8px 4px; font-size:12.5px; font-weight:500; text-align:center}
.quick button:active{background:var(--brand); color:var(--brand-ink)}
.quick.wide button{flex:1 1 100%; padding:11px}
.seg{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:var(--r-pill)}
.seg button{flex:1; padding:9px 4px; border-radius:var(--r-pill); font-size:13.5px; font-weight:500; text-align:center; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--on-ink)}
.swatches{display:flex; gap:9px; flex-wrap:wrap}
.sw{width:36px; height:36px; border-radius:50%; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--ink)}

/* histórico */
.hday{font-size:13px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; margin-top:6px}
.hlist{background:var(--surface); border-radius:var(--r-md); padding:2px 14px}
.hrow{display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0}
.hrow .ava{margin-top:1px}
.hrow p{flex:1; min-width:0; font-size:14.5px; line-height:1.4; overflow-wrap:anywhere}
.hrow p b{font-weight:600}
.hrow p em{font-style:normal; color:var(--ink-3); font-size:13px}
.hwho{font-weight:600}
.hrow time{flex:none; font-size:12.5px; color:var(--ink-3); padding-top:2px}
.dw-body > .btn{align-self:center}

/* ajustes */
.me{display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:var(--r-md); padding:16px}
.me-n{font-size:19px; font-weight:600}
.me-s{font-size:13px; color:var(--ink-3)}
.menu{display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-md); overflow:hidden}
.menu button{display:flex; align-items:center; gap:14px; padding:15px 16px; border-bottom:1px solid var(--line); font-weight:500}
.menu button:last-child{border-bottom:0}
.menu button span{display:flex; flex-direction:column}
.menu small{font-size:12.5px; color:var(--ink-3); font-weight:400}
.menu .danger{color:var(--bad)}

/* =====================================================================
   7. COMPUTADOR (≥ 860 px)
   As mesmas abas do celular, em grade, com barra lateral escura.
   ===================================================================== */
@media (min-width: 860px){
  .m-tabs, .m-fab{display:none !important}
  .side{display:flex; flex-direction:column; gap:6px; position:fixed; z-index:40; top:0; bottom:0; left:0; width:240px;
    padding:22px 14px 16px; background:#17152A; color:#fff}
  .view{max-width:1200px; margin:0 0 0 240px; padding:30px 36px 60px; gap:18px}
  @media (min-width: 1500px){ .view{margin-left:calc(240px + (100vw - 240px - 1200px) / 2)} }
  .toast{left:calc(50% + 120px); bottom:28px}

  .side-brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; padding:0 10px 18px}
  .side-brand .ic{width:30px; height:30px; padding:6px; border-radius:10px; background:var(--brand); color:var(--brand-ink)}
  .side-nav{display:flex; flex-direction:column; gap:4px}
  .side-tab{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:14px; color:#CFCBE0; font-weight:500; font-size:15px; position:relative}
  .side-tab:hover{background:rgba(255,255,255,.07); color:#fff}
  .side-tab[aria-selected="true"]{background:#fff; color:#17152A}
  .side-tab .badge{margin-left:auto; min-width:22px; height:20px; padding:0 6px; border-radius:10px; background:#FF6B88; color:#fff; font-size:11.5px; font-weight:600; display:flex; align-items:center; justify-content:center}
  .side-add{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; padding:12px; border-radius:14px; background:var(--brand); color:var(--brand-ink); font-weight:600}
  .side-add:hover{filter:brightness(1.05)}
  .side-foot{margin-top:auto; display:flex; flex-direction:column; gap:10px}
  .side-foot .sync{padding:0 12px; color:#9C97B5}
  .side-me{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; color:#fff; text-align:left}
  .side-me:hover{background:rgba(255,255,255,.07)}
  .side-me span{display:flex; flex-direction:column; font-weight:500; line-height:1.25}
  .side-me small{color:#9C97B5; font-weight:400; font-size:12px}
  @media (prefers-color-scheme: dark){ .side{background:#0B0A12; border-right:1px solid var(--line)} }

  /* Início */
  .w-top h1{font-size:34px; line-height:1.1}
  .w-top p{color:var(--ink-3); font-size:15px; margin-top:4px}
  .w-stats{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:14px}
  .w-stats .hero{min-height:190px}
  .stat{display:flex; flex-direction:column; justify-content:center; gap:2px; border-radius:var(--r-lg); padding:18px; background:var(--surface)}
  .stat .tc-n{font-size:24px}
  .stat.alert .tc-n{color:var(--warn)}
  .w-stats .tcard.fiscal{justify-content:center; padding:18px}
  .w-stats .tcard.fiscal .tc-n{font-size:24px}
  .w-cols{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start}
  .w-main{display:flex; flex-direction:column; gap:14px; min-width:0}
  .w-side{display:flex; flex-direction:column; gap:14px; position:sticky; top:24px}
  .w-route{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px}
  .w-route .tcard.big{grid-row:span 2}
  .minical{background:var(--surface); border-radius:var(--r-lg); padding:16px}
  .mc-h{display:flex; align-items:baseline; margin-bottom:10px}
  .mc-h h2{font-size:18px; flex:1}
  .mc-g{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
  .mc-dow{text-align:center; font-size:11px; color:var(--ink-3); padding-bottom:4px}
  .mc-d{display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0 4px; border-radius:10px; font-size:13px}
  .mc-d:hover{background:var(--surface-2)}
  .mc-d > span:first-child{position:relative}
  .mc-d.other{color:var(--ink-3); opacity:.5}
  .mc-d.today{background:var(--ink); color:var(--on-ink)}
  .mc-due{position:absolute; top:-2px; right:-7px; width:5px; height:5px; border-radius:50%; background:var(--warn)}
  .mc-d .mb{height:4px}

  /* Rota */
  .stops{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; align-items:start}
  .stops .m-month, .stops .empty-card{grid-column:1/-1}
  .stops .gapcard{grid-column:1/-1}
  .tl-wrap{display:flex; flex-direction:column; gap:10px}
  .tl-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
  .tl-head h2{font-size:20px}
  .tl-head .hint{font-size:13px; color:var(--ink-3)}

  /* Calendário */
  .view[data-tab="cal"]{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start}
  .cal-main{display:flex; flex-direction:column; gap:14px}
  .cal-day{display:flex; flex-direction:column; gap:12px; position:sticky; top:24px; padding-top:64px}
  .mday{aspect-ratio:auto; min-height:92px}
  .mbands{margin-top:auto; padding-bottom:8px}
  .mb.lbl{height:19px; display:flex; align-items:center; padding:0 7px; font-style:normal; font-size:11.5px; font-weight:600;
    color:var(--tone-ink); white-space:nowrap; overflow:hidden; background:color-mix(in oklab, var(--tone) var(--card-mix), var(--ground))}
  .mb.lbl.s0{border-radius:10px 0 0 10px} .mb.lbl.e0{border-radius:0 10px 10px 0} .mb.lbl.s0.e0{border-radius:10px}
  .mb.lbl.idea{background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--tone) 45%,transparent) 0 5px, transparent 5px 10px); color:var(--ink-2)}
  .mday.sel .mb.lbl{outline:1px solid rgba(255,255,255,.4)}

  /* Fazer */
  .groups{display:block; columns:2 340px; column-gap:20px}
  .groups .group{break-inside:avoid; margin-bottom:18px}
  .filters{margin:0; padding:0}
}

.legend{display:flex; gap:14px; flex-wrap:wrap; margin-left:auto; font-size:12.5px; color:var(--ink-2)}
.legend i{display:inline-block; width:16px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.lg-conf{background:var(--brand)} .lg-pend{background:var(--brand); opacity:.55}
.lg-idea{border:1.5px dashed var(--brand-deep)}
.lg-gap{background:repeating-linear-gradient(135deg,var(--line-2) 0 3px,transparent 3px 6px)}

/* linha do tempo */
.tl-scroll{overflow-x:auto; background:var(--surface); border-radius:var(--r-lg)}
.tl{min-width:960px; position:relative}
.tl-months{display:grid; border-bottom:1px solid var(--line)}
.tl-month{padding:10px; border-right:1px solid var(--line); color:var(--ink-2)}
.tl-month:last-child{border-right:0}
.tl-month:hover{background:var(--surface-2)}
.tl-month[aria-pressed="true"]{background:var(--brand); color:var(--brand-ink)}
.tl-month .m{display:block; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.tl-month .y{display:block; font-size:11.5px; opacity:.7}
.tl-body{position:relative; padding:12px 0 14px; cursor:crosshair}
.tl-grid{position:absolute; inset:0; display:grid; pointer-events:none}
.tl-grid span{border-right:1px solid var(--line)}
.tl-grid span:last-child{border-right:0}
.tl-today{position:absolute; top:0; bottom:0; width:2px; background:var(--ink); z-index:3; pointer-events:none}
.tl-today::after{content:"hoje"; position:absolute; top:-1px; left:5px; font-size:10.5px; font-weight:600; text-transform:uppercase; color:var(--ink)}
.lane{position:relative; height:40px; margin-bottom:6px}
.bar{position:absolute; top:0; height:40px; border-radius:12px; display:flex; align-items:center; gap:7px; padding:0 11px; overflow:hidden;
  font-size:13.5px; font-weight:600; z-index:2; cursor:grab; touch-action:none; user-select:none;
  background:color-mix(in oklab, var(--tone) var(--card-mix), var(--ground)); color:var(--tone-ink)}
.bar:hover{filter:brightness(1.04)}
.bar.dragging{cursor:grabbing; z-index:8; box-shadow:var(--shadow)}
.bar.st-pending{background:color-mix(in oklab, var(--tone) 55%, var(--surface))}
.bar.st-idea{background:var(--surface); border:2px dashed var(--tone); color:var(--ink)}
.bar-h{position:absolute; top:0; bottom:0; width:10px; cursor:ew-resize; z-index:4}
.bar-h.h-l{left:0} .bar-h.h-r{right:0}
.bar:hover .bar-h{background:rgba(255,255,255,.45)}
.bar .bn{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar .bd{font-size:12px; opacity:.8; white-space:nowrap; font-weight:400}
.bar .paw{width:14px; height:14px}
.tl-body .ghost{position:absolute; top:0; height:40px; border-radius:12px; z-index:6; pointer-events:none; border:2px dashed var(--brand-deep); background:color-mix(in srgb,var(--brand) 30%,transparent)}
.dragbadge{position:absolute; top:6px; z-index:12; pointer-events:none; white-space:nowrap; background:var(--ink); color:var(--on-ink); font-size:12.5px; padding:5px 11px; border-radius:var(--r-pill); transform:translateX(-50%)}
.gaplabel{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); padding:8px 12px 4px; font-weight:600}
.gaplane{height:24px}
.gaplane .gap{position:absolute; top:0; height:24px; border-radius:8px; background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--line-2) 70%,transparent) 0 3px, transparent 3px 7px);
  border:1px dashed var(--line-2); font-size:11.5px; color:var(--ink-3); display:flex; align-items:center; padding:0 8px; white-space:nowrap; overflow:hidden}



/* =====================================================================
   8. DESEJOS, RESPONSÁVEL E PERFIL
   ===================================================================== */
/* avatares: tamanhos e foto */
.ava.xs{width:22px; height:22px; font-size:10px}
.ava.md{width:44px; height:44px; font-size:17px}
.ava.xl{width:92px; height:92px; font-size:36px}
.ava.has-photo{overflow:hidden; background:var(--ava)}
.ava img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}

/* responsável na linha do checklist */
.ci{flex-wrap:wrap}
.ci-who{width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%}
.ci-who:hover{background:var(--surface-2)}
.ci-nobody{display:block; width:22px; height:22px; border-radius:50%; border:1.5px dashed var(--line-2)}
.ci-pick{flex-basis:100%; display:flex; gap:6px; flex-wrap:wrap; padding:2px 6px 8px 44px}
.ci-pick button{display:flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border-radius:var(--r-pill); border:1px solid var(--line); font-size:13px; font-weight:500; background:var(--surface)}
.ci-pick button[aria-pressed="true"]{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.ci-pick .ci-nobody{width:26px; height:26px}
.cl-tasks .ci-who{width:32px}

/* links nos desejos */
.ci.link{padding-left:10px}
.ci-lk{width:30px; height:30px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-right:8px;
  background:var(--surface-3); color:var(--ink-2); font-size:13px}
.ci-lk .ic{width:17px; height:17px}
.ci-lk.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.ci-lk.tt{background:#111; color:#fff}
.ci-lk.yt{background:#FF0033; color:#fff; font-size:11px}
.ci-open{width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--brand-deep)}
.ci-open:hover{background:var(--surface-2)}

/* aba Desejos */
.wsecs{display:flex; flex-direction:column; gap:18px}
.wsec{display:flex; flex-direction:column; gap:8px}
.wsec-h{display:flex; align-items:baseline; gap:8px}
.wsec-h h2{font-size:19px}
.wsec-h span{font-size:13px; color:var(--ink-3)}
.wlist{display:flex; flex-direction:column; gap:7px}
.wcard{display:flex; align-items:center; gap:4px; background:var(--surface); border-radius:var(--r-md); padding:6px 12px 6px 4px; min-height:58px; cursor:pointer}
.wcard:hover{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.wcard.route{background:color-mix(in oklab, var(--tone) var(--card-mix), var(--ground)); color:var(--tone-ink)}
.wcard.route .w-meta{color:inherit; opacity:.8}
.w-check{position:relative; width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%}
.w-check::before{content:""; position:absolute; width:24px; height:24px; border-radius:50%; border:2px solid var(--line-2); transition:all .18s}
.wcard.route .w-check::before{border-color:currentColor; opacity:.6}
.w-check .ic{position:relative; width:14px; height:14px; stroke:#fff; stroke-width:3; opacity:0}
.wcard.done .w-check::before{background:var(--good); border-color:var(--good)}
.wcard.done .w-check .ic{opacity:1}
.wcard.done .w-name{color:var(--ink-2)}
.w-body{flex:1; min-width:0; display:flex; flex-direction:column; padding:6px 0}
.w-name{font-size:16px; font-weight:600; letter-spacing:-.01em}
.w-meta{font-size:12.5px; color:var(--ink-3)}
.w-who{display:flex; padding-left:6px}
.w-who .ava{margin-left:-6px; border:2px solid var(--surface)}
.wcard.route .w-who .ava{border-color:transparent}

/* folha do desejo */
.wbanner{display:flex; align-items:center; gap:10px; width:100%; border-radius:var(--r-md); padding:12px 14px; font-size:14px; text-align:left}
.wbanner span{flex:1}
.wbanner.route{background:color-mix(in srgb,var(--brand) 30%,var(--surface)); color:var(--ink)}
.wbanner.done{background:color-mix(in srgb,var(--good) 16%,var(--surface)); color:var(--good)}
.wpeople{display:flex; gap:12px; flex-wrap:wrap}
.wpeople button{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-3); width:58px}
.wpeople button .ava{opacity:.38; filter:grayscale(.7); transition:all .15s; box-shadow:0 0 0 0 var(--ink)}
.wpeople button[aria-pressed="true"]{color:var(--ink); font-weight:600}
.wpeople button[aria-pressed="true"] .ava{opacity:1; filter:none; box-shadow:0 0 0 2.5px var(--surface), 0 0 0 4.5px var(--ink)}

/* perfil nos Ajustes */
.profile{background:var(--surface); border-radius:var(--r-md); padding:18px 16px; display:flex; flex-direction:column; gap:10px}
.pf-photo{display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:4px}
.pf-ava{position:relative; border-radius:50%}
.pf-cam{position:absolute; right:-2px; bottom:0; width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--on-ink);
  display:flex; align-items:center; justify-content:center; border:3px solid var(--surface)}
.pf-cam .ic{width:16px; height:16px}
.pf-cam .spin{width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pf-links{display:flex; gap:14px}
.link.muted{color:var(--ink-3)}
.pf-facts{display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.pf-stats{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pf-stats button{display:flex; flex-direction:column; align-items:flex-start; background:var(--surface-2); border-radius:var(--r-sm); padding:10px 12px; font-size:12.5px; color:var(--ink-2)}
.pf-stats b{font-size:22px; color:var(--ink); line-height:1.1}

@media (min-width: 860px){
  .wsecs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; align-items:start}
}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }