/* ===========================================================================
   Bar e Cozinha — Ipanema (El Misti) — PAINEL VIVO
   Tokens copiados de Times/Time de TI/design-system/tokens/tokens.css.
   O README do DS pede exatamente isso quando o projeto vive fora da arvore do
   design system: copiar os VALORES pro :root local, nao referenciar por caminho
   relativo entre repositorios.
   Nenhum valor de cor ou espacamento aqui e escolhido fora dos tokens.
   =========================================================================== */
:root {
  /* MARCA */
  --color-brand-primary: #1B5E20;
  --color-brand-primary-light: #2E7D32;
  --color-brand-primary-bg: #E8F5E9;
  --color-brand-dark: #0D2818;

  /* SUPERFÍCIES */
  --color-surface: #f5f7f5;
  --color-surface-card: #ffffff;
  --color-border: #d5e0d5;

  /* TEXTO */
  --color-text: #1a2e1a;
  --color-text-muted: #5f7060;
  --color-heading: var(--color-brand-dark);

  /* STATUS (texto) */
  --color-success-text: #2E7D32;
  --color-danger-text: #C62828;
  --color-info-text: #1565C0;
  --color-warning-text: #BF360C;
  --color-accent-text: #00695C;
  --color-purple-text: #6A1B9A;

  /* STATUS (preenchimento) */
  --color-success-fill: #2E7D32;
  --color-danger-fill: #C62828;
  --color-info-fill: #1565C0;
  --color-warning-fill: #F9A825;
  --color-accent-fill: #00897B;
  --color-purple-fill: #6A1B9A;

  /* COMPONENTES QUE MUDAM COM O TEMA */
  --color-table-head-bg: var(--color-brand-primary-bg);
  --color-hover-bg: var(--color-brand-primary-bg);
  --color-hachure-bg: repeating-linear-gradient(135deg, rgba(95,112,96,.16), rgba(95,112,96,.16) 4px, rgba(95,112,96,.04) 4px, rgba(95,112,96,.04) 8px);

  /* ESCALA SEQUENCIAL DO MAPA DE CALOR (DATAVIZ.md > Sequencial: um unico
     matiz variando a opacidade). Sao os canais de --color-brand-primary
     (#1B5E20) em numero, porque CSS nao extrai canal de um hex guardado em
     custom property sem a sintaxe de cor relativa, que e recente demais pra
     depender dela num painel que a recepcao abre em celular velho. */
  --heat-rgb: 27, 94, 32;

  /* TIPOGRAFIA */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-2xs: 9px; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px;
  --fs-lg: 14px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 28px;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-base: 1.3; --lh-relaxed: 1.5;

  /* ESPAÇAMENTO — escala 4px */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* RAIO */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;

  /* ELEVAÇÃO */
  --shadow-sm: 0 1px 3px rgba(0,40,0,0.08);

  /* TOQUE (mobile) — líder consulta em pé, durante o turno */
  --touch-target: 44px;
}
[data-theme="dark"] {
  --color-surface: #10160f;
  --color-surface-card: #1a231a;
  --color-border: #2c3a2c;
  --color-text: #e6ede6;
  --color-text-muted: #8fa08f;
  --color-heading: #eafaea;

  --color-success-text: #81C784;
  --color-danger-text: #EF5350;
  --color-info-text: #64B5F6;
  --color-warning-text: #FFCC80;
  --color-accent-text: #4DB6AC;
  --color-purple-text: #CE93D8;

  --color-table-head-bg: rgba(46,125,50,.22);
  --color-hover-bg: rgba(46,125,50,.14);
  --color-hachure-bg: repeating-linear-gradient(135deg, rgba(230,237,230,.10), rgba(230,237,230,.10) 4px, rgba(230,237,230,.02) 4px, rgba(230,237,230,.02) 8px);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  /* No escuro a escala inverte de direcao: verde do tema escuro
     (--color-success-text #81C784) clareando sobre fundo escuro. Verde #1B5E20
     sobre #1a231a seria invisivel. */
  --heat-rgb: 129, 199, 132;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);font-size:var(--fs-sm);background:var(--color-surface);color:var(--color-text);line-height:var(--lh-base);-webkit-text-size-adjust:100%}

