/* ==========================================================
   Guemat Assist
   Tema escuro (padrao) + tema claro. Cores da marca: laranja/ambar.
   ========================================================== */

:root{
  --laranja:#f26b1d;  --laranja-2:#fbb034;  --azul:#4da3ff;
  --laranja-suave:#c47a45;  /* tom discreto p/ rótulos (não-títulos) */
  --laranja-claro:#f2a25c;  /* palavras fixas nas linhas de apoio dos cards */
  --verde:#2ecc71;    --vermelho:#e74c3c;

  --bg:#282828;       --bg-2:#303030;      --painel:#303030;
  --painel-2:#282828; --borda:#ffffff1c;
  --texto:#e7edf5;    --texto-2:#ffffff;   --texto-3:#c47a45;
  --sidebar:#1e1e1e;  --hover:#1e2733;
  --sombra:0 2px 12px rgba(0,0,0,.35);
  --logo-claro:none;  --logo-escuro:block;
}
:root[data-tema="claro"]{
  --bg:#f4f6fa;       --bg-2:#ffffff;      --painel:#ffffff;
  --painel-2:#f7f9fc; --borda:#e2e8f0;
  --texto:#181717;    --texto-2:#18191a;   --texto-3:#2e3236;
  --sidebar:#ffffff;  --hover:#f0f3f8;
  --sombra:0 2px 10px rgba(16,24,40,.06);
  --laranja-claro:#b35a12;  /* escurecido: laranja claro some no fundo branco */
  --logo-claro:block; --logo-escuro:none;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--texto);
  font:18px/1.45 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5{ margin:0 0 8px; font-weight:700; color:var(--laranja); }

/* ---------- Layout ---------- */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width:230px; flex:0 0 230px; background:var(--sidebar);
  border-right:1px solid var(--borda); padding:16px 12px;
  display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh;
}
.conteudo{ flex:1; padding:18px 22px 40px; min-width:0; }

.marca{ display:flex; align-items:center; gap:10px; padding:4px 6px 12px; }
.marca img{ height:30px; }

/* Troca de logo conforme o tema. Ficava dentro de ".marca" e por isso não
   valia na tela de login, onde os DOIS logos apareciam empilhados. Sem escopo,
   vale em qualquer lugar que use as duas imagens. */
.logo-claro{ display:var(--logo-claro); }
.logo-escuro{ display:var(--logo-escuro); }

/* O logo do modo claro tem margem transparente embutida no arquivo: são 200x80
   px de arquivo para um desenho de 192x37 (21px de vazio em cima, 22 embaixo).
   Com "height:30px" o desenho saía a 14px — menos da metade do logo escuro,
   que ocupa o arquivo inteiro. A caixa cresce até o desenho bater a altura
   certa e a margem negativa devolve o espaço, para nada esticar.
   O certo é regravar o arquivo sem essa sobra; aí estas regras saem. */
.marca .logo-claro{ height:65px; margin:-17px 0 -18px; }

.nav{ display:flex; flex-direction:column; gap:4px; }
.nav a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px;
  color:var(--texto-2); font-weight:600; border:1px solid transparent;
}
.nav a:hover{ background:var(--hover); color:var(--texto); }
.nav a.ativo{
  background:linear-gradient(90deg, rgba(242,107,29,.16), transparent);
  color:var(--laranja); border-color:rgba(242,107,29,.35);
}
.nav .ico{ width:18px; text-align:center; }

.side-bloco{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.side-rotulo{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--texto-3); margin-bottom:6px; }
.card-foco{
  background:linear-gradient(160deg, rgba(242,107,29,.16), rgba(251,176,52,.06));
  border:1px solid rgba(242,107,29,.3); border-radius:12px; padding:12px;
}
.card-foco b{ color:var(--laranja); display:block; margin-bottom:4px; }
.card-foco span{ color:var(--texto-2); font-size:12px; }

/* ---------- Cabecalho ---------- */
.topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.topo .datas{ display:flex; gap:18px; color:var(--texto-2); font-size:13px; font-weight:600; margin-bottom:2px; }
.topo .datas b{ color:var(--laranja); font-size:15px; }
.topo h1{ font-size:24px; letter-spacing:.3px; margin:0; }
.topo h1 .fraco{ color:var(--laranja); font-weight:600; }
.topo .acoes{ display:flex; align-items:center; gap:10px; }
.auto-status{ font-size:11px; color:var(--texto-3); white-space:nowrap; }
@media (max-width:560px){ .auto-status{ display:none; } }

