/* ============================================================
   TRÊS FAIXAS DE TELA (o estilo base é escrito pensando no desktop,
   e os @media abaixo adaptam para telas menores):

     ≥ 1024px   DESKTOP  — menu lateral completo (230px), grades cheias
     768–1023   TABLET   — menu lateral estreito (180px), grades em 2 colunas
     < 768px    CELULAR  — barra inferior fixa, tudo em 1 coluna

   Use SEMPRE esses dois limites (1023px e 767px) em regra nova, pra não
   voltar a ter meia dúzia de pontos de quebra soltos e comportamento
   diferente em cada tela.

   Exceções pontuais que continuam existindo, por serem detalhe de um
   componente só e não mudança de layout:
     520px — legenda do mapa de calor quebra pra linha própria
     700px — passos de "onde baixar relatórios" viram 1 coluna
   ============================================================ */
:root{
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#EBEEF2; --border:#DEE3E9; --border-strong:#C5CCD6;
  --ink:#122B47; --ink-2:#435269; --ink-muted:#7C8797;
  --accent:#FF6600; --accent-2:#D65400; --accent-soft:rgba(255,102,0,.10); --accent-ink:#1A1006;
  --good:#1a9c4a; --good-bg:rgba(26,156,74,.12); --good-text:#177f3d;
  --warning:#c98a00; --warning-bg:rgba(201,138,0,.14); --warning-text:#8f6300;
  --critical:#d03b3b; --critical-bg:rgba(208,59,59,.12); --critical-text:#b5312f;
  --m1:#2a78d6; --m2:#eb6834; --m3:#1baf7a; --m4:#eda100;
  --heat-1:#7A1F0D; --heat-2:#C1440E; --heat-3:#F0631E; --heat-4:#FFB347; --heat-5:#FFFFFF;
  --shadow: 0 1px 2px rgba(17,43,70,.06), 0 6px 20px rgba(17,43,70,.08);
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1D30; --surface:#112B46; --surface-2:#173A5C; --border:#254A6C; --border-strong:#305C82;
    --ink:#F2F5F8; --ink-2:#B7C3D1; --ink-muted:#8497AC;
    --accent:#FF7A24; --accent-2:#FFA059; --accent-soft:rgba(255,122,36,.16); --accent-ink:#1A1006;
    --good:#3fc26f; --good-bg:rgba(63,194,111,.16); --good-text:#6ad894;
    --warning:#e0ac2e; --warning-bg:rgba(224,172,46,.16); --warning-text:#e0ac2e;
    --critical:#e66767; --critical-bg:rgba(230,103,103,.16); --critical-text:#f08080;
    --m1:#3987e5; --m2:#d95926; --m3:#199e70; --m4:#c98500;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1D30; --surface:#112B46; --surface-2:#173A5C; --border:#254A6C; --border-strong:#305C82;
  --ink:#F2F5F8; --ink-2:#B7C3D1; --ink-muted:#8497AC;
  --accent:#FF7A24; --accent-2:#FFA059; --accent-soft:rgba(255,122,36,.16); --accent-ink:#1A1006;
  --good:#3fc26f; --good-bg:rgba(63,194,111,.16); --good-text:#6ad894;
  --warning:#e0ac2e; --warning-bg:rgba(224,172,46,.16); --warning-text:#e0ac2e;
  --critical:#e66767; --critical-bg:rgba(230,103,103,.16); --critical-text:#f08080;
  --m1:#3987e5; --m2:#d95926; --m3:#199e70; --m4:#c98500;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Tira o zoom por duplo toque (e o atraso de ~300ms no toque que vem
     junto com ele). O zoom por pinça continua funcionando — desligar ele
     também (user-scalable=no) prejudicaria quem precisa aumentar. */
  touch-action:manipulation;
}
h1,h2,h3,h4{font-family:"Jost",system-ui,sans-serif; font-weight:700; margin:0; text-wrap:balance; letter-spacing:-.01em;}
.num{font-variant-numeric:tabular-nums;}
::selection{background:var(--accent-soft);}
a{color:var(--accent-2);}
button{font-family:inherit; cursor:pointer;}
input,select{font-family:inherit;}

#app{display:flex; min-height:100vh; min-height:100dvh;}

/* ---- Login ---- */
.loginwrap{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px;}
.logincard{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:36px 32px; max-width:380px; width:100%; text-align:center;}
.logincard .logo-img{max-width:220px; width:80%; height:auto; margin:0 auto 20px; display:block;}
.logincard h1{font-size:20px; margin-bottom:6px;}
.logincard p{color:var(--ink-2); font-size:13.5px; margin:0 0 22px;}
.logincard input{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--ink); font-size:15px; text-align:center;}
.logincard .btn{width:100%; margin-top:12px; padding:12px; font-size:14px;}
.logincard .status{margin-top:16px; font-size:13px; color:var(--ink-2); min-height:18px;}
.logincard .status.err{color:var(--critical-text);}
.logincard .status.ok{color:var(--good-text);}

