/* =========================================================================
   Talkline · Catalogo Novo Pedido — style.css (base herdada do Status Pedidos)
   Identidade visual ESPELHADA do painel "Fluxo de Entrada e Saida".
   Tema UNICO: branco + masthead teal escuro da marca (sem alternador).
   Sem nenhum CDN (offline-friendly). Comentarios em pt-BR sem acento.

   PALETA (manual Talkline / Burnier):
     teais:   #0A3C47 #134E5B #1B606E #247780  (analogas ciano #1E8C99 #16707C)
     claros:  #98C2CC #B8D6DC #CFE3E7 #E6F0F2
     neutros: #F3F2EF #202020 #303030 #3E3E3E
   ========================================================================= */

:root {
  --fundo:        #E6F0F2;   /* azul-claro da marca (fundo da pagina) */
  --painel:       #ffffff;   /* cards/paineis brancos */
  --log:          #08252b;   /* console de log: teal bem escuro */
  --texto:        #202020;   /* escuro da marca (texto no conteudo branco) */
  --texto-claro:  #F3F2EF;   /* texto sobre o masthead teal */
  --dim:          #4d717a;   /* teal-acinzentado (rotulos/secundario) */
  --teal:         #1B606E;   /* teal primario da marca */
  --teal-hover:   #247780;   /* teal da marca (hover) */
  --ok:           #1E8C99;   /* analoga ciano (acao confirmar) */
  --neutro:       #B8D6DC;   /* azul-claro da marca (botoes neutros) */

  /* Coluna Estoque: a largura mora AQUI porque o JS precisa dela para decidir
     quantos nomes de loja cabem inteiros na celula (ver EST_REGUA em app.js) e
     duas fontes de verdade para a mesma medida divergem no primeiro ajuste.
     --tabela-pad-x e o padding lateral da celula: o que sobra para o texto e
     --est-col menos duas vezes ele. */
  --est-col:      285px;
  --tabela-pad-x: 12px;

  --painel-borda: #B8D6DC;
  --painel-claro: #CFE3E7;
  --campo:        #ffffff;
  --erro:         #c0392b;
  --verde:        #0f9b86;   /* semantico: processado/ok */
  --amarelo:      #B45309;   /* semantico: nao processado/pendente (ambar quente:
                                o oliva antigo #9a7d10 embarrava em area grande) */
  --vermelho:     #c0504d;   /* semantico: erro */
  --azul-info:    #16707C;   /* semantico: info */
  --amarelo-forte:#97430B;   /* mesmo ambar, um degrau mais escuro: o --amarelo cai
                                para 4.26:1 sobre a linha da tabela em hover; este
                                fica em 5.70:1. Usado so em TEXTO de alerta. */

  /* tons do masthead teal escuro (cabecalho + abas + filtros = um bloco) */
  --mast-top:     #042124;
  --mast-bot:     #084450;
  --mast-filtros-top: #0a3c47;
  --mast-filtros-bot: #08303a;
  --mast-borda:   #1f4f58;
  --mast-dim:     #93c4cf;   /* rotulos claros sobre o teal escuro */
  --mast-campo:   #0f3a41;   /* fundo dos campos dentro do masthead */
  --mast-campo-borda: #2c6b78;

  --radius: 12px;
  --radius-sm: 9px;
  --sombra: 0 6px 20px rgba(20, 40, 80, .10);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}
[hidden] { display: none !important; }

/* ===================== LOGIN (usuario + senha) ===================== */
.overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #CFE3E7 0%, var(--fundo) 65%);
  z-index: 50;
}
.login-card {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: 16px;
  border-top: 3px solid var(--ok);
  padding: 34px 30px 30px;
  width: 360px; max-width: 92vw;
  box-shadow: 0 18px 50px rgba(8, 48, 58, .22);
  display: grid; gap: 12px;
}
.login-logo {
  color: var(--teal); font-weight: 800; letter-spacing: .5px; font-size: 15px;
}
.login-titulo { margin: 0; font-size: 22px; font-weight: 700; color: var(--texto); }
.login-sub { margin: 0 0 6px; color: var(--dim); font-size: 13px; }

