/* Painel do Dono: identidade visual do sistema (2026-10-26).
   Leve e profissional: fundo creme bem claro, cartões brancos, linhas finas em tons quentes,
   texto quase preto e o dourado da marca só como destaque (menu ativo, botão principal, foco).
   Verde, âmbar e vermelho só quando sinalizam estado (ok, atenção, problema).
   Fonte: Manrope (a mesma da página do produto), guardada em public/fontes pra funcionar sem internet.
   Escala de espaço: 4 / 8 / 12 / 16 / 24 / 32 / 40. Guia completo em docs/identidade-visual.md. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fontes/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fontes/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --fundo: #f6f4ef; --cartao: #ffffff; --suave: #f4f1ea; --suave-2: #faf8f4;
  --tinta: #17150f; --tinta-2: #4f493e; --tinta-3: #7a7262;
  --linha: #e6e1d6; --linha-2: #efebe3;
  --marca: #c99a2e; --marca-forte: #7a5a0b; --marca-bg: #f7efd9; /* dourado do Painel do Dono */
  --destaque: #b42318; --destaque-bg: #fcebe9;
  --ok: #1f7a4d; --ok-bg: #e6f3ec; --alerta: #95600a; --alerta-bg: #fbf1dc;
  --ifood: #c8262b; --site: #3d3a33;
  --raio: 14px; --raio-p: 9px;
  --sombra: 0 1px 2px rgba(23, 21, 15, .04), 0 6px 18px rgba(23, 21, 15, .04);
  --fonte: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --lateral: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0d0c0a; --cartao: #15130f; --suave: #1d1a15; --suave-2: #181611;
    --tinta: #f2eee6; --tinta-2: #b3ab9c; --tinta-3: #8f877a;
    --linha: #2b2720; --linha-2: #221f19;
    --marca: #d6ae45; --marca-forte: #e8c86f; --marca-bg: #2a2313;
    --destaque: #f2857a; --destaque-bg: #3a1c18;
    --ok: #6fd39c; --ok-bg: #15281d; --alerta: #f0bb5a; --alerta-bg: #33270f;
    --ifood: #ff7a7e; --site: #d6d0c4;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 15px/1.55 var(--fonte); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
h1 { font-size: 28px; font-weight: 700; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; }
select, input, textarea { font: inherit; color: var(--tinta); background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 8px 12px; min-height: 40px; }
input:hover, select:hover { border-color: #d3ccbc; }
input[type=checkbox] { min-height: 0; padding: 0; width: 18px; height: 18px; box-shadow: none; accent-color: var(--marca); }
/* Sem as setinhas do campo de número: elas reservam espaço à direita e
   deixavam o número fora do alinhamento com o título da coluna. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-bg); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; box-shadow: none; }

/* ---------- Estrutura: menu lateral + coluna ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.coluna { min-width: 0; display: flex; flex-direction: column; }

.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--cartao); border-right: 1px solid var(--linha);
  padding: 24px 14px 20px; display: flex; flex-direction: column; gap: 28px; }
.lateral-marca { display: flex; align-items: center; gap: 12px; padding: 0 10px; min-width: 0; }
.marca-icone { width: 40px; height: 40px; flex: none; display: block; }
.marca-txt { min-width: 0; line-height: 1.25; }
.marca-txt b { display: block; font-size: 15px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-txt span { font-size: 12px; color: var(--tinta-3); }

.menu { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--tinta-2); font-weight: 600; text-decoration: none; transition: background .12s, color .12s; }
.menu-item:hover { background: var(--suave); color: var(--tinta); }
.menu-item.ativo { background: var(--marca-bg); color: var(--marca-forte); }
.menu-fim { margin-top: auto; }
/* Adicional no menu, logo abaixo de Clientes. Bloqueado: meio apagado, cadeado dourado e dica ao passar o mouse. */
.menu-adicional { position: relative; }
/* Desativado: cinza claro sempre, sem fundo nem escurecer ao passar o mouse; só o cadeado fica vivo. */
.menu-adicional.bloqueado, .menu-adicional.bloqueado:hover, .menu-adicional.bloqueado:focus { color: #bdb6a7 !important; background: none !important; font-weight: 500; }
.menu-adicional.bloqueado .ico { opacity: .7; }
.menu-adicional .cadeado { width: 20px; height: 20px; margin-left: auto; fill: #e3a414; color: #e3a414; flex: none; opacity: 1; }
.menu-adicional .cadeado[hidden], .menu-dica[hidden] { display: none !important; }
/* fixed: o menu tem rolagem própria e cortaria a dica; a posição vem do app.js ao passar o mouse. */
.menu-dica { display: none; position: fixed; left: 0; top: 0; transform: translateY(-50%); z-index: 30; width: 270px;
  padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--cartao); box-shadow: 0 8px 24px rgba(23, 21, 15, .14);
  font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--tinta); white-space: normal; text-align: left; }
.menu-dica .ajuda-tit { display: block; }
.menu-dica .dica-linha { display: block; position: relative; padding-left: 14px; }
.menu-dica .dica-linha + .dica-linha { margin-top: 6px; }
.menu-dica .dica-linha::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--marca); }
.menu-dica .dica-acao { color: var(--marca-forte); font-weight: 600; }
.menu-adicional.bloqueado:hover .menu-dica, .menu-adicional.bloqueado:focus-visible .menu-dica { display: block; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Barra de cima: a pergunta da página, o mês e o botão de atualizar. */
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 40px; background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.barra-info { font-weight: 600; color: var(--tinta-3); }
.barra-dir { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.mes { display: flex; gap: 8px; align-items: center; color: var(--tinta-3); font-weight: 600; font-size: 13px; }
body[data-pagina="clientes"] .mes, body[data-pagina="config"] .mes { display: none; }
.botao-sync { font-size: 14px; }
/* Andamento da atualização: selo na barra; se der erro, caixa com a causa logo abaixo. */
.sync { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: var(--suave); color: var(--tinta-2); max-width: 100%; }
.sync.rodando { background: var(--alerta-bg); color: var(--alerta); }
.sync.erro { background: var(--destaque-bg); color: var(--destaque); }
.sync-erro { max-width: 1280px; width: 100%; margin: 20px auto 0; padding: 0 40px; }
.sync-erro[hidden] { display: none; }
.sync-erro .aviso p { margin: 4px 0 0; color: var(--tinta-2); }
.sync-erro .sync-detalhe { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; color: var(--tinta-2); }

/* ---------- Página ---------- */
.pagina { width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 40px 80px; display: grid; gap: 24px; align-content: start; }
section { display: grid; gap: 24px; }
.pagina-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pagina-cab p { color: var(--tinta-3); margin-top: 6px; font-size: 15px; }
.sub { display: grid; gap: 24px; }

/* Subabas (Cardápio): texto com um traço embaixo da que está aberta. */
.subabas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); overflow-x: auto; overflow-y: hidden; }
.subaba { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 10px 16px; font-weight: 650; color: var(--tinta-3); cursor: pointer; white-space: nowrap; }
.subaba:hover { color: var(--tinta); }
.subaba.ativa { color: var(--marca-forte); border-bottom-color: var(--marca); }

/* ---------- Avisos ---------- */
.aviso { background: var(--alerta-bg); border: 1px solid color-mix(in srgb, var(--alerta) 28%, transparent); border-radius: var(--raio); padding: 14px 18px; }
.aviso-tit { font-weight: 700; color: var(--alerta); margin-bottom: 4px; }
.aviso ul { margin: 0; padding-left: 18px; color: var(--tinta-2); }
.aviso li { margin: 2px 0; }
.aviso-forte { background: var(--destaque-bg); border-color: color-mix(in srgb, var(--destaque) 35%, transparent); }
.aviso-forte .aviso-tit { color: var(--destaque); }
.aviso-acao { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Primeiros passos (só aparece enquanto falta algo) ---------- */
.passos { background: var(--cartao); border: 1px solid var(--linha); border-left: 4px solid var(--marca); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 22px; }
.passos-cab { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.passos-cab span { color: var(--tinta-3); font-size: 13px; }
.passos-lista { list-style: none; margin: 0; padding: 0; }
.passos-lista li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--linha-2); }
.passos-lista li:first-child { border-top: 0; }
.passos-lista li > div { flex: 1; min-width: 0; }
.passos-lista p { color: var(--tinta-3); font-size: 13px; }
.passo-marca { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--suave); color: var(--tinta-2); }
.passos-lista li.feito .passo-marca { background: var(--ok-bg); color: var(--ok); }
.passos-lista li.feito b { color: var(--tinta-3); font-weight: 600; text-decoration: line-through; }

/* ---------- Cartões ---------- */
.bloco, .kpi { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.bloco { padding: 24px; min-width: 0; }
.bloco-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.bloco-cab p { color: var(--tinta-3); font-size: 13.5px; margin-top: 3px; }
.canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; }
.canais-largos { grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); }
.canal-tit { display: flex; align-items: center; gap: 8px; }
.ponto { width: 10px; height: 10px; border-radius: 50%; }