/* HEADER */
.header{background:var(--color-brand-dark);color:#fff;padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.header-title{flex:1;font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:.5px}
.header-update{font-size:var(--fs-2xs);opacity:.75;text-align:right;cursor:help}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;flex:none}
.theme-toggle:hover{background:rgba(255,255,255,.15)}
.theme-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* AVISO DE CORTE — PATTERNS.md > Estados de dado honesto, item 4 */
.cut-banner{background:var(--color-surface-card);color:var(--color-text-muted);font-size:var(--fs-xs);
  padding:var(--sp-2) var(--sp-4);line-height:var(--lh-relaxed);border-bottom:1px solid var(--color-border);
  min-height:33px;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.cut-banner.is-alerta{background:rgba(249,168,37,.18);color:var(--color-warning-text)}

/* ===========================================================================
   FILTROS — barra acima dos KPIs (os numeros dependem do periodo).
   =========================================================================== */
.filtros{background:var(--color-surface-card);border-bottom:1px solid var(--color-border);
  padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap}
.filtro-campo{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);
  color:var(--color-text-muted);min-height:var(--touch-target)}
.filtro-lbl{font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.filtros select,.filtros input[type=date]{font-family:inherit;font-size:var(--fs-md);color:var(--color-text);
  background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:var(--sp-2);min-height:36px;max-width:100%}
.filtros select:focus-visible,.filtros input[type=date]:focus-visible{outline:none;
  border-color:var(--color-brand-primary-light);box-shadow:0 0 0 3px rgba(46,125,50,.25)}
.filtro-datas{display:inline-flex;gap:var(--sp-3);flex-wrap:wrap}
.filtro-datas[hidden]{display:none}
.filtro-extra{font-size:var(--fs-xs)}
.filtro-extra>summary{min-height:var(--touch-target);display:flex;align-items:center;gap:var(--sp-1);
  cursor:pointer;color:var(--color-brand-primary-light);font-weight:var(--fw-semibold);font-size:var(--fs-base)}
.filtro-extra>summary::after{content:'▾';font-size:var(--fs-xs)}
.filtro-extra[open]>summary::after{content:'▴'}
.filtro-extra>summary:focus-visible{outline:2px solid var(--color-brand-primary-light);outline-offset:2px;border-radius:var(--radius-sm)}
.filtro-extra-corpo{display:flex;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;padding-bottom:var(--sp-2)}
.filtro-estado{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-relaxed);
  margin-left:auto;text-align:right}
.filtro-estado.is-erro{color:var(--color-danger-text);font-weight:var(--fw-semibold)}

/* info-tip — PATTERNS.md item 5 */
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;
  border-radius:var(--radius-full);background:var(--color-brand-primary-bg);color:var(--color-brand-primary);
  font-size:var(--fs-2xs);font-weight:var(--fw-bold);cursor:help;font-style:italic}
.info-tip:focus-visible{outline:2px solid var(--color-brand-primary-light);outline-offset:2px}
[data-theme="dark"] .info-tip{background:rgba(46,125,50,.28);color:var(--color-success-text)}

/* KPI */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp-2);padding:var(--sp-3)}
/* min-height = altura MEDIDA com o dado na tela (nao estimada). Sem isso o
   conteudo que chega depois empurra a pagina: foi 0,83 de CLS no esboco. */
#kpiRow{min-height:112px}
.kpi-card{background:var(--color-surface-card);border-radius:var(--radius-md);padding:var(--sp-3);
  box-shadow:var(--shadow-sm);border-left:4px solid var(--color-brand-primary)}