/* ---- Nav ---- */
nav#sidenav{
  width:230px; flex:0 0 230px; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 14px; gap:4px; position:sticky; top:0; height:100vh; height:100dvh;
}
.brand{display:flex; flex-direction:column; gap:2px; padding:6px 8px 20px;}
.brand .logo-img{width:150px; max-width:100%; height:auto; display:block;}
.brand span{font-size:11.5px; color:var(--ink-muted); padding-left:2px;}
.navbtn{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; border:none; background:transparent;
  color:var(--ink-2); font-size:14px; font-weight:600; text-align:left; width:100%; min-height:44px;
}
.navbtn:hover{background:var(--surface-2); color:var(--ink);}
.navbtn:focus-visible, .btn:focus-visible, .rangebtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.navbtn.active{background:var(--accent-soft); color:var(--accent-2);}
/* Os ícones agora são SVG (ver ICONES/icone() no js/app.js), então o
   alinhamento é por flex e a cor vem do texto (currentColor). */
.navbtn .ic{width:20px; flex:none; display:inline-flex; align-items:center; justify-content:center;}
.icn{display:block;}
/* Selo de "tem pedido pendente" — no menu lateral/sheet fica empurrado pro
   fim da linha (o botão já é flex); na barra inferior fica encaixado no
   canto do ícone, que é a única posição que sobra num espaço tão apertado. */
.navbadge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:100px; background:var(--critical); color:#fff; font-size:10.5px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1;}
.navbtn .navbadge{margin-left:auto;}
.bnbtn .ic{position:relative; display:inline-flex;}
.bnbtn .navbadge{position:absolute; top:-6px; right:-10px; min-width:16px; height:16px; font-size:9px; padding:0 4px;}
.nav-foot{margin-top:auto; padding:10px 8px; font-size:11.5px; color:var(--ink-muted); border-top:1px solid var(--border); padding-top:14px;}
.nav-foot button{background:none;border:none;color:var(--critical-text);font-size:11.5px;font-weight:700;padding:0;margin-top:6px;cursor:pointer;}