/* Resumo do Início: três cartões com um atalho pra página de cada assunto. */
.resumo-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.resumo-card { display: flex; flex-direction: column; gap: 2px; padding: 20px 22px; }
.link-seta { margin-top: auto; padding-top: 12px; font-weight: 650; font-size: 13.5px; color: var(--marca-forte); text-decoration: none; }
.link-seta:hover { text-decoration: underline; }

/* ---------- Indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kpi { padding: 20px 22px; }
.kpis .kpi-val { white-space: nowrap; }
.kpi-rot { color: var(--tinta-3); font-weight: 600; font-size: 13.5px; }
.kpi-rot-data { font-weight: 400; font-size: 11px; opacity: .8; margin-left: 4px; white-space: nowrap; }
.kpi-val { font-size: 28px; font-weight: 750; letter-spacing: -.025em; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi-sub { color: var(--tinta-3); font-size: 13.5px; margin-top: 4px; }
.kpi-val.ok { color: var(--ok); } .kpi-val.alerta { color: var(--destaque); }
.barra-prog { height: 8px; background: var(--suave); border-radius: 99px; margin-top: 14px; overflow: hidden; }
.barra-in { height: 100%; background: var(--ok); border-radius: 99px; width: 0; transition: width .3s; }
.kpis-raiox, .kpis-ifood { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis-raiox .kpi-val, .kpis-raiox .kpi-sub, .kpis-ifood .kpi-val, .kpis-ifood .kpi-sub { white-space: normal; }
.kpis-raiox .kpi-val, .kpis-ifood .kpi-val { font-size: 24px; }

/* ---------- Configurações (linha: nome e descrição | controle) ---------- */
.config-grade { display: block; columns: 2 340px; column-gap: 40px; }
.config-grupo { break-inside: avoid; margin-bottom: 28px; }
.config-grade .cfg-controle select { min-width: 0; }
.config-grupo-tit { padding-bottom: 10px; border-bottom: 2px solid var(--linha); }
.config-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linha-2); }
.config-linha:last-child { border-bottom: 0; }
.cfg-nome { font-weight: 650; }
.cfg-desc { color: var(--tinta-3); font-size: 13.5px; margin-top: 2px; }
.cfg-controle { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cfg-valor { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.conexao { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 4px 0; }
.campo-largo { max-width: 460px; }
.campo-largo input { width: 100%; }
.como { margin-top: 6px; font-size: 13.5px; }
.como summary { cursor: pointer; color: var(--marca-forte); font-weight: 650; list-style: none; width: max-content; }
.como summary::-webkit-details-marker { display: none; }
.como summary::before { content: "▸ "; }
.como[open] summary::before { content: "▾ "; }
.como div { color: var(--tinta-2); margin-top: 6px; background: var(--suave-2); border: 1px solid var(--linha-2); border-radius: var(--raio-p); padding: 10px 12px; }

/* Campo com unidade dentro (R$ 10 · 17,1 % · 3 meses) */
.campo-unid { display: inline-flex; align-items: stretch; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--cartao); overflow: hidden; }
.campo-unid:focus-within { border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-bg); }
.campo-unid input { border: 0; box-shadow: none !important; width: 88px; text-align: right; font-weight: 600; border-radius: 0; }
.campo-unid span { display: grid; place-items: center; padding: 0 10px; background: var(--suave-2); color: var(--tinta-3); font-size: 13px; font-weight: 600; }
.campo-unid span:first-child { border-right: 1px solid var(--linha); }
.campo-unid span:last-child { border-left: 1px solid var(--linha); }
.cfg-controle select { min-width: 190px; }

/* ---------- Selos ---------- */
.selo { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; vertical-align: middle; }
.selo-alerta { background: var(--alerta-bg); color: var(--alerta); }
.selo-ok { background: var(--ok-bg); color: var(--ok); }
.selo-neutro { background: var(--suave); color: var(--tinta-2); }
.selo-auto { background: var(--marca-bg); color: var(--marca-forte); }
/* CMV acima da faixa saudável (>35%): mais forte que o alerta comum, porque aqui é prejuízo de verdade. */
.selo-critico { background: var(--destaque-bg); color: var(--destaque); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destaque) 25%, transparent); }
.legenda { color: var(--tinta-3); font-size: 13px; display: flex; gap: 6px; align-items: center; }

