/* Visual "suave": a fonte do layout é o DESIGN.md (pasta layout-suave-para-claude-code).
   Barra superior escura com as abas; conteúdo em cartões claros. O destaque é o cartão de
   faturamento (escuro, número em âmbar). Toda cor vem dos tokens abaixo, nos dois temas. */
:root {
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bg: #F6EDD3;            /* fundo manteiga */
  --card: #FFFBEE;          /* cartões */
  --card-2: #FAF1D6;        /* campos e blocos internos */
  --ink: #2B1E12;           /* texto principal */
  --ink-2: #5A4A36;         /* texto secundário */
  --ink-3: #6F5E48;         /* texto de apoio */
  --line: #E6D8B2;          /* divisórias */
  --line-strong: #CDBB8A;   /* bordas de campos */
  --track: rgba(43, 30, 18, .10);
  --accent: #E3A02B;        /* âmbar da marca, preenchimentos */
  --accent-ink: #8A5600;    /* âmbar escuro, texto e ícones */
  --good: #2F6B35; --good-soft: rgba(47, 107, 53, .12); --good-line: rgba(47, 107, 53, .45);
  --bad: #A33A2B;  --bad-soft: rgba(163, 58, 43, .10);  --bad-line: rgba(163, 58, 43, .40);
  /* Texto pequeno verde/vermelho sobre fundo suave: ajuste de contraste (meta 4,5:1 do DESIGN.md) */
  --good-ink: #285C2E; --bad-ink: #A33A2B;
  --bar: #231710; --bar-ink: #F3E9D3; --bar-ink-2: #CDBE9F;
  --inv-bg: #2B1E12; --inv-ink: #FBF3DC; --inv-ink-2: #D3C6A8; --inv-ink-3: #B0A287;
  --inv-rule: rgba(251, 243, 220, .18); --inv-track: rgba(251, 243, 220, .16); --inv-good: #93CC87; --inv-bad: #F0988A;
  --shadow: 0 1px 2px rgba(60, 40, 10, .06), 0 6px 18px rgba(60, 40, 10, .04);
  /* Fixas nos dois temas */
  --destaque-bg: #2B1E12; --destaque-numero: #F2B646;
  --aba-ativa: #F0B13A; --aba-ativa-ink: #231710;
  --canal-ifood: #E9A93A; --canal-alloy: #6CA3D9; --canal-telefone: #A98BD6; --canal-goomer: #7DBE7E; --canal-dm: #E58A7B;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #150E09; --card: #1F1610; --card-2: #281D15;
    --ink: #F3E9D6; --ink-2: #C9BA9F; --ink-3: #A39479;
    --line: #33261B; --line-strong: #4A382A; --track: rgba(243, 233, 214, .12);
    --accent: #F0B13A; --accent-ink: #F0B13A;
    --good: #8FC272; --good-soft: rgba(143, 194, 114, .14); --good-line: rgba(143, 194, 114, .45);
    --bad: #EA8575; --bad-soft: rgba(234, 133, 117, .13); --bad-line: rgba(234, 133, 117, .42);
    --good-ink: #8FC272; --bad-ink: #F2A193;
    --bar: #0E0905;
    --inv-bg: #F0B13A; --inv-ink: #1E140C; --inv-ink-2: #4A3410; --inv-ink-3: #5E4412;
    --inv-rule: rgba(30, 20, 12, .22); --inv-track: rgba(30, 20, 12, .16); --inv-good: #1F5A27; --inv-bad: #8E1B10;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #150E09; --card: #1F1610; --card-2: #281D15;
  --ink: #F3E9D6; --ink-2: #C9BA9F; --ink-3: #A39479;
  --line: #33261B; --line-strong: #4A382A; --track: rgba(243, 233, 214, .12);
  --accent: #F0B13A; --accent-ink: #F0B13A;
  --good: #8FC272; --good-soft: rgba(143, 194, 114, .14); --good-line: rgba(143, 194, 114, .45);
  --bad: #EA8575; --bad-soft: rgba(234, 133, 117, .13); --bad-line: rgba(234, 133, 117, .42);
  --good-ink: #8FC272; --bad-ink: #F2A193;
  --bar: #0E0905;
  --inv-bg: #F0B13A; --inv-ink: #1E140C; --inv-ink-2: #4A3410; --inv-ink-3: #5E4412;
  --inv-rule: rgba(30, 20, 12, .22); --inv-track: rgba(30, 20, 12, .16); --inv-good: #1F5A27; --inv-bad: #8E1B10;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 14.5px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
p { margin: 0; }
button, input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.app { min-height: 100vh; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.app:has(> .login) { padding-top: 24px; }
.carregando { color: var(--ink-3); text-align: center; margin-top: 40vh; }
.logo { border-radius: 50%; display: block; }
.icone { display: inline-flex; color: var(--accent-ink); flex-shrink: 0; }
.icone svg { width: 20px; height: 20px; }

/* ---------- barra superior ---------- */
header.brandbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(20px, calc((100% - 1240px) / 2)) 10px;
  background: var(--bar); color: var(--bar-ink);
}
header.brandbar .logo { width: 36px; height: 36px; box-shadow: 0 0 0 1.5px rgba(240, 177, 58, .6); }
header.brandbar .bn { font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: -.005em; }
header.brandbar .bn small { display: block; font-weight: 400; font-size: 12px; color: var(--bar-ink-2); }
nav.tabs { display: flex; gap: 4px; margin-left: 12px; scrollbar-width: none; }
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs button {
  background: none; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--bar-ink-2);
}
nav.tabs button:hover { color: var(--bar-ink); background: rgba(255, 255, 255, .08); }
nav.tabs button.active { background: var(--aba-ativa); color: var(--aba-ativa-ink); }
nav.tabs button:focus-visible, header.brandbar :focus-visible { outline-color: var(--aba-ativa); }
.barra-direita { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.unidade-select {
  background: rgba(255, 255, 255, .06); color: var(--bar-ink); border: 1px solid rgba(240, 177, 58, .45);
  border-radius: 8px; padding: 6px 10px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.unidade-select option { color: #231710; background: #FFFBEE; }
.unidade-fixa { font-size: 13px; font-weight: 600; color: var(--bar-ink-2); }
header.brandbar .month-badge { text-align: right; }
header.brandbar .month-badge small { display: block; font-size: 12px; color: var(--bar-ink-2); }
header.brandbar .month-badge strong { font-weight: 600; font-size: 15px; color: var(--aba-ativa); white-space: nowrap; }
/* Seletor de mês: aparece como o "mês vigente" do DESIGN.md (âmbar), com a setinha de escolha. */
.mes-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F0B13A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 2px center;
  border: 0; border-bottom: 1px dashed rgba(240, 177, 58, .45); border-radius: 0;
  padding: 0 16px 1px 0; color: var(--aba-ativa); font-size: 15px; font-weight: 600; text-align: right;
}
.mes-select:hover { border-bottom-style: solid; }
.mes-select option { color: #231710; background: #FFFBEE; }
.btn-sair {
  background: none; color: var(--bar-ink-2); border: 1px solid rgba(243, 233, 211, .25);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-sair:hover { color: var(--bar-ink); border-color: rgba(243, 233, 211, .5); }

/* ---------- páginas e cartões ---------- */
.conteudo { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 20px 8px; }
.conteudo > section + section, .conteudo > section + div, .conteudo > div + section, .conteudo > p + div { margin-top: 16px; }
section {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; box-shadow: var(--shadow); min-width: 0;
}
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.section-head .title { font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.section-desc { font-size: 13px; color: var(--ink-2); margin: -8px 0 18px; }
.section-title { font-size: 16px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); margin: 0 0 6px; }
.section-title + .section-desc { margin-top: 0; }
.tag-example { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-3); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
footer { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 20px 40px; font-size: 13px; color: var(--ink-3); text-align: center; line-height: 1.7; }
.link-discreto { color: var(--ink-3); }

.aviso { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.aviso-erro { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.aviso-setor { margin-bottom: 16px; }
.tag-inline { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line); padding: 1px 7px; border-radius: 6px; margin-left: 8px; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; z-index: 50;
  background: var(--card); box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.toast-ok { color: var(--good); border: 1px solid var(--good-line); }
.toast-erro { color: var(--bad); border: 1px solid var(--bad-line); }

/* ---------- Painel ---------- */
.painel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sec-faturamento {
  background: var(--destaque-bg); border-color: rgba(240, 177, 58, .25);
  --ink: #FBF3DC; --ink-2: #D3C6A8; --ink-3: #B0A287; --line: rgba(251, 243, 220, .14);
  --track: rgba(251, 243, 220, .14); --accent-ink: #F0B13A; --card-2: rgba(251, 243, 220, .06);
  color: var(--ink);
}
.hero-value { margin: 0; font-size: clamp(44px, 6vw, 64px); font-weight: 600; letter-spacing: -.025em; line-height: 1; color: var(--destaque-numero); }
.hero-value sup { font-size: .32em; font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-right: .45em; vertical-align: top; position: relative; top: .35em; }
.sec-faturamento .stat-sub { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.sec-faturamento .aviso { margin-top: 14px; }
/* Pedidos do mês em destaque e os últimos 3 dias (pedido do dono, 08/10/2026). */
.pedidos-mes { margin: 14px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.dias-recentes { margin-top: 16px; }
.dia-recente { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.dia-recente:last-child { border-bottom: 1px solid var(--line); }
.dia-recente .dia-semana { color: var(--ink-2); }
.dia-recente strong { font-weight: 600; white-space: nowrap; }
.channel-bar { display: flex; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 24px 0 8px; background: var(--track); }
.channel-bar div { height: 100%; }
.channel-list { display: flex; flex-direction: column; }
.channel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.channel-name { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.channel-figures { display: flex; align-items: baseline; gap: 14px; }
.channel-amount { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.channel-pct { font-size: 12.5px; color: var(--ink-3); min-width: 44px; text-align: right; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.grid-2 > div { padding: 2px 0; }
.grid-2 > div:first-child { padding-right: 24px; border-right: 1px solid var(--line); }
.grid-2 > div:last-child { padding-left: 24px; }
.stat-sub { font-size: 13px; color: var(--ink-3); }
.stat-value { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 4px; color: var(--ink); }

.cmv-note { font-size: 13px; color: var(--ink-2); margin: -8px 0 14px; }
.cmv-value { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); margin: 0 0 8px; }
.cmv-stock { margin: 14px 0 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cmv-stock-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.cmv-stock-row:last-child { margin-bottom: 0; }
.cmv-stock-row strong { color: var(--ink); font-weight: 600; }
.cmv-gauge-meta { font-size: 13px; color: var(--ink-3); margin-top: 10px; }

.product-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.product-row:first-child { padding-top: 0; }
.product-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rank { font-size: 15px; font-weight: 600; color: var(--ink-3); width: 20px; flex-shrink: 0; }
.product-row.top .rank { color: var(--accent-ink); }
.product-info { flex: 1; min-width: 0; }
.product-name { font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-bar-track { height: 5px; border-radius: 3px; background: var(--track); margin-top: 8px; }
.product-bar-fill { height: 100%; border-radius: 3px; background: var(--line-strong); }
.product-row.top .product-bar-fill { background: var(--accent); }
.product-figures { text-align: right; flex-shrink: 0; }
.product-qty { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.product-revenue { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; margin-top: 2px; }

.combo-block { margin-bottom: 26px; }
.combo-block:last-child { margin-bottom: 0; }
.combo-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 12px; }
.combo-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.combo-name { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-track { flex: 0 0 64px; width: 64px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.combo-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.combo-figures { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
.combo-qty { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.combo-pct { font-size: 12.5px; color: var(--ink-3); min-width: 42px; text-align: right; }

/* ---------- Indicadores ---------- */
.ind-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sec-kpis { background: none; border: 0; box-shadow: none; padding: 0; }
.sec-kpis > .section-head { margin-bottom: 14px; }
.ind-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); min-width: 0; }
/* Prêmios por pessoa: mesmo destaque do cartão de faturamento (pedido do dono, 08/10/2026;
   exceção ao "único destaque" do DESIGN.md). */
.ind-resumo {
  grid-column: 1 / -1;
  background: var(--destaque-bg); border-color: rgba(240, 177, 58, .25);
  --ink: #FBF3DC; --ink-2: #D3C6A8; --ink-3: #B0A287; --line: rgba(251, 243, 220, .14);
  --track: rgba(251, 243, 220, .14); --accent-ink: #F0B13A; --card-2: rgba(251, 243, 220, .06);
  color: var(--ink);
}
.ind-resumo .stat-sub { font-size: 13px; color: var(--ink-2); }
.ind-resumo .stat-value { color: var(--destaque-numero); font-size: clamp(40px, 5vw, 56px); letter-spacing: -.025em; line-height: 1; margin: 8px 0 8px; }
.ind-previa { margin-top: 16px; }
.ind-card.tone-super, .ind-card.tone-meta { border-color: var(--good-line); }
.ind-card.tone-fora { border-color: var(--bad-line); }
.ind-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ind-title { font-size: 16px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.ind-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.ind-aud { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; }
.ind-label { font-size: 12.5px; color: var(--ink-2); margin-bottom: 2px; }
.ind-value { font-size: 40px; font-weight: 600; letter-spacing: -.025em; line-height: 1.05; color: var(--ink); margin: 0 0 6px; }
.ind-valuerow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; }
.ind-valuerow .ind-value { margin: 0; }
.ind-meta { font-size: 13px; color: var(--ink-2); }
.ind-detail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ind-detail-plain { border-top: 0; padding-top: 0; margin-top: 10px; }
.ind-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ind-row:first-child { padding-top: 0; }
.ind-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ind-row-label { flex: 1; min-width: 90px; font-size: 14px; color: var(--ink); }
.ind-row-label small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.ind-row-value { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.ind-row .kpi-status { white-space: nowrap; }
.ind-empty { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

.kpi-status { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px; }
.kpi-status.pending { color: var(--ink-3); background: var(--track); }
.kpi-status.super { color: var(--inv-ink); background: var(--inv-bg); }
.kpi-status.meta { color: var(--good-ink); background: var(--good-soft); }
/* Dentro de áreas verdes (meta batida), o selo usa o fundo do cartão e o texto de apoio fica mais forte. */
.reached .kpi-status.meta { background: var(--card); }
.ind-card.reached, .ind-row.reached { --ink-3: var(--ink-2); }
.kpi-status.fora { color: var(--bad); background: var(--bad-soft); }

.ind-reward { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--inv-ink); background: var(--inv-bg); padding: 4px 12px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.ind-row .ind-reward { font-size: 14px; padding: 2px 9px; }
.ind-card.reached { background-image: linear-gradient(var(--good-soft), var(--good-soft)); border-color: var(--good); }
.ind-row.reached { background-image: linear-gradient(var(--good-soft), var(--good-soft)); border-radius: 8px; padding: 10px 12px; margin-inline: -12px; border-bottom-color: transparent; }
.ind-card.reached-super, .ind-row.reached-super {
  --ink: var(--inv-ink); --ink-2: var(--inv-ink-2); --ink-3: var(--inv-ink-3); --line: var(--inv-rule); --track: var(--inv-track);
  --good: var(--inv-good); --bad: var(--inv-bad); --good-ink: var(--inv-good); --bad-ink: var(--inv-bad); --card-2: var(--inv-track);
  background-color: var(--inv-bg); background-image: none; color: var(--inv-ink);
}
.ind-card.reached-super { border-color: var(--inv-bg); }
.reached-super .ind-reward, .reached-super .kpi-status.super { background: var(--inv-ink); color: var(--inv-bg); }

.ind-cost-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.ind-cost { padding: 14px 16px; border: 1px solid var(--bad-line); background: var(--bad-soft); border-radius: 10px; }
.ind-cost-label { font-size: 13px; font-weight: 600; color: var(--bad-ink); margin-bottom: 2px; }
.ind-cost-value { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--bad); }
.ind-cost-note { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }

/* ---------- formulários e botões ---------- */
.form-row { margin-bottom: 16px; }
.form-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-pair > * { min-width: 0; }
/* iPhone: campos de data ignoram a largura e invadem o vizinho; sem a aparência nativa, respeitam a coluna. */
input[type="date"].form-input, input[type="datetime-local"].form-input { -webkit-appearance: none; appearance: none; min-width: 0; min-height: 43px; text-align: left; }
input[type="date"].form-input::-webkit-date-and-time-value, input[type="datetime-local"].form-input::-webkit-date-and-time-value { text-align: left; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.form-input { width: 100%; background: var(--card-2); border: 1px solid var(--line-strong); color: var(--ink); font-size: 14.5px; padding: 10px 12px; border-radius: 8px; }
.form-input::placeholder { color: var(--ink-3); opacity: .7; }
.form-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-color: var(--accent-ink); }
.btn-primary { margin-top: 6px; width: 100%; background: var(--accent); color: #231710; border: 0; font-size: 14.5px; font-weight: 600; padding: 12px 14px; border-radius: 10px; cursor: pointer; }
.btn-primary:hover { filter: brightness(.95); }
.btn-sec { background: none; color: var(--ink); border: 1px solid var(--line-strong); padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-sec:hover { background: var(--card-2); }
.btn-forte { background: var(--accent); border-color: var(--accent); color: #231710; }
.btn-forte:hover { background: var(--accent); filter: brightness(.95); }
.btn-perigo { color: var(--bad); border-color: var(--bad-line); }
.btn-perigo:hover { background: var(--bad-soft); }
button:disabled { opacity: .55; cursor: wait; }

/* ---------- Lançamentos ---------- */
.lanc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-situacao { font-size: 13px; color: var(--accent-ink); min-height: 18px; margin: 0 0 10px; }
.lanc-col .btn-perigo { margin-top: 10px; width: 100%; }
.recentes { margin-top: 20px; }
.recentes-titulo { font-size: 13px; color: var(--ink-3); margin: 0 0 6px; }
.recente {
  display: flex; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; padding: 10px 0; cursor: pointer; text-align: left;
}
.recente:hover { color: var(--accent-ink); }
.recente-valor { color: var(--ink-2); white-space: nowrap; }

/* ---------- Comparar ---------- */
.cmp-unidade { display: flex; align-items: center; gap: 8px; }
.cmp-nota { margin: 14px 0 0; }
.cmp-rolagem { overflow-x: auto; }
.cmp-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp-tabela th, .cmp-tabela td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.cmp-tabela tbody tr:last-child th, .cmp-tabela tbody tr:last-child td { border-bottom: 0; }
.cmp-tabela th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); white-space: normal; }
.cmp-tabela thead th { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.cmp-tabela td { font-weight: 600; color: var(--ink); }
.cmp-tabela small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-3); }
.cmp-tabela .cmp-total { color: var(--accent-ink); }
.cmp-tabela td.cmp-super small, .cmp-tabela td.cmp-meta small { color: var(--good); }
.cmp-tabela td.cmp-fora small { color: var(--bad); }

/* ---------- Pessoas ---------- */
.pessoas-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pessoas-grid > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pessoa-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pessoa-row:last-child { border-bottom: 0; }
.pessoa-row.destaque { background: var(--card-2); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.pessoa-info { min-width: 0; flex: 1 1 220px; }
.pessoa-nome { font-size: 15px; font-weight: 600; }
.pessoa-meta { font-size: 13px; color: var(--ink-3); margin-top: 3px; overflow-wrap: anywhere; }
.pessoa-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pessoa-card { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 4px; }
.pessoa-card:last-child { border-bottom: 0; padding-bottom: 0; }
.pessoa-card .pessoa-row { border-bottom: 0; padding-bottom: 8px; }
.vinculos { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 2px solid var(--line-strong); }
.vinculo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.vinculo-row strong { color: var(--ink); font-weight: 600; }
.vinculo-row.inativo { opacity: .6; }
.vinculo-edicao { display: block; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.vinculo-edicao > * { margin-bottom: 10px; }
.vinculos > .btn-sec { align-self: flex-start; }
.novo-vinculo { border: 1px solid var(--line); background: var(--card-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.novo-vinculo .form-row-pair { margin-top: 10px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- Etiquetas (só funcionários) ---------- */
.et-subtabs { display: flex; gap: 8px; margin-bottom: 16px; }
.et-subtabs button {
  background: var(--card); border: 1px solid var(--line-strong); color: var(--ink-2); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; padding: 7px 16px; cursor: pointer;
}
.et-subtabs button:hover { background: var(--card-2); }
.et-subtabs button.active { background: var(--accent); border-color: var(--accent); color: #231710; }
.et-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.et-carregando { color: var(--ink-3); text-align: center; padding: 40px 0; }
.et-aviso { margin-bottom: 18px; }
.et-categorias { display: flex; flex-direction: column; gap: 8px; }
.et-categoria { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.et-categoria summary {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  padding: 11px 14px; font-size: 14.5px; font-weight: 500; color: var(--ink); list-style: none;
}
.et-categoria summary::-webkit-details-marker { display: none; }
.et-categoria[open] summary { color: var(--accent-ink); border-bottom: 1px solid var(--line); }
.et-contagem { font-size: 12px; color: var(--ink-3); }
.et-categoria .et-chips { padding: 12px 14px 14px; }
.et-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.et-chip {
  background: var(--card); border: 1px solid var(--line-strong); color: var(--ink); border-radius: 999px;
  font-size: 13.5px; padding: 7px 13px; cursor: pointer;
}
.et-chip:hover { background: var(--card-2); }
.et-chip.ativo { background: var(--accent); border-color: var(--accent); color: #231710; font-weight: 600; }
.et-dica { font-size: 13px; color: var(--ink-3); margin: 0; }
/* Responsável = quem está logado: só leitura, com a mesma altura de um campo. */
.et-responsavel { display: flex; align-items: center; min-height: 43px; padding: 0 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--track); border-radius: 8px; overflow-wrap: anywhere; }
.et-copias { display: flex; align-items: center; gap: 14px; }
.et-copias .btn-sec { font-size: 18px; padding: 4px 16px; }
.et-copias-n { font-size: 20px; font-weight: 600; min-width: 24px; text-align: center; }
.et-previa-caixa { margin-bottom: 16px; }
/* A etiqueta é papel branco: fica branca nos dois temas. */
.et-previa { display: block; width: 100%; max-width: 384px; height: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; }
.et-impressora-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.et-impressora { font-size: 13px; color: var(--ink-2); margin: 0; }
.et-situacao { font-size: 13.5px; color: var(--accent-ink); min-height: 18px; margin: 12px 0 0; }
.et-quando { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
@media (min-width: 860px) {
  .et-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .et-lado { position: sticky; top: 84px; }
}

/* ---------- Login e páginas simples ---------- */
.login {
  flex: none; display: flex; flex-direction: column; align-items: center;
  width: calc(100% - 32px); max-width: 400px; margin: auto; padding: 32px 24px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.login .logo { box-shadow: 0 0 0 1.5px rgba(240, 177, 58, .6); }
.login-titulo { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 16px 0 4px; }
.login-sub { color: var(--ink-2); font-size: 14.5px; margin: 0 0 24px; }
.login-nota { color: var(--ink-3); font-size: 13px; margin-top: 16px; }
.login .aviso { width: 100%; margin: 0 0 18px; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: #fff; color: #1f1f1f; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.btn-google:hover { background: #f6f6f6; }
.setor-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }

/* ---------- telas largas ---------- */
@media (min-width: 860px) {
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-cost-grid { grid-template-columns: 1fr 1fr; }
  .lanc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pessoas-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .sec-combos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .sec-combos .section-head, .sec-combos .section-desc { grid-column: 1 / -1; }
  .sec-combos .combo-block { margin-bottom: 0; }
}
@media (min-width: 1000px) {
  .painel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sec-faturamento { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-content: start; }
  .sec-faturamento .section-head { grid-column: 1 / -1; }
  .sec-faturamento .hero-wrap { grid-column: 1; grid-row: 2; }
  .sec-faturamento .pedidos-mes { grid-column: 1; grid-row: 3; }
  .sec-faturamento .dias-recentes { grid-column: 1; grid-row: 4; align-self: start; }
  .sec-faturamento .aviso { grid-column: 1; grid-row: 5; align-self: start; }
  .sec-faturamento .channel-bar { grid-column: 2; grid-row: 2; align-self: center; margin: 0; }
  .sec-faturamento .channel-list { grid-column: 2; grid-row: 3 / span 3; margin-top: 14px; }
  .sec-ticket, .sec-cmv, .sec-produtos, .sec-burgers { grid-column: span 3; }
  .sec-combos { grid-column: 1 / -1; }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  header.brandbar { padding-left: 16px; padding-right: 16px; }
  nav.tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  nav.tabs button { padding: 8px 12px; }
  .conteudo { padding: 16px; }
  footer { padding-inline: 16px; }
}
@media (max-width: 560px) {
  section { padding: 18px; }
  .ind-card { padding: 18px; }
  .form-row-pair, .form-grid { gap: 10px; }
  .et-par { grid-template-columns: 1fr; }
  .stat-value { font-size: 28px; }
  .grid-2 > div:first-child { padding-right: 14px; }
  .grid-2 > div:last-child { padding-left: 14px; }
  header.brandbar .bn small { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}