.campo { display: grid; gap: 5px; }
.campo > span { font-size: 12px; color: var(--dim); font-weight: 600; }
.campo input, .campo select,
.campo-inline input, .campo-inline select {
  background: var(--campo);
  border: 1px solid var(--painel-borda);
  color: var(--texto);
  border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; outline: none; width: 100%;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus,
.campo-inline input:focus, .campo-inline select:focus {
  border-color: var(--teal-hover);
  box-shadow: 0 0 0 3px rgba(36, 119, 128, .14);
}
.erro { color: var(--erro); font-size: 13px; margin: 2px 0; }

/* ===================== BOTOES ===================== */
.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 18px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #fff;
  background: var(--teal);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit;
  transition: background .15s, opacity .15s, transform .05s, box-shadow .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-bloco { width: 100%; justify-content: center; }
.btn-pq { padding: 7px 13px; font-size: 13px; }

/* teal primario com leve gradiente + profundidade */
.btn-primario {
  background: linear-gradient(180deg, #247780 0%, var(--teal) 100%);
  box-shadow: 0 2px 10px rgba(30, 140, 153, .22);
}
.btn-primario:hover:not(:disabled) {
  background: linear-gradient(180deg, #2a8b98 0%, var(--teal-hover) 100%);
}
/* ciano da marca (acao confirmar / exportar) */
.btn-ok {
  background: linear-gradient(180deg, #1E8C99 0%, #16707C 100%);
  box-shadow: 0 2px 10px rgba(30, 140, 153, .20);
}
.btn-ok:hover:not(:disabled) { background: linear-gradient(180deg, #2a9eab 0%, #1b818f 100%); }
/* perigo (parar) */
.btn-perigo { background: linear-gradient(180deg, #d06b67 0%, var(--vermelho) 100%); }
.btn-perigo:hover:not(:disabled) { background: linear-gradient(180deg, #d77c78 0%, #b2473f 100%); }
/* fantasma: usado dentro do masthead teal -> texto claro */
.btn-fantasma {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  color: #ffffff;
}
.btn-fantasma:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.btn-icone { background: transparent; border: none; cursor: pointer; font-size: 18px; }

/* ===================== MASTHEAD (cabecalho + abas + filtros) =====================
   Bloco teal escuro CONTINUO no topo: header sticky -> abas dentro -> filtros sticky.
   Espelha o masthead do Fluxo (cabecalho gradiente + barra de filtros teal escuro). */
.topo {
  display: flex; align-items: center; gap: 18px;
  height: 60px;            /* altura fixa: ancora o sticky encadeado da barra de filtros */
  padding: 0 22px;
  background: linear-gradient(180deg, var(--mast-top) 0%, var(--mast-bot) 100%);
  border-bottom: none;
  position: sticky; top: 0; z-index: 700;
}
.topo-esq { display: flex; align-items: baseline; gap: 12px; }
.marca { color: #ffffff; font-weight: 800; letter-spacing: .3px; }
.topo-titulo { color: rgba(235, 248, 250, .82); font-size: 13px; }

/* Abas em pilula, centralizadas (estilo do toggle do Fluxo) */
.abas {
  display: flex; gap: 5px;
  margin-left: auto;
  padding: 5px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
}
.aba {
  background: transparent; border: none;
  color: rgba(255, 255, 255, .82); cursor: pointer;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  white-space: nowrap;
  transition: color .15s, background .15s, box-shadow .15s;
  font-family: inherit;
}
.aba:hover { color: #ffffff; }
.aba.ativa {
  background: #ffffff; color: var(--teal);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
.topo-dir { display: flex; align-items: center; gap: 12px; }
.topo-usuario { color: rgba(235, 248, 250, .82); font-size: 13px; }

/* Faixa de aviso (deps): logo abaixo do cabecalho, ainda dentro do bloco teal.
   Rola junto com o conteudo (nao compete pelo sticky com cabecalho/filtros). */
.faixa-aviso {
  margin: 0; padding: 9px 22px;
  background: rgba(232, 201, 90, .14);
  color: #ffe6a6;
  border-bottom: 1px solid var(--mast-borda);
  font-size: 13px;
}

/* ===================== PAINEIS ===================== */
.painel-aba { display: none; padding: 0 22px 28px; }
.painel-aba.ativa { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===================== FILTROS (barra sticky on-brand, fecha o masthead) =====================
   A barra de filtros/acoes do Dashboard "gruda" ABAIXO do cabecalho com o mesmo
   teal escuro, formando o bloco continuo pedido. */
.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 14px 22px;
  margin: 0 -22px 18px;   /* estende de borda a borda dentro do .painel-aba (que tem padding lateral) */
  background: linear-gradient(180deg, var(--mast-filtros-top) 0%, var(--mast-filtros-bot) 100%);
  border-bottom: 1px solid var(--mast-borda);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  position: sticky; top: 60px; z-index: 600;   /* 60px = altura do .topo: encadeia o bloco */
}
/* A barra de filtros do Historico e simples (so um botao): nao precisa colar */
.painel-aba[data-painel="historico"] .filtros {
  position: static; box-shadow: none; justify-content: flex-end;
}

.campo-inline { display: grid; gap: 5px; }
.campo-inline > span {
  font-size: 11px; color: var(--mast-dim); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  display: flex; align-items: center; gap: 7px;
}
/* barrinha de acento teal no rotulo (estilo Meta/Fluxo) */
.filtros .campo-inline > span::before {
  content: ""; width: 3px; height: 11px; border-radius: 2px;
  background: var(--teal-hover); flex: none;
}
.campo-inline.cresce { flex: 1; min-width: 200px; }
.campo-inline select, .campo-inline input { min-width: 150px; }

/* campos DENTRO do masthead teal: fundo teal escuro, texto claro */
.filtros .campo-inline input,
.filtros .campo-inline select {
  background: var(--mast-campo);
  border: 1px solid var(--mast-campo-borda);
  color: #eaf4f5;
}
.filtros .campo-inline input::placeholder { color: #6f9aa4; }
.filtros .campo-inline input:focus,
.filtros .campo-inline select:focus {
  border-color: #34a7b6;
  box-shadow: 0 0 0 3px rgba(52, 167, 182, .16);
}
.filtros .campo-inline input[type="date"] { color-scheme: dark; font-variant-numeric: tabular-nums; }
.filtros .campo-inline select {
  appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2393c4cf' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
/* intervalo de datas (De / Ate) lado a lado com travessao */
.campo-intervalo { display: flex; align-items: center; gap: 7px; }
.campo-intervalo input[type="date"] { min-width: 140px; }
.campo-intervalo .sep { color: var(--mast-dim); font-weight: 700; }

/* acoes da barra (Atualizar / Baixar Excel / Planilha / Limpar) alinham na base */
.filtros .btn { align-self: flex-end; }
/* Limpar filtros: outline teal claro sobre o masthead escuro */
.btn-limpar {
  background: transparent;
  border-color: var(--teal-hover);
  color: #bfe3ea;
}
.btn-limpar:hover:not(:disabled) { background: rgba(36, 119, 128, .22); color: #fff; }
/* contador de filtros ativos (chip branco com numero ciano) */
.filtros-contador {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; background: #ffffff; color: #16707C;
  font-size: 11px; font-weight: 800; line-height: 1;
}

/* ===================== MULTI-SELECT (filtros Loja/UF/Cliente) =====================
   Portado do Fluxo. Botao com as cores do masthead teal escuro; painel branco
   (lista de itens) para legibilidade maxima sobre a barra escura. */
.ms { position: relative; width: 100%; min-width: 150px; }
.ms-botao {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--mast-campo);
  border: 1px solid var(--mast-campo-borda);
  border-radius: var(--radius-sm);
  color: #eaf4f5;
  font-size: 14px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ms-botao:hover { border-color: #34a7b6; }
.ms.aberto .ms-botao { border-color: #34a7b6; box-shadow: 0 0 0 3px rgba(52, 167, 182, .16); }
.ms.ms-ativo .ms-botao { border-color: #34a7b6; }
.ms-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ms-seta { color: var(--mast-dim); font-size: 11px; flex: none; transition: transform .15s; }
.ms.aberto .ms-seta { transform: rotate(180deg); }

.ms-painel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(8, 48, 58, .25);
  padding: 8px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}
.ms-busca {
  background: var(--campo);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius-sm);
  color: var(--texto);
  font-size: 14px;
  padding: 8px 10px;
  width: 100%;
  margin-bottom: 6px;
  font-family: inherit;
}
.ms-busca::placeholder { color: #9aa7ab; }
.ms-busca:focus { outline: none; border-color: var(--teal-hover); box-shadow: 0 0 0 3px rgba(36, 119, 128, .14); }
.ms-acoes {
  display: flex; gap: 16px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--painel-borda);
  margin-bottom: 6px;
}
.ms-todos, .ms-limpar {
  background: none; border: none;
  color: var(--dim);
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; cursor: pointer; padding: 0;
  font-family: inherit;
}
.ms-todos:hover, .ms-limpar:hover { color: var(--teal); }
.ms-lista { overflow-y: auto; }
.ms-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 6px; border-radius: 5px; cursor: pointer; font-size: 14px;
  color: var(--texto);
}
.ms-item:hover { background: rgba(27, 96, 110, .08); }
.ms-item input { accent-color: var(--teal); width: 15px; height: 15px; cursor: pointer; flex: none; }
.ms-vazio { color: var(--dim); font-style: italic; font-size: 13px; padding: 10px 6px; }
.ms-lista::-webkit-scrollbar { width: 8px; }
.ms-lista::-webkit-scrollbar-thumb { background: #b9d1d7; border-radius: 6px; }
.ms-lista::-webkit-scrollbar-track { background: transparent; }

/* BLINDAGEM: as regras genericas de campo do masthead (.campo-inline input/select
   e .filtros .campo-inline input) NAO podem vazar para dentro do multiselect — senao
   estragam os checkboxes (padding/width/fundo teal) e a busca. Especificidade maior
   (.filtros .campo-inline .ms-* = 0,3,x) ganha das regras genericas (0,1,1 / 0,2,1). */
.filtros .campo-inline .ms-busca {
  width: 100%; padding: 8px 10px; font-size: 14px;
  background: #ffffff; color: var(--texto);
  border: 1px solid var(--painel-borda); border-radius: var(--radius-sm);
}
.filtros .campo-inline .ms-busca::placeholder { color: #9aa7ab; }
.filtros .campo-inline .ms-item input {
  width: 16px; height: 16px; min-width: 0; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  accent-color: var(--teal); flex: none;
}
/* rotulo das opcoes: texto escuro e legivel no painel branco (e ocupa o espaco) */
.filtros .campo-inline .ms-item { color: var(--texto); }
.filtros .campo-inline .ms-item span { color: var(--texto); flex: 1 1 auto; min-width: 0; }
.filtros .campo-inline .ms-vazio { color: var(--dim); }
/* painel um pouco mais largo que o botao, para nomes longos de loja respirarem */
.ms-painel { min-width: 230px; }

/* ===================== CARDS / KPIs ===================== */
.cards {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.card {
  display: flex; align-items: center; gap: 10px;
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: 12px;
  padding: 11px 12px;
  box-shadow: 0 2px 10px rgba(20, 60, 71, .06);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.card:hover {
  border-color: rgba(30, 140, 153, .5);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(8, 48, 58, .14);
}
.card-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.card-ico svg { width: 18px; height: 18px; display: block; }
.card-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.card-rot {
  color: var(--dim); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; line-height: 1.15;
}
.card-num {
  font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* responsivo: quebra em telas menores em vez de espremer demais */
@media (max-width: 1180px) { .cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px)  { .cards { grid-template-columns: repeat(2, 1fr); } }

/* tintas dos icones: fundo translucido + glifo solido */
.ico-teal     { background: rgba(27, 96, 110, .14);  color: #1B606E; }
.ico-ok       { background: rgba(30, 140, 153, .14); color: #1E8C99; }
.ico-verde    { background: rgba(15, 155, 134, .15); color: #0f9b86; }
.ico-amarelo  { background: rgba(154, 125, 16, .16); color: #9a7d10; }
.ico-info     { background: rgba(22, 112, 124, .14); color: #16707C; }
.ico-vermelho { background: rgba(192, 80, 77, .15);  color: #c0504d; }

/* valores com cor semantica */
.card-ok .card-num   { color: var(--verde); }
.card-warn .card-num { color: var(--amarelo); }
.card-num.num-teal   { color: var(--teal); }

.meta { color: var(--dim); font-size: 13px; margin: 4px 0 12px; }

/* ===================== TABELAS ===================== */
.tabela-wrap {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius);
  overflow: auto; max-height: 62vh;
  box-shadow: var(--sombra);
  /* container do detalhe inline da coluna Estoque. Tem de ser ESTE elemento: e o
     scroller, entao a largura dele e o espaco que o usuario realmente enxerga —
     ao contrario do <td colspan>, que tem a largura da tabela inteira. */
  container: tabela / inline-size;
}
/* ---- sinal de que a tabela ROLA ----
   Em ~980px a tabela (1170px) nao cabe no wrap: o cabecalho mostrava "Esto"
   cortado no meio da palavra e os dados da coluna Estoque sumiam — le como dado
   FALTANDO, nao como dado escondido.
   As faixas ficam ACIMA do conteudo (pseudo-elementos de um pai posicionado), e
   NAO no background do scroller: o truque de background-attachment: local pinta
   atras das linhas, e aqui elas tem fundo proprio (zebra .linha-par, hover, thead
   sticky) que cobriria o fade em metade da tabela. As classes .rola-esq/.rola-dir
   vem do JS (app.js, marcarRolagem): CSS sozinho nao sabe se ainda ha o que rolar,
   entao o fade some ao chegar em cada ponta. */
.tabela-scroll { position: relative; min-width: 0; --th-alt: 39px; }
.tabela-scroll::before, .tabela-scroll::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 26px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .18s ease-out;
}
/* Cada faixa tem TRES camadas, porque ela atravessa dois fundos opostos: o thead
   (gradiente TEAL, escuro) e as linhas (branco). Um esfumado teal so aparece no
   corpo — sobre o cabecalho ele some, e e justamente ali que o texto fica cortado
   no meio da palavra ("Est"), lendo como bug de layout e nao como dado escondido.
     1) fio de 2px atravessando a altura inteira: claro na faixa do cabecalho,
        teal da faixa dele para baixo — e o "aqui corta", visivel nos dois fundos;
     2) veu claro limitado a faixa do cabecalho (--th-alt vem do JS, medido no
        proprio <th>: hardcodar a altura deixaria um degrau visivel no veu);
     3) o esfumado teal de sempre, para o corpo da tabela.
   Nao da para trocar as duas camadas de cor por uma so: elas pintam a faixa
   INTEIRA, entao um veu claro por cima lavaria o esfumado teal do corpo. */
.tabela-scroll::before {
  left: 1px; border-radius: var(--radius) 0 0 var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .85) 0 var(--th-alt),
                            rgba(27, 96, 110, .38) var(--th-alt)) left top / 2px 100% no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0))
      left top / 100% var(--th-alt) no-repeat,
    linear-gradient(90deg, rgba(27, 96, 110, .22), rgba(27, 96, 110, 0));
}
.tabela-scroll::after {
  right: 1px; border-radius: 0 var(--radius) var(--radius) 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .85) 0 var(--th-alt),
                            rgba(27, 96, 110, .38) var(--th-alt)) right top / 2px 100% no-repeat,
    linear-gradient(270deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0))
      right top / 100% var(--th-alt) no-repeat,
    linear-gradient(270deg, rgba(27, 96, 110, .22), rgba(27, 96, 110, 0));
}
.tabela-scroll.rola-esq::before, .tabela-scroll.rola-dir::after { opacity: 1; }

.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela thead th {
  position: sticky; top: 0;
  background: linear-gradient(180deg, var(--teal-hover) 0%, var(--teal) 100%);
  color: #ffffff; text-align: left;
  padding: 10px 12px; font-weight: 700; white-space: nowrap; z-index: 1;
}
/* cabecalho clicavel p/ ordenar (setinha ▲/▼). O <th> so pinta; quem clica e
   recebe foco de teclado e o <button> interno, que ocupa a celula inteira. */
.tabela thead th.th-sort { padding: 0; user-select: none; }
.tabela thead th.th-sort:hover { background: linear-gradient(180deg, var(--ok) 0%, var(--teal-hover) 100%); }
.tabela thead th.th-ativo { background: linear-gradient(180deg, var(--ok) 0%, var(--azul-info) 100%); }
.th-sort-bt {
  display: flex; align-items: center; width: 100%;
  margin: 0; padding: 10px 12px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; white-space: nowrap;
  cursor: pointer;
}
.th-sort-bt:focus-visible { outline: 2px solid #fff; outline-offset: -3px; border-radius: 3px; }
.tabela thead th .th-seta { margin-left: 6px; font-size: 10px; opacity: .95; }
.tabela thead th .th-seta-dim { opacity: .4; font-weight: 400; }   /* "↕" discreto = ordenável */
.tabela tbody td {
  padding: 9px var(--tabela-pad-x); border-top: 1px solid var(--painel-borda);
  vertical-align: top; color: var(--texto);
}
.tabela tbody tr:nth-child(even) { background: #f4f9fa; }
.tabela tbody tr:hover td { background: rgba(27, 96, 110, .07); }
.tabela-vazia { text-align: center; color: var(--dim); padding: 22px; font-style: italic; }
.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.col-centro { text-align: center; }

/* ===================== PILULAS DE STATUS ===================== */
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.pill-done    { background: rgba(15, 155, 134, .16); color: #0f9b86; }
.pill-stopped { background: rgba(154, 125, 16, .18); color: #9a7d10; }
.pill-error   { background: rgba(192, 80, 77, .16); color: #c0504d; }
.pill-running { background: rgba(30, 140, 153, .16); color: #16707C; }

/* % processado por linha */
.td-pct { white-space: nowrap; }
.pct {
  display: inline-block; min-width: 46px; text-align: center;
  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.pct-full { background: rgba(15, 155, 134, .16); color: #0f9b86; }
.pct-part { background: rgba(154, 125, 16, .18); color: #9a7d10; }
.pct-zero { background: rgba(192, 80, 77, .16); color: #c0504d; }

/* ===================== RODAR ===================== */
.run-grid { display: grid; grid-template-columns: 400px 1fr; gap: 16px; padding-top: 18px; }
@media (max-width: 860px) { .run-grid { grid-template-columns: 1fr; } }
.card-box {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--sombra);
}
.card-box h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--texto); }
.ajuda { color: var(--dim); font-size: 13px; margin: 0 0 14px; }
.run-form .campo { margin-bottom: 12px; }
.run-datas { display: grid; grid-template-columns: 1fr 1fr;
  place-items: stretch;   /* nao herdar align-items:center de regra antiga */
  place-content: stretch; gap: 12px; }
.run-botoes { display: flex; gap: 10px; margin-top: 6px; }

.token-box {
  margin-top: 14px; padding: 13px;
  background: rgba(154, 125, 16, .10);
  border: 1px solid var(--amarelo);
  border-radius: var(--radius-sm);
}
.token-rot { display: block; font-size: 13px; margin-bottom: 8px; color: var(--texto); font-weight: 600; }
.token-linha { display: flex; gap: 8px; }
.token-linha input {
  flex: 1; background: var(--campo); border: 1px solid var(--painel-borda);
  color: var(--texto); border-radius: var(--radius-sm); padding: 9px 11px; font-family: inherit;
}
.token-linha input:focus { outline: none; border-color: var(--teal-hover); box-shadow: 0 0 0 3px rgba(36, 119, 128, .14); }

.progresso-wrap { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.progresso {
  flex: 1; height: 10px; background: var(--painel-claro);
  border: 1px solid var(--painel-borda); border-radius: 999px; overflow: hidden;
}
.progresso-preenchido {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal) 0%, var(--ok) 100%);
  transition: width .3s;
}
.progresso-texto { color: var(--dim); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* console de log: teal bem escuro (mantem legibilidade do log colorido) */
.console {
  background: var(--log);
  border: 1px solid #15302f;
  border-radius: var(--radius-sm);
  color: #cfe6e6;
  padding: 14px 16px; height: 60vh; overflow: auto; margin: 0;
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.console-linha.log-ok    { color: #4fd2c0; }
.console-linha.log-erro  { color: #e08585; }
.console-linha.log-aviso { color: #e8c95a; }
.console-linha.log-info  { color: #9fcdd7; }
.console::-webkit-scrollbar,
.tabela-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.console::-webkit-scrollbar-thumb { background: #2a4a4a; border-radius: 6px; }
.tabela-wrap::-webkit-scrollbar-thumb { background: #b9d1d7; border-radius: 6px; }
.console::-webkit-scrollbar-track,
.tabela-wrap::-webkit-scrollbar-track { background: transparent; }

/* ===================== RODAPE / TOAST ===================== */
.rodape {
  padding: 14px 22px; color: var(--dim); font-size: 12px;
  border-top: 1px solid var(--painel-borda); background: var(--fundo);
}
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--painel); border: 1px solid var(--painel-borda);
  color: var(--texto);
  padding: 12px 20px; border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(8, 48, 58, .25);
  z-index: 100; font-size: 14px; max-width: 80vw;
}
.toast-erro { border-color: var(--erro); color: var(--erro); }
.toast-ok   { border-color: var(--ok); color: var(--verde); }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 880px) {
  /* cabecalho quebra em linhas no mobile: solta a altura fixa e o sticky encadeado */
  .topo { flex-wrap: wrap; gap: 12px; height: auto; padding: 12px 22px; position: static; }
  .abas { margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
  .topo-dir { margin-left: auto; }
  .filtros { position: static; }   /* sem sticky quando o cabecalho nao tem altura fixa */
  .filtros .campo-inline { flex: 1 1 100%; min-width: 0; }
  .campo-inline select, .campo-inline input { min-width: 0; }
  .campo-intervalo input[type="date"] { min-width: 0; flex: 1; }
}

/* ====================== LOGIN OPT-IN (portal WhatsApp) ====================== */
.login-card form { display: grid; gap: 12px; text-align: left; }
.login-etapa { display: block; text-align: center; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dim); margin: 0; }
.login-etapa-mini { margin-top: 6px; opacity: .85; }
.login-card .login-titulo, .login-card .login-sub { text-align: center; }
/* etapa 1: guia numerada */
.login-guia { list-style: none; margin: 0; padding: 14px; display: grid; gap: 12px;
  background: var(--painel-claro); border: 1px solid var(--painel-borda); border-radius: var(--radius-sm); }
.login-guia li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.login-guia li b { color: var(--texto); }
.guia-num { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal);
  color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
/* etapa 2: caixa de info + whatsapp + copiar */
.login-info { font-size: 12.5px; color: var(--dim); line-height: 1.4; padding: 11px 13px;
  border-left: 3px solid var(--teal); background: var(--painel-claro); border-radius: 8px; }
.login-info b { color: var(--texto); }
.phone-display { font-family: Consolas, Monaco, monospace; font-weight: 700; color: var(--texto); }
.input-otp { text-align: center; font-size: 24px; letter-spacing: 10px; font-variant-numeric: tabular-nums; }
.btn-whats { background: #25D366 !important; color: #fff !important; display: flex; align-items: center;
  justify-content: center; gap: 8px; border: none; text-decoration: none; }
.btn-whats:hover { background: #1ebe57 !important; }
.login-link { background: none; border: none; color: var(--dim); font-size: 12.5px;
  cursor: pointer; font-family: inherit; padding: 4px 2px; }
.login-link:hover { color: var(--texto); text-decoration: underline; }
.login-link-copiar { display: block; width: 100%; text-align: center; margin: 0; }
.login-acoes { display: flex; justify-content: space-between; gap: 10px; }
.login-acoes-centro { justify-content: center; }
.login-alt { text-align: center; }

/* =====================================================================
   OVERLAY DE LOGIN — split-screen "Fiel-ao-CRM" (versao final)
   Base: Design 0 (mais robusto). Enxertos: halos/glow e sheen (D1),
   eyebrow com acento teal (D2), icones traco fino (D2), wave animado
   com guarda de movimento (D1), apoio sob o OTP e OTP limpo/centrado (D2).
   Esquerda teal-escura (marca) + direita creme (form). Visual IDENTICO
   nos dois temas: tudo escopado em .login-overlay para nao ser afetado
   por body.tema-claro. Comentarios em pt-BR sem acento.
   ===================================================================== */

/* tokens locais so do login (nao dependem do tema do painel) */
.login-overlay {
  --lg-teal-1: #08252b;   /* petroleo topo-esquerda */
  --lg-teal-2: #0b2e34;
  --lg-teal-3: #114550;   /* teal baixo-direita */
  --lg-mint:   #9fcdd7;
  --lg-creme:  #f6f1e9;   /* superficie clara e quente */
  --lg-creme-2:#efe7db;
  --lg-tinta:  #10343b;   /* texto escuro sobre creme */
  --lg-mudo:   #5b6e72;   /* subtitulo mudo */
  --lg-borda-in: #ddd3c4; /* borda quente dos inputs */
  --lg-anel:   #1B606E;   /* anel de foco teal */
}

/* raiz: duas colunas 50/50, ocupa a tela toda, sem scroll horizontal.
   !important vence o display:flex do overlay base, se houver. */
.login-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid !important;
  grid-template-columns: 1.7fr 1fr;  /* painel do video maior p/ o logo caber inteiro */
  place-items: stretch;   /* nao herdar align-items:center de regra antiga */
  place-content: stretch;
  background: var(--lg-creme);   /* fallback do lado direito */
  overflow-x: hidden;            /* nunca scroll horizontal */
  overflow-y: auto;
}

/* ---------------------- COLUNA ESQUERDA: MARCA ---------------------- */
.login-overlay .login-marca {
  position: relative;
  background: linear-gradient(135deg, var(--lg-teal-1) 0%, var(--lg-teal-2) 42%, var(--lg-teal-3) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 56px 60px;
  overflow: hidden;
}
/* video de fundo (logo Talkline): preenche a coluna, bordas desvanecem no teal
   (mask radial). Tint teal por cima garante a legibilidade do texto branco. */
.login-overlay .login-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
.login-overlay .login-video-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(8, 37, 43, 0.90) 0%, rgba(11, 46, 52, 0.76) 44%, rgba(17, 69, 80, 0.58) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .login-overlay .login-video { display: none; }
}
/* halos radiais suaves (glow premium) — profundidade sem virar template */
.login-overlay .login-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
}
.login-overlay .login-glow-1 {
  width: 460px; height: 460px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(79,210,192,0.16) 0%, rgba(79,210,192,0) 68%);
}
.login-overlay .login-glow-2 {
  width: 520px; height: 520px;
  bottom: -160px; right: -150px;
  background: radial-gradient(circle, rgba(143,191,200,0.14) 0%, rgba(143,191,200,0) 70%);
}
.login-overlay .login-marca-inner {
  position: relative;   /* acima dos halos */
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* lockup marca */
.login-overlay .login-lockup { display: flex; align-items: center; gap: 11px; }
.login-overlay .login-lockup-ico { flex: none; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.30)); }
.login-overlay .login-lockup-word {
  position: relative;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
  padding-right: 10px;
}
.login-overlay .login-lockup-dot {
  position: absolute;
  right: 0; bottom: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lg-mint);
  box-shadow: 0 0 10px rgba(159,205,215,0.6);
}

/* eyebrow editorial + fino acento teal em degrade */
.login-overlay .login-eyebrow {
  position: relative;
  display: inline-block;
  margin: 6px 0 -2px;
  padding-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--lg-mint);
  align-self: flex-start;
}
.login-overlay .login-eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 4px;
  width: 34px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8fbfc8, rgba(143,191,200,0));
}

.login-overlay .login-marca-titulo {
  margin: 2px 0 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #fff;
  text-wrap: balance;
  max-width: 18ch;
}
.login-overlay .login-marca-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lg-mint);
  max-width: 40ch;
}

/* cards de recurso */
.login-overlay .login-cards {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-overlay .login-card-feat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  overflow: hidden;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* sheen sutil no topo do card (acabamento premium) */
.login-overlay .login-card-feat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.login-overlay .login-card-feat:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(159,205,215,0.28);
  box-shadow: 0 12px 28px rgba(0,0,0,0.26);
}
.login-overlay .login-card-tile {
  position: relative;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(143,191,200,0.14);
  border: 1px solid rgba(159,205,215,0.18);
  display: grid;
  place-items: center;
}
.login-overlay .login-card-txt { display: flex; flex-direction: column; gap: 2px; }
.login-overlay .login-card-txt strong { font-size: 15px; font-weight: 700; color: #fff; }
.login-overlay .login-card-txt span   { font-size: 13px; color: var(--lg-mint); line-height: 1.35; }

/* ---------------------- COLUNA DIREITA: FORMULARIO ---------------------- */
.login-overlay .login-form-wrap {
  background: radial-gradient(120% 90% at 100% 0%, var(--lg-creme) 0%, var(--lg-creme-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow-y: auto;
}
.login-overlay .login-form-inner {
  width: 100%;
  max-width: 380px;
}

/* anti-overflow horizontal: itens de grid/flex tem min-width:auto e NAO encolhem
   abaixo do min-content do conteudo. O input do codigo (letter-spacing grande +
   size=20 default) tem min-content ~418px e estouraria a tela no mobile. Zerar o
   min-width deixa o width:100% mandar e a largura respeitar o viewport. */
.login-overlay .login-marca,
.login-overlay .login-form-wrap,
.login-overlay .login-marca-inner,
.login-overlay .login-form-inner { min-width: 0; }
.login-overlay .login-campo .input,
.login-overlay .input.login-input-otp { max-width: 100%; }

/* faixa de marca reduzida (so aparece no mobile) */
.login-overlay .login-marca-mini {
  display: none;
  margin-bottom: 18px;
}

/* wordmark escura (texto #123, dot teal) — sobrescreve a .wordmark base */
.login-overlay .login-word-dark {
  position: relative;
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #123;
  padding-right: 11px;
  margin-bottom: 24px;
}
.login-overlay .login-word-dark-dot {
  position: absolute;
  right: 0; bottom: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lg-anel);
}

.login-overlay .login-bemvindo {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--lg-tinta);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* aceno do emoji (curto, so 2 ciclos) — guardado por reduced-motion */
.login-overlay .login-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: lgAceno 2.4s ease-in-out 0.5s 2;
}
@keyframes lgAceno {
  0%,60%,100% { transform: rotate(0); }
  10%,30%,50% { transform: rotate(14deg); }
  20%,40%     { transform: rotate(-8deg); }
}
.login-overlay .login-form-sub {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lg-mudo);
}

/* labels do form (sobrescreve o estilo mint/escuro do painel) */
.login-overlay .campo-label {
  display: block;
  margin: 16px 0 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #46595d;
}
.login-overlay form > .campo-label:first-of-type { margin-top: 0; }

/* wrapper do input com icone interno */
.login-overlay .login-campo { position: relative; }
.login-overlay .login-campo-ico {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #7c9298;      /* icone mudo sobre branco */
  pointer-events: none;
  transition: color 0.15s ease;
}
.login-overlay .login-campo:focus-within .login-campo-ico { color: var(--lg-anel); }

/* INPUTS claros (sobrescreve o .input escuro do painel; especificidade
   0,3,0 vence body.tema-claro .input que e 0,2,0) */
.login-overlay .login-campo .input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  background: #ffffff;
  color: var(--lg-tinta);
  border: 1px solid var(--lg-borda-in);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(16,52,59,0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color-scheme: light;   /* evita autofill/tema escuro herdado */
}
.login-overlay .login-campo .input::placeholder { color: #a9b3b4; }
.login-overlay .login-campo .input:hover { border-color: #c7bdad; }
.login-overlay .login-campo .input:focus {
  outline: none;
  border-color: var(--lg-anel);
  box-shadow: 0 0 0 3px rgba(27,96,110,0.18);
}

/* CODIGO do autenticador: limpo, sem icone, centrado de verdade e simetrico.
   Especificidade 0,2,1 vence body.tema-claro .input (0,2,0). */
.login-overlay .input.login-input-otp {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  background: #ffffff;
  color: var(--lg-tinta);
  border: 1px solid var(--lg-borda-in);
  border-radius: 10px;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(16,52,59,0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color-scheme: light;
  /* digitos espacados e centrados: text-indent compensa o letter-spacing
     do ultimo digito, mantendo o bloco otico no centro */
  text-align: center;
  letter-spacing: 10px;
  text-indent: 10px;
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.login-overlay .input.login-input-otp::placeholder { color: #c2cac9; font-weight: 700; }
.login-overlay .input.login-input-otp:hover { border-color: #c7bdad; }
.login-overlay .input.login-input-otp:focus {
  outline: none;
  border-color: var(--lg-anel);
  box-shadow: 0 0 0 3px rgba(27,96,110,0.18);
}

/* texto de apoio sob o OTP */
.login-overlay .login-apoio {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: #7d8c8f;
}

/* BOTAO entrar: gradiente teal-escuro, alto, com seta via ::after.
   A seta NUNCA e um filho DOM porque o JS troca btn.textContent — ::after
   sobrevive ao swap e some sozinha no estado :disabled ("Entrando..."). */
.login-overlay .login-btn {
  width: 100%;
  height: 52px;
  margin-top: 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #1c6a78 0%, #124450 100%);
  box-shadow: 0 10px 22px rgba(17,69,80,0.28), inset 0 1px 0 rgba(255,255,255,0.14);
  transition: transform 0.06s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.login-overlay .login-btn::after {
  content: " →";
  display: inline-block;
  white-space: pre;
  font-weight: 700;
  transition: transform 0.18s ease;
}
.login-overlay .login-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 14px 30px rgba(17,69,80,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
}
.login-overlay .login-btn:hover:not(:disabled)::after { transform: translateX(3px); }
.login-overlay .login-btn:active:not(:disabled) { transform: translateY(1px); }
.login-overlay .login-btn:disabled {
  opacity: 0.7;
  cursor: default;
  box-shadow: none;
}
.login-overlay .login-btn:disabled::after { content: ""; }
.login-overlay .login-btn:focus-visible {
  outline: 3px solid rgba(27,96,110,0.35);
  outline-offset: 2px;
}

/* linha de erro (sobre creme) */
.login-overlay .login-erro {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(224,133,133,0.12);
  border: 1px solid rgba(224,133,133,0.4);
  color: #b4453f;
  font-size: 13px;
  text-align: center;
}

/* link cadastrar autenticador */
.login-overlay .login-alt { text-align: center; margin-top: 16px; }
.login-overlay .login-link {
  background: none; border: none;
  color: var(--lg-mudo);
  font-size: 13px; font-family: inherit;
  cursor: pointer; text-decoration: none;
  padding: 4px 2px;
}
.login-overlay .login-link:hover { color: var(--lg-anel); text-decoration: underline; }
.login-overlay .login-link:focus-visible { outline: 2px solid var(--lg-anel); outline-offset: 3px; border-radius: 3px; }

/* entrada suave dos dois lados */
@keyframes lgFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.login-overlay .login-marca-inner { animation: lgFadeIn 0.5s ease both; }
.login-overlay .login-form-inner  { animation: lgFadeUp 0.45s ease both; }
.login-overlay .login-card-feat   { animation: lgFadeUp 0.5s ease both; }
.login-overlay .login-card-feat:nth-child(1) { animation-delay: 0.06s; }
.login-overlay .login-card-feat:nth-child(2) { animation-delay: 0.12s; }
.login-overlay .login-card-feat:nth-child(3) { animation-delay: 0.18s; }

/* ---------------------- RESPONSIVO ---------------------- */
/* abaixo de 860px: esconde a coluna de marca, form ocupa a tela toda */
@media (max-width: 860px) {
  .login-overlay:not([hidden]) { grid-template-columns: 1fr; }
  .login-overlay .login-marca { display: none; }
  .login-overlay .login-form-wrap { padding: 28px 22px; }
  .login-overlay .login-marca-mini { display: block; }   /* mostra o lockup mini no topo */
  .login-overlay .login-bemvindo { font-size: 27px; }
}
@media (max-width: 400px) {
  .login-overlay .login-bemvindo { font-size: 25px; }
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .login-overlay .login-marca-inner,
  .login-overlay .login-form-inner,
  .login-overlay .login-card-feat,
  .login-overlay .login-wave { animation: none !important; }
  .login-overlay .login-card-feat,
  .login-overlay .login-btn,
  .login-overlay .login-btn::after,
  .login-overlay .login-campo-ico { transition: none !important; }
}

/* ---------------------- BLINDAGEM DE TEMA ----------------------
   Garante o mesmo visual mesmo com body.tema-claro: o overlay define
   suas proprias cores. body.tema-claro .login-overlay (0,2,0) vence o
   fundo do painel definido no style.css base. */
body.tema-claro .login-overlay,
.login-overlay { background: var(--lg-creme); }
body.tema-claro .login-overlay .login-campo .input,
body.tema-claro .login-overlay .input.login-input-otp { color-scheme: light; }


/* =========================================================================
   RESUMO DO DASHBOARD (substitui a fileira de 8 cards iguais)
   Duas zonas: "Atendimento" (o balanco) e "Onde esta faltando" (assinatura:
   barras por loja, ranqueadas pelo que ainda nao chegou). Numeros em tabular
   para as colunas nao dancarem entre atualizacoes.
   ========================================================================= */
.resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 16px;
}
/* 980–1279px: volta as duas colunas originais e o funil ocupa a linha inteira
   embaixo (comprimir tres colunas nessa faixa quebra os nomes de loja). */
@media (max-width: 1279px) {
  .resumo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .resumo-estoque { grid-column: 1 / -1; }
}
@media (max-width: 979px) {
  .resumo { grid-template-columns: minmax(0, 1fr); }
  .resumo-estoque { grid-column: auto; }
}

.resumo-bloco {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 16px 18px 18px;
  min-width: 0;
}
.resumo-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.resumo-cab h2 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--texto);
}
.resumo-nota { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.resumo-nota b { color: var(--teal); font-weight: 700; }

/* ---- Atendimento: a frase + a barra ---- */
.atend-frase {
  margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.atend-frase strong {
  font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.02em;
  color: var(--teal); font-variant-numeric: tabular-nums;
}
.atend-frase span {
  font-size: 13px; color: var(--dim); max-width: 20ch; text-wrap: balance;
}

.atend-trilho {
  height: 10px; border-radius: 999px; background: var(--painel-claro);
  overflow: hidden; margin-bottom: 16px;
}
.atend-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--ok);          /* chapado: a ousadia fica nas barras por loja */
  transition: width .25s cubic-bezier(.22,1,.36,1);
}

/* ---- os quatro numeros, em linha (sem virar 4 cards) ---- */
.resumo-numeros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: 0 0 16px; padding: 0;
}
.resumo-numeros > div { min-width: 0; }
.resumo-numeros dt {
  font-size: 11px; color: var(--dim); font-weight: 600;
  text-transform: none; margin-bottom: 2px; white-space: nowrap;
}
.resumo-numeros dd {
  margin: 0; font-size: 19px; font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
@media (max-width: 520px) { .resumo-numeros { grid-template-columns: repeat(2, 1fr); } }

/* ---- split processado / nao processado ---- */
.split-trilho {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--painel-claro); margin-bottom: 8px;
}
.split-proc  { background: var(--verde);   transition: width .25s cubic-bezier(.22,1,.36,1); }
.split-nproc { background: var(--amarelo); transition: width .25s cubic-bezier(.22,1,.36,1); }
/* fatias do funil de estoque (mesmo trilho, tres etapas) */
.split-est      { background: var(--verde);     transition: width .25s cubic-bezier(.22,1,.36,1); }
.split-transito { background: var(--azul-info); transition: width .25s cubic-bezier(.22,1,.36,1); }
.split-sem      { background: var(--amarelo);   transition: width .25s cubic-bezier(.22,1,.36,1); }
/* fio branco entre fatias vizinhas: tres cores proximas precisam de um limite */
.split-trilho > span + span { box-shadow: inset 1px 0 0 var(--painel); }
.split-legenda { margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }
/* estreito, os tres itens tem larguras diferentes e o ultimo ("25 sem entrada")
   caia sozinho numa 2a linha com ~60px de buraco ao lado. Um por linha nao deixa
   vao morto e ainda lê na mesma ordem das fatias. */
@media (max-width: 560px) { .split-legenda { flex-direction: column; gap: 4px; } }
.lg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.lg b { color: var(--texto); font-weight: 700; }
.lg::before { content: ""; width: 8px; height: 8px; border-radius: 3px; }
.lg-ok::before   { background: var(--verde); }
.lg-warn::before { background: var(--amarelo); }
.lg-info::before { background: var(--azul-info); }

/* ---- ASSINATURA: barras "onde esta faltando" ---- */
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.barra {
  display: grid; grid-template-columns: minmax(88px, 132px) minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
}
.barra-loja {
  font-size: 12.5px; font-weight: 600; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-trilho {
  height: 9px; border-radius: 999px; background: var(--painel-claro); overflow: hidden;
}
.barra-fill {
  display: block; height: 100%; border-radius: 999px; background: var(--amarelo);
  transition: width .25s cubic-bezier(.22,1,.36,1);
}
.barra-num {
  display: flex; align-items: baseline; gap: 7px; justify-content: flex-end;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.barra-num b { font-size: 14px; font-weight: 700; color: var(--texto); }
.barra-num small { font-size: 11px; color: var(--dim); }
.barras-vazio {
  font-size: 13px; color: var(--dim); padding: 18px 0; text-align: center;
}
/* tudo atendido: a barra vira verde e some o alarme */
.barra.ok .barra-fill { background: var(--verde); }

/* ---- funil "Chegou no estoque" (3o bloco do resumo) ---- */
/* Numero menor que o do bloco Atendimento de proposito: la esta o balanco
   principal; aqui e a leitura de apoio. Escalas iguais deixariam os dois cards
   com a mesma silhueta. */
.est-frase { margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.est-frase strong {
  font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: -.02em;
  color: var(--teal); font-variant-numeric: tabular-nums;
}
.est-frase span { font-size: 13px; color: var(--dim); }
.est-frase b { color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }

/* o carimbo da carga ancora no pe do card: o bloco e mais curto que os vizinhos
   e o grid o estica — melhor um rodape de verdade do que um vao morto. */
.resumo-estoque { display: flex; flex-direction: column; }
.est-atualizado { display: block; margin: 16px 0 0; padding-top: 2px; }
/* Retrato velho / releitura falhou: o rodape deixa de ser so um carimbo e vira
   aviso — e o alerta "sem entrada" esta suspenso enquanto isso. Cor do alerta da
   coluna (--amarelo, 5.3:1 no branco), sem fundo: continua rodape, nao vira banner. */
.est-atualizado.est-rodape-aviso { color: var(--amarelo); font-weight: 600; }
@media (min-width: 1280px) { .est-atualizado { margin-top: auto; } }
/* estado vazio HONESTO: sem estoque lido nao inventamos zeros */
.est-indisponivel {
  margin: 0; padding: 16px 0 4px;
  font-size: 13px; line-height: 1.5; color: var(--dim); text-wrap: pretty;
}

/* ---- "Falta dar entrada": o que sobrou de vao no card vira o acionavel ----
   Lista de TEXTO tabulado, sem barras: o bloco vizinho ("Onde esta faltando") ja
   e uma coluna de barras e repetir a forma aqui do lado viraria card clonado.
   O ritmo vem dos fios entre as linhas e da coluna de numeros a direita. */
.est-sem { margin-top: 16px; }
/* rotulo de sub-secao, NAO eyebrow: em caixa alta ele competia com o <h2> do card
   e ainda por cima nomeava um balde diferente do da legenda logo acima. */
.est-sem-tit {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--dim);
}
.est-sem-lista { list-style: none; margin: 0; padding: 0; }
.est-sem-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--painel-borda);
}
.est-sem-loja {
  /* sem elipse aqui tambem: "nome de loja nunca cortado" vale para todo lugar onde
     o painel escreve um nome de loja, nao so para a coluna Estoque. A coluna e
     minmax(0,1fr) e o nome longo quebra em duas linhas. */
  font-size: 12.5px; font-weight: 600; color: var(--texto);
}
.est-sem-meta {
  font-size: 12px; color: var(--dim); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.est-sem-meta b { color: var(--amarelo-forte); font-weight: 700; }
.est-sem-resto, .est-sem-ok {
  padding: 7px 0 0; font-size: 12px; color: var(--dim);
}
.est-sem-resto { border-top: 1px solid var(--painel-borda); padding-top: 6px; }



/* =========================================================================
   CATALOGO NOVO PEDIDO — o que e proprio deste painel.
   A primeira tela responde "o que esta disponivel agora e a quanto, em cada
   UF?": uma tabela aparelho x UF onde cada celula e bolinha (verde/vermelho,
   o mesmo codigo do NGN) + preco. Acima dela, UMA frase com a data da coleta
   (dado sem data e dado suspeito) e a faixa "desde a coleta anterior", cujos
   chips FILTRAM a tabela — e a assinatura do painel: a mudanca e acionavel,
   nao decorativa. Sem hero-metric, sem grade de cards iguais.
   ========================================================================= */

/* ---------- filtros: checkbox e select dentro do masthead ---------- */
.chk-inline {
  display: inline-flex; align-items: center; gap: 8px;
  color: #eaf4f5; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 9px 0; align-self: flex-end; white-space: nowrap;
}
.chk-inline input { width: 16px; height: 16px; accent-color: #34a7b6; cursor: pointer; margin: 0; }

/* ---------- a coleta (frase + lojas por UF) ---------- */
.coleta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
  margin: 0 0 12px; min-height: 22px;
}
.coleta-frase { margin: 0; font-size: 14px; color: var(--texto); }
.coleta-frase strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.coleta-frase .coleta-data { font-weight: 800; color: var(--teal); }
.coleta-sep { color: var(--painel-borda); margin: 0 6px; }
/* idade da coleta: ate 24 h fica quieto; acima disso vira aviso ambar (texto,
   nao pilula: e um qualificativo da data, nao um status). */
.coleta-idade { color: var(--dim); font-size: 13px; }
.coleta-idade.velha { color: var(--amarelo-forte); font-weight: 700; }
.coleta-ufs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.uf-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  background: var(--painel); border: 1px solid var(--painel-borda);
  font-size: 12.5px; color: var(--texto); font-variant-numeric: tabular-nums;
}
.uf-chip b { color: var(--teal); font-weight: 800; letter-spacing: .2px; }
.uf-chip .uf-loja { color: var(--dim); }
.uf-chip .uf-disp { font-weight: 700; }
.uf-chip .uf-disp.zero { color: var(--dim); font-weight: 600; }

/* ---------- desde a coleta anterior (chips que filtram) ---------- */
.mudancas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--painel); border: 1px solid var(--painel-borda);
  border-radius: var(--radius);
}
.mudancas-tit { font-size: 13px; color: var(--dim); margin-right: 4px; }
.mudancas-tit b { color: var(--texto); font-weight: 700; }
.mud-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--fundo); border: 1px solid var(--painel-borda);
  color: var(--texto); font: inherit; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.mud-chip:hover:not(:disabled) { border-color: var(--teal-hover); }
.mud-chip:focus-visible { outline: 2px solid var(--teal-hover); outline-offset: 2px; }
.mud-chip:disabled { opacity: .5; cursor: default; }
.mud-chip.ativo { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 2px 8px rgba(27, 96, 110, .28); }
.mud-chip .mud-n { font-weight: 800; }
.mud-chip.mud-ok .mud-n   { color: var(--verde); }
.mud-chip.mud-nao .mud-n  { color: var(--vermelho); }
.mud-chip.mud-preco .mud-n { color: var(--azul-info); }
.mud-chip.ativo .mud-n { color: #fff; }
.mudancas-nada { font-size: 13px; color: var(--dim); font-style: italic; }

/* ---------- tabela aparelho x UF ---------- */
.tabela-catalogo { table-layout: auto; }
.tabela-catalogo thead th.th-uf { text-align: center; }
.tabela-catalogo thead th.th-uf .th-sort-bt { justify-content: center; }
.th-uf-loja {
  display: block; font-size: 10.5px; font-weight: 600; opacity: .85;
  letter-spacing: .2px; margin-top: 1px; text-transform: none;
}
.tabela-catalogo tbody td { padding-top: 7px; padding-bottom: 7px; vertical-align: middle; }
.td-cod { font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.td-desc { min-width: 260px; max-width: 420px; }
.td-desc .marca-tag { display: none; }
.td-uf { text-align: center; white-space: nowrap; }
/* a celula: bolinha + preco. A bolinha e a informacao primaria (disponivel?),
   o preco vem colado nela em tabular. Sem texto "R$" repetido 800 vezes. */
.cel-uf { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.bol {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.bol-ok  { background: var(--verde); }
.bol-nao { background: var(--vermelho); }
.bol-x   { background: transparent; box-shadow: inset 0 0 0 1.5px var(--painel-borda); }
.preco { color: var(--texto); }
.preco-zero { color: var(--dim); }
.cel-nao-ofertado { color: var(--painel-borda); font-weight: 700; }
/* linha sem nenhuma UF disponivel: texto um degrau mais quieto, para a vista
   correr direto pro que tem bolinha verde. */
.tabela-catalogo tbody tr.sem-disp td { color: #5b6a6e; }
.tabela-catalogo tbody tr.sem-disp .preco { color: #5b6a6e; }
.tabela-catalogo tbody tr.sem-disp .td-desc { color: #4a5a5e; }
.td-barata { text-align: center; white-space: nowrap; font-weight: 700; color: var(--teal); }
.td-dif { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dif-nula { color: var(--dim); font-weight: 400; }
.dif-val { color: var(--azul-info); font-weight: 700; }
.tabela-catalogo .tabela-wrap { max-height: 70vh; }

/* marca de "mudou" na linha quando um chip de mudanca esta ativo */
.tag-mud {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: 1px;
  background: rgba(22, 112, 124, .12); color: var(--azul-info);
}
.tag-mud.tag-ok  { background: rgba(15, 155, 134, .16); color: var(--verde); }
.tag-mud.tag-nao { background: rgba(192, 80, 77, .16); color: var(--vermelho); }
.preco-antes { display: block; font-size: 11px; color: var(--dim); text-decoration: line-through; }

/* estado vazio: convite, nao lamento */
.vazio-box {
  background: var(--painel); border: 1px dashed var(--painel-borda); border-radius: var(--radius);
  padding: 38px 24px; text-align: center; margin: 8px 0 18px;
}
.vazio-box h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--texto); }
.vazio-box p { margin: 0 0 16px; color: var(--dim); font-size: 13.5px; }

/* ---------- Rodar: lojas e opcoes ---------- */
.run-form .ms { min-width: 0; }
.run-form .ms-botao { background: var(--campo); border-color: var(--painel-borda); color: var(--texto); }
.run-form .ms-seta { color: var(--dim); }
.run-form .ms-painel { left: 0; right: auto; }
.run-form .chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto); margin: 4px 0 12px; cursor: pointer; }
.run-form .chk input { width: 16px; height: 16px; accent-color: var(--teal); margin: 0; }
.run-nota { font-size: 12.5px; color: var(--dim); margin: 0 0 12px; line-height: 1.45; }
.run-nota b { color: var(--texto); }
.run-lojas-lista { list-style: none; margin: 6px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.run-lojas-lista li {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--fundo); border: 1px solid var(--painel-borda); color: var(--texto);
}
.run-lojas-lista li b { color: var(--teal); }

/* ---------- Historico ---------- */
.hist-acoes { display: inline-flex; gap: 6px; }
.btn-mini {
  padding: 4px 9px; font-size: 12px; border-radius: 7px;
  background: transparent; border: 1px solid var(--painel-borda); color: var(--teal);
  cursor: pointer; font-family: inherit; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-mini:hover { background: rgba(27, 96, 110, .08); border-color: var(--teal-hover); }
.painel-aba[data-painel="lojas"] .filtros,
.painel-aba[data-painel="rodar"] .filtros { position: static; box-shadow: none; }

/* ---------- Lojas ---------- */
.lj-input {
  width: 100%; min-width: 90px; background: var(--campo); border: 1px solid transparent;
  border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 13px; color: var(--texto);
}
.lj-input:hover { border-color: var(--painel-borda); }
.lj-input:focus { outline: none; border-color: var(--teal-hover); box-shadow: 0 0 0 3px rgba(36, 119, 128, .14); }
.lj-cod { font-variant-numeric: tabular-nums; }
.lj-chk { width: 16px; height: 16px; accent-color: var(--teal); }
.lj-remover {
  background: transparent; border: none; color: var(--dim); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px;
}
.lj-remover:hover { color: var(--vermelho); background: rgba(192, 80, 77, .1); }

/* ---------- login: senha local (sem TOTP) ---------- */
.login-form-wrap .login-modo-local { font-size: 12px; color: var(--dim); margin: 6px 0 0; }

@media (max-width: 880px) {
  .td-desc { min-width: 200px; }
  .coleta { gap: 4px 14px; }
  .mudancas { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mud-chip, .progresso-preenchido { transition: none; }
}

/* ---------- diagnóstico da rodada (aba Rodar) ----------
   Caixa de texto, sem pilula nem stripe: e uma explicacao, nao um status. */
.diag-box {
  margin: 0 0 12px; padding: 12px 14px;
  background: rgba(192, 80, 77, .06); border: 1px solid rgba(192, 80, 77, .35);
  border-radius: var(--radius-sm);
}
.diag-box.diag-parado { background: rgba(154, 125, 16, .08); border-color: rgba(154, 125, 16, .4); }
.diag-tit { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--texto); }
.diag-linha { margin: 0 0 4px; font-size: 13px; color: var(--texto); line-height: 1.45; }
.diag-linha b { color: var(--dim); font-weight: 700; }
.diag-dicas { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--texto); }
.diag-dicas:empty { display: none; }
.diag-evid { margin-top: 8px; font-size: 12.5px; }
.diag-evid summary { cursor: pointer; color: var(--dim); font-weight: 600; }
.diag-evid ul { margin: 6px 0 0; padding-left: 18px; font-family: "Cascadia Code", Consolas, monospace; font-size: 11.5px; color: #3e3e3e; }
.preflight-res { margin: 8px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.preflight-res.ok { color: var(--verde); font-weight: 600; }
.preflight-res.erro { color: var(--vermelho); font-weight: 600; }
.hist-diag { display: block; margin-top: 3px; font-size: 12px; color: var(--amarelo-forte); }

/* ---------- setores da rodada: botões em vez de digitar "Z1"/"Z3" ----------
   Grupo de alternadores (aria-pressed), não um <select>: são seis, cabem na tela,
   e marcar dois é o caso normal (aparelhos + acessórios). */
.setores { display: flex; flex-wrap: wrap; gap: 7px; }
.setor-btn {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--campo); border: 1px solid var(--painel-borda); color: var(--texto);
  font: inherit; font-size: 13px; line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.setor-btn:hover:not(:disabled) { border-color: var(--teal-hover); }
.setor-btn:focus-visible { outline: 2px solid var(--teal-hover); outline-offset: 2px; }
.setor-btn:disabled { opacity: .5; cursor: not-allowed; }
.setor-btn .setor-cod { font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; }
.setor-btn .setor-nome { color: var(--dim); }
.setor-btn[aria-pressed="true"] {
  background: var(--teal); border-color: var(--teal); color: #fff;
  box-shadow: 0 2px 8px rgba(27, 96, 110, .26);
}
.setor-btn[aria-pressed="true"] .setor-cod,
.setor-btn[aria-pressed="true"] .setor-nome { color: #fff; }
#run-estimativa b { color: var(--texto); }
@media (prefers-reduced-motion: reduce) { .setor-btn { transition: none; } }