/* ============================================================
   BENETTON — MODO APLICAÇÃO v5.0
   Carregue depois de benetton.css. Não substitui: acrescenta.

   O sistema do site foi feito para vender — fundo preto, hero
   grande, canto reto, respiro de 104px. Ferramenta de trabalho
   é outra coisa: três pessoas olhando lista de lead o dia
   inteiro. Pede superfície mais macia.

   EXCEÇÕES DECLARADAS deste modo, e só dele:
     · o canto arredondado vira o padrão (o site continua reto)
     · no claro, a sombra substitui o traço em cartão
   As duas estão documentadas com o motivo na seção 16 do
   DESIGN.md. Nada disso vale fora de data-surface="app|app-dark".

   Referências: estética de painel SaaS — tudo em cartão, canto
   arredondado, sombra leve, bastante respiro. Comportamento do
   Pipedrive — coluna de funil com contagem e total, arrastar
   entre etapas, motivo obrigatório na perda.

   Ordem do arquivo
   1  Superfícies, escala densa e forma
   2  Cores de estado
   3  Estrutura da tela
   4  Cartão
   5  Barra de ferramentas e busca
   6  Indicador (.stat)
   7  Tabela
   8  Funil
   9  Painel lateral e ficha
   10 Menu, modal e aviso
   11 Estados: vazio, carregando, erro
   12 Paginação e utilitários
   13 Destaque
   ============================================================ */

/* [hidden] tem que vencer qualquer display do componente. */
[hidden]{ display:none !important; }

/* ---------- 1. SUPERFÍCIES, ESCALA DENSA E FORMA ---------- */
[data-surface="app"]{
  --bg:var(--off-300);              /* #F6F6F6 — fundo da tela  */
  --bg-alt:#EFEFEC;
  --bg-deep:#E8E7E1;
  --surface:var(--off-100);         /* #FBFAF7 — cartão         */
  --surface-hi:var(--off-200);      /* #F8F8F7 — faixa alternada*/
  --fg:var(--black-900);
  --fg-muted:var(--ink-70);
  --fg-faint:var(--ink-45);
  --line:var(--ink-14);
  --line-soft:var(--ink-08);
  --line-hair:rgba(15,15,15,.045);
  --accent:var(--green-700);
  --accent-hi:var(--green-800);
  --accent-text:var(--green-700);
  --accent-soft:var(--green-50);    /* #D6E4D1 — destaque suave */
  --on-accent:var(--cream);
  --btn-bg:var(--green-700);
  --btn-bg-hover:var(--green-900);
  --btn-fg:var(--cream);

  --row-hover:rgba(15,15,15,.032);
  --row-active:rgba(18,61,28,.06);
  --focus-ring:rgba(18,61,28,.28);

  /* Elevação própria do modo claro. Bem mais leve que a do
     site, que foi calibrada para funcionar sobre preto.        */
  --sh-app:0 1px 2px rgba(15,15,15,.04), 0 8px 24px rgba(15,15,15,.06);
  --sh-pop:0 4px 12px rgba(15,15,15,.08), 0 16px 40px rgba(15,15,15,.12);

  /* No claro o cartão se separa por sombra. Sem traço junto. */
  --card-bg:var(--surface);
  --card-bd:transparent;
  --card-sh:var(--sh-app);

  color-scheme:light;
}

[data-surface="app-dark"]{
  --bg:#111111;
  --bg-alt:#171717;
  --bg-deep:#0B0B0B;
  --surface:#1A1A1A;
  --surface-hi:#212121;
  --fg:var(--cream);
  --fg-muted:var(--cream-70);
  --fg-faint:var(--cream-45);
  --line:var(--cream-20);
  --line-soft:var(--cream-10);
  --line-hair:var(--cream-06);
  --accent:var(--green-100);
  --accent-hi:#A8C79E;
  --accent-text:var(--green-100);
  --accent-soft:rgba(143,181,133,.14);
  --on-accent:var(--black-900);
  --btn-bg:var(--cream);
  --btn-bg-hover:var(--cream-deep);
  --btn-fg:var(--black-900);

  --row-hover:rgba(235,233,221,.045);
  --row-active:rgba(143,181,133,.10);
  --focus-ring:rgba(143,181,133,.40);

  --sh-app:none;
  --sh-pop:0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);

  /* Sombra não lê sobre preto. No escuro o cartão volta a se
     separar por traço de 1px — a regra antiga do sistema.      */
  --card-bg:var(--surface);
  --card-bd:var(--line-soft);
  --card-sh:none;

  color-scheme:dark;
}

