:root {
  --preto: #111111;
  --preto-2: #1d1d1f;
  --laranja: #e04b07;
  --laranja-esc: #bf3f05;
  --laranja-claro: #fff1e8;
  --texto: #1d1d1f;
  --cinza: #6b6b70;
  --fundo: #f4f4f5;
  --tile: #f1f1f3;
  --borda: #e2e2e6;
  --vermelho: #c62828;
  --oferta: #ffb400;
  --especial: #0e7c86;
  --raio: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }

.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
h1 { margin: 0; color: var(--preto); font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.sub { margin: 2px 0 0; color: var(--cinza); font-size: 14px; }
.abas { display: flex; gap: 4px; background: #fff; border: 1px solid var(--borda); padding: 4px; border-radius: 999px; }
.aba { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 700; color: var(--cinza); cursor: pointer; }
.aba.ativa { background: var(--preto); color: #fff; }

.aviso { margin-top: 14px; background: #fff7e0; border: 1px solid #f2d98b; color: #7a5a00; padding: 8px 14px; border-radius: 10px; font-size: 13px; }

section { margin-top: 20px; }
.card { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 2px 14px rgba(13, 26, 99, 0.06); margin-top: 16px; }

/* busca */
.busca { position: relative; }
.busca input, .barra input, .barra select {
  width: 100%; border: 1px solid var(--borda); background: #fff; border-radius: var(--raio);
  padding: 16px 18px; font: inherit; font-size: 16px; font-weight: 600; color: var(--preto); outline: none;
  box-shadow: 0 2px 10px rgba(13, 26, 99, 0.04);
}
.busca input:focus, .barra input:focus, .barra select:focus { border-color: var(--laranja); }
.sugestoes {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px;
  list-style: none; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 10px 30px rgba(13, 26, 99, 0.12); max-height: 380px; overflow: auto;
}
.sugestoes li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.sugestoes li.sel, .sugestoes li:hover { background: var(--tile); }
.sugestoes .s-desc { font-weight: 700; }
.sugestoes .s-cod { color: var(--cinza); font-size: 12px; }
.sugestoes .s-preco { font-weight: 800; white-space: nowrap; }
.sugestoes .nada { color: var(--cinza); cursor: default; }

.vazio { margin-top: 18px; padding: 40px; text-align: center; color: var(--cinza); border: 2px dashed var(--borda); border-radius: 18px; }

/* produto */
.cab-produto { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
h2 { margin: 0; color: var(--preto); font-size: 26px; font-weight: 800; }
.meta { color: var(--cinza); font-size: 12px; margin: 4px 0 0; }
.selo-oferta { background: var(--oferta); color: var(--preto); font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.5px; white-space: nowrap; }

.resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 20px; }
.kpi { background: var(--tile); border-radius: var(--raio); padding: 14px 14px 16px; }
.kpi span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--cinza); letter-spacing: 0.4px; }
.kpi strong { display: block; margin-top: 4px; font-size: 25px; font-weight: 800; color: var(--preto); }
.kpi.peq strong { font-size: 22px; }
.kpi strong.neg { color: var(--vermelho); }
.kpi strong.oferta { color: #b37800; }

.faixa-oferta { margin-top: 12px; background: #fff8e1; border: 1px solid #ffe08a; color: #6b4a00; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.faixa-oferta b { color: #3d2a00; }

.simulador { margin-top: 22px; background: var(--tile); border-radius: var(--raio); padding: 20px; }
.simulador h3 { margin: 0 0 14px; color: var(--preto); font-size: 16px; }
.campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.campos label { font-size: 11px; font-weight: 700; color: var(--cinza); text-transform: uppercase; }
.campos input {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--borda);
  border-radius: 10px; background: #fff; font: inherit; font-size: 18px; font-weight: 700; color: var(--preto);
}
.campos input:focus { outline: none; border-color: var(--laranja); }
.sim-info { min-height: 20px; margin: 12px 0 0; font-size: 14px; color: var(--texto); }
.sim-info .neg { color: var(--vermelho); font-weight: 700; }
.sim-info .pos { color: #2e7d32; font-weight: 700; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.btn { border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.btn.verde { background: var(--laranja); color: #fff; }
.btn.verde:hover { background: var(--laranja-esc); }
.btn.contorno { background: #fff; color: var(--preto); border: 1.5px solid var(--preto); }
.btn.peq { padding: 7px 13px; font-size: 13px; }
.btn:disabled { opacity: 0.4; cursor: default; }

/* tabela */
.barra { display: grid; grid-template-columns: 1fr 220px; gap: 10px; }
.barra input, .barra select { padding: 12px 14px; font-size: 14px; }
.chips { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--borda); background: #fff; border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13px; font-weight: 700; color: var(--cinza); cursor: pointer; }
.chip.ativo { background: var(--preto); border-color: var(--preto); color: #fff; }

.tabela-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--borda); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { background: var(--tile); text-align: left; font-size: 11px; text-transform: uppercase; color: var(--cinza); letter-spacing: 0.4px; padding: 10px 12px; cursor: pointer; user-select: none; white-space: nowrap; }
th.ord.asc::after { content: " ▲"; }
th.ord.desc::after { content: " ▼"; }
td { padding: 10px 12px; border-top: 1px solid var(--borda); white-space: nowrap; }
td.desc { white-space: normal; font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f7f9fd; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.neg { color: var(--vermelho); font-weight: 700; }
.tag { display: inline-block; margin-left: 6px; background: var(--oferta); color: var(--preto); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; vertical-align: 1px; }
.riscado { display: block; color: var(--cinza); font-size: 11px; text-decoration: line-through; }
.linha-vazia td { text-align: center; color: var(--cinza); padding: 30px; cursor: default; }

.rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.paginacao, .acoes { display: flex; align-items: center; gap: 8px; }
.paginacao .meta { margin: 0; }

@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {

  .barra { grid-template-columns: 1fr; }
  .kpi strong { font-size: 24px; }
  h1 { font-size: 24px; }
}

.barra.sem-secao { grid-template-columns: 1fr; }
.barra.sem-secao select { display: none; }

.especiais { margin-top: 18px; }
.especiais h3 { margin: 0 0 8px; color: var(--preto); font-size: 15px; }
.especiais h3 small { color: var(--cinza); font-weight: 600; font-size: 12px; }
.especiais .tabela-wrap { margin-top: 0; }
.especiais tbody tr { cursor: default; }
.tag.esp { background: var(--especial); color: #fff; }
.btn-simular { border: 1px solid var(--preto); background: #fff; color: var(--preto); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }

.filtro-margem { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--cinza); }
.filtro-margem input { width: 64px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 999px; font: inherit; font-weight: 700; color: var(--preto); text-align: center; }
.filtro-margem input:focus { outline: none; border-color: var(--laranja); }
.filtro-margem.ativo input { border-color: var(--preto); background: var(--preto); color: #fff; }
.chip.limpar { padding: 6px 10px; }
@media (max-width: 720px) { .filtro-margem { margin-left: 0; } }

.filtro-margem .check { display: flex; align-items: center; gap: 4px; font-weight: 600; cursor: pointer; }
.filtro-margem .check input { width: auto; margin: 0; }
.esp-linha { display: block; color: var(--especial); font-size: 11px; font-weight: 700; }
td.neg .esp-linha { color: var(--especial); }
.esp-linha.neg { color: var(--vermelho); }

/* ================= celular ================= */
.barra > * { min-width: 0; }
@media (max-width: 720px) {
  .wrap { padding: 16px 12px 40px; }
  .topo { align-items: stretch; }
  .topo > div { width: 100%; }
  .abas { width: 100%; }
  .aba { flex: 1; padding: 10px 8px; }
  h1 { font-size: 24px; }
  .sub { font-size: 12px; }
  .card { padding: 16px; border-radius: 16px; }
  section { margin-top: 12px; }

  h2 { font-size: 20px; }
  .cab-produto { flex-direction: column; gap: 6px; }
  .kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpi { padding: 10px; border-radius: 12px; }
  .kpi span { font-size: 10px; }
  .kpi strong { font-size: 18px; }
  .kpi.peq strong { font-size: 18px; }
  .resumo { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
  .simulador { padding: 14px; }
  .campos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .campos label { font-size: 10px; }
  .campos input { font-size: 16px; padding: 10px; }
  .btn { padding: 9px 13px; font-size: 14px; }

  /* filtros: chips em linha rolável */
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .chips .chip { flex: 0 0 auto; }
  .filtro-margem { flex: 0 0 auto; white-space: nowrap; }

  /* tabelas viram cartões */
  .tabela-wrap { border: 0; overflow: visible; }
  table.cards thead { display: none; }
  table.cards, table.cards tbody { display: block; }
  table.cards tr {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px;
    padding: 12px; margin-bottom: 10px; border: 1px solid var(--borda); border-radius: 12px; background: #fff;
  }
  table.cards td { border: 0; padding: 0; white-space: normal; text-align: left; font-size: 14px; }
  table.cards td[data-label]::before {
    content: attr(data-label); display: block; font-size: 10px; font-weight: 700;
    text-transform: uppercase; color: var(--cinza); letter-spacing: 0.3px;
  }
  table.cards td.desc { grid-column: 1 / -1; order: -2; font-size: 15px; }
  table.cards td.cod { grid-column: 1 / -1; order: -1; font-size: 12px; color: var(--cinza); }
  table.cards td.cod::before { display: inline; content: "Cód. "; font-size: 12px; text-transform: none; font-weight: 600; }
  #tabela td.desc::before { display: none; }
  table.cards td.acao { grid-column: 1 / -1; }
  table.cards td.acao .btn-simular { width: 100%; padding: 8px; font-size: 13px; }
  table.cards .linha-vazia { display: block; }
  table.cards .linha-vazia td { text-align: center; }
  .especiais table.cards td.desc { order: 0; font-size: 14px; }
  .especiais table.cards td.desc::before { display: block; }

  .rodape { flex-direction: column; align-items: stretch; }
  .paginacao { justify-content: space-between; }
  .acoes { justify-content: stretch; }
  .acoes .btn { flex: 1; }
}
@media (max-width: 720px) {
  .especiais table.cards td[data-label="RCA"],
  .especiais table.cards td[data-label="Cliente"] { grid-column: 1 / -1; }
}

/* ================= barra superior FAC ================= */
.barra-topo { background: var(--preto); border-bottom: 3px solid var(--laranja); }
.barra-topo .in { max-width: 1080px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.barra-topo img { height: 34px; display: block; }
.barra-topo .marca { display: flex; align-items: center; gap: 14px; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.2px; }
.barra-topo .marca span { padding-left: 14px; border-left: 1px solid #3a3a3a; color: #d8d8d8; font-weight: 700; }
.usuario { display: flex; align-items: center; gap: 10px; color: #bdbdbd; font-size: 13px; font-weight: 600; }
.btn-sair { background: transparent; color: #fff; border: 1px solid #4a4a4a; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-sair:hover { border-color: var(--laranja); color: var(--laranja); }
h1 { position: relative; }
.chip.ativo { background: var(--preto); border-color: var(--preto); }
.filtro-margem.ativo input { border-color: var(--laranja); background: var(--laranja); color: #fff; }
th.ord { color: var(--preto); }
@media (max-width: 720px) {
  .barra-topo .in { padding: 8px 12px; }
  .barra-topo img { height: 26px; }
  .barra-topo .marca span, .usuario .nome { display: none; }
}

/* ================= tela de login ================= */
body.login { min-height: 100vh; display: grid; place-items: center; background:
  radial-gradient(1200px 600px at 110% -10%, rgba(224,75,7,.35), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(224,75,7,.18), transparent 60%), var(--preto); padding: 20px; }
.caixa-login { width: 100%; max-width: 400px; background: #fff; border-radius: 20px; padding: 36px 32px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.caixa-login .logo { display: block; height: 58px; margin: 0 auto 18px; }
.caixa-login h1 { text-align: center; font-size: 22px; margin: 0; }
.caixa-login .sub { text-align: center; margin: 4px 0 24px; }
.caixa-login label { display: block; font-size: 12px; font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: .4px; margin-top: 14px; }
.caixa-login input { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; border: 1px solid var(--borda); border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; color: var(--texto); background: #fafafa; }
.caixa-login input:focus { outline: none; border-color: var(--laranja); background: #fff; box-shadow: 0 0 0 3px rgba(224,75,7,.15); }
.caixa-login .senha { position: relative; }
.caixa-login .ver { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin-top: 3px; border: 0; background: none; color: var(--cinza); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.caixa-login .entrar { width: 100%; margin-top: 22px; padding: 14px; border: 0; border-radius: 12px; background: var(--laranja); color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.caixa-login .entrar:hover { background: var(--laranja-esc); }
.caixa-login .entrar:disabled { opacity: .6; cursor: default; }
.caixa-login .msg { min-height: 20px; margin-top: 12px; text-align: center; color: var(--vermelho); font-size: 14px; font-weight: 600; }
.caixa-login .rodape-login { margin-top: 16px; text-align: center; color: var(--cinza); font-size: 12px; }
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1) brightness(.4); cursor: pointer; }
input[type="checkbox"] { accent-color: var(--laranja); }
/* celular: todos os filtros visíveis, sem arrastar */
@media (max-width: 720px) {
  .chips { flex-wrap: wrap; overflow: visible; padding-bottom: 0; gap: 6px; }
  .chips .chip { padding: 7px 11px; font-size: 13px; }
  .filtro-margem {
    flex: 1 1 100%; flex-wrap: wrap; white-space: normal; margin: 6px 0 0; gap: 6px;
    padding-top: 10px; border-top: 1px solid var(--borda);
  }
  .filtro-margem label[for="t-margem"] { flex: 0 0 auto; }
  .filtro-margem input#t-margem { width: 58px; }
  .filtro-margem .check { flex: 1 1 100%; font-size: 13px; }
}
@media (max-width: 720px) {
  .filtro-margem { gap: 5px; font-size: 12px; }
  .filtro-margem input#t-margem { width: 48px; padding: 6px 4px; }
  .filtro-margem .chip { padding: 6px 9px; font-size: 12px; }
}
@media (max-width: 720px) { .filtro-margem .check { flex: 0 0 auto; } }

/* ================= vendas por RCA ================= */
.mes-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mes-barra .btn { min-width: 40px; font-size: 18px; line-height: 1; padding: 7px 12px; }
.mes-sel { position: relative; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--preto); color: #fff; font-weight: 800; cursor: pointer; }
.mes-sel input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.mes-barra .meta { margin: 0 0 0 6px; }
.v-resumo .kpi em { display: block; margin-top: 4px; font-style: normal; min-height: 18px; }
.v-linha { margin: 12px 0 0; font-size: 13px; }
.v-linha b { color: var(--texto); }
.var { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; vertical-align: 1px; }
td .var { display: block; width: max-content; margin: 3px 0 0 auto; }
.var.sobe { background: #e6f4ea; color: #1e7b34; }
.var.desce { background: #fdecea; color: var(--vermelho); }
.var.igual { background: var(--tile); color: var(--cinza); }
.var.novo { background: #e7f3f4; color: var(--especial); }
.v-resumo .kpi .var { margin-left: 0; }
#t-vendas tbody tr td:first-child { font-weight: 700; }
.sem-risco { text-decoration: none; }
code { background: var(--tile); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-caixa { width: 100%; max-width: 820px; background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.35); border-top: 4px solid var(--laranja); }
.modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-cab h3 { margin: 0; font-size: 18px; }
.btn-fechar { border: 0; background: var(--tile); width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; flex: 0 0 auto; }
#t-clientes tbody tr { cursor: default; }
body.sem-rolagem { overflow: hidden; }

@media (max-width: 720px) {
  .aba { font-size: 13px; padding: 9px 4px; }
  .mes-barra .meta { flex: 1 1 100%; margin: 4px 0 0; }
  td .var { margin: 2px 0 0; }
  .modal { padding: 12px 8px; }
  .modal-caixa { padding: 16px; }
  #t-vendas td.desc { order: -2; }
  #t-vendas td.desc::before, #t-clientes td.desc::before { display: none; }
  #t-clientes td.desc { order: -2; }
}
.kpi .var { display: inline-block; text-transform: none; letter-spacing: 0; font-size: 11px; }
@media (max-width: 720px) {
  .aba .longo { display: none; }
  #t-vendas td.num, #t-clientes td.num { white-space: nowrap; font-size: 13px; }
}
@media (max-width: 720px) { .v-resumo .kpi strong { font-size: 16px; white-space: nowrap; } }
.v-resumo { grid-template-columns: repeat(5, 1fr); }
.de-base { color: var(--cinza); font-weight: 600; font-size: 12px; }
td.baixa { color: #b06000; font-weight: 700; }
@media (max-width: 1000px) { .v-resumo { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .v-resumo { grid-template-columns: repeat(2, 1fr); } }
.v-resumo .kpi strong { font-size: 20px; white-space: nowrap; }
@media (max-width: 720px) {
  .v-resumo .kpi:first-child { grid-column: 1 / -1; }
  .v-resumo .kpi:first-child strong { font-size: 22px; }
}
.mes-barra .modo { display: flex; gap: 4px; margin-right: 6px; }
.por-mes, .por-periodo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.por-mes[hidden], .por-periodo[hidden] { display: none; }
.por-periodo label { font-size: 13px; font-weight: 700; color: var(--cinza); display: flex; align-items: center; gap: 6px; }
.por-periodo input[type="date"] { padding: 7px 10px; border: 1px solid var(--borda); border-radius: 10px; font: inherit; font-weight: 700; color: var(--texto); background: #fff; }
.por-periodo input[type="date"]:focus { outline: none; border-color: var(--laranja); }
.por-periodo .atalhos { display: flex; gap: 4px; flex-wrap: wrap; }
.v-periodo { margin: 10px 0 0; }
@media (max-width: 720px) {
  .mes-barra .modo { flex: 1 1 100%; margin: 0 0 4px; }
  .por-periodo label { flex: 1 1 45%; }
  .por-periodo input[type="date"] { flex: 1; min-width: 0; }
  .por-periodo .btn { flex: 1 1 100%; }
}
.mes-barra .por-periodo .btn { font-size: 13px; min-width: 0; padding: 8px 16px; }
/* botão Atualizar dados no cabeçalho */
.titulo-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-atualizar { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--preto); background: #fff; color: var(--preto); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.btn-atualizar:hover { border-color: var(--laranja); color: var(--laranja); }
.btn-atualizar .ic { font-size: 16px; line-height: 1; display: inline-block; }
.btn-atualizar.girando .ic { animation: girar .8s linear infinite; }
.btn-atualizar:disabled { opacity: .7; cursor: default; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .titulo-linha { justify-content: space-between; flex-wrap: nowrap; }
  .btn-atualizar { padding: 6px 11px; flex: 0 0 auto; }
  .btn-atualizar .tx { font-size: 12px; }
}

/* ================= demanda compras ================= */
.c-filtros { display: grid; grid-template-columns: auto auto 1fr; gap: 10px 18px; align-items: center; }
.c-dias, .c-curva { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--cinza); flex-wrap: wrap; }
.c-dias input { width: 58px; padding: 7px 8px; border: 1px solid var(--borda); border-radius: 999px; font: inherit; font-weight: 800; color: #fff; background: var(--laranja); border-color: var(--laranja); text-align: center; }
.c-dias input:focus { outline: none; box-shadow: 0 0 0 3px rgba(224,75,7,.2); }
#c-curvas { display: flex; gap: 4px; }
#c-curvas .chip { padding: 5px 11px; }
#c-busca { width: 100%; min-width: 0; border: 1px solid var(--borda); border-radius: var(--raio); padding: 11px 14px; font: inherit; font-size: 14px; font-weight: 600; }
#c-busca:focus { outline: none; border-color: var(--laranja); }
.c-resumo .kpi em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--cinza); font-weight: 600; }
.c-resumo .kpi strong.neg { color: var(--vermelho); }
.sub-abas { display: flex; gap: 6px; margin-top: 18px; }
.sub-linha { display: block; color: var(--cinza); font-size: 11px; font-weight: 600; margin-top: 2px; white-space: normal; }
td.forte { font-weight: 800; }
td.pos { color: var(--cinza); font-weight: 700; width: 36px; }
.tag.rup { background: var(--vermelho); color: #fff; }
.cob { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.cob-vermelho { background: #fdecea; color: var(--vermelho); }
.cob-laranja { background: var(--laranja-claro); color: var(--laranja-esc); }
.cob-amarelo { background: #fff8e1; color: #8a6200; }
.cob-ok { background: #e6f4ea; color: #1e7b34; }
#t-fornecedores tbody tr { cursor: pointer; }
#t-compras tbody tr, #t-forn-produtos tbody tr { cursor: default; }
.modal-caixa.larga { max-width: 1040px; }
.cm-acoes { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cm-acoes .check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cinza); cursor: pointer; }
@media (max-width: 1000px) { .c-filtros { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .c-dias .chip { padding: 6px 10px; font-size: 12px; }
  #t-compras td.desc, #t-forn-produtos td.desc, #t-fornecedores td.desc { order: -2; }
  #t-compras td.desc::before, #t-forn-produtos td.desc::before, #t-fornecedores td.desc::before { display: none; }
  #t-compras td.pos { display: none; }
  .cm-acoes .btn { width: 100%; }
}
@media (max-width: 720px) {
  .titulo-linha h1 { font-size: 21px; }
  .c-dias { gap: 4px; font-size: 12px; }
  .c-dias input { width: 46px; padding: 6px 4px; }
  .c-dias .chip { padding: 5px 9px; }
  #t-compras td.num, #t-forn-produtos td.num, #t-fornecedores td.num { white-space: nowrap; font-size: 13px; }
  table.cards td[data-label]::before { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.filial-barra { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--cinza); }
#v-filiais { display: flex; gap: 4px; flex-wrap: wrap; }

.func-linha { margin: 10px 0 0; font-size: 13px; color: var(--cinza); }
.func-linha b { color: var(--texto); }
.func-linha span { color: var(--cinza); font-size: 12px; }
#tabela td.quem { font-size: 12px; font-weight: 600; white-space: normal; max-width: 160px; }
@media (max-width: 720px) { #tabela td.quem { grid-column: 1 / -1; max-width: none; } }

/* ================= alerta de margem ================= */
.alerta-margem { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px;
  padding: 14px 16px; border-radius: 14px; background: #fdecea; border: 1.5px solid #f3b5ae; color: #8e1c1c; }
.alerta-margem.ok { background: #e6f4ea; border-color: #b7dfc2; color: #1e7b34; font-weight: 700; font-size: 14px; }
.alerta-margem .al-texto { display: flex; align-items: center; gap: 12px; }
.alerta-margem .al-ic { font-size: 26px; line-height: 1; }
.alerta-margem strong { display: block; font-size: 16px; }
.alerta-margem span { font-size: 13px; }
.al-btn { background: var(--vermelho); color: #fff; }
.al-btn:hover { background: #a61f1f; }
tr.linha-alerta td { background: #fff4f3; }
tr.linha-alerta td:first-child { box-shadow: inset 4px 0 0 var(--vermelho); }
tr.linha-alerta td[data-label="Margem"] { color: var(--vermelho); font-weight: 800; }
tr.linha-alerta-esp td:first-child { box-shadow: inset 4px 0 0 #f0a39b; }
.selos { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.selo-alerta { background: var(--vermelho); color: #fff; font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.card.card-alerta { box-shadow: 0 0 0 2px #f3b5ae, 0 2px 14px rgba(198,40,40,.12); }
@media (max-width: 720px) {
  table.cards tr.linha-alerta { background: #fff4f3; border-color: #f3b5ae; box-shadow: inset 4px 0 0 var(--vermelho); }
  table.cards tr.linha-alerta td { background: transparent; }
  table.cards tr.linha-alerta td:first-child, table.cards tr.linha-alerta-esp td:first-child { box-shadow: none; }
  table.cards tr.linha-alerta-esp { box-shadow: inset 4px 0 0 #f0a39b; }
  .alerta-margem .al-btn { width: 100%; }
  .selos { justify-content: flex-start; }
}

#tabela td.quem .esp-linha { font-size: 11px; margin-top: 3px; }

/* ================= vendas por fornecedor ================= */
.sub-vendas { display: flex; gap: 6px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.sub-vendas .chip { padding: 8px 16px; font-size: 14px; }
.sub-vendas .chip.ativo { background: var(--laranja); border-color: var(--laranja); }
.f-resumo .kpi em { display: block; margin-top: 4px; font-style: normal; }
.f-resumo .kpi .var { margin-left: 0; }
.f-resumo .kpi strong { font-size: 20px; white-space: nowrap; }
.f-resumo .kpi[hidden] { display: none; }
.f-resumo b.neg, .de-base b.neg, #fm-sub b.neg { color: var(--vermelho); }
.f-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.f-barra input { flex: 1 1 260px; min-width: 0; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; }
.f-barra input:focus { outline: none; border-color: var(--laranja); }
td.pos { color: #1e7b34; font-weight: 700; }
td.neg.forte { color: var(--vermelho); }
table.sem-mes .c-mes, table.sem-proj .c-proj { display: none; }
#t-forn tbody tr { cursor: pointer; }
#t-forn-prod tbody tr { cursor: default; }
tr.f-queda td:first-child { box-shadow: inset 3px 0 0 #f0a39b; }
@media (max-width: 720px) {
  .sub-vendas .chip { flex: 1; }
  .f-resumo { grid-template-columns: repeat(2, 1fr); }
  .f-resumo .kpi strong { font-size: 17px; }
  #t-forn td.desc, #t-forn-prod td.desc { order: -2; }
  #t-forn td.desc::before, #t-forn-prod td.desc::before { display: none; }
  #t-forn td.num, #t-forn-prod td.num { white-space: nowrap; font-size: 13px; }
  table.cards tr.f-queda { box-shadow: inset 4px 0 0 #f0a39b; }
  table.cards tr.f-queda td:first-child { box-shadow: none; }
  table.cards.sem-mes td.c-mes, table.cards.sem-proj td.c-proj { display: none; }
}
@media (min-width: 721px) {
  #t-forn th, #t-forn-prod th { white-space: normal; line-height: 1.25; padding: 10px 8px; }
  #t-forn td, #t-forn-prod td { padding: 10px 8px; }
  #t-forn td.desc { min-width: 150px; }
}

@media (min-width: 721px) {
  #t-forn td.num, #t-forn-prod td.num { font-size: 13px; white-space: nowrap; }
  .f-resumo .kpi strong { font-size: 19px; }
}

/* ================= alertas (sino) ================= */
.btn-alertas { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: #fff; border: 1px solid #4a4a4a; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-alertas .sino { filter: grayscale(1) brightness(2); }
.btn-alertas.ligado { border-color: var(--laranja); color: var(--laranja); }
.btn-alertas.ligado .sino { filter: none; }
.btn-alertas:hover { border-color: var(--laranja); }
.modal-caixa.estreita { max-width: 520px; }
.al-info { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.al-info.meta { font-size: 12px; }
.al-aviso { background: #fff8e1; border: 1px solid #ffe08a; color: #5c4300; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; margin-top: 10px; }
.al-ok { background: #e6f4ea; border: 1px solid #b7dfc2; color: #1e7b34; border-radius: 12px; padding: 12px 14px; font-weight: 800; margin-top: 10px; }
.al-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.al-msg { min-height: 18px; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: #1e7b34; }
.al-msg.erro { color: var(--vermelho); }
@media (max-width: 720px) {
  .btn-alertas .tx { display: none; }
  .btn-alertas { padding: 6px 10px; }
  .al-botoes .btn { width: 100%; }
}