.topo-titulo-linha{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Filtros do cabecalho — arredondados e "profissionais" (mesmo estilo dos btns) */
.filtro-topo{
  background:var(--painel-2); color:var(--texto);
  border:1px solid var(--borda); border-radius:999px;
  padding:8px 34px 8px 16px; font:inherit; font-weight:600; font-size:13px;
  min-width:180px; cursor:pointer; transition:border-color .15s, background .15s;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  /* seta customizada em SVG (para caber no padding-right maior) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23f26b1d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
}
.filtro-topo:hover{ border-color:var(--laranja); background-color:var(--hover); }
.filtro-topo:focus{ outline:none; border-color:var(--laranja); box-shadow:0 0 0 3px rgba(242,107,29,.18); }

/* ---------- Seletor de mês customizado (mespicker) ---------- */
.mespicker{ position:relative; }
.mespicker-btn{
  display:flex; align-items:center; gap:10px; min-width:190px;
  background-image:none; padding:8px 16px; justify-content:space-between;
}
.mespicker-btn #mpRotulo{ text-transform:capitalize; }
.mespicker-ico{ font-size:14px; opacity:.85; }
.mespicker-painel{
  display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:50;
  width:264px; background:var(--painel); border:1px solid var(--borda);
  border-radius:14px; box-shadow:0 10px 34px rgba(0,0,0,.45); padding:14px;
}
.mespicker-painel.aberto{ display:block; }
.mespicker-cab{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.mespicker-cab b{ color:var(--laranja); font-size:16px; letter-spacing:.5px; }
.mespicker-nav{
  background:var(--painel-2); color:var(--texto); border:1px solid var(--borda);
  border-radius:9px; width:30px; height:30px; font-size:16px; cursor:pointer; line-height:1;
}
.mespicker-nav:hover{ border-color:var(--laranja); color:var(--laranja); }
.mespicker-grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mespicker-mes{
  background:var(--painel-2); color:var(--texto); border:1px solid var(--borda);
  border-radius:9px; padding:9px 0; font:inherit; font-weight:600; font-size:13px;
  cursor:pointer; text-transform:capitalize; transition:all .12s;
}
.mespicker-mes:hover{ border-color:var(--laranja); color:var(--laranja); }
.mespicker-mes.sel{
  background:linear-gradient(90deg,var(--laranja),var(--laranja-2));
  border-color:transparent; color:#fff;
}
/* Datepicker reutilizável (filtro de período do Faturamento) */
.datepicker{ position:relative; }
.datepicker .mespicker-btn{ min-width:150px; padding:7px 14px; font-size:13px; }
.dp-painel{ left:0; width:264px; }
.dp-painel.aberto{ display:block; }

/* Grade de dias (só no Dashboard) */
.mespicker-sep{
  margin:12px 0 8px; font-size:11px; letter-spacing:.3px;
  color:var(--texto-3); border-top:1px solid var(--borda); padding-top:10px;
}
.mespicker-dias{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
/* cabeçalho dos dias da semana + espaços vazios até o dia 1 cair na coluna certa */
.cal-dow{
  text-align:center; font-size:10px; font-weight:700; letter-spacing:.5px;
  color:var(--texto-3); padding-bottom:2px;
}
.cal-vazio{ visibility:hidden; }
.mespicker-dia{
  background:var(--painel-2); color:var(--texto); border:1px solid var(--borda);
  border-radius:7px; padding:6px 0; font:inherit; font-weight:600; font-size:12px;
  cursor:pointer; transition:all .12s;
}
.mespicker-dia:hover{ border-color:var(--laranja); color:var(--laranja); }
.mespicker-dia.sel{
  background:linear-gradient(90deg,var(--laranja),var(--laranja-2));
  border-color:transparent; color:#fff;
}
.mespicker-rodape{ margin-top:12px; text-align:right; }
.mespicker-rodape a{ color:var(--laranja); font-weight:600; font-size:13px; }
.mespicker-rodape a:hover{ text-decoration:underline; }

/* ---------- Seletor de empresa customizado (lojapicker) — mesmo estilo do mês ---------- */
.lojapicker{ position:relative; }
.lojapicker-btn{
  display:flex; align-items:center; gap:10px; min-width:200px;
  background-image:none; padding:8px 16px; justify-content:space-between;
}
.lojapicker-btn #lpRotulo{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lojapicker-ico{ font-size:12px; color:var(--laranja); transition:transform .15s; }
.lojapicker-painel{
  display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:50;
  min-width:100%; width:max-content; max-width:380px;
  background:var(--painel); border:1px solid var(--borda);
  border-radius:14px; box-shadow:0 10px 34px rgba(0,0,0,.45); padding:8px;
}
.lojapicker-painel.aberto{ display:block; }
.lojapicker-lista{ display:flex; flex-direction:column; gap:6px; }
.lojapicker-item{
  text-align:left; background:var(--painel-2); color:var(--texto);
  border:1px solid var(--borda); border-radius:9px; padding:10px 14px;
  font:inherit; font-weight:600; font-size:13px; cursor:pointer; transition:all .12s;
}
.lojapicker-item:hover{ border-color:var(--laranja); color:var(--laranja); }
.lojapicker-item.sel{
  background:linear-gradient(90deg,var(--laranja),var(--laranja-2));
  border-color:transparent; color:#fff;
}
/* Loja desativada — só aparece na lista em Configurações, apagada e marcada. */
.lojapicker-item.inativa{ color:var(--texto-3); }
.lojapicker-item.inativa small{ font-weight:700; text-transform:uppercase; font-size:10px; letter-spacing:.4px; }
.lojapicker-item.inativa.sel{ color:#fff; opacity:.85; }

/* ---------- Picker: dropdown customizado (substitui os <select> nativos) ---------- */
.picker{ position:relative; width:100%; }
.picker-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-width:0; background-image:none; padding:9px 14px; text-align:left;
}
.picker-rotulo{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-rotulo.vazio{ color:var(--texto-3); font-weight:500; }
.picker-ico{ display:flex; color:var(--laranja); flex:0 0 auto; }
.picker-ico .ic{ width:13px; height:13px; transform:rotate(90deg); transition:transform .15s; }
.picker-painel{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:70;
  background:var(--painel); border:1px solid var(--borda); border-radius:12px;
  box-shadow:0 10px 34px rgba(0,0,0,.45); padding:6px;
}
.picker-painel.aberto{ display:block; }
.picker:has(.picker-painel.aberto) .picker-ico .ic{ transform:rotate(-90deg); }
.picker-lista{ display:flex; flex-direction:column; gap:4px; max-height:260px; overflow-y:auto; }
.picker-lista::-webkit-scrollbar{ width:8px; }
.picker-lista::-webkit-scrollbar-track{ background:transparent; }
.picker-lista::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }
.picker-item{
  /* flex:0 0 auto é essencial: sem isso os itens encolhem para caber na altura
     máxima da lista e o texto fica cortado/espremido. */
  flex:0 0 auto; min-height:38px; display:flex; align-items:center;
  text-align:left; background:var(--painel-2); color:var(--texto);
  border:1px solid var(--borda); border-radius:8px; padding:9px 12px;
  font:inherit; font-weight:600; font-size:13px; cursor:pointer; transition:all .12s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; user-select:none;
}
.picker-item:hover{ border-color:var(--laranja); color:var(--laranja); }
.picker-item.sel{
  background:linear-gradient(90deg,var(--laranja),var(--laranja-2));
  border-color:transparent; color:#fff;
}

/* ---------- Componentes ---------- */
.grid{ display:grid; gap:14px; }
.g4{ grid-template-columns:repeat(4,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g21{ grid-template-columns:2fr 1fr; }
@media (max-width:1150px){ .g4{grid-template-columns:repeat(2,1fr);} .g21,.g3,.g2{grid-template-columns:1fr;} }
@media (max-width:700px){ .g4{grid-template-columns:1fr;} }

/* ---------- Menu hamburguer (tablet e celular) ---------- */
.btn-menu{ display:none; }
@media (max-width:900px){
  .btn-menu{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:38px; height:34px; padding:0 8px; flex:0 0 auto;
    background:var(--painel-2); border:1px solid var(--borda); border-radius:9px;
    cursor:pointer;
  }
  .btn-menu span{ display:block; height:2px; border-radius:2px; background:var(--laranja); }
  .btn-menu:hover{ border-color:var(--laranja); }

  /* a sidebar sai do fluxo e desliza por cima do conteudo */
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:200;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.55);
  }
  .sidebar.aberta{ transform:none; }
  .menu-fundo{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199; }
  .menu-fundo.aberta{ display:block; }
  body.sem-rolagem{ overflow:hidden; }

  /* cabecalho compacto: o filtro de data ja informa dia/mes/ano */
  .topo .datas{ display:none; }
  .topo h1{ font-size:19px; }
  .conteudo{ padding:14px 14px 34px; }
}
@media (max-width:560px){
  .topo{ gap:10px; }
  .topo h1{ font-size:17px; }
  .topo .acoes .pill-user{ display:none; }
  .lojapicker-btn, .mespicker-btn{ min-width:0; }

  /* Painéis dos filtros: abriam a partir da borda ESQUERDA do botão e vazavam
     pela direita (o de data, mais à direita, sobrava ~66px numa tela de 390).
     Ancorados pela direita e limitados à tela, ficam sempre visíveis. */
  .mespicker-painel{ left:auto; right:0; width:min(264px, calc(100vw - 24px)); }
  .dp-painel{ left:auto; right:0; width:min(264px, calc(100vw - 24px)); }
  .lojapicker-painel{ max-width:calc(100vw - 24px); }
  .mespicker-dias{ gap:4px; }
  .mespicker-dia{ padding:7px 0; }
}

.card{
  background:var(--painel); border:1px solid var(--borda); border-radius:14px;
  padding:14px 16px; box-shadow:var(--sombra); min-width:0;
}
.card h3{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--laranja); margin-bottom:10px; font-weight:700; }
.kpi{ font-size:26px; font-weight:800; color:var(--laranja); line-height:1.15; }
.kpi.azul{ color:var(--azul); } .kpi.branco{ color:#ffffff; }
:root[data-tema="claro"] .kpi.branco{ color:var(--texto); }
/* Regra de cor das linhas de apoio dos cards:
     palavra fixa  -> laranja claro
     valor variável -> branco
   Estava invertido em vários pontos (o número em laranja e a palavra em
   cinza), o que fazia o olho parar no rótulo em vez do número. Como todo valor
   vem dentro de <b>, a regra resolve os cards todos de uma vez.
   Os valores com significado (pos/neg, verde/vermelho) ficam fora de .kpi-sub,
   no rodapé de duas colunas, e mantêm a cor deles. */
.kpi-sub{ color:var(--laranja-claro); font-size:12px; margin-top:6px; }
/* --texto-2, e não #fff: no tema claro o fundo é branco e o número sumiria
   (mesma razão do ":root[data-tema=claro] .kpi.branco" logo acima). */
.kpi-sub b{ color:var(--texto-2); font-weight:700; }
.kpi-sub.branco{ color:#ffffff; }
:root[data-tema="claro"] .kpi-sub.branco{ color:var(--texto); }
.card-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
/* No Faturamento o cabeçalho tem nome da loja + dois seletores de data + botão.
   Em tela estreita isso pedia 569px e o botão "Recarregar" ficava fora da tela;
   o nome da loja ainda quebrava em 3 linhas. Empilha e deixa os filtros fluírem. */
.fat-filtro{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Rótulo e data andam JUNTOS: soltos no flex, o "até" ficava numa linha e a data
   dele na seguinte (o rótulo grudava na data errada). */
.fat-campo{ display:inline-flex; align-items:center; gap:6px; }
@media (max-width:900px){
  #faturamento .card-topo{ flex-direction:column; align-items:stretch; }
  #faturamento .card-topo > h3{ font-size:15px; white-space:nowrap; }
  #faturamento .fat-campo{ flex:1 1 150px; }
  #faturamento .fat-campo .datepicker{ flex:1 1 auto; }
  #faturamento .datepicker .mespicker-btn{ min-width:0; width:100%; }
  #faturamento .btn-recarregar{ flex:1 1 100%; }
}
.ico-card{ font-size:22px; opacity:.85; }

.barra{ height:6px; border-radius:6px; background:var(--painel-2); margin-top:10px; overflow:hidden; }
.barra > i{ display:block; height:100%; background:linear-gradient(90deg,var(--laranja),var(--laranja-2)); }

/* Tabelas */
.tabela-wrap{ overflow:auto; }
/* Barra de rolagem lateral padronizada em TODA tabela que rola (era so no
   Faturamento). O 'width:0' esconde a vertical, que fica a cargo do max-height. */
.tabela-wrap::-webkit-scrollbar{ height:10px; width:0; }
.tabela-wrap::-webkit-scrollbar-track{ background:transparent; }
.tabela-wrap::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16); border-radius:8px; border:2px solid transparent; background-clip:content-box;
}
.tabela-wrap::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.30); background-clip:content-box; }
/* arraste com o botao direito */
.tabela-wrap.arrastando{ cursor:grabbing; user-select:none; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--texto-2); font-weight:700; padding:8px 10px;
  border-bottom:1px solid var(--borda); white-space:nowrap; background:var(--painel);
  position:sticky; top:0; z-index:1;
}
td{ padding:7px 10px; border-bottom:1px solid var(--borda); white-space:nowrap; }
tbody tr:hover{ background:var(--hover); }
tbody tr.total td{ font-weight:800; background:var(--painel-2); }
/* Total do canal fica com --painel (o tint da cor vai no cabeçalho do grupo). */
.tabela-fat tbody tr.total td{ background:var(--painel); }

/* ---------- Faturamento: cabeçalho da tabela ---------- */
/* Títulos de coluna em laranja de título, com fundo, maiores (+5px) e FIXOS no
   topo (position:sticky) enquanto rola os dados; a box tem altura própria. */
.wrap-fat{ max-height:70vh; overflow:auto; }
.wrap-fat.arrastando{ cursor:grabbing; user-select:none; }
.tabela-fat thead th{
  color:var(--laranja); background:#1c1f27; font-size:16px;
  position:sticky; top:0; z-index:3;
}
/* Centraliza títulos e dados de TODAS as colunas, exceto a 1ª (COLABORADOR). */
.tabela-fat th:not(:first-child), .tabela-fat td:not(:first-child){ text-align:center; }
/* Coluna COLABORADOR fixa horizontalmente (frozen) + linha divisória à direita
   separando-a das demais. Cada célula da 1ª coluna precisa de fundo opaco. */
/* A divisória usa box-shadow (e não border-right): com border-collapse:collapse
   a borda pertence à grade da tabela e NÃO acompanha a célula fixa — sumia ao
   rolar para o lado. O box-shadow é pintado junto com a célula, então gruda. */
.tabela-fat th:first-child, .tabela-fat td:first-child{
  position:sticky; left:0; box-shadow:inset -2px 0 0 0 var(--borda);
}
/* Em tela estreita a 1ª coluna chegava a 358px numa área de 313px: sendo fixa,
   ela cobria a tela inteira e rolar para o lado não revelava nada (parecia que
   só dava para rolar em cima/baixo). Limitada, o nome quebra em 2 linhas e
   sobra espaço para as outras colunas aparecerem. */
@media (max-width:700px){
  .tabela-fat th:first-child, .tabela-fat td:first-child{
    min-width:150px; max-width:160px; white-space:normal; word-break:break-word;
    line-height:1.2; font-size:12px;
  }
}
.tabela-fat thead th:first-child{ z-index:5; }                 /* canto: fixo em cima E na esquerda */
.tabela-fat tbody td:first-child{ z-index:2; }
.tabela-fat tbody tr.linha-vend td:first-child{ background:var(--painel); }
/* TOTAL DA LOJA — padrão (sem cor escolhida): tint laranja, base opaca na 1ª col. */
.tabela-fat tbody tr.total-geral td:first-child{
  background:linear-gradient(rgba(242,107,29,.12), rgba(242,107,29,.12)), var(--painel);
}
/* TOTAL DA LOJA — cor escolhida nas Configurações (texto + tint no fundo). */
.tabela-fat tbody tr.total-loja-cor td{ color:var(--cor-txt); background:var(--cor-bg); }
.tabela-fat tbody tr.total-loja-cor td:first-child{
  background:linear-gradient(var(--cor-bg), var(--cor-bg)), var(--painel);
}
/* Scrollbar da box: horizontal estilizada (profissional); vertical oculta. */


/* Botão "Recarregar": mesmo acento laranja da sidebar (item ativo). */
.btn.btn-recarregar{
  background:linear-gradient(90deg, rgba(242,107,29,.16), transparent);
  color:var(--laranja); border:1px solid rgba(242,107,29,.35);
}
.btn.btn-recarregar:hover{ border-color:var(--laranja); background:rgba(242,107,29,.22); }
tbody tr.total-geral td{ font-weight:800; background:rgba(242,107,29,.12); color:var(--texto); }

/* Configurações gerais da loja (cor do total da loja, etc.) */
.config-gerais{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 0 12px; border-bottom:1px solid var(--borda); margin-bottom:6px;
}
.config-gerais b{ color:var(--laranja); font-size:13px; }

/* Configurações: seletor de cor do canal. */
.cor-canal{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.cor-canal input[type=color]{
  width:26px; height:22px; padding:0; border:1px solid var(--borda); border-radius:6px;
  background:transparent; cursor:pointer;
}
.cor-canal span{ font-size:11px; color:var(--texto-3); text-transform:uppercase; letter-spacing:.4px; }

/* Faturamento: linha de título do canal (nome no topo do grupo). A cor do texto
   vem inline da config (Fase B); aqui só o laranja padrão. TOTAL fica branco. */
tbody tr.canal-cab td{
  font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--laranja); padding:12px 10px 6px; border-top:2px solid var(--borda);
  background:var(--painel);
}
/* Cabeçalho do canal com cor escolhida: texto + tint nas duas células. */
tbody tr.canal-cab.com-cor td{ color:var(--cor-txt); background:var(--cor-bg); }
/* 1ª célula (fixa) precisa de base opaca para as demais não passarem por baixo. */
.tabela-fat tbody tr.canal-cab.com-cor td:first-child{
  background:linear-gradient(var(--cor-bg), var(--cor-bg)), var(--painel);
}
tbody tr.linha-vend td:first-child{ padding-left:24px; }  /* indenta os vendedores sob o canal */
.num{ text-align:right; }
.pos{ color:var(--verde); } .neg{ color:var(--vermelho); }
.badge{ padding:2px 8px; border-radius:20px; font-size:13px; font-weight:700; }
.badge.ok{ background:rgba(46,204,113,.15); color:var(--verde); }
.badge.ruim{ background:rgba(231,76,60,.15); color:var(--vermelho); }
.badge.neutro{ background:var(--painel-2); color:var(--texto-2); }
.badge.branco{ background:var(--painel-2); color:#ffffff; }

/* Formularios */
input, select{
  background:var(--painel-2); color:var(--texto); border:1px solid var(--borda);
  border-radius:8px; padding:6px 9px; font:inherit; font-size:13px; outline:none;
}
input:focus, select:focus{ border-color:var(--laranja); }
input[type=number]{ width:88px; }
input[type=checkbox]{ accent-color:var(--laranja); width:15px; height:15px; }
label{ color:var(--laranja-suave); font-weight:600; font-size:15px; }
/* Dentro de checkbox/chip o rotulo eh clicavel e branco (nao eh titulo de campo) */
.chips label, .checks label, table label{ color:var(--texto); font-weight:600; font-size:13px; }
label input[type=checkbox]{ margin-right:4px; }

.btn{
  background:var(--painel-2); color:var(--texto); border:1px solid var(--borda);
  border-radius:9px; padding:7px 13px; font:inherit; font-weight:600; cursor:pointer;
}
.btn:hover{ background:var(--hover); border-color:var(--texto-3); }
.btn.primario{ background:linear-gradient(90deg,var(--laranja),var(--laranja-2)); border:0; color:#fff; }
.btn.primario:hover{ filter:brightness(1.08); }
.btn.mini{ padding:4px 9px; font-size:13px; }

/* Donut (conic-gradient) */
.donut{
  --p:0; width:96px; height:96px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--cor, var(--laranja)) calc(var(--p)*1%), var(--painel-2) 0);
  position:relative; flex:0 0 auto;
}
.donut::after{ content:""; position:absolute; inset:11px; border-radius:50%; background:var(--painel); }
.donut b{ position:relative; z-index:1; font-size:17px; font-weight:800; }

/* Grafico de linha (SVG) */
.gr-linha{ width:100%; height:190px; }
.gr-linha .grade{ stroke:var(--borda); stroke-width:1; }
.gr-linha .serie{ fill:none; stroke:var(--laranja); stroke-width:2.5; }
.gr-linha .meta{ fill:none; stroke:var(--texto-3); stroke-width:1.5; stroke-dasharray:5 4; }
.gr-linha .ponto{ fill:var(--laranja); }
.gr-linha .rot{ fill:var(--texto-3); font-size:10px; }
.legenda{ display:flex; gap:14px; font-size:12px; color:var(--texto-2); margin-top:6px; }
.legenda i{ display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:5px; }

/* Ranking */
.rank{ list-style:none; margin:0; padding:0; }
.rank li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--borda); }
.rank li:last-child{ border-bottom:0; }
.rank .pos-n{
  width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  background:var(--painel-2); color:var(--texto-2); font-weight:800; font-size:12px; flex:0 0 auto;
}
.rank li:nth-child(1) .pos-n{ background:linear-gradient(135deg,var(--laranja),var(--laranja-2)); color:#fff; }
.rank .nome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.rank .val{ font-weight:700; color:var(--laranja); }

/* Login */
/* A caixa vinha centralizada só na horizontal (margin auto) e presa a 9vh do
   topo. Agora quem centraliza é o overlay, nos dois eixos. O overflow deixa
   rolar em tela baixa, para o teclado do celular não cobrir o botão Entrar. */
#login-overlay{
  position:fixed; inset:0; z-index:300;
  align-items:center; justify-content:center;
  padding:20px; overflow:auto; background:var(--fundo);
}
.login-caixa{
  width:100%; max-width:340px; margin:auto; background:var(--painel); border:1px solid var(--borda);
  border-radius:16px; padding:26px; box-shadow:var(--sombra);
}
/* sem "display" aqui: quem manda é a regra de tema (.logo-claro/.logo-escuro),
   senão as duas imagens voltam a aparecer juntas */
