:root {
  --fonte: "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fundo: #f3f5f9;
  --superficie: #ffffff;
  --borda: #e6e9f0;
  --texto: #0f1e3d;
  --texto-suave: #5b6478;
  --verde: #0e8a5a;
  --verde-escuro: #0b6b46;
  --verde-fundo: #e3f5ec;
  --verde-area-forte: rgba(14, 138, 90, 0.22);
  --verde-area-fraca: rgba(14, 138, 90, 0.02);
  --azul: #2f6fe0;
  --azul-claro: #8db5f2;
  --azul-fundo: #e6eefc;
  --azul-texto: #1e3a6e;
  --baixa: #b42318;
  --baixa-fundo: #fdecea;
  --neutro-fundo: #eef0f4;
  --grade: #edf0f5;
  --grade-forte: #d9dee7;
  --trilho: #eceff4;
  --sombra: 0 1px 2px rgba(15, 30, 61, 0.04), 0 4px 16px rgba(15, 30, 61, 0.05);
  --raio: 14px;
  --gap: clamp(12px, 1.4vw, 22px);
}

* { box-sizing: border-box; }

html { font-size: 16px; }
@media (min-width: 1900px) { html { font-size: 18px; } }  /* TV */
@media (min-width: 2500px) { html { font-size: 22px; } }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app {
  max-width: 1760px;
  margin: 0 auto;
  padding: clamp(16px, 2vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

/* Cards */
.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  min-width: 0;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
}
/* 6 cards em uma linha (so em telas bem largas): icone e respiro mais compactos */
@media (min-width: 2101px) {
  .kpi { gap: 14px; padding: 20px; }
  .kpi__icone { width: 2.9rem; height: 2.9rem; }
  .kpi__icone svg { width: 1.4rem; height: 1.4rem; }
}
@media (min-width: 1900px) { .app { max-width: 2600px; } }  /* TV: usa a largura toda */
.kpi {
  display: flex;
  gap: 18px;
  padding: clamp(16px, 1.5vw, 24px);
}
.kpi__icone {
  width: 3.4rem; height: 3.4rem; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
}
.kpi__icone svg { width: 1.6rem; height: 1.6rem; }
.kpi__icone--verde { background: var(--verde-fundo); color: var(--verde); }
.kpi__icone--azul { background: var(--azul-fundo); color: var(--azul); }
.kpi__corpo { min-width: 0; flex: 1; display: grid; gap: 8px; align-content: start; container-type: inline-size; }
.kpi__titulo { font-size: 1.1rem; font-weight: 500; }
.kpi__valor {
  /* encolhe com a largura do card para "R$ 1.234.567,89" sempre caber */
  font-size: min(clamp(1.45rem, 2vw, 2.15rem), 12.5cqi);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi__rodape {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--texto-suave); font-size: 0.92rem;
}
.kpi__nota strong { color: var(--texto); }
.kpi#kpi-meta .kpi__rodape { display: grid; gap: 8px; }

.progresso {
  height: 12px;
  background: var(--trilho);
  border-radius: 999px;
  overflow: hidden;
}
.progresso span {
  display: block; height: 100%;
  background: var(--verde);
  border-radius: 999px;
  transition: width 0.6s ease;
}

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 700; font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.selo svg { width: 16px; height: 16px; }
.selo--alta { background: var(--verde-fundo); color: var(--verde-escuro); }
.selo--baixa { background: var(--baixa-fundo); color: var(--baixa); }
.selo--neutro { background: var(--neutro-fundo); color: var(--texto-suave); }

/* Paineis de grafico */
.graficos {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--gap);
}
.coluna { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.painel { padding: clamp(16px, 1.5vw, 24px); display: grid; gap: 16px; align-content: start; }
.painel--evolucao { grid-template-rows: auto 1fr; }

.painel__cabecalho { display: flex; align-items: flex-start; gap: 14px; }
.painel__icone {
  width: 2.6rem; height: 2.6rem; flex: none;
  border-radius: 10px;
  background: var(--azul-fundo); color: var(--azul);
  display: grid; place-items: center;
}
.painel__icone svg { width: 1.3rem; height: 1.3rem; }
.painel__titulos { flex: 1; min-width: 0; }
.painel__titulo { font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.painel__subtitulo { color: var(--texto-suave); font-size: 0.95rem; margin-top: 2px; }
.painel__direita { flex: none; }

.legenda {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; gap: 18px; flex-wrap: wrap;
  color: var(--texto-suave); font-size: 0.92rem;
}
.legenda li { display: inline-flex; align-items: center; gap: 8px; }
.legenda__ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--verde); }
.legenda__ponto--azul { background: var(--azul); }
.legenda__tracejado {
  width: 22px; height: 0;
  border-top: 2px dashed var(--azul);
}
.legenda--inativa { opacity: 0.55; }
.legenda--painel { margin: -4px 0 0; }

.grafico { position: relative; min-width: 0; }
/* No desktop a linha ocupa toda a altura da coluna da direita */
.grafico--linha { min-height: 340px; height: 100%; }
.grafico--barras { height: clamp(220px, 26vh, 340px); }
/* Altura definida pelo JS conforme a quantidade de supervisores */
.grafico--supervisores { height: 120px; }
.grafico[hidden] { display: none; }
.vazio { color: var(--texto-suave); }

/* Aviso discreto de falha */
.aviso {
  position: fixed;
  right: 16px; bottom: 16px;
  max-width: min(420px, calc(100vw - 32px));
  background: #fff4e5;
  color: #8a4b00;
  border: 1px solid #f5d9b0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
  box-shadow: var(--sombra);
}

/* Responsivo */
@media (max-width: 1500px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .graficos { grid-template-columns: minmax(0, 1fr); }
  .grafico--linha { height: 360px; }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi { gap: 14px; }
  .kpi__icone { width: 2.8rem; height: 2.8rem; }
  .painel__cabecalho { flex-wrap: wrap; }
  .painel__direita { width: 100%; }
  .grafico--linha { height: 300px; }
}

/* ===================== Casca com menu lateral ===================== */
:root {
  --marinho: #14284b; /* titulos/valores do financeiro */
  /* Sidebar: reaproveita as cores do tema claro do conteudo */
  --menu-largura: 232px;
  --menu-largura-recolhida: 72px;
  --menu-fundo: var(--superficie);
  --menu-borda: var(--borda);
  --menu-texto: var(--texto);
  --menu-texto-suave: var(--texto-suave);
  --menu-hover: var(--neutro-fundo);
  --menu-ativo-fundo: var(--verde-fundo);
  --menu-ativo-texto: var(--verde-escuro);
  --menu-destaque: var(--verde);
  --menu-transicao: 220ms ease;
  /* Faixas de prazo (validadas para daltonismo; ordem fixa) */
  --prazo-vencido: #c8414f;
  --prazo-30: #2e5aa8;
  --prazo-60: #d4961c;
  --prazo-90: #2aa2dc;
  --linha-inad: #2e5aa8;
  --tend-boa: #0b7a4f;
  --tend-ruim: #b42318;
}

.shell {
  display: grid;
  grid-template-columns: var(--menu-largura) minmax(0, 1fr);
  min-height: 100vh;
}
.shell--animado { transition: grid-template-columns var(--menu-transicao); }
.shell--recolhido { grid-template-columns: var(--menu-largura-recolhida) minmax(0, 1fr); }
.conteudo { min-width: 0; }
.shell .topo .logo { display: none; } /* a logo fica no menu */

.menu {
  position: sticky; top: 0; z-index: 20;
  height: 100vh;
  min-width: 0;
  background: var(--menu-fundo);
  border-right: 1px solid var(--menu-borda);
  color: var(--menu-texto);
  display: flex; flex-direction: column;
  padding: 20px 12px 18px;
  gap: 22px;
}
.menu__topo { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.menu__logo { display: block; height: auto; }
.menu__logo--completo { width: 84px; }
.menu__logo--curto { width: 40px; display: none; }
.menu__alternar {
  position: absolute; top: -8px; right: -4px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--menu-texto-suave);
  cursor: pointer;
}
.menu__alternar svg { width: 18px; height: 18px; }
.menu__alternar:hover { background: var(--menu-hover); color: var(--menu-texto); }
.menu__fechar { display: none; }
.menu__alternar:focus-visible,
.menu__item:focus-visible { outline: 2px solid var(--menu-destaque); outline-offset: 2px; }

.menu__itens { display: grid; gap: 4px; align-content: start; flex: 1; }
.menu__item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--menu-texto);
  text-decoration: none;
  font-size: 0.98rem; font-weight: 500;
  white-space: nowrap;
}
.menu__item svg { width: 20px; height: 20px; flex: none; }
.menu__item:hover { background: var(--menu-hover); }
.menu__item--ativo, .menu__item--ativo:hover {
  background: var(--menu-ativo-fundo);
  color: var(--menu-ativo-texto);
  font-weight: 700;
}
.menu__rodape {
  margin: 0; text-align: center;
  font-size: 0.78rem; line-height: 1.5;
  color: var(--menu-texto-suave);
  font-variant-numeric: tabular-nums;
}
.menu__rodape span { color: var(--menu-texto-suave); font-weight: 600; }
.menu__fundo { position: fixed; inset: 0; background: rgba(15, 30, 61, 0.35); z-index: 40; }

/* Recolhida: faixa estreita so com icones, tooltip com o nome no hover/foco */
.shell--recolhido .menu { padding: 18px 10px; }
.shell--recolhido .menu__logo--completo,
.shell--recolhido .menu__rodape { display: none; }
.shell--recolhido .menu__logo--curto { display: block; }
.shell--recolhido .menu__alternar { position: static; }
.shell--recolhido .menu__item { justify-content: center; padding: 12px 0; }
.shell--recolhido .menu__texto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.shell--recolhido .menu__item::after {
  content: attr(data-rotulo);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  background: var(--texto); color: #fff;
  font-size: 0.82rem; font-weight: 600;
  padding: 6px 10px; border-radius: 6px;
  white-space: nowrap;
  box-shadow: var(--sombra);
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease;
}
.shell--recolhido .menu__item:hover::after,
.shell--recolhido .menu__item:focus-visible::after { opacity: 1; }

.barra-movel { display: none; }

/* Faturamento: com o menu, o conteudo fica mais estreito -> pontos de quebra deslocados */
/* 6 cards: 3 + 3 ate telas bem largas (TV) */
@media (min-width: 901px) and (max-width: 2100px) {
  .shell .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1740px) {
  .shell .kpi { gap: 18px; padding: clamp(16px, 1.5vw, 24px); }
  .shell .kpi__icone { width: 3.4rem; height: 3.4rem; }
  .shell .kpi__icone svg { width: 1.6rem; height: 1.6rem; }
}
@media (max-width: 1320px) {
  .shell .graficos { grid-template-columns: minmax(0, 1fr); }
  .shell .grafico--linha { height: 380px; }
}

/* Celular: menu vira gaveta aberta pelo botao da barra superior */
@media (max-width: 639px) {
  .shell, .shell--recolhido { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(280px, 82vw); height: auto;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--menu-transicao);
    box-shadow: 0 0 40px rgba(15, 30, 61, 0.18);
  }
  .menu--aberto { transform: none; }
  .menu__alternar { display: none; }
  .menu__fechar {
    display: grid; place-items: center;
    position: absolute; right: -4px; top: -8px;
    width: 40px; height: 40px;
    background: transparent; border: 0; border-radius: 8px;
    color: var(--menu-texto-suave); cursor: pointer;
  }
  .barra-movel {
    display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 30;
    background: var(--menu-fundo);
    border-bottom: 1px solid var(--menu-borda);
    padding: 8px 16px;
  }
  .barra-movel__botao {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 8px;
    color: var(--menu-texto); cursor: pointer;
  }
  .barra-movel__botao:focus-visible { outline: 2px solid var(--menu-destaque); }
  .barra-movel__logo { height: 40px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .shell--animado, .menu { transition: none; }
}

/* ===================== Pagina Financeiro ===================== */
.carregando { color: var(--texto-suave); padding: 24px 0; }