[data-surface="app"],
[data-surface="app-dark"]{
  /* Tipografia densa. Fixa, não fluida — ferramenta não muda
     de tamanho com a janela.                                  */
  --fa-xs:11px;    /* rótulo de coluna, caixa alta      */
  --fa-sm:12px;    /* data, metadado, texto de apoio    */
  --fa-base:13px;  /* célula de tabela                  */
  --fa-md:14px;    /* texto padrão da interface         */
  --fa-lg:16px;    /* título de cartão                  */
  --fa-xl:20px;    /* título de tela                    */
  --fa-2xl:26px;
  --fa-3xl:32px;   /* número de indicador               */

  --la-tight:1.2;
  --la-base:1.45;
  --ta-label:0.06em;
  --ta-base:-0.006em;

  /* Forma. EXCEÇÃO: aqui o arredondado é o padrão.
     Os valores vêm dos raios que o sistema já tem.            */
  --r-card:var(--r-3);     /* 16px — cartão, painel, modal     */
  --r-ctl:var(--r-2);      /* 8px  — campo, botão, etiqueta    */
  --r-in:var(--r-2);       /* 8px  — cartão dentro de cartão   */

  /* Espaço. Nomes próprios para não brigar com a escala do
     site. Tudo continua múltiplo de 4.                        */
  --pa-card:var(--s6);     /* 24px — respiro interno do cartão */
  --pa-card-lg:var(--s8);  /* 32px — cartão grande             */
  --pa-cell:12px 16px;     /* célula de tabela                 */
  --pa-panel:var(--s6);
  --pa-field:9px 12px;
  --ga-1:4px; --ga-2:8px; --ga-3:12px; --ga-4:16px;
  --ga-5:20px;             /* distância entre cartões          */
  --ga-6:24px; --ga-8:32px;

  --h-row:48px;
  --h-ctl:36px;
  --w-side:232px;
  --w-drawer:440px;

  background:var(--bg);
  color:var(--fg);
  font-size:var(--fa-md);
  line-height:var(--la-base);
  letter-spacing:var(--ta-base);
}

/* Escape de densidade: uma classe no shell e a tela aperta. */
.is-compact{
  --h-row:36px;
  --pa-cell:6px 12px;
  --pa-card:var(--s4);
  --ga-5:var(--s3);
  --fa-base:12px;
}

/* ---------- 2. CORES DE ESTADO ---------------------------- */
/* A rampa verde marca progresso. O âmbar marca o momento de
   decisão. O vermelho marca perda. Nada além disso tem cor.   */
[data-surface="app"]{
  --st-novo-bg:rgba(15,15,15,.06);      --st-novo-fg:rgba(15,15,15,.66);
  --st-contato-bg:#E8EFE4;              --st-contato-fg:#2C4A22;
  --st-qualif-bg:#DBE8D4;               --st-qualif-fg:#254019;
  --st-visita-bg:#C7DCBD;               --st-visita-fg:#1C3714;
  --st-proposta-bg:#F4E7CE;             --st-proposta-fg:#6E4A0E;
  --st-fechado-bg:var(--green-700);     --st-fechado-fg:var(--cream);
  --st-perdido-bg:#F3DEDA;              --st-perdido-fg:#8A3527;
}
[data-surface="app-dark"]{
  --st-novo-bg:rgba(235,233,221,.10);   --st-novo-fg:rgba(235,233,221,.72);
  --st-contato-bg:rgba(110,154,98,.16); --st-contato-fg:#A8C79E;
  --st-qualif-bg:rgba(110,154,98,.24);  --st-qualif-fg:#BFD6B6;
  --st-visita-bg:rgba(110,154,98,.34);  --st-visita-fg:#D6E4D1;
  --st-proposta-bg:rgba(193,135,46,.22);--st-proposta-fg:#E0B267;
  --st-fechado-bg:var(--green-100);     --st-fechado-fg:var(--black-900);
  --st-perdido-bg:rgba(166,72,58,.22);  --st-perdido-fg:#E09484;
}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px;
  border-radius:var(--r-ctl);
  font-size:var(--fa-xs);
  font-weight:var(--fw-bold);
  letter-spacing:.02em;
  line-height:1.6;
  white-space:nowrap;
  background:var(--st-novo-bg); color:var(--st-novo-fg);
}
.badge--novo     { background:var(--st-novo-bg);      color:var(--st-novo-fg); }
.badge--contato  { background:var(--st-contato-bg);   color:var(--st-contato-fg); }
.badge--qualif   { background:var(--st-qualif-bg);    color:var(--st-qualif-fg); }
.badge--visita   { background:var(--st-visita-bg);    color:var(--st-visita-fg); }
.badge--proposta { background:var(--st-proposta-bg);  color:var(--st-proposta-fg); }
.badge--fechado  { background:var(--st-fechado-bg);   color:var(--st-fechado-fg); }
.badge--perdido  { background:var(--st-perdido-bg);   color:var(--st-perdido-fg); }

.dot{ width:7px; height:7px; border-radius:var(--r-pill); flex:none; background:currentColor; }

/* ---------- 3. ESTRUTURA DA TELA -------------------------- */
.app{
  display:grid;
  grid-template-columns:var(--w-side) minmax(0,1fr);
  min-height:100vh;
}
.app__side{
  display:flex; flex-direction:column;
  padding:var(--ga-5) var(--ga-3);
  gap:var(--ga-6);
}
.app__main{ display:flex; flex-direction:column; min-width:0; }
.app__body{
  flex:1; min-height:0;
  padding:0 var(--ga-6) var(--ga-6);
  display:flex; flex-direction:column; gap:var(--ga-5);
}

.app__brand{ display:flex; align-items:center; gap:var(--ga-2); padding:var(--ga-1) var(--ga-2); }
.app__brand img{ height:20px; width:auto; }

.side-nav{ display:flex; flex-direction:column; gap:2px; }
.side-nav__title{
  padding:var(--ga-3) var(--ga-3) var(--ga-1);
  font-size:var(--fa-xs); text-transform:uppercase;
  letter-spacing:var(--ta-label); color:var(--fg-faint);
}
.side-nav a{
  display:flex; align-items:center; gap:var(--ga-2);
  padding:9px var(--ga-3);
  border-radius:var(--r-ctl);
  font-size:var(--fa-md); color:var(--fg-muted);
  transition:background .14s ease, color .14s ease;
}
.side-nav a:hover{ background:var(--row-hover); color:var(--fg); }
.side-nav a[aria-current="page"]{
  background:var(--card-bg);
  box-shadow:var(--card-sh);
  border:1px solid var(--card-bd);
  color:var(--fg); font-weight:var(--fw-bold);
}
.side-nav a .n{ margin-left:auto; font-size:var(--fa-sm); color:var(--fg-faint); font-variant-numeric:tabular-nums; }

.app__foot{ margin-top:auto; }
.who{ display:flex; align-items:center; gap:var(--ga-2); padding:var(--ga-2) var(--ga-3); border-radius:var(--r-ctl); }
.who:hover{ background:var(--row-hover); }
.avatar{
  width:28px; height:28px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent);
  font-size:var(--fa-xs); font-weight:var(--fw-bold); letter-spacing:0;
}
.who__name{ font-size:var(--fa-base); line-height:1.25; }
.who__role{ font-size:var(--fa-sm); color:var(--fg-faint); line-height:1.25; }

/* ---------- 4. CARTÃO ------------------------------------- */
/* A peça que estrutura a tela inteira no modo aplicação.
   No claro: sombra leve, sem traço. No escuro: traço, sem
   sombra. Um token resolve os dois — a classe é a mesma.      */
.panel{
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:var(--r-card);
  box-shadow:var(--card-sh);
  padding:var(--pa-card);
}
.panel--lg{ padding:var(--pa-card-lg); }
.panel--flush{ padding:0; overflow:hidden; }   /* para tabela   */
/* Os modificadores de destaque --accent e --solid ficam no fim
   do arquivo: valem para .panel e também para .stat--card.     */

.panel__head{
  display:flex; align-items:center; gap:var(--ga-3);
  padding:var(--pa-card) var(--pa-card) 0;
  margin-bottom:var(--ga-4);
}
.panel--flush > .panel__head{ padding:var(--ga-5) var(--ga-5) 0; margin-bottom:var(--ga-4); }
.panel__title{ margin:0; font-size:var(--fa-lg); font-weight:var(--fw-bold); letter-spacing:var(--ta-base); }
.panel__label{
  font-size:var(--fa-xs); text-transform:uppercase;
  letter-spacing:var(--ta-label); color:var(--fg-faint); margin:0 0 var(--ga-2);
}
.panel__foot{ padding:var(--ga-4) var(--ga-5); border-top:1px solid var(--line-hair); }