.login-caixa img{ height:34px; margin:0 auto 10px; }
.login-caixa .logo-claro{ height:74px; margin:-19px auto -10px; }
/* Nome do produto. Fica só aqui e na aba do navegador: no cabeçalho de dentro
   quem manda é o nome da EMPRESA ("GUEMAT Dashboard"), que é o que o gerente
   precisa ver o dia todo — e é o que muda quando o sistema for para outro
   cliente. */
.login-produto{
  text-align:center; margin:0 0 18px; font-size:12px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--texto-3);
}
.login-caixa .campo{ margin-bottom:12px; }
.login-caixa label{ display:block; font-size:12px; margin-bottom:4px; }
.login-caixa input{ width:100%; }
.login-caixa .btn{ width:100%; }

/* Diversos */
.aviso{ font-size:12px; color:var(--texto-2); }
.aviso.erro{ color:var(--vermelho); }
.aviso.ok{ color:var(--verde); }
.sec{ margin:22px 0 10px; font-size:24px; color:var(--laranja); }
.sec small{ color:#ffffff; font-weight:400; font-size:16px; }
/* Em tela estreita os títulos comiam o espaço: h2 sem classe ficava em 27px
   (padrão do navegador sobre a fonte base de 18px) e o .sec em 24px, com o
   subtítulo de 16px disputando a mesma linha. Precisa vir DEPOIS das regras
   acima — mesma especificidade, quem vale é a ordem. */
@media (max-width:560px){
  .conteudo h2{ font-size:19px; }
  .sec{ font-size:19px; margin:16px 0 8px; }
  .sec small{ display:block; font-size:12px; margin-top:3px; }
}
hr{ border:0; border-top:1px solid var(--borda); margin:18px 0; }
details summary{ cursor:pointer; color:var(--texto-2); }
/* inline-block + nowrap: solta, a pílula quebrava no meio (o número caía sozinho
   na linha de baixo, fora da borda arredondada). */
.pill{
  display:inline-block; white-space:nowrap;
  background:var(--painel-2); border:1px solid var(--borda); border-radius:20px; padding:4px 10px; font-size:12px;
}
.checks{ display:flex; flex-wrap:wrap; gap:8px 16px; }
.checks label{ display:flex; align-items:center; gap:6px; color:var(--texto); }
.calendario th{ color:var(--laranja); }
.calendario td{ color:#ffffff; }
.calendario td a{ display:block; padding:4px; border-radius:6px; color:#ffffff; }
.calendario td a.util{ background:rgba(242,107,29,.18); color:var(--laranja); font-weight:700; }
:root[data-tema="claro"] .calendario td,
:root[data-tema="claro"] .calendario td a{ color:var(--texto); }

/* Remove as setinhas de incremento dos inputs numericos */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

/* ---------- Ícones SVG ---------- */
.ic{ width:16px; height:16px; display:inline-block; vertical-align:-3px; flex:0 0 auto; }
.nav .ico .ic{ width:18px; height:18px; vertical-align:-4px; }
.card-foco b .ic{ width:15px; height:15px; }
.btn-ico{ display:inline-flex; align-items:center; justify-content:center; padding:6px; }
.btn-ico .ic{ width:16px; height:16px; vertical-align:middle; }
.linha-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill-user{ display:inline-flex; align-items:center; gap:6px; }
.pill-user .ic{ width:14px; height:14px; color:var(--laranja); }
/* Círculo laranja com ícone (cards de métrica) */
.ico-circ{
  width:38px; height:38px; flex:0 0 auto; border-radius:11px;
  background:linear-gradient(150deg, var(--laranja), var(--laranja-2));
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
}
.ico-circ .ic{ width:20px; height:20px; vertical-align:middle; }
.ico-info{ color:var(--azul); }
.ico-info .ic{ width:16px; height:16px; vertical-align:-4px; margin-right:5px; }

/* Mini-cards com ícone (Bloco 1): ícone à esquerda, texto à direita */
.card.mini-info.mini-ico{ display:flex; align-items:center; justify-content:center; gap:12px; text-align:left; }
.card.mini-info.mini-ico h3{ text-align:left; margin-bottom:2px; }
.card.mini-info.mini-ico .kpi{ text-align:left; }
.mini-txt{ min-width:0; }

/* Consolidado (Geral): 3 boxes separadas, ícone grande à esquerda, fundo NÃO
   laranja (só o círculo do ícone é laranja). */
.geral-card{ display:flex; align-items:center; justify-content:center; gap:14px; }
.geral-card h3{ text-align:left; color:var(--texto-3); margin-bottom:3px; }
.geral-card .kpi{ text-align:left; color:#ffffff; font-size:20px; }
.ico-circ-g{ width:48px; height:48px; border-radius:13px; }
.ico-circ-g .ic{ width:26px; height:26px; }
/* Quebra por loja dentro dos cards do consolidado */
.geral-quebra{ display:flex; flex-direction:column; gap:3px; margin-top:5px; }
.geral-quebra span{ font-size:13px; color:#ffffff; white-space:nowrap; }
.geral-quebra b{ color:var(--texto-3); font-weight:700; }

/* Empilhados no celular, o 'justify-content:center' centralizava o conjunto
   ícone+texto de cada card: como os textos têm larguras diferentes, cada ícone
   parava numa posição e a coluna ficava serrilhada. Aqui todos encostam na
   esquerda e o ícone ganha o mesmo tamanho nos dois grupos, então ícones e
   textos ficam alinhados na mesma vertical. */
@media (max-width:700px){
  .card.mini-info.mini-ico, .geral-card{ justify-content:flex-start; gap:12px; }
  .card.mini-info.mini-ico .ico-circ, .geral-card .ico-circ{
    width:44px; height:44px; border-radius:12px;
  }
  .card.mini-info.mini-ico .ico-circ .ic, .geral-card .ico-circ .ic{ width:23px; height:23px; }
}

/* Mini-cards centralizados (D_ÚTEIS, META_LINEAR, PEDIDOS POR DIA, etc.) */
.card.mini-info{ background:var(--painel-2); text-align:center; }
.card.mini-info h3{ text-align:center; }
.card.mini-info .kpi{ text-align:center; }
.tabela-geral{ width:100%; table-layout:fixed; }
.tabela-geral th, .tabela-geral td{ text-align:center; }
.tabela-geral th{ font-size:14px; padding:12px 10px; color:var(--laranja); letter-spacing:.8px; }
.tabela-geral td{ font-size:20px; padding:16px 10px; font-weight:800; }

/* Bloco 1: META DA LOJA + DIAS ÚTEIS num card só, duas colunas de altura igual
   (o grid estica as duas colunas para a altura da mais alta: uma expande, a
   outra acompanha) separadas por um divisor vertical. */
.meta-2col{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.meta-2col > .meta-col{ min-width:0; }
.meta-2col > .meta-col:first-child{ padding-right:24px; }
.meta-2col > .meta-col:last-child{ padding-left:24px; border-left:1px solid var(--borda); }
@media (max-width:1150px){
  .meta-2col{ grid-template-columns:1fr; }
  .meta-2col > .meta-col:first-child{ padding-right:0; padding-bottom:18px; }
  .meta-2col > .meta-col:last-child{
    padding-left:0; padding-top:18px; border-left:none; border-top:1px solid var(--borda);
  }
}

.auxiliar{ margin:10px 0; }
.auxiliar > .aux-titulo{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--painel-2); border:1px solid var(--laranja); border-radius:20px;
  padding:7px 16px; font-weight:600; font-size:15px; color:var(--laranja); width:fit-content;
}
.auxiliar .legenda-aux{
  background:var(--painel-2); border:1px dashed var(--borda); border-radius:10px;
  padding:8px 12px; margin:10px 0; color:var(--texto-2); font-size:15px;
}

/* Fontes +3px nos rótulos/cabeçalhos do Bloco 1 (escopado ao card p/ não afetar
   Dashboard/Faturamento/Config, que compartilham label e .card h3). */
.meta-2col label{ font-size:15px; }
.meta-2col .calendario th{ font-size:15px; }
.meta-2col .mini-info h3{ font-size:14px; }

/* Fases (accordions) dos blocos 2/3/4: META, PEDIDOS E DEVOLUÇÕES, etc. */
details.fase{ border:1px solid var(--borda); border-radius:12px; margin:10px 0; overflow:hidden; }
details.fase > summary{
  list-style:none; cursor:pointer; padding:12px 16px; display:flex; align-items:center; gap:10px;
  background:var(--painel-2); font-weight:800; font-size:15px; color:var(--laranja);
  letter-spacing:.4px; text-transform:uppercase;
}
details.fase > summary::-webkit-details-marker{ display:none; }
details.fase > summary::before{ content:"▸"; transition:transform .15s; font-size:14px; }
details.fase[open] > summary::before{ transform:rotate(90deg); }
details.fase > summary:hover{ background:var(--hover); }
details.fase .fase-corpo{ padding:14px 16px; }

/* Subtítulos dos blocos internos (Meta geral / Pedidos e devoluções) dentro da
   box de cada canal. O 2º bloco ganha um divisor no topo. */
.fase-corpo .sub-titulo{
  color:var(--laranja); font-weight:800; font-size:15px; text-transform:uppercase;
  letter-spacing:.4px; margin:20px 0 12px; padding-top:16px; border-top:1px solid var(--borda);
}
.fase-corpo > .sub-titulo:first-child{ margin-top:0; padding-top:0; border-top:none; }

/* Chips de selecao de canal/colaborador — mais "profissional" que checkbox cru */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips label{
  display:flex; align-items:center; background:transparent;
  border:1px solid var(--borda); border-radius:20px; padding:7px 16px;
  font-size:14px; color:var(--texto); cursor:pointer; transition:border-color .15s, background .15s;
}
.chips label:has(input:checked){
  border-color:var(--laranja); background:rgba(242,107,29,.18); font-weight:700;
}
.chips label:hover{ border-color:var(--laranja); }
.chips input{ display:none; }

/* Tabelas de dias da semana: espaçamento padronizado (5px) e colunas ajustadas
   ao conteúdo; nome (1ª coluna) alinhado à esquerda e truncado com reticências. */
table.dias-centro{ table-layout:auto; width:100%; }
table.dias-centro th, table.dias-centro td{ text-align:center; padding-left:8px; padding-right:8px; }
table.dias-centro th:first-child, table.dias-centro td:first-child{ text-align:left; }
table.dias-centro .nome-cel{
  display:inline-block; max-width:300px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
}
table.dias-centro td input[type=number]{ text-align:center; }
table.dias-centro td input[step="0.01"]{ margin-right:5px; }   /* 5px entre input e "%" */

/* Bloco 4: as duas tabelas do canal (Valor por dia / Pedidos por dia) têm
   conteúdos de larguras diferentes; com layout ajustado ao conteúdo elas ficam
   desalinhadas entre si. Aqui forçamos colunas iguais (layout fixo) só nessas
   tabelas para que as colunas dos dias alinhem verticalmente entre as duas. */
#bloco4 details.fase table.dias-centro{ table-layout:fixed; }
#bloco4 details.fase table.dias-centro th:first-child,
#bloco4 details.fase table.dias-centro td:first-child{ width:280px; }
#bloco4 details.fase table.dias-centro .nome-cel{ max-width:100%; }

/* Ajustes de fonte da página Metas (pedido do usuário).
   Escopados p/ não afetar Dashboard/Faturamento/Config (que compartilham
   .aviso, th, td). */
.auxiliar table th, .auxiliar table td{ font-size:15px; }   /* = legenda do auxiliar */
table.dias-centro th{ font-size:12.5px; }                    /* = chips */
table.dias-centro td{ font-size:14px; }
table.dias-centro td small{ font-size:11.5px; }              /* sub-valores R$ */
#lojas .aviso, #bloco2 .aviso, #bloco3 .aviso, #bloco4 .aviso{ font-size:16px; }
/* Rótulos-cabeçalho dos filtros ("Canais que entram na conversão/contagem") */
#bloco2 .fase-corpo > p > label{ font-size:17px; }

/* Legendas de validação (Σ % participação, Σ meta, Rentabilidade, Conversão…) no
   mesmo tamanho do nome dos canais/vendedores (14px), incluindo o "OK"/"ATENÇÃO". */
#bloco2 .fase-corpo ul, #bloco2 .fase-corpo ul .aviso,
#bloco3 .fase-corpo ul, #bloco3 .fase-corpo ul .aviso,
#bloco3 .legenda-val, #bloco3 .legenda-val .aviso{ font-size:14px; }

/* Campo de formulário em grade: a etiqueta pode ocupar 1, 2 ou 3 linhas que os
   inputs continuam alinhados na mesma altura (o input é empurrado para baixo). */
.campo{ display:flex; flex-direction:column; gap:6px; height:100%; }
/* A etiqueta ocupa todo o espaco acima do input e centraliza o texto nele: a de
   1 linha fica no meio da altura da de 3, em vez de grudada no topo. */
.campo label{ margin:0; flex:1; display:flex; align-items:center; }
/* altura fixa para o campo da Meta (fonte maior) nao subir em relacao aos outros */
.campo input, .campo select{ margin-top:auto; height:40px; flex:0 0 auto; }

/* Cabeçalho dos 3 blocos de KPI (loja / canal / vendedor), com o filtro à direita */
.bloco-kpi{ margin-top:18px; }
.bloco-kpi-cab{ display:flex; align-items:center; margin-bottom:12px; }
.bloco-kpi-cab h2{
  font-size:15px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--laranja); font-weight:800; margin:0; white-space:nowrap;
}
/* A pílula acompanha o texto: sem largura fixa não sobra vão entre o nome e a
   seta. O teto de 340px é o que faz nomes longos cortarem com "…". */
.bloco-kpi-cab .picker{ flex:0 1 auto; width:auto; max-width:340px; margin-left:20px; }
.bloco-kpi-cab .picker-btn{ padding:5px 12px; gap:8px; min-width:0; }
.bloco-kpi-cab .picker-rotulo{ min-width:0; }
/* O menu aberto não encolhe junto com a pílula */
.bloco-kpi-cab .picker-painel{ min-width:260px; }
/* A linha ocupa o que sobra depois do filtro */
.cab-linha{ flex:1; height:1px; background:var(--laranja); margin-left:20px; }
@media (max-width:700px){
  .bloco-kpi-cab{ flex-wrap:wrap; }
  .bloco-kpi-cab .picker{ flex:1 1 auto; width:auto; }
  .cab-linha{ flex:1 0 100%; margin:10px 0 0; }
}

/* Rosca sozinha na própria caixa (sem a lista de canais ao lado) */
.canais-resumo-so{ border-left:0; padding:6px 0 2px; }

/* Ranking de canais e rosca lado a lado, com a MESMA altura. O valor vem do
   conteúdo da rosca (200 da rosca + rótulo + números ≈ 338) mais o título e o
   padding do card; a lista de canais rola por dentro quando não cabe. */
.linha-canais{ align-items:stretch; }
.linha-canais > .card{ display:flex; flex-direction:column; height:394px; }
.linha-canais .rank-caixa{ flex:1; min-height:0; max-height:none; }
.linha-canais .canais-resumo-so{ flex:1; }
@media (max-width:1150px){
  .linha-canais > .card{ height:auto; }
  .linha-canais .rank-caixa{ max-height:394px; }
}

/* Os KPIs do Dashboard usam o mesmo fundo dos demais cards (var(--painel)).
   Na aba Metas o .mini-info continua com --painel-2 de propósito: lá ele fica
   DENTRO de outro card e precisa do contraste. */
#dashboard .card.mini-info{ background:var(--painel); }

/* Conteúdo dos KPIs centralizado nos dois eixos. Os filhos ficam com largura
   total para que barra de progresso e faixas continuem ocupando o card inteiro. */
#dashboard .grid.g4 > .card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
#dashboard .grid.g4 > .card > *{ width:100%; }
#dashboard .grid.g4 > .card .card-topo{ justify-content:center; gap:8px; }

/* Altura estável do gráfico diário: o de linha e o do dia ocupam o mesmo espaço,
   então a box não estica nem sobra ao alternar entre eles. */
.area-grafico{
  min-height:330px; max-height:330px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.area-grafico .gr-linha{ height:250px; }

/* Tabela do desempenho diário: altura fixa igual à do gráfico ao lado, com
   rolagem própria quando o mês tem mais dias do que cabem. */
.tabela-dia{ height:330px; }
.tabela-dia::-webkit-scrollbar{ width:8px; }
.tabela-dia::-webkit-scrollbar-track{ background:transparent; }
.tabela-dia::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }
.tabela-dia::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.30); }
.tabela-dia thead th{ position:sticky; top:0; z-index:2; }

/* Detalhe de um dia: centralizado e usando a caixa inteira */
.dia-detalhe{
  display:flex; align-items:center; justify-content:center; gap:28px;
  height:100%; padding:0 10px;
}
.dia-detalhe .donut{ width:170px; height:170px; }
.dia-detalhe .donut::after{ inset:19px; }
.dia-detalhe .donut b{ font-size:27px; }
.dia-dados{ min-width:0; }
.dia-valor{ font-size:30px; font-weight:800; color:var(--laranja); line-height:1.15; }
.dia-dados .kpi-sub{ font-size:14px; margin-top:4px; }
.dia-dif{ font-size:16px; font-weight:800; margin-top:8px; }
.dia-barra{ margin-top:14px; max-width:320px; }
/* Em tela estreita a rosca de 170px deixava só 110px para o texto, e o valor
   (30px) quebrava e vazava. Empilha rosca em cima, números embaixo, com a
   largura toda do card. A altura fixa da área também é liberada: no celular
   a tabela e o gráfico não ficam mais lado a lado, não há o que alinhar. */
@media (max-width:900px){
  .area-grafico{ min-height:0; max-height:none; }
}
@media (max-width:560px){
  .dia-detalhe{ flex-direction:column; gap:14px; padding:6px 0; }
  .dia-detalhe .donut{ width:132px; height:132px; }
  .dia-detalhe .donut::after{ inset:15px; }
  .dia-detalhe .donut b{ font-size:21px; }
  .dia-dados{ text-align:center; width:100%; }
  .dia-valor{ font-size:24px; }
  .dia-barra{ margin-left:auto; margin-right:auto; }
}

/* Canais em largura inteira, dividido ao meio: lista à esquerda, rosca à direita */
.canais-larg{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.canais-lista{
  min-width:0; max-height:340px; overflow-y:auto;
  padding-right:18px; align-self:center;
}
.canais-lista::-webkit-scrollbar{ width:8px; }
.canais-lista::-webkit-scrollbar-track{ background:transparent; }
.canais-lista::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }
.canais-lista::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.30); }
.canais-resumo{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:4px 0 4px 28px; border-left:1px solid var(--borda);
}
/* A rosca ocupa a metade direita inteira, então pode ser bem maior que a padrão */
.canais-resumo .donut{ width:200px; height:200px; }
.canais-resumo .donut::after{ inset:22px; }
.canais-resumo .donut b{ font-size:31px; }
.canais-alvo{
  margin:16px 0 2px; font-size:15px; font-weight:800; letter-spacing:.4px;
  color:var(--laranja); text-align:center;
}
/* Os 3 números usam a metade inteira: com pouca largura o valor da meta
   (R$ 2.100.000,00) quebrava em duas linhas. */