main{flex:1; min-width:0; padding:26px 30px 60px; max-width:1180px; margin:0 auto; width:100%;}
.view{display:none;}
.view.active{display:block; animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.pagehead h1{font-size:23px;}
.pagehead p{margin:4px 0 0; color:var(--ink-2); font-size:13.5px;}

/* ---- Range picker ---- */
.rangebar{display:flex; gap:6px; flex-wrap:wrap;}
/* Maiúsculas e largura mínima: os nomes curtos de mês ("Ago", "Jul")
   ficavam bem mais estreitos que os outros botões, deixando a barra
   desalinhada. */
.rangebtn{padding:7px 16px; min-width:74px; border-radius:100px; border:1px solid var(--border); background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
/* O botão do filtro é só o ícone — não precisa da largura mínima. */
.rangebtn.filtrobtn{min-width:44px; padding:7px 12px;}
/* Ancorado à direita do botão: no desktop e no tablet o filtro é o último
   item da barra, então o popover cresce pra dentro da página. (No celular
   ele vira painel fixo — ver o @media lá embaixo — porque ali a barra rola
   na horizontal e um popover absoluto seria cortado.) */
.rangepop{display:none; position:absolute; top:calc(100% + 6px); right:0; left:auto; z-index:60; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; width:220px; max-width:calc(100vw - 32px);}
.rangepop.open{display:block;}
.rangebtn.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

/* ---- Cards / grid ---- */
.grid{display:grid; gap:14px;}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
/* Tablet: tudo em 2 colunas. Celular: tudo em 1 — cartão de número com
   2 por linha num celular deixa "R$ 13.081,70" cortado. */
@media (max-width:1023px){ .grid.cols-4, .grid.cols-3, .grid.cols-2{grid-template-columns:repeat(2,1fr);} }
@media (max-width:767px){ .grid.cols-4, .grid.cols-3, .grid.cols-2{grid-template-columns:1fr;} }

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}
.card h3{font-size:14px; color:var(--ink); margin-bottom:2px;}
.card .sub{font-size:12px; color:var(--ink-muted); margin-bottom:12px;}

.kpi .label{font-size:12.5px; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em;}
/* Tamanho fluido: encolhe sozinho em tela estreita em vez de estourar o
   cartão com valores longos ("R$ 13.081,70"). */
.kpi .value{font-family:"Jost",sans-serif; font-weight:800; font-size:clamp(21px, 5.2vw, 28px); margin-top:6px; letter-spacing:-.01em; overflow-wrap:anywhere;}
.kpi .delta{display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:12.5px; font-weight:700; padding:2px 8px; border-radius:100px;}
.kpi .delta.up{background:var(--good-bg); color:var(--good-text);}
.kpi .delta.down{background:var(--critical-bg); color:var(--critical-text);}
.kpi .delta.flat{background:var(--surface-2); color:var(--ink-muted);}
.kpi .delta-secondary{margin-top:6px; font-size:11.5px; font-weight:600; color:var(--ink-muted);}
.kpi .delta-secondary.up{color:var(--good-text);}
.kpi .delta-secondary.down{color:var(--critical-text);}
.note{margin-top:8px; font-size:11.5px; color:var(--ink-muted); line-height:1.4;}

.section-title{font-size:16px; margin:28px 0 12px;}
.section-title:first-child{margin-top:0;}

/* ---- Bars ---- */
.barchart{display:flex; align-items:flex-end; gap:10px; height:var(--h,180px); padding-top:26px;}
.barcol{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; min-width:0;}
.barcol .bar{width:100%; max-width:46px; border-radius:5px 5px 2px 2px; background:var(--accent); position:relative; min-height:3px; transition:opacity .15s;}
.barcol .bar:hover{opacity:.82; cursor:pointer;}
/* Valor em cima da barra — pra ler o gráfico inteiro sem precisar tocar
   barra por barra (ver js/app.js buildBarChart). padding-top do .barchart
   acima abre espaço pro rótulo da barra mais alta não cortar no topo. */
.barval{position:absolute; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%); font-size:11px; font-weight:700; color:var(--ink-2); white-space:nowrap; pointer-events:none; font-variant-numeric:tabular-nums;}
.barcol .lbl{font-size:11px; color:var(--ink-muted); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.barchart.wrap{overflow-x:auto; padding-bottom:4px;}
@media (max-width:767px){
  /* Barra mais fina no celular (a de 46px ficava grossa/pesada em telas
     pequenas — orientação de UX pede até ~24px). */
  .barcol .bar{max-width:26px;}
  .barval{font-size:10px;}
}

/* ---- Tooltip ---- */
#tooltip{position:fixed; pointer-events:none; z-index:999; background:var(--ink); color:var(--bg); font-size:12px; font-weight:600; padding:7px 10px; border-radius:7px; box-shadow:var(--shadow); opacity:0; transform:translate(-50%,-115%); transition:opacity .1s; white-space:nowrap;}
:root[data-theme="dark"] #tooltip{background:var(--surface-2); color:var(--ink); border:1px solid var(--border-strong);}
#tooltip.show{opacity:1;}
#tooltip .t2{font-weight:500; color:var(--ink-muted); display:block; font-size:11px;}
:root[data-theme="dark"] #tooltip .t2{color:var(--ink-2);}

/* ---- Line chart ---- */
/* "Sombra" de rolagem, 100% CSS: aparece/some sozinha conforme o conteúdo
   realmente tem mais pra rolar de cada lado (sem JS, sem checar overflow
   manualmente) — aplicada em toda tabela, gráfico de linha e mapa de calor. */
.tablewrap, .linewrap, .heatwrap{
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--surface);
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.linewrap{overflow-x:auto;}
svg.linechart{overflow:visible; display:block;}
.linechart .area{fill:url(#areaGrad);}
.linechart .line{fill:none; stroke:var(--accent); stroke-width:2.25px; stroke-linejoin:round; stroke-linecap:round;}
.linechart .grid line{stroke:var(--border);}
.linechart .axis text{fill:var(--ink-muted); font-size:11.5px; font-family:"Jost",sans-serif;}
.linechart .cross{stroke:var(--ink-muted); stroke-width:1; stroke-dasharray:3 3;}
.linechart .dot{fill:var(--surface); stroke:var(--accent); stroke-width:2.25px;}
.linechart .end-dot{fill:var(--surface); stroke:var(--accent); stroke-width:2.25px;}
.linechart .end-label{fill:var(--ink); font-size:12.5px; font-weight:700; font-family:"Jost",sans-serif; font-variant-numeric:tabular-nums;}

/* ---- Heatmap ---- */
.heatwrap{overflow-x:auto;}
.heatgrid{display:grid; gap:3px; min-width:640px;}
.heatcell{aspect-ratio:1.5; border-radius:3px; background:var(--surface-2); cursor:default; border:1px solid var(--border); transition:transform .1s;}
.heatcell:hover{transform:scale(1.12); position:relative; z-index:2;}
.heatrowlabel, .heatcollabel{font-size:10.5px; color:var(--ink-muted); display:flex; align-items:center;}
.heatcollabel{justify-content:center;}
.heatcell{cursor:pointer;}
.heatlegend{display:flex; align-items:center; gap:4px; margin-top:14px; font-size:11px; color:var(--ink-muted); flex-wrap:wrap;}
.heatlegend i{width:16px; height:10px; border-radius:2px; display:inline-block; border:1px solid var(--border);}
.heatlegend-hint{margin-left:auto; font-style:italic;}
@media (max-width:520px){ .heatlegend-hint{margin-left:0; flex-basis:100%;} }

/* ---- Alerts ---- */
.alert{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:10px;}
.alert.warning{background:var(--warning-bg); border-color:transparent;}
.alert.critical{background:var(--critical-bg); border-color:transparent;}
.alert.good{background:var(--good-bg); border-color:transparent;}
.alert .ic{flex:none; display:flex; align-items:center; line-height:1; margin-top:1px;}
.alert.warning .ic{color:var(--warning-text);}
.alert.critical .ic{color:var(--critical-text);}
.alert.good .ic{color:var(--good-text);}
.alert:not(.warning):not(.critical):not(.good) .ic{color:var(--ink-muted);}
.alert b{display:block; font-size:13.5px; margin-bottom:2px;}
.alert p{margin:0; font-size:13px; color:var(--ink-2);}

/* ---- Tables ---- */
.tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius);}
table{border-collapse:collapse; width:100%; font-size:13.5px;}
th,td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); font-weight:700; background:var(--surface-2);}
tr:last-child td{border-bottom:none;}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
td input{width:70px; padding:5px 7px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--ink); font-variant-numeric:tabular-nums; font-size:16px;}

