:root{
  --bg:#ECEDE9; --surface:#FCFCFB; --surface-2:#F4F5F1; --surface-3:#E8EAE5;
  --line:#D7D9D2; --line-strong:#BDC1B8;
  --ink:#1A242B; --ink-2:#4A565E; --ink-3:#78848B;
  --accent:#14567F; --accent-ink:#FFFFFF; --accent-soft:#E2ECF3; --accent-line:#A9C6DA;
  --signal:#96660F; --signal-soft:#F6EBD5;
  --pos:#1E6E4F; --pos-soft:#DEEDE5;
  --neg:#A2392F; --neg-soft:#F5E2DF;
  --s1:#0C6FB0; --s2:#B0472B; --s1-soft:#DCEAF5; --s2-soft:#F6E3DC;
  --shadow:0 1px 2px rgba(20,34,43,.06), 0 6px 18px -8px rgba(20,34,43,.18);
  --shadow-lg:0 2px 4px rgba(20,34,43,.08), 0 24px 48px -16px rgba(20,34,43,.28);
  --r:6px; --r-lg:10px;
  --nav-w:216px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0F171D; --surface:#17222A; --surface-2:#1C2830; --surface-3:#23313A;
  --line:#2B3A44; --line-strong:#3E515D;
  --ink:#E7ECEF; --ink-2:#A8B5BD; --ink-3:#7B8A93;
  --accent:#61A8D2; --accent-ink:#0F171D; --accent-soft:#1A2E3C; --accent-line:#2F5570;
  --signal:#DCA83C; --signal-soft:#312814;
  --pos:#63AC89; --pos-soft:#16281F;
  --neg:#DC7C71; --neg-soft:#2E1B18;
  --s1:#3392C9; --s2:#D26A4E; --s1-soft:#152B3A; --s2-soft:#31201A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0F171D; --surface:#17222A; --surface-2:#1C2830; --surface-3:#23313A;
  --line:#2B3A44; --line-strong:#3E515D;
  --ink:#E7ECEF; --ink-2:#A8B5BD; --ink-3:#7B8A93;
  --accent:#61A8D2; --accent-ink:#0F171D; --accent-soft:#1A2E3C; --accent-line:#2F5570;
  --signal:#DCA83C; --signal-soft:#312814;
  --pos:#63AC89; --pos-soft:#16281F;
  --neg:#DC7C71; --neg-soft:#2E1B18;
  --s1:#3392C9; --s2:#D26A4E; --s1-soft:#152B3A; --s2-soft:#31201A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.45; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{margin:0; font-weight:600; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}

.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.eyebrow{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.pos{color:var(--pos)} .neg{color:var(--neg)} .sig{color:var(--signal)}
.nowrap{white-space:nowrap}

/* ---------- app shell ---------- */
.app{display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); min-height:100vh}
.nav{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:auto;
}
/* A marca do PRODUTO manda na barra: o Aprumo em cima, e embaixo, menor, o
   nome da empresa daquela conta. É a hierarquia certa quando o sistema é
   vendido: quem abre vê o produto, e a linha de baixo diz de quem é a conta —
   e passa a dizer o nome do cliente sem ninguém mexer em nada. */
.brand{padding:16px 16px 13px; border-bottom:1px solid var(--line)}
.brand-mark{
  width:30px; height:30px; border-radius:5px; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:700; font-size:12px; letter-spacing:.02em; flex:none;
}
.brand-name{font-weight:700; font-size:14px; line-height:1.15}
.brand-sub{font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; margin-top:7px; line-height:1.35}
/* O logotipo do produto é vetor embutido, sem fundo: o corpo dele é
   currentColor, então segue o --accent e clareia sozinho no tema escuro,
   sobre a cor da tela — nunca sobre um retângulo próprio. */
.brand-produto{display:block; color:var(--accent); line-height:0}
.brand-produto svg{display:block; height:20px; width:auto}
.brand-sub-produto{display:block; margin-top:4px; color:var(--accent); line-height:0}
.brand-sub-produto svg{display:block; height:13px; width:auto}
/* a mesma marca abrindo a tela de entrada e a de convite */
.marca-entrada{margin-bottom:22px}
.marca-entrada .brand-produto svg{height:26px}
.marca-entrada .brand-sub{margin-top:9px}
.navlist{padding:10px 8px; display:flex; flex-direction:column; gap:1px; flex:1}
.navbusca{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 10px 0; padding:7px 10px;
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface-2); color:var(--ink-3);
  font:inherit; font-size:12.5px; cursor:pointer; text-align:left;
}
.navbusca:hover{border-color:var(--accent); color:var(--ink)}
.navbusca kbd{font-size:10px}
.navbusca.navia{margin-top:6px}
.drawer.busca{width:min(640px,calc(100vw - 32px)); top:12vh; transform:translate(-50%,0); max-height:76vh}
.drawer.busca.on{transform:translate(-50%,0)}
.drawer.busca .drawer-foot{display:none}
.bg-lista{margin-top:10px; max-height:52vh; overflow:auto; display:flex; flex-direction:column; gap:2px}
.bg-item{display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; border:0; border-radius:var(--r); background:transparent; text-align:left; cursor:pointer; font:inherit; color:var(--ink)}
.bg-item:hover, .bg-item.sel{background:var(--accent-soft)}
.bg-tipo{flex:none; width:118px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3)}
.bg-txt{display:flex; flex-direction:column; min-width:0}
.bg-titulo{font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bg-sub{font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.navgrupo{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:12px 10px 4px; font-weight:600}
.navgrupo:first-child{padding-top:2px}
.navbtn{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:var(--r);
  background:none; text-align:left; cursor:pointer; color:var(--ink-2); font-size:13.5px; font-weight:500;
}
.navbtn:hover{background:var(--surface-2); color:var(--ink)}
.navbtn[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.navbtn svg{width:17px; height:17px; flex:none}
.navbtn .badge{margin-left:auto}
/* o botão "Mais" só existe na barra de baixo do celular */
.navbtn.navmais{display:none}
.navfoot{padding:10px 12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:10px 20px; flex-wrap:wrap;
}
.topbar h1{font-size:17px}
.topbar .spacer{flex:1}
.content{padding:18px 20px 56px; max-width:1360px; width:100%}
.section{margin-bottom:22px}
.section-head{display:flex; align-items:flex-end; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.section-head h2{font-size:14px}
.section-head .spacer{flex:1}

/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn svg{width:15px; height:15px}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn-primary:hover{background:var(--accent); filter:brightness(1.08)}
.btn-ghost{border-color:transparent; background:none; color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn-danger{color:var(--neg); border-color:var(--line-strong)}
.btn-danger:hover{background:var(--neg-soft)}
.btn-sm{padding:4px 8px; font-size:12px}
.btn:disabled{opacity:.5; cursor:not-allowed}

.field{display:flex; flex-direction:column; gap:4px; min-width:0}
.field > label{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.input, select.input, textarea.input{
  width:100%; padding:7px 9px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); font-size:13.5px;
}
textarea.input{min-height:74px; resize:vertical; line-height:1.5}
.input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.input[readonly]{background:var(--surface-2); color:var(--ink-2); cursor:not-allowed}
.input.num{text-align:right}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.filters{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px}
.filters .field{width:auto; min-width:130px}

/* ---------- surfaces ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.panel-head{padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.panel-head h3{font-size:13px}
.panel-body{padding:14px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.stat{background:var(--surface); padding:13px 15px; display:flex; flex-direction:column; gap:3px}
.stat .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:22px; font-weight:600; letter-spacing:-.02em}
.stat .k{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.stat .sub{font-size:11.5px; color:var(--ink-2)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
table.t{width:100%; border-collapse:collapse; font-size:13px; min-width:520px}
table.t th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:9px 10px; border-bottom:1px solid var(--line); background:var(--surface-2);
  position:sticky; top:0; z-index:1; white-space:nowrap;
}
table.t th.num, table.t td.num{text-align:right}
table.t td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:var(--surface-2)}
table.t tr.group td{background:var(--surface-3); font-weight:600; font-size:12px; letter-spacing:.02em}
table.t tfoot td{padding:9px 10px; border-top:2px solid var(--line-strong); font-weight:600; background:var(--surface-2)}
.rowact{display:flex; gap:4px; justify-content:flex-end}
.empty{padding:28px 16px; text-align:center; color:var(--ink-3); font-size:13px}

/* ---------- pills & bars ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:100px;
  font-size:11px; font-weight:600; letter-spacing:.02em; border:1px solid transparent; white-space:nowrap;
}
.pill::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}
.pill.n{background:var(--surface-3); color:var(--ink-2)}
.pill.a{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}
.pill.g{background:var(--pos-soft); color:var(--pos)}
.pill.w{background:var(--signal-soft); color:var(--signal)}
.pill.r{background:var(--neg-soft); color:var(--neg)}
.badge{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:4px;
  background:var(--surface-3); color:var(--ink-2)}
.badge.r{background:var(--neg-soft); color:var(--neg)}
.badge.w{background:var(--signal-soft); color:var(--signal)}

.bar{display:block; height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; min-width:56px; max-width:160px}
.bar > i{display:block; height:100%; border-radius:3px; background:var(--accent)}
.bar.two{height:14px; display:flex; flex-direction:column; gap:2px; background:none; overflow:visible}
.bar.two > i{height:6px; background:var(--surface-3); border-radius:3px; position:relative}
.bar.two > i > b{position:absolute; inset:0 auto 0 0; border-radius:3px; display:block}

.alertlist{display:flex; flex-direction:column; gap:1px; background:var(--line)}
.alert{display:flex; gap:10px; align-items:flex-start; padding:10px 14px; background:var(--surface); border-left:3px solid var(--line-strong)}
.alert.r{border-left-color:var(--neg)} .alert.w{border-left-color:var(--signal)} .alert.a{border-left-color:var(--accent)}
.alert.g{border-left-color:var(--pos)}
.alert .t{font-weight:600; font-size:12.5px}
.alert .d{font-size:12px; color:var(--ink-2)}
.alert .spacer{flex:1}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto}
.tab{
  padding:8px 12px; border:0; background:none; cursor:pointer; font-size:13px; font-weight:500;
  color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tabs.agrupadas{flex-wrap:wrap; gap:0 18px; overflow:visible; row-gap:2px}
.tabbloco{display:flex; align-items:flex-end; gap:2px}
.tabgrupo{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:0 4px 10px 0; align-self:flex-end}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}

/* ---------- drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(15,23,29,.45); z-index:40; opacity:0; pointer-events:none; transition:opacity .18s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(560px,100vw); background:var(--bg); z-index:41;
  border-left:1px solid var(--line); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .2s ease;
  display:flex; flex-direction:column;
}
.drawer.on{transform:none}
.drawer.largo{width:min(960px,100vw)}
/* a variante central: caixa pequena para confirmar, não para preencher */
.drawer.modal{top:50%; left:50%; right:auto; bottom:auto; width:min(440px,calc(100vw - 32px)); max-height:calc(100vh - 32px);
  border:1px solid var(--line); border-radius:var(--r-lg); transform:translate(-50%,-50%) scale(.96); opacity:0; transition:transform .16s ease,opacity .16s}
.drawer.modal.on{transform:translate(-50%,-50%); opacity:1}
.drawer.modal .drawer-body{padding:18px 18px 6px}
.btn-danger{background:var(--neg); color:#fff; border-color:var(--neg)}
.btn-danger:hover{filter:brightness(.92)}
.drawer-head{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface)}
.drawer-head h2{font-size:15px}
/* `min-height:0` não é enfeite: sem ele um item de flex não encolhe abaixo do
   próprio conteúdo, o corpo da gaveta cresce junto com uma tabela longa e
   empurra o rodapé — com o botão de salvar — para fora da tela. */
.drawer-body{padding:18px; overflow:auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:14px}
.drawer-foot{padding:12px 18px; border-top:1px solid var(--line); background:var(--surface); display:flex; gap:8px; justify-content:flex-end}

/* ---------- toast ---------- */
.toasts{position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{background:var(--ink); color:var(--bg); padding:9px 14px; border-radius:var(--r); font-size:13px; box-shadow:var(--shadow-lg); max-width:min(420px,92vw)}
.toast.err{background:var(--neg); color:#fff}

/* ---------- banner ---------- */
.banner{
  display:flex; gap:12px; align-items:center; padding:10px 14px; border-radius:var(--r-lg);
  background:var(--signal-soft); border:1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  color:var(--ink); font-size:12.5px; margin-bottom:16px; flex-wrap:wrap;
}
.banner .spacer{flex:1}
.banner strong{color:var(--signal)}
/* variantes: w continua no tom de aviso, r é o que não pode passar batido */
.banner.w{background:var(--signal-soft); border-color:color-mix(in srgb, var(--signal) 35%, transparent)}
.banner.w strong{color:var(--signal)}
.banner.r{background:var(--neg-soft); border-color:color-mix(in srgb, var(--neg) 35%, transparent)}
.banner.r strong{color:var(--neg)}
/* o convite para deixar o sistema na tela de início é informação, não aviso */
.banner.instalar{background:var(--accent-soft); border-color:var(--accent-line)}
.banner.instalar strong{color:var(--accent)}

/* ---------- photos ---------- */
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px}
.photo{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.photo img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; max-width:100%}
.photo .cap{padding:4px 6px; font-size:11px; color:var(--ink-2); border-top:1px solid var(--line)}
/* a descrição da foto se digita embaixo dela mesma; o texto só aparece
   impresso, quando o campo de digitar sai da folha */
.photo .cap-inp{width:100%; border:0; background:transparent; font:inherit; color:var(--ink);
  padding:1px 0; outline-offset:2px}
.photo .cap-inp::placeholder{color:var(--ink-3)}
.photo .cap-inp:focus{outline:2px solid var(--accent); border-radius:3px}
.soprint{display:none}
.photo .del{position:absolute; top:4px; right:4px; border:0; border-radius:4px; background:rgba(15,23,29,.72); color:#fff;
  width:22px; height:22px; cursor:pointer; font-size:13px; line-height:1; display:grid; place-items:center}

/* ---------- chart ---------- */
.chart{width:100%; height:auto; display:block; overflow:visible}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-bottom:8px}
.legend .k{display:inline-flex; align-items:center; gap:6px}
.legend .sw{width:10px; height:10px; border-radius:2px; flex:none}
.tip{position:fixed; z-index:70; pointer-events:none; background:var(--ink); color:var(--bg); padding:7px 9px;
  border-radius:var(--r); font-size:12px; box-shadow:var(--shadow-lg); opacity:0; transition:opacity .1s; max-width:240px}
.tip.on{opacity:1}
.tip .tk{display:flex; justify-content:space-between; gap:12px}

/* ---------- lembretes do diário ---------- */
/* caixinha de marcar do tamanho do dedo, que é como se escolhem os dias
   da semana e quem recebe o aviso */
.escolha{
  display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--surface); cursor:pointer;
  font-size:13px; user-select:none; min-height:38px;
}
.escolha.larga{display:flex; width:100%}
.escolha:has(input:checked){background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600}
.escolha input{width:16px; height:16px; flex:none; margin:0}
.horario{display:inline-flex; align-items:center; gap:2px}
.horario .input{width:auto; min-width:104px}

/* ---------- formulários em grade ---------- */
.formgrid{display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:12px}

/* ---------- menu "Mais" do celular ---------- */
.menu-sheet{display:flex; flex-direction:column; gap:2px}
.menu-item{
  display:flex; align-items:center; gap:12px; width:100%; padding:13px 12px; border:0;
  border-radius:var(--r); background:none; text-align:left; cursor:pointer;
  color:var(--ink); font-size:15px; font-weight:500; min-height:48px;
}
.menu-item svg{width:19px; height:19px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; color:var(--ink-3)}
.menu-item.atual{background:var(--accent-soft); color:var(--accent); font-weight:600}
.menu-item.atual svg{color:var(--accent)}
.menu-conta{border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:10px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .nav{
    position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; z-index:30;
    flex-direction:row; border-right:0; border-top:1px solid var(--line); overflow:visible;
    /* a faixa do indicador de início do iPhone fica por baixo da barra */
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(10px);
  }
  .brand,.navfoot{display:none}
  .navlist{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:4px 4px 2px; gap:0}
  /* só os quatro do dia a dia e o "Mais"; o resto abre na folha */
  .navbtn{display:none}
  .navgrupo{display:none}
  .navbusca{display:none}
  .bg-tipo{width:76px}
  .navbtn.fixo,.navbtn.navmais{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    font-size:10.5px; padding:7px 2px; min-width:0; min-height:50px; text-align:center; font-weight:600;
  }
  .navbtn span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .navbtn svg{width:20px; height:20px}
  .navbtn .badge{display:none}

  /* espaço para a barra de baixo mais o indicador de início; de lado, o
     entalhe da tela come a margem esquerda quando o telefone fica deitado */
  .content{padding:14px calc(14px + env(safe-area-inset-right,0px)) calc(96px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px))}
  .topbar{padding:9px calc(14px + env(safe-area-inset-right,0px)) 7px calc(14px + env(safe-area-inset-left,0px)); gap:8px}
  .topbar h1{font-size:18px; width:100%}
  .topbar .spacer{display:none}
  /* as ações do topo deslizam de lado em uma linha só, em vez de empilhar */
  #topActions{display:flex; gap:8px; width:100%; overflow-x:auto; padding-bottom:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  #topActions::-webkit-scrollbar{display:none}
  #topActions > *{flex:none}
  .grid2,.grid3,.formgrid{grid-template-columns:1fr}
  /* fila com quatro botões ou mais vira faixa que corre de lado: empilhados,
     os nove botões da planilha empurravam a tabela para quatro telas abaixo */
  .row:has(> button:nth-of-type(4)){flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px}
  .row:has(> button:nth-of-type(4))::-webkit-scrollbar{display:none}
  .row:has(> button:nth-of-type(4)) > *{flex:none}
  .drawer{width:100vw; border-left:0}
  .drawer-body{padding:16px 14px}
  .drawer-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px))}
  .drawer-foot .btn{flex:1; justify-content:center}

  /* dedo não acerta alvo de 27px: Apple pede 44pt, aqui vai 42 com folga */
  .btn{min-height:42px; padding:9px 14px; font-size:14px}
  .btn-sm{min-height:40px; padding:9px 13px; font-size:13.5px}
  .tab{padding:11px 13px; font-size:14px; min-height:44px}
  .tabs{gap:0; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  /* no celular a barra volta a ser uma linha rolável, sem os rótulos */
  .tabs.agrupadas{flex-wrap:nowrap; overflow-x:auto; gap:0}
  .tabgrupo{display:none}
  .tabs::-webkit-scrollbar{display:none}

  /* abaixo de 16px o Safari dá zoom sozinho ao tocar no campo e desalinha
     a tela inteira; o tamanho aqui é o que impede esse pulo */
  .input,select.input,textarea.input,input,select,textarea{font-size:16px}
  .input,select.input{padding:10px 11px}
  select.input{min-height:44px}
  input[type=checkbox],input[type=radio]{width:20px; height:20px}
  .field > label{font-size:11.5px}

  /* empilhados, os cinco filtros ocupavam a tela inteira antes da primeira
     linha de dados; lado a lado cabem em dois toques de rolagem.
     O !important é para vencer o min-width escrito na própria tag. */
  .filters{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:end}
  .filters .field{width:auto; min-width:0!important}
  .filters > .btn,.filters > .row,.filters > .spacer{grid-column:1/-1}

  .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .stat{padding:11px 13px}
  .stat .v{font-size:17px}
  .stat .k{font-size:10px; letter-spacing:.06em}

  .photos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .photo .del{width:30px; height:30px; font-size:15px}
  /* a descrição da foto é digitada em pé na obra: abaixo de 16px o Safari
     dá zoom e joga a foto para fora da tela */
  .photo .cap{padding:6px 8px}
  .photo .cap-inp{font-size:16px; padding:3px 0}
  /* cabeçalho do dia: data, clima e botões não cabem numa linha só */
  .panel-head{flex-wrap:wrap; row-gap:6px}
  .toasts{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  /* título em cima, botões embaixo: lado a lado eles se atropelavam e o
     espaçador jogava um deles para a linha de cima */
  .section-head{align-items:center; row-gap:8px}
  .section-head h2{font-size:15px; width:100%}
  .section-head .spacer{display:none}
  .panel-head h3{font-size:14px}
}

/* ---------- tabela vira cartão no celular ---------- */
@media (max-width:760px){
  .tablewrap{overflow-x:visible; border:0; background:none; border-radius:0}
  /* A largura mínima vai escrita na própria tag, para a tabela não se espremer
     no computador — e por isso só um !important a desfaz aqui. Sem isto a
     tabela seguia com 900px no telefone de 414px: o rótulo ficava na tela e o
     valor, 360px à direita, fora dela. Era o radar aparecendo vazio no celular. */
  table.t{min-width:0 !important; width:100%; display:block; font-size:14px}
  table.t thead{display:none}
  table.t tbody,table.t tfoot{display:block}
  table.t tbody tr{
    display:block; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); margin-bottom:8px; overflow:hidden;
  }
  table.t tbody tr:hover{background:var(--surface)}
  /* A célula volta a ser bloco e o rótulo sai do fluxo, preso à esquerda.

     Com grid de duas colunas, cada filho da célula virava um item: a partir do
     terceiro eles caíam em linhas novas, o primeiro deles debaixo do rótulo e o
     seguinte para fora da tela. Era o que fazia a data da sessão, o prazo e o
     valor sumirem do radar no telefone — e qualquer célula com mais de um
     pedaço tinha o mesmo destino. Em bloco, o conteúdo empilha como deve,
     seja ele um número só ou meia dúzia de linhas. */
  table.t td{
    display:block; padding:9px 12px; border-bottom:1px solid var(--line); text-align:left;
  }
  table.t td[data-col]{position:relative; padding-left:40%; min-height:34px}
  table.t td[data-col]::before{
    content:attr(data-col); position:absolute; left:12px; top:9px; width:calc(40% - 22px);
    text-align:left; font-size:10px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-3); line-height:1.5;
  }
  table.t td.num{text-align:right}
  /* célula sem valor só ocuparia espaço no cartão */
  table.t td[data-vazio="1"]{display:none}
  /* o que atravessa a linha inteira é faixa de etapa, e continua faixa */
  table.t td[colspan]{display:block; font-weight:600; padding-left:12px}
  table.t td[colspan]::before{content:none}
  table.t tbody tr td:last-child{border-bottom:0}
  /* a coluna de botões fica sozinha no rodapé do cartão */
  table.t td:has(.rowact){display:block; background:var(--surface-2)}
  table.t td:has(.rowact)::before{content:none}
  .rowact{justify-content:flex-start; flex-wrap:wrap; gap:6px}
  table.t tr.group td{background:var(--surface-3); display:block}
  table.t tr.group td::before{content:none}
  table.t tfoot tr{display:block; background:var(--surface-2); border:1px solid var(--line-strong);
    border-radius:var(--r-lg); margin-top:4px}
  table.t tfoot td{border-top:0; border-bottom:1px solid var(--line)}
  table.t tfoot tr td:last-child{border-bottom:0}
  .empty{padding:24px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
}
@media print{
  .nav,.topbar,.drawer,.scrim,.rowact,.noprint{display:none!important}
  .soprint{display:inline!important}
  .app{grid-template-columns:1fr} body{background:#fff}
  .panel,.tablewrap{break-inside:avoid}
}

/* ---------- tela de login e instalação ---------- */
body.tela-login{
  min-height:100vh; display:grid; place-items:center;
  /* com a tela cobrindo o entalhe, a margem de lado vem do próprio aparelho */
  padding:calc(24px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px))
          calc(24px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
  background:var(--bg); color:var(--ink);
}
.cartao-login{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:26px 24px;
  display:flex; flex-direction:column; gap:14px;
}
.cartao-login h1{font-size:19px; letter-spacing:-.015em}
.cartao-login form{display:flex; flex-direction:column; gap:12px}
.cartao-login .btn{justify-content:center; padding:9px 14px}
.cartao-login p{font-size:13px; line-height:1.6}
.cartao-login code{font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px}
.erro{color:var(--neg); background:var(--neg-soft); border:1px solid color-mix(in srgb, var(--neg) 30%, transparent);
  border-radius:var(--r); padding:8px 10px; font-size:13px}
.ok{color:var(--pos); background:var(--pos-soft); border:1px solid color-mix(in srgb, var(--pos) 30%, transparent);
  border-radius:var(--r); padding:8px 10px; font-size:13px}
.aviso{color:var(--ink); background:var(--signal-soft); border:1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  border-radius:var(--r); padding:8px 10px; font-size:13px}
.rodape-login{font-size:11.5px; color:var(--ink-3); text-align:center; margin-top:4px}
.login-cadastro{text-align:center; border-top:1px solid var(--line); padding-top:12px; color:var(--ink-2)}
.login-cadastro a{color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap}
.login-cadastro a:hover{text-decoration:underline}
.cartao-login.largo{max-width:520px}
.cartao-login.legal{max-width:760px; padding:30px 30px 26px}
.legal-versao{font-size:12.5px; margin-top:-8px}
.legal-texto{font-size:14.5px; line-height:1.68; color:var(--ink)}
.legal-texto h2{font-size:16px; margin:22px 0 8px; letter-spacing:-.01em}
.legal-texto p{font-size:14.5px; line-height:1.68; margin:0 0 10px}
.legal-texto ul{margin:0 0 10px; padding-left:20px}
.legal-texto li{margin-bottom:6px}
.legal-texto a, .cadastro-aceite a, .rodape-login a{color:var(--accent)}
.cadastro-aceite{display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.5}
.cadastro-aceite input{margin-top:3px; flex:none; width:17px; height:17px}
@media (max-width:480px){.cartao-login.legal{padding:22px 18px}}
.cartao-login .duas{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cartao-login .duas.cidade{grid-template-columns:1fr 84px}
@media (max-width:480px){.cartao-login .duas{grid-template-columns:1fr}.cartao-login .duas.cidade{grid-template-columns:1fr 84px}}
.cartao-login .secao{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-top:4px}
.cartao-login .isca{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden}
.faixa-teste{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--signal-soft);
  border:1px solid color-mix(in srgb, var(--signal) 35%, transparent); border-radius:var(--r); padding:8px 12px; font-size:13px; margin-bottom:14px}
.faixa-teste strong{font-weight:700}
.faixa-teste.urgente{background:var(--neg-soft); border-color:color-mix(in srgb, var(--neg) 30%, transparent)}

/* ---------- identificação do usuário logado ---------- */
.usuario-box{display:flex; align-items:center; gap:9px}
.usuario-ini{
  width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:11px; font-weight:700; flex:none;
  /* virou botão para trocar a foto: sem cara de botão, mas com o cursor certo */
  border:0; padding:0; cursor:pointer; overflow:hidden; font-family:inherit;
}
.usuario-ini:hover{ filter:brightness(1.12) }
.usuario-ini:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.usuario-ini.com-foto{ background:transparent }
.usuario-ini img{ width:100%; height:100%; object-fit:cover; display:block }
/* a mesma foto, grande, na janela de trocá-la */
.perfil-previa{
  width:96px; height:96px; border-radius:50%; margin:0 auto; overflow:hidden;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:30px; font-weight:700;
}
.perfil-previa.com-foto{ background:transparent }
.perfil-previa img{ width:100%; height:100%; object-fit:cover; display:block }
.usuario-nome{font-size:12.5px; font-weight:600; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.usuario-perfil{font-size:10.5px; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase}

/* ============================ menu de linha da planilha ============================

   Passar o mouse sobre a linha revela as ações dela. É CSS puro de propósito:
   desenhar a tela inteira a cada movimento do cursor seria insuportável numa
   planilha de dois mil itens, e ouvinte preso a elemento se perde no próximo
   desenho. O menu mora DENTRO da linha, então entrar nele com o cursor mantém
   o `:hover` da linha — é o que impede o menu de fugir enquanto se caminha até
   ele — e ele acompanha a linha quando a página rola, sem cálculo nenhum.

   Só um menu fica aberto: enquanto o ponteiro estiver sobre o corpo da tabela,
   o da linha selecionada some e vale o da linha sob o cursor. */
.orcx-acoes{position:relative}
.orcx-menu{
  position:absolute; top:100%; right:2px; z-index:30; min-width:206px;
  padding:5px; text-align:left;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transform:translateY(-3px);
  /* o atraso ao sair evita o efeito de piscar quando o cursor cruza a linha */
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear .28s;
}
/* nas últimas linhas o menu abre para cima, para não ser cortado pela moldura */
.orcx-menu.paracima{top:auto; bottom:100%; transform:translateY(3px)}
table.t tbody tr:hover > td > .orcx-menu,
table.t tbody tr:focus-within > td > .orcx-menu,
table.t tbody tr.orcx-sel > td > .orcx-menu{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .12s ease .06s, transform .12s ease .06s, visibility 0s;
}
/* com o ponteiro na tabela, quem manda é a linha sob ele — nunca dois abertos */
table.t tbody:hover tr.orcx-sel:not(:hover):not(:focus-within) > td > .orcx-menu{
  opacity:0; visibility:hidden; transition:opacity .1s ease, visibility 0s linear .1s;
}
.orcx-menu button{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:7px 9px; border:0; border-radius:var(--r-sm); background:transparent;
  font:inherit; font-size:12.5px; color:var(--ink); text-align:left; cursor:pointer;
}
.orcx-menu button:hover, .orcx-menu button:focus-visible{background:var(--accent-soft); color:var(--accent)}
.orcx-menu button.perigo{color:var(--neg)}
.orcx-menu button.perigo:hover, .orcx-menu button.perigo:focus-visible{background:var(--neg-soft); color:var(--neg)}
.orcx-menu .ic{flex:none; width:17px; text-align:center; font-size:13px; opacity:.85}
.orcx-menu hr{border:0; border-top:1px solid var(--line); margin:4px 2px}
kbd{font-family:'IBM Plex Mono',monospace; font-size:11px; padding:1px 5px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:4px; background:var(--surface-2); color:var(--ink-2)}
/* menu suspenso da barra de ações: a mesma cara do menu da linha */
.dd{position:relative; display:inline-block}
.dd-seta{font-size:10px; opacity:.7; margin-left:2px}
.dd-menu{
  position:absolute; top:100%; left:0; z-index:31; min-width:220px; margin-top:4px;
  padding:5px; text-align:left; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-lg); box-shadow:0 10px 26px rgba(0,0,0,.18); display:none;
}
.dd.on .dd-menu{display:block}
.dd-menu button{
  display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border:0; border-radius:var(--r);
  background:transparent; font:inherit; font-size:12.5px; color:var(--ink); text-align:left; cursor:pointer; white-space:nowrap;
}
.dd-menu button:hover, .dd-menu button:focus-visible{background:var(--accent-soft); color:var(--accent)}
.dd-menu button.perigo{color:var(--neg)}
.dd-menu button.perigo:hover{background:var(--neg-soft); color:var(--neg)}
.dd-menu .ic{flex:none; width:17px; text-align:center; font-size:13px; opacity:.85}
.dd-menu hr{border:0; border-top:1px solid var(--line); margin:4px 2px}
/* destaque discreto da linha sob o cursor, sem mexer no que já existia */
table.t tbody tr.orcx-sel > td{background:var(--accent-soft)}
table.t tbody tr.orcx-sel.group > td{background:var(--accent-soft)}

/* Sem hover não há menu: no toque, encostar na linha seleciona e é a seleção
   que mostra as ações. O botão de três pontos faz a mesma coisa, para quem
   prefere um alvo claro. */
@media (hover:none){
  .orcx-menu{transition:opacity .1s ease, visibility 0s}
  table.t tbody tr:hover > td > .orcx-menu{opacity:0; visibility:hidden}
  table.t tbody tr.orcx-sel > td > .orcx-menu{opacity:1; visibility:visible}
  .orcx-menu button{padding:11px 10px; font-size:13.5px}
}

/* ---------- assinatura ---------- */
.planos-ass{display:grid; gap:8px; margin-bottom:12px}
.plano-ass{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; cursor:pointer; font-size:13.5px; line-height:1.5}
.plano-ass:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.plano-ass input{margin-top:3px}