.canais-resumo .rosca-numeros{ width:100%; text-align:center; gap:10px; }
.canais-resumo .rosca-numeros b{ white-space:nowrap; font-size:18px; }
/* Em tela estreita os valores (com nowrap) vazavam pela direita. Precisa vir
   DEPOIS da regra acima: mesma especificidade, quem vence e a ordem. */
@media (max-width:560px){
  .canais-resumo .rosca-numeros{ gap:8px; }
  .canais-resumo .rosca-numeros b{ font-size:15px; }
  .canais-resumo .rosca-numeros .kpi-sub{ font-size:11px; }
}
@media (max-width:380px){
  .canais-resumo .rosca-numeros{ gap:6px; }
  .canais-resumo .rosca-numeros b{ font-size:13px; }
}
@media (max-width:900px){
  .canais-larg{ grid-template-columns:1fr; }
  .canais-lista{ padding-right:0; }
  .canais-resumo{ padding:16px 0 0; border-left:0; border-top:1px solid var(--borda); }
}

/* ---------- Dashboard: blocos de rosca (canais, meta do dia, devoluções) ---------- */
.canais-rosca{ display:flex; align-items:center; gap:18px; }
.canais-rosca > .rank{ flex:1; min-width:0; }
.rosca-lado{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; }
.rosca-numeros{
  display:flex; gap:14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--borda);
}
.rosca-numeros > div{ flex:1; }
.rosca-numeros b{ display:block; font-size:17px; font-weight:800; margin-top:2px; }
/* Título + valor + legenda com altura fixa: é o que faz TODAS as barras de
   progresso ficarem na mesma linha, mesmo com textos de tamanhos diferentes. */