/* ---------- Botões ---------- */
.botao { font-weight: 650; background: var(--cartao); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 9px 16px; cursor: pointer; min-height: 40px; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.botao:hover { background: var(--suave); }
.botao:disabled { opacity: .55; cursor: default; background: var(--cartao); }
.botao-primario { background: var(--marca); border-color: var(--marca); color: #17130a; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.botao-primario:hover { background: #b88a26; border-color: #b88a26; }
.botao-perigo { color: var(--destaque); }
.botao-perigo:hover { border-color: var(--destaque); background: var(--destaque-bg); }
.botao-perigo.confirmar { color: #fff; background: var(--destaque); border-color: var(--destaque); }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.botao-mini { font-size: 12.5px; font-weight: 650; border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta); border-radius: 8px; padding: 4px 11px; min-height: 0; cursor: pointer; text-decoration: none; display: inline-block; }
.botao-mini:hover { background: var(--suave); }
.apagar, .adicionar { font-weight: 700; border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta-3); border-radius: var(--raio-p); min-width: 34px; height: 34px; cursor: pointer; }
.apagar:hover { color: var(--destaque); border-color: var(--destaque); }
.apagar.confirmar { color: #fff; background: var(--destaque); border-color: var(--destaque); padding: 0 8px; }
.adicionar { color: var(--marca-forte); border-color: color-mix(in srgb, var(--marca) 40%, var(--linha)); }
.adicionar:hover { background: var(--marca-bg); }
/* Fechar (×) dos pop-ups: quadrado neutro. */
.botao-fechar { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--cartao); cursor: pointer; }
.botao-fechar svg { width: 16px; height: 16px; stroke: var(--tinta-2); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.botao-fechar:hover { background: var(--suave); }

/* ---------- Textos de apoio ---------- */
.nota { color: var(--tinta-3); font-size: 13.5px; }
.fraco { color: var(--tinta-3); }
.neg { color: var(--destaque); }
.valor-grande { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Títulos de seção dentro de um cartão (Empresa / Casa, grupos de configuração): texto escuro com uma barrinha na cor da marca. */
.sub-tit, .config-grupo-tit { font-weight: 700; font-size: 15.5px; color: var(--tinta); display: flex; align-items: center; gap: 10px; }
.sub-tit::before, .config-grupo-tit::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--marca); flex: none; }
.sub-tit { margin: 22px 0 12px; }
.sub-tit .fraco { margin-left: auto; font-weight: 600; font-size: 13px; }
.sub-tit:first-child, .canais > div > .sub-tit { margin-top: 0; }

/* ---------- Tabelas ---------- */
.rolagem { overflow-x: auto; overflow-y: hidden; }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.tabela th, .tabela td { padding: 10px 8px; border-bottom: 1px solid var(--linha-2); text-align: right; white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela th { color: var(--tinta-3); font-weight: 650; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--linha); }
.tabela tbody tr:hover td { background: var(--suave-2); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .total td { font-weight: 700; border-top: 1px solid var(--linha); background: var(--suave-2); }
.tabela .grupo td { background: var(--suave-2); color: var(--tinta); font-weight: 700; font-size: 13.5px; text-align: left; box-shadow: inset 3px 0 0 var(--marca); padding-left: 14px; }
.tabela .grupo:hover td { background: var(--suave-2); }
.tabela .sep { border-left: 1px solid var(--linha); }
/* Alinhamento: texto à esquerda, número à direita, marcação no centro. Título da coluna sempre igual ao conteúdo. */
.tabela .c-txt { text-align: left; }
.tabela .c-num { text-align: right; }
.tabela .c-ctr { text-align: center; }
/* Título de grupo de colunas (Site / iFood): centralizado, com linha na cor da marca */
.tabela thead .canal-cab th { text-align: center; color: var(--tinta); font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; padding-bottom: 6px; border-bottom: 0; }
.tabela thead .canal-cab th[colspan] { border-bottom: 2px solid var(--marca); }
.tabela thead .canal-cab th:first-child, .tabela thead .canal-cab th:last-child { border-bottom: 0; }
/* Campo numérico ocupa a coluna toda: a borda alinha com o título */
.tabela input[type=number] { width: 100%; min-width: 68px; text-align: right; padding: 5px 8px; min-height: 34px; }
.tabela input.abaixo { border-color: var(--destaque); color: var(--destaque); font-weight: 700; background: var(--destaque-bg); }
.tabela input[type=checkbox] { width: 18px; height: 18px; margin: 0; vertical-align: middle; }
.tabela-precos th, .tabela-precos td { padding: 8px 5px; }
/* Tabela de preços: título das colunas centralizado e número dentro das caixinhas também; "Produto" à esquerda. */
#tabela-precos thead th { text-align: center; }
#tabela-precos thead tr:last-child th:first-child { text-align: left; }
#tabela-precos input[type=number] { text-align: center; }
.tabela-precos td.c-num:has(input) { width: 84px; }
.tabela-precos .apagar { width: 32px; }
.tabela-precos td.del { padding-left: 2px; }
/* Dia a dia: um cartão por semana (segunda a domingo), colunas de largura fixa pros números alinharem entre os cartões. */
.tabela-semana th:first-child, .tabela-semana td:first-child { text-align: left; }
.tabela-semana th:not(:first-child), .tabela-semana td:not(:first-child) { text-align: right; }
.tabela-semana { table-layout: fixed; min-width: 760px; }
.semana-card { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.semana-card + .semana-card { margin-top: 16px; }
.semana-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
  background: var(--suave-2); box-shadow: inset 3px 0 0 var(--marca); color: var(--tinta); font-weight: 700; font-size: 14px; }
.semana-cab .fraco { font-weight: 500; font-size: 12.5px; }
.semana-card .rolagem { padding: 0 8px; }

/* ---------- Ingredientes ---------- */
#tabela-insumos input[type=text] { width: 100%; min-width: 140px; padding: 5px 8px; min-height: 34px; }
#tabela-insumos select { padding: 5px 8px; min-height: 34px; min-width: 110px; }
#tabela-insumos td.c-num { white-space: nowrap; }
.lista-como { margin: 0; padding-left: 18px; }
.lista-como li + li { margin-top: 6px; }

/* Resumo do canal e fechamento */
.custos-canal { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.custos-canal td { padding: 9px 0; border-bottom: 1px solid var(--linha-2); }
.custos-canal td:last-child { text-align: right; }
.custos-canal td.pct { text-align: right; color: var(--tinta-3); width: 64px; }
.custos-canal tr.forte td { font-weight: 700; border-bottom: 0; padding-top: 14px; }

/* ---------- Contas ---------- */
.resumo-contas { display: flex; gap: 16px; flex-wrap: wrap; color: var(--tinta-3); font-size: 13px; }
.resumo-contas b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.resumo-contas .a-pagar b { color: var(--alerta); }

/* Total geral da carteira, acima das partes do mês: 3 cards separados. */
.kpis-contas { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.kpis-contas .kpi { padding: 14px 10px; text-align: center; background: var(--suave); box-shadow: none; }
.kpis-contas .kpi-val { font-size: 20px; }

/* Cada parte do mês é um card com relevo próprio, separado das outras. */
.parte-card { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 18px; }
.parte-card + .parte-card { margin-top: 16px; }
.parte-card-cab { margin-bottom: 10px; }
.parte-rot { font-weight: 700; font-size: 13.5px; color: var(--tinta); border-left: 3px solid var(--marca); padding-left: 8px; line-height: 1.2; }
.lanc-vazio { padding: 6px 0; font-size: 13px; }

/* Uma conta = uma linha (checkbox + botão com nome e valor). O resto dos campos só aparece no pop-up, ao clicar. */
.lanc-lista { display: flex; flex-direction: column; min-height: 28px; }
.lanc-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha-2); }
.lanc-item:first-child { border-top: 0; }
.lanc-item[draggable="true"] { cursor: grab; }
.lanc-item.arrastando { display: none; }
.lanc-alca { flex: none; color: var(--tinta-3); font-size: 12px; letter-spacing: -2px; user-select: none; }
.lanc-vaga { flex: none; height: 3px; margin: 2px 0; border-radius: 2px; background: var(--marca); }
.lanc-lista:has(.lanc-vaga) .lanc-vazio { display: none; }
.parte-card.alvo { outline: 2px dashed var(--marca); outline-offset: 4px; }
.lanc-item input[type=checkbox] { width: 18px; height: 18px; flex: none; accent-color: var(--marca); }
.lanc-abrir { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 4px; margin: 0; font: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.lanc-abrir:hover { background: var(--suave); }
.lanc-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); font-size: 14px; }
.lanc-valor { flex: none; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--tinta); }
.lanc-valor.vazio { color: var(--alerta); font-style: italic; font-size: 12.5px; }
.parte-rodape { margin-top: 10px; padding: 10px 12px; background: var(--suave-2); border-radius: var(--raio-p); }
.parte-rodape .resumo-contas { font-size: 11.5px; gap: 10px; justify-content: space-between; flex-wrap: nowrap; }
.parte-rodape .resumo-contas span { white-space: nowrap; }

/* ---------- Início: cartões que abrem e fecham ---------- */
.pilha { display: flex; flex-direction: column; gap: 14px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); min-width: 0; }
.cartao > summary, .problema > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.cartao > summary::-webkit-details-marker, .problema > summary::-webkit-details-marker { display: none; }
.cartao > summary::before, .problema > summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 2px 0; border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3); transform: rotate(-45deg); transition: transform .15s; }
.cartao[open] > summary::before, .problema[open] > summary::before { transform: rotate(45deg); }
.cartao > summary { padding: 16px 22px; }
.cartao-tit { font-weight: 700; font-size: 16px; }
.cartao-res { margin-left: auto; color: var(--tinta-3); font-size: 13.5px; text-align: right; }
.cartao-corpo { padding: 2px 22px 22px; }

.problema { border-top: 1px solid var(--linha-2); }
.problema:first-child { border-top: 0; }
.problema > summary { padding: 12px 0; }
.problema-tit { font-weight: 650; font-size: 14.5px; }
.problema-corpo { padding: 0 0 14px 24px; }
.problema-corpo p { margin: 2px 0; font-size: 14px; }
.problema-corpo .solucao { color: var(--tinta-3); margin-top: 8px; }
.problema-corpo .grade { margin-top: 6px; }

/* Listas em colunas: cada item é nome à esquerda e valor à direita. */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); column-gap: 32px; }
.grade-produtos { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); column-gap: 24px; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); column-gap: 32px; row-gap: 16px; }
.sub-grupo { font-weight: 700; font-size: 13px; color: var(--tinta-2); margin: 18px 0 2px; }
.cartao-corpo > .sub-grupo:first-child, .duas-colunas .sub-grupo { margin-top: 0; }
.linha-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha-2); font-size: 14px; }
.linha-item .rot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-item .val { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-item .ok, .produto-pct.ok { color: var(--ok); }
.produto-cel { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha-2); }
.produto-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.produto-sub { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.produto-pct { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* ---------- Recebimentos ---------- */
.tabela input.repasse-real { max-width: 130px; }
.tabela input.repasse-real[readonly] { background: var(--suave); border-color: transparent; color: var(--tinta-2); cursor: default; }

/* ---------- Cardápio: o que mais dá lucro ---------- */
.chips-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.chip-resumo { background: var(--suave-2); border: 1px solid var(--linha-2); border-radius: var(--raio-p); padding: 12px 14px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.chip-resumo:hover { border-color: var(--marca); }
.chip-resumo.ativo { border-color: var(--marca); background: var(--marca-bg); box-shadow: 0 0 0 1px var(--marca); }
.chip-resumo b { font-size: 18px; margin-left: 6px; }
.chip-resumo p { color: var(--tinta-3); font-size: 12.5px; margin-top: 6px; }

/* ---------- Modais ---------- */
#modal-lanc { width: min(500px, 92vw); padding: 26px; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 24px 60px rgba(15, 23, 42, .25); background: var(--cartao); color: var(--tinta); }
#modal-lanc::backdrop, #modal-ficha::backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
.lanc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 18px; }
.campo-lanc { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--tinta-3); }
.campo-lanc input, .campo-lanc select { font: inherit; font-weight: 400; color: var(--tinta); padding: 8px 10px; min-height: 40px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); }
.campo-lanc.full { grid-column: span 2; }
.campo-parcela { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-parcela label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--tinta-3); }
.campo-parcela input { font: inherit; font-weight: 400; color: var(--tinta); padding: 8px 10px; min-height: 40px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); }
.campo-check { grid-column: span 2; flex-direction: row; align-items: center; gap: 8px; }
.campo-check input { width: 18px; height: 18px; accent-color: var(--marca); }