/* ---- Tabela de pacotes editável: grid em vez de <table>, pra poder virar
   cartão empilhado no celular sem duplicar a lógica dos campos ---- */
.pkgtable{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.pkghead, .pkgrow{display:grid; grid-template-columns:1.3fr .7fr .7fr .9fr .8fr 1fr .9fr 1fr 1.3fr 1.3fr 56px; gap:8px; align-items:center; padding:10px 14px;}
.pkghead{background:var(--surface-2); font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); font-weight:700;}
.pkgrow{background:var(--surface); border-top:1px solid var(--border); font-size:13.5px;}
.pkgfield{min-width:0;}
.pkgfield input{width:100%; min-width:0; padding:6px 7px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--ink); font-variant-numeric:tabular-nums; font-size:16px;}
.pkgdel{text-align:right;}
.pkgdel .btn{padding:6px 10px;}
/* Vira cartão já no tablet: são 9 colunas de campo editável, não cabem em
   ~590px de conteúdo com o menu lateral do lado. */
@media (max-width:1023px){
  .pkgtable{border:none; display:flex; flex-direction:column; gap:12px;}
  .pkghead{display:none;}
  .pkgrow{display:block; border:1px solid var(--border); border-radius:var(--radius); padding:6px 14px;}
  .pkgfield{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--border);}
  .pkgfield:last-child{border-bottom:none;}
  .pkgfield::before{content:attr(data-label); font-size:12px; font-weight:600; color:var(--ink-2); flex:none;}
  .pkgfield input{width:auto; max-width:130px; text-align:right; flex:1;}
  .pkgfield.pkgname input{text-align:left;}
  .pkgdel{justify-content:flex-end;}
  .pkgdel::before{content:none;}
}