.fin-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
  padding: 18px clamp(16px, 1.5vw, 24px);
}
.fin-topo__titulo { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 800; color: var(--marinho); text-transform: uppercase; letter-spacing: 0.02em; }
.fin-topo__sub { color: var(--texto-suave); font-size: 0.88rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Sem explicacoes sob titulos (28/10/2026): subtitulo de pagina (inclusive "atualizado as"), subtitulo de card e descricao das abas ficam ocultos.
   O aviso de ERRO de atualizacao (.fin-topo__status--erro) continua aparecendo. Paginas de configuracao mantem o texto com --manter. */
.fin-topo__sub:not(.fin-topo__sub--manter) > :not(.fin-topo__status--erro) { display: none; }
.fin-topo__sub:not(.fin-topo__sub--manter):not(:has(.fin-topo__status--erro)) { display: none; }
.painel__subtitulo:not(.painel__subtitulo--manter) { display: none; }
.pc-abas__sub { display: none; }
.fin-topo__status--erro { color: #8a4b00; }
.fin-topo__filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filtro-datas { display: flex; gap: 12px; }
.filtro-datas[hidden] { display: none; }
.filtro { display: grid; gap: 4px; min-width: 150px; max-width: 240px; }
.filtro__rotulo { font-size: 0.78rem; color: var(--texto-suave); }
.filtro select, .filtro input {
  height: 40px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit; font-size: 0.92rem;
  padding: 0 10px;
  width: 100%; min-width: 0;
}
.filtro select:focus-visible, .filtro input:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }

/* Multi-selecao (mesmo visual do select) */
.filtro-multi { position: relative; }
.filtro-multi__botao {
  height: 40px; width: 100%;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 0.92rem; text-align: left;
  padding: 0 30px 0 10px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f1e3d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.filtro-multi__botao:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.filtro-multi__texto { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filtro-multi__lista {
  position: absolute; z-index: 15; top: calc(100% + 4px); left: 0;
  min-width: 100%; width: max-content; max-width: min(320px, 90vw);
  max-height: 300px; overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(15, 30, 61, 0.14);
  padding: 6px;
}
.filtro-multi__lista[hidden] { display: none; }
.filtro-multi__opcao {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 0.92rem; cursor: pointer;
}
.filtro-multi__opcao:hover { background: var(--neutro-fundo); }
.filtro-multi__opcao input { width: 16px; height: 16px; margin: 0; accent-color: var(--marinho); flex: none; }
.filtro-multi__opcao--todas { border-bottom: 1px solid var(--borda); border-radius: 6px 6px 0 0; margin-bottom: 4px; }

.fin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.kpi-c { padding: clamp(16px, 1.5vw, 22px); display: grid; gap: 8px; align-content: start; }
.kpi-c__titulo { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave); }
.kpi-c__valor {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 800; color: var(--marinho);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-c__valor[title] { cursor: help; }
.kpi-c__rodape { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 0.88rem; color: var(--texto-suave); }
.kpi-c__nota strong { color: var(--texto); }
.tend { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tend--boa { color: var(--tend-boa); }
.tend--ruim { color: var(--tend-ruim); }
.tend--neutra { color: var(--texto-suave); }

.fin-graficos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gap); }
.rosca { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 24px; align-items: center; }
.rosca__grafico { position: relative; height: 240px; }
.rosca__legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rosca__legenda li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  font-size: 0.92rem;
}
.rosca__ponto { width: 12px; height: 12px; border-radius: 50%; }
.rosca__faixa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rosca__valor { color: var(--texto-suave); font-variant-numeric: tabular-nums; text-align: right; }
.rosca__pct { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 3.6em; }
.grafico--inad { height: 260px; }

/* Tabela de clientes inadimplentes */
/* coluna unica limitada: a tabela rola dentro do card em vez de alargar a pagina */
#inad { grid-template-columns: minmax(0, 1fr); }
.inad-ferramentas { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.inad-busca { min-width: 220px; max-width: 360px; flex: 1 1 260px; }
.inad-busca__campo { position: relative; display: block; }
.inad-busca__campo svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-suave); }
.filtro .inad-busca__campo input { padding-left: 34px; }
.inad-ferramentas .filtro-multi { min-width: 200px; max-width: 280px; }
.inad-ferramentas > .filtro:not(.inad-busca):not(.filtro-multi) { min-width: 150px; max-width: 180px; }
.inad-rolagem { overflow-x: auto; }
.inad-tabela, .inad-titulos { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inad-tabela th, .inad-tabela td { padding: 12px 10px; text-align: left; font-weight: 400; }
.inad-tabela > thead th, .inad-titulos thead th {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texto-suave); white-space: nowrap;
  border-bottom: 1px solid var(--grade-forte);
}
.inad-tabela .num { text-align: right; white-space: nowrap; }
.inad-ordem {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
}
.inad-ordem:hover { color: var(--texto); }
.inad-ordem:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; border-radius: 4px; }
.inad-ordem__seta { font-size: 0.65rem; min-width: 0.7em; }
th[aria-sort="ascending"] .inad-ordem, th[aria-sort="descending"] .inad-ordem { color: var(--marinho); }
.inad-cliente__texto { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Selo de canhotos fica ao lado do nome e desce para a linha de baixo quando falta espaco */
.inad-cliente__canhotos { margin: 4px 0 0 10px; }
/* Selos de status do detalhe: verde = Fechado/Assinado, amarelo = Aberto, vermelho = Pendente */
.selo-status {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.selo-status--ok { background: var(--verde-fundo); color: var(--verde-escuro); }
.selo-status--atencao { background: #fff4e5; color: #8a4b00; }
.selo-status--pendente { background: var(--baixa-fundo); color: var(--baixa); }
.selo-status--neutro { background: var(--neutro-fundo); color: var(--texto-suave); }
.inad-sem { color: var(--texto-suave); }
/* Alertas definidos pelo administrador */
.inad-tabela .inad-atraso-alto { color: var(--baixa); font-weight: 700; }
.kpi-c--atencao { border-left: 4px solid #d4961c; }
.kpi-c--atencao .kpi-c__valor { color: #8a5a00; }
.kpi-c--alerta { border-left: 4px solid var(--baixa); }
.kpi-c--alerta .kpi-c__valor { color: var(--baixa); }
/* Botao Exportar Excel no cabecalho da tabela */
/* Botao padrao (PADROES-PAINEL.md, secao 8). Secundario: contorno verde (.botao, .inad-exportar, .gp-botao--leve).
   Primario: verde cheio (.botao--primario, .gp-botao). Acao pequena de linha/tabela: .usu-botao. */
.botao, .inad-exportar, .gp-botao {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border: 1px solid var(--verde); border-radius: 8px; background: var(--superficie); color: var(--verde-escuro);
  font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.botao--primario, .gp-botao:not(.gp-botao--leve) { background: var(--verde); color: #fff; font-weight: 700; }
.botao[hidden], .inad-exportar[hidden], .gp-botao[hidden] { display: none; }
.botao svg, .inad-exportar svg, .gp-botao svg { width: 16px; height: 16px; }
.botao:not(.botao--primario):hover:not(:disabled), .inad-exportar:hover:not(:disabled), .gp-botao--leve:hover:not(:disabled) { background: var(--verde-fundo); }
.botao--primario:hover:not(:disabled), .gp-botao:not(.gp-botao--leve):hover:not(:disabled) { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.botao:disabled, .gp-botao:disabled { opacity: 0.4; cursor: default; }
.inad-exportar:disabled { opacity: 0.6; cursor: wait; }
.botao:focus-visible, .inad-exportar:focus-visible, .gp-botao:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
/* Notas fiscais (aba Credito e cobranca): Ver NF / Baixar XML por titulo, todas do cliente e filtradas em lote */
.painel__direita:has(#inad-notas) { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.inad-nf-col { white-space: nowrap; text-align: center; }
.inad-nf-acoes { display: inline-flex; gap: 2px; }
.inad-nf-acao {
  width: 26px; height: 28px; display: inline-grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--verde-escuro); cursor: pointer;
}
.inad-nf-acao svg { width: 17px; height: 17px; }
.inad-nf-acao:hover:not(:disabled) { background: var(--verde-fundo); }
.inad-nf-acao:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.inad-nf-acao:disabled { opacity: 0.5; cursor: wait; }
.inad-nf-acao--off { color: var(--texto-suave); opacity: 0.35; cursor: not-allowed; }
.inad-nf-acao--off:hover { background: transparent; }
.inad-col-seta--nf { width: 84px; white-space: nowrap; }
.inad-col-seta--nf.inad-col-seta--zap { width: 116px; } /* + botao WhatsApp (Credito e Cobranca) */
.inad-nf-cliente svg { width: 17px; height: 17px; }
.inad-nf-cliente:hover { color: var(--verde-escuro); background: var(--verde-fundo); }
.nf-dialogo {
  border: 0; border-radius: var(--raio); padding: 0; width: min(460px, calc(100vw - 32px));
  box-shadow: 0 18px 48px rgba(15, 30, 61, 0.22); color: var(--texto); background: var(--superficie);
}
.nf-dialogo::backdrop { background: rgba(15, 30, 61, 0.35); }
/* Gestao de Pedidos > "Analise de credito" (blocos da analise da rotina 1203) */
.ac-dialogo { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.ac-corpo { max-height: calc(100vh - 210px); overflow: auto; }
.ac-topo { display: flex; flex-wrap: wrap; gap: 6px 24px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
.ac-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.ac-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.ac-bloco--largo { grid-column: 1 / -1; }
.ac-titulo { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.ac-campo { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; }
.ac-topo .ac-campo { justify-content: flex-start; }
.ac-rotulo { color: var(--texto-suave); }
.ac-valor { text-align: right; }
.ac-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.ac-tabela { width: 100%; }
.ac-tabela tbody th { text-align: left; font-weight: 600; }
.ac-vencidos th, .ac-vencidos td { color: var(--baixa); font-weight: 700; }
.ac-negativo { color: var(--baixa); }
.ac-atraso-critico td { color: var(--baixa); font-weight: 700; } /* titulo com mais de 30 dias de atraso */
.ac-nota { margin: 0; }
.ac-obs { margin: 0; white-space: pre-wrap; }
@media (max-width: 720px) { .ac-grade, .ac-linha { grid-template-columns: minmax(0, 1fr); } }
.gp-analise { white-space: nowrap; padding: 3px 8px; font-size: 0.78rem; }
.nf-dialogo__caixa { padding: 22px 22px 18px; display: grid; gap: 14px; margin: 0; }
.nf-dialogo__titulo { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--marinho); }
.nf-dialogo__corpo { display: grid; gap: 8px; font-size: 0.92rem; line-height: 1.45; }
.nf-dialogo__corpo p { margin: 0; }
.nf-dialogo__nota { color: var(--texto-suave); font-size: 0.85rem; }
.nf-dialogo__erro { color: var(--baixa); font-weight: 600; }
.nf-dialogo__barra { margin: 4px 0; }
.nf-dialogo__opcoes { border: 0; display: grid; gap: 8px; margin: 2px 0; }
.nf-dialogo__opcoes label { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }
.nf-dialogo__opcoes label:has(input:checked) { border-color: var(--verde); background: var(--verde-fundo); }
.nf-dialogo__opcoes label:has(input:disabled) { opacity: 0.5; cursor: default; }
.nf-dialogo__opcoes input { accent-color: var(--verde); }
.nf-dialogo__opcoes span { color: var(--texto-suave); font-size: 0.85rem; }
/* Valor atualizado (multa + juros ate hoje): detalhamento na dica */
.inad-atualizado { display: block; width: max-content; margin: 3px 0 0 auto; font-size: 0.74rem; font-weight: 600; color: var(--marinho); border-bottom: 1px dotted var(--texto-suave); cursor: help; white-space: nowrap; }
.inad-atualizado:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.nf-dialogo__botoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.nf-dialogo__botoes .usu-botao { margin-left: 0; height: 36px; padding: 0 14px; }
@media (max-width: 640px) { .painel__direita:has(#inad-notas) { justify-content: flex-start; } }
/* Aba Credito e cobranca: ultimo/proximo contato abaixo do nome do cliente */
.inad-contato { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 400; color: var(--texto-suave); white-space: normal; }
.inad-contato .selo-status { margin-left: 6px; }
/* Historico de contatos de cobranca (rotina 1214) dentro do cliente */
.inad-historico { margin: 4px 0 14px; display: grid; gap: 8px; }
/* Observacao de desdobramento (rotina 1203) abaixo da tabela de titulos do cliente */
.inad-obs { list-style: none; margin: 10px 0 4px; padding: 8px 12px; display: grid; gap: 4px; font-size: 0.85rem; color: var(--texto-suave); border-left: 3px solid var(--borda, #d5dae3); }
.inad-obs strong { color: var(--texto, inherit); }
.inad-desd-selo { display: block; width: fit-content; margin-top: 4px; }
.inad-documento { margin: 4px 0 10px; display: flex; align-items: baseline; gap: 8px; font-size: 0.95rem; }
/* Contatos da Receita Federal no detalhe do cliente (Credito e cobranca) */
.inad-receita { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 12px; font-size: 0.92rem; }
.inad-receita .inad-detalhe__msg { padding: 0; }
.inad-receita .usu-botao { align-self: center; }
.inad-historico__titulo { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave); }
.inad-historico__titulo span { font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Historico de cobranca recolhido: uma linha resumo + "Mostrar histórico (n)" / "Ocultar histórico" */
.inad-historico__linha { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: space-between; }
.inad-historico__resumo { font-size: 0.88rem; color: var(--texto-suave); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inad-historico__resumo strong { color: var(--texto); }
.inad-historico__alternar { margin-left: 0; }
.inad-historico__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inad-historico__item {
  background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--azul);
  border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px;
}
.inad-historico__topo { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 0.86rem; color: var(--texto-suave); }
.inad-historico__topo > strong { color: var(--marinho); }
.inad-historico__prox { margin-left: auto; }
.inad-historico__prox strong { color: var(--texto); }
.inad-historico__resultado { display: grid; gap: 2px; font-size: 0.9rem; color: var(--texto); white-space: normal; overflow-wrap: anywhere; }
.inad-historico__resultado p { margin: 0; }
.inad-historico__rotulo { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }

/* Detalhe da aba Credito e cobranca (10 colunas): mais compacto para caber sem rolagem lateral */
.inad-titulos--compacto th, .inad-titulos--compacto td { padding: 8px 4px; font-size: 0.8rem; }
.inad-titulos--compacto thead th { letter-spacing: 0; font-size: 0.66rem; }
.inad-titulos--compacto .selo-status { white-space: normal; text-align: center; padding: 2px 6px; font-size: 0.72rem; }
/* Detalhe do cliente nunca alarga a lista: se a tabela de NFs nao couber, so ela rola para o lado */
.inad-detalhe > td { max-width: 0; }
.inad-titulos-rolagem { overflow-x: auto; }
.inad-titulos--compacto td:nth-child(2), .inad-titulos--compacto td:nth-child(3), .inad-titulos--compacto td:nth-child(4) { white-space: nowrap; } /* titulo, Emissao NF e Vencimento */
.inad-titulos--compacto thead th.num { white-space: normal; }
.inad-detalhe > td:has(.inad-titulos--compacto) { padding-left: 4px; padding-right: 4px; }
.inad-cliente__cod { color: var(--texto-suave); font-weight: 500; margin-right: 10px; font-variant-numeric: tabular-nums; }
.inad-tabela tfoot th, .inad-tabela tfoot td { font-weight: 700; color: var(--marinho); border-top: 2px solid var(--grade-forte); }
.inad-detalhe__msg { color: var(--texto-suave); font-size: 0.9rem; padding: 10px 2px 0; }
.inad-cliente { cursor: pointer; }
.inad-cliente > * { border-bottom: 1px solid var(--grade); }
.inad-cliente:hover > * { background: var(--fundo); }
.inad-cliente--aberto > * { border-bottom-color: transparent; background: var(--fundo); }
.inad-tabela .inad-cliente__nome { font-weight: 600; color: var(--marinho); white-space: normal; min-width: 240px; }
.inad-cliente__valor { font-weight: 700; }
.inad-col-seta { width: 48px; text-align: center; }
.inad-seta {
  width: 32px; height: 32px; display: inline-grid; place-items: center;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--texto-suave); cursor: pointer;
}
.inad-seta svg { width: 18px; height: 18px; transition: transform 160ms ease; }
.inad-seta[aria-expanded="true"] svg { transform: rotate(90deg); }
.inad-seta:hover { background: var(--neutro-fundo); color: var(--texto); }
.inad-seta:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.inad-detalhe > td { padding: 0 10px 14px 24px; background: var(--fundo); border-bottom: 1px solid var(--grade); }
.inad-titulos { background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; border-collapse: separate; border-spacing: 0; }
.inad-titulos th, .inad-titulos td { padding: 9px 10px; font-size: 0.88rem; }
/* Detalhe da aba Credito e cobranca (14 colunas com NF/Boleto): espaco lateral menor para caber sem rolagem em 1440px */
.inad-titulos.inad-titulos--compacto th, .inad-titulos.inad-titulos--compacto td { padding-left: 6px; padding-right: 6px; }
/* Detalhe com 9 colunas: cabecalhos podem quebrar em 2 linhas para caber sem rolagem lateral */
.inad-titulos thead th { white-space: normal; vertical-align: bottom; }
/* Coluna Protesto: marca + botao (ou o selo da etapa) por parcela, centralizados no cabecalho e na celula, sem quebrar o botao */
.inad-titulos .inad-col-protesto { text-align: center; vertical-align: middle; white-space: nowrap; }
.inad-titulos thead th.inad-col-protesto { vertical-align: bottom; }
.inad-titulos .inad-col-protesto .usu-botao { margin-left: 0; }
.prot-parcela { display: inline-flex; align-items: center; gap: 6px; }
.prot-marca { width: 16px; height: 16px; accent-color: var(--baixa); cursor: pointer; }
.prot-lote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 8px; }
.prot-lote .usu-botao { margin-left: 0; }
/* Cabecalho da lista tambem quebra em 2 linhas (ex.: "Limite de / crédito") para caber em telas de notebook */
.inad-tabela > thead th, .inad-tabela > thead th.num { white-space: normal; vertical-align: bottom; }
.inad-tabela > thead th.num .inad-ordem, .inad-titulos thead th.num .inad-ordem { justify-content: flex-end; text-align: right; }
.inad-titulos tbody tr + tr td { border-top: 1px solid var(--grade); }
.inad-vazio { text-align: center; padding: 24px 10px; }
.inad-paginacao { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.inad-paginacao[hidden] { display: none; }
.inad-pag__info { color: var(--texto-suave); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.inad-pag {
  height: 36px; padding: 0 14px;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 0.88rem; cursor: pointer;
}
.inad-pag:hover:not(:disabled) { background: var(--neutro-fundo); }
.inad-pag:disabled { opacity: 0.45; cursor: default; }
.inad-pag:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }

@media (max-width: 1280px) {
  .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-graficos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fin-kpis { grid-template-columns: minmax(0, 1fr); }
  .fin-topo__filtros, .filtro-datas { width: 100%; }
  .filtro { flex: 1 1 140px; min-width: 0; }
  .rosca { grid-template-columns: minmax(0, 1fr); }
  .rosca__grafico { height: 220px; }
  .inad-busca, .inad-ferramentas .filtro-multi { max-width: none; flex: 1 1 100%; }
  .inad-cliente__texto { max-width: 180px; }
  .inad-detalhe > td { padding-left: 10px; }
}


/* ===================== Cards compactos: comparativo e esqueleto (Painel Comercial, Painel Logístico) ===================== */
/* variacao + "vs. mes anterior" (o title mostra o valor do periodo anterior) */
.com-vs { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: baseline; cursor: help; }
/* Painel Comercial: "i" do comparativo (valor anterior -> atual); a dica abre abaixo, alinhada a direita para nao sair do card */
.com-vs { align-items: center; }
.com-vs__info { margin-left: 0; }
.com-vs__info:hover::after, .com-vs__info:focus::after { left: auto; right: -8px; transform: none; }
.kpi-c--sem-meta .kpi-c__valor { color: var(--texto-suave); font-size: clamp(1.1rem, 1.5vw, 1.4rem); white-space: normal; }
.fin-topo__filtros .cal { min-width: 210px; }
.fin-topo__filtros .cal[hidden] { display: none; }

/* Skeleton: blocos cinza pulsando no lugar do valor e da linha de apoio enquanto carrega */
.kpi-c--carregando .kpi-c__valor,
.kpi-c--carregando .kpi-c__rodape {
  color: transparent !important;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--neutro-fundo) 25%, #f7f8fb 50%, var(--neutro-fundo) 75%);
  background-size: 200% 100%;
  animation: esqueleto 1.3s ease-in-out infinite;
  user-select: none;
}
.kpi-c--carregando .kpi-c__valor { width: 70%; }
.kpi-c--carregando .kpi-c__rodape { width: 85%; min-height: 1.2em; }
.kpi-c--carregando .kpi-c__rodape > * { visibility: hidden; }
@keyframes esqueleto { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .kpi-c--carregando .kpi-c__valor, .kpi-c--carregando .kpi-c__rodape { animation: none; } }

/* Skeleton das linhas de tabela */
.com-esqueleto td span {
  display: block; height: 1em; border-radius: 6px;
  background: linear-gradient(90deg, var(--neutro-fundo) 25%, #f7f8fb 50%, var(--neutro-fundo) 75%);
  background-size: 200% 100%;
  animation: esqueleto 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .com-esqueleto td span { animation: none; } }
@media (max-width: 1080px) { .com-centro { grid-template-columns: minmax(0, 1fr); } }

/* ===================== Portal do Vendedor ===================== */
.pv-abas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.pv-aba {
  flex: 0 0 auto; display: grid; gap: 1px; text-align: left; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); padding: 9px 16px;
  color: var(--texto-suave); font: inherit;
}
.pv-aba__titulo { font-weight: 700; color: var(--marinho); font-size: 0.95rem; }
.pv-aba__sub { font-size: 0.78rem; }
.pv-aba:hover { border-color: var(--verde); }
.pv-aba--ativa { border-color: var(--verde); background: var(--verde-fundo); }
.pv-aba--ativa .pv-aba__titulo { color: var(--verde-escuro); }
.pv-aba:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.pv-resumo { display: grid; gap: var(--gap); }
.pv-bloco { display: grid; gap: 10px; }
.pv-bloco__titulo { margin: 0; font-size: 1rem; font-weight: 700; color: var(--marinho); }
.pv-kpis { display: grid; grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); gap: var(--gap); }
.pv-kpis .kpi-c__rodape { row-gap: 6px; display: grid; }
.pv-kpis .kpi-c__valor { font-size: clamp(1.35rem, 1.75vw, 2.1rem); }
.pv-grafico__area { min-height: 300px; height: 320px; }
.pv-visao { display: inline-flex; background: var(--neutro-fundo); border-radius: 8px; padding: 3px; gap: 2px; }
.pv-visao__botao { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font: inherit; font-size: 0.85rem; color: var(--texto-suave); cursor: pointer; }
.pv-visao__botao--ativo { background: var(--superficie); color: var(--marinho); font-weight: 700; box-shadow: var(--sombra); }
/* Painel Comercial > Clientes: "Por cliente | Por rede". A linha da rede abre os clientes dela logo abaixo, recuados */
.pv-cli-visao { align-self: flex-end; }
.pv-rede-selo { margin-right: 6px; }
.pv-tabela .pv-linha--grupo td { font-weight: 600; }
.pv-tabela .pv-linha--filha { background: var(--fundo); }
.pv-tabela .pv-linha--filha .pv-c-nome { padding-left: 28px; }
.pv-sem-vinculo p { margin: 0; font-size: 1.05rem; color: var(--marinho); }
.pv-topo .fin-topo__sub strong { color: var(--marinho); }
/* Painel Comercial: faixa "Simular perfil" (so no ambiente local de teste) e sub-aba Equipes */
.pc-simular { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding: 12px 16px; margin-bottom: 16px; border-style: dashed; }
.pc-simular__texto { display: grid; gap: 2px; font-size: 0.85rem; color: var(--texto-suave); }
.pc-simular__texto > strong { color: var(--marinho); font-size: 0.95rem; }
.pv-eq-total td { border-top: 2px solid var(--borda); font-weight: 600; }
.pv-eq-nota { margin: 10px 0 0; font-size: 0.8rem; color: var(--texto-suave); }
.pv-eq-nota--alerta { color: var(--baixa); font-weight: 600; }
/* Painel Comercial: todos os selos (badges) com a primeira letra maiuscula ("Não", "Sim", "Nada vencido", "Em aberto").
   So o visual: o texto do Portal antigo nao muda (fica fora do .pc-portal) */
.pc-portal :is(.selo-status, .geo-selo, .gp-selo)::first-letter { text-transform: uppercase; }
/* Painel Comercial > Clientes > detalhe: titulos vencidos com "Ver NF" e "Boleto" */
.pv-tit { margin-top: 10px; }
.pv-tit-acoes { white-space: nowrap; }
.pv-tit-acao { height: 28px; padding: 0 10px; font-size: 0.78rem; text-decoration: none; display: inline-flex; align-items: center; }
/* Painel Comercial > Alertas: motivo do bloqueio e visao agrupada (expandir/recolher) */
.al-motivos { align-items: center; }
.al-agrupar[aria-pressed="true"] { background: var(--verde-fundo); border-color: var(--verde); }
.al-grupo { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.al-grupo + .al-grupo { margin-top: 10px; }
.al-grupo__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; font-weight: 700; color: var(--marinho); }
.al-grupo__n { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--neutro-fundo); color: var(--texto); font-size: 0.8rem; text-align: center; }
.al-grupo__corpo { display: grid; gap: 10px; padding: 0 12px 12px; }
.pv-equipe-sem { font-style: italic; color: var(--texto-suave); }
.pv-eq-abrir { height: 30px; }
/* Painel Comercial: bloco Vendas com 6 cards em 2 linhas de 3 (1 por linha no celular) */
.pv-kpis.pv-kpis--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .shell .pv-kpis--seis > *:nth-child(-n+3) { border-bottom: 1px solid var(--borda); }
  .shell .pv-kpis--seis > *:nth-child(3n) { border-right: 0; }
}
@media (max-width: 767px) { .pv-kpis.pv-kpis--seis { grid-template-columns: minmax(0, 1fr); } }
/* Faturado e Pedidos Emitidos (R$) com o valor completo (R$ 3.591.739,82): fonte um pouco menor, numa linha so */
.pv-kpis--seis #pv-venda .kpi-c__valor, .pv-kpis--seis #pv-hoje .kpi-c__valor { font-size: clamp(1.15rem, 1.45vw, 1.75rem); white-space: nowrap; }
/* Painel Comercial: menu de sub-abas em uma linha (icone + nome; sem rolagem lateral; "Mais" e seletor no celular) */
.pc-abas { border-bottom: 1px solid var(--borda); }
.pc-abas__linha { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 2px; min-width: 0; }
.pc-aba {
  display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; padding: 10px 12px;
  border: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; background: transparent;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--texto-suave); cursor: pointer;
}
.pc-aba:hover { background: var(--neutro-fundo); color: var(--texto); }
.pc-aba:focus-visible { outline: 2px solid var(--marinho); outline-offset: -2px; }
.pc-aba--ativa, .pc-aba--ativa:hover { color: var(--verde); border-bottom-color: var(--verde); background: transparent; }
.pc-aba__icone { display: inline-flex; }
.pc-aba__icone svg { width: 16px; height: 16px; }
.pc-aba__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--baixa); color: #fff; font-size: 0.68rem; font-weight: 800;
}
.pc-aba__badge[hidden] { display: none; }
.pc-abas__mais { position: relative; margin-left: auto; flex: none; display: flex; }
.pc-abas__mais[hidden] { display: none; }
.pc-abas__menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; padding: 6px;
  display: grid; gap: 2px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 30, 61, 0.16);
}
.pc-abas__menu[hidden] { display: none; }
.pc-abas__menu .pc-aba { border-bottom: 0; border-left: 3px solid transparent; border-radius: 6px; justify-content: flex-start; }
.pc-abas__menu .pc-aba--ativa { border-left-color: var(--verde); }
.pc-abas__seletor { display: none; }
.pc-abas__sub { margin: 6px 2px 6px; font-size: 0.82rem; color: var(--texto-suave); }
/* o menu fica fora do card do topo: a linha "Mais" precisa sair por cima do conteudo */
.pc-portal .pc-abas { position: relative; z-index: 5; }
@media (max-width: 767px) {
  .pc-abas { border-bottom: 0; }
  .pc-abas__linha { display: none; }
  .pc-abas__seletor { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--verde); }
  .pc-abas__seletor select { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--texto); }
}
/* Sub-abas Clientes, Produtos, Comissoes e Oportunidades */
.pv-aba-conteudo, .pv-comissoes, .pv-oportunidades { display: grid; gap: var(--gap); }
.pv-ferramentas { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: flex-end; }
.pv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-chip {
  border: 1px solid var(--borda); background: var(--superficie); border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: 0.85rem; color: var(--texto); cursor: pointer;
}
.pv-chip span { color: var(--texto-suave); font-weight: 700; margin-left: 4px; }
.pv-chip--ativo { background: var(--verde-fundo); border-color: var(--verde); color: var(--verde-escuro); font-weight: 700; }
.pv-chip--ativo span { color: var(--verde-escuro); }
.pv-chip:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.pv-sub { display: block; font-size: 0.78rem; color: var(--texto-suave); font-weight: 400; }
.pv-tabela td { border-bottom: 1px solid var(--grade); vertical-align: top; }
.pv-tabela .pv-c-pos { width: 3.4em; color: var(--texto-suave); font-weight: 700; }
.pv-tabela .pv-c-nome { font-weight: 600; color: var(--marinho); min-width: 220px; }
.pv-tabela .pv-c-rca { min-width: 190px; font-size: 0.86rem; } /* coluna RCA (Painel do Supervisor / da Diretoria) */
/* Coluna centralizada (titulo e valores): na tela de computador; no celular a tabela vira cartoes e fica como esta */
@media (min-width: 641px) {
  .pv-tabela th.pv-c-centro, .pv-tabela td.pv-c-centro { text-align: center; }
  .pv-tabela th.pv-c-centro .inad-ordem { position: relative; justify-content: center; text-align: center; }
  .pv-tabela th.pv-c-centro .inad-ordem__seta { position: absolute; left: 100%; margin-left: 0.25em; } /* a seta nao desloca o titulo: ele fica no meio da coluna */
}
.pv-tabela .inad-detalhe > td { padding: 4px 12px 16px; }
.pv-mais { display: flex; justify-content: center; padding-top: 4px; }
.pv-mais[hidden] { display: none; }
.pv-det__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 14px; }
.pv-det__resumo { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.pv-det .com-det__valor { overflow-wrap: normal; }
.pv-det .selo-status { white-space: normal; }
.pv-motivo { margin: 6px 0 0; }
.pv-prod-linha { cursor: pointer; }
.pv-prod-linha:hover td, .pv-prod-linha--aberta td { background: var(--fundo); }
.pv-historico { display: grid; gap: 10px; padding: 6px 0; }
.pv-linha-preco { width: 100%; max-width: 560px; height: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; }
.pv-linha-preco__eixo { font-size: 11px; fill: var(--texto-suave); font-family: var(--fonte); }
.pv-com-grafico { height: 320px; }
/* Celular: cada linha da tabela vira um card (rotulo da coluna a esquerda, valor a direita) */
@media (max-width: 640px) {
  .pv-tabela, .pv-tabela > tbody, .pv-tabela > tbody > tr, .pv-tabela > tbody > tr > td { display: block; width: 100%; }
  .pv-tabela { table-layout: auto; }
  .pv-tabela > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pv-tabela > tbody > tr:not(.inad-detalhe) {
    border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 10px; padding: 6px 10px; background: var(--superficie);
  }
  .pv-tabela > tbody > tr:not(.inad-detalhe) > td {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
    border: 0; padding: 5px 0; text-align: right; min-width: 0;
  }
  .pv-tabela > tbody > tr:not(.inad-detalhe) > td::before {
    content: attr(data-rotulo); flex: none; text-align: left; color: var(--texto-suave); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
  }
  .pv-tabela > tbody > tr > td.pv-c-nome { display: block; text-align: left; font-size: 1rem; }
  .pv-tabela > tbody > tr > td.pv-c-nome::before { display: block; margin-bottom: 2px; }
  .pv-tabela > tbody > tr > td.inad-col-seta { justify-content: flex-end; }
  .pv-tabela > tbody > tr > td.inad-col-seta::before { content: none; }
  .pv-tabela > tbody > tr.inad-detalhe > td { padding: 0 0 12px; background: transparent; border: 0; max-width: none; min-width: 0; overflow-x: auto; }
  .pv-tabela-rolagem { overflow-x: visible; }
  .pv-aba-conteudo, .pv-aba-conteudo .painel { min-width: 0; max-width: 100%; }
  .pv-tabela > tbody > tr.com-esqueleto > td::before { content: none; }
  .pv-det__resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-det .com-det__valor { overflow-wrap: anywhere; }
  .pv-ferramentas .inad-busca { max-width: none; flex: 1 1 100%; }
}

/* Botao "i" com a explicacao do indicador (passar o mouse ou tocar) */
.kpi-c__info {
  position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0;
  border: 1px solid var(--grade-forte); border-radius: 50%; background: var(--superficie); color: var(--texto-suave);
  font: italic 700 0.7rem Georgia, serif; text-transform: none; letter-spacing: 0; cursor: help; vertical-align: 1px;
}
.kpi-c__info:hover, .kpi-c__info:focus-visible { color: var(--marinho); border-color: var(--marinho); outline: none; }
.kpi-c__info:hover::after, .kpi-c__info:focus::after {
  content: attr(data-dica); position: absolute; z-index: 20; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(280px, 80vw); white-space: normal; text-align: left;
  background: var(--marinho); color: #fff; font: 400 0.82rem/1.4 var(--fonte); padding: 8px 10px; border-radius: 8px; box-shadow: var(--sombra);
}
@media (max-width: 1279px) { .pv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pv-kpis { grid-template-columns: minmax(0, 1fr); }
  .pv-aba { padding: 8px 12px; }
  .kpi-c__info:hover::after, .kpi-c__info:focus::after { left: auto; right: -40px; transform: none; }
}

/* Top clientes */
.com-clientes__tabela { table-layout: fixed; }
.com-clientes__tabela th, .com-clientes__tabela td { padding-left: 8px; padding-right: 8px; }
.com-clientes__tabela .c-pos { width: 3.4em; }
.com-clientes__tabela .c-valor { width: 9.4em; }
.com-clientes__tabela .c-qtd { width: 6em; }
.com-clientes__tabela .c-pct { width: 7.6em; }
.com-clientes__tabela .inad-col-seta { width: 48px; }
.com-clientes__nome { font-weight: 600; color: var(--marinho); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-clientes__tabela .inad-detalhe > td { padding: 4px 12px 16px; }
.com-clientes .inad-ferramentas { margin-top: -4px; }
#com-clientes-todos[hidden] { display: none; }
/* Top clientes dentro do Faturamento Geral: barra de filtros propria acima do card */
.fat-clientes { display: grid; gap: var(--gap); margin-top: var(--gap); }
.fat-clientes__filtros { align-items: end; margin: 0; }
.fat-clientes__filtros .cal[hidden], #fc-datas[hidden] { display: none; }

/* Detalhe do cliente (Top clientes do Faturamento Geral e Painel Comercial) */
.com-det { display: grid; gap: 14px; padding-top: 6px; white-space: normal; }
.com-det__aviso { margin: 0; }
.com-det__resumo {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  background: var(--borda); border: 1px solid var(--borda); border-radius: 8px; overflow: hidden;
}
.com-det__info { background: var(--superficie); padding: 10px 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.com-det__rotulo { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.com-det__valor { font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.com-det__nota { font-weight: 400; color: var(--texto-suave); font-size: 0.85rem; }
.com-det__grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.com-det__lado { display: grid; gap: 14px; min-width: 0; }
.com-det__bloco { display: grid; gap: 8px; min-width: 0; }
.com-det__titulo { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--marinho); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.com-det__titulo .tend { font-size: 0.82rem; font-weight: 600; }
/* So as celulas da tabela de notas (nao as dos itens dentro dela) ficam em uma linha */
.com-det__notas { width: 100%; }
.com-det__notas > thead > tr > th, .com-det__notas > tbody > tr > td { white-space: nowrap; padding: 8px 7px; font-size: 0.84rem; }
.com-det__notas > tbody > tr > td.inad-col-seta { width: 40px; padding: 2px; }
.com-det__itens-tabela td:first-child { white-space: normal; }
.com-det__nota-linha { cursor: pointer; }
.com-det__nota-linha:hover td, .com-det__nota-linha--aberta td { background: var(--fundo); }
.com-det__itens > td { padding: 0 6px 10px 14px !important; background: var(--fundo); }
.com-det__itens-tabela {
  width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px;
}
.com-det__itens-tabela th, .com-det__itens-tabela td { padding: 7px 10px; font-size: 0.84rem; text-align: left; }
.com-det__itens-tabela thead th { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); border-bottom: 1px solid var(--grade-forte); }
.com-det__itens-tabela .num { text-align: right; white-space: nowrap; }
.com-det__itens-tabela tbody tr + tr td { border-top: 1px solid var(--grade); }
/* Mini grafico de 6 meses */
.com-mini {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 150px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 10px 6px;
}
.com-mini__col { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: end; gap: 4px; min-width: 0; }
.com-mini__valor { font-size: 0.7rem; font-weight: 600; color: var(--texto); white-space: nowrap; }
.com-mini__barra { width: 70%; max-width: 34px; background: var(--verde); border-radius: 4px 4px 0 0; align-self: end; }
.com-mini__col:last-child .com-mini__barra { background: var(--verde-escuro); }
.com-mini__mes { font-size: 0.72rem; color: var(--texto-suave); }
.com-det__mix { margin: 0; font-size: 0.88rem; color: var(--texto); display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }

@media (max-width: 1279px) {
  .com-det__resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .com-det__grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .com-clientes__tabela .c-opcional { display: none; }
}
@media (max-width: 560px) {
  .com-det__resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Celular: posicao e Pedidos saem da lista (pedidos aparecem no detalhe) para o nome do cliente caber */
  .com-clientes__tabela .c-qtd, .com-clientes__tabela .c-pos { display: none; }
  .com-clientes__tabela .c-valor { width: 8.6em; }
  .com-clientes__tabela .c-pct { width: 5.4em; }
  .com-clientes__tabela th, .com-clientes__tabela td { padding-left: 4px; padding-right: 4px; font-size: 0.8rem; }
  .com-clientes__tabela > thead th { font-size: 0.62rem; letter-spacing: 0.02em; }
  .com-clientes__tabela .tend { font-size: 0.78rem; }
  .com-clientes__tabela .inad-cliente__cod { display: none; }
  .com-clientes__tabela .inad-col-seta { width: 36px; }
}

@media (max-width: 1279px) { .com-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .com-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .fin-topo__filtros .cal { flex: 1 1 100%; max-width: none; }
}


/* ===================== Login / troca de senha ===================== */
body.acesso {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px 16px;
}
.acesso__caixa {
  width: min(400px, 100%);
  padding: 32px clamp(20px, 5vw, 36px);
  display: grid; justify-items: center; gap: 6px;
}
/* Logo do login sem o nome embaixo (o nome "Painel da Diretoria" saiu em 27/10/2026): o espaco ate o titulo fica na logo */
.acesso__logo { width: 110px; height: auto; display: block; margin-bottom: 14px; }
.acesso__form { width: 100%; display: grid; gap: 14px; }
.acesso__form[hidden] { display: none; }
.acesso__titulo { font-size: 1.35rem; font-weight: 700; color: var(--marinho); text-align: center; }
.acesso__campo { display: grid; gap: 6px; font-size: 0.88rem; color: var(--texto-suave); }
.acesso__campo small { font-size: 0.8rem; }
.acesso__campo input {
  height: 44px; padding: 0 12px;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 1rem;
}
.acesso__campo input:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; border-color: transparent; }
.acesso__erro {
  background: var(--baixa-fundo); color: var(--baixa);
  border-radius: 8px; padding: 10px 12px; font-size: 0.9rem;
}
.acesso__erro[hidden] { display: none; }
.acesso__botao {
  height: 46px; border: 0; border-radius: 8px;
  background: var(--verde); color: #fff;
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.acesso__botao:hover:not(:disabled) { background: var(--verde-escuro); }
.acesso__botao:disabled { opacity: 0.6; cursor: wait; }
.acesso__botao:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.acesso__nota { font-size: 0.82rem; color: var(--texto-suave); text-align: center; }
.acesso__link {
  background: none; border: 0; color: var(--texto-suave); font: inherit; font-size: 0.88rem;
  text-decoration: underline; cursor: pointer; justify-self: center;
}

/* Usuario logado no rodape do menu */
.menu__usuario {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-top: 1px solid var(--menu-borda);
}
.menu__usuario[hidden] { display: none; }
.menu__usuario-nome {
  flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; color: var(--menu-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu__sair {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--menu-borda); border-radius: 8px;
  color: var(--menu-texto-suave); font: inherit; font-size: 0.82rem; padding: 6px 10px; cursor: pointer;
}
.menu__sair svg { width: 16px; height: 16px; }
.menu__sair:hover { background: var(--menu-hover); color: var(--menu-texto); }
.menu__sair:focus-visible { outline: 2px solid var(--menu-destaque); outline-offset: 2px; }
.shell--recolhido .menu__usuario { flex-direction: column; padding: 10px 0; }
.shell--recolhido .menu__usuario-nome, .shell--recolhido .menu__sair-texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* ===================== Pagina Usuarios ===================== */
.usu-lista { overflow-x: auto; }
.usu-tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.usu-tabela th, .usu-tabela td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--grade); vertical-align: middle; }
.usu-tabela thead th {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texto-suave); border-bottom-color: var(--grade-forte); white-space: nowrap;
}
.usu-tabela td.usu-acoes { text-align: right; width: 1%; }
/* Acoes: sempre numa linha, alinhadas a direita (a coluna fica so com a largura dos botoes) */
.usu-acoes__botoes { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.usu-acoes__botoes .usu-botao { white-space: nowrap; }
.usu-acoes__botoes .usu-botao { margin-left: 0; white-space: nowrap; }
/* Tela menor: botoes em grade de 3 por linha (todas as linhas com a mesma altura, sem rolagem lateral) */
@media (max-width: 1400px) {
  .usu-acoes__botoes { display: grid; grid-template-columns: repeat(3, auto); justify-content: end; }
}
@media (max-width: 700px) {
  .usu-acoes__botoes { grid-template-columns: repeat(2, auto); }
}
.usu-tabela td:first-child { min-width: 160px; }
.usu-c-acesso { min-width: 150px; }
.usu-c-quando { min-width: 92px; font-variant-numeric: tabular-nums; }
/* Acesso: resumo compacto; a lista completa abre em "Ver acessos" (popover so de leitura) */
.usu-acesso { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.usu-acesso__qtd { font-weight: 600; color: var(--marinho); white-space: nowrap; }
.usu-ancora { display: inline-flex; }
.usu-acoes .usu-pop, .usu-pop--ver { text-align: left; white-space: normal; } /* popover dentro da coluna Acoes (alinhada a direita) */
.usu-pop--ver { width: 320px; }
.usu-pop--ver:focus { outline: none; }
.usu-pop--ver:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.usu-ver__nota { background: #fff4e5; color: #8a4b00; border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; }
.usu-ver__lista { list-style: none; margin: 0; padding: 0 6px; display: grid; gap: 6px; font-size: 0.9rem; color: var(--texto); }
.usu-ver__lista li { display: flex; gap: 8px; align-items: baseline; }
.usu-ver__lista li::before { content: '✓'; color: var(--verde); font-weight: 700; }
.usu-ver__lista--extra li::before { color: #8a4b00; }
.usu-ver__vazio { padding: 0 6px; font-size: 0.88rem; color: var(--texto-suave); }
.usu-sub--inline { display: inline; }
.usu-nome { font-weight: 600; color: var(--marinho); }
.usu-sub { display: block; color: var(--texto-suave); font-size: 0.82rem; font-weight: 400; }
/* Senha provisoria mostrada uma unica vez ao administrador (selecionavel com um clique) */
.usu-senha { font-family: Consolas, 'Courier New', monospace; font-weight: 700; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 6px; background: var(--neutro-fundo); user-select: all; }
.usu-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.usu-botao {
  height: 32px; padding: 0 10px; margin-left: 4px;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie);
  color: var(--texto); font: inherit; font-size: 0.82rem; cursor: pointer;
}
.usu-botao:hover:not(:disabled) { background: var(--neutro-fundo); }
.usu-botao:disabled { opacity: 0.45; cursor: default; }
.usu-botao--perigo { color: var(--baixa); }
.usu-botao--primario { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 700; }
.usu-botao--primario:hover:not(:disabled) { background: var(--verde-escuro); }
.usu-botao:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.usu-busca { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.usu-busca .filtro { max-width: 360px; flex: 1 1 260px; }
.usu-resultados { display: grid; gap: 8px; }
.usu-resultado {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px;
}
.usu-resultado__texto { flex: 1; min-width: 200px; }
.usu-form-liberar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.usu-form-liberar input[type=password], .usu-form-liberar input[type=text] {
  height: 34px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: 0.88rem; width: 190px;
}
.usu-form-liberar label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--texto-suave); }
.usu-aviso {
  background: #fff4e5; color: #8a4b00; border: 1px solid #f5d9b0; border-radius: 10px;
  padding: 10px 12px; font-size: 0.9rem;
}
.usu-aviso[hidden] { display: none; }
.usu-mensagem { font-size: 0.9rem; border-radius: 8px; padding: 8px 12px; }
.usu-mensagem--ok { background: var(--verde-fundo); color: var(--verde-escuro); }
.usu-mensagem--erro { background: var(--baixa-fundo); color: var(--baixa); }
.usu-mensagem[hidden] { display: none; }
/* Abas liberadas por usuario: etiqueta do resumo + lista em coluna para editar */
.usu-abas-cel { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.usu-etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--azul-fundo); color: var(--azul-texto);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.usu-etiqueta--todas { background: var(--verde-fundo); color: var(--verde-escuro); }
.usu-etiqueta--vazia { background: var(--neutro-fundo); color: var(--texto-suave); font-weight: 500; }
.usu-seletor-abas {
  height: 34px; margin-left: 0; padding: 0 30px 0 10px; text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f1e3d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.usu-pop {
  position: fixed; z-index: 60; width: 300px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 30, 61, 0.16);
  padding: 12px; display: grid; gap: 8px;
}
.usu-pop[hidden] { display: none; }
.usu-pop__titulo { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); padding: 0 6px; }
.usu-pop__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.usu-pop__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 8px; cursor: pointer; font-size: 0.92rem; color: var(--texto);
}
.usu-pop__item:hover { background: var(--neutro-fundo); }
.usu-pop__item input { width: 17px; height: 17px; margin: 0; accent-color: var(--verde); flex: none; }
.usu-pop__item:has(input:checked) { font-weight: 600; }
.usu-pop__rodape { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--grade); padding-top: 10px; }
.usu-pop__rodape .usu-botao { margin-left: 0; }
.usu-pop__espaco { flex: 1; }
.usu-pop__link { background: none; border: 0; padding: 0; color: var(--azul); font: inherit; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.usu-pop__link:hover { text-decoration: underline; }
.usu-pop__link:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; border-radius: 4px; }

/* ===================== Pagina Administracao ===================== */
.adm-secoes { display: inline-flex; gap: 4px; background: var(--neutro-fundo); border-radius: 10px; padding: 4px; flex-wrap: wrap; }
.adm-secao {
  height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
  color: var(--texto-suave); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.adm-secao:hover { color: var(--texto); }
.adm-secao--ativa { background: var(--superficie); color: var(--marinho); box-shadow: var(--sombra); }
.adm-secao:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.adm-filtros .filtro { max-width: 200px; flex: 0 1 180px; }
.adm-quando { white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-detalhe { color: var(--texto-suave); font-size: 0.86rem; max-width: 360px; }
.adm-alertas { gap: 14px; }
.adm-alerta { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 16px 14px; margin: 0; display: grid; gap: 8px; }
.adm-alerta legend { font-weight: 700; color: var(--marinho); padding: 0 6px; font-size: 0.95rem; }
.adm-alerta legend label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.adm-alerta legend input { width: 17px; height: 17px; margin: 0; accent-color: var(--verde); }
.adm-alerta .usu-sub { margin: 0; }
.adm-campos { display: flex; gap: 12px; flex-wrap: wrap; }
.adm-campos .filtro { max-width: 200px; }
.adm-campos input:disabled { background: var(--neutro-fundo); color: var(--texto-suave); }
.adm-acoes { display: flex; justify-content: flex-end; }
/* Administracao > Cobranca por e-mail */
.adm-chaves { display: grid; gap: 10px; }
.adm-chave {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  border: 1px solid var(--borda); border-radius: 10px; padding: 12px 16px; background: var(--superficie);
}
.adm-chave__texto { display: grid; gap: 2px; min-width: 0; }
.adm-chave__titulo { font-weight: 700; color: var(--marinho); }
.adm-chave__estado {
  font-weight: 800; letter-spacing: 0.04em; font-size: 0.85rem; padding: 6px 12px; border-radius: 999px;
  background: var(--neutro-fundo); color: var(--texto-suave);
}
.adm-chave--ligada { border-color: #d4961c; background: #fffaf0; }
.adm-chave--ligada .adm-chave__estado { background: #fff4e5; color: #8a4b00; }
.adm-cob-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9rem; }
.adm-cob-info { margin: 0; display: grid; gap: 10px; }
.adm-cob-info > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
.adm-cob-info dt { font-weight: 700; color: var(--texto-suave); font-size: 0.85rem; }
.adm-cob-info dd { margin: 0; overflow-wrap: anywhere; }
.adm-cob-planos { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
@media (max-width: 640px) {
  .adm-chave { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-chave .usu-botao { grid-column: 1 / -1; }
  .adm-cob-info > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ===================== Seletor de periodo (calendario proprio) ===================== */
.cal { position: relative; }
.cal__botao {
  height: 40px; width: 100%; min-width: 190px;
  display: flex; align-items: center; gap: 8px; padding: 0 30px 0 10px; text-align: left;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 0.92rem; cursor: pointer; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f1e3d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.cal__botao svg { width: 16px; height: 16px; flex: none; color: var(--texto-suave); }
.cal__botao--ativo { border-color: var(--verde); background-color: var(--verde-fundo); }
.cal__botao--ativo svg { color: var(--verde-escuro); }
.cal__texto { overflow: hidden; text-overflow: ellipsis; }
.cal__botao:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.cal__pop {
  position: fixed; z-index: 60; display: flex; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 30, 61, 0.16); padding: 12px;
}
.cal__pop[hidden] { display: none; }
.cal__atalhos { display: grid; align-content: start; gap: 2px; min-width: 130px; border-right: 1px solid var(--grade); padding-right: 10px; }
.cal__atalho {
  text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 0.88rem; color: var(--texto); cursor: pointer; white-space: nowrap;
}
.cal__atalho:hover { background: var(--neutro-fundo); }
.cal__atalho--ativo { background: var(--verde-fundo); color: var(--verde-escuro); font-weight: 600; }
.cal__atalho--limpar { color: var(--azul); margin-top: 6px; border-top: 1px solid var(--grade); border-radius: 0 0 8px 8px; }
.cal__atalho:focus-visible, .cal__nav:focus-visible, .cal__dia:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.cal__mes { display: grid; gap: 8px; width: 252px; }
.cal__cabecalho { display: flex; align-items: center; justify-content: space-between; }
.cal__titulo { font-weight: 700; color: var(--marinho); font-size: 0.95rem; }
.cal__nav {
  width: 30px; height: 30px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie);
  font-size: 1.1rem; line-height: 1; color: var(--texto); cursor: pointer;
}
.cal__nav:hover { background: var(--neutro-fundo); }
.cal__grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__semana { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--texto-suave); padding: 4px 0; }
.cal__dia {
  height: 34px; border: 0; border-radius: 8px; background: none; color: var(--texto);
  font: inherit; font-size: 0.86rem; cursor: pointer; font-variant-numeric: tabular-nums;
}
.cal__dia:hover { background: var(--neutro-fundo); }
.cal__dia--hoje { box-shadow: inset 0 0 0 1px var(--verde); font-weight: 700; }
.cal__dia--meio { background: var(--verde-fundo); border-radius: 0; }
.cal__dia--ponta, .cal__dia--ponta:hover { background: var(--verde); color: #fff; font-weight: 700; }
.cal__dica { margin: 0; font-size: 0.78rem; color: var(--texto-suave); }
@media (max-width: 640px) {
  .cal__pop { flex-direction: column; }
  .cal__atalhos { border-right: 0; border-bottom: 1px solid var(--grade); padding: 0 0 8px; grid-template-columns: repeat(2, 1fr); }
}

/* ===================== Menu lateral em grupos expansiveis ===================== */
.menu__itens { overflow-y: auto; }
.menu__grupo { display: grid; }
.menu__grupo-botao {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; border: 0; border-radius: 10px; background: transparent;
  color: var(--menu-texto); font: inherit; font-size: 0.98rem; font-weight: 600; text-align: left;
  cursor: pointer; white-space: nowrap;
}
.menu__grupo-botao svg { width: 20px; height: 20px; flex: none; }
.menu__grupo-botao .menu__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu__grupo-botao:hover { background: var(--menu-hover); }
.menu__grupo-botao:focus-visible { outline: 2px solid var(--menu-destaque); outline-offset: 2px; }
/* Grupo pai do item ativo: so o texto/icone em verde, sem fundo */
.menu__grupo--ativo > .menu__grupo-botao { color: var(--menu-ativo-texto); }
/* Seta gira ao abrir */
.menu__seta { display: inline-flex; flex: none; color: var(--menu-texto-suave); transition: transform var(--menu-transicao); }
.menu__seta svg { width: 16px; height: 16px; }
.menu__grupo--aberto .menu__seta { transform: rotate(90deg); }
/* Abre/fecha com animacao suave (altura 0 -> conteudo); fechado nao recebe foco do teclado */
.menu__subitens {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--menu-transicao), visibility var(--menu-transicao);
}
.menu__grupo--aberto .menu__subitens { grid-template-rows: 1fr; visibility: visible; }
.menu__subitens-dentro { overflow: hidden; min-height: 0; display: grid; gap: 2px; }
.menu__subitem { padding: 9px 12px 9px 26px; font-size: 0.9rem; margin-left: 8px; }
.menu__subitem svg { width: 17px; height: 17px; }
.menu__grupo + .menu__grupo { margin-top: 2px; }

/* Sidebar recolhida: so o icone do grupo (subitens no menu flutuante) */
.shell--recolhido .menu__grupo-botao { justify-content: center; padding: 12px 0; }
.shell--recolhido .menu__grupo-botao .menu__texto,
.shell--recolhido .menu__seta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.shell--recolhido .menu__subitens { display: none; }
.shell--recolhido .menu__grupo--ativo > .menu__grupo-botao { background: var(--menu-ativo-fundo); }
.menu-flutuante {
  position: fixed; z-index: 70; min-width: 210px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 30, 61, 0.16); padding: 8px; display: grid; gap: 2px;
}
.menu-flutuante[hidden] { display: none; }
.menu-flutuante__titulo {
  margin: 0; padding: 6px 10px 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texto-suave);
}
.menu-flutuante__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  color: var(--texto); text-decoration: none; font-size: 0.92rem; white-space: nowrap;
}
.menu-flutuante__item svg { width: 17px; height: 17px; flex: none; }
.menu-flutuante__item:hover { background: var(--menu-hover); }
.menu-flutuante__item--ativo, .menu-flutuante__item--ativo:hover { background: var(--menu-ativo-fundo); color: var(--menu-ativo-texto); font-weight: 700; }
.menu-flutuante__item:focus-visible { outline: 2px solid var(--menu-destaque); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .menu__seta, .menu__subitens { transition: none; }
}

/* ===================== Logo clicavel (vai para o Inicio) ===================== */
.menu__logo-link { display: flex; flex-direction: column; align-items: center; border-radius: 8px; cursor: pointer; transition: opacity 150ms ease; }
.menu__logo-link:hover { opacity: 0.75; }
.menu__logo-link:focus-visible { outline: 2px solid var(--menu-destaque); outline-offset: 4px; }

/* ===================== Pagina Inicio (hub) ===================== */
.inicio-topo { padding: 22px clamp(16px, 1.5vw, 28px); display: grid; gap: 4px; }
.inicio-topo__titulo { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; color: var(--marinho); }
.inicio-topo__data { color: var(--texto-suave); font-size: 0.95rem; }
.inicio-grupo { display: grid; gap: 12px; }
.inicio-grupo__titulo {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 0;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave);
}
.inicio-grupo__titulo svg { width: 18px; height: 18px; }
.inicio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.inicio-card {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  color: var(--texto); text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.inicio-card:hover { transform: translateY(-2px); border-color: var(--verde); box-shadow: 0 8px 24px rgba(15, 30, 61, 0.1); }
.inicio-card:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.inicio-card__icone {
  width: 2.8rem; height: 2.8rem; flex: none; border-radius: 10px;
  display: grid; place-items: center; background: var(--verde-fundo); color: var(--verde-escuro);
}
.inicio-card__icone svg { width: 1.35rem; height: 1.35rem; }
.inicio-card__textos { flex: 1; min-width: 0; display: grid; gap: 3px; }
.inicio-card__nome { font-weight: 700; color: var(--marinho); font-size: 1.02rem; }
.inicio-card__descricao { color: var(--texto-suave); font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inicio-card__seta { color: var(--texto-suave); display: inline-flex; flex: none; transition: transform 150ms ease, color 150ms ease; }
.inicio-card__seta svg { width: 18px; height: 18px; }
.inicio-card:hover .inicio-card__seta { color: var(--verde); transform: translateX(2px); }
/* 3 colunas em telas largas; com o menu aberto em notebook (ate 1399px) 2 colunas para a descricao caber em 1 linha */
@media (max-width: 1399px) { .inicio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .inicio-cards { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .inicio-card, .inicio-card__seta { transition: none; } }

/* ---------- Compras: Previsão de Entrega ---------- */
.selo-status--info { background: #e8f0fb; color: #1d4f91; }
.cp-selo { display: inline-flex; align-items: center; gap: 4px; }
.cp-selo svg { width: 13px; height: 13px; flex: none; }
.cp-tabela { font-size: 0.9rem; }
.cp-tabela th, .cp-tabela td { padding: 10px 6px; }
.cp-tabela td { white-space: nowrap; }
.cp-tabela .cp-c-produto { width: 36%; min-width: 240px; }
.cp-tabela td.cp-c-produto { white-space: normal; min-width: 150px; }
.cp-tabela .pv-c-forn { width: 125px; min-width: 110px; }
.cp-tabela td.pv-c-forn { white-space: normal; min-width: 110px; font-size: 0.82rem; }
.cp-tabela .cp-selo { padding: 3px 8px; }
.cp-tabela .pv-sub { font-size: 0.72rem; }
.cp-tabela .cp-c-saldo { font-weight: 700; color: var(--marinho); }
.cp-tabela .cp-c-cod { color: var(--texto-suave); }
.cp-un { font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); }
.cp-grupo-acoes { display: flex; gap: 8px; align-items: flex-end; }
.cp-grupo-acoes[hidden] { display: none; }
.cp-tabela > tbody > tr.cp-grupo > td { padding: 0; background: var(--fundo); border-bottom: 1px solid var(--borda); white-space: normal; }
.cp-grupo__botao {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 10px;
  border: 0; background: transparent; font: inherit; color: var(--texto); text-align: left; cursor: pointer;
}
.cp-grupo__botao:focus-visible { outline: 2px solid var(--marinho); outline-offset: -2px; }
.cp-grupo__seta svg { width: 16px; height: 16px; transition: transform 0.15s; display: block; }
.cp-grupo--aberto .cp-grupo__seta svg { transform: rotate(90deg); }
.cp-grupo__titulo { font-weight: 700; color: var(--marinho); }
.cp-grupo__sub { font-weight: 400; font-size: 0.85rem; color: var(--texto-suave); margin-left: 6px; }
.cp-grupo__info { font-size: 0.85rem; color: var(--texto-suave); }
.cp-grupo__selos { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 640px) {
  .cp-tabela td, .cp-tabela td.cp-c-produto, .cp-tabela td.pv-c-forn { white-space: normal; min-width: 0; width: 100%; }
  .cp-tabela .cp-v { display: inline-block; min-width: 0; text-align: right; }
  .cp-tabela td.cp-c-produto .cp-v { text-align: left; }
  .pv-tabela > tbody > tr.cp-grupo { border: 0; padding: 0; background: transparent; margin: 14px 0 8px; }
  .pv-tabela > tbody > tr.cp-grupo > td { display: block; padding: 0; border: 1px solid var(--borda); border-radius: 10px; }
  .pv-tabela > tbody > tr.cp-grupo > td::before { content: none; }
  .cp-grupo__selos { margin-left: 0; }
  .cp-grupo-acoes { flex: 1 1 100%; }
}
/* Portal: filtro escondido (ex.: Periodo na sub-aba Previsao de entrega) */
.pv-topo .filtro[hidden] { display: none; }
@media (max-width: 640px) {
  #cp .inad-ferramentas > .filtro, #cp .inad-ferramentas > .cal { flex: 1 1 100%; max-width: none; min-width: 0; }
}

/* ---------- Portal do Vendedor > Comissões: calendário ---------- */
.cc-txt-verde { color: var(--verde-escuro); font-weight: 700; }
.cc-txt-vermelho { color: var(--baixa); font-weight: 700; }
.cc-nav { display: flex; align-items: center; gap: 8px; }
.cc-nav__mes { min-width: 10.5em; text-align: center; color: var(--marinho); font-size: 1rem; }
.cc-nav__botao {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie);
  font-size: 1.3rem; line-height: 1; color: var(--marinho); cursor: pointer;
}
.cc-nav__botao:hover:not(:disabled) { background: var(--fundo); }
.cc-nav__botao:disabled { opacity: 0.35; cursor: default; }
.cc-nav__botao:focus-visible, .cc-dia:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.cc-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.82rem; color: var(--texto-suave); margin: -4px 0 12px; }
.cc-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cc-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cc-ponto--verde { background: var(--verde); }
.cc-ponto--vermelho { background: var(--baixa); }
.cc-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cc-dias { display: contents; }
.cc-semana { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); text-align: center; padding-bottom: 2px; }
.cc-dia {
  min-height: 88px; padding: 8px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie);
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; font: inherit; color: var(--texto);
}
.cc-dia--vazio { border: 0; background: transparent; }
.cc-dia:disabled { cursor: default; }
.cc-dia--com { cursor: pointer; }
.cc-dia--com:hover { border-color: var(--grade-forte); box-shadow: var(--sombra); }
.cc-dia--futuro { background: var(--fundo); }
.cc-dia--hoje { border-color: var(--verde); }
.cc-dia--hoje .cc-dia__num { background: var(--verde); color: #fff; }
.cc-dia--ativo { border-color: var(--marinho); box-shadow: 0 0 0 2px var(--marinho) inset; }
.cc-dia__num { align-self: flex-start; font-size: 0.8rem; font-weight: 700; color: var(--texto-suave); min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 11px; }
.cc-valor { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.cc-valor--verde { color: var(--verde-escuro); }
.cc-valor--vermelho { color: var(--baixa); }
.cc-valor__curto { display: none; }
.cc-tabela .cc-linha--comprometida > td { background: var(--baixa-fundo); }
.cc-tabela .cc-linha--comprometida > td:first-child { box-shadow: inset 3px 0 0 var(--baixa); }
@media (max-width: 1180px) {
  .cc-valor__cheio { display: none; }
  .cc-valor__curto { display: inline; }
}
@media (max-width: 640px) {
  .cc-grade { gap: 3px; }
  .cc-dia { min-height: 52px; padding: 4px 2px; align-items: center; gap: 3px; border-radius: 8px; }
  .cc-dia__num { align-self: center; font-size: 0.75rem; }
  .cc-valor { justify-content: center; }
  .cc-valor__curto, .cc-valor__cheio { display: none; }
  .cc-ponto { width: 7px; height: 7px; }
  .cc-nav__mes { min-width: 0; font-size: 0.92rem; }
  .cc-tabela > tbody > tr.cc-linha--comprometida { background: var(--baixa-fundo); border-color: #f3b8b2; }
  .cc-tabela > tbody > tr.cc-linha--comprometida > td { background: transparent; box-shadow: none; }
}
.cc-tabela .cc-c-titulo { white-space: nowrap; }

/* Portal do Vendedor > Clientes: detalhe do cliente (quadros alinhados, sem valores cortados) */
.pv-det .pv-det__grade { align-items: start; }
.pv-det .com-det__bloco { align-content: start; }
.pv-det .com-det__resumo.pv-det__resumo { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); background: var(--superficie); }
.pv-det .pv-det__resumo > .com-det__info { box-shadow: 1px 0 0 var(--borda), 0 1px 0 var(--borda); }
@media (max-width: 640px) {
  .pv-det .com-det__resumo.pv-det__resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Portal: tabelas largas rolam dentro do card (sem empurrar a pagina para o lado) */
.pv-aba-conteudo, .pv-aba-conteudo > *, .pv-aba-conteudo .painel, .pv-aba-conteudo .painel > * { min-width: 0; max-width: 100%; }
.pv-tabela-rolagem { position: relative; }
/* Detalhe expandido: fica na largura visivel do card, mesmo com a tabela rolando de lado */
@media (min-width: 641px) {
  .pv-tabela > tbody > tr.inad-detalhe > td > * { position: sticky; left: 12px; box-sizing: border-box; width: calc(var(--pv-visivel, 100%) - 24px); }
}

/* Portal > Oportunidades: raio-x do cliente (linha expandida) */
.ox-insight { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--azul-fundo); color: var(--azul-texto); line-height: 1.55; font-size: 0.92rem; }
.ox-produtos td { vertical-align: top; }
.ox-produtos td:not(:first-child) { white-space: nowrap; }
.ox-produtos .ox-linha--oferecer > td { background: #fff8ec; }
.ox-produtos .selo-status { padding: 1px 8px; font-size: 0.7rem; margin-left: 4px; }
.ox-produtos td:first-child { min-width: 200px; }
.ox-produtos th, .ox-produtos td { padding-left: 8px; padding-right: 8px; }
@media (max-width: 1366px) { .ox-produtos td:first-child { min-width: 170px; } }
/* Celular: cada produto vira um card (rotulo a esquerda, valor a direita) */
@media (max-width: 640px) {
  .ox-produtos, .ox-produtos > tbody, .ox-produtos > tbody > tr, .ox-produtos > tbody > tr > td { display: block; width: 100%; }
  .ox-produtos > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ox-produtos > tbody > tr { border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 8px; padding: 6px 10px; background: var(--superficie); }
  .ox-produtos > tbody > tr + tr td { border-top: 0; }
  .ox-produtos > tbody > tr > td { padding: 4px 0; text-align: right; white-space: normal; min-width: 0; }
  .ox-produtos > tbody > tr > td::before { content: attr(data-rotulo); float: left; margin-right: 10px; color: var(--texto-suave); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.7; }
  .ox-produtos > tbody > tr > td:first-child { display: block; text-align: left; font-weight: 600; color: var(--marinho); }
  .ox-produtos > tbody > tr > td:first-child::before { content: none; }
  .ox-produtos > tbody > tr > td:nth-child(6) { display: block; }
  .ox-produtos .pv-sub { display: inline; margin-left: 6px; }
}
@media (max-width: 1366px) { .ox-produtos th:nth-child(6), .ox-produtos td:nth-child(6) { display: none; } }

/* ---------- Comercial > Gestão de Pedidos (estilo rotina 336) ---------- */
:root {
  --gp-azul: #1f5fd6; --gp-azul-fundo: #eaf1fe; --gp-azul-sel: #d3e2fc;
  --gp-verm: #c0261b; --gp-verm-fundo: #fdeeed; --gp-verm-sel: #f9d6d3;
  --gp-lar: #d26a00; --gp-lar-fundo: #fff3e4; --gp-lar-sel: #ffe2bf;
  --gp-mon: #5b6478; --gp-mon-fundo: #f3f4f7; --gp-mon-sel: #e2e5ec;
}
.gp-topo { padding-block: 14px; }
.gp-filtros { padding: 14px 16px; display: grid; gap: 12px; }
.gp-filtros__linha { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.gp-filtros__linha--pos { justify-content: flex-start; }
.gp-filtros .filtro { min-width: 0; }
.gp-filtros .filtro select, .gp-campo input, .gp-faixa input {
  height: 40px; border: 1px solid var(--borda); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 0.92rem; background: var(--superficie); color: var(--texto); /* = .filtro */
}
.gp-filtros .filtro > select { min-width: 130px; }
.gp-campo input { width: 120px; }
.gp-campo--curto input { width: 104px; }
.gp-campo--largo input { width: 220px; }
.gp-faixa__campos { display: flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: 0.85rem; }
.gp-faixa input { width: 92px; }
.gp-campo input:focus-visible, .gp-faixa input:focus-visible, .gp-filtros select:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.gp-avancados { padding-top: 10px; border-top: 1px dashed var(--borda); }
.gp-avancados[hidden] { display: none; }
.gp-posicoes { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-pos {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--superficie); font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--texto); cursor: pointer;
}
.gp-pos i { width: 10px; height: 10px; border-radius: 50%; }
.gp-pos--l i { background: var(--gp-azul); }
.gp-pos--b i { background: var(--gp-verm); }
.gp-pos--p i { background: var(--gp-lar); }
.gp-pos--m i { background: var(--gp-mon); }
.gp-pos--ativo { border-color: var(--marinho); background: var(--marinho); color: #fff; }
.gp-pos--l.gp-pos--ativo { background: var(--gp-azul); border-color: var(--gp-azul); }
.gp-pos--b.gp-pos--ativo { background: var(--gp-verm); border-color: var(--gp-verm); }
.gp-pos--p.gp-pos--ativo { background: var(--gp-lar); border-color: var(--gp-lar); }
.gp-pos--m.gp-pos--ativo { background: var(--gp-mon); border-color: var(--gp-mon); }
.gp-pos--ativo i { background: #fff; }
.gp-pos:focus-visible, .gp-ordem:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.gp-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.gp-resumo { display: flex; flex-wrap: wrap; gap: 8px; }
/* Aviso discreto: pedidos que a 336 nao mostra (cliente com praca inexistente) */
.gp-aviso { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 0; font-size: 0.82rem; color: #8a4b00; }
.gp-aviso[hidden] { display: none; }
.gp-aviso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.gp-chip {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 10px; background: var(--superficie);
  border: 1px solid var(--borda); font-size: 0.82rem; color: var(--texto-suave); box-shadow: var(--sombra);
}
.gp-chip strong { color: var(--marinho); font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.gp-chip--l { border-left: 4px solid var(--gp-azul); }
.gp-chip--l strong { color: var(--gp-azul); }
.gp-chip--b { border-left: 4px solid var(--gp-verm); }
.gp-chip--b strong { color: var(--gp-verm); }
.gp-chip--p { border-left: 4px solid var(--gp-lar); }
.gp-chip--p strong { color: var(--gp-lar); }
.gp-chip--m { border-left: 4px solid var(--gp-mon); }
.gp-painel { padding: 0; overflow: hidden; min-width: 0; }
.gp-grade { height: clamp(300px, 52vh, 900px); overflow: auto; resize: vertical; position: relative; outline: none; }
.gp-grade:focus-visible { box-shadow: inset 0 0 0 2px var(--marinho); }
.gp-grade--itens { height: clamp(160px, 26vh, 600px); border-top: 1px solid var(--borda); }
.gp-tabela { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.gp-tabela th {
  position: sticky; top: 0; z-index: 2; background: #f6f7fa; border-bottom: 1px solid var(--grade-forte); border-right: 1px solid var(--grade);
  padding: 0; text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--texto-suave); height: 34px;
}
.gp-tabela th.num { text-align: right; }
.gp-ordem, .gp-th {
  display: flex; align-items: center; gap: 4px; width: 100%; height: 100%; padding: 6px 8px; border: 0; background: transparent;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; overflow: hidden;
}
.gp-th { cursor: default; }
.gp-tabela th.num .gp-ordem, .gp-tabela th.num .gp-th { justify-content: flex-end; }
.gp-ordem__seta { font-size: 0.6rem; }
.gp-tabela th[aria-sort="ascending"], .gp-tabela th[aria-sort="descending"] { color: var(--marinho); background: #eceff5; }
.gp-redim { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; }
.gp-redim:hover, .gp-redim--ativo { background: var(--azul-claro); }
.gp-tabela td {
  padding: 6px 8px; border-bottom: 1px solid var(--grade); border-right: 1px solid rgba(15, 30, 61, 0.04);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto); background: var(--superficie);
}
.gp-tabela td.num { text-align: right; }
.gp-msg { text-align: center !important; color: var(--texto-suave) !important; padding: 28px 8px !important; white-space: normal !important; }
.gp-sem { color: #b3b9c6; }
.gp-linha { cursor: pointer; }
/* Linhas sempre brancas (a cor do status fica so no selo da coluna Posicao); hover e selecao em cinza neutro */
.gp-linha:hover > td { background: var(--gp-linha-hover); }
.gp-linha--sel > td { border-top: 1px solid var(--marinho); border-bottom: 1px solid var(--marinho); font-weight: 600; }
.gp-linha--sel > td, .gp-linha--sel:hover > td { background: var(--gp-linha-sel); }
.gp-selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; color: #fff; letter-spacing: 0.02em; }
.gp-selo--l { background: var(--gp-azul); }
.gp-selo--b { background: var(--gp-verm); }
.gp-selo--p { background: var(--gp-lar); }
.gp-selo--m { background: var(--gp-mon); }
.gp-paginas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 8px 12px; border-top: 1px solid var(--borda); font-size: 0.84rem; color: var(--texto-suave); }
.gp-paginas__nav { display: flex; align-items: center; gap: 8px; }
.gp-paginas .gp-botao { height: 30px; padding: 0 10px; }
.gp-porpagina { display: inline-flex; align-items: center; gap: 6px; }
.gp-porpagina select { height: 30px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; }
.gp-itens__topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 14px; }
.gp-itens__titulo { margin: 0; font-size: 0.98rem; color: var(--marinho); display: flex; align-items: center; gap: 8px; }
.gp-itens__sub { font-size: 0.84rem; color: var(--texto-suave); }
/* Sub-abas do bloco "Itens do pedido": Itens | Faltas | Cortes (contador laranja = falta, vermelho = corte, cinza = 0) */
.gp-subabas { display: inline-flex; gap: 6px; margin-left: auto; }
.gp-subaba {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--superficie); font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--texto); cursor: pointer;
}
.gp-subaba:hover { background: var(--neutro-fundo); }
.gp-subaba--ativa { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.gp-subaba:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.gp-contador { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--neutro-fundo); color: var(--texto-suave); font-size: 0.76rem; font-weight: 700; text-align: center; }
.gp-contador--faltas { background: #fff1e0; color: #b45309; }
.gp-contador--cortes { background: var(--baixa-fundo); color: var(--baixa); }
.gp-subaba--ativa .gp-contador { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.gp-total-linha td { font-weight: 600; background: var(--neutro-fundo); }
.gp-item--falta > td { background: var(--gp-lar-fundo); }
.gp-falta { color: var(--gp-lar); font-weight: 700; }
.gp-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 10px 14px; font-size: 0.84rem; color: var(--texto-suave); }
.gp-rodape strong { color: var(--marinho); font-variant-numeric: tabular-nums; }
.gp-legenda { display: flex; gap: 14px; flex-wrap: wrap; }
.gp-legenda span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.gp-ponto { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.gp-ponto--l { background: var(--gp-azul); }
.gp-ponto--b { background: var(--gp-verm); }
.gp-ponto--p { background: var(--gp-lar); }
.gp-ponto--m { background: var(--gp-mon); }
.gp-rodape__totais { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.gp-rodape__sel { padding-left: 16px; border-left: 2px solid var(--borda); }
@media (max-width: 640px) {
  .gp-campo input, .gp-campo--largo input, .gp-filtros .filtro > select { width: 100%; }
  .gp-filtros .filtro, .gp-filtros .gp-campo, .gp-filtros .cal { flex: 1 1 100%; max-width: none; }
  .gp-faixa input { width: 100%; }
  .gp-filtros #gp-rca { max-width: none; }
  .gp-grade { height: 60vh; }
  .gp-rodape__sel { padding-left: 0; border-left: 0; }
}
.gp-filtros .gp-filtro-pos { flex: 1 1 auto; max-width: none; }
.gp-filtros__linha--pos .gp-acoes { margin-left: auto; }
.gp-posicoes { flex-wrap: wrap; }
.gp-campo--largo input { width: 190px; }
.gp-filtros #gp-rca { max-width: 230px; }
@media (max-width: 640px) { .gp-campo--largo input, .gp-filtros #gp-rca { width: 100%; max-width: none; } }

/* ---------- Portal do Vendedor > Alertas ---------- */
.pv-aba__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; background: var(--baixa); color: #fff; font-size: 0.72rem; font-weight: 800; vertical-align: 2px;
  box-shadow: 0 0 0 2px var(--superficie);
}
.pv-aba__badge[hidden] { display: none; }
.al-ferramentas { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.al-ferramentas .pv-chips { flex: 1 1 auto; }
.al-chip-cn span { color: var(--baixa); }
.al-lista { display: grid; gap: 12px; }
.al-card {
  position: relative; background: var(--superficie); border: 1px solid var(--borda); border-left: 5px solid var(--texto-suave);
  border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px;
}
.al-card--cn { border-left-color: var(--baixa); }
.al-card--cb { border-left-color: #d26a00; }
.al-card--pb { border-left-color: #b58300; }
.al-card--pa { border-left-color: var(--azul-texto, #1d4f91); }
/* Corte e falta no pedido: os itens afetados numa tabela dentro do cartao */
.al-card--ct { border-left-color: var(--baixa); }
.al-card--ft { border-left-color: #b58300; }
.al-card--ct .al-tipo { color: var(--baixa); }
.al-card--ft .al-tipo { color: #8a6400; }
.al-itens { overflow-x: auto; margin: 2px 0; }
.al-itens .com-det__itens-tabela { width: 100%; }
.al-card--novo { box-shadow: 0 0 0 1px rgba(180, 35, 24, 0.25), var(--sombra); }
.al-card--novo.al-card--cn { background: #fff8f7; }
.al-card--lido { opacity: 0.86; }
.al-card__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.al-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave); }
.al-tipo svg { width: 16px; height: 16px; }
.al-card--cn .al-tipo { color: var(--baixa); }
.al-card--cb .al-tipo { color: #b45a00; }
.al-card--pb .al-tipo { color: #8a6400; }
.al-card--pa .al-tipo { color: var(--azul-texto, #1d4f91); }
.al-novo { padding: 2px 8px; border-radius: 999px; background: var(--baixa); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.al-origem { margin-left: auto; font-size: 0.78rem; color: var(--texto-suave); }
.al-card__corpo { display: grid; gap: 4px; }
.al-linha { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 0.92rem; }
.al-rotulo { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.al-cod { color: var(--texto-suave); font-weight: 400; }
.al-fantasia { display: block; font-size: 0.8rem; color: var(--texto-suave); }
.al-valor { color: var(--baixa); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.al-just { display: grid; gap: 6px; }
.al-just__texto {
  margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--fundo); border-left: 3px solid var(--grade-forte);
  font-size: 0.98rem; font-weight: 600; color: var(--texto); white-space: pre-wrap; overflow-wrap: anywhere;
}
.al-card--cn .al-just__texto { background: #fdecea; border-left-color: var(--baixa); }
.al-card__rodape { display: flex; justify-content: flex-end; }
.al-lido { font-size: 0.82rem; color: var(--verde-escuro); font-weight: 700; }
@media (max-width: 640px) {
  .al-linha { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .al-origem { margin-left: 0; flex: 1 1 100%; }
  .al-ferramentas .filtro { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 1366px) { .cp-tabela .cp-c-produto { width: 28%; min-width: 190px; } }

/* Gestao de Pedidos: faturados (verde) e colunas de NF/carregamento/canhoto */
:root { --gp-ver: #0e8a5a; --gp-ver-fundo: #eaf7f0; --gp-ver-sel: #cdeedd; }
.gp-pos--f i { background: var(--gp-ver); }
.gp-pos--f.gp-pos--ativo { background: var(--gp-ver); border-color: var(--gp-ver); }
.gp-pos--tudo.gp-pos--ativo { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.gp-chip--f { border-left: 4px solid var(--gp-ver); }
.gp-chip--f strong { color: var(--gp-ver); }
.gp-selo--f { background: var(--gp-ver); }
.gp-ponto--f { background: var(--gp-ver); }
.gp-selo-mini { padding: 1px 7px; font-size: 0.68rem; margin-left: 4px; }
.gp-tabela td .gp-selo-mini:first-child { margin-left: 0; }

/* ===================== Portal do Vendedor > Inteligencia Geografica ===================== */
:root {
  /* Situacao comercial no mapa (verde / amarelo / vermelho / cinza: ordem e significado fixos) */
  --geo-ativo: #0e8a5a;
  --geo-quase: #e0a100;
  --geo-inativo: #c8414f;
  --geo-sem: #8a93a6;
  /* Oportunidades de prospeccao (nao sao clientes): azul; indisponivel por vinculo com cliente TW: cinza escuro */
  --geo-oport: #2f6fe0;
  --geo-vinculo: #5b6478;
  /* Painel Comercial: oportunidade na SUA lista de prospeccao = roxo, em destaque (27/10/2026). A de OUTRO vendedor nao aparece mais
     no mapa (prazo de 15 dias). O mapa base e claro nos temas: cores fixas */
  --geo-prosp-minha: #7b3fe4;
  --geo-prosp-outro: #d4961c;
}
.geo { display: grid; gap: var(--gap); }
.geo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 12px; }
.geo-card {
  display: grid; gap: 4px; align-content: start; text-align: left;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px;
  box-shadow: var(--sombra); font: inherit; color: var(--texto);
}
button.geo-card { cursor: pointer; }
button.geo-card:hover { border-color: var(--grade-forte); }
button.geo-card:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.geo-card--ativo { border-top: 4px solid var(--geo-ativo); }
.geo-card--quase { border-top: 4px solid var(--geo-quase); }
.geo-card--inativo { border-top: 4px solid var(--geo-inativo); }
.geo-card--sem-compra { border-top: 4px solid var(--geo-sem); }
.geo-card--oport { border-top: 4px dashed var(--geo-oport); }
.geo-card--vinculo { border-top: 4px dashed var(--geo-vinculo); }
.geo-card--desligado { opacity: 0.45; }
.geo-card__rotulo { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.geo-card__valor { font-size: 1.6rem; font-weight: 800; color: var(--marinho); font-variant-numeric: tabular-nums; }
.geo-card__nota { font-size: 0.8rem; color: var(--texto-suave); }
.geo-ponto { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--grade-forte); flex: none; }
.geo-ponto--ativo { background: var(--geo-ativo); }
.geo-ponto--quase { background: var(--geo-quase); }
.geo-ponto--inativo { background: var(--geo-inativo); }
.geo-ponto--sem-compra { background: var(--geo-sem); }
.geo-ponto--grupo { background: var(--marinho); width: 14px; height: 14px; }
.geo-ponto--oport { background: var(--geo-oport); }
.geo-ponto--vinculo { background: var(--geo-vinculo); }
.geo-ponto--prosp-minha { background: var(--geo-prosp-minha); width: 14px; height: 14px; box-shadow: 0 0 0 2px #14284b; }
.geo-legenda__destaque { font-weight: 700; }
.geo-ponto--prosp-outro { background: var(--geo-prosp-outro); }
.geo-ferramentas .filtro:not(.inad-busca) { min-width: 170px; max-width: 220px; }
.geo-perto { align-self: flex-end; }
.geo-perto[aria-pressed="true"] { background: var(--azul-fundo); border-color: var(--geo-oport); color: var(--azul-texto); }
.geo-aviso-zoom {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; margin: 0; padding: 6px 12px;
  font-size: 0.8rem; font-weight: 600; color: var(--azul-texto); background: var(--azul-fundo);
  border: 1px solid var(--geo-oport); border-radius: 999px; box-shadow: var(--sombra); white-space: nowrap;
}
.geo-mapa-caixa { position: relative; }
.geo-mapa { height: 560px; border-radius: 12px; overflow: hidden; border: 1px solid var(--borda); background: #eef0f4; }
.geo-legenda {
  position: absolute; left: 10px; top: 10px; z-index: 2; margin: 0; padding: 8px 10px; list-style: none;
  display: grid; gap: 4px; font-size: 0.78rem; color: var(--texto);
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra);
}
.geo-legenda li { display: flex; align-items: center; gap: 6px; }
/* Seta no canto direito: recolhe a legenda (so a primeira linha) e expande de novo */
.geo-legenda { padding-right: 38px; }
.geo-legenda__alternar { position: absolute; top: 4px; right: 4px; }
.geo-legenda__seta {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--texto-suave);
}
.geo-legenda__seta:hover { background: var(--neutro-fundo); color: var(--texto); }
.geo-legenda__seta:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.geo-legenda__seta svg { transition: transform 0.15s ease; }
.geo-legenda--recolhida .geo-legenda__seta svg { transform: rotate(180deg); }
.geo-legenda--recolhida li:not(.geo-legenda__alternar):not(:nth-child(2)) { display: none; }
@media (prefers-reduced-motion: reduce) { .geo-legenda__seta svg { transition: none; } }
.geo-fonte { font-size: 0.78rem; color: var(--texto-suave); margin-top: 8px; }
/* Filtro por tipo de estabelecimento (CNAE principal): chips com contador, filtros ativos e limpar */
.geo-tipos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 6px; }
.geo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.geo-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; min-height: 32px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda);
}
.geo-chip:hover { border-color: var(--marinho); }
.geo-chip:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.geo-chip__n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.geo-chip--ativo { background: var(--marinho); border-color: var(--marinho); color: var(--superficie); }
.geo-chip--ativo .geo-chip__n { color: inherit; opacity: 0.85; }
.geo-filtros-ativos { margin: 0 0 8px; font-size: 0.8rem; color: var(--texto-suave); }
.geo-pop__prosp { display: inline-block; }
/* Botao de oportunidades dentro do mapa (ao lado do zoom e da tela cheia) */
/* (o mapa base e claro nos dois temas: cores fixas; seletor mais forte que o do proprio MapLibre) */
.maplibregl-ctrl-group .geo-ctrl-oport { display: grid; place-items: center; color: #1f2a44; }
.maplibregl-ctrl-group .geo-ctrl-oport svg { width: 18px; height: 18px; }
.maplibregl-ctrl.maplibregl-ctrl-group button.geo-ctrl-oport--ligado:not(:disabled), .maplibregl-ctrl.maplibregl-ctrl-group button.geo-ctrl-oport--ligado:not(:disabled):hover { background-color: var(--geo-oport, #2f6fe0); color: #fff; }
.geo-pop__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* "Ver fachada (Street View)": link discreto para o Google Maps (components/fachada.js), no mapa, no detalhe do cliente e na Prospeccao */
.fachada-botao { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.fachada-botao svg { width: 16px; height: 16px; flex: none; }
.geo-pop--op .geo-pop__rodape .fachada-botao { justify-self: start; }
.fachada-botao--linha { display: flex; width: max-content; margin-top: 6px; height: 28px; padding: 0 10px; font-size: 0.8rem; }
.pv-det__fachada { margin-top: 8px; }
.pv-endereco { margin: 6px 0 0; }
/* O popup nunca passa da altura do mapa (o X de fechar nao pode ficar cortado): se passar, rola dentro dele */
.geo-mapa .maplibregl-popup-content { max-height: 460px; overflow-y: auto; }
@media (max-width: 700px) { .geo-mapa .maplibregl-popup-content { max-height: 330px; } }
.geo-mapa-caixa--cheia .geo-mapa .maplibregl-popup-content { max-height: calc(100vh - 120px); }
/* Lista de prospeccao (sub-aba Prospeccao e botoes na carteira): selecao em lote, mensagens e edicao na linha */
.pro-lote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--verde); border-radius: 10px; background: var(--verde-fundo); font-weight: 600; }
.pro-msg { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--neutro-fundo); color: var(--texto); font-size: 0.88rem; }
.pro-msg--erro { background: var(--baixa-fundo); color: var(--baixa); }
.pro-lote[hidden], .pro-msg[hidden], .pro [hidden] { display: none; }
.pro-sel { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pro-sel input { width: 16px; height: 16px; accent-color: var(--verde); }
.pv-c-prosp { white-space: nowrap; }
.pro-tabela td { vertical-align: top; }
.pro-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pro-conversao { display: block; margin-top: 4px; white-space: nowrap; }
.pro-campo { font: inherit; font-size: 0.85rem; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 5px 8px; min-height: 34px; max-width: 100%; }
.pro-campo:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.pro-obs { width: 100%; min-width: 180px; }
.pro-status { font-weight: 700; }
.pro-status--convertido, .pro-selo--convertido { background: var(--verde-fundo); color: var(--verde-escuro); }
.pro-status--descartado, .pro-selo--descartado { background: var(--neutro-fundo); color: var(--texto-suave); }
.pro-status--em_negociacao, .pro-selo--em_negociacao { background: #fff4e5; color: #8a4b00; }
.pro-status--contatado, .pro-selo--contatado { background: #e8f0fb; color: #1d4f91; }
.pro-linha--vencida td:first-child { box-shadow: inset 3px 0 0 var(--baixa); }
.geo-selo { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.geo-selo--ativo { background: var(--verde-fundo); color: var(--verde-escuro); }
.geo-selo--quase { background: #fff4e5; color: #8a4b00; }
.geo-selo--inativo { background: var(--baixa-fundo); color: var(--baixa); }
.geo-selo--sem-compra, .geo-selo--bloq { background: var(--neutro-fundo); color: var(--texto-suave); }
.geo-selo--oport { background: var(--azul-fundo); color: var(--azul-texto); }
.geo-selo--vinculo { background: var(--neutro-fundo); color: var(--geo-vinculo); white-space: normal; }
.geo-pop { display: grid; gap: 6px; font-family: var(--fonte); color: var(--texto); }
.geo-pop__titulo { font-weight: 700; color: var(--marinho); font-size: 0.95rem; }
.geo-pop__sub { font-size: 0.82rem; color: var(--texto-suave); margin-top: -4px; }
.geo-pop__selos { display: flex; gap: 6px; flex-wrap: wrap; }
.geo-pop__linha { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 8px; font-size: 0.82rem; }
.geo-pop__linha > span { color: var(--texto-suave); }
.geo-pop__linha > strong { font-weight: 500; }
.geo-pop__nota { font-size: 0.74rem; color: var(--texto-suave); font-weight: 400; }
.geo-pop__botao { justify-self: start; text-decoration: none; height: 32px; }
.maplibregl-popup-content { border-radius: 12px; padding: 14px 16px; box-shadow: 0 12px 32px rgba(15, 30, 61, 0.18); }
@media (max-width: 700px) {
  .geo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geo-mapa { height: 420px; }
  .geo-legenda { position: relative; margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================== TESTE D: Light/Dark + layout com barra superior (inicio) ===================== */
/* Fontes originais mantidas. Tema pelo atributo data-tema em <html> (script no <head> de index.html e login.html). */
:root:is([data-tema="claro"], [data-tema="cinza"]) { color-scheme: light; --fundo: #ffffff; --borda: #dfe2e8; --sombra: none; --raio: 10px; }
/* Tema Gray (27/10/2026): claro em tons de cinza no lugar do branco. Usa TODOS os ajustes do Light (seletores
   :is([data-tema="claro"], [data-tema="cinza"])) e troca so a paleta de fundo, superficie, menu e bordas. Texto, verde, vermelho e
   amarelo dos numeros e selos sao os do Light. */
:root[data-tema="cinza"] {
  --fundo: #e4e6ea; --superficie: #f2f3f5; --borda: #c9cdd4;
  --neutro-fundo: #e2e4e8; --grade: #dfe2e6; --grade-forte: #c4c9d1; --trilho: #d9dce1;
  --menu-fundo: #dcdfe4; --menu-borda: #c9cdd4; --menu-hover: #cfd3da;
}
:root:is([data-tema="escuro"], [data-tema="navy"]) {
  color-scheme: dark;
  --fundo: #000000; --superficie: #0b0c0e; --borda: #2a2c31;
  --texto: #f1f2f4; --texto-suave: #a6abb5;
  --verde: #3ddc97; --verde-escuro: #4fe0a4; --verde-fundo: rgba(61, 220, 151, 0.14);
  --verde-area-forte: rgba(61, 220, 151, 0.28); --verde-area-fraca: rgba(61, 220, 151, 0.02);
  --azul: #6ea2ff; --azul-claro: #3d5f9f; --azul-fundo: rgba(110, 162, 255, 0.15); --azul-texto: #c3d6ff;
  --baixa: #ff8179; --baixa-fundo: rgba(255, 129, 121, 0.15);
  --neutro-fundo: #17181c; --grade: #1b1c21; --grade-forte: #2e3036; --trilho: #1e1f24;
  --sombra: none; --raio: 10px; --marinho: #f1f2f4;
  --menu-fundo: #000000; --menu-borda: #2a2c31; --menu-hover: #17181c;
  --linha-inad: #6ea2ff; --tend-boa: #3ddc97; --tend-ruim: #ff8179;
  --prazo-vencido: #ff7a86; --prazo-30: #6ea2ff; --prazo-60: #f2b73c; --prazo-90: #4cc3ff;
  --gp-azul: #6ea2ff; --gp-azul-fundo: rgba(110, 162, 255, 0.12); --gp-azul-sel: rgba(110, 162, 255, 0.24);
  --gp-verm: #ff8179; --gp-verm-fundo: rgba(255, 129, 121, 0.12); --gp-verm-sel: rgba(255, 129, 121, 0.24);
  --gp-lar: #f2a03c; --gp-lar-fundo: rgba(242, 160, 60, 0.12); --gp-lar-sel: rgba(242, 160, 60, 0.24);
  --gp-mon: #a6abb5; --gp-mon-fundo: rgba(166, 171, 181, 0.1); --gp-mon-sel: rgba(166, 171, 181, 0.22);
}
.gp-sem { color: var(--texto-suave); }
/* Tema Navy (27/10/2026): escuro azulado, com o azul marinho da marca (#14284b). Usa TODOS os ajustes do Dark (seletores
   :is([data-tema="escuro"], [data-tema="navy"])) e troca so a paleta de fundo, superficie, borda e texto. Verde, vermelho,
   amarelo e azul dos numeros e selos sao os do Dark. */
:root[data-tema="navy"] {
  --fundo: #0b1630; --superficie: #12223f; --borda: #23365a;
  --texto: #eef2fa; --texto-suave: #a9b6cf; --marinho: #eef2fa;
  --neutro-fundo: #1a2c4d; --grade: #1a2b4a; --grade-forte: #2a4068; --trilho: #1c2f52;
  --menu-fundo: #0a1428; --menu-borda: #23365a; --menu-hover: #1a2c4d;
  --gp-mon: #a9b6cf; --gp-mon-fundo: rgba(169, 182, 207, 0.1); --gp-mon-sel: rgba(169, 182, 207, 0.22);
}
:root:is([data-tema="escuro"], [data-tema="navy"]) { --gp-ver: #3ddc97; --gp-ver-fundo: rgba(61, 220, 151, 0.12); --gp-ver-sel: rgba(61, 220, 151, 0.24); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .gp-selo { color: #000; }
body { transition: background-color 160ms ease, color 160ms ease; }
.card { box-shadow: none; }

/* Seletor de tema: icone que abre a lista Light / Gray / Dark / Navy (public/js/components/seletorTema.js) */
.tema { position: relative; display: inline-flex; }
.tema__botao {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto-suave); cursor: pointer;
}
.tema__botao svg { width: 18px; height: 18px; }
.tema__botao:hover, .tema__botao[aria-expanded="true"] { color: var(--texto); }
.tema__lista {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 130px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.tema__lista[hidden] { display: none; }
.tema__opcao {
  font: inherit; font-size: 0.85rem; font-weight: 600; text-align: left; padding: 6px 10px 6px 28px; border: 0; border-radius: 6px;
  background: transparent; color: var(--texto-suave); cursor: pointer; min-height: 30px; position: relative;
}
.tema__opcao:hover { background: var(--neutro-fundo); color: var(--texto); }
.tema__opcao[aria-checked="true"] { color: var(--texto); }
.tema__opcao[aria-checked="true"]::before { content: "✓"; position: absolute; left: 10px; color: var(--verde); }
.tema__botao:focus-visible, .tema__opcao:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.tema--login { position: fixed; top: 16px; right: 16px; }

/* Botao primario: verde com texto legivel nos dois temas */
:root:is([data-tema="escuro"], [data-tema="navy"]) .botao--primario, :root:is([data-tema="escuro"], [data-tema="navy"]) .gp-botao:not(.gp-botao--leve),
:root:is([data-tema="escuro"], [data-tema="navy"]) .acesso__botao, :root:is([data-tema="escuro"], [data-tema="navy"]) .usu-botao--primario,
:root:is([data-tema="escuro"], [data-tema="navy"]) .cal__dia--ponta, :root:is([data-tema="escuro"], [data-tema="navy"]) .cal__dia--ponta:hover,
:root:is([data-tema="escuro"], [data-tema="navy"]) .cc-dia--hoje .cc-dia__num { background: var(--verde); border-color: var(--verde); color: #04140c; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .botao--primario:hover:not(:disabled), :root:is([data-tema="escuro"], [data-tema="navy"]) .acesso__botao:hover:not(:disabled),
:root:is([data-tema="escuro"], [data-tema="navy"]) .usu-botao--primario:hover:not(:disabled) { background: var(--verde-escuro); }
:root:is([data-tema="claro"], [data-tema="cinza"]) .botao--primario, :root:is([data-tema="claro"], [data-tema="cinza"]) .gp-botao:not(.gp-botao--leve),
:root:is([data-tema="claro"], [data-tema="cinza"]) .acesso__botao, :root:is([data-tema="claro"], [data-tema="cinza"]) .usu-botao--primario { background: var(--verde-escuro); border-color: var(--verde-escuro); }

/* Escuro: cores fixas do tema claro */
:root:is([data-tema="escuro"], [data-tema="navy"]) .aviso, :root:is([data-tema="escuro"], [data-tema="navy"]) .usu-aviso, :root:is([data-tema="escuro"], [data-tema="navy"]) .usu-ver__nota,
:root:is([data-tema="escuro"], [data-tema="navy"]) .selo-status--atencao, :root:is([data-tema="escuro"], [data-tema="navy"]) .adm-chave--ligada .adm-chave__estado,
:root:is([data-tema="escuro"], [data-tema="navy"]) .geo-selo--quase { background: rgba(242, 183, 60, 0.15); color: #f6c761; border-color: rgba(242, 183, 60, 0.35); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .adm-chave--ligada { background: rgba(242, 183, 60, 0.06); border-color: #b98a24; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .selo-status--info { background: var(--azul-fundo); color: #a9c6ff; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .gp-tabela th { background: #111216; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .gp-tabela th[aria-sort="ascending"], :root:is([data-tema="escuro"], [data-tema="navy"]) .gp-tabela th[aria-sort="descending"] { background: #1a1c21; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .ox-produtos .ox-linha--oferecer > td { background: rgba(242, 183, 60, 0.08); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .al-card--novo.al-card--cn, :root:is([data-tema="escuro"], [data-tema="navy"]) .al-card--cn .al-just__texto { background: rgba(255, 129, 121, 0.1); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .geo-mapa { background: #101114; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .geo-aviso-zoom { background: #0b0c0e; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .pc-abas__menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .pc-aba__badge { color: #000; }
/* Legenda e detalhe ficam sobre o mapa (claro): no escuro, fundo escuro proprio para a letra clara ficar legivel */
:root:is([data-tema="escuro"], [data-tema="navy"]) .geo-legenda { background: rgba(11, 12, 14, 0.92); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .geo-ponto--grupo { background: #14284b; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .maplibregl-popup-content { background: var(--superficie); border: 1px solid var(--borda); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--superficie); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--superficie); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .maplibregl-popup-close-button { color: var(--texto); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .gp-pos--ativo, :root:is([data-tema="escuro"], [data-tema="navy"]) .gp-pos--tudo.gp-pos--ativo { background: var(--texto); border-color: var(--texto); color: #000; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .gp-pos--ativo i { background: #000; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .kpi-c__info:hover::after, :root:is([data-tema="escuro"], [data-tema="navy"]) .kpi-c__info:focus::after { background: #26282e; color: var(--texto); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .menu__fundo { background: rgba(0, 0, 0, 0.6); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .usu-pop, :root:is([data-tema="escuro"], [data-tema="navy"]) .usu-ger__menu, :root:is([data-tema="escuro"], [data-tema="navy"]) .menu-flutuante { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .skeleton, :root:is([data-tema="escuro"], [data-tema="navy"]) .kpi-c--carregando .kpi-c__valor, :root:is([data-tema="escuro"], [data-tema="navy"]) .kpi-c--carregando .kpi-c__rodape,
:root:is([data-tema="escuro"], [data-tema="navy"]) .com-esqueleto td span { background: linear-gradient(90deg, #17181c 25%, #23252a 50%, #17181c 75%); background-size: 200% 100%; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .cal__botao, :root:is([data-tema="escuro"], [data-tema="navy"]) .filtro-multi__botao, :root:is([data-tema="escuro"], [data-tema="navy"]) .usu-seletor-abas {
  filter: none;
}
:root:is([data-tema="escuro"], [data-tema="navy"]) select, :root:is([data-tema="escuro"], [data-tema="navy"]) input { color-scheme: dark; }

/* Logo: versao negativa no escuro */
:root:is([data-tema="escuro"], [data-tema="navy"]) .menu__logo--completo, :root:is([data-tema="escuro"], [data-tema="navy"]) .barra-movel__logo, :root:is([data-tema="escuro"], [data-tema="navy"]) .acesso__logo {
  content: url('/img/logo-tw-foods-negativa.png');
}
/* Menu recolhido (so o "TW"): o W preto some no fundo escuro, entao tambem tem versao negativa (T verde igual, W branco) */
:root:is([data-tema="escuro"], [data-tema="navy"]) .menu__logo--curto { content: url('/img/logo-tw-negativa.png'); }

/* ---- Menu "Gerenciar" (pagina Usuarios) ---- */
.usu-tabela td.usu-acoes { text-align: right; width: 1%; white-space: nowrap; }
.usu-ger { position: relative; display: inline-block; text-align: left; }
.usu-ger__botao { margin-left: 0; padding: 0 12px; font-weight: 600; }
.usu-ger__botao::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.usu-ger__botao[aria-expanded="true"] { background: var(--neutro-fundo); }
.usu-ger__menu {
  position: fixed; z-index: 60; min-width: 190px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 30, 61, 0.16); padding: 6px; display: grid; gap: 2px;
}
.usu-ger__menu[hidden] { display: none; }
.usu-ger__ancora { display: grid; }
.usu-ger__item {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 0.9rem; color: var(--texto);
  background: transparent; border: 0; border-radius: 7px; padding: 9px 12px; cursor: pointer; white-space: nowrap;
}
.usu-ger__item:hover, .usu-ger__item:focus-visible { background: var(--neutro-fundo); outline: none; }
.usu-ger__item:focus-visible { box-shadow: inset 0 0 0 2px var(--verde); }
a.usu-ger__item { text-decoration: none; box-sizing: border-box; }
/* Pagina de acesso do usuario (Configuracoes > Usuarios > Acessos): uma coluna, categorias > telas > permissoes recolhiveis */
.acesso-topo { align-items: center; position: sticky; top: 0; z-index: 15; background: var(--fundo); }
.acesso-acoes { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; justify-content: flex-end; }
.acesso-acoes .botao { text-decoration: none; }
.acesso-sujo { font-size: 0.85rem; font-weight: 600; color: #8a4b00; background: #fff4e5; border-radius: 8px; padding: 6px 10px; }
.acesso-sujo[hidden] { display: none; }
.acesso-link { background: none; border: 0; padding: 4px 2px; color: var(--azul); font: inherit; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.acesso-link:hover { text-decoration: underline; }
.acesso-link:focus-visible, .acesso-seta:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; border-radius: 6px; }
.acesso-lista { display: grid; gap: 10px; max-width: 880px; }
.acesso-geral { max-width: 880px; padding: 12px 16px; margin-bottom: 10px; display: grid; gap: 2px; }
.acesso-geral__titulo { margin: 0 0 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.acesso-cat { padding: 0; overflow: hidden; }
.acesso-cat__cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; flex-wrap: wrap; }
.acesso-cat__cab:hover { background: var(--neutro-fundo); }
.acesso-cat__titulo { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--marinho); }
.acesso-cat__acoes { margin-left: auto; display: flex; gap: 14px; }
.acesso-resumo { font-size: 0.82rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acesso-resumo--cheio { color: var(--verde-escuro); font-weight: 600; }
.acesso-seta { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; background: transparent; border: 0; border-radius: 6px; color: var(--texto-suave); cursor: pointer; }
.acesso-seta__icone { display: inline-flex; transition: transform 0.18s ease; }
.acesso-seta__icone svg { width: 16px; height: 16px; }
.acesso-seta[aria-expanded="true"] .acesso-seta__icone { transform: rotate(90deg); }
/* Abre/fecha com altura animada (0 -> conteudo); fechado nao recebe foco do teclado */
.acesso-painel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.18s ease, visibility 0.18s ease; }
.acesso-cat--aberta > .acesso-painel, .acesso-tela--aberta > .acesso-painel { grid-template-rows: 1fr; visibility: visible; }
.acesso-painel__dentro { overflow: hidden; min-height: 0; }
.acesso-cat--aberta > .acesso-cat__cab { border-bottom: 1px solid var(--grade); }
.acesso-telas { display: grid; padding: 4px 16px 8px; }
.acesso-tela { border-bottom: 1px solid var(--grade); }
.acesso-tela:last-child { border-bottom: 0; }
.acesso-tela__linha { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.acesso-tela__linha .acesso-item { flex: 1 1 auto; min-width: 0; }
.acesso-sub { display: grid; margin: 0 0 8px 28px; padding-left: 12px; border-left: 2px solid var(--grade-forte); }
.acesso-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; font-size: 0.92rem; color: var(--texto); }
.acesso-item:hover { background: var(--neutro-fundo); }
.acesso-item input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--verde); flex: none; }
.acesso-item:has(input:checked) { font-weight: 600; }
.acesso-item--tela { font-weight: 600; color: var(--marinho); }
.acesso-item:has(input:focus-visible) { outline: 2px solid var(--marinho); outline-offset: 1px; }
@media (max-width: 900px) { .acesso-topo { top: 62px; } } /* abaixo da barra superior do celular */
@media (max-width: 600px) { .acesso-cat__acoes { margin-left: 0; width: 100%; padding-left: 38px; } .acesso-resumo { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .acesso-painel, .acesso-seta__icone { transition: none; } }
/* Relatorios: rotinas em acordeao (mesmo visual dos Acessos do usuario) com a lista de relatorios de cada rotina */
.rel-lista { display: grid; gap: 6px; padding: 12px 16px 16px; }
.rel-item { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; background: transparent; border: 1px solid var(--grade-forte); border-radius: 8px; color: inherit; font: inherit; cursor: pointer; }
.rel-item:hover { background: var(--neutro-fundo); }
.rel-item:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.rel-item[aria-current="true"] { border-color: var(--marinho); box-shadow: inset 3px 0 0 var(--marinho); }
.rel-item__titulo { font-weight: 600; }
.rel-item__desc { font-size: 0.85rem; color: var(--texto-suave); }
.rel-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px var(--gap); align-items: end; }
/* Relatorios > Tabela Interna (painel proprio) */
#rel-painel { min-width: 0; } /* o cartao e um grid: sem isto a tabela larga estica o cartao e a pagina em vez de rolar dentro dele */

.ti-acoes { margin: 10px 0; align-items: center; }
.rel-filtros .filtro { min-width: 0; }
.rel-filtros input, .rel-filtros select { width: 100%; }
.rel-filtros .filtro-multi__opcao input { width: auto; }
.rel-filtros .filtro-multi__lista { max-height: 320px; overflow-y: auto; }
/* Tabela dos relatorios (computador): linhas compactas e sem quebra (descricao em uma linha), rolagem dentro do card com o
   cabecalho fixo; no celular continua virando cards (.pv-tabela) */
#rel-tabela { min-width: 0; } /* o card e grade: sem isto a tabela sem quebra alarga o card alem da tela */
@media (min-width: 641px) {
  #rel-tabela .pv-tabela-rolagem { max-height: 70vh; overflow: auto; border: 1px solid var(--grade); border-radius: 8px; }
  .rel-tabela { font-size: 0.86rem; }
  .rel-tabela th, .rel-tabela td { padding: 8px 7px; white-space: nowrap; }
  /* o titulo pode quebrar nos espacos ("Ideal / Sugerido"): e ele, nao o dado, que alargava as colunas numericas */
  .rel-tabela > thead th, .rel-tabela > thead th.num { white-space: normal; font-size: 0.7rem; letter-spacing: 0.03em; position: sticky; top: 0; z-index: 2; background: var(--superficie); }
}
/* ===================== Painel de Compras (Compras > Painel de Compras) ===================== */
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); }
.cmp-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 4px; box-shadow: var(--sombra); }
.cmp-card__titulo { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.cmp-card__valor { font-size: 1.35rem; font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; }
.cmp-card__nota { font-size: 0.8rem; color: var(--texto-suave); }
.cmp-meta { border-left: 4px solid var(--azul); }
.cmp-meta .cmp-card__valor { font-size: 1.1rem; }
.cmp-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px var(--gap); align-items: end; }
.cmp-filtros .filtro { min-width: 0; } .cmp-filtros select, .cmp-filtros input { width: 100%; }
.cmp-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cmp-chip { border: 1px solid var(--grade-forte); background: var(--superficie); color: var(--texto); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.82rem; cursor: pointer; }
.cmp-chip[aria-pressed="true"] { color: #fff; border-color: transparent; }
.cmp-chip[data-st="1"][aria-pressed="true"], .cmp-st-1 { --cor: #2f6fe0; } .cmp-chip[data-st="2"][aria-pressed="true"], .cmp-st-2 { --cor: #0e8a5a; }
.cmp-chip[data-st="3"][aria-pressed="true"], .cmp-st-3 { --cor: #c99a00; } .cmp-chip[data-st="4"][aria-pressed="true"], .cmp-st-4 { --cor: #e07b1a; }
.cmp-chip[data-st="5"][aria-pressed="true"], .cmp-st-5 { --cor: #c0392b; }
.cmp-chip[aria-pressed="true"] { background: var(--cor); }
.cmp-rolagem { overflow: auto; max-height: 72vh; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); position: relative; }
.cmp-tabela { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.cmp-tabela th { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--azul) 16%, var(--superficie)); color: var(--azul-texto); text-align: right; padding: 8px 10px; white-space: nowrap; font-size: 0.74rem; letter-spacing: 0.02em; text-transform: uppercase; border-bottom: 1px solid var(--grade-forte); }
.cmp-tabela th:first-child { text-align: left; left: 0; z-index: 3; min-width: 340px; }
.cmp-tabela th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; } .cmp-tabela th button:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.cmp-tabela td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--grade); white-space: nowrap; }
.cmp-tabela td:first-child { text-align: left; position: sticky; left: 0; background: inherit; z-index: 1; }
.cmp-rot { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.cmp-nota { color: var(--texto-suave); font-size: 0.78rem; font-weight: 400; margin-left: 2px; }
.cmp-l { background: var(--superficie); color: var(--texto); } .cmp-l--ranking { background: var(--superficie); font-weight: 700; } .cmp-l--acao { background: color-mix(in srgb, var(--azul) 8%, var(--superficie)); font-weight: 600; } .cmp-l--status { background: color-mix(in srgb, var(--azul) 4%, var(--superficie)); font-weight: 600; }
.cmp-l--codigo { color: var(--texto-suave); } .cmp-l--total { background: color-mix(in srgb, var(--azul) 18%, var(--superficie)); font-weight: 700; position: sticky; bottom: 0; z-index: 2; }
.cmp-l--status td:first-child { box-shadow: inset 4px 0 0 var(--cor, transparent); }
.cmp-seta { all: unset; cursor: pointer; width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 4px; vertical-align: middle; } .cmp-seta:hover { background: var(--grade); } .cmp-seta:focus-visible { outline: 2px solid var(--marinho); }
.cmp-seta svg { width: 14px; height: 14px; transition: transform 0.15s; } .cmp-seta[aria-expanded="true"] svg { transform: rotate(90deg); }
.cmp-alerta { background: var(--baixa-fundo); color: var(--baixa); border-radius: 999px; padding: 1px 8px; font-size: 0.7rem; font-weight: 700; margin-left: 6px; }
.cmp-selo { border-radius: 999px; padding: 1px 8px; font-size: 0.7rem; font-weight: 700; margin-left: 6px; color: #fff; background: var(--cor, #888); }
.cmp-ped { width: 84px; padding: 4px 6px; border: 1px solid var(--grade-forte); border-radius: 6px; font: inherit; text-align: right; background: var(--superficie); color: inherit; }
.cmp-ped:focus { outline: 2px solid var(--azul); } .cmp-ped--salvo { border-color: var(--verde); } .cmp-ped--erro { border-color: var(--baixa); }
.cmp-aviso { color: var(--prazo-60, #9a6a00); font-size: 0.76rem; } .cmp-erro { color: var(--baixa); font-size: 0.8rem; }
.cmp-barra { display: flex; flex-wrap: wrap; gap: 10px var(--gap); align-items: end; justify-content: space-between; }
.cmp-bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 10px; }
.cmp-bloco h3 { margin: 0; font-size: 1rem; color: var(--marinho); } .cmp-bloco h3 small { font-weight: 400; color: var(--texto-suave); margin-left: 8px; }
.cmp-mini { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .cmp-mini th, .cmp-mini td { padding: 6px 8px; border-bottom: 1px solid var(--grade); text-align: left; color: var(--texto); } .cmp-mini .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-mini tfoot td { font-weight: 700; background: color-mix(in srgb, var(--azul) 9%, var(--superficie)); } .cmp-vencido { background: color-mix(in srgb, #f2b73c 22%, var(--superficie)); }
.cmp-subabas { display: flex; flex-wrap: wrap; gap: 6px; } .cmp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.cmp-param { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px var(--gap); }
@media (max-width: 767px) { .cmp-tabela th:first-child, .cmp-tabela td:first-child { min-width: 220px; max-width: 220px; } .cmp-rot { max-width: 150px; } }
.rel-barra { display: flex; flex-wrap: wrap; align-items: end; gap: var(--gap); }
.rel-barra .filtro { flex: 1 1 220px; }
.cmp-marcas { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow: auto; padding: 2px; }
.cmp-marca small { color: var(--texto-suave); margin-left: 4px; font-variant-numeric: tabular-nums; }
.cmp-marca:hover, .cmp-marca:focus-visible { border-color: var(--azul); }
.rel-info { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--texto-suave); font-size: 0.9rem; }
.usu-ger__item--perigo { color: var(--baixa); border-top: 1px solid var(--grade); border-radius: 0 0 7px 7px; margin-top: 2px; }
.usu-ger__item--perigo:hover { background: var(--baixa-fundo); }
@media (max-width: 639px) { .usu-ger__item { padding: 12px; min-height: 44px; } .usu-ger__botao { min-height: 40px; } }

/* ---- Menu lateral (como antes) + botao Light/Dark no rodape ---- */
.menu__ferramentas { display: grid; gap: 10px; }
/* Light/Dark no topo das paginas, no canto direito da area de conteudo */
.topo-tema { display: flex; justify-content: flex-end; padding: 14px clamp(16px, 2vw, 32px) 0; max-width: 1560px; margin: 0 auto; }
.topo-tema + .app { padding-top: 12px; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .menu__subitens { box-shadow: none; }

/* Usuarios: tabela compacta (so a largura do conteudo, sem vao entre situacao e Gerenciar) */
.usu-tabela { width: max-content; max-width: 100%; }
.usu-tabela td:first-child { min-width: 240px; }
.usu-tabela td.usu-acoes { width: auto; padding-left: 20px; }

/* Cartoes sem sombra, cabecalho de pagina simples, KPIs em faixa unica */
.fin-topo { border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; }
.fin-topo__titulo { text-transform: none; letter-spacing: -0.01em; font-weight: 700; }
.app { max-width: 1560px; }
@media (min-width: 900px) {
  .shell .kpis, .shell .com-kpis, .shell .pv-kpis {
    gap: 0; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); overflow: hidden;
  }
  .shell .kpis > *, .shell .com-kpis > *, .shell .pv-kpis > * { border: 0; border-radius: 0; border-right: 1px solid var(--borda); }
  .shell .kpis > *:last-child, .shell .com-kpis > *:last-child, .shell .pv-kpis > *:last-child { border-right: 0; }
}
/* Usuarios no celular: cada usuario vira um bloco (sem rolagem lateral) */
@media (max-width: 639px) {
  .usu-tabela thead { display: none; }
  .usu-tabela, .usu-tabela tbody, .usu-tabela tr, .usu-tabela td { display: block; width: 100%; }
  .usu-tabela tr { padding: 12px 0; border-bottom: 1px solid var(--grade-forte); }
  .usu-tabela td, .usu-tabela td:first-child { border: 0; padding: 4px 10px; min-width: 0; }
  .usu-tabela td.usu-acoes { text-align: left; width: 100%; white-space: normal; padding-top: 8px; }
}

/* Fretes (Logistica): detalhe do carregamento, barras do panorama e botoes da linha */
.fr-acoes { white-space: nowrap; text-align: right; }
.fr-acoes .usu-botao { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.fr-acoes .usu-botao svg { width: 14px; height: 14px; }
.fr-canhotos { color: var(--texto-suave); font-size: 0.8rem; }
.fr-detalhe { display: grid; gap: 16px; padding: 4px 0 8px; }
.fr-detalhe .inad-titulos { width: 100%; }
.fr-cards { margin-bottom: var(--gap); }
#fr-indice { grid-column: span 2; }
@media (max-width: 700px) { #fr-indice { grid-column: auto; } }
/* O texto sr-only (posicao absoluta) do cabecalho da tabela nao pode escapar da rolagem e alargar a pagina */
#fr-painel-gestao .inad-rolagem, #fr-painel-veiculos .inad-rolagem { position: relative; }
/* Tabelas de Fretes: conteudo centralizado (decisao de 27/10/2026; excecao ao alinhamento a direita dos numeros do PADROES-PAINEL.md) */
.fr-centro th, .fr-centro td, .fr-centro .num, .fr-centro.inad-tabela > thead th, .fr-centro.inad-tabela > thead th.num { text-align: center; }
.fr-centro .inad-ordem, .fr-centro.inad-tabela > thead th.num .inad-ordem { justify-content: center; text-align: center; }
.fr-centro .inad-tabela .inad-cliente__nome, .fr-centro.inad-tabela .inad-cliente__nome { min-width: 0; white-space: nowrap; }
.fr-centro .inad-cliente__cod { margin-right: 6px; }
.fr-centro.inad-tabela th, .fr-centro.inad-tabela td { padding-left: 5px; padding-right: 5px; }
.fr-centro.inad-tabela .fr-acoes { white-space: nowrap; }
/* Carregamentos: nenhuma coluna quebra de linha (o texto fica em uma linha so; a tabela rola dentro do card se faltar largura). O detalhe aberto mantem as quebras. */
.fr-sem-quebra > thead th, .fr-sem-quebra > tbody > tr:not(.inad-detalhe) > * { white-space: nowrap; }
.fr-centro.fr-sem-quebra.inad-tabela > thead th, .fr-centro.fr-sem-quebra.inad-tabela > tbody > tr:not(.inad-detalhe) > * { padding-left: 3px; padding-right: 3px; }
.fr-check { display: flex; align-items: center; gap: 8px; align-self: end; height: 40px; font-size: 0.9rem; color: var(--texto); cursor: pointer; }
.fr-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--marinho); }
.fr-indice__linha { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--texto-suave); }
.fr-tabela-categoria thead th { white-space: normal; vertical-align: bottom; }
.fr-tabela-categoria tfoot th, .fr-tabela-categoria tfoot td { font-weight: 700; border-top: 2px solid var(--marinho); }
.fr-bloco { margin-bottom: var(--gap); }
.fr-bloco > * { min-width: 0; } /* a tabela larga rola dentro do bloco (nao empurra a pagina no celular) */
.fr-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fr-barras li { display: grid; grid-template-columns: 64px minmax(80px, 1fr) auto auto; gap: 10px; align-items: center; font-size: 0.9rem; }
.fr-barras__rotulo { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.fr-barras__trilho { background: var(--trilho); border-radius: 6px; height: 14px; overflow: hidden; }
.fr-barras__barra { display: block; height: 100%; background: var(--verde); border-radius: 6px; }
.fr-barras__valor { font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; text-align: right; }
.fr-barras__detalhe { color: var(--texto-suave); font-size: 0.8rem; min-width: 70px; text-align: right; }
@media (max-width: 600px) { .fr-barras li { grid-template-columns: 56px minmax(60px, 1fr) auto; } .fr-barras__detalhe { display: none; } }
/* ===== Dark: controles que ficavam com texto claro sobre fundo claro (ou o contrario) ===== */
:root:is([data-tema="escuro"], [data-tema="navy"]) .gp-subaba--ativa { background: var(--texto); border-color: var(--texto); color: #000; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .gp-subaba--ativa .gp-contador { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .pv-aba__badge, :root:is([data-tema="escuro"], [data-tema="navy"]) .al-novo { color: #000; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .shell--recolhido .menu__item::after { color: #000; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .fin-topo__status--erro, :root:is([data-tema="escuro"], [data-tema="navy"]) .gp-aviso,
:root:is([data-tema="escuro"], [data-tema="navy"]) .usu-ver__lista--extra li::before,
:root:is([data-tema="escuro"], [data-tema="navy"]) .al-card--cb .al-tipo, :root:is([data-tema="escuro"], [data-tema="navy"]) .al-card--pb .al-tipo { color: #f6c761; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .gp-contador--faltas { background: rgba(242, 183, 60, 0.15); color: #f6c761; }

/* ===== Mapa: quadro de detalhe da empresa (oportunidade) mais legivel ===== */
.geo-pop--op { gap: 0; max-height: min(64vh, 470px); display: flex; flex-direction: column; }
.geo-pop--op .geo-pop__cab { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--grade-forte); padding-right: 22px; }
.geo-pop--op .geo-pop__titulo { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.geo-pop--op .geo-pop__sub { margin-top: 0; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.geo-pop--op .geo-pop__selos { margin-top: 2px; }
.geo-pop--op .geo-selo { font-weight: 600; white-space: normal; }
.geo-pop--op .geo-pop__corpo { overflow-y: auto; padding: 10px 6px 4px 0; display: grid; gap: 8px; min-height: 0; }
.geo-pop__dados { display: grid; gap: 8px; margin: 0; }
.geo-pop__dados dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.geo-pop__dados dd { margin: 1px 0 0; font-size: 0.84rem; font-weight: 400; line-height: 1.35; }
.geo-pop__sec { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); margin-top: 2px; }
.geo-pop__cnae { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.geo-pop__cnae li { font-size: 0.8rem; line-height: 1.35; font-weight: 400; padding-left: 8px; border-left: 2px solid var(--grade-forte); }
.geo-pop__cod { font-variant-numeric: tabular-nums; color: var(--texto-suave); font-size: 0.74rem; margin-right: 2px; }
.geo-pop__tag { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--azul-texto); background: var(--azul-fundo); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.geo-pop__mais { font-size: 0.8rem; }
.geo-pop__mais summary { cursor: pointer; color: var(--texto-suave); font-weight: 600; padding: 3px 0; list-style-position: inside; }
.geo-pop__mais summary:hover { color: var(--texto); }
.geo-pop__mais[open] > summary { margin-bottom: 6px; }
.geo-pop--op .geo-pop__rodape { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--grade-forte); }
.maplibregl-popup-content { max-width: 100%; }

/* ===== Credito e Cobranca: sub-abas e protesto ===== */
.cred-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--grade-forte); overflow-x: auto; }
.cred-aba { font: inherit; font-weight: 600; color: var(--texto-suave); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 16px; margin-bottom: -1px; cursor: pointer; white-space: nowrap; min-height: 44px; }
.cred-aba:hover { color: var(--texto); }
.cred-aba[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--verde); }
.cred-aba:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.cred-aba__n { font-weight: 400; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.prot-tabela .inad-col-seta { width: 1%; white-space: nowrap; }
/* Fila de protesto por NF (abas "Clientes a protestar" e "Protestados") */
.prot-acoes { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.prot-pedido { display: block; font-size: 0.78rem; color: var(--texto-suave); }
/* Titulo / NF / Pedido (protesto por parcela): cada linha inteira, sem quebrar o numero */
.prot-tabela .prot-doc strong { white-space: nowrap; }

/* Gestao de Pedidos: linha neutra, status Cancelado (vermelho escuro) e bolinha de inadimplencia */
:root { --gp-linha-hover: #f6f7f9; --gp-linha-sel: #e8ebf1; --gp-canc: #7a1712; }
:root:is([data-tema="escuro"], [data-tema="navy"]) { --gp-linha-hover: rgba(255, 255, 255, 0.05); --gp-linha-sel: rgba(255, 255, 255, 0.11); --gp-canc: #d4574f; }
.gp-pos--c i { background: var(--gp-canc); }
.gp-pos--c.gp-pos--ativo { background: var(--gp-canc); border-color: var(--gp-canc); }
.gp-chip--c { border-left: 4px solid var(--gp-canc); }
.gp-chip--c strong { color: var(--gp-canc); }
.gp-selo--c { background: var(--gp-canc); }
.gp-ponto--c { background: var(--gp-canc); }
.gp-inad { display: block; width: 12px; height: 12px; margin: 0 auto; border-radius: 50%; }
.gp-inad--sim { background: var(--gp-verm); }
.gp-inad--nao { background: var(--gp-ver); }
.gp-inad--ind { background: var(--gp-mon); opacity: 0.5; }

/* Inteligencia Geografica: mapa em tela cheia (botao no canto do mapa; Esc sai). O mesmo mapa so e redimensionado. */
html.geo-tela-cheia { overflow: hidden; }
.geo-mapa-caixa--cheia {
  position: fixed; inset: 0; z-index: 80; background: var(--fundo, #fff);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.geo-mapa-caixa--cheia .geo-mapa { height: 100%; border: 0; border-radius: 0; }
.geo-mapa-caixa--cheia .geo-legenda {
  position: absolute; margin: 0; left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(10px + env(safe-area-inset-top, 0px));
  max-height: calc(100% - 20px); overflow: auto;
}
@media (max-width: 700px) {
  .geo-mapa-caixa--cheia .geo-mapa { height: 100%; }
  .geo-mapa-caixa--cheia .geo-legenda { grid-template-columns: 1fr; font-size: 0.72rem; }
}

/* Navy: as cores fixas cinza-preto do Dark viram tons de marinho (no FIM do arquivo: precisa vir depois das regras do Dark) */
:root[data-tema="navy"] .gp-tabela th { background: #0f1d37; }
:root[data-tema="navy"] .gp-tabela th[aria-sort="ascending"], :root[data-tema="navy"] .gp-tabela th[aria-sort="descending"] { background: #1a2c4d; }
:root[data-tema="navy"] .geo-mapa { background: #0e1b34; }
:root[data-tema="navy"] .geo-aviso-zoom { background: #0b1630; }
:root[data-tema="navy"] .geo-legenda { background: rgba(11, 22, 48, 0.92); }
:root[data-tema="navy"] .geo-ponto--grupo { background: #2a4068; }
:root[data-tema="navy"] .kpi-c__info:hover::after, :root[data-tema="navy"] .kpi-c__info:focus::after { background: #23365a; }
:root[data-tema="navy"] .menu__fundo { background: rgba(5, 10, 24, 0.6); }
:root[data-tema="navy"] .skeleton, :root[data-tema="navy"] .kpi-c--carregando .kpi-c__valor, :root[data-tema="navy"] .kpi-c--carregando .kpi-c__rodape,
:root[data-tema="navy"] .com-esqueleto td span { background: linear-gradient(90deg, #15274a 25%, #1f3460 50%, #15274a 75%); background-size: 200% 100%; }

/* Gray: a legenda do mapa (fundo branco fixo sobre o mapa) fica no cinza da superficie */
:root[data-tema="cinza"] .geo-legenda { background: rgba(242, 243, 245, 0.94); }

/* ===================== Painel Logístico (Logística > Painel Logístico) ===================== */
/* Fatias das roscas (no máximo 5 + "Outros", sempre cinza). Mesma família das faixas de prazo, com versão nos temas escuros. */
:root { --fatia-1: #2e5aa8; --fatia-2: #d4961c; --fatia-3: #2aa2dc; --fatia-4: #0b7a4f; --fatia-5: #8a5cc7; --fatia-outros: #9aa3ad; }
:root:is([data-tema="escuro"], [data-tema="navy"]) { --fatia-1: #6ea2ff; --fatia-2: #f2b73c; --fatia-3: #4cc3ff; --fatia-4: #3ddc97; --fatia-5: #b996f0; --fatia-outros: #8b95a1; }
.lg-conteudo { display: grid; gap: var(--gap); }
.lg-link { justify-self: start; background: none; border: 0; padding: 0; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--verde-escuro); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lg-link:hover { color: var(--verde); }
.lg-link:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 3px; }
.lg-negativo { color: var(--tend-ruim); }
.lg-perda { color: var(--tend-ruim); font-weight: 800; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .lg-negativo, :root:is([data-tema="escuro"], [data-tema="navy"]) .lg-perda { color: #ff8a80; }
:root:is([data-tema="escuro"], [data-tema="navy"]) .lg-link { color: var(--verde); }

/* Painel Logístico > Validades: cores das faixas de vencimento (vencido vermelho, até 30 laranja, 31-60 amarelo, 61-90 azul,
   91-180 verde, +180 cinza; "a conferir" roxo e "sem validade" cinza escuro), com versão nos temas escuros */
:root {
  --val-vencido: #c8414f; --val-ate30: #e07a1f; --val-ate60: #d4a300; --val-ate90: #2e5aa8; --val-ate180: #0e8a5a; --val-mais180: #8a93a6;
  --val-conferir: #7b3fe4; --val-sem: #5b6478;
}
:root:is([data-tema="escuro"], [data-tema="navy"]) {
  --val-vencido: #ff7a86; --val-ate30: #ffa75a; --val-ate60: #f2c94c; --val-ate90: #6ea2ff; --val-ate180: #3ddc97; --val-mais180: #9aa3ad;
  --val-conferir: #b996f0; --val-sem: #a9b2c3;
}
.lg-aviso { display: flex; gap: 8px; align-items: center; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--neutro-fundo); color: var(--texto-suave); font-size: 0.82rem; }
.lg-aviso svg { width: 16px; height: 16px; flex: none; }
.lg-va-filtros { margin: 0; }
.lg-va-filtros .filtro:not(.inad-busca) { min-width: 170px; max-width: 260px; }
.lg-card-faixa { cursor: pointer; border-top: 4px solid var(--borda); }
.lg-card-faixa:hover { border-color: var(--grade-forte); }
.lg-card-faixa:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
/* Faixa colorida no topo de cada card (o grupo de cards do painel zera as bordas: seletor mais forte, de proposito) */
.shell .pv-kpis > .lg-card-faixa { border-top: 4px solid var(--borda); }
.shell .pv-kpis > .lg-card-faixa--vencido, .lg-card-faixa--vencido { border-top-color: var(--val-vencido); }
.shell .pv-kpis > .lg-card-faixa--ate30, .lg-card-faixa--ate30 { border-top-color: var(--val-ate30); }
.shell .pv-kpis > .lg-card-faixa--ate60, .lg-card-faixa--ate60 { border-top-color: var(--val-ate60); }
.shell .pv-kpis > .lg-card-faixa--ate90, .lg-card-faixa--ate90 { border-top-color: var(--val-ate90); }
.lg-card-faixa--vencido .kpi-c__valor { color: var(--val-vencido); }
.lg-card-faixa--ativo { box-shadow: 0 0 0 2px var(--verde); }
.lg-card-faixa__ativo { color: var(--verde-escuro); font-weight: 700; }
.lg-va-extras { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.lg-va-extra { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 0.82rem; cursor: pointer; }
.lg-va-extra:hover, .lg-va-extra--ativo { border-color: var(--verde); }
.lg-va-grafico { position: relative; height: 280px; }
.lg-va-det { margin: 0 0 8px; font-size: 0.85rem; color: var(--texto-suave); }
.lg-faixa { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; color: #fff; background: var(--val-mais180); }
.lg-faixa--vencido { background: var(--val-vencido); }
.lg-faixa--ate30 { background: var(--val-ate30); }
.lg-faixa--ate60 { background: var(--val-ate60); color: #1f1a00; }
.lg-faixa--ate90 { background: var(--val-ate90); }
.lg-faixa--ate180 { background: var(--val-ate180); }
.lg-faixa--mais180 { background: var(--val-mais180); }
.lg-faixa--conferir { background: var(--val-conferir); }
.lg-faixa--sem { background: var(--val-sem); }
:root:is([data-tema="escuro"], [data-tema="navy"]) .lg-faixa { color: #0b0f17; }

/* ---------- Botao WhatsApp dos inadimplentes (Painel Comercial; 28/10/2026) ---------- */
/* Icone verde discreto ao lado do selo de situacao; apagado (com o motivo no title) quando o cliente nao tem celular valido */
.zap-botao {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; vertical-align: middle;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--verde); cursor: pointer;
}
.zap-botao svg { width: 18px; height: 18px; }
.zap-botao:hover, .zap-botao:focus-visible { background: var(--verde-fundo); border-color: var(--verde-area-forte); }
.zap-botao:disabled { opacity: 0.5; cursor: progress; }
.zap-botao--off { color: var(--texto-suave); opacity: 0.4; cursor: not-allowed; }
.zap-botao--off:hover, .zap-botao--off:focus-visible { background: transparent; border-color: transparent; }
.zap-selo { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--verde-fundo); color: var(--verde-escuro); font-size: 0.78rem; font-weight: 600; }
.al-zap { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; font-size: 0.86rem; color: var(--texto-suave); }
.adm-zap__campo { display: flex; flex-direction: column; width: 100%; }
/* Menu do botao WhatsApp (Credito e Cobranca): 4 opcoes, numero digitado e o aviso do PDF dos boletos */
.zap-menu { width: 340px; text-align: left; white-space: normal; }
.zap-menu__opcoes { display: grid; gap: 2px; }
.zap-menu__op { width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; text-align: left; font: inherit; }
.zap-menu__op:disabled { cursor: not-allowed; opacity: 0.55; }
.zap-menu__op:disabled:hover { background: none; }
.zap-menu__op:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }
.zap-menu__rotulo { font-weight: 600; color: var(--texto); }
.zap-menu__info { display: block; font-size: 0.8rem; font-weight: 400; color: var(--texto-suave); }
.zap-menu__outro { display: grid; gap: 8px; }
.zap-menu__outro[hidden], .zap-menu__opcoes[hidden], .zap-menu__estado[hidden] { display: none; }
.zap-menu__outro input[type="tel"] { width: 100%; }
.zap-menu__sugestao { align-items: flex-start; padding: 6px 4px; font-size: 0.86rem; }
.zap-menu__botoes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.zap-menu__botoes .usu-botao { margin-left: 0; text-decoration: none; }
.zap-menu__estado { font-size: 0.88rem; color: var(--texto); background: var(--verde-fundo); border-radius: 8px; padding: 10px; }
.zap-menu__estado--erro { background: var(--baixa-fundo); color: var(--baixa); }
.zap-menu__texto { width: 100%; margin-top: 8px; font: inherit; font-size: 0.82rem; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); resize: vertical; }
.adm-zap__campo textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); resize: vertical; }
.adm-zap__previa { margin-top: 10px; }
.adm-zap__previa p { white-space: pre-line; margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--verde-fundo); color: var(--texto); max-width: 560px; }

/* ---------- Dashboard > Painel TV (28/10/2026): previa da TV, verificacoes de saude e status. So variaveis de tema. ---------- */
.dtv-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap, 16px); align-items: start; }
.dtv-grade--baixo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .dtv-grade, .dtv-grade--baixo { grid-template-columns: minmax(0, 1fr); } }
.dtv-controles { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 12px; }
.dtv-moldura { position: relative; width: 100%; background: #000; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.dtv-palco { position: absolute; top: 0; left: 0; }
.dtv-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.dtv-ver { border: 1px solid var(--borda); border-left-width: 5px; border-radius: 8px; padding: 8px 12px; }
.dtv-ver--verde { border-left-color: var(--verde); } .dtv-ver--amarelo { border-left-color: #c99a00; } .dtv-ver--vermelho { border-left-color: var(--baixa); }
.dtv-ver p { margin: 4px 0; color: var(--texto-suave); font-size: 0.88rem; } .dtv-ver small { color: var(--texto-suave); }
.dtv-ok { color: var(--verde-escuro); }
.dtv-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 8px 0; }
.dtv-dados dt { font-size: 0.78rem; color: var(--texto-suave); } .dtv-dados dd { margin: 0; font-weight: 600; color: var(--texto); }
.dtv-sub { font-size: 1rem; margin: 18px 0 8px; }
.dtv-detalhe { margin: 6px 0; }
.dtv-detalhe summary { cursor: pointer; font-weight: 600; }
.dtv-grafico { display: block; width: 100%; height: 160px; background: var(--azul-fundo); border-radius: 6px; }
.dtv-grafico__barra { fill: var(--azul); }
.dtv-grafico__ref { stroke: currentColor; stroke-width: 0.4; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; opacity: .6; }
.dtv-linha { display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); gap: 1px; height: 28px; margin: 6px 0 12px; }
.dtv-bloco { display: block; background: var(--verde); border-radius: 1px; }
.dtv-bloco--offline { background: var(--grade-forte); }
.dtv-bloco--erro { box-shadow: inset 0 -8px 0 #e07b1a; }
.tvu-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.tvu-logins { margin: 6px 0 0; padding-left: 18px; color: var(--texto-suave); font-size: 0.86rem; }

/* ===================== Analise de Compras (Compras > Analise de Compras) =====================
   Prefixo acp- (o ac- e da Analise de credito). Categorias com as mesmas cores do status do Painel de Compras; comprar (sugestao negativa) em vermelho, excesso em azul. */
.acp-comprar { color: var(--baixa); font-weight: 600; }
.acp-excesso { color: var(--azul); font-weight: 600; }
.acp-cat--excesso, .acp-chip--excesso, .acp-catbar--excesso { --cor: #2f6fe0; }
.acp-cat--zerado, .acp-chip--zerado, .acp-catbar--zerado { --cor: #c0392b; }
.acp-cat--critico, .acp-chip--critico, .acp-catbar--critico { --cor: #e07b1a; }
.acp-cat--baixo, .acp-chip--baixo, .acp-catbar--baixo { --cor: #c99a00; }
.acp-cat--regular, .acp-chip--regular, .acp-catbar--regular { --cor: #0e8a5a; }
.acp-cat--semgiro, .acp-chip--semgiro, .acp-catbar--semgiro { --cor: #7a8496; }
.acp-cat { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--cor); white-space: nowrap; }
.acp-chip[aria-pressed="true"] { background: var(--cor); }
/* Cabecalho: rotulo pequeno, titulo, subtitulo e o selo da filial; faixa com a ultima atualizacao */
.acp-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; }
.acp-sobretitulo { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde); margin-bottom: 2px; }
.acp-filial { border: 1px solid var(--grade-forte); border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 700; color: var(--marinho); background: var(--superficie); white-space: nowrap; }
.acp-faixa { display: flex; align-items: center; justify-content: space-between; gap: 10px var(--gap); flex-wrap: wrap; padding: 10px 16px; color: var(--texto-suave); font-size: 0.88rem; }
/* Filtros da analise */
.acp-filtros { display: grid; gap: 12px; }
.acp-filtros-linha { display: grid; grid-template-columns: minmax(320px, 1.6fr) minmax(150px, 0.7fr) minmax(200px, 1fr) minmax(200px, 1fr); gap: 10px var(--gap); align-items: start; }
@media (max-width: 1100px) { .acp-filtros-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .acp-filtros-linha { grid-template-columns: minmax(0, 1fr); } }
.acp-filtros-linha .filtro, .acp-mais__grade .filtro { min-width: 0; }
.acp-filtros-linha select, .acp-filtros-linha input { width: 100%; }
.acp-meses__campos { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; color: var(--texto-suave); }
.acp-filtros-linha .filtro { width: 100%; max-width: none; } /* .filtro limita a 240px; aqui a grade decide a largura */
.acp-ajuda { display: block; font-size: 0.78rem; color: var(--texto-suave); margin-top: 4px; }
.acp-mais > summary { cursor: pointer; font-weight: 600; color: var(--marinho); width: max-content; padding: 4px 0; }
.acp-mais > summary:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.acp-mais[open] > summary { margin-bottom: 10px; }
.acp-mais .filtro + .filtro, .acp-mais__grade + .filtro { margin-top: 10px; }
.acp-acoes { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px var(--gap); }
.acp-primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.acp-aviso-estoque { margin: 0; font-size: 0.84rem; color: var(--prazo-60, #9a6a00); }
/* Resumo: 3 blocos */
/* Resumo: 3 cards da mesma altura; nos dois primeiros, titulo, numero e notas centralizados na vertical */
.acp-resumo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); }
@media (max-width: 1100px) { .acp-resumo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .acp-card--cats { grid-column: 1 / -1; } }
@media (max-width: 640px) { .acp-resumo { grid-template-columns: minmax(0, 1fr); } }
.acp-card { display: grid; align-content: center; gap: 6px; padding: 18px 20px; }
.acp-card__titulo { font-size: 0.86rem; color: var(--texto-suave); }
.acp-card__valor { font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--marinho); font-variant-numeric: tabular-nums; }
.acp-card__valor.acp-comprar { color: var(--baixa); } .acp-card__valor.acp-excesso { color: var(--azul); }
.acp-card__nota { font-size: 0.78rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.acp-card--cats { align-content: start; }
.acp-card__cab { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--marinho); }
.acp-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin: 2px 0 4px; }
@media (max-width: 640px) { .acp-cats { grid-template-columns: minmax(0, 1fr); } }
.acp-catbar { display: grid; gap: 5px; padding: 5px 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.acp-catbar:hover { background: var(--neutro-fundo); }
.acp-catbar[aria-pressed="true"] { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 10%, var(--superficie)); }
.acp-catbar:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.acp-catbar__topo { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; }
.acp-catbar__nome { font-weight: 400; color: var(--texto); }
.acp-catbar__n { font-weight: 400; color: var(--texto-suave); }
.acp-catbar__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acp-catbar__trilho { height: 4px; border-radius: 2px; background: var(--grade); overflow: hidden; }
.acp-catbar__fill { display: block; height: 100%; background: var(--cor); border-radius: 4px; }
/* Tabela grupo > produto > clientes (base: .cmp-tabela do Painel de Compras: cabecalho e 1a coluna fixos, total fixo no rodape) */
.acp-tabela-cab { display: flex; justify-content: space-between; align-items: end; gap: 10px var(--gap); flex-wrap: wrap; }
.acp-tabela-ferramentas { display: flex; align-items: end; gap: 8px 14px; flex-wrap: wrap; }
.acp-tabela-ferramentas .filtro select { min-width: 190px; }
.acp-visoes { display: flex; gap: 6px; }
.acp-visao[aria-pressed="true"] { background: var(--marinho); border-color: var(--marinho); color: var(--superficie); font-weight: 700; }
.acp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; cursor: pointer; min-height: 36px; }
#acp-tabela, .acp-rolagem { min-width: 0; }
.acp-tabela td, .acp-tabela th { text-align: right; }
.acp-tabela th.acp-col-nome, .acp-tabela td.acp-col-nome { text-align: left; min-width: 320px; max-width: 420px; white-space: normal; }
.acp-tabela th button { white-space: normal; }
.acp-tabela .pv-sub { display: block; }
/* Visual limpo (29/10/2026): sem os fundos azuis da .cmp-tabela; cabecalho, grupos e total no fundo do card, com divisorias finas.
   O grupo se destaca pelo negrito; os clientes ficam num cinza bem leve. Vermelho (comprar) e azul (excesso) dos numeros continuam. */
.acp-tabela th { background: var(--superficie); color: var(--texto-suave); border-bottom: 1px solid var(--grade-forte); }
.acp-tabela td { border-bottom: 1px solid var(--grade); }
.acp-l--grupo { background: var(--superficie); color: var(--texto); font-weight: 600; }
.acp-l--grupo > td { border-top: 1px solid var(--grade-forte); }
.acp-l--produto { background: var(--superficie); }
.acp-l--cliente { background: var(--fundo); color: var(--texto-suave); font-size: 0.8rem; }
.acp-tabela tr.acp-l--grupo:hover > td, .acp-tabela tr.acp-l--produto:hover > td { background: var(--neutro-fundo); }
.acp-tabela .cmp-l--total { background: var(--superficie); color: var(--texto); }
.acp-tabela .cmp-l--total > td { border-top: 2px solid var(--grade-forte); border-bottom: 0; }
.acp-tabela .acp-fora-media { color: var(--texto-suave); } /* mes fora da media (antes do historico ou fora do intervalo) */
.acp-nivel-1 { padding-left: 34px !important; }
.acp-nivel-2 { padding-left: 64px !important; }
.acp-nome { display: inline-block; vertical-align: top; max-width: calc(100% - 32px); }
.acp-mm { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; vertical-align: top; border: 1px solid var(--grade-forte);
  border-radius: 5px; font-weight: 700; line-height: 1; cursor: pointer; color: var(--marinho); background: var(--superficie); }
.acp-mm:hover { background: var(--neutro-fundo); }
.acp-mm:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
/* Coluna "Historico" e modal "Historico e calculo" (components/historicoCompras.js) */
.acp-col-hist { text-align: center !important; }
.acp-hist-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--grade-forte); border-radius: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--marinho); cursor: pointer; white-space: nowrap; }
.acp-hist-btn svg { width: 14px; height: 14px; }
.acp-hist-btn:hover { background: var(--neutro-fundo); }
.acp-hist-btn:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.acp-hist { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.acp-hist__cab { display: flex; justify-content: space-between; align-items: start; gap: var(--gap); padding: 18px 22px 12px; border-bottom: 1px solid var(--grade); }
.acp-hist__titulo { margin: 0; font-size: 1.15rem; color: var(--marinho); }
.acp-hist__sub { margin: 4px 0 0; font-size: 0.84rem; color: var(--texto-suave); }
.acp-hist__corpo { padding: 14px 22px 20px; display: grid; gap: 12px; overflow: auto; max-height: calc(100vh - 170px); }
.acp-hist__tabela { overflow-x: auto; }
.acp-hist__grade th, .acp-hist__grade td { padding: 7px 10px; font-size: 0.86rem; border-bottom: 1px solid var(--grade); }
.acp-hist__grade td { text-align: right; font-variant-numeric: tabular-nums; }
.acp-hist__grade tbody th { text-align: left; font-weight: 400; white-space: nowrap; }
.acp-hist__media > * { background: color-mix(in srgb, #f2b73c 16%, var(--superficie)); }
.acp-hist__parcial > * { font-style: italic; color: var(--texto-suave); }
.acp-hist__tag { font-size: 0.7rem; font-style: normal; border: 1px solid var(--grade-forte); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.acp-hist__nota { margin: 0; font-size: 0.78rem; color: var(--texto-suave); }
.acp-hist__conta { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 0.88rem; font-variant-numeric: tabular-nums; }