/* ---------- Produtos ---------- */
.novo-produto { background: var(--suave-2); border: 1px solid var(--linha-2); border-radius: var(--raio-p); padding: 18px; margin-bottom: 18px; }
.np-campos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.campo { display: grid; gap: 4px; color: var(--tinta-2); font-weight: 650; font-size: 13px; }
.np-campos .campo input { width: 130px; }
.np-campos .np-nome { flex: 1 1 260px; }
.np-campos .np-nome input { width: 100%; }
.arquivados { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha); }
.lista-arq { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.arq { display: inline-flex; align-items: center; gap: 8px; background: var(--suave); border-radius: var(--raio-p); padding: 4px 4px 4px 12px; font-size: 13px; }
.campos-nota { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px 16px; margin-bottom: 16px; }

/* ---------- Clientes ---------- */
.grade-horas td.cel-hora { min-width: 44px; font-variant-numeric: tabular-nums; border-radius: 4px; }
.segmentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.seg { text-align: left; border: 1px solid var(--linha); background: var(--cartao); border-radius: var(--raio-p); padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; }
.seg:hover { background: var(--suave); }
.seg.ativo { border-color: var(--marca); background: var(--marca-bg); }
.seg-num { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; }
.seg-nome { font-weight: 700; }
.seg-desc { font-size: 12.5px; color: var(--tinta-3); }
.op-filtros { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13.5px; }
.op-check { display: inline-flex; gap: 8px; align-items: center; }
.aviso-lgpd { margin-bottom: 12px; font-size: 13.5px; }
#op-mensagem { width: 100%; font: inherit; color: var(--tinta); background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 12px; resize: vertical; }
.op-acoes { margin-top: 12px; justify-content: flex-end; }

/* ---------- Mensagem rápida ---------- */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--tinta); color: var(--cartao); padding: 12px 20px; border-radius: 12px; font-weight: 650; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); z-index: 50; }

/* ---------- Ficha técnica (modal) ---------- */
.link-produto { font: inherit; font-weight: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.link-produto:hover { text-decoration: underline; color: var(--marca-forte); }
#modal-ficha { width: min(740px, 92vw); max-height: 88vh; padding: 26px; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 24px 60px rgba(15, 23, 42, .25); background: var(--cartao); color: var(--tinta); }
.ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ficha-cab h2 { font-size: 19px; }
#tabela-ficha select, #tabela-ficha input[type=number] { width: 100%; min-width: 130px; }
#tabela-ficha td.c-num { white-space: nowrap; }
.ficha-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); font-weight: 650; }
.ficha-total strong { font-size: 24px; color: var(--marca-forte); }
.ficha-acoes { margin-top: 18px; justify-content: flex-end; }
#ficha-aviso { margin-top: 14px; }

/* ---------- Telas médias: menu fica só com os ícones ---------- */
@media (max-width: 1100px) {
  :root { --lateral: 76px; }
  .lateral { padding: 20px 10px; align-items: center; }
  .marca-txt, .menu-item span { display: none; }
  .lateral-marca { padding: 0; }
  .menu-item { padding: 12px; justify-content: center; }
  .menu-adicional .cadeado { position: absolute; right: 4px; bottom: 4px; width: 15px; height: 15px; }
  .menu-adicional .menu-dica { display: none; }
  .menu-adicional.bloqueado:hover .menu-dica { display: block; }
  .pagina { padding: 28px 28px 72px; }
  .barra { padding: 12px 28px; }
  .sync-erro { padding: 0 28px; }
  .kpis-raiox, .kpis-ifood { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Celular e tela estreita: marca no topo, menu numa barra fixa embaixo ---------- */
@media (max-width: 760px) {
  .app { display: block; }
  .lateral { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--linha); overflow: visible; }
  .lateral-marca { flex: 1; min-width: 0; padding: 0; }
  .lateral .marca-txt { display: flex; }
  .marca-icone { width: 32px; height: 32px; }
  .menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--cartao); border-top: 1px solid var(--linha); box-shadow: 0 -6px 18px rgba(23, 21, 15, .06); }
  .menu > .menu-item { display: none; }
  .menu > .menu-item[data-pagina="inicio"], .menu > .menu-item[data-pagina="vendas"], .menu > .menu-item[data-pagina="contas"],
  .menu > .menu-item[data-pagina="cardapio"], .menu > .menu-mais { display: flex; }
  .menu-fim { margin-top: 0; }
  .menu-item { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 11.5px; justify-content: center; text-align: center; border-radius: 10px; }
  .menu-item span { display: block; }
  .ico { width: 22px; height: 22px; }
  .pagina { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .barra { position: static; padding: 10px 16px; }
  .barra-info { display: none; }
  .barra-dir { width: 100%; margin-left: 0; justify-content: space-between; }
  .sync-erro { padding: 0 16px; }
  .pagina { padding: 20px 16px 64px; gap: 18px; }
  section { gap: 18px; }
  h1 { font-size: 23px; }
  .kpis, .kpis-raiox, .kpis-ifood, .resumo-tres { grid-template-columns: 1fr; }
  .kpi-val { font-size: 25px; }
  .bloco { padding: 18px; }
  .pagina-cab .botoes { width: 100%; }
  .pagina-cab .botoes .botao { flex: 1 1 auto; }
  .lanc-campos { grid-template-columns: 1fr; }
  .campo-lanc.full, .campo-parcela, .campo-check { grid-column: span 1; }
  .parte-rodape .resumo-contas { flex-wrap: wrap; justify-content: flex-start; }
  .config-linha { grid-template-columns: 1fr; }
  .cfg-controle { justify-content: flex-start; }
  .conexao { flex-direction: column; align-items: flex-start; }
  .np-campos .campo { flex: 1 1 45%; } .np-campos .campo input { width: 100%; } .np-campos .botao { flex: 1 1 100%; }
  .cartao > summary { flex-wrap: wrap; }
  .cartao-res { margin-left: 0; width: 100%; text-align: left; }
}

#nota-leitura { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--suave); color: var(--tinta-2); }
#nota-leitura.erro { background: var(--destaque-bg); color: var(--destaque); }

.config-lista { max-width: 760px; }
.config-lista .config-linha:last-child { border-bottom: 0; }

.ini-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 24px; }
.ini-grade .bloco { display: flex; flex-direction: column; }
.ini-grade .bloco-cab { min-height: 52px; }
.ini-grade .link-seta { margin-top: auto; }
.sub-linha { padding-left: 14px; font-size: 13px; color: var(--tinta-3); }
.selo-fixo { min-width: 78px; text-align: center; flex: none; }
#ini-atencao .passos-lista li { align-items: flex-start; }

/* modo demonstração (dados fictícios) */
.marca-txt .selo-demo { display: table; margin-top: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--alerta); background: var(--alerta-bg); border-radius: 999px; padding: 2px 9px; }
.marca-txt .selo-demo[hidden] { display: none; }

/* dia do vencimento na linha da conta */
.lanc-dia { flex: none; min-width: 52px; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); }
.menu-sair { background: none; border: 0; width: 100%; font: inherit; cursor: pointer; text-align: left; }
.menu-sair:hover { background: var(--suave); color: var(--tinta); }

/* assinatura (modo plataforma) */
.aviso-assinatura { max-width: 1280px; width: calc(100% - 80px); margin: 16px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 16px; border-radius: var(--raio-p); background: var(--marca-bg); color: var(--tinta); font-size: 14px; font-weight: 600; }
.aviso-assinatura .link-seta { margin: 0; padding: 0; }
.nota-caixa { margin: 4px 0 14px; padding: 10px 14px; border-radius: var(--raio-p); background: var(--alerta-bg); color: var(--alerta); font-size: 14px; font-weight: 600; }
.form-assinar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 6px 0 12px; }
.form-assinar .campo { min-width: 260px; }
@media (max-width: 760px) { .aviso-assinatura { width: calc(100% - 32px); } }

/* Ficha técnica compacta (2026-10-26): linhas baixas, quantidade em caixa pequena com g/ml/un ao lado */
#modal-ficha { width: min(620px, 94vw); padding: 22px 22px 18px; }
#tabela-ficha th, #tabela-ficha td { padding-top: 6px; padding-bottom: 6px; }
#tabela-ficha select { min-width: 0; min-height: 36px; padding: 5px 10px; font-size: 14px; }
#tabela-ficha td.c-txt { width: 100%; }
.ficha-qtd { display: inline-flex; align-items: center; gap: 6px; }
#tabela-ficha .ficha-qtd input { width: 74px; min-width: 0; min-height: 36px; padding: 5px 8px; text-align: right; font-size: 14px; }
.ficha-un { min-width: 22px; text-align: left; font-size: 13px; }
#tabela-ficha .apagar { width: 30px; height: 30px; }
.ficha-total { margin-top: 12px; padding-top: 12px; }
.ficha-total strong { font-size: 21px; }
.ficha-acoes { margin-top: 12px; }

/* Ficha técnica em lista: nome como texto, linha de adicionar embaixo */
.ficha-nome { font-size: 14.5px; font-weight: 500; }
#tabela-ficha tfoot td { border-top: 1px dashed var(--linha); background: var(--suave-2); padding-top: 8px; padding-bottom: 8px; }
#tabela-ficha tfoot select { width: 100%; }

