/* ──────────────────────────────────────────────────────
   FONTES LOCAIS (B2 — PWA)
   Baixadas de Google Fonts em 2026-08-05 e servidas pelo
   WhiteNoise — sem dependência externa, shell offline ok.
   font-display:swap: texto em fallback aparece antes da
   fonte carregar (sem flash de conteúdo invisível).

   Montserrat: 2 subsets distintos (latin-ext e latin).
   Os arquivos são compartilhados entre pesos 400-800 —
   o browser escolhe o subconjunto correto pelo unicode-range.
   Tilt Warp: apenas peso 400 (display typeface).
─────────────────────────────────────────────────────── */

/* Montserrat — latin-ext (acentos, diacríticos) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext.d16dfe26bcd7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat — latin (ASCII + caracteres básicos) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/montserrat-latin.311d352d9323.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Tilt Warp — latin-ext */
@font-face {
  font-family: 'Tilt Warp';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/tilt-warp-latin-ext.fd4e663cf44e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* Tilt Warp — latin */
@font-face {
  font-family: 'Tilt Warp';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/tilt-warp-latin.09ad8ee3f993.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ──────────────────────────────────────────────────────
   muda.log v3 — identidade asfáltica
   Tokens oficiais (memorando §5.5)
─────────────────────────────────────────────────────── */
:root{
  --laranja:#E15028;
  --laranja-2:#FFA041;
  --laranja-soft:#FBE3D9;
  --laranja-cream:#FDF0E4;
  --grafite:#2C2B28;
  --grafite-2:#3A3936;
  --concreto:#5F5E5A;
  --concreto-2:#7A7975;
  --creme:#F4F1EB;
  --creme-2:#EAE6DD;
  --cinza-cl:#D7D7D7;
  --cinza-bd:#CFCCC4;
  --verde:#4E9B47;
  --verde-soft:#E1EFDE;
  --azul-ink:#1F4F8B;
  --azul-soft:#E2ECF7;

  /* densidade do concreto: 0 = só borda, 1 = ator visual */
  --concreto-presence:1;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
::-webkit-scrollbar{display:none}

html,body{font-family:'Montserrat',system-ui,sans-serif;color:var(--grafite);background:var(--creme-2)}
body{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:28px 16px 60px;gap:20px}

/* Headline tipográfica do projeto */
.tw{font-family:'Tilt Warp',system-ui,sans-serif;font-weight:400;letter-spacing:-0.005em}

/* ════════════════════════════════════════════════
   LOGO — "muda.log" minúsculo (regra oficial)
   ponto laranja com peso visual
═════════════════════════════════════════════════ */
.logo{font-family:'Tilt Warp',sans-serif;font-size:22px;line-height:1;color:var(--creme);letter-spacing:-0.01em;display:inline-flex;align-items:baseline}
.logo .ponto{color:var(--laranja);font-size:1.15em;line-height:0.8;margin:0 0.02em}
.logo.dark{color:var(--grafite)}
.logo.lg{font-size:36px}
.logo.xl{font-size:54px}
.logo.sm{font-size:16px}

/* Ícone oficial — círculo laranja + 3 barras + ponto-roda */
.brandmark{width:36px;height:36px;border-radius:50%;background:var(--laranja);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.brandmark .bars{display:flex;align-items:flex-end;gap:2.5px;height:14px}
.brandmark .bars i{display:block;background:var(--grafite);border-radius:1.5px;width:2.5px}
.brandmark .bars i:nth-child(1){height:9px}
.brandmark .bars i:nth-child(2){height:12px}
.brandmark .bars i:nth-child(3){height:14px;border-radius:2px 2px 0 0}
.brandmark .dot{position:absolute;bottom:7px;right:7px;width:4.5px;height:4.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.2px var(--grafite)}
.brandmark.sm{width:24px;height:24px}.brandmark.sm .bars{height:10px;gap:2px}.brandmark.sm .bars i{width:2px}.brandmark.sm .bars i:nth-child(1){height:6px}.brandmark.sm .bars i:nth-child(2){height:8px}.brandmark.sm .bars i:nth-child(3){height:10px}.brandmark.sm .dot{bottom:4px;right:4px;width:3px;height:3px;box-shadow:0 0 0 1px var(--grafite)}
.brandmark.lg{width:60px;height:60px}.brandmark.lg .bars{height:24px;gap:4px}.brandmark.lg .bars i{width:4.5px}.brandmark.lg .bars i:nth-child(1){height:15px}.brandmark.lg .bars i:nth-child(2){height:20px}.brandmark.lg .bars i:nth-child(3){height:24px}.brandmark.lg .dot{bottom:11px;right:11px;width:7px;height:7px;box-shadow:0 0 0 1.6px var(--grafite)}

/* ════════════════════════════════════════════════
   PHONE SHELL — 390×820 (memorando §8)
═════════════════════════════════════════════════ */
.phone{width:390px;background:var(--creme);border-radius:46px;border:10px solid #131210;overflow:hidden;box-shadow:0 0 0 1.5px #0a0a09,0 30px 90px rgba(20,18,15,.4);display:flex;flex-direction:column;height:820px;position:relative}
.notch{background:#0e0d0b;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.np{width:90px;height:11px;background:#000;border-radius:10px}
.screen{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}

/* ════════════════════════════════════════════════
   HEADER GRAFITE (universal nas telas internas)
═════════════════════════════════════════════════ */
.hdr{background:var(--grafite);padding:18px 22px 22px;flex-shrink:0;position:relative}
.hdr.flat{padding-bottom:18px}
.hdr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;min-height:24px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--creme);font-size:13px;font-weight:600;cursor:pointer;user-select:none;background:transparent;border:0;padding:6px 10px 6px 0;font-family:inherit}
.back svg{flex-shrink:0}
.back span{letter-spacing:0.01em}
.hdr-title{color:var(--creme);font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-0.015em}
.hdr-sub{color:var(--concreto-2);font-size:13px;margin-top:4px;font-weight:500}
.hdr-actions{display:flex;gap:8px;align-items:center}
/* 44×44: a regra de sistema do v3 pede alvo mínimo de 44px, mas o CSS do
   próprio protótipo trazia 36×36 — contradição herdada, corrigida aqui.
   O SVG tem tamanho próprio (16–20px), então só o preenchimento cresce:
   nenhuma mudança visual no ícone. */
.icon-btn{width:44px;height:44px;border-radius:10px;background:var(--grafite-2);display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;color:var(--creme)}
.icon-btn:hover{background:#4a4945}

/* tag badges para o header do dashboard */
.pill-mei{background:var(--laranja);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:99px;letter-spacing:0.04em;text-transform:uppercase;font-family:'Montserrat'}

/* ════════════════════════════════════════════════
   BODY — creme + bandas asfálticas (cinza concreto)
═════════════════════════════════════════════════ */
.scr-body{flex:1;overflow-y:auto;background:var(--creme);padding-bottom:8px}
.scr-body > :last-child{margin-bottom:0}
.body-pad{padding:18px 18px 22px}
.band{background:var(--concreto);color:var(--creme);padding:18px;margin:0 0 14px}
.band.dark{background:var(--grafite)}
.band-label{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(244,241,235,0.6);margin-bottom:8px;font-family:'Montserrat'}
.section-h{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--concreto);margin:18px 0 10px;font-family:'Montserrat'}
.section-h:first-child{margin-top:0}

/* ════════════════════════════════════════════════
   CARDS, BOTÕES, BADGES
═════════════════════════════════════════════════ */
.card{background:#fff;border-radius:16px;border:1.5px solid var(--cinza-bd);padding:16px}
.card+.card{margin-top:10px}
.card.dark{background:var(--grafite);border-color:var(--grafite);color:var(--creme)}
.card.concreto{background:var(--concreto);border-color:var(--concreto);color:#fff}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:16px 18px;font-size:15px;font-weight:700;text-align:center;cursor:pointer;border:0;font-family:inherit;min-height:52px;letter-spacing:0.01em;width:100%}
.btn-primary{background:var(--laranja);color:#fff;box-shadow:0 4px 0 #B43E1F}
.btn-primary:active{box-shadow:0 1px 0 #B43E1F;transform:translateY(2px)}
.btn-dark{background:var(--grafite);color:var(--creme);box-shadow:0 4px 0 #0a0a09}
.btn-ghost{background:transparent;color:var(--grafite);border:2px solid var(--cinza-bd)}
.btn-danger{background:#fff;color:#B43E1F;border:2px solid #E8B3A8}
.btn-whatsapp{background:#25D366;color:#fff;box-shadow:0 4px 0 #128C3F}
.btn-sm{padding:10px 14px;font-size:13px;min-height:44px;border-radius:11px}  /* 44: alvo mínimo (era 40 no v3) */

/* tags / badges — STATUS */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 10px;border-radius:99px;letter-spacing:0.06em;text-transform:uppercase;font-family:'Montserrat'}
.tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.tag-pending{background:var(--laranja-soft);color:#B43E1F}
.tag-approved{background:var(--verde-soft);color:#2E6B26}
.tag-done{background:var(--verde-soft);color:#2E6B26}
.tag-partial{background:var(--creme-2);color:var(--concreto)}
.tag-confirmed{background:var(--grafite);color:var(--creme)}
.tag-vehicle{background:var(--azul-soft);color:var(--azul-ink)}

/* ════════════════════════════════════════════════
   BOTTOM NAV
═════════════════════════════════════════════════ */
.bnav{background:#fff;border-top:1.5px solid var(--cinza-bd);display:grid;grid-template-columns:repeat(5,1fr);padding:10px 6px 16px;flex-shrink:0;gap:2px}
.ni{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:6px 0;border-radius:14px;background:transparent;border:0;font-family:inherit;min-height:54px;justify-content:center}
.ni-i{width:42px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;color:var(--concreto-2);transition:all .15s}
.ni-l{font-size:10px;font-weight:700;color:var(--concreto-2);letter-spacing:0.03em}
.ni.on .ni-i{background:var(--laranja-soft);color:var(--laranja)}
.ni.on .ni-l{color:var(--laranja)}

/* ════════════════════════════════════════════════
   NUMERAÇÃO GRANDE (princípio 2: números protagonistas)
═════════════════════════════════════════════════ */
.bignum{font-family:'Tilt Warp',sans-serif;font-size:56px;line-height:0.9;letter-spacing:-0.02em;color:var(--grafite);white-space:nowrap}
.bignum.orange{color:var(--laranja)}
.bignum.cream{color:var(--creme)}
.bignum.md{font-size:40px}
.bignum.sm{font-size:30px}
.bignum.xl{font-size:60px}

/* ════════════════════════════════════════════════
   ROW UTILITIES
═════════════════════════════════════════════════ */
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:10px}
.gap-sm{gap:6px}
.gap-lg{gap:18px}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* divisor */
.divider{height:1.5px;background:var(--cinza-bd);margin:14px 0}

/* ════════════════════════════════════════════════
   STAT CARDS — Dashboard
═════════════════════════════════════════════════ */
.stat{background:#fff;border-radius:16px;border:1.5px solid var(--cinza-bd);padding:14px 12px;display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;gap:6px}
.stat.dark{background:var(--grafite);border-color:var(--grafite)}
.stat.concreto{background:var(--concreto);border-color:var(--concreto)}
.stat-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--laranja-cream);color:var(--laranja)}
.stat .num{font-family:'Tilt Warp',sans-serif;font-size:40px;line-height:0.9;letter-spacing:-0.02em;color:var(--grafite)}
.stat.dark .num,.stat.concreto .num{color:var(--creme)}
.stat .lbl{font-size:12px;font-weight:600;color:var(--concreto);text-transform:uppercase;letter-spacing:0.06em}
.stat.dark .lbl,.stat.concreto .lbl{color:rgba(244,241,235,0.7)}

/* ════════════════════════════════════════════════
   ITEM CARD (orçamento / agenda) — barra de acento
═════════════════════════════════════════════════ */
.item{background:#fff;border-radius:14px;border:1.5px solid var(--cinza-bd);padding:14px;cursor:pointer;position:relative;overflow:hidden}
.item+.item{margin-top:10px}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--cinza-bd)}
.item.pending::before{background:var(--laranja)}
.item.approved::before,.item.done::before,.item.confirmed::before{background:var(--verde)}
.item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.item-name{font-size:16px;font-weight:700;color:var(--grafite);line-height:1.2;letter-spacing:-0.005em}
.item-route{font-size:13px;color:var(--concreto);font-weight:500;margin-top:2px;display:flex;align-items:center;gap:5px}
.item-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--cinza-cl);gap:10px}
.item-foot > .row{min-width:0;flex-shrink:1}
.item-foot > .row > .tag{flex-shrink:0}
.item-value{font-family:'Tilt Warp',sans-serif;font-size:24px;line-height:1;color:var(--laranja);letter-spacing:-0.01em;white-space:nowrap;flex-shrink:0}
.item-meta{font-size:12px;color:var(--concreto-2);font-weight:600}

/* ════════════════════════════════════════════════
   LINK CARD (Dashboard) — link do formulário
═════════════════════════════════════════════════ */
.linkcard{background:var(--laranja);border-radius:18px;padding:18px;color:#fff;position:relative;overflow:hidden}
.linkcard::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;background:var(--laranja-2);border-radius:50%;opacity:0.35}
.linkcard > *{position:relative;z-index:1}
.linkcard .url{background:rgba(20,18,15,0.35);border-radius:10px;padding:11px 14px;font-size:12px;color:#fff;font-weight:600;font-family:'Montserrat';margin:10px 0 14px;word-break:break-all;line-height:1.4}
.linkcard .url .slug{color:#FFD9C2}
.linkcard-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.linkcard-row .lbtn{background:rgba(255,255,255,0.92);color:var(--grafite);border-radius:11px;padding:10px 6px;font-size:12px;font-weight:700;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;font-family:inherit;min-height:54px;justify-content:center}
.linkcard-row .lbtn.wapp{background:#25D366;color:#fff}
.linkcard-row .lbtn.copied{background:var(--grafite);color:var(--creme)}

/* ════════════════════════════════════════════════
   AGENDA — week strip
═════════════════════════════════════════════════ */
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.dayp{background:#fff;border:1.5px solid var(--cinza-bd);border-radius:12px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;cursor:pointer;gap:4px}
.dayp .wk{font-size:10px;font-weight:700;color:var(--concreto-2);text-transform:uppercase;letter-spacing:0.06em}
.dayp .dd{font-family:'Tilt Warp',sans-serif;font-size:22px;color:var(--grafite);line-height:1}
.dayp .dot{width:6px;height:6px;border-radius:50%;background:transparent;margin-top:2px}
.dayp.has .dot{background:var(--laranja)}
.dayp.on{background:var(--grafite);border-color:var(--grafite)}
.dayp.on .wk{color:rgba(244,241,235,0.7)}
.dayp.on .dd{color:var(--creme)}
.dayp.on .dot{background:var(--laranja)}
.dayp.today{border-color:var(--laranja);border-width:2px}

/* ════════════════════════════════════════════════
   ROUTE — origem → destino visual
═════════════════════════════════════════════════ */
.route{background:var(--creme-2);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:stretch}
.route-line{display:flex;flex-direction:column;align-items:center;padding-top:4px}
.route-pin{width:12px;height:12px;border-radius:50%;border:2.5px solid var(--laranja);background:#fff;flex-shrink:0}
.route-pin.end{background:var(--laranja);border-color:var(--laranja)}
.route-stem{width:2px;flex:1;background:repeating-linear-gradient(to bottom,var(--laranja) 0 4px,transparent 4px 8px);min-height:24px;margin:3px 0}
.route-info{flex:1;display:flex;flex-direction:column;gap:14px}
.route-info > div .lbl{font-size:11px;font-weight:700;color:var(--concreto);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px}
.route-info > div .val{font-size:15px;font-weight:600;color:var(--grafite);line-height:1.25}

/* ════════════════════════════════════════════════
   FORM — header branco + progress + body branco
═════════════════════════════════════════════════ */
.fhdr{background:#fff;padding:18px 20px 14px;flex-shrink:0;border-bottom:1.5px solid var(--cinza-bd)}
.fhdr-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
/* 44×44 e não 36: é o botão de FECHAR o formulário. Errar o toque num alvo
   de saída tem consequência assimétrica — ou o usuário não sai quando quer,
   ou acerta algo vizinho por engano. Alvo de saída é dos que mais merecem
   folga, não dos que menos. */
.fhdr-close{margin-left:auto;width:44px;height:44px;border-radius:10px;background:var(--creme-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:0}
.pbar{height:6px;background:var(--creme-2);border-radius:99px;overflow:hidden;margin-bottom:8px}
.pfill{height:100%;background:var(--laranja);border-radius:99px;transition:width .3s}
.pmeta{display:flex;justify-content:space-between;align-items:center}
.pmeta .step{font-family:'Tilt Warp',sans-serif;font-size:22px;color:var(--laranja);line-height:1}
.pmeta .step-of{color:var(--concreto-2);font-size:13px;font-weight:500}
.pmeta .stepname{font-size:13px;font-weight:700;color:var(--grafite);text-transform:uppercase;letter-spacing:0.05em}

.fbody{flex:1;overflow-y:auto;padding:22px 20px;background:#fff}
.fstep-icon{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:var(--laranja-cream);color:var(--laranja)}
.fstep-t{font-size:24px;font-weight:700;color:var(--grafite);text-align:center;margin-bottom:6px;letter-spacing:-0.015em;line-height:1.15}
.fstep-s{font-size:14px;color:var(--concreto);text-align:center;margin-bottom:24px;line-height:1.4;font-weight:500}

.field{margin-bottom:14px}
.flbl{font-size:12px;font-weight:700;color:var(--grafite);letter-spacing:0.04em;margin-bottom:6px;display:block;text-transform:uppercase}
.freq{color:var(--laranja);margin-left:3px}
.finput{width:100%;background:var(--creme);border:2px solid var(--cinza-bd);border-radius:12px;padding:14px 16px;font-size:16px;color:var(--grafite);font-family:inherit;font-weight:500;outline:none;min-height:54px}
.finput:focus{border-color:var(--laranja);background:#fff}

.fnav{padding:14px 20px 18px;background:#fff;flex-shrink:0;border-top:1.5px solid var(--cinza-bd);display:grid;grid-template-columns:64px 1fr;gap:10px}
.fbk{background:var(--creme-2);color:var(--concreto);border-radius:14px;padding:14px;font-weight:700;cursor:pointer;border:0;font-family:inherit;display:flex;align-items:center;justify-content:center;min-height:54px}

/* contador +/- (princípio: ícone + número grande) */
.cnt-card{background:var(--creme);border:2px solid var(--cinza-bd);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;cursor:default}
.cnt-card.on{border-color:var(--laranja);background:#FFFBF7}
.cnt-head{display:flex;align-items:center;gap:10px}
.cnt-ic{width:36px;height:36px;border-radius:10px;background:var(--creme-2);display:flex;align-items:center;justify-content:center;color:var(--grafite);flex-shrink:0}
.cnt-card.on .cnt-ic{background:var(--laranja-cream);color:var(--laranja)}
.cnt-name{font-size:14px;font-weight:700;color:var(--grafite);line-height:1.15;letter-spacing:-0.005em}
.cnt-row{display:flex;align-items:center;gap:8px}
.cnt-btn{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;font-family:inherit;font-size:22px;font-weight:700;flex-shrink:0}
.cnt-minus{background:var(--creme-2);color:var(--concreto)}
.cnt-plus{background:var(--laranja);color:#fff}
.cnt-num{flex:1;text-align:center;font-family:'Tilt Warp',sans-serif;font-size:28px;color:var(--grafite);line-height:1}
.cnt-card.on .cnt-num{color:var(--laranja)}

/* checkbox extras */
.ex-item{display:flex;align-items:center;gap:14px;background:var(--creme);border:2px solid var(--cinza-bd);border-radius:14px;padding:16px;margin-bottom:10px;cursor:pointer;user-select:none}
.ex-item.on{border-color:var(--laranja);background:#FFFBF7}
.ex-chk{width:28px;height:28px;border-radius:8px;border:2.5px solid var(--cinza-bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;color:#fff}
.ex-item.on .ex-chk{background:var(--laranja);border-color:var(--laranja)}
.ex-name{font-size:15px;font-weight:700;color:var(--grafite);line-height:1.2;flex:1}
.ex-icon{width:36px;height:36px;border-radius:10px;background:var(--creme-2);display:flex;align-items:center;justify-content:center;color:var(--grafite);flex-shrink:0}
.ex-item.on .ex-icon{background:var(--laranja-cream);color:var(--laranja)}

/* revisão */
.rev-block{background:var(--creme);border:2px solid var(--cinza-bd);border-radius:14px;padding:14px;margin-bottom:10px}
.rev-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:700;color:var(--concreto);text-transform:uppercase;letter-spacing:0.06em}
.rev-r{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--cinza-cl);font-size:14px}
.rev-r:last-child{border:0}
.rev-r .k{color:var(--concreto);font-weight:500}
.rev-r .v{color:var(--grafite);font-weight:700}

/* OK banner */
.ok-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;background:#fff;text-align:center;gap:18px}
.ok-circle{width:120px;height:120px;border-radius:50%;background:var(--verde);display:flex;align-items:center;justify-content:center;color:#fff}
.ok-t{font-size:28px;font-weight:700;color:var(--grafite);letter-spacing:-0.02em;line-height:1.1}
.ok-s{font-size:15px;color:var(--concreto);font-weight:500;line-height:1.4;max-width:280px}
.ok-resumo{background:var(--creme);border:2px solid var(--cinza-bd);border-radius:14px;padding:16px;width:100%;text-align:left}

/* ════════════════════════════════════════════════
   FINANCEIRO — chart bars
═════════════════════════════════════════════════ */
.period-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:14px;background:var(--creme-2);padding:5px;border-radius:14px}
/* Variante de 2 colunas — abas Pedidos/Orçamentos.
   Antes a tela de Orçamentos montava a barra com grid inline e SEM este
   container: as duas telas tinham os mesmos 18px de `.body-pad`, mas ali os
   botões encostavam no cabeçalho porque faltavam os 5px de padding daqui e,
   principalmente, o fundo neutro que separa a barra do grafite. Com o botão
   ativo em laranja saturado, a diferença ficava ainda mais visível. */
.period-tabs.cols-2{grid-template-columns:1fr 1fr}
.ptab{padding:11px 8px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;color:var(--concreto-2);background:transparent;border:0;font-family:inherit;text-align:center;text-transform:uppercase;letter-spacing:0.05em}
.ptab.on{background:#fff;color:var(--grafite);box-shadow:0 1px 3px rgba(20,18,15,0.1)}
.metric-dark{background:var(--grafite);border-radius:18px;padding:20px;margin-bottom:14px;color:var(--creme)}
.chart-bars{display:flex;align-items:flex-end;gap:5px;height:120px;margin-top:14px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;height:100%}
.bar-stack{flex:1;display:flex;flex-direction:column;justify-content:flex-end;width:100%;gap:1px;min-height:2px;height:100%}
.bar-fill{width:100%;border-radius:3px;background:var(--laranja);min-height:3px;flex-shrink:0}
.bar-fill.ext{background:var(--concreto-2)}
.bar-lbl{font-size:11px;color:var(--concreto-2);font-weight:600}
.meta-bar{height:8px;background:var(--creme-2);border-radius:99px;overflow:hidden;margin-top:6px}
.meta-fill{height:100%;background:var(--laranja);border-radius:99px}

/* lista linha (realizadas, breakdowns) */
.lin{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--cinza-cl);gap:12px}
.lin > .lk{min-width:0;flex:1}
.lin:last-child{border:0;padding-bottom:0}
.lin .lk{display:flex;flex-direction:column;gap:2px}
.lin .lk-n{font-size:14px;font-weight:600;color:var(--grafite)}
.lin .lk-s{font-size:12px;color:var(--concreto-2);font-weight:500}
.lin .lv{font-family:'Tilt Warp',sans-serif;font-size:18px;color:var(--grafite);white-space:nowrap;flex-shrink:0;margin-left:12px}

/* toggle (Meu Site) */
.tgl{width:46px;height:26px;border-radius:99px;background:var(--cinza-cl);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.tgl.on{background:var(--laranja)}
.tgl.on::after{left:23px}

/* plano cards (seguros) */
.plan-card{background:#fff;border:2px solid var(--cinza-bd);border-radius:18px;padding:18px;margin-bottom:12px}
.plan-card.featured{border-color:var(--laranja);background:#FFFBF7}
.plan-ribbon{position:absolute;top:-1px;right:14px;background:var(--laranja);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:0 0 8px 8px;letter-spacing:0.06em}

/* ════════════════════════════════════════════════
   NAV MAP
═════════════════════════════════════════════════ */
.navmap{width:390px;background:#fff;border-radius:18px;border:1.5px solid var(--cinza-bd);padding:18px;box-shadow:0 8px 24px rgba(20,18,15,0.05)}
.navmap h3{font-size:11px;font-weight:700;color:var(--concreto);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.navmap h3 .brandmark{margin-right:2px}
.nm-sec{font-size:10px;font-weight:700;color:var(--concreto-2);letter-spacing:0.1em;text-transform:uppercase;margin:14px 0 8px}
.nm-sec:first-child{margin-top:0}
.nm-grid{display:flex;flex-wrap:wrap;gap:6px}
.nm-btn{padding:7px 12px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--cinza-bd);color:var(--grafite);background:#fff;font-family:inherit}
.nm-btn:hover{background:var(--grafite);color:var(--creme);border-color:var(--grafite)}
.nm-btn.form{border-color:var(--laranja);color:var(--laranja)}
.nm-btn.form:hover{background:var(--laranja);color:#fff}

/* ════════════════════════════════════════════════
   TWEAKS PANEL
═════════════════════════════════════════════════ */
.tweaks{width:390px;background:var(--grafite);color:var(--creme);border-radius:18px;padding:18px;font-family:inherit}
.tweaks h3{font-size:11px;font-weight:700;color:var(--laranja);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:12px}
.tw-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--grafite-2)}
.tw-row:last-child{border:0;padding-bottom:0}
.tw-row .k{font-size:13px;font-weight:600}
.tw-pills{display:flex;gap:4px;background:var(--grafite-2);padding:3px;border-radius:99px}
.tw-pills button{padding:5px 10px;font-size:11px;font-weight:700;border-radius:99px;background:transparent;color:var(--concreto-2);border:0;cursor:pointer;font-family:inherit;text-transform:uppercase;letter-spacing:0.05em}
.tw-pills button.on{background:var(--laranja);color:#fff}

/* ════════════════════════════════════════════════
   CHANGELOG
═════════════════════════════════════════════════ */
.changelog{width:min(800px,95vw);background:#fff;border-radius:20px;border:1.5px solid var(--cinza-bd);padding:28px;color:var(--grafite);box-shadow:0 8px 24px rgba(20,18,15,0.05)}
.changelog h2{font-family:'Tilt Warp',sans-serif;font-size:32px;color:var(--grafite);letter-spacing:-0.01em;margin-bottom:6px}
.changelog .sub{font-size:14px;color:var(--concreto);margin-bottom:24px}
.changelog h3{font-size:13px;font-weight:700;color:var(--laranja);letter-spacing:0.08em;text-transform:uppercase;margin:22px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--cinza-bd)}
.changelog .cl-tela{padding:10px 0;border-bottom:1px solid var(--cinza-cl)}
.changelog .cl-tela:last-child{border:0}
.changelog .cl-t{font-size:14px;font-weight:700;color:var(--grafite);margin-bottom:4px}
.changelog .cl-d{font-size:13px;color:var(--concreto);line-height:1.5}
.changelog .cl-d strong{color:var(--grafite)}

/* helpers para grupos de ícone */
.svg-stroke{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* ════════════════════════════════════════════════
   v3.1 — CHIPS DE ENDEREÇO (casa/apto) + mini controles
═════════════════════════════════════════════════ */
.addr-chip{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--creme);border:2px solid var(--cinza-bd);border-radius:12px;padding:12px;font-size:14px;font-weight:700;color:var(--concreto);cursor:pointer;font-family:inherit;min-height:48px}
.addr-chip.on{border-color:var(--laranja);background:#FFFBF7;color:var(--laranja)}
.addr-mini{background:var(--creme);border:2px solid var(--cinza-bd);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;align-items:center;font-family:inherit}
.addr-mini.on{border-color:var(--laranja);background:#FFFBF7}
.addr-mini-l{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--concreto);text-transform:uppercase;letter-spacing:0.05em}
.addr-mini.on .addr-mini-l{color:var(--laranja)}

/* ════════════════════════════════════════════════
   v3.1 — BOTTOM SHEET DE SERVIÇOS (lead Vexis)
═════════════════════════════════════════════════ */
.svc-overlay{position:absolute;inset:0;background:rgba(20,18,15,0.55);display:flex;align-items:flex-end;z-index:50;backdrop-filter:blur(2px)}
.svc-sheet{background:#fff;border-radius:24px 24px 0 0;padding:26px 22px 22px;width:100%;animation:sheetUp .22s ease}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ════════════════════════════════════════════════
   ÁREA DE ORÇAMENTO — editor + preview PDF
═══════════════════════════════════════════════════ */
/* seletor de fonte (pedidos recebidos) */
.q-src-scroll{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;margin-bottom:8px}
.q-src{flex-shrink:0;width:150px;text-align:left;padding:13px;border-radius:14px;border:1.5px solid var(--cinza-bd);background:#fff;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:3px}
.q-src.on{border-color:var(--laranja);background:#FFFBF7;box-shadow:0 4px 14px -6px rgba(225,80,40,0.4)}
.q-src .t{font-size:14px;font-weight:700;color:var(--grafite);letter-spacing:-0.005em}
.q-src .r{font-size:11px;color:var(--concreto);font-weight:500;display:flex;align-items:center;gap:4px}
.q-src .r svg{width:12px;height:12px;flex-shrink:0}
.q-src .r.val{color:var(--laranja);font-weight:700;font-family:'Tilt Warp',sans-serif;font-size:15px;margin-top:3px}
.q-src.blank{width:104px;align-items:center;justify-content:center;text-align:center;color:var(--concreto);border-style:dashed}
.q-src.blank.on{color:var(--laranja);border-style:solid}
.q-src.blank .t{margin-top:6px}

.q-hint{display:flex;align-items:flex-start;gap:9px;background:var(--laranja-cream);border-radius:12px;padding:12px 14px;font-size:12px;color:var(--grafite);font-weight:500;line-height:1.4;margin-bottom:4px}
.q-hint svg{flex-shrink:0;color:var(--laranja);margin-top:1px}

/* upload de logo */
.q-logo-drop{display:flex;align-items:center;gap:14px}
.q-logo-box{width:66px;height:66px;border-radius:15px;border:2px dashed var(--cinza-bd);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--creme);color:var(--concreto-2);cursor:pointer;flex-shrink:0;position:relative}
.q-logo-box:hover{border-color:var(--laranja);color:var(--laranja)}
.q-logo-box img{width:100%;height:100%;object-fit:contain;background:#fff}
.q-logo-box input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.q-logo-t{font-size:14px;font-weight:700;color:var(--grafite)}
.q-logo-s{font-size:12px;color:var(--concreto);font-weight:500;margin-top:2px;line-height:1.35}
.q-linkbtn{background:none;border:0;color:var(--laranja);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:6px 0 0;text-decoration:underline}

/* itens */
.q-item{background:var(--creme);border:1.5px solid var(--cinza-bd);border-radius:14px;padding:12px;margin-bottom:10px}
.q-item-desc{background:#fff !important;margin-bottom:8px}
.q-item-foot{display:grid;grid-template-columns:52px 84px 1fr 40px;gap:8px;align-items:end}
.q-mini-lbl{font-size:9px;font-weight:700;color:var(--concreto);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;display:block}
.q-in{width:100%;background:#fff;border:1.5px solid var(--cinza-bd);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit;font-weight:600;color:var(--grafite);outline:none;min-height:42px}
.q-in:focus{border-color:var(--laranja)}
.q-line-tot{font-family:'Tilt Warp',sans-serif;font-size:17px;color:var(--laranja);text-align:right;white-space:nowrap;padding-bottom:9px;line-height:1}
.q-del{width:40px;height:42px;border-radius:10px;background:#fff;border:1.5px solid #E8B3A8;color:#B43E1F;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.q-del:hover{background:#B43E1F;color:#fff;border-color:#B43E1F}

/* totais */
.q-totals{background:var(--grafite);border-radius:16px;padding:16px 18px;color:var(--creme)}
.q-tot-k{font-size:13px;font-weight:600;opacity:0.75}
.q-tot-v{font-size:15px;font-weight:700}
.q-tot-div{height:1px;background:rgba(244,241,235,0.15);margin:0 0 10px}
.q-tot-total-k{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em}

/* preview do documento */
.q-doc-wrap{padding:2px 0 4px}
.q-doc{background:#fff;border-radius:14px;border:1.5px solid var(--cinza-bd);padding:22px 20px;box-shadow:0 10px 30px -8px rgba(20,18,15,0.18)}
.q-actions{padding:14px 18px 18px;background:var(--creme);border-top:1.5px solid var(--cinza-bd);display:flex;flex-direction:column;gap:10px;flex-shrink:0}

/* ──────────────────────────────────────────────────────
   AJUSTE PARA TESTE EM CELULAR REAL
   A ".phone" original é uma moldura pensada pra preview dentro de um
   navegador desktop (design review). Num celular de verdade, isso é
   ruído — aqui ela estica pra tela cheia, sem moldura/sombra/notch.
─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  body{ padding:0; min-height:100dvh; background:var(--creme); }
  .phone{ width:100vw; height:100dvh; border-radius:0; border:0; box-shadow:none; }
  .notch{ display:none; }  /* sem moldura/sombra/notch — complementa o comentário acima */
}

/* ── App instalado em modo standalone (PWA / TWA) ──────────────────
   Reagir ao MODO DE EXIBIÇÃO, não à largura: em tablet ou celular na
   horizontal o gatilho max-width:480px não dispara e o mockup volta.
   env(safe-area-inset-*): viewport-fit=cover já está no template —
   só faltava usar para não cobrir conteúdo sob a barra de status. */
@media (display-mode: standalone) {
  body{ padding:0; min-height:100dvh; background:var(--creme); }
  .phone{
    width:100vw; height:100dvh;  /* dvh: barra do Chrome no Android é dinâmica */
    border-radius:0; border:0; box-shadow:none;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .notch{ display:none; }  /* aparelho já tem o dele */
}


/* ── Casinha de retorno à home (telas de detalhe do modo app) ── */
.home-fab{position:absolute;bottom:18px;left:18px;z-index:60;width:46px;height:46px;
  border-radius:50%;background:var(--grafite);color:var(--creme);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(44,43,40,0.35)}
.home-fab:active{transform:scale(0.94)}
.home-fab svg{width:20px;height:20px}

.home-fab.raised{bottom:150px}


/* ════════════════════════════════════════════════
   ACESSIBILIDADE E FEEDBACK DE TOQUE
   Fica no FIM do arquivo de propósito: são regras transversais que
   precisam vencer as específicas por ordem de cascata.
═══════════════════════════════════════════════════ */

/* ── Foco visível para navegação por teclado (WCAG 2.4.7) ──
   Antes: ZERO ocorrências de :focus-visible no projeto — quem navega por
   teclado não enxergava onde estava. `:focus-visible` (e não `:focus`)
   porque o navegador só o aplica quando a navegação NÃO foi por toque:
   o anel não aparece para quem usa o dedo. */
:focus-visible{
  outline:2px solid var(--laranja);
  outline-offset:2px;
  border-radius:4px;
}

/* ── Resposta imediata ao toque ──
   Havia :active em apenas 2 dos 106 elementos clicáveis. Sem retorno
   visual em rede lenta, o usuário toca de novo — e clique duplicado já
   custou caro aqui: era a origem do segundo orçamento criado sem querer
   (defeito 3 de 02/08, ver test_salvar_e_pdf.py).
   `scale` é composited pela GPU: não força relayout, custa quase nada
   no celular modesto que é o alvo do produto. */
button:active:not(:disabled),
.tap:active,
.nm-btn:active,
.icon-btn:active,
.fhdr-close:active{
  transform:scale(0.97);
}

/* ── Redução de movimento (prefers-reduced-motion) ──
   Para quem tem transtorno vestibular, enxaqueca vestibular ou
   sensibilidade a movimento, animação não é enfeite: é sintoma.
   O sistema operacional já expõe essa preferência; só faltava respeitá-la.

   0.01ms em vez de `none`: mantém o disparo de transitionend/animationend,
   de que algum código pode depender, sem movimento perceptível.
   O :active acima também é neutralizado — coerente com o princípio. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  button:active:not(:disabled),
  .tap:active, .nm-btn:active, .icon-btn:active, .fhdr-close:active,
  .home-fab:active, .btn-primary:active{
    transform:none;
  }
}