/* ---- Forms ---- */
.field{display:flex; flex-direction:column; gap:5px; min-width:0;}
.field label{font-size:12px; font-weight:600; color:var(--ink-2);}
.field input, .field select{padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--ink); font-size:16px; width:100%; min-width:0; min-height:44px;}
.field input[type="date"]{-webkit-appearance:none; appearance:none; line-height:1.3;}
.field input:focus, .field select:focus, td input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.btn{padding:10px 16px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font-weight:700; font-size:13.5px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
.btn:hover{background:var(--surface-2);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn.primary:hover{background:var(--accent-2);}
.btn.danger{background:transparent; border-color:var(--critical); color:var(--critical-text);}
.btn.danger:hover{background:var(--critical-bg);}
.btn.sent{background:var(--surface-2); border-color:var(--border); color:var(--ink-muted); cursor:default; pointer-events:none;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---- "×" de limpar dentro do campo (ver js/ui-clear.js, que envolve o
   campo no .inputwrap e insere o botão) ---- */
.inputwrap{position:relative;}
.inputwrap input{padding-right:36px;}
.clearbtn{position:absolute; right:4px; top:50%; transform:translateY(-50%); display:none; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:none; border:none; color:var(--ink-muted); font-size:18px; line-height:1; cursor:pointer;}
.clearbtn:hover{background:var(--surface-2); color:var(--ink);}

/* ---- Abas dentro de uma tela ---- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
/* Sombra de rolagem (mesma ideia de .tablewrap/.linewrap/.heatwrap, mas com
   --bg em vez de --surface: as abas ficam direto no fundo da página, não
   dentro de um cartão) — sem isso, quando as abas não cabem na largura da
   tela, dava pra rolar mas não tinha nenhuma pista visual disso, e a última
   aba parecia só "cortada" em vez de "role pra ver mais". */
.tabs{
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--bg) 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--bg);
  background-size: 20px 100%, 20px 100%, 8px 100%, 8px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tabbtn{flex:none; background:none; border:none; border-bottom:2px solid transparent; padding:10px 14px; min-height:44px; font-size:14px; font-weight:700; color:var(--ink-muted); white-space:nowrap;}
.tabbtn:hover{color:var(--ink-2);}
.tabbtn.active{color:var(--accent-2); border-bottom-color:var(--accent);}
@media (max-width:767px){
  .tabbtn{padding:9px 11px; font-size:13px;}
}

/* ---- Navegação por letra (Ficha do cliente → Ver todos) ---- */
.letterbar{display:flex; flex-wrap:wrap; gap:6px;}
.letterbtn{width:34px; height:34px; flex:none; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--ink-2); font-size:13.5px; font-weight:700;}
.letterbtn:hover{background:var(--surface-2);}
.letterbtn.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

/* ---- Aniversariantes: cartão por pessoa, em vez de tabela ---- */
.bdaylist{display:flex; flex-direction:column; gap:10px;}
.bdayrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); transition:opacity .15s;}
.bdayrow.hoje{border-color:var(--accent); background:var(--accent-soft);}
.bdayrow.enviado{opacity:.6;}
.bdayrow.enviado.hoje{border-color:var(--border); background:var(--surface);}
.bdayrow .dia{flex:none; width:48px; height:48px; border-radius:12px; background:var(--surface-2); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:"Jost",sans-serif; font-weight:800; font-size:18px; line-height:1;}
.bdayrow.hoje .dia{background:var(--accent); color:var(--accent-ink);}
.bdayrow .dia small{font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.8; margin-top:2px;}
.bdayrow .quem{flex:1 1 160px; min-width:0;}
.bdayrow .quem b{display:block; font-size:14px;}
.bdayrow .acoes{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
@media (max-width:767px){
  .bdayrow .acoes{width:100%;}
  .bdayrow .acoes > *{flex:1 1 auto;}
}

/* ---- Linha de pedido (Pedidos de Pacote / de Delivery) ----
   Classe em vez de estilo inline justamente pra poder virar coluna no
   celular (ver o @media de celular no fim do arquivo). */
.orderrow{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:14px 18px; margin-bottom:10px;}
.orderrow.done{opacity:.55;}
.orderrow .orderinfo{flex:1; min-width:160px;}
.orderrow .ordercode{font-family:"Jost",sans-serif; font-weight:800; font-size:17px; letter-spacing:.03em; background:var(--surface-2); padding:6px 12px; border-radius:8px;}
.orderrow .ordervalue{font-family:"Jost",sans-serif; font-weight:800; font-size:17px; color:var(--accent-2);}
.orderrow .orderactions{display:flex; gap:8px; flex-wrap:wrap;}

/* ---- Upload ---- */
.dropzone{border:2px dashed var(--border-strong); border-radius:14px; padding:36px 20px; text-align:center; background:var(--surface); transition:.15s;}
.dropzone.drag{background:var(--accent-soft); border-color:var(--accent);}
.dropzone .ic{font-size:34px;}
.dropzone h3{margin-top:10px;}
.dropzone p{color:var(--ink-muted); font-size:13px; margin:6px 0 14px;}
.steps{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px;}
@media (max-width:700px){.steps{grid-template-columns:1fr;}}
.step{padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);}
.step .n{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent-2); font-weight:800; font-size:12px; margin-bottom:8px;}
.step p{margin:0; font-size:13px; color:var(--ink-2);}

.stagelist{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.stagecard{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface);}
.stagecard.err{border-color:var(--critical); background:var(--critical-bg);}
.stagecard .meta b{display:block; font-size:13.5px;}
.stagecard .meta span{font-size:12px; color:var(--ink-muted);}
.badge{font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:100px; text-transform:uppercase; letter-spacing:.03em;}
.badge.cicclo{background:var(--accent-soft); color:var(--accent-2);}
.badge.stone{background:var(--warning-bg); color:var(--warning-text);}
.badge.cupons{background:var(--good-bg); color:var(--good-text);}
.badge.clientes{background:var(--critical-bg); color:var(--critical-text);}
.badge.seed{background:var(--surface-2); color:var(--ink-muted);}