.kpi-label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}
.kpi-value{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--color-heading);display:block;line-height:var(--lh-tight);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi-sub{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--sp-1);display:block;line-height:var(--lh-relaxed)}
.kpi-card.accent-red{border-left-color:var(--color-danger-fill)}
.kpi-card.accent-blue{border-left-color:var(--color-info-fill)}
.kpi-card.accent-orange{border-left-color:var(--color-warning-fill)}
.kpi-card.accent-teal{border-left-color:var(--color-accent-fill)}
.kpi-card.accent-purple{border-left-color:var(--color-purple-fill)}

/* DADO QUE NAO EXISTE — nao e zero. PATTERNS.md > Estados de dado honesto, 1.
   O cartao inteiro vai pra hachura e o valor deixa de ser numero: "R$ 0,00" de
   desconto leria como elogio a operacao quando o Zig simplesmente nao manda. */
.kpi-card.is-nodata{border-left-color:var(--color-text-muted);background-image:var(--color-hachure-bg)}
.kpi-value.kpi-sem{font-size:var(--fs-base);color:var(--color-text-muted);white-space:normal;
  text-transform:uppercase;letter-spacing:.3px;line-height:var(--lh-relaxed)}
.hachura-cel{background-image:var(--color-hachure-bg);color:var(--color-text-muted)}

/* ===========================================================================
   A FICHA QUE CONCENTRA O DIA — faixa que AVISA SEM SUBTRAIR.
   Fica no lugar nos dois estados (com e sem ficha): aparecer so quando existe
   empurraria a pagina inteira pra baixo. min-height medido no pior caso.
   =========================================================================== */
/* align-items:flex-start, nao center: com o texto centralizado, a frase curta
   do estado de carregamento nascia no meio da faixa e SUBIA quando o texto
   final chegava — 0,15 de CLS so disso. Ancorado no topo, o texto nasce onde
   vai ficar. */
.ficha-aviso{background:var(--color-surface-card);border-bottom:1px solid var(--color-border);
  padding:var(--sp-2) var(--sp-4);display:flex;align-items:flex-start;gap:var(--sp-2) var(--sp-4);
  flex-wrap:wrap;min-height:58px;font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-relaxed)}
.ficha-aviso.is-alerta{background:rgba(249,168,37,.14);border-left:4px solid var(--color-warning-fill);
  color:var(--color-text)}
.ficha-aviso-txt{flex:1;min-width:200px}
.ficha-aviso-cabeca{display:block;font-size:var(--fs-base)}
.ficha-aviso-frescor{display:block;margin-top:var(--sp-1)}
.ficha-aviso-acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-self:center}

/* BOTAO */
.btn{font-family:inherit;font-size:var(--fs-base);font-weight:var(--fw-semibold);min-height:36px;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);cursor:pointer;
  background:var(--color-brand-primary-light);color:#fff;border:1px solid var(--color-brand-primary-light)}
.btn:hover{background:var(--color-brand-primary)}
.btn:focus-visible{outline:2px solid var(--color-brand-primary-light);outline-offset:2px}
/* --color-brand-primary (escuro) e nao o -light: sobre o fundo ambar do aviso
   o verde claro dava 4,37:1 e o texto de 11px precisa de 4,5:1 (reprovado pelo
   Lighthouse na primeira rodada). O escuro da 6,7:1. */
.btn-secundario{background:transparent;color:var(--color-brand-primary)}
.btn-secundario:hover{background:var(--color-brand-primary-bg);color:var(--color-brand-primary)}
[data-theme="dark"] .btn-secundario:hover{background:rgba(46,125,50,.2);color:var(--color-success-text)}

/* TABS */
.tabs-bar{display:flex;background:var(--color-surface-card);border-bottom:2px solid var(--color-brand-primary);
  padding:0 var(--sp-3);overflow-x:auto}
.tab-btn{min-height:var(--touch-target);padding:var(--sp-3) var(--sp-5);border:none;background:none;
  font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--color-text-muted);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s;white-space:nowrap}