/* Bolinha "?" ao lado do título: a explicação aparece ao passar o mouse ou tocar */
.titulo-ajuda { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sub-tit.titulo-ajuda { display: flex; }
.ficha-cab { margin-bottom: 10px; }
.ajuda { position: relative; display: inline-flex; }
.ajuda-botao { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--linha); background: var(--marca-bg); color: var(--marca-forte); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: help; }
.ajuda-botao:hover, .ajuda-botao:focus-visible { border-color: var(--marca); outline: none; }
.ajuda-texto { display: none; position: absolute; top: calc(100% + 8px); left: -8px; z-index: 5; width: min(340px, 78vw); padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--cartao); box-shadow: 0 8px 24px rgba(23, 21, 15, .12); font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--tinta); }
.ajuda:hover .ajuda-texto, .ajuda.aberta .ajuda-texto, .ajuda-botao:focus-visible + .ajuda-texto { display: block; }
.ajuda-texto { white-space: normal; text-transform: none; letter-spacing: normal; }

/* Texto da bolinha: assunto em cima, uma frase por linha */
.ajuda-texto { width: min(320px, 78vw); padding: 12px 14px 12px; }
.ajuda-tit { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--marca-forte); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--linha-2); }
.ajuda-texto ul { margin: 0; padding: 0; list-style: none; }
.ajuda-texto li { position: relative; padding-left: 14px; }
.ajuda-texto li + li { margin-top: 6px; }
.ajuda-texto li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--marca); }
.ajuda-texto p { margin: 0; color: var(--tinta); font-size: 13px; }

/* Ficha técnica: lista compacta, linhas com fundo alternado, linha de adicionar em destaque */
#tabela-ficha { border-collapse: separate; border-spacing: 0 3px; }
#tabela-ficha th, #tabela-ficha td { padding-top: 3px; padding-bottom: 3px; border: 0; }
#tabela-ficha tbody td { background: var(--suave-2); }
#tabela-ficha tbody tr:nth-child(even) td { background: var(--suave); }
#tabela-ficha tbody td:first-child { border-radius: var(--raio-p) 0 0 var(--raio-p); }
#tabela-ficha tbody td:last-child { border-radius: 0 var(--raio-p) var(--raio-p) 0; }
#tabela-ficha .ficha-qtd input, #tabela-ficha select { min-height: 30px; padding-top: 3px; padding-bottom: 3px; }
#tabela-ficha .apagar { width: 28px; height: 28px; min-width: 28px; }
#tabela-ficha tfoot td { background: var(--marca-bg); border-top: 0; padding-top: 10px; padding-bottom: 10px; }
#tabela-ficha tfoot td:first-child { border-radius: var(--raio-p) 0 0 var(--raio-p); box-shadow: inset 3px 0 0 var(--marca); }
#tabela-ficha tfoot td:last-child { border-radius: 0 var(--raio-p) var(--raio-p) 0; }
#tabela-ficha tfoot::before { content: ""; display: table-row; height: 6px; }
#ficha-adicionar { background: var(--marca); border-color: var(--marca); color: #17130a; padding: 6px 14px; }
#ficha-adicionar:hover { background: #b88a26; border-color: #b88a26; }

/* Gastos gerais */
.kpis-gastos { margin-bottom: 18px; }
.linha-vazia td { color: var(--tinta-3); }
.linha-vazia td b { font-weight: 500; }
#novo-gasto .campo select { min-width: 160px; }
.kpi-sub .ok { color: var(--ok); }

/* CMV da ficha: rótulo e valor juntos, centralizados, numa faixa de destaque */
.ficha-total { justify-content: center; align-items: baseline; gap: 12px; margin-top: 14px; padding: 14px 16px;
  border: 1px solid #ecd9a6; border-radius: var(--raio-p); background: var(--marca-bg); }
.ficha-total span { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--marca-forte); }
.ficha-total strong { font-size: 26px; }