.toast{position:fixed; bottom:calc(22px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:10px; font-size:13.5px; font-weight:600; opacity:0; transition:.25s; z-index:1000; box-shadow:var(--shadow); max-width:calc(100% - 32px); text-align:center;}
:root[data-theme="dark"] .toast{background:var(--surface-2); color:var(--ink); border:1px solid var(--border-strong);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.empty{text-align:center; padding:50px 20px; color:var(--ink-muted);}
.loading-overlay{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:2000; flex-direction:column; gap:10px;}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .spinner{animation:none;} .view.active{animation:none;} }

/* ============================================================
   TABLET (768–1023px): mantém o menu lateral (mesmo modelo mental do
   desktop), só que mais estreito, e sobra mais espaço pro conteúdo.
   ============================================================ */
@media (max-width:1023px){
  nav#sidenav{width:180px; flex:0 0 180px; padding:16px 10px;}
  .brand{padding:4px 6px 16px;}
  .brand .logo-img{width:120px;}
  .navbtn{font-size:13.5px; padding:9px 10px; gap:8px;}
  .navbtn .ic{font-size:15px; width:18px;}
  main{padding:22px 20px 50px;}
  .pagehead h1{font-size:21px;}
}

/* ============================================================
   CELULAR (<768px): barra inferior fixa + "Mais" abre a lista completa.
   ============================================================ */
#bottomnav{display:none;}
.moresheet{display:none;}
@media (max-width:767px){
  nav#sidenav{display:none;}
  main{padding:18px 16px 50px;}
  .pagehead{flex-direction:column; align-items:flex-start;}

  /* Faixa de períodos rola na horizontal em vez de quebrar em 3 linhas.
     width:100%+min-width:0 é essencial aqui: align-items:flex-start no
     .pagehead (acima) faz um item de flex-column assumir a largura do seu
     CONTEÚDO em vez da largura disponível — sem isso, a faixa (que tem
     overflow-x:auto) é medida pela largura de todos os botões desenrolados,
     maior que a tela, e esse excesso empurra a página inteira pra ficar mais
     larga que a viewport (dava pra "rolar pra fora" do app inteiro). */
  .rangebar{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; width:100%; min-width:0;}
  .rangebar::-webkit-scrollbar{display:none;}
  .rangebtn{flex:none;}
  /* O popover não pode ficar dentro da faixa que rola (seria cortado):
     no celular ele vira um painel fixo, ancorado acima da barra inferior. */
  .rangepop{position:fixed; left:16px; right:16px; top:auto; bottom:calc(84px + env(safe-area-inset-bottom)); width:auto; max-width:none;}

  .section-title{margin:22px 0 10px;}
  .card{padding:15px;}
  .barchart{height:min(var(--h,180px), 148px);}
  .barcol .lbl{font-size:10px;}
  .heatgrid{min-width:480px;}
  .heatcell{aspect-ratio:1.25;}

  /* ---- Tabela vira cartão empilhado (o rótulo de cada linha vem do
     <th> da coluna, copiado pra data-label por prepararTabelasResponsivas()
     no js/app.js). Só entra em tabela marcada com .stacked — as muito
     largas continuam rolando na horizontal, que empilhadas virariam um
     cartão gigante. ---- */
  .tablewrap.stacked{border:none; overflow:visible; background:none;}
  .tablewrap.stacked table{display:block; width:100%; font-size:13.5px;}
  .tablewrap.stacked thead{display:none;}
  .tablewrap.stacked tbody{display:flex; flex-direction:column; gap:10px;}
  .tablewrap.stacked tr{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2px 14px;}
  .tablewrap.stacked td{display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:right; white-space:normal; padding:9px 0; border-bottom:1px dashed var(--border);}
  .tablewrap.stacked tr td:last-child{border-bottom:none;}
  .tablewrap.stacked td::before{content:attr(data-label); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); text-align:left; flex:none;}
  .tablewrap.stacked td:not([data-label])::before{content:none;}
  .tablewrap.stacked td:not([data-label]){justify-content:flex-end;}

  /* ---- Linha de pedido (Pedidos de Pacote / de Delivery): no celular
     empilha e os botões viram grade de largura total, com o Excluir
     sozinho na última linha pra não ser tocado sem querer. ---- */
  .orderrow{flex-direction:column; align-items:stretch; gap:10px;}
  .orderrow .ordercode, .orderrow .ordervalue{align-self:flex-start;}
  .orderrow .orderactions{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%;}
  .orderrow .orderactions .btn{width:100%;}
  /* Ação principal e exclusão ocupam a linha inteira: a principal por ser
     a mais usada (e o texto é longo, quebrava em duas linhas na metade da
     largura), e a de excluir pra ficar longe das outras. */
  .orderrow .orderactions .btn.primary, .orderrow .orderactions .btn.danger{grid-column:1 / -1;}

  #bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:100;
    background:var(--surface); border-top:1px solid var(--border);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    /* Alguns navegadores mobile (Chrome/Android em especial) só recompõem
       um elemento position:fixed corretamente durante o scroll se ele já
       tiver sua própria camada de composição — sem isso, ele às vezes
       "descola" e aparece no meio do conteúdo por um instante, em vez de
       ficar colado no fundo da tela. translateZ(0) força essa camada. */
    transform:translateZ(0);
  }
  #bottomnav .bnbtn{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-height:56px; border:none; background:transparent; color:var(--ink-2); font-size:11px; font-weight:700;
  }
  #bottomnav .bnbtn .ic{font-size:21px;}
  #bottomnav .bnbtn.active{color:var(--accent-2);}

  /* position:fixed sozinho não trava o scroll por trás no Safari iOS (o
     conteúdo por trás ainda "respira" com o bounce/rubber-band) — por isso
     o JS também soma a classe .no-scroll no <body> enquanto o sheet tá
     aberto (ver toggleBodyScrollLock em js/app.js). */
  html.no-scroll, body.no-scroll{overflow:hidden; height:100%;}
  .moresheet.open{display:block; position:fixed; inset:0; z-index:200;}
  .moresheet .backdrop{position:absolute; inset:0; background:rgba(10,15,20,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);}
  /* Arquitetura em coluna flex: cabeçalho (Menu/Sair) e rodapé (Fechar) são
     filhos flex:none, fora do trecho que rola — só .sheetbody (a lista de
     atalhos no meio) cresce/encolhe e ganha scroll próprio. Sem isso, um
     <div> só com overflow-y:auto rolava TUDO junto, e "Sair"/"Fechar"
     saíam da tela dependendo de quanto a pessoa tivesse rolado.
     max-height usa dvh (viewport "dinâmico", desconta a barra de
     endereço/toolbar do Safari) com vh como fallback pra navegador antigo
     que não entende dvh — nunca só vh, que no Safari mede o viewport MÁXIMO
     (barra recolhida) e deixava o sheet mais alto do que a área visível de
     verdade, cortando o rodapé. */
  .moresheet .sheet{
    position:absolute; left:0; right:0; bottom:0;
    max-height:80vh; max-height:80dvh;
    display:flex; flex-direction:column;
    background:var(--surface); border-radius:18px 18px 0 0; box-shadow:var(--shadow);
    padding:10px 14px calc(14px + env(safe-area-inset-bottom)); animation:sheetup .18s ease;
  }
  .moresheet .handle{flex:none; width:36px; height:4px; border-radius:2px; background:var(--border-strong); margin:4px auto 10px;}
  .moresheet .sheethead{flex:none; display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .moresheet .sheethead h3{font-size:15px;}
  .moresheet .closebtn{padding:6px 14px; font-size:13px;}
  /* min-height:0 é o pulo do gato do flexbox aqui: sem isso um filho flex
     não encolhe além do tamanho do próprio conteúdo, e o scroll nunca
     entraria em ação (o .sheet inteiro cresceria em vez da lista rolar). */
  .moresheet .sheetbody{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
  .moresheet .navbtn{min-height:52px; font-size:15px;}
  .moresheet .sheetdivider{flex:none; border:none; border-top:1px solid var(--border); margin:8px 0;}
  .moresheet .sheetfoot{flex:none;}
  .moresheet .logoutbtn{color:var(--critical-text); border-color:var(--critical);}
  main{padding-bottom:calc(90px + env(safe-area-inset-bottom));}
}
@keyframes sheetup{from{transform:translateY(18px); opacity:.5;} to{transform:translateY(0); opacity:1;}}
@media (prefers-reduced-motion:reduce){ .moresheet .sheet{animation:none;} }

/* ---- Ficha do cliente: modal no desktop, bottom sheet no celular (ver
   abrirFichaModal/fecharFichaModal em js/app.js) — mesma arquitetura do
   .moresheet acima (backdrop + toggleBodyScrollLock), só que funciona em
   qualquer largura de tela, não só no celular. */
.fichaModal{position:fixed; inset:0; z-index:250; opacity:0; pointer-events:none; transition:opacity .15s ease;}
.fichaModal.open{opacity:1; pointer-events:auto;}
.fichaModal-backdrop{position:absolute; inset:0; background:rgba(10,15,20,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);}
.fichaModal-sheet{
  position:absolute; left:0; right:0; bottom:0; top:6vh;
  display:flex; flex-direction:column;
  background:var(--surface); border-radius:18px 18px 0 0; box-shadow:var(--shadow);
  transform:translateY(14px); transition:transform .18s ease;
}
.fichaModal.open .fichaModal-sheet{transform:translateY(0);}
/* Cabeçalho fixo: nome/contato/WhatsApp (montados por mostrarDossie no 2º
   parâmetro de abrirFichaModal) ficam SEMPRE visíveis, mesmo com o corpo
   rolado até o fim — antes, tudo isso era só a primeira coisa do conteúdo
   que rola, e sumia de vista assim que a pessoa descia a lista de cupons. */
.fichaModal-header{flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 14px 12px calc(16px + env(safe-area-inset-left)); border-bottom:1px solid var(--border);}
.fichaModal-header-content{min-width:0; flex:1 1 auto;}
.fichaModal-header-content h3{font-size:18px; margin-bottom:3px; text-wrap:balance;}
.fichaModal-header-content .fh-contato{font-size:12.5px; color:var(--ink-muted); line-height:1.5;}
.fichaModal-header-content .fh-acoes{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap;}
.fichaModal-close{flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--ink-2); font-size:15px; display:flex; align-items:center; justify-content:center;}
.fichaModal-close:hover{background:var(--surface-2); color:var(--ink);}
/* min-height:0 de novo é o pulo do gato do flexbox — sem isso o corpo não
   encolhe e o scroll nunca entra em ação (ver o mesmo truque em .moresheet). */
