/* =====================================================================
   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
   ===================================================================== */
body.is-mobile #desktop{display:none}
body.is-desktop #mobile{display:none}

.m-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}

/* 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.ghost{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)}

/* =====================================================================
   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)}

/* 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
   ===================================================================== */
#desktop .wrap{max-width:1240px; margin:0 auto; padding:0 24px 60px}
#desktop .topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--ground) 88%,transparent); backdrop-filter:blur(12px)}
#desktop .topbar-in{max-width:1240px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:14px}
#desktop .brand{display:flex; align-items:baseline; gap:12px; margin-right:auto}
#desktop .brand h1{font-size:24px}
#desktop .brand .sub{font-size:13px; color:var(--ink-3)}
.top-right{display:flex; align-items:center; gap:8px}

#desktop .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px}
.dcard{background:var(--surface); border-radius:var(--r-lg); padding:18px 20px; display:flex; flex-direction:column; gap:2px}
.dcard.hero{background:var(--brand); color:var(--brand-ink)}
.dcard.fiscal{background:var(--fiscal); color:var(--fiscal-ink)}
@media (prefers-color-scheme: dark){
  .dcard.hero{background:color-mix(in oklab,var(--brand) 82%,var(--ground))}
  .dcard.fiscal{background:color-mix(in oklab,var(--fiscal) 74%,var(--ground))}
}
.dcard .lab{font-size:13px; font-weight:500; opacity:.75}
.dcard .num{font-size:34px; font-weight:600; letter-spacing:-.03em; line-height:1.15; margin-top:2px}
.dcard .diag{font-size:13.5px; opacity:.85}
.dcard.alert:not(.hero):not(.fiscal) .num{color:var(--warn)}
.alertline{display:flex; align-items:center; gap:8px; margin-top:12px; background:var(--bad-bg); color:var(--bad); border-radius:var(--r-md); padding:11px 14px; font-size:14px; font-weight:500}

#desktop .sec{margin-top:30px}
#desktop .sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap}
#desktop .sec-head h2{font-size:19px}
#desktop .sec-head .hint{font-size:13px; color:var(--ink-3)}
.cols{display:grid; grid-template-columns:1.15fr 1fr; gap:24px}
@media (max-width:1100px){ .cols{grid-template-columns:1fr} }
.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}
.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}

/* calendário */
.monthbox{background:var(--surface); border-radius:var(--r-lg); padding:14px 16px 16px}
.mhead{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.mhead h3{font-size:17px; flex:1}
.mhead .iconbtn{width:34px; height:34px}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.dow{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); text-align:center; padding:4px 0}
.day{position:relative; min-height:66px; border-radius:10px; background:var(--surface-2); display:flex; flex-direction:column; gap:2px; overflow:hidden}
.day.other{background:transparent}
.day.other .dnum{opacity:.45}
.day:hover{outline:2px solid var(--brand); outline-offset:-2px}
.dnum{font-size:12px; color:var(--ink-2); padding:5px 0 1px 7px}
.day.today{box-shadow:inset 0 0 0 2px var(--ink)}
.day.today .dnum{font-weight:700; color:var(--ink)}
.band{height:18px; display:flex; align-items:center; font-size:11px; font-weight:600; padding:0 6px; overflow:hidden; white-space:nowrap;
  background:color-mix(in oklab, var(--tone) var(--card-mix), var(--ground)); color:var(--tone-ink); margin:0 -3px}
.band.s0{margin-left:4px; border-radius:9px 0 0 9px}
.band.e0{margin-right:4px; border-radius:0 9px 9px 0}
.band.s0.e0{border-radius:9px}
.band.st-pending{background:color-mix(in oklab, var(--tone) 55%, var(--surface))}
.band.st-idea{background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--tone) 45%,transparent) 0 5px, transparent 5px 10px); color:var(--ink-2)}
.day .plus{position:absolute; right:6px; bottom:4px; font-size:14px; color:var(--ink-3); opacity:0}
.day:hover .plus{opacity:1}

/* para resolver agora */
.todo{display:flex; flex-direction:column; gap:7px}
.todo .ci{background:var(--surface)}
.vrow{display:flex; align-items:center; gap:10px; background:var(--bad-bg); color:var(--bad); border-radius:var(--r-md); padding:12px 14px; font-weight:500}
.vrow .tx{flex:1}
.vrow .who{font-size:12.5px; opacity:.8}
.todo .more{font-size:12.5px; color:var(--ink-3); padding:4px 6px}

/* lista de paradas */
.stoplist{display:flex; flex-direction:column; gap:8px}
.row{display:grid; grid-template-columns:8px 1fr auto; background:var(--surface); border-radius:var(--r-md); overflow:hidden; width:100%}
.row:hover{box-shadow:var(--shadow)}
.row .rail{background:var(--tone)}
.row.idea .rail{background:repeating-linear-gradient(180deg,var(--tone) 0 6px,transparent 6px 10px)}
.row .main{padding:13px 16px; display:flex; flex-direction:column; gap:5px; min-width:0}
.row .l1{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.row .nm{font-weight:600; font-size:16.5px}
.row .l2{display:flex; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--ink-2)}
.row .side{padding:13px 16px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; min-width:140px}
.prog{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2)}
.progbar{width:70px; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden}
.progbar i{display:block; height:100%; background:var(--tone-ink); border-radius:3px}
@media (prefers-color-scheme: dark){ .progbar i{background:var(--tone)} }
.logi{font-size:12px; color:var(--ink-3); text-align:right}
#desktop .foot{margin-top:32px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3)}

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