/* Propaganda do adicional de leitura por IA (aba Compras) */
.promo-ia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 26px 28px; border-radius: var(--raio); background: #17150f; color: #f4f1ea; box-shadow: var(--sombra); }
.promo-ia[hidden] { display: none; }
.promo-selo { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: rgba(201, 154, 46, .18); color: #e3b24a; }
.promo-ia h2 { margin: 10px 0 6px; font-size: 21px; color: #fff; }
.promo-ia p { margin: 0; color: #c9c1b0; font-size: 14.5px; }
.promo-ia ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.promo-ia li { position: relative; padding-left: 18px; font-size: 14px; color: #e6dfd0; }
.promo-ia li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--marca); }
.promo-oferta { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 220px; padding: 18px 20px;
  border: 1px solid #3a352a; border-radius: 12px; background: #1f1c15; text-align: center; }
.promo-preco b { display: block; font-size: 30px; font-weight: 800; color: #e3b24a; line-height: 1.1; }
.promo-preco span { font-size: 13px; color: #b9b2a2; }
.promo-oferta .botao { width: 100%; justify-content: center; }
.promo-oferta small { font-size: 12px; color: #9d9584; }
@media (max-width: 760px) {
  .promo-ia { grid-template-columns: 1fr; padding: 20px; }
  .promo-oferta { min-width: 0; }
}

/* Janela de propaganda do adicional de leitura por IA */
.modal-ia { width: min(860px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; overflow: auto;
  background: var(--cartao); color: var(--tinta); box-shadow: 0 30px 80px rgba(15, 12, 5, .35); }
.modal-ia::backdrop { background: rgba(15, 12, 5, .55); backdrop-filter: blur(3px); }
.ia-fechar { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.ia-fechar svg { stroke: #e6dfd0; }
.ia-topo { padding: 34px 40px 30px; background: radial-gradient(120% 140% at 85% 0%, #3a2d0c 0%, #17150f 55%); color: #f4f1ea; }
.ia-topo h2 { margin: 12px 0 6px; font-size: 28px; color: #fff; letter-spacing: -.01em; }
.ia-topo > p { margin: 0; font-size: 15.5px; color: #cfc7b6; }
.ia-passos { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.ia-passos li { display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; font-weight: 600; color: #f4f1ea; }
.ia-passos span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--marca); color: #17130a; font-size: 13px; font-weight: 800; }
.ia-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; padding: 30px 40px 34px; align-items: start; }
.ia-benefs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.ia-benef { display: flex; gap: 12px; align-items: flex-start; }
.ia-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--marca-bg); }
.ia-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--marca-forte); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ia-benef b { display: block; font-size: 14.5px; }
.ia-benef p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--tinta-3); }
.ia-oferta { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 20px;
  border-radius: 14px; background: var(--marca-bg); border: 1px solid #ecd9a6; text-align: center; }
.ia-preco b { display: block; font-size: 36px; font-weight: 800; line-height: 1.05; color: var(--marca-forte); }
.ia-preco span { font-size: 13px; color: var(--tinta-2); }
.ia-dia { margin: 4px 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--cartao); font-size: 12.5px; font-weight: 700; color: var(--ok); }
.ia-cta { width: 100%; justify-content: center; min-height: 46px; font-size: 15px; }
.ia-agora-nao { margin-top: 4px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--tinta-3); cursor: pointer; padding: 6px; }
.ia-agora-nao:hover { color: var(--tinta); }
@media (max-width: 760px) {
  .ia-topo { padding: 28px 22px 24px; }
  .ia-topo h2 { font-size: 23px; }
  .ia-corpo { grid-template-columns: 1fr; padding: 22px; }
  .ia-benefs { grid-template-columns: 1fr; }
  .ia-oferta { position: static; }
}

.kpis-contas.kpis-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .kpis-contas.kpis-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Destaque do que pede ação ---------- */
.bloco-atencao { --tom: var(--marca); --tom-bg: var(--marca-bg); --tom-borda: #ecd9a6;
  position: relative; overflow: hidden; border: 1px solid var(--tom-borda);
  background: linear-gradient(180deg, var(--tom-bg) 0, var(--cartao) 96px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tom) 8%, transparent), var(--sombra); }
.bloco-atencao::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tom); }
.bloco-atencao.nivel-atencao { --tom: #c27a0e; --tom-bg: #fcf0d8; --tom-borda: #efd29c; }
.bloco-atencao.nivel-critico { --tom: var(--destaque); --tom-bg: var(--destaque-bg); --tom-borda: #f2c4bf; }
.bloco-atencao.nivel-ok { --tom: var(--ok); --tom-bg: var(--ok-bg); --tom-borda: #cfe7da; box-shadow: var(--sombra); }
.atencao-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.atencao-cab > div { flex: 1; min-width: 0; }
.atencao-cab h2 { font-size: 19px; }
.atencao-cab p { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--tom); }
.atencao-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tom); }
.atencao-ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atencao-conta { flex: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px;
  background: var(--tom); color: #fff; font-size: 18px; font-weight: 800; }
.atencao-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.atencao-item { --cor: var(--linha); display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: var(--raio-p);
  background: var(--cartao); border: 1px solid var(--linha-2); box-shadow: inset 4px 0 0 var(--cor); }
.atencao-item.nivel-atencao { --cor: #c27a0e; }
.atencao-item.nivel-critico { --cor: var(--destaque); background: #fffafa; }
.atencao-item.nivel-info { --cor: var(--marca); }
.atencao-item > div { flex: 1; min-width: 0; }
.atencao-item b { font-size: 15px; }
.atencao-item p { margin-top: 2px; color: var(--tinta-2); font-size: 13px; }
.botao-ver-forte { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.botao-ver-forte:hover { background: #2e2a20; }
.bloco-alerta-leve { box-shadow: inset 4px 0 0 var(--destaque), var(--sombra); }
.cartao.cartao-alerta { border-color: #efd29c; box-shadow: inset 4px 0 0 #c27a0e, var(--sombra); }
.cartao.cartao-critico { border-color: #f2c4bf; box-shadow: inset 4px 0 0 var(--destaque), var(--sombra); }
.cartao.cartao-alerta > summary .cartao-res { color: #95600a; font-weight: 700; }
.cartao.cartao-critico > summary .cartao-res { color: var(--destaque); font-weight: 700; }
/* Faixa da assinatura com problema: âmbar forte, com ícone */
.aviso-assinatura.forte { background: #fcf0d8; border: 1px solid #efd29c; box-shadow: inset 4px 0 0 #c27a0e; color: #6b4507; }
.aviso-assinatura.forte::before { content: "!"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #c27a0e; color: #fff; font-weight: 800; font-size: 13px; }
@media (max-width: 760px) {
  .atencao-item { flex-wrap: wrap; gap: 8px 12px; }
  .atencao-item > .selo { order: 0; }
  .atencao-item > div { flex-basis: 100%; order: 2; }
  .atencao-item > .botao-mini { order: 1; margin-left: auto; }
}

/* ---------- Ajustes da auditoria ---------- */
/* Barra do topo com a mesma altura em todas as telas (com ou sem o seletor de mês). */
.barra { min-height: 65px; }
/* Recebimentos, visão geral: 3 cartões ocupam a largura toda. */
#rec-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { #rec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { #rec-kpis { grid-template-columns: 1fr; } }
/* Ingredientes: a medida (/un, /kg, /L) com largura fixa, pra caixa do valor não andar. */
.medida { display: inline-block; width: 30px; text-align: left; }

/* Confirmação do sistema */
#modal-confirmar, #modal-categoria { width: min(440px, 92vw); padding: 24px; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 24px 60px rgba(15, 23, 42, .25); background: var(--cartao); color: var(--tinta); }
#modal-confirmar::backdrop, #modal-categoria::backdrop, #modal-ia::backdrop { background: rgba(15, 12, 5, .5); backdrop-filter: blur(2px); }
#modal-confirmar h2 { font-size: 18px; }
#conf-texto { margin-top: 8px; color: var(--tinta-2); font-size: 14.5px; line-height: 1.5; }
.conf-botoes { margin-top: 20px; justify-content: flex-end; }
.botao-perigo-cheio { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.botao-perigo-cheio:hover { background: #9a1d14; }

/* Botão "Mais" e a folha de opções (só no celular) */
.menu-mais { display: none; border: 0; background: none; font-family: inherit; font-weight: 600; color: var(--tinta-2); cursor: pointer; }
.modal-mais { width: 100%; max-width: 100%; margin: auto 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); border: 0;
  border-radius: 20px 20px 0 0; background: var(--cartao); color: var(--tinta); }
.modal-mais::backdrop { background: rgba(15, 12, 5, .45); }
.mais-cab { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 12px; border-bottom: 1px solid var(--linha-2); }
.mais-cab b { font-size: 16px; }
.mais-lista { display: grid; gap: 4px; padding-top: 10px; }
.mais-lista .mais-item { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 13px 12px; font-size: 15.5px; font-weight: 600;
  text-align: left; justify-content: flex-start; border-radius: 12px; width: 100%; }
.mais-lista .mais-item span { display: inline; }
.mais-lista .mais-item .cadeado { position: static; margin-left: auto; width: 20px; height: 20px; }
.mais-lista .mais-item.ativo { background: var(--marca-bg); color: var(--marca-forte); }

/* Ficha: "Tirar do cardápio" fica sozinho à esquerda, longe do Salvar. */
.ficha-arquivar { margin-right: auto; }
/* Bolinha "?" dentro do cabeçalho de tabela */
.th-ajuda { display: inline-flex; justify-content: center; gap: 6px; }
.th-ajuda .ajuda-botao { width: 18px; height: 18px; font-size: 11px; }
.th-ajuda .ajuda-texto { left: 50%; transform: translateX(-50%); font-weight: 400; }

.diag-cab h2 { font-size: 18px; }

@media (max-width: 760px) {
  .lateral .marca-txt { flex-direction: column; min-width: 0; }
  .lateral .marca-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Faixa da assinatura: ícone à esquerda, texto e link à direita. */
  .aviso-assinatura.forte { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 12px; }
  .aviso-assinatura.forte > * { grid-column: 2; }
  .aviso-assinatura.forte::before { grid-row: 1 / span 2; margin-top: 1px; }
}

/* Ficha: "rende 40%" num selo antes da quantidade */
.ficha-rende { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--marca-bg); color: var(--marca-forte); white-space: nowrap; }

/* Contas de casa (só no modo local): mesmo formato das da empresa, com um traço azul-acinzentado pra separar */
.bloco-casa { box-shadow: inset 4px 0 0 #6b7a8f, var(--sombra); }

/* Contas no modo local: empresa à esquerda, casa à direita (uma em cada coluna) */
.contas-colunas.com-casa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.contas-colunas.com-casa .kpis-contas .kpi-val { font-size: 18px; }
@media (max-width: 1100px) { .contas-colunas.com-casa { grid-template-columns: 1fr; } }
.contas-colunas.com-casa .bloco-cab { min-height: 36px; flex-wrap: nowrap; }
/* Mesmo traço na lateral das duas colunas: dourado na empresa, azul-acinzentado na casa */
.contas-colunas.com-casa #contas-empresa { box-shadow: inset 4px 0 0 var(--marca), var(--sombra); }
.lista-celulares { margin: 10px 0 0; padding-left: 18px; font-size: 14px; } .lista-celulares li + li { margin-top: 4px; }

/* Itens da nota de compra: mesmo formato da ficha técnica (faixas alternadas, caixas pequenas e alinhadas) */
#nota-itens { border-collapse: separate; border-spacing: 0 3px; table-layout: fixed; min-width: 900px; }
#nota-itens th, #nota-itens td { padding: 3px 8px; border: 0; }
#nota-itens th:nth-child(1) { width: auto; }
#nota-itens th:nth-child(2) { width: 92px; }
#nota-itens th:nth-child(3) { width: 132px; }
#nota-itens th:nth-child(4) { width: 132px; }
#nota-itens th:nth-child(5) { width: 270px; }
#nota-itens th:nth-child(6) { width: 44px; }
#nota-itens tbody td { background: var(--suave-2); }
#nota-itens tbody tr:nth-child(even) td { background: var(--suave); }
#nota-itens tbody td:first-child { border-radius: var(--raio-p) 0 0 var(--raio-p); }
#nota-itens tbody td:last-child { border-radius: 0 var(--raio-p) var(--raio-p) 0; }
#nota-itens input, #nota-itens select { width: 100%; min-width: 0; min-height: 32px; padding: 4px 10px; font-size: 14px; }
#nota-itens .ni-desc { border-color: transparent; background: transparent; font-weight: 500; text-overflow: ellipsis; }
#nota-itens .ni-desc:hover, #nota-itens .ni-desc:focus { border-color: var(--linha); background: var(--cartao); }
#nota-itens .ni-qtd { text-align: right; }
#nota-itens .ni-preco { width: 100%; }
#nota-itens .ni-preco input { text-align: right; }
#nota-itens .apagar { width: 28px; height: 28px; min-width: 28px; }
#nota-itens th:nth-child(4) { width: 160px; }
#nota-itens th:nth-child(5) { padding-left: 16px; }
#nota-itens td:nth-child(5) { padding-left: 16px; }
/* Todas as caixas da linha com o mesmo peso de letra */
#nota-itens input, #nota-itens select, #nota-itens .campo-unid input { font-weight: 500; }

/* Nota de compra: cada item é um cartão com fundo e borda; descrição em maiúscula como os ingredientes */
#nota-itens tbody td, #nota-itens tbody tr:nth-child(even) td { background: var(--suave); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
#nota-itens tbody td:first-child { border-left: 1px solid var(--linha); box-shadow: inset 3px 0 0 var(--marca); }
#nota-itens tbody td:last-child { border-right: 1px solid var(--linha); }
#nota-itens { border-spacing: 0 6px; }
#nota-itens .ni-desc { text-transform: uppercase; }

/* Card completo da nota aberta: fundo bege, borda e traço dourado na lateral.
   Os itens viram cartões brancos por cima, pra continuarem se destacando. */
#nota-detalhe { background: var(--suave); border: 1px solid var(--linha); box-shadow: inset 4px 0 0 var(--marca), var(--sombra); }
#nota-detalhe .campo input, #nota-detalhe .campo select { background: var(--cartao); }
#nota-itens tbody td, #nota-itens tbody tr:nth-child(even) td { background: var(--cartao); }
#nota-detalhe .ni-desc { background: transparent; }
/* Fundo do card da nota em creme dourado, pra se separar do fundo da página (que é bege claro) */
#nota-detalhe { background: var(--marca-bg); border-color: #ecd9a6; }

/* Ingrediente novo direto da nota */
#modal-ingrediente { width: min(560px, 92vw); padding: 24px; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 24px 60px rgba(15, 23, 42, .25); background: var(--cartao); color: var(--tinta); }
#modal-ingrediente::backdrop { background: rgba(15, 12, 5, .5); backdrop-filter: blur(2px); }
#modal-ingrediente h2 { font-size: 18px; }
.ning-apoio { margin: 6px 0 0; font-size: 13.5px; color: var(--tinta-3); }
.ning-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.ning-campos .ning-nome { grid-column: 1 / -1; }
.ning-campos input, .ning-campos select { width: 100%; }
#ning-nome { text-transform: uppercase; }

/* Caixas de valor e de quantidade com máscara (são texto, não número): mesmo visual das numéricas */
.tabela input.dinheiro, .tabela input.quantidade { width: 100%; min-width: 68px; text-align: right; padding: 5px 8px; min-height: 34px; }
#tabela-precos input.dinheiro { text-align: center; }
input.dinheiro, input.quantidade { font-variant-numeric: tabular-nums; }
.campo input.dinheiro { text-align: right; }

/* Tabela de ingredientes no formato da de precificação: colunas fixas que cabem no quadro, nada cortado */
#tabela-insumos { table-layout: fixed; width: 100%; }
#tabela-insumos th:nth-child(1) { width: auto; }
#tabela-insumos th:nth-child(2) { width: 18%; }
#tabela-insumos th:nth-child(3) { width: 12%; }
#tabela-insumos th:nth-child(4) { width: 15%; }
#tabela-insumos th:nth-child(5) { width: 10%; }
#tabela-insumos th:nth-child(6) { width: 12%; }
#tabela-insumos th:nth-child(7) { width: 48px; }
#tabela-insumos td { overflow: hidden; }
#tabela-insumos td:first-child { white-space: normal; }
#tabela-insumos select, #tabela-insumos input[type=text], #tabela-insumos input[type=number] { width: 100%; min-width: 0; min-height: 34px; padding: 5px 8px; }
#tabela-insumos .campo-unid { display: flex; width: 100%; }
#tabela-insumos .campo-unid input { flex: 1; min-width: 0; border: 0; text-align: right; }
#tabela-insumos .medida-fim { display: grid; place-items: center; padding: 0 8px; background: var(--suave-2); color: var(--tinta-3); font-size: 12.5px; font-weight: 600; border-left: 1px solid var(--linha); }

/* Tabela de ingredientes no formato da ficha técnica: linhas em faixas arredondadas, caixas baixas e alinhadas */
#tabela-insumos { border-collapse: separate; border-spacing: 0 3px; }
#tabela-insumos th { border: 0; padding: 6px 8px; }
#tabela-insumos tbody td { border: 0; padding: 4px 8px; background: var(--suave-2); }
#tabela-insumos tbody tr:not(.grupo) td:first-child { border-radius: var(--raio-p) 0 0 var(--raio-p); font-weight: 500; }
#tabela-insumos tbody tr:not(.grupo) td:last-child { border-radius: 0 var(--raio-p) var(--raio-p) 0; }
#tabela-insumos select, #tabela-insumos input[type=text], #tabela-insumos input[type=number], #tabela-insumos .campo-unid { min-height: 32px; }
#tabela-insumos select, #tabela-insumos .campo-unid { background: var(--cartao); }
#tabela-insumos .apagar { width: 28px; height: 28px; min-width: 28px; }
.botao-mini-perigo { color: var(--destaque); }
.botao-mini-perigo:hover { border-color: var(--destaque); background: var(--destaque-bg); }
#tabela-insumos tbody tr.linha-par td { background: var(--suave); }
#tabela-insumos tbody tr.grupo td { padding-top: 10px; padding-bottom: 10px; }

/* Botões de cada nota sempre na mesma linha */
.acoes-nota { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
td.acoes-nota { display: table-cell; white-space: nowrap; }
td.acoes-nota .botao-mini + .botao-mini { margin-left: 6px; }

/* Arquivo de notas: mês → semana → dia */
.arq-mes { border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--cartao); }
.arq-mes + .arq-mes { margin-top: 10px; }
.arq-mes > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; box-shadow: inset 4px 0 0 var(--marca); border-radius: var(--raio-p); }
.arq-mes > summary::-webkit-details-marker { display: none; }
.arq-mes > summary::before { content: "›"; font-weight: 700; color: var(--tinta-3); transition: transform .15s; margin-right: 4px; }
.arq-mes[open] > summary::before { transform: rotate(90deg); }
.arq-mes-tit { flex: 1; font-weight: 700; font-size: 15.5px; }
.arq-mes-res { font-size: 13.5px; color: var(--tinta-3); font-weight: 600; }
.arq-mes-corpo { padding: 4px 16px 16px; display: grid; gap: 12px; }
.arq-semana { border-radius: var(--raio-p); background: var(--suave-2); padding: 12px 14px; }
.arq-semana-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding-bottom: 8px; border-bottom: 1px solid var(--linha-2); }
.arq-semana-cab span { color: var(--tinta-3); }
.arq-dia { margin-top: 10px; }
.arq-dia-tit { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--marca-forte); margin-bottom: 6px; }
.arq-nota { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--raio-p); background: var(--cartao); border: 1px solid var(--linha-2); }
.arq-nota + .arq-nota { margin-top: 6px; }
.arq-nota b { display: block; font-size: 14px; }
.arq-nota .fraco { font-size: 13px; }

/* Progresso do envio/leitura das notas: caixinha em destaque, não texto solto */
.nota-envio { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--raio-p); background: var(--marca-bg); border: 1px solid #ecd9a6; font-size: 14px; color: var(--tinta); }
.nota-envio[hidden] { display: none; }
.giro-mini { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid #ecd9a6; border-top-color: var(--marca); animation: giro-mini .8s linear infinite; }
@keyframes giro-mini { to { transform: rotate(360deg); } }

/* Ingredientes: cada ingrediente é um cartão branco com borda; a categoria é um título (sem fundo), não outra faixa */
#tabela-insumos tbody tr.linha-ing td, #tabela-insumos tbody tr.linha-par td { background: var(--cartao); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
#tabela-insumos tbody tr.linha-ing td:first-child { border-left: 1px solid var(--linha); }
#tabela-insumos tbody tr.linha-ing td:last-child { border-right: 1px solid var(--linha); }
#tabela-insumos tbody tr.linha-ing:hover td { background: var(--suave-2); }
#tabela-insumos tbody tr.linha-ing select, #tabela-insumos tbody tr.linha-ing .campo-unid { background: var(--cartao); }
#tabela-insumos { border-spacing: 0 5px; }
#tabela-insumos tbody tr.grupo-ing td { background: none; border: 0; box-shadow: none; padding: 18px 2px 4px; }
#tabela-insumos tbody tr.grupo-ing:first-child td { padding-top: 6px; }
.cat-linha { display: flex; align-items: center; gap: 10px; }
.cat-linha::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--marca), transparent 85%); opacity: .55; }
.cat-nome { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--marca-forte); }
.cat-conta { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--marca-bg); color: var(--marca-forte); }
.cat-nome { flex: none; width: var(--cat-largura, 14em); white-space: nowrap; }

/* Planos da assinatura no estilo de página de venda: dois cartões com o mesmo formato, o anual em destaque */
.planos-cab { text-align: center; margin: 0 0 26px; }
.planos-cab h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--tinta); }
.planos-cab p { margin: 6px 0 0; font-size: 14.5px; color: var(--tinta-2); }
.planos { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 22px; align-items: stretch; }
.plano { position: relative; display: flex; flex-direction: column; padding: 28px 26px 24px; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao); box-shadow: var(--sombra); }
.plano-destaque { border: 2px solid var(--marca); box-shadow: 0 18px 44px rgba(122, 90, 11, .16); }
.plano-fita { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: var(--marca); color: #17130a; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.plano-nome { font-size: 18px; font-weight: 800; color: var(--tinta); }
.plano-off { padding: 3px 9px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 800; }
.plano-desc { margin: 6px 0 0; font-size: 14px; color: var(--tinta-2); }
.plano-de { margin-top: 18px; min-height: 20px; font-size: 14px; color: var(--tinta-3); }
.plano-de s { color: var(--tinta-3); }
.plano-preco { display: flex; align-items: baseline; color: var(--tinta); font-variant-numeric: tabular-nums; }
.plano-moeda { font-size: 18px; font-weight: 700; margin-right: 4px; align-self: flex-start; margin-top: 8px; }
.plano-valor { font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.plano-cent { font-size: 20px; font-weight: 800; }
.plano-por { margin-left: 4px; font-size: 15px; color: var(--tinta-3); font-weight: 600; }
.plano-sub { margin: 8px 0 0; font-size: 14px; color: var(--tinta-2); }
.plano-sub b { color: var(--tinta); }
.plano-ganho { white-space: nowrap; margin-top: 14px; padding: 9px 12px; border-radius: var(--raio-p); background: var(--ok-bg); color: var(--ok); font-size: 14px; text-align: center; }
.plano-ganho-neutro { background: var(--suave); color: var(--tinta-2); }
.plano-botao { width: 100%; justify-content: center; margin-top: 18px; min-height: 46px; font-size: 15.5px; font-weight: 800; }
.plano-inclui { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--linha); display: grid; gap: 10px; font-size: 14px; color: var(--tinta-2); }
.plano-inclui li { position: relative; padding-left: 26px; }
.plano-inclui li::before { content: ''; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: var(--ok-bg); }
.plano-inclui li::after { content: ''; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.planos-confianca { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font-size: 13px; color: var(--tinta-3); }
.planos-confianca span { position: relative; padding-left: 14px; }
.planos-confianca span::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--marca); }
.planos-teste { max-width: 702px; margin: 16px auto 0; text-align: center; }
@media (max-width: 760px) { .planos { grid-template-columns: minmax(0, 1fr); gap: 28px; } .plano-destaque { order: -1; } .plano { padding: 26px 20px 22px; } }
.ass-ganho { color: var(--ok); font-weight: 700; }

/* Janela do último passo da assinatura */
#modal-assinar { width: min(460px, 92vw); padding: 28px; border: 1px solid var(--linha); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .25); background: var(--cartao); color: var(--tinta); }
#modal-assinar::backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
#modal-assinar h2 { margin: 4px 0 16px; font-size: 21px; }
.ass-passo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--marca-forte); }
.ass-resumo { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--raio-p); background: var(--marca-bg); border: 1px solid var(--marca); }
.ass-resumo > div { display: grid; gap: 3px; }
.ass-nome { font-weight: 800; }
.ass-det { font-size: 13px; color: var(--tinta-2); }
.ass-valor { font-size: 20px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ass-valor small { font-size: 13px; color: var(--tinta-3); font-weight: 600; }
.ass-seguro { margin: 10px 0 0; font-size: 13px; color: var(--tinta-3); }
#modal-assinar .conf-botoes { margin-top: 20px; justify-content: flex-end; }

/* Assinatura atual (Configurações) e janela dos planos */
.ass-atual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ass-item { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--raio-p); background: var(--suave); border: 1px solid var(--linha-2); }
.ass-item span { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.ass-item b { font-size: 16px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ass-acoes { margin-top: 18px; }
@media (max-width: 760px) { .ass-atual { grid-template-columns: minmax(0, 1fr); } }
#aviso-assinatura button.link-seta { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
#modal-planos { width: min(820px, 94vw); max-height: 94vh; overflow: auto; padding: 34px 32px 26px; border: 0; border-radius: 22px; background: var(--fundo, var(--cartao)); color: var(--tinta); box-shadow: 0 30px 80px rgba(15, 23, 42, .3); }
#modal-planos::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.planos-fechar { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 1px solid var(--linha); border-radius: 50%; background: var(--cartao); color: var(--tinta-2); font-size: 22px; line-height: 1; cursor: pointer; }
.planos-fechar:hover { color: var(--tinta); border-color: var(--tinta-3); }
#modal-planos .plano-inclui { gap: 8px; }
@media (max-width: 760px) { #modal-planos { padding: 30px 16px 20px; } }

/* Tabelas cabem na largura do quadro: o título da coluna pode quebrar em duas linhas (os números não quebram) */
.tabela th { white-space: normal; vertical-align: bottom; line-height: 1.25; hyphens: manual; }
.tabela thead .canal-cab th { white-space: nowrap; }
/* Texto (nome de produto, favorito, telefone) quebra linha quando falta espaço; número e valor nunca quebram */
.tabela td.c-txt { white-space: normal; overflow-wrap: anywhere; min-width: 7em; }
#op-clientes td:nth-child(2) { white-space: nowrap; } /* telefone nunca quebra no meio */
.tabela td.c-txt { overflow-wrap: normal; }
#op-semana td:first-child { white-space: nowrap; } /* dia + selo "fraco" na mesma linha */

/* Configurações → iFood: plano de repasse */
.plano-ifood-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 14px; }
.plano-ifood-form .botao { min-height: 42px; }
.plano-ifood-nota { margin-top: 10px; }
.plano-ifood-aviso { margin-top: 10px; }
@media (max-width: 760px) { .plano-ifood-form { grid-template-columns: minmax(0, 1fr); } }
#ifood-semanas td:first-child, #ifood-semanas td:nth-child(8), #ifood-dias td:first-child { white-space: nowrap; } /* datas nunca quebram */
#ifood-semanas th, #ifood-semanas td { padding-left: 6px; padding-right: 6px; }

/* Seu negócio: nome e logo lado a lado */
.negocio-linha { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-start; }
.negocio-linha .campo-largo { flex: 1 1 320px; }
.logo-campo { display: grid; gap: 6px; }
.logo-caixa { display: flex; align-items: center; gap: 12px; }
.logo-previa { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: var(--suave); border: 1px solid var(--linha); padding: 4px; }
.logo-acoes { display: flex; gap: 8px; }
.logo-enviar { cursor: pointer; }
.logo-dica { font-size: 12.5px; color: var(--tinta-3); }
.marca-icone.marca-logo { border-radius: 10px; object-fit: contain; background: var(--cartao); }

/* Tabela de preços: selo de ficha antes do nome, numa coluna fixa (nomes alinhados) */
.preco-produto { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.selo-slot { flex: none; width: 46px; display: inline-flex; }
/* Logo na mesma linha do nome: mesma altura da caixa do nome, centralizada com ela */
.negocio-linha { flex-wrap: nowrap; gap: 0 36px; }
.negocio-linha .campo-largo { flex: 0 1 460px; }
.negocio-linha .logo-campo { flex: none; }
.logo-caixa { height: var(--altura-campo, 44px); }
.logo-previa { width: 44px; height: 44px; border-radius: 10px; padding: 3px; }
@media (max-width: 760px) { .negocio-linha { flex-wrap: wrap; gap: 16px; } }
.negocio-linha .logo-campo { gap: 4px; }
.logo-caixa { height: 40px; }
.logo-previa { width: 40px; height: 40px; }
/* Logo maior, mais à direita e com o centro na altura do centro da caixa do nome */
.negocio-linha { gap: 0 96px; }
.negocio-linha .logo-campo { align-self: flex-end; margin-bottom: -10px; }
.logo-caixa { height: 60px; gap: 14px; }
.logo-previa { width: 60px; height: 60px; border-radius: 12px; padding: 4px; }
@media (max-width: 760px) { .negocio-linha { gap: 16px; } .negocio-linha .logo-campo { margin-bottom: 0; } }
/* Logo: o título fica na mesma linha de "Nome do negócio" e os botões na linha da caixa do nome;
   a prévia ocupa a altura das duas linhas juntas */
.negocio-linha { align-items: flex-start; }
.negocio-linha .logo-campo { display: flex; align-items: stretch; gap: 14px; align-self: auto; margin-bottom: 0; }
.logo-previa { width: auto; height: auto; aspect-ratio: 1; align-self: stretch; }
.logo-lado .logo-acoes { height: 40px; align-items: center; }
.logo-lado .botao { min-height: 40px; }
.logo-lado > span { white-space: nowrap; }
.logo-previa { width: 64px; height: 64px; aspect-ratio: auto; align-self: flex-start; }

/* Janela de ajuste da logo */
#modal-logo { width: min(400px, 94vw); padding: 26px; border: 1px solid var(--linha); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .25); background: var(--cartao); color: var(--tinta); }
#modal-logo::backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
#modal-logo h2 { margin: 0 0 6px; font-size: 20px; }
.logo-instr { margin: 0; font-size: 13.5px; color: var(--tinta-2); }
.logo-palco { margin: 16px auto 14px; width: min(280px, 100%); aspect-ratio: 1; border-radius: 25%; overflow: hidden; outline: 2px solid var(--marca); outline-offset: 3px;
  background: repeating-conic-gradient(var(--suave) 0 25%, var(--cartao) 0 50%) 0 0 / 20px 20px; }
#logo-recorte { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#logo-recorte:active { cursor: grabbing; }
.logo-zoom-linha { display: flex; align-items: center; gap: 10px; }
.logo-zoom-linha input { flex: 1; accent-color: var(--marca); }
.logo-zoom-bt { width: 40px; padding: 0; font-size: 20px; }
.logo-atalhos { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.logo-atalhos .botao { min-height: 36px; font-size: 13.5px; }
#modal-logo .conf-botoes { margin-top: 20px; justify-content: flex-end; }