.tab-btn.active{color:var(--color-brand-primary-light);border-bottom-color:var(--color-brand-primary-light)}
.tab-btn:hover:not(.active){color:var(--color-text)}
.tab-btn:focus-visible{outline:2px solid var(--color-brand-primary-light);outline-offset:-2px}
.tab-content{display:none}
.tab-content.active{display:block}

/* Enquanto a API responde: o numero antigo some de contraste em vez de virar
   zero. Zero na tela leria como "nao vendeu". */
body.is-carregando #kpiRow,body.is-carregando main{opacity:.55;transition:opacity .15s}

/* RESPOSTA — o bloco que substitui o ChatGPT: a conclusao escrita, no topo da aba */
.resposta{background:var(--color-brand-primary-bg);color:var(--color-text);margin:var(--sp-3) var(--sp-3) 0;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);border-left:4px solid var(--color-brand-primary-light);
  font-size:var(--fs-md);line-height:var(--lh-relaxed)}
.resposta strong{color:var(--color-heading);font-weight:var(--fw-bold)}
[data-theme="dark"] .resposta{background:rgba(46,125,50,.16)}
/* Reserva anti-CLS: alturas MEDIDAS com o dado na tela (sandbox/medir.mjs),
   por breakpoint. A reserva so precisa valer pro primeiro desenho — troca de
   filtro depois disso e interacao do usuario, que o CLS nao conta. */
#respVender,#respQuando,#respQuem,#respVaza{min-height:63px}
/* A lista de produtos e o bloco mais alto da primeira aba: sem reserva, as
   dobras abaixo dela sao empurradas pra fora da tela quando o dado chega.
   615px = 12 itens (o limite fixo do renderVender) medidos em 1 coluna. */
#rankProdutos{min-height:615px}
.rank-list.is-vazio{min-height:0}

/* SEÇÕES */
.section-card{background:var(--color-surface-card);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);
  margin:var(--sp-3);box-shadow:var(--shadow-sm)}
.section-title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--color-heading);margin-bottom:var(--sp-2)}
.section-title-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.section-title-row .section-title{margin-bottom:0}
.sub-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-text-muted);
  text-transform:uppercase;letter-spacing:.3px;margin:var(--sp-3) 0 var(--sp-2)}
.nota-cru{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--sp-2);line-height:var(--lh-relaxed)}
.empty-msg{font-size:var(--fs-sm);color:var(--color-text-muted);padding:var(--sp-3) 0;line-height:var(--lh-relaxed)}
.section-card.is-destacado{outline:3px solid var(--color-warning-fill);transition:outline-color .4s}

/* DOBRA (detalhe a um clique) — o Pedro le a resposta e o grafico na primeira
   tela; tabela densa fica atras de um toque no celular e aberta no desktop. */
.dobra{background:var(--color-surface-card);border-radius:var(--radius-md);margin:var(--sp-3);
  box-shadow:var(--shadow-sm);overflow:hidden}
.dobra>summary{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;cursor:pointer;
  padding:var(--sp-3) var(--sp-4);min-height:var(--touch-target);list-style:none}