.kpi-topo{
  min-height:96px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
}
.kpi-topo > *{ width:100%; }
#dashboard .grid.g4 .barra{ margin:0; }
/* Conteudo ancorado no topo: com o .kpi-topo de altura fixa, a barra cai sempre
   na mesma linha em todos os cards. Centralizar na vertical desalinhava, porque
   cada card tem uma quantidade diferente de texto abaixo da barra. */
#dashboard .grid.g4 > .card{ justify-content:flex-start; }

/* Card de conversão: rosca à esquerda, meta à direita, com folga entre eles */
.conv-linha{ display:flex; align-items:center; justify-content:center; gap:40px; }
/* pedidos e orçamentos lado a lado; se o número crescer, empilham em vez de vazar */
.conv-qtd{ display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; }
.nowrap{ white-space:nowrap; }

/* "hoje" e "falta" lado a lado, para economizar altura no card */
.dia-par{ display:flex; gap:12px; margin-top:8px; }
.dia-par > div{ flex:1; min-width:0; }
.dia-par b{ display:block; font-size:16px; font-weight:800; margin-top:2px; }

/* Saldo do nível no card "Meta real de hoje": texto solto, sem caixa. A cor
   vem de .pos (gordura) ou .neg (atraso). */
.saldo-dia{
  margin-top:12px; font-size:12px; letter-spacing:.4px; font-weight:800;
}
.saldo-dia b{ font-size:15px; margin-left:6px; }
/* linha do dia clicável na tabela de desempenho diário */
tbody tr.linha-dia{ cursor:pointer; }
tbody tr.linha-dia.selecionado td{ background:rgba(242,107,29,.14); }
@media (max-width:900px){ .canais-rosca{ flex-direction:column; align-items:stretch; } }