.fichaModal-body{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:16px calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));}

/* ---- Seções recolhíveis dentro da ficha (Uso das máquinas, Histórico,
   Pedidos de pacote) — <details> nativo, mesmo padrão do FAQ do site
   institucional, só que com um resumo à direita do título (ex.: "Sem uso
   identificado pelo app") pra dar pra entender o essencial sem nem abrir. */
.ficha-acc{border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; background:var(--surface); overflow:hidden;}
.ficha-acc summary{list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; min-height:44px;}
.ficha-acc summary::-webkit-details-marker{display:none;}
.ficha-acc summary::after{content:'›'; color:var(--ink-muted); font-size:20px; flex:none; transform:rotate(90deg); transition:transform .15s;}
.ficha-acc[open] summary::after{transform:rotate(270deg);}
.ficha-acc-resumo{font-weight:500; font-size:12.5px; color:var(--ink-muted); margin-left:auto; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ficha-acc-body{padding:2px 14px 14px; border-top:1px solid var(--border-soft, var(--border));}

/* ---- Cupons associados: cabeçalho com contagem + ações no topo (não
   depois de uma lista enorme), linhas compactas com badge de status. ---- */
.ficha-sec-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.ficha-sec-head h4{font-size:14.5px;}
.ficha-sec-acoes{display:flex; gap:8px; flex-wrap:wrap;}
.ficha-sec-acoes .btn{padding:7px 12px; font-size:12.5px; min-height:36px;}
.cupomrow{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed var(--border);}
.cupomrow:last-child{border-bottom:none;}
.cupomrow .cupomrow-codigo{font-family:"Jost",sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.02em;}
.cupomrow .badge{flex:none;}
.badge.status-nao{background:var(--surface-2); color:var(--ink-muted);}
.badge.status-parcial{background:var(--warning-bg); color:var(--warning-text);}
.badge.status-ok{background:var(--good-bg); color:var(--good-text);}
.cupomrow-del{flex:none; margin-left:auto; width:30px; height:30px; border-radius:8px; border:none; background:none; color:var(--ink-muted); font-size:14px; display:flex; align-items:center; justify-content:center;}
.cupomrow-del:hover{background:var(--critical-bg); color:var(--critical-text);}

/* ---- Histórico de cupons: 2 linhas por evento (código+quando, depois o
   responsável bem discreto) em vez de uma frase corrida só. ---- */
.histrow{padding:8px 0; border-bottom:1px dashed var(--border);}
.histrow:last-child{border-bottom:none;}
.histrow .hr-topo{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.histrow .hr-codigo{font-family:"Jost",sans-serif; font-weight:700; font-size:13.5px;}
.histrow .hr-evento{font-size:12px; font-weight:600;}
.histrow.removido .hr-evento{color:var(--critical-text);}
.histrow:not(.removido) .hr-evento{color:var(--good-text);}
.histrow .hr-quem{font-size:11px; color:var(--ink-muted); margin-top:1px;}
.histrow .hr-uso{font-size:11px; color:var(--ink-muted); margin-top:1px;}

.ficha-vertodos{padding:8px 0 0; background:none; border:none; color:var(--accent-2); font-weight:700; font-size:12.5px; cursor:pointer;}
@media (min-width:768px){
  .fichaModal-sheet{
    left:50%; right:auto; top:50%; bottom:auto;
    width:min(720px, calc(100vw - 64px)); max-height:min(720px, 85vh);
    border-radius:16px; transform:translate(-50%,-46%);
  }
  .fichaModal.open .fichaModal-sheet{transform:translate(-50%,-50%);}
}
@media (prefers-reduced-motion:reduce){ .fichaModal, .fichaModal-sheet{transition:none;} }

/* ---- Theme-swapped logo ---- */
.logo-dark{display:none;}
.logo-light{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-dark{display:block;}
  :root:not([data-theme="light"]) .logo-light{display:none;}
}
:root[data-theme="dark"] .logo-dark{display:block;}
:root[data-theme="dark"] .logo-light{display:none;}