.dobra>summary::-webkit-details-marker{display:none}
.dobra>summary::after{content:'▾';margin-left:auto;color:var(--color-brand-primary-light);font-size:var(--fs-base)}
.dobra[open]>summary::after{content:'▴'}
.dobra>summary:hover{background:var(--color-hover-bg)}
.dobra>summary:focus-visible{outline:2px solid var(--color-brand-primary-light);outline-offset:-2px}
.dobra>summary .section-title{margin-bottom:0}
.dobra-hint{font-size:var(--fs-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.dobra-corpo{padding:0 var(--sp-4) var(--sp-4)}
.duas-colunas{display:grid;grid-template-columns:1fr;gap:var(--sp-2) var(--sp-6)}

/* LISTA RANQUEADA EM BARRAS — barra CSS pura, sem biblioteca de grafico. */
.rank-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.rank-item{display:block}
.rank-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);margin-bottom:2px}
.rank-name{font-size:var(--fs-md);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-val{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--color-heading);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.rank-bar{height:8px;background:var(--color-brand-primary-bg);border-radius:var(--radius-full);overflow:hidden}
.rank-fill{height:100%;background:var(--color-brand-primary-light);border-radius:var(--radius-full)}
.rank-fill.c2{background:var(--color-info-fill)}
.rank-fill.c3{background:var(--color-warning-fill)}
.rank-fill.c4{background:var(--color-accent-fill)}
.rank-fill.c5{background:var(--color-purple-fill)}
/* Subiu/caiu: divergente de 2 direcoes a partir de um centro (DATAVIZ.md).
   O valor em reais vai sempre ao lado — cor sozinha nao carrega significado. */
.rank-fill.c-sobe{background:var(--color-success-fill)}
.rank-fill.c-cai{background:var(--color-danger-fill)}
.rank-sub{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:2px;line-height:var(--lh-relaxed)}
[data-theme="dark"] .rank-bar{background:rgba(46,125,50,.18)}

/* CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{font-size:var(--fs-sm);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);
  background:var(--color-brand-primary-bg);color:var(--color-text);border:1px solid var(--color-border)}
.chip b{font-variant-numeric:tabular-nums;color:var(--color-heading)}
[data-theme="dark"] .chip{background:rgba(46,125,50,.14)}

/* GRÁFICO DE HORA — colunas CSS. Sem Chart.js: nada pra baixar, abre na hora. */
.hour-chart{display:flex;align-items:flex-end;gap:2px;height:140px;padding-top:var(--sp-2)}
.hour-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:2px}
.hour-bar{width:100%;background:var(--color-border);border-radius:var(--radius-sm) var(--radius-sm) 0 0;min-height:2px}
.hour-col.is-peak .hour-bar{background:var(--color-brand-primary-light)}
.hour-lbl{font-size:var(--fs-2xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.hour-col.is-peak .hour-lbl{color:var(--color-brand-primary-light);font-weight:var(--fw-bold)}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px}
.sw-peak{background:var(--color-brand-primary-light)}

/* ===========================================================================
   MAPA DE CALOR HORA x DIA DA SEMANA
   24 colunas sempre caber na largura (minmax(0,1fr)): rolagem lateral dentro
   do mapa esconderia metade do dia, que e justamente a pergunta.
   =========================================================================== */
.heat{display:grid;grid-template-columns:26px repeat(24,minmax(0,1fr));gap:1px;margin-top:var(--sp-2)}
.heat-h,.heat-lbl{font-size:var(--fs-2xs);color:var(--color-text-muted);text-align:center;
  font-variant-numeric:tabular-nums;align-self:center}
.heat-lbl{text-align:left;font-weight:var(--fw-bold)}
.heat-cell{min-height:22px;border-radius:2px;background:rgba(var(--heat-rgb),calc(.04 + var(--i,0) * .96));
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.heat-corner{background:none}
.heat-cell.is-nodata{background-image:var(--color-hachure-bg);background-color:transparent}
.heat-val{font-size:var(--fs-2xs);color:var(--color-text);font-variant-numeric:tabular-nums;display:none}
.heat-cell.is-forte .heat-val{color:#fff}
[data-theme="dark"] .heat-cell.is-forte .heat-val{color:var(--color-brand-dark)}
.heat-legenda{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2);
  font-size:var(--fs-xs);color:var(--color-text-muted)}
.heat-escala{display:inline-flex;gap:1px}
.heat-escala i{width:16px;height:12px;border-radius:2px;background:rgba(var(--heat-rgb),calc(.04 + var(--i) * .96))}
.heat-nodata{display:inline-flex;align-items:center;gap:var(--sp-1)}
.heat-nodata i{width:16px;height:12px;border-radius:2px;display:inline-block}

/* TABELA */
.table-scroll{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.data-table th{background:var(--color-table-head-bg);padding:var(--sp-2);text-align:left;font-weight:var(--fw-bold);
  color:var(--color-heading);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.3px;
  border-bottom:2px solid var(--color-brand-primary);white-space:nowrap;position:sticky;top:0;z-index:1}
.data-table td{padding:var(--sp-2);border-bottom:1px solid var(--color-border);white-space:nowrap}
/* Nome de produto e de pessoa vem do Zig e e longo ("CESTA DE PAO DE QUEIJO
   (12 UN.)"). Com nowrap, uma celula sozinha empurrava a coluna de valor pra
   fora da tela no celular — a coluna do nome quebra linha, as de numero nao. */
.data-table .col-nome{white-space:normal;min-width:92px}
.data-table .col-nome .badge-warn,.data-table .col-nome .badge-sem{display:inline-block;margin-top:2px;white-space:normal}
.data-table tr:hover td{background:var(--color-hover-bg)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.cell-note{display:block;font-size:var(--fs-2xs);color:var(--color-text-muted);font-weight:var(--fw-regular)}
.data-table .total-row td{font-weight:var(--fw-bold);border-top:2px solid var(--color-brand-primary);background:var(--color-table-head-bg)}
.data-table tr.is-lixo td{color:var(--color-text-muted)}
.data-table td.empty-msg{white-space:normal}

/* FICHA — o conteudo linha a linha */
.ficha-card{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-3);
  margin-bottom:var(--sp-3)}
.ficha-card-topo{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.ficha-card-quando{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--color-heading)}
.ficha-card-valor{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-heading);font-variant-numeric:tabular-nums}
.ficha-card-resumo{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-relaxed);margin:var(--sp-1) 0 var(--sp-2)}

/* BADGES */
.badge-warn,.badge-novo,.badge-parou,.badge-sem{font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.3px;padding:2px var(--sp-2);border-radius:var(--radius-sm);white-space:nowrap}
.badge-warn{background:rgba(249,168,37,.18);color:var(--color-warning-text)}
.badge-novo{background:rgba(46,125,50,.16);color:var(--color-success-text)}
.badge-parou{background:rgba(198,40,40,.14);color:var(--color-danger-text)}
/* "campo digitado errado" marca o ROTULO ruim, nao dado ausente — por isso
   contorno neutro e nao a hachura, que neste painel significa "nao medido". */
.badge-sem{background:none;border:1px solid var(--color-border);color:var(--color-text-muted)}
.badge-warn[hidden]{display:none}

/* ERRO — sempre com botao que chama a MESMA funcao que falhou (PATTERNS.md) */
.error-box{background:var(--color-surface-card);border:1px solid var(--color-danger-text);
  border-radius:var(--radius-md);margin:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  color:var(--color-danger-text);font-size:var(--fs-md);line-height:var(--lh-relaxed)}
.error-box .btn{margin-top:var(--sp-2);background:transparent;color:var(--color-danger-text);border-color:var(--color-danger-text)}
.error-box .btn:hover{background:rgba(198,40,40,.1)}

/* GLOSSÁRIO — "o painel ensina a ler" */
.glossario dl{display:grid;grid-template-columns:1fr;gap:var(--sp-1)}
.glossario dt{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--color-heading);margin-top:var(--sp-2)}
.glossario dd{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-relaxed)}