/* Ranking com altura sincronizada + rolagem interna quando necessario */
.rank-caixa{ max-height:420px; overflow-y:auto; }
.rank-caixa::-webkit-scrollbar{ width:8px; }
.rank-caixa::-webkit-scrollbar-track{ background:transparent; }
.rank-caixa::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }
.rank-caixa::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.30); }
/* Os rankings são apenas leitura (o recorte agora vem do filtro, não do clique) */
.rank li{ cursor:default; border-radius:8px; padding:8px 6px; }
.rank li:hover{ background:var(--hover); }

/* ==========================================================
   ABA CONFIGURAÇÕES
   ========================================================== */

/* Abas principais e sub-abas */
.cfg-abas{ display:flex; gap:26px; border-bottom:1px solid var(--borda); margin:14px 0 18px; }
.cfg-abas a{
  padding:10px 2px 12px; font-weight:800; font-size:14px; letter-spacing:.4px;
  color:var(--texto-2); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.cfg-abas a:hover{ color:var(--laranja); }
.cfg-abas a.ativa{ color:var(--laranja); border-bottom-color:var(--laranja); }

.cfg-subabas{ display:flex; gap:22px; border-bottom:1px solid var(--borda); margin:14px 0 6px; }
.cfg-subabas a{
  padding:8px 2px 10px; font-weight:700; font-size:13px; letter-spacing:.3px;
  color:var(--texto-2); border-bottom:2px solid transparent; margin-bottom:-1px;
  display:flex; align-items:center; gap:8px;
}
.cfg-subabas a.ativa{ color:var(--verde); border-bottom-color:var(--verde); }
.cfg-subabas .cont{
  background:var(--painel-2); border:1px solid var(--borda); border-radius:20px;
  padding:1px 9px; font-size:12px; color:var(--texto);
}
.cfg-subabas .cont.ok{ background:rgba(46,204,113,.15); border-color:rgba(46,204,113,.35); color:var(--verde); }

/* No celular as 3 abas não cabem lado a lado: os títulos quebravam em 2 e 3
   linhas e a régua de sublinhado ficava desalinhada. Abaixo de 700px elas dão
   lugar a um seletor (mesmo visual do "Ordenar por"), um conteúdo por vez.
   As duas marcações convivem — quem escolhe qual aparece é o CSS. */
.cfg-abas-sel{ display:none; margin:14px 0 18px; }
@media (max-width:700px){
  .cfg-abas{ display:none; }
  .cfg-abas-sel{ display:block; }
  .cfg-abas-sel .picker{ width:100%; }
  .cfg-abas-sel .picker-btn{ width:100%; justify-content:space-between; }
  /* "CANAIS ATIVOS/INATIVOS" também não cabia: aqui vira só ATIVOS/INATIVOS. */
  .cfg-subabas .so-largo{ display:none; }
  .cfg-subabas{ gap:18px; }
  .cfg-subabas a{ white-space:nowrap; }
}

/* Filtros (busca + ordenação) */
.cfg-filtros{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
.cfg-filtros label{ font-size:13px; }
.campo-busca{
  display:inline-flex; align-items:center; gap:8px; flex:1; min-width:220px; max-width:340px;
  background:var(--painel-2); border:1px solid var(--borda); border-radius:9px; padding:0 12px;
  color:var(--texto-3);
}
.campo-busca .ic{ width:15px; height:15px; }
.campo-busca input{
  border:0; background:transparent; padding:9px 0; width:100%; font-size:13px; color:var(--texto);
}
.campo-busca input:focus{ outline:none; }

/* Grade das linhas de canal (cabeçalho + linha usam as mesmas colunas).
   ATENÇÃO: usar "cfg-cab" e não "canal-cab" — esta última já é a linha de
   título do canal na tabela do Faturamento, e o nome repetido fazia aquela
   linha virar grid (primeira coluna de 22px), quebrando a tabela. */
.cfg-cab, .canal-linha{
  display:grid; grid-template-columns:22px 40px 1fr 140px 90px 120px 90px;
  align-items:center; gap:12px;
}
.cfg-cab{
  padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:.5px;
  color:var(--texto-3); text-transform:uppercase; border-bottom:1px solid var(--borda);
}
.cfg-cab .canal-col{ text-align:center; }

/* As 7 colunas fixas pediam ~600px: no celular a linha vazava 326px para fora
   da tela. Vira flex e as 4 colunas de número/cor/switch descem para a 2ª
   linha; o cabeçalho de colunas some, já que não haveria mais o que alinhar. */
@media (max-width:700px){
  .cfg-cab{ display:none; }
  .canal-linha{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
  .canal-linha > .canal-nome{ flex:1 1 140px; min-width:0; }
  .canal-linha > .canal-col{ flex:0 0 auto; }
  /* A caixinha com os nomes dos ativos só existe no hover — no celular ela
     nunca aparece e, mesmo oculta, empurrava a página 39px para o lado. */
  .canal-linha .dica{ display:none; }
}

/* sem overflow:hidden — senão a caixinha de "ativos" seria cortada */
.canal-item{ border:1px solid var(--borda); border-radius:12px; margin-top:10px; }
.canal-linha{ padding:14px; cursor:pointer; transition:background .12s; border-radius:12px; }
.canal-item.aberto .canal-linha{ border-radius:12px 12px 0 0; }
.canal-linha:hover{ background:var(--hover); }

/* Coluna ATIVOS + caixinha com os nomes (aparece só ao passar o mouse) */
.ativos-cel{ position:relative; }
.ativos-cel .n-ativos{ color:var(--verde); }
.dica{
  position:absolute; left:50%; top:calc(100% + 6px);
  transform:translateX(-50%) translateY(-5px) scale(.96); transform-origin:top center;
  background:rgba(0,0,0,.88); color:#fff; border:1px solid rgba(255,255,255,.12);
  border-radius:9px; padding:9px 12px; min-width:170px; max-width:280px;
  font-size:12px; font-weight:500; text-align:left; letter-spacing:0; text-transform:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5); z-index:60;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dica i{ display:block; font-style:normal; line-height:1.75; white-space:nowrap;
         overflow:hidden; text-overflow:ellipsis; }
.dica .dica-mais{ color:var(--texto-3); margin-top:3px; }
.ativos-cel:hover .dica{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }
.canal-chevron{ display:flex; color:var(--texto-3); }
.canal-chevron .ic{ width:15px; height:15px; transition:transform .15s; }
.canal-item.aberto .canal-chevron .ic{ transform:rotate(90deg); }
.canal-ico{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
}
.canal-ico .ic{ width:19px; height:19px; }
.canal-nome{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-weight:800; font-size:15px; }
.canal-nome small{ flex-basis:100%; font-weight:400; font-size:12px; color:var(--texto-3); }
.canal-col{ text-align:center; }
.canal-col b{ display:block; font-size:15px; font-weight:800; }
.canal-col small{ font-size:11px; color:var(--texto-3); }

/* Colaboradores: no máximo 5 visíveis; o resto rola */
.canal-corpo{ border-top:1px solid var(--borda); background:var(--painel-2); padding:12px 14px 14px; }
.colab-cab, .colab-linha{
  display:grid; grid-template-columns:30px 1fr 90px 60px; align-items:center; gap:12px;
}
.colab-cab{
  font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--texto-3);
  text-transform:uppercase; padding:0 6px 8px; grid-template-columns:1fr 90px 60px;
}
/* altura fixa da linha => a lista mostra exatamente 5 e rola o resto */
.colab-lista{ max-height:260px; overflow-y:auto; overflow-x:hidden; }
.colab-linha{
  height:52px; padding:0 6px; border-top:1px solid var(--borda);
  border-radius:8px; transition:background .12s;
}
.colab-linha:hover{ background:var(--hover); }
.colab-nome{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.avatar{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--painel); border:1px solid var(--borda);
  font-size:11px; font-weight:800; color:var(--texto-2); flex:0 0 auto;
}
.colab-lista::-webkit-scrollbar{ width:8px; }
.colab-lista::-webkit-scrollbar-track{ background:transparent; }
.colab-lista::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }
.colab-lista::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.30); }