.cards{ display:grid; gap:var(--ga-5); }
.cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1180px){ .cards--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px){ .cards--2,.cards--3{ grid-template-columns:1fr; } }

/* ---------- 5. BARRA DE FERRAMENTAS E BUSCA --------------- */
.app__top{
  display:flex; align-items:center; gap:var(--ga-3);
  padding:var(--ga-5) var(--ga-6);
  min-height:64px;
}
.app__title{ font-size:var(--fa-xl); font-weight:var(--fw-reg); letter-spacing:-.015em; margin:0; }
.app__count{ font-size:var(--fa-sm); color:var(--fg-faint); font-variant-numeric:tabular-nums; }
.spacer{ margin-left:auto; }

.toolbar{ display:flex; align-items:center; gap:var(--ga-2); flex-wrap:wrap; }

.ctl{
  display:inline-flex; align-items:center; gap:7px;
  height:var(--h-ctl);
  padding:0 12px;
  background:var(--card-bg);
  color:var(--fg-muted);
  border:1px solid var(--line-soft);
  border-radius:var(--r-ctl);
  font-size:var(--fa-base);
  cursor:pointer;
  transition:background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.ctl:hover{ color:var(--fg); border-color:var(--line); }
.ctl.is-on{ background:var(--accent-soft); border-color:transparent; color:var(--accent-text); font-weight:var(--fw-bold); }
.ctl--primary{
  background:var(--btn-bg); color:var(--btn-fg); border-color:transparent;
  font-weight:var(--fw-bold);
}
.ctl--primary:hover{ background:var(--btn-bg-hover); color:var(--btn-fg); }
.ctl--quiet{ background:transparent; border-color:transparent; }
.ctl--quiet:hover{ background:var(--row-hover); }
.ctl--icon{ width:var(--h-ctl); padding:0; justify-content:center; }
.ctl svg{ width:15px; height:15px; flex:none; }

.search{ position:relative; flex:1; max-width:340px; }
.search input{
  width:100%; height:var(--h-ctl);
  padding:0 12px 0 34px;
  background:var(--card-bg);
  color:var(--fg);
  border:1px solid var(--line-soft);
  border-radius:var(--r-ctl);
  font-size:var(--fa-base);
}
.search input::placeholder{ color:var(--fg-faint); }
.search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.search svg{
  position:absolute; left:11px; top:50%; translate:0 -50%;
  width:15px; height:15px; color:var(--fg-faint); pointer-events:none;
}

.seg{ display:inline-flex; padding:3px; background:var(--bg-alt); border-radius:var(--r-ctl); }
.seg button{
  height:30px; padding:0 14px;
  background:transparent; border:0; border-radius:6px;
  font-size:var(--fa-base); color:var(--fg-muted); cursor:pointer;
}
.seg button.is-on{ background:var(--card-bg); color:var(--fg); box-shadow:var(--sh-app); font-weight:var(--fw-bold); }

/* ---------- 6. INDICADOR ---------------------------------- */
/* O .stat do site usa 56px. Aqui ele é peça de primeira linha
   e vive numa fileira no topo da tela.                        */
[data-surface="app"] .stat,
[data-surface="app-dark"] .stat{ display:block; }
[data-surface="app"] .stat__v,
[data-surface="app-dark"] .stat__v{
  display:block;
  font-size:var(--fa-3xl);
  line-height:var(--la-tight);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--fg);
}
[data-surface="app"] .stat__k,
[data-surface="app-dark"] .stat__k{
  display:block; margin-top:var(--ga-1);
  font-size:var(--fa-xs); text-transform:uppercase;
  letter-spacing:var(--ta-label); color:var(--fg-faint);
}
.stat__row{ display:flex; align-items:baseline; gap:var(--ga-2); flex-wrap:wrap; }
.stat__delta{
  font-size:var(--fa-sm); font-weight:var(--fw-bold);
  color:var(--accent-text); white-space:nowrap;
}
.stat__delta--down{ color:#8A3527; }
.stat--card{
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:var(--r-card);
  box-shadow:var(--card-sh);
  padding:var(--pa-card);
}

/* ---------- 7. TABELA ------------------------------------- */
/* Vive dentro de .panel--flush. Sem borda em volta: o fio de
   1px entre linhas é a estrutura.                             */
.tbl-wrap{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:var(--fa-base); }
.tbl thead th{
  position:sticky; top:0; z-index:2;
  padding:10px 16px;
  background:var(--card-bg);
  border-bottom:1px solid var(--line-soft);
  text-align:left;
  font-size:var(--fa-xs);
  font-weight:var(--fw-reg);
  text-transform:uppercase;
  letter-spacing:var(--ta-label);
  color:var(--fg-faint);
  white-space:nowrap;
  user-select:none;
}
.tbl thead th[aria-sort]{ cursor:pointer; }
.tbl thead th[aria-sort]:hover{ color:var(--fg); }
.tbl thead th[aria-sort="ascending"]::after{ content:' ↑'; }
.tbl thead th[aria-sort="descending"]::after{ content:' ↓'; }

.tbl tbody tr{ border-bottom:1px solid var(--line-hair); }
.tbl tbody tr:last-child{ border-bottom:0; }
.tbl tbody tr:hover{ background:var(--row-hover); }
.tbl tbody tr.is-sel{ background:var(--row-active); }
.tbl td{ padding:var(--pa-cell); height:var(--h-row); vertical-align:middle; }
.tbl td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl td.quiet{ color:var(--fg-muted); }
.tbl td.nowrap{ white-space:nowrap; }

.tbl__name{ font-weight:var(--fw-bold); }
.tbl__sub{ display:block; font-size:var(--fa-sm); color:var(--fg-faint); }

.tbl__acts{ display:flex; gap:2px; justify-content:flex-end; opacity:0; transition:opacity .14s ease; }
.tbl tbody tr:hover .tbl__acts,
.tbl tbody tr:focus-within .tbl__acts{ opacity:1; }
.iconbtn{
  width:30px; height:30px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:var(--r-ctl);
  color:var(--fg-faint); cursor:pointer;
}
.iconbtn:hover{ background:var(--line-soft); color:var(--fg); }
.iconbtn svg{ width:15px; height:15px; }

/* ---------- 8. FUNIL -------------------------------------- */
.kan{ display:flex; gap:var(--ga-5); overflow-x:auto; padding-bottom:var(--ga-4); align-items:flex-start; }
.kan__col{
  flex:0 0 280px;
  display:flex; flex-direction:column;
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:var(--r-card);
  box-shadow:var(--card-sh);
  max-height:calc(100vh - 260px);
}
.kan__head{
  display:flex; align-items:center; gap:var(--ga-2);
  padding:var(--ga-4) var(--ga-4) var(--ga-3);
}
.kan__name{ font-size:var(--fa-xs); text-transform:uppercase; letter-spacing:var(--ta-label); color:var(--fg-muted); }
.kan__n{
  font-size:var(--fa-xs); color:var(--fg-faint);
  background:var(--row-hover); padding:2px 7px; border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;
}
.kan__sum{ margin-left:auto; font-size:var(--fa-sm); color:var(--fg-faint); font-variant-numeric:tabular-nums; }
.kan__list{
  display:flex; flex-direction:column; gap:var(--ga-3);
  padding:0 var(--ga-3) var(--ga-3);
  overflow-y:auto; min-height:72px;
}
.kan__col.is-over .kan__list{ background:var(--accent-soft); border-radius:var(--r-in); }

.kan__card{
  background:var(--bg);
  border:1px solid var(--line-hair);
  border-radius:var(--r-in);
  padding:var(--ga-4);
  cursor:grab;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.kan__card:hover{ border-color:var(--line-soft); box-shadow:var(--sh-app); transform:translateY(-1px); }
.kan__card.is-drag{ opacity:.4; cursor:grabbing; }
.kan__card h4{ margin:0 0 3px; font-size:var(--fa-base); font-weight:var(--fw-bold); letter-spacing:var(--ta-base); line-height:1.3; }
.kan__meta{ display:flex; align-items:center; gap:6px; font-size:var(--fa-sm); color:var(--fg-faint); margin:0; }
.kan__foot{ display:flex; align-items:center; gap:var(--ga-2); margin-top:var(--ga-3); }

/* ---------- 9. PAINEL LATERAL E FICHA --------------------- */
.drawer{
  position:fixed; inset:var(--ga-4) var(--ga-4) var(--ga-4) auto; z-index:var(--z-modal);
  width:min(var(--w-drawer), calc(100vw - 32px));
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:var(--r-card);
  box-shadow:var(--sh-pop);
  display:flex; flex-direction:column;
  translate:calc(100% + var(--ga-4)) 0;
  transition:translate .3s var(--e-out);
}
.drawer.is-open{ translate:0 0; }
.drawer__head{
  display:flex; align-items:flex-start; gap:var(--ga-3);
  padding:var(--pa-panel);
  border-bottom:1px solid var(--line-hair);
}
.drawer__body{ flex:1; overflow-y:auto; padding:var(--pa-panel); }
.drawer__foot{ padding:var(--pa-panel); border-top:1px solid var(--line-hair); display:flex; gap:var(--ga-2); }

.kv{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:var(--ga-3); font-size:var(--fa-base); }
.kv dt{ color:var(--fg-faint); }
.kv dd{ margin:0; }

.log{ display:flex; flex-direction:column; gap:var(--ga-4); }
.log__item{ position:relative; padding-left:20px; }
.log__item::before{
  content:''; position:absolute; left:3px; top:6px;
  width:7px; height:7px; border-radius:var(--r-pill); background:var(--accent);
}
.log__item::after{
  content:''; position:absolute; left:6px; top:17px; bottom:-18px;
  width:1px; background:var(--line-soft);
}
.log__item:last-child::after{ display:none; }
.log__when{ font-size:var(--fa-sm); color:var(--fg-faint); }
.log__text{ font-size:var(--fa-base); margin:2px 0 0; }

/* ---------- 10. MENU, MODAL E AVISO ----------------------- */
.menu{ position:relative; display:inline-block; }
.menu__pop{
  position:absolute; right:0; top:calc(100% + 6px); z-index:var(--z-overlay);
  min-width:190px; padding:6px;
  background:var(--card-bg);
  border:1px solid var(--line-soft);
  border-radius:var(--r-card);
  box-shadow:var(--sh-pop);
}
.menu__pop[hidden]{ display:none; }
.menu__pop button{
  display:flex; align-items:center; gap:var(--ga-2);
  width:100%; padding:8px 10px;
  background:transparent; border:0; border-radius:var(--r-ctl);
  font-size:var(--fa-base); color:var(--fg); text-align:left; cursor:pointer;
}
.menu__pop button:hover{ background:var(--row-hover); }
.menu__pop button.is-danger{ color:#A6483A; }
.menu__sep{ height:1px; background:var(--line-soft); margin:6px 0; }

.veil{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background:rgba(10,10,10,.34);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.veil.is-open{ opacity:1; pointer-events:auto; }

.modal{
  position:fixed; z-index:var(--z-modal);
  left:50%; top:50%; translate:-50% -47%;
  width:min(480px, calc(100vw - 32px));
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:var(--r-card);
  box-shadow:var(--sh-pop);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, translate .22s var(--e-out);
}
.modal.is-open{ opacity:1; pointer-events:auto; translate:-50% -50%; }
.modal__head{ padding:var(--pa-panel) var(--pa-panel) 0; }
.modal__head h3{ margin:0; font-size:var(--fa-lg); font-weight:var(--fw-bold); letter-spacing:var(--ta-base); }
.modal__body{ padding:var(--ga-4) var(--pa-panel); font-size:var(--fa-base); color:var(--fg-muted); }
.modal__foot{ padding:0 var(--pa-panel) var(--pa-panel); display:flex; gap:var(--ga-2); justify-content:flex-end; }

.f{ display:flex; flex-direction:column; gap:5px; }
.f > label{ font-size:var(--fa-xs); text-transform:uppercase; letter-spacing:var(--ta-label); color:var(--fg-faint); }
.f input, .f select, .f textarea{
  width:100%; padding:var(--pa-field);
  background:var(--bg); color:var(--fg);
  border:1px solid var(--line-soft); border-radius:var(--r-ctl);
  font-size:var(--fa-base);
}
.f input:focus, .f select:focus, .f textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring);
}
.f textarea{ min-height:84px; resize:vertical; }
.f__hint{ font-size:var(--fa-sm); color:var(--fg-faint); }
.f__err{ font-size:var(--fa-sm); color:#A6483A; }
.f.is-err input, .f.is-err select, .f.is-err textarea{ border-color:#A6483A; }

.toasts{
  position:fixed; right:var(--ga-5); bottom:var(--ga-5); z-index:var(--z-modal);
  display:flex; flex-direction:column; gap:var(--ga-2);
}
.toast{
  display:flex; align-items:center; gap:var(--ga-3);
  min-width:260px; padding:12px 14px;
  background:var(--fg); color:var(--bg);
  border-radius:var(--r-ctl);
  font-size:var(--fa-base);
  box-shadow:var(--sh-pop);
  animation:toast-in .26s var(--e-out);
}
.toast.is-out{ animation:toast-out .2s ease forwards; }
.toast button{ margin-left:auto; background:none; border:0; color:inherit; opacity:.6; cursor:pointer; }
.toast button:hover{ opacity:1; }
@keyframes toast-in{ from{ opacity:0; translate:0 10px; } }
@keyframes toast-out{ to{ opacity:0; translate:0 10px; } }

/* ---------- 11. ESTADOS ----------------------------------- */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--ga-2);
  padding:var(--ga-8) var(--ga-4);
  min-height:260px;
  text-align:center;
}
.empty__icon{ color:var(--fg-faint); }
.empty__icon svg{ width:30px; height:30px; }
.empty h3{ margin:0; font-size:var(--fa-lg); font-weight:var(--fw-bold); letter-spacing:var(--ta-base); }
.empty p{ margin:0; max-width:44ch; font-size:var(--fa-base); color:var(--fg-muted); }
.empty .ctl{ margin-top:var(--ga-2); }

.skel{
  background:linear-gradient(90deg, var(--line-hair) 25%, var(--line-soft) 37%, var(--line-hair) 63%);
  background-size:400% 100%;
  border-radius:var(--r-ctl);
  animation:skel 1.3s ease infinite;
}
.skel--line{ height:11px; }
.skel--row{ height:var(--h-row); }
@keyframes skel{ from{ background-position:100% 50%; } to{ background-position:0 50%; } }
@media (prefers-reduced-motion:reduce){ .skel{ animation:none; } }

.alert{
  display:flex; gap:var(--ga-3);
  padding:12px 14px;
  border:1px solid var(--line-soft);
  border-left:3px solid var(--accent);
  border-radius:var(--r-ctl);
  background:var(--card-bg);
  font-size:var(--fa-base);
}
.alert--err{ border-left-color:#A6483A; }
.alert--warn{ border-left-color:#C1872E; }

/* ---------- 12. PAGINAÇÃO E UTILITÁRIOS ------------------- */
.pager{
  display:flex; align-items:center; gap:var(--ga-2);
  font-size:var(--fa-base); color:var(--fg-muted);
}
.pager__n{ margin-right:auto; font-variant-numeric:tabular-nums; }

.tip{ position:relative; }
.tip::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 7px); left:50%; translate:-50% 0;
  padding:5px 8px;
  background:var(--fg); color:var(--bg);
  border-radius:6px;
  font-size:var(--fa-sm); white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .14s ease;
}
.tip:hover::after{ opacity:1; }

.a-quiet{ color:var(--fg-muted); }
.a-faint{ color:var(--fg-faint); }
.a-num{ font-variant-numeric:tabular-nums; }
.a-row{ display:flex; align-items:center; gap:var(--ga-2); }
.a-stack{ display:flex; flex-direction:column; gap:var(--ga-3); }
.a-sep{ height:1px; background:var(--line-soft); margin-block:var(--ga-4); }

/* ---------- 13. DESTAQUE ---------------------------------- */
/* Servem em .panel e em .stat--card. Ficam por último para
   vencer o fundo padrão do cartão.                            */
.panel--accent,
.stat--card.panel--accent{
  background:var(--accent-soft);
  border-color:transparent;
  box-shadow:none;
}

/* Bloco sólido verde: NO MÁXIMO UM POR TELA. Mais que isso e a
   tela perde a leveza que o modo aplicação existe para ter.    */
.panel--solid,
.stat--card.panel--solid{
  background:var(--accent);
  color:var(--on-accent);
  border-color:transparent;
  box-shadow:none;
}
.panel--solid .panel__label,
.panel--solid .stat__k,
.panel--solid .stat__v,
.panel--solid .a-quiet,
.panel--solid .a-faint{ color:var(--on-accent); }
.panel--solid .panel__label,
.panel--solid .stat__k,
.panel--solid .a-faint{ opacity:.72; }

@media (max-width:900px){
  .app{ grid-template-columns:1fr; }
  .app__side{ display:none; }
}