/* ===========================================================================
   VERDE COMO TEXTO NO TEMA ESCURO
   --color-brand-primary-light (#2E7D32) passa 3:1 contra o card escuro, o que
   basta pra BARRA e FUNDO de botao (objeto grafico), mas nao pros 4,5:1 que
   TEXTO precisa. O DS ja resolve isso com o par claro/escuro de
   --color-success-text — entao todo verde que vira texto troca de token aqui.
   =========================================================================== */
[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .filtro-extra>summary,
[data-theme="dark"] .dobra>summary::after,
[data-theme="dark"] .btn-secundario,
[data-theme="dark"] .hour-col.is-peak .hour-lbl{color:var(--color-success-text)}
[data-theme="dark"] .btn-secundario{border-color:var(--color-success-text)}

.rodape{text-align:center;font-size:var(--fs-xs);color:var(--color-text-muted);padding:var(--sp-4);line-height:var(--lh-relaxed)}

/* ===========================================================================
   DESKTOP LARGO — leitura de fechamento: sentada e densa.
   =========================================================================== */
@media(min-width:1000px){
  .heat-val{display:block}
  .heat-cell{min-height:26px}
}
@media(min-width:1100px){
  .rank-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-6)}
  #rankProdutos{min-height:323px} /* 2 colunas: 6 linhas em vez de 12 */
  .duas-colunas{grid-template-columns:1fr 1fr}
  .duas-colunas .rank-list{grid-template-columns:1fr}
  .glossario dl{grid-template-columns:220px 1fr;gap:var(--sp-2) var(--sp-4);align-items:baseline}
  .glossario dt{margin-top:0}
}