/* Interruptor (on/off) */
.switch{ display:inline-flex; align-items:center; cursor:pointer; }
.switch input{ display:none; }
/* Trilho sólido + botão branco. Ligado = verde, desligado = cinza escuro. */
.switch i{
  width:40px; height:22px; border-radius:20px; background:#3a3d42;
  border:1px solid rgba(255,255,255,.10); position:relative; display:block;
  transition:background .45s ease, border-color .45s ease;
}
.switch i::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.45);
  /* devagar o bastante para acompanhar o botão indo de um lado ao outro */
  transition:transform .5s cubic-bezier(.34,1.4,.5,1), width .2s ease;
}
.switch input:checked + i{ background:var(--verde); border-color:var(--verde); }
.switch input:checked + i::after{ transform:translateX(18px); }
/* aperta e o botão estica um pouquinho, como nos apps */
.switch:active i::after{ width:20px; }
.switch input:checked + i:active::after{ transform:translateX(14px); }
.switch input:disabled + i{ opacity:.4; cursor:not-allowed; }
:root[data-tema="claro"] .switch i{ background:#cfd5de; }

/* ---------- Usuários ---------- */
/* As duas boxes têm a MESMA altura (align-items:stretch). Se a lista passar do
   limite, ela rola por dentro em vez de esticar a box. */
/* meio a meio: as duas boxes crescem juntas e não sobra espaço vazio */
.us-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
@media (max-width:1000px){ .us-grid{ grid-template-columns:1fr; } }
.us-form, .us-lista{
  background:var(--painel-2); border:1px solid var(--borda); border-radius:12px; padding:16px;
}
/* teto acima da altura natural do formulário: com poucos usuários a lista
   estica até a altura dele; com muitos, para no teto e rola por dentro */
.us-lista{ display:flex; flex-direction:column; max-height:540px; }
.us-itens{ flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; }
.us-itens::-webkit-scrollbar{ width:8px; }
.us-itens::-webkit-scrollbar-track{ background:transparent; }
.us-itens::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }
.us-itens::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.30); }
.us-form-cab{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.us-form-cab h4{ margin:0 0 2px; font-size:15px; color:var(--laranja); }
/* campos em 2 colunas: o formulário fica mais largo e menos alto */
.us-campos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.us-campos .campo.full{ grid-column:1 / -1; }
.us-campos .campo label{ display:block; font-size:12px; margin-bottom:5px; }
.us-campos .campo input, .us-campos .campo select{ width:100%; }
.us-campos .campo small{ display:block; margin-top:5px; line-height:1.5; }
@media (max-width:620px){ .us-campos{ grid-template-columns:1fr; } }
.us-opcoes{ display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.us-opcoes .opcao{ display:flex; align-items:center; gap:11px; cursor:pointer; color:var(--texto); font-weight:400; }
.us-opcoes .opcao b{ display:block; font-size:13px; }
.us-opcoes .opcao small{ font-size:11px; color:var(--texto-3); }
.us-acoes{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.us-lista h4{ margin:0; font-size:15px; color:var(--laranja); }
.us-item{
  display:grid; grid-template-columns:30px 1fr 80px 80px 150px; align-items:center; gap:12px;
  padding:11px 8px; border-top:1px solid var(--borda);
}
.us-item.eu{ background:rgba(242,107,29,.06); border-radius:8px; }
.us-txt{ min-width:0; }
.us-txt b{ display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.us-txt small{ font-size:11px; color:var(--texto-3); }
.us-btns{ display:flex; gap:6px; justify-content:flex-end; }
.us-item .badge{ text-align:center; }
/* A lista da aba Nível de acesso tem 4 colunas (sem o botão de excluir). Vinha
   como style inline no HTML, que ganhava da regra de celular abaixo e mantinha
   as colunas fixas — a linha vazava para fora da tela. */
.us-item-acesso{ grid-template-columns:30px 1fr 90px 110px; }
@media (max-width:760px){
  .us-item, .us-item-acesso{ grid-template-columns:30px 1fr; }
  .us-item .badge, .us-btns{ grid-column:2; }
}

/* Chave ativa/inativa da loja, ao lado do nome (Configurações) */
.loja-cab{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.loja-cab h3{ margin:0; }
.loja-chave{ display:inline-flex; align-items:center; gap:8px; }

/* Botão de ícone do canal (abre o modal de upload) */
button.canal-ico{ border:0; cursor:pointer; padding:0; position:relative; overflow:hidden; }
button.canal-ico img, .modal-previa img{ width:100%; height:100%; object-fit:contain; border-radius:10px; }
.canal-ico-lapis{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); color:#fff; opacity:0; transition:opacity .15s;
}
button.canal-ico:hover .canal-ico-lapis{ opacity:1; }
.canal-ico-lapis .ic{ width:15px; height:15px; }

/* Modal (pop-up) */
.modal-fundo{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
  width:100%; max-width:460px; background:var(--painel); border:1px solid var(--borda);
  border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.5); padding:20px;
}
.modal-cab{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.modal-cab h4{ margin:0 0 2px; font-size:16px; color:var(--laranja); }
.modal-regras{ margin:10px 0 14px; padding-left:20px; font-size:13px; line-height:1.9; color:var(--texto-2); }
.modal-previa{
  display:flex; align-items:center; gap:12px; padding:12px;
  background:var(--painel-2); border:1px dashed var(--borda); border-radius:10px; margin-bottom:12px;
}
.modal-previa img{ width:48px; height:48px; }
.modal-previa .canal-ico{ width:48px; height:48px; color:var(--laranja); background:rgba(242,107,29,.15); }
.modal-acoes{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

/* Matriz de permissões: 3 caixas lado a lado */
.perm-titulo{ color:var(--laranja); font-size:15px; margin:4px 0 4px; }
.perm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:14px 0 4px; }
@media (max-width:1050px){ .perm-grid{ grid-template-columns:1fr; } }
.perm-box{
  background:var(--painel-2); border:1px solid var(--borda); border-radius:12px; padding:16px;
}
.perm-box.fixo{ border-color:rgba(242,107,29,.35); background:rgba(242,107,29,.06); }
.perm-cab{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.perm-cab h4{ margin:0 0 2px; font-size:15px; color:var(--laranja); }
.perm-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-top:1px solid var(--borda); cursor:pointer;
}
.perm-item b{ display:block; font-size:13px; font-weight:600; color:var(--texto); }
.perm-item small{ font-size:11px; color:var(--texto-3); }
.perm-box.fixo .perm-item{ cursor:default; }
/* Rodapé: o que o nível SEMPRE vê (vem do vínculo, não dos interruptores) */
.perm-escopo{
  display:flex; gap:8px; margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--borda);
}
.perm-escopo p{ margin:0; font-size:12px; line-height:1.65; color:var(--texto-2); }
.perm-escopo b{ color:var(--texto); }
.perm-escopo .ic{ width:15px; height:15px; flex:0 0 auto; margin-top:2px; }

/* Nível de acesso: opções em cartão */
.niveis{ display:flex; flex-direction:column; gap:8px; }
.opcao-nivel{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  border:1px solid var(--borda); border-radius:10px; padding:11px 13px;
  transition:border-color .12s, background .12s;
}
.opcao-nivel:hover{ border-color:var(--laranja); }
.opcao-nivel.sel{ border-color:var(--laranja); background:rgba(242,107,29,.10); }
.opcao-nivel input{ accent-color:var(--laranja); margin-top:2px; }
.opcao-nivel b{ display:block; font-size:13px; }
.opcao-nivel small{ font-size:11px; color:var(--texto-3); }

/* Somente leitura: trava os campos na tela (a API é quem barra de verdade) */
.faixa-leitura{
  display:flex; align-items:center; gap:9px; margin-bottom:14px;
  background:rgba(242,107,29,.10); border:1px solid rgba(242,107,29,.32);
  border-radius:10px; padding:9px 14px; font-size:13px; color:var(--texto);
}
.faixa-leitura .ic{ width:15px; height:15px; color:var(--laranja); }
/* Trava SOMENTE as areas que alteram dados. O cabecalho (Sair, tema, filtros de
   empresa/mes) e o filtro de periodo do Faturamento continuam funcionando —
   antes a regra pegava .conteudo inteiro e prendia o usuario na pagina. */
body.somente-leitura :is(#lojas, #bloco2, #bloco3, #bloco4, #config, #usuarios, #acesso)
  :is(input, textarea, select, .switch, .picker, .chips label, .calendario td a, .btn){
  pointer-events:none; opacity:.6;
}
body.somente-leitura :is(#lojas, #bloco2, #bloco3, #bloco4, #config) .btn.primario{ display:none; }

/* Placeholder de bloco ainda em desenvolvimento */
.em-breve{ text-align:center; padding:44px 20px; }
.em-breve .ico-circ{ margin-bottom:14px; }
.em-breve p{ margin-top:6px; line-height:1.7; }