/* ===========================================================================
   RESPONSIVO — o lider le no celular, em pe, durante o turno: numero maior,
   nunca menor. Coluna .col-sec sai pra nao criar rolagem lateral
   (criterio de aceite: 400px sem scroll horizontal).
   =========================================================================== */
@media(max-width:768px){
  .kpi-row{grid-template-columns:repeat(2,1fr);padding:var(--sp-2)}
  #kpiRow{min-height:214px}
  .filtros{padding:var(--sp-2);gap:var(--sp-1) var(--sp-3)}
  .filtro-estado{margin-left:0;text-align:left;width:100%}
  .ficha-aviso{min-height:68px}
  .section-card,.dobra{margin:var(--sp-2)}
  .section-card{padding:var(--sp-2) var(--sp-3)}
  .dobra>summary{padding:var(--sp-2) var(--sp-3)}
  .dobra-corpo{padding:0 var(--sp-3) var(--sp-3)}
  .resposta{margin:var(--sp-2) var(--sp-2) 0}
  .tab-btn{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base)}
  .theme-toggle{width:var(--touch-target);height:var(--touch-target)}
}
@media(max-width:480px){
  .kpi-value{font-size:var(--fs-xl)}
  #kpiRow{min-height:194px}
  #respVender,#respQuando,#respQuem,#respVaza{min-height:122px}
  /* O lider consulta em pe: a resposta e o grafico tem de caber na primeira
     tela. Cada pixel de moldura aqui empurra a resposta pra baixo da dobra —
     por isso o rotulo "PERIODO" sai (o proprio select ja diz "Ultimos 30
     dias") e o seletor divide a linha com o filtro secundario. */
  .filtro-campo>.filtro-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .filtro-datas .filtro-campo>.filtro-lbl{position:static;width:auto;height:auto;clip-path:none}
  .filtros{gap:0 var(--sp-3)}
  .filtro-campo{min-height:38px}
  .ficha-aviso{min-height:125px;padding:var(--sp-2)}
  .ficha-aviso .btn{min-height:34px;font-size:var(--fs-sm);padding:var(--sp-1) var(--sp-2)}
  .tab-btn{padding:var(--sp-3) var(--sp-2)}
  .header-update{display:none}
  .header-title{font-size:var(--fs-base)}
  .data-table .col-sec{display:none}
  .data-table th,.data-table td{padding:var(--sp-2) var(--sp-1);font-size:var(--fs-sm)}
  .heat{grid-template-columns:22px repeat(24,minmax(0,1fr))}
  .heat-h{font-size:7px}
  .filtros select,.filtros input[type=date]{font-size:var(--fs-base)}
  .ficha-card-valor{font-size:var(--fs-lg)}
}