/* ==================================================================
   HubDeVendas — Elonorte Distribuidora
   Paleta reaproveitada do protótipo (design tokens roxo/dourado).
   O SIDEBAR/TOPBAR/LOGIN foram redesenhados a partir das imagens de
   referência enviadas pelo usuário (cartão de login "HUB" e menu com
   sidebar roxa + chip "Nome / Cargo - Código - Pasta"); o conteúdo das
   telas (cards, KPIs, tabelas) reaproveita o estilo original.
   ================================================================== */
:root{
  --roxo-950:#160D26;
  --roxo-900:#1E1233;
  --roxo-800:#2A1A47;
  --roxo-700:#3B2564;
  --roxo-600:#4E3180;
  --roxo-500:#6B3FA0;
  --roxo-400:#8B5FC7;
  --roxo-300:#B79BE0;
  --roxo-200:#D8CAEF;
  --roxo-100:#EDE7F7;
  --roxo-50:#F7F4FC;

  --ouro-600:#B8912A;
  --ouro-500:#D4AF37;
  --ouro-400:#E4C45C;
  --ouro-300:#F2DC9B;
  --ouro-100:#FBF3DC;

  --branco:#FFFFFF;
  --superficie:#F2F1F6;
  --card:#FFFFFF;
  --borda:#E7E3F0;

  --ink-1:#241A38;
  --ink-2:#5A5170;
  --ink-3:#8B84A0;

  --ok:#1E8E5A;   --ok-bg:#E4F5EC;
  --alerta:#B97D10; --alerta-bg:#FBF1DC;
  --grave:#C2452D;  --grave-bg:#FBE7E2;

  --sidebar-w:210px;
  --sidebar-w-mini:84px;
  --raio:14px;
  --sombra:0 1px 2px rgba(30,18,51,.06), 0 4px 14px rgba(30,18,51,.07);
  --sombra-alta:0 8px 30px rgba(30,18,51,.22);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--superficie);
  color:var(--ink-1);
  font-size:14px;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}

/* ============================ LOGIN ============================ */
.tela-login{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--roxo-600);padding:24px;position:relative;overflow:hidden;
}
/* Círculo decorativo no topo (referência: mockup Figma da tela de login
   mobile) — só visual, sem função. */
.tela-login::before{
  content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%);
  width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.10);
}
.pilha-login{position:relative;width:min(360px,100%);z-index:1}
.pilha-login::before,.pilha-login::after{
  content:'';position:absolute;left:50%;border-radius:22px;
  background:rgba(255,255,255,.16);transform:translateX(-50%);
}
.pilha-login::before{top:-18px;width:88%;height:36px}
.pilha-login::after{top:-9px;width:94%;height:30px}
.cartao-login{
  position:relative;background:var(--branco);border-radius:20px;
  box-shadow:var(--sombra-alta);padding:34px 32px 30px;text-align:center;
}
.cartao-login .rotulo-hub{
  font-size:12px;font-weight:800;letter-spacing:2px;color:var(--ink-2);margin-bottom:14px;
}
.cartao-login .marca-login{margin-bottom:14px}
.cartao-login .marca-login .logo-horizontal-login{
  max-width:230px;width:100%;height:auto;margin:0 auto;display:block;
}
.campo-login{text-align:left;margin-bottom:16px}
.campo-login label{display:block;font-size:12px;font-weight:700;color:var(--roxo-600);margin-bottom:6px}
.campo-login input{
  width:100%;height:40px;border-radius:10px;border:1px solid var(--borda);
  background:var(--superficie);padding:0 14px;font-size:13.5px;color:var(--ink-1);
}
.campo-login input:focus{outline:2px solid var(--roxo-300);background:#fff}
.btn-login{
  width:100%;height:42px;border-radius:10px;margin-top:8px;
  background:var(--roxo-600);color:#fff;font-weight:700;font-size:13px;
  letter-spacing:.4px;text-transform:uppercase;transition:background .18s;
}
.btn-login:hover{background:var(--roxo-700)}
.rodape-login{
  position:relative;z-index:1;margin-top:20px;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.6);text-align:center;
}
.erro-login{
  background:var(--grave-bg);color:var(--grave);font-size:12px;font-weight:600;
  border-radius:8px;padding:8px 12px;margin-bottom:14px;text-align:left;
}

/* ============================ APP SHELL ============================ */
.app{display:flex;min-height:100vh;gap:14px;padding:14px}

.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:linear-gradient(178deg,var(--roxo-600) 0%,var(--roxo-700) 100%);
  border-radius:20px;color:#fff;display:flex;flex-direction:column;
  box-shadow:var(--sombra);overflow:hidden;position:sticky;top:14px;
  height:calc(100vh - 28px);
}
.sidebar .marca{display:flex;align-items:center;justify-content:center;padding:22px 18px 18px;transition:padding .2s}
.sidebar .marca .marca-horizontal{max-width:100%;height:auto;display:block}
.sidebar .marca .marca-simbolo{
  width:44px;height:44px;border-radius:9px;display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);color:var(--roxo-200);font-size:17px;
}
.sidebar .marca .marca-simbolo:hover{background:rgba(255,255,255,.14);color:#fff}

.btn-colapso{
  margin:2px 14px 10px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgba(255,255,255,.07);color:var(--roxo-200);font-size:11.5px;font-weight:600;
  transition:background .2s;white-space:nowrap;
}
.btn-colapso:hover{background:rgba(255,255,255,.14);color:#fff}

.menu{flex:1;overflow-y:auto;padding:6px 12px;display:flex;flex-direction:column;gap:3px}
.item-menu{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  color:var(--roxo-200);font-size:13px;font-weight:500;transition:background .18s,color .18s;
  position:relative;
}
.item-menu i{width:18px;text-align:center;font-size:14px}
.item-menu:hover{background:rgba(255,255,255,.09);color:#fff}
.item-menu.ativo{background:rgba(255,255,255,.16);color:#fff;font-weight:700}

/* ---------- Sidebar recolhida: só o símbolo grande + ícones ---------- */
.app.mini .sidebar{width:var(--sidebar-w-mini);min-width:var(--sidebar-w-mini);transition:width .22s,min-width .22s}
.app.mini .sidebar .marca{padding:24px 0 18px}
.app.mini .sidebar .marca .marca-horizontal{display:none}
.app.mini .sidebar .marca .marca-simbolo{display:flex}
.app.mini .item-menu span{display:none}
/* Recolhido, o botão de expandir/recolher passa a viver dentro do bloco da
   marca (.marca-simbolo, com a mesma seta) — o btn-colapso original some
   pra não duplicar o mesmo controle duas vezes na sidebar. */
.app.mini .btn-colapso{display:none}
.app.mini .item-menu{justify-content:center;padding:12px 0}
.app.mini .item-menu i{font-size:17px}

/* Tooltip com o nome da tela quando o menu está recolhido.
   Era um `::after` com `position:fixed` dentro do próprio `.item-menu`
   (dentro da `.sidebar`, que tem `overflow:hidden` pros cantos
   arredondados) com um `left` calculado em px — mesmo corrigindo esse
   cálculo, o tooltip continuava nascendo com boa parte escondida atrás
   do conteúdo da tela (banner de destaques, cards etc.), apesar do
   z-index alto: na prática, um pseudo-elemento `fixed` aninhado várias
   camadas dentro de um ancestral com `overflow:hidden` (a `.sidebar`) não
   se comportou de forma confiável entre os navegadores — é exatamente o
   "o nome da aba fica sumindo embaixo dos itens" relatado pelo usuário.
   Substituído por um elemento de verdade (`#tooltipMenuMini`, ver
   templates/base.html), um DIV solto direto no `<body>` — fora da
   `.sidebar` por completo, não tem ancestral nenhum pra clipar ou
   competir de stacking context — posicionado via JS no `mouseenter` de
   cada item (`alternarTooltipMenuMini` no script de base.html). */
.tooltip-menu-mini{
  position:fixed;top:0;left:0;transform:translateY(-50%);
  background:var(--roxo-900);color:#fff;padding:6px 12px;border-radius:8px;
  font-size:12px;font-weight:600;white-space:nowrap;box-shadow:var(--sombra-alta);
  z-index:200;pointer-events:none;opacity:0;transition:opacity .12s;
}
.tooltip-menu-mini.visivel{opacity:1}

.principal{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}

.topo{
  height:60px;min-height:60px;background:var(--branco);border-radius:16px;
  box-shadow:var(--sombra);display:flex;align-items:center;padding:0 20px;gap:16px;
}
.topo h1{font-size:16.5px;font-weight:700}
.topo .sub-competencia{font-size:12px;color:var(--ink-3)}
/* filtro de mês (3 últimos) — ver apps/vendas/competencia.py */
.filtro-mes{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-3)}
.filtro-mes i{margin-right:4px}
.filtro-mes a{padding:4px 10px;border-radius:999px;color:var(--ink-2,#555);text-decoration:none;font-weight:600;white-space:nowrap}
.filtro-mes a:hover{background:var(--roxo-50)}
.filtro-mes a.ativo{background:var(--roxo-600);color:#fff}
.filtro-mes a.sem-dados{opacity:.55;font-weight:500}
.aviso-sem-dados{background:var(--roxo-50);color:var(--roxo-600);border-radius:12px;padding:10px 14px;font-size:12.5px;margin-bottom:14px}
.topo .direita{margin-left:auto;display:flex;align-items:center;gap:12px}
.chip-perfil{
  background:var(--roxo-100);border-radius:14px;padding:6px 16px;
  line-height:1.25;text-align:left;
}
.chip-perfil b{display:block;font-size:12.5px;color:var(--roxo-700)}
.chip-perfil span{display:block;font-size:10.5px;color:var(--roxo-500);font-weight:600}

/* Botão "Sair": do lado do perfil, no topo (desktop e mobile) — ver
   @media no fim do arquivo pra versão mais compacta no celular. */
.form-sair-perfil{display:flex}
.btn-sair-perfil{
  width:34px;height:34px;min-width:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  background:var(--roxo-50);color:var(--roxo-500);transition:all .15s;
}
.btn-sair-perfil:hover{background:#fee2e2;color:#dc2626}

/* Elementos exclusivos do layout mobile (ver @media no fim do arquivo) —
   escondidos por padrão pra não aparecerem no desktop, que continua
   idêntico a antes. */
.btn-menu-mobile,.titulo-mobile,.avatar-topo,.btn-fechar-menu-mobile{display:none}

.conteudo-scroll{flex:1;padding-bottom:20px}

/* ==================== COMPONENTES DE CONTEÚDO ==================== */
.grade{display:grid;gap:16px}
.card{
  background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
  padding:18px 20px;box-shadow:var(--sombra);
}
.card h3{font-size:13px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:9px;margin-bottom:12px}
.card h3 i{color:var(--roxo-400)}

.kpi-valor{font-size:26px;font-weight:800;letter-spacing:-.5px}
.kpi-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}

.prog{height:8px;border-radius:99px;background:var(--roxo-100);overflow:hidden;margin-top:10px}
.prog>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--roxo-500),var(--roxo-400))}
.prog>i.ok{background:var(--ok)} .prog>i.alerta{background:var(--alerta)} .prog>i.grave{background:var(--grave)}
.prog-rotulo{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:6px}

.hero-remun{
  background:linear-gradient(120deg,var(--roxo-800) 0%,var(--roxo-600) 78%,var(--roxo-500) 120%);
  color:#fff;border:none;
}
.hero-remun h3{color:var(--roxo-200)} .hero-remun h3 i{color:var(--ouro-400)}
.hero-remun .kpi-valor{font-size:34px;color:#fff}
.hero-remun .kpi-sub{color:var(--roxo-200)}

.tabela{width:100%;border-collapse:collapse;font-size:12.5px}
.tabela th{
  text-align:left;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--borda);
}
.tabela td{padding:9px 10px;border-bottom:1px solid var(--roxo-50)}
.tabela tr:last-child td{border-bottom:none}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tabela tbody tr:hover{background:var(--roxo-50)}

/* "Composição dos ganhos" (Remuneração, RCA) — era uma <table> de 2
   colunas; no celular a coluna do rótulo espremia a do valor e o "R$"
   quebrava numa linha e o número ia pra linha de baixo. Virou uma lista
   em flex: o rótulo pode ocupar 2 linhas livremente, mas "R$ 1.234,56"
   nunca separa (nowrap), sempre alinhado à direita, moeda e número juntos. */
.lista-composicao{display:flex;flex-direction:column}
.lista-composicao .linha-comp{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 2px;border-bottom:1px solid var(--roxo-50);font-size:12.5px;
}
.lista-composicao .linha-comp:last-of-type{border-bottom:none}
.lista-composicao .linha-comp>span:first-child{color:var(--ink-2)}
.lista-composicao .linha-comp>b{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.lista-composicao .linha-comp.total{
  background:var(--ouro-100);border-radius:10px;padding:10px 12px;margin-top:4px;border-bottom:none;
}
.lista-composicao .linha-comp.total>span{font-weight:800;color:var(--ink-1)}
.lista-composicao .linha-comp.total>b{font-size:15px;font-weight:800;color:var(--ouro-600)}

/* Cards "Comissões e previsões por indústria" (Remuneração, RCA) — mesmo
   padrão visual dos cards de RCA (.card-rca/.mini-metrica/.linha-remun),
   só que o cabeçalho é a indústria em vez da pessoa. O subtítulo
   ("Comissão X% · participação Y%") quebra em 2 linhas se precisar, em vez
   de cortar com "…" — truncar aqui perderia o número da participação, que
   é justamente o dado que importa. */

.medalha{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:800;background:var(--roxo-100);color:var(--roxo-600)}
.medalha.m1{background:var(--ouro-500);color:var(--roxo-900)}
.medalha.m2{background:#CBCBD6;color:#3d3d4e}
.medalha.m3{background:#DDA15E;color:#4d2d0f}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:99px}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.roxo{background:var(--roxo-100);color:var(--roxo-600)}
.badge.ouro{background:var(--ouro-100);color:var(--ouro-600)}
.badge.grave{background:var(--grave-bg);color:var(--grave)}
/* faltava a variante "alerta" (só existiam ok/roxo/ouro/grave) — o pill
   ficava sem fundo/cor nenhum, texto preto "solto" sem parecer badge;
   já era usado (badge alerta) em 3 lugares na tela Remuneração ("não
   atingido"/"nenhuma indústria bateu a meta") e passou a ser usado
   também nos novos cards de RCA (pct_meta 70-99% = alerta). */
.badge.alerta{background:var(--alerta-bg);color:var(--alerta)}

.titulo-secao{display:flex;align-items:center;gap:10px;margin:22px 0 14px;font-size:14.5px;font-weight:800}
.titulo-secao i{color:var(--ouro-500)}
.titulo-secao small{font-weight:500;color:var(--ink-3);font-size:12px}

/* cards de campanha/ação */
.card-acao{display:flex;flex-direction:column;gap:12px}
/* destaque temporário de qual card é o alvo ao chegar via link do banner
   de destaques (#campanha-<pk> / #acao-<pk>, ver templates/base.html) —
   :target casa com o elemento cujo id é igual à #âncora da URL atual. */
.card-acao:target{
  border-color:var(--ouro-400);box-shadow:0 0 0 3px var(--ouro-100),var(--sombra-alta);
  animation:pisca-destaque 1.8s ease-out 1;
}
@keyframes pisca-destaque{
  0%{box-shadow:0 0 0 3px var(--ouro-300),var(--sombra-alta)}
  100%{box-shadow:0 0 0 3px var(--ouro-100),var(--sombra-alta)}
}
.cab-acao{display:flex;align-items:center;gap:12px}
.cab-acao .icone{width:38px;height:38px;min-width:38px;border-radius:11px;display:grid;place-items:center;font-size:16px;background:linear-gradient(135deg,var(--roxo-600),var(--roxo-400));color:#fff}
.cab-acao .icone.ouro{background:var(--ouro-100);color:var(--ouro-600)}
/* Imagem enviada pelo admin no lugar do ícone (ver campo "imagem" em
   Campanha/Acao) — mesma caixa 38x38, só que com a foto preenchendo tudo
   (sem sobra branca) em vez do gradiente/cor de fundo. */
.cab-acao .icone.tem-imagem{background:none;padding:0;overflow:hidden}
.cab-acao .icone.tem-imagem img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cab-acao h4{font-size:14px;font-weight:800}
.cab-acao .periodo{font-size:11px;color:var(--ink-3);margin-top:1px}
.card-acao .sinopse{font-size:12px;color:var(--ink-2);line-height:1.5}
.rodape-acao{display:flex;align-items:center;gap:8px;margin-top:auto;flex-wrap:wrap}
.ganho-destaque{background:var(--roxo-50);border-radius:12px;padding:12px 14px}
.ganho-destaque b{font-size:23px;color:var(--roxo-700);display:block}
.ganho-destaque span{font-size:11px;color:var(--ink-3);line-height:1.6}
.ganho-destaque span i{color:var(--grave);margin-right:3px}

/* grade de indústrias (tela Ações) */
.grade-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.card-logo{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  padding:18px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;
}
.card-logo:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:var(--ouro-400)}
.card-logo .moldura{height:66px;display:grid;place-items:center;width:100%}
.card-logo img{max-height:60px;max-width:82%;object-fit:contain}
.card-logo .logo-txt{
  width:60px;height:60px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--roxo-600),var(--roxo-400));color:#fff;font-weight:800;font-size:19px;
}
.card-logo b{font-size:12px;color:var(--ink-1)}
.card-logo .qtd{font-size:10px;font-weight:700;color:var(--roxo-500);background:var(--roxo-50);border-radius:99px;padding:3px 10px}

.mensagens{margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.mensagem{padding:10px 14px;border-radius:10px;font-size:12.5px;font-weight:600}
.mensagem.success{background:var(--ok-bg);color:var(--ok)}
.mensagem.error{background:var(--grave-bg);color:var(--grave)}

/* pílulas de variação (delta), tela Relatórios */
.delta{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px}
.delta.up{color:var(--ok);background:var(--ok-bg)}
.delta.down{color:var(--grave);background:var(--grave-bg)}
.delta.flat{color:var(--alerta);background:var(--alerta-bg)}

/* trilha (breadcrumb) do drill-down de Relatórios */
.trilha{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:14px;font-size:12px}
.trilha a{
  font-size:12px;font-weight:600;color:var(--roxo-500);
  padding:4px 9px;border-radius:8px;background:var(--roxo-50);text-decoration:none;
}
.trilha a:hover{background:var(--roxo-100)}
.trilha b{padding:4px 9px;color:var(--ink-1)}
.trilha i{font-size:9px;color:var(--ink-3)}

/* linha do drill (barra proporcional) */
.drill-linha{
  display:grid;grid-template-columns:26px 1fr 130px 62px;gap:10px;align-items:center;
  padding:9px 10px;border-radius:10px;transition:background .15s;text-decoration:none;color:inherit;
}
a.drill-linha{cursor:pointer}
.drill-linha:hover{background:var(--roxo-50)}
.drill-linha.folha{cursor:default}
.drill-linha .nome{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drill-linha .nome small{display:block;font-weight:500;color:var(--ink-3);font-size:10.5px}
.drill-linha .barra{height:9px;border-radius:99px;background:var(--roxo-100);overflow:hidden}
.drill-linha .barra i{display:block;height:100%;background:linear-gradient(90deg,var(--roxo-500),var(--roxo-400));border-radius:99px}
.drill-linha .val{text-align:right;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.drill-linha .val small{display:block;font-weight:500;color:var(--ink-3)}
.drill-linha .icone-nivel{width:26px;height:26px;border-radius:8px;background:var(--roxo-100);color:var(--roxo-600);display:grid;place-items:center;font-size:11px}

/* evolução mensal em barras (Relatórios) */
/* Coluna do valor é LARGURA FIXA (136px), não acompanha a largura da tela —
   por isso o "R$ 1.128.203,57" quebrava linha (ficando só o "R$" em cima do
   número) tanto no desktop quanto no mobile: o problema nunca foi espaço de
   tela sobrando, era o texto (que ficou mais longo depois do separador de
   milhar) não caber nos 90px fixos de antes. 136px é a largura medida do
   texto mais longo (com folga) + nowrap trava numa linha só de vez. */
.evolucao-linha{display:grid;grid-template-columns:70px 1fr 136px;gap:10px;align-items:center;padding:6px 0;font-size:12px}
.evolucao-linha .mes{font-weight:700;color:var(--ink-2)}
.evolucao-linha .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;
  font-size:12.5px;font-weight:700;background:var(--roxo-600);color:#fff;transition:background .18s;
}
.btn:hover{background:var(--roxo-700)}
.btn.secundario{background:var(--roxo-50);color:var(--roxo-600)}
.btn.secundario:hover{background:var(--roxo-100)}
.btn.perigo{background:var(--grave-bg);color:var(--grave)}
.btn.ouro{background:linear-gradient(135deg,var(--ouro-600),var(--ouro-400));color:var(--roxo-900)}
.btn.ouro:hover{filter:brightness(1.05)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:640px}
.form-grid .campo{display:flex;flex-direction:column;gap:6px}
.form-grid .campo.full{grid-column:1 / -1}
.form-grid label{font-size:12px;font-weight:700;color:var(--roxo-600)}
.form-grid input,.form-grid select{
  height:38px;border-radius:9px;border:1px solid var(--borda);padding:0 12px;font-size:13px;
}
.form-grid textarea{
  border-radius:9px;border:1px solid var(--borda);padding:10px 12px;font-size:13px;
  font-family:inherit;resize:vertical;min-height:70px;
}
.form-grid .ajuda{font-size:11px;color:var(--ink-3)}
.form-grid .erro{font-size:11px;color:var(--grave);font-weight:600}

/* Badge que também é botão (ex.: status Ativa/Inativa clicável nas
   listagens de Cadastro de Ações e Campanhas) — reaproveita a pílula
   visual do .badge, só tira a aparência padrão de <button>. */
.badge-btn{border:none;cursor:pointer;font:inherit}
.badge-btn:hover{filter:brightness(0.95)}

.vazio{padding:40px;text-align:center;color:var(--ink-3);font-size:13px}

/* tela Arquivos */
.filtros-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filtros-chips a{
  font-size:11.5px;font-weight:600;padding:7px 14px;border-radius:99px;
  background:#fff;border:1px solid var(--borda);color:var(--ink-2);transition:all .15s;text-decoration:none;
}
.filtros-chips a:hover{border-color:var(--roxo-300)}
.filtros-chips a.ativo{background:var(--roxo-600);border-color:var(--roxo-600);color:#fff}
.linha-arquivo{display:grid;grid-template-columns:42px 1fr 150px 90px 110px 44px;gap:12px;align-items:center;padding:10px 12px;border-radius:11px}
.linha-arquivo:hover{background:var(--roxo-50)}
.linha-arquivo .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:15px}
.btn-baixar{width:36px;height:36px;border-radius:10px;background:var(--roxo-50);color:var(--roxo-500);transition:all .15s;border:none;cursor:pointer}
.btn-baixar:hover{background:var(--roxo-600);color:#fff}
a.btn-baixar{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn-baixar:disabled,.btn-baixar:disabled:hover{background:var(--roxo-50);color:var(--roxo-500);opacity:.35;cursor:not-allowed}
@media (max-width: 860px){
  .linha-arquivo{grid-template-columns:42px 1fr 44px}
  .linha-arquivo .col-oculta{display:none}
}

/* barra de destaques (campanhas/ações ativas) — topo, todas as telas.
   Altura FIXA (pedido do usuário: o card ficava mudando de tamanho ao
   trocar de destaque, dependendo de quanto texto tinha a sinopse de cada
   campanha/ação) — em vez do card crescer/encolher junto com o texto,
   agora ele sempre tem essa altura e o texto mais longo é truncado com
   "..." (ver .cd-detalhe p, .cd-regra, .cd-txt h2/p abaixo) em vez de
   esticar o card. #cdTrilho e .cd-slide precisam de height:100% (não só
   a altura vir "de graça" do conteúdo) pra herdar essa altura fixa. */
.carrossel-destaques{
  position:relative;border-radius:var(--raio);box-shadow:var(--sombra);margin-bottom:20px;overflow:hidden;
  height:200px;
}
#cdTrilho{height:100%}
/* .cd-slide agora é um <a> (clicar no destaque leva pra página da
   campanha/ação, ver templates/base.html) — precisa de display:block
   porque link é inline por padrão, e o hover dá um feedback bem sutil de
   que é clicável (o cursor de link o navegador já dá de graça). */
.cd-slide{display:block;height:100%;overflow:hidden;transition:filter .15s}
.cd-slide:hover{filter:brightness(1.05)}
.cd-slide:nth-child(4n+1){background:linear-gradient(115deg,var(--roxo-800) 10%,var(--roxo-600) 70%,var(--roxo-400))}
.cd-slide:nth-child(4n+2){background:linear-gradient(115deg,var(--roxo-900) 10%,var(--roxo-700) 70%,var(--roxo-500))}
.cd-slide:nth-child(4n+3){background:linear-gradient(115deg,var(--roxo-950),var(--roxo-800) 60%,var(--roxo-600))}
.cd-slide:nth-child(4n+4){background:linear-gradient(115deg,var(--roxo-800) 15%,var(--roxo-600) 60%,var(--ouro-600) 160%)}
.cd-cab{display:flex;align-items:center;gap:16px;padding:18px 44px 12px 24px;color:#fff}
.cd-logo{
  width:52px;height:52px;min-width:52px;border-radius:12px;background:#fff;display:grid;place-items:center;
  padding:6px;box-shadow:var(--sombra);
}
.cd-logo img{max-width:100%;max-height:100%;object-fit:contain}
.cd-logo.cd-logo-iniciais{background:linear-gradient(135deg,var(--roxo-400),var(--ouro-400));color:#fff;font-weight:800;font-size:15px}
.cd-tag{
  display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(255,255,255,.16);padding:4px 10px;border-radius:99px;margin-bottom:6px;
}
.cd-txt{flex:1;min-width:0}
.cd-txt h2{font-size:16px;font-weight:800;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-txt p{font-size:11.5px;color:var(--roxo-200);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* padding-bottom (18px -> 34px) e margin-top na .cd-regra: antes a linha
   "Período: .../..." (ou a regra de premiação) ficava colada nos
   pontinhos de navegação (.cd-pontos, `bottom:10px` dentro do MESMO
   contêiner .carrossel-destaques) — pouco espaço tanto acima (encostada
   no parágrafo da sinopse) quanto abaixo (quase tocando os pontinhos).
   Pedido do usuário comparando print da tela Ações ("HIT L'Oréal"). */
.cd-detalhe{display:block;padding:0 44px 34px 92px;color:#fff}
/* clamp de 2 linhas — junto com a altura fixa do .carrossel-destaques
   acima, garante que uma sinopse mais longa trunque com "..." em vez de
   esticar o card (a altura reservada aqui já conta com essas 2 linhas). */
.cd-detalhe p{
  font-size:12px;color:var(--roxo-100);line-height:1.55;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cd-regra{
  display:block;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--ouro-300);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cd-regra i{margin-right:5px}
.cd-setas{position:absolute;top:0;right:0;height:100%;display:flex;flex-direction:column;z-index:5}
.cd-setas button{
  flex:1;width:38px;background:transparent;border:0;color:rgba(255,255,255,.7);cursor:pointer;transition:background .15s;
}
.cd-setas button:hover{background:rgba(22,13,38,.35)}
.cd-pontos{position:absolute;bottom:10px;left:92px;display:flex;gap:6px;z-index:5}
.cd-pontos button{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.4);border:0;cursor:pointer;transition:all .2s;padding:0}
.cd-pontos button.ativo{width:20px;background:var(--ouro-400)}
@media (max-width: 700px){
  .cd-cab{padding:16px 48px 12px 16px;gap:12px}
  .cd-detalhe{padding:0 40px 30px 16px}
  .cd-pontos{left:16px}
}

/* KPI clicável (link "detalhar" -> Relatórios) */
.card.clicavel{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.card.clicavel:hover{box-shadow:var(--sombra-alta);border-color:var(--roxo-300)}
.dica{
  margin-left:auto;font-size:10px;font-weight:700;color:var(--roxo-400);display:inline-flex;align-items:center;gap:4px;
}

/* anel SVG de progresso (cobertura) */
.cobertura-central{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.anel{position:relative;width:104px;height:104px;min-width:104px}
.anel svg{transform:rotate(-90deg)}
.anel .centro{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.anel .centro b{font-size:19px;display:block}
.anel .centro small{font-size:9.5px;color:var(--ink-3)}

/* accordion "Visão por supervisão" (Resumo Gerente/ADM) */
.card-supervisor{cursor:pointer;transition:box-shadow .15s}
.card-supervisor:hover{box-shadow:var(--sombra-alta)}
.card-supervisor .cab-sup{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.avatar{
  width:40px;height:40px;min-width:40px;border-radius:12px;background:linear-gradient(135deg,var(--roxo-600),var(--roxo-400));
  color:#fff;font-weight:800;display:grid;place-items:center;font-size:13px;
}
.card-supervisor .barra-sup{flex:1;min-width:180px}
.card-supervisor .rcas-abertos{margin-top:16px;padding-top:14px;border-top:1px dashed var(--borda);display:none}
.card-supervisor .rcas-abertos.aberto{display:block}
.card-rca{display:flex;flex-direction:column;gap:9px;min-width:0}
.card-rca .cab-rca{display:flex;align-items:center;gap:10px;min-width:0}
.card-rca .cab-rca b{font-size:12.5px}
.card-rca .cab-rca small{display:block;color:var(--ink-3);font-size:10.5px}
/* a div que envolve nome+subtítulo (o item entre o avatar de largura fixa e
   o badge) precisa de min-width:0 pra poder encolher dentro do flex — sem
   isso, um subtítulo em nowrap (caso de .card-industria abaixo) empurra o
   card pra fora da tela inteira, forçando rolagem horizontal na página
   toda no celular, em vez de só truncar com "…". */
.card-rca .cab-rca .avatar + div{min-width:0;flex:1;overflow:hidden}
.mini-metrica .linha{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-3);margin-bottom:3px}
.mini-metrica .linha b{color:var(--ink-1)}
.mini-metrica .prog{margin-top:0}
.prog>i.ouro{background:linear-gradient(90deg,var(--ouro-500),var(--ouro-400))}

/* rodapé com o valor de remuneração em destaque, nos cards de RCA da tela
   Remuneração (ADM/Gerente "Detalhe por RCA" e Supervisor "Remuneração
   estimada por RCA da equipe") — antes eram tabelas, viraram grade de
   cards (.card-rca, reaproveitado do mesmo componente da tela Resumo) pra
   ficar responsivo no celular sem precisar de rolagem horizontal. */
.linha-remun{
  display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;
  padding-top:12px;border-top:1px dashed var(--borda);font-size:11.5px;color:var(--ink-3);
}
.linha-remun b{font-size:15px;font-weight:800;color:var(--ouro-600)}

/* ==================================================================
   LAYOUT MOBILE (celular)
   Baseado no mockup Figma enviado pelo usuário (Login, Menu Expandido,
   Menu Colapsado): topo vira uma barra fina com hambúrguer + "HUB" (o
   título da tela reaparece como cabeçalho dentro do conteúdo), e a
   sidebar passa a ser um MENU DE TELA CHEIA (escondido por padrão,
   cobrindo 100% da viewport quando o hambúrguer é clicado — ver
   `.menu-mobile-aberto` mais abaixo, fecha pelo X) em vez de dividir a
   tela com o conteúdo como no desktop. Esse é um mecanismo PRÓPRIO do
   celular (estado só em memória, via JS), separado do "recolher" do
   desktop (.app.mini, persistido em localStorage) — os dois foram
   misturados numa versão anterior e era a causa do menu ficar "estranho"
   em telas estreitas: a sidebar expandida ficava sempre visível e
   espremia o conteúdo numa coluna estreita, em vez de esconder por cima.
   Os elementos novos (.btn-menu-mobile, .titulo-mobile, .avatar-topo,
   .btn-fechar-menu-mobile) já nascem com
   `display:none` acima, então o desktop não muda em nada.
   ================================================================== */
@media (max-width: 768px){
  /* concha do app: sem gap/padding externo, topo ocupando a tela de ponta
     a ponta (o "flutuante com cantos" fica só pro desktop) */
  .app{padding:0;gap:0}
  .topo{border-radius:0}

  /* --------------------------------------------------------------
     Sidebar no celular: menu de TELA CHEIA (cobre 100% da viewport),
     escondido por padrão e só aparece quando o hambúrguer é clicado
     (classe `.menu-mobile-aberto` no #app, ver JS em base.html — estado só
     de memória, não usa localStorage: cada navegação de página já fecha o
     menu de novo, que é o esperado). Fecha pelo X (#btnFecharMenuMobile),
     não por clicar fora — não tem "fora" com a tela toda coberta.
     Referência: pedido do usuário comparando com um mockup de app que abre
     o menu ocupando a tela toda, com um botão X circular pra fechar; a
     logo (.marca, já sempre presente na sidebar) fica maior no topo, sem
     nome/cargo do usuário abaixo dela (testado com foto+nome antes, o
     usuário preferiu manter só a marca, maior).
     Não é mais o mesmo mecanismo de "recolher" do desktop (.app.mini, que
     só estreita a sidebar pra um trilho de ícones e EMPURRA o conteúdo do
     lado) — antes essa mistura fazia a sidebar expandida (176px) ficar
     sempre visível dividindo a tela com o conteúdo, espremendo tudo numa
     coluna estreita (o "menu estranho" reportado originalmente). */
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;width:100%;min-width:0;
    border-radius:0;z-index:60;
    transform:translateX(-100%);transition:transform .25s ease;
    display:flex;flex-direction:column;align-items:center;
    padding:48px 24px 32px;overflow-y:auto;
  }
  .app.menu-mobile-aberto .sidebar{transform:translateX(0)}

  .sidebar .marca{padding:0 0 40px;flex:0 0 auto}
  .sidebar .marca .marca-horizontal{max-width:240px}
  .sidebar .marca .marca-simbolo{display:none} /* recolher não existe no menu cheio do celular */

  .sidebar .menu{flex:0 0 auto;width:100%;max-width:280px;gap:5px}
  .sidebar .item-menu{justify-content:flex-start}

  .btn-fechar-menu-mobile{
    display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;min-width:46px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.35);color:#fff;font-size:18px;
    margin-top:30px;flex:0 0 auto;transition:background .15s;
  }
  .btn-fechar-menu-mobile:hover{background:rgba(255,255,255,.14)}

  /* Se o usuário tiver deixado a sidebar "recolhida" (.app.mini) numa
     sessão no desktop, essa preferência é só do desktop — no celular o
     menu de tela cheia sempre abre com rótulo de texto em cada item, nunca
     no modo trilho de ícones. */
  .app.mini .sidebar{width:100%;min-width:0}
  .app.mini .sidebar .marca .marca-horizontal{display:block}
  .app.mini .sidebar .marca .marca-simbolo{display:none}
  .app.mini .item-menu{justify-content:flex-start;padding:11px 12px}
  .app.mini .item-menu i{font-size:14px}
  .app.mini .item-menu span{display:inline}

  /* trava o scroll do fundo enquanto o menu está aberto (classe no
     <body>, ver JS em base.html) */
  body.menu-mobile-travado{overflow:hidden}

  .btn-colapso{display:none} /* hambúrguer no topo assume esse papel */

  .btn-menu-mobile{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;min-width:34px;border-radius:9px;font-size:17px;color:var(--roxo-600);
  }
  .btn-menu-mobile:hover{background:var(--roxo-50)}
  .titulo-desktop,.sub-competencia{display:none}
  .filtro-mes{gap:2px;font-size:11px}
  .filtro-mes i{display:none}
  .filtro-mes a{padding:4px 7px}

  .topo{padding:0 14px;gap:8px}
  .topo .direita{display:flex;align-items:center;gap:6px;min-width:0}
  /* Sem o "pill" de fundo no celular (economiza os 20px de padding pro
     nome, que já é bem apertado do lado do avatar e do botão de sair) */
  .chip-perfil{
    background:none;padding:0;max-width:96px;min-width:0;overflow:hidden;text-align:right;
  }
  .chip-perfil b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chip-perfil span{display:none} /* cargo já não cabe; nome + avatar bastam */
  .avatar-topo{
    display:grid;place-items:center;width:32px;height:32px;min-width:32px;flex-shrink:0;
    border-radius:50%;background:linear-gradient(135deg,var(--roxo-600),var(--roxo-400));
    color:#fff;font-size:11px;font-weight:800;
  }
  .btn-sair-perfil{width:30px;height:30px;min-width:30px;font-size:14px;flex-shrink:0}

  /* título da tela: reaparece como cabeçalho dentro do conteúdo */
  .titulo-mobile{display:block;font-size:17px;font-weight:800;margin:16px 16px 6px}
  .conteudo-scroll{padding:0 16px 20px}

  /* qualquer grade de cards/KPIs (Resumo, Remuneração, Campanhas, Ações,
     Relatórios) empilha em 1 coluna — o !important é necessário porque
     essas telas fixam o número de colunas via style inline */
  .grade{grid-template-columns:1fr !important}
  .form-grid{grid-template-columns:1fr !important}

  /* tabelas largas (Relatórios, drill-down, remuneração) ganham rolagem
     horizontal dentro do próprio card, em vez de estourar a tela */
  .card{overflow-x:auto}

  /* Evolução mensal (Relatórios): no celular a coluna do mês ("Mar/26") não
     precisa dos 70px do desktop — aperta um pouco pra sobrar mais espaço
     pra barra, já que a coluna do valor (136px, corrigida na regra base
     acima — o bug de quebra de linha do "R$" era geral, não só mobile) some
     espaço fixo independente da largura da tela. */
  .evolucao-linha{grid-template-columns:54px 1fr 136px;gap:8px}
}

/* ============================================================
   TELA INTERIOR — calendário de roteiros + accordion de gestão
   Portado do protótipo (painelelonorte_1.html) — os tokens de cor já são
   os mesmos deste arquivo, então não precisou adaptar nenhuma variável.
   ============================================================ */

/* --- abas de mês --- */
.abas-mes{display:flex;gap:6px;flex-wrap:wrap}
.abas-mes a{
  font-size:11.5px;font-weight:700;padding:8px 15px;border-radius:99px;
  background:#fff;border:1px solid var(--borda);color:var(--ink-2);transition:all .15s;
  text-decoration:none;display:inline-block;
}
.abas-mes a:hover{border-color:var(--roxo-300)}
.abas-mes a.ativo{background:var(--roxo-600);border-color:var(--roxo-600);color:#fff}

/* --- chips de cidade (seleção da cidade em edição) --- */
.chips-cidade{display:flex;gap:6px;flex-wrap:wrap}
.chips-cidade a{
  font-size:11.5px;font-weight:600;padding:6px 13px;border-radius:99px;
  background:var(--roxo-50);border:1px solid var(--borda);color:var(--ink-2);
  text-decoration:none;transition:all .15s;
}
.chips-cidade a:hover{border-color:var(--roxo-300)}
.chips-cidade a.ativo{background:var(--roxo-600);border-color:var(--roxo-600);color:#fff}

/* --- grade do calendário --- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .cab-sem{
  text-align:center;font-size:10px;font-weight:700;letter-spacing:1px;
  color:var(--ink-3);padding:4px 0 2px;text-transform:uppercase;
}
.cal .vazio-dia{min-height:64px}
.cal-dia{
  min-height:64px;border-radius:11px;padding:6px 7px;position:relative;
  border:1.5px solid var(--borda);background:#fff;width:100%;
  display:flex;flex-direction:column;gap:2px;transition:transform .13s,box-shadow .13s;
  font-family:inherit;text-align:left;
}
.cal-dia .num{font-size:12.5px;font-weight:700;color:var(--ink-2);line-height:1}
.cal-dia .cid{
  font-size:8.5px;font-weight:700;line-height:1.15;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.cal-dia .cont{
  position:absolute;top:5px;right:5px;min-width:19px;height:19px;padding:0 5px;
  border-radius:99px;font-size:10px;font-weight:800;display:grid;place-items:center;
  background:rgba(255,255,255,.92);
}
.cal-dia .marca-est{position:absolute;bottom:5px;right:6px;font-size:9.5px;opacity:.92}

/* estados do dia — cor + ícone (nunca só cor) */
.cal-dia.fds{background:var(--roxo-50)}
.cal-dia.verde{background:var(--ok);border-color:var(--ok);cursor:pointer}
.cal-dia.verde .num,.cal-dia.verde .cid{color:#fff}
.cal-dia.verde .cont{color:var(--ok)}
.cal-dia.verde:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(30,142,90,.42)}
.cal-dia.vermelho{background:var(--grave);border-color:var(--grave)}
.cal-dia.vermelho .num,.cal-dia.vermelho .cid{color:#fff}
.cal-dia.vermelho .cont{color:var(--grave)}
.cal-dia.futuro{background:var(--roxo-100);border:1.5px dashed var(--roxo-400)}
.cal-dia.futuro .num,.cal-dia.futuro .cid{color:var(--roxo-700)}
.cal-dia.futuro .cont{background:var(--roxo-600);color:#fff}
.cal-dia.hoje{box-shadow:0 0 0 2.5px var(--ouro-500)}
.cal.editando .cal-dia{cursor:pointer}
.cal.editando .cal-dia:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);border-color:var(--roxo-500)}
.cal-dia.marcado{background:var(--roxo-500);border-color:var(--roxo-500)}
.cal-dia.marcado .num,.cal-dia.marcado .cid{color:#fff}

/* legenda de cores */
.legenda{display:flex;gap:17px;flex-wrap:wrap;font-size:11px;color:var(--ink-2);margin-top:12px}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda .amostra{width:13px;height:13px;border-radius:4px;display:inline-block}

/* --- barra de programação do RCA --- */
.barra-prog{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* --- accordion da visão de gestão --- */
.acc{display:flex;flex-direction:column;gap:9px}
.acc-item{border:1px solid var(--borda);border-radius:var(--raio);background:#fff;overflow:hidden;box-shadow:var(--sombra)}
.acc-cab{
  width:100%;display:flex;align-items:center;gap:13px;padding:13px 16px;
  text-align:left;transition:background .15s;flex-wrap:wrap;
  text-decoration:none;color:inherit;
}
.acc-cab:hover{background:var(--roxo-50)}
.acc-item.aberto .acc-cab{background:var(--roxo-50);border-bottom:1px solid var(--borda)}
.acc-cab .quem{min-width:160px}
.acc-cab .quem b{font-size:13px;display:block;line-height:1.2}
.acc-cab .quem small{font-size:10.5px;color:var(--ink-3)}
.acc-cab .mini-kpis{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;align-items:center}
.acc-cab .mk{text-align:right}
.acc-cab .mk b{display:block;font-size:13px;font-variant-numeric:tabular-nums;line-height:1.2}
.acc-cab .mk small{font-size:9.5px;color:var(--ink-3);letter-spacing:.5px;text-transform:uppercase}
.acc-corpo{padding:14px 16px 16px;background:var(--superficie)}

/* cidades dentro do accordion */
.grade-cidades{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px}
.cidade-card{
  background:#fff;border:1px solid var(--borda);border-radius:12px;padding:12px 13px;
}
.cidade-card.clicavel{cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;text-decoration:none;display:block;color:inherit}
.cidade-card.clicavel:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);border-color:var(--roxo-300)}
.cidade-card .topo-cid{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cidade-card .topo-cid b{font-size:12.5px;flex:1;line-height:1.2}
.cidade-card .topo-cid .pin{color:var(--ouro-500);font-size:12px}
.dias-chips{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.dia-chip{
  min-width:24px;height:24px;padding:0 6px;border-radius:7px;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.dia-chip.verde{background:var(--ok-bg);color:var(--ok)}
.dia-chip.vermelho{background:var(--grave-bg);color:var(--grave)}
.dia-chip.futuro{background:var(--roxo-100);color:var(--roxo-600)}
.cidade-card .rodape-cid{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--ink-3)}

/* --- pedidos do dia --- */
.ped-item{
  display:flex;align-items:center;gap:11px;padding:11px 13px;
  border:1px solid var(--borda);border-radius:11px;margin-bottom:9px;flex-wrap:wrap;
}
.ped-item .ic-cli{
  width:33px;height:33px;min-width:33px;border-radius:9px;display:grid;place-items:center;
  background:var(--roxo-100);color:var(--roxo-600);font-size:13px;
}
.ped-item .info-cli{flex:1;min-width:150px}
.ped-item .info-cli b{font-size:12.5px;display:block;line-height:1.25}
.ped-item .info-cli small{font-size:10.5px;color:var(--ink-3)}
.ped-item .valor-ped{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.ped-item .valor-ped small{display:block;font-size:9.5px;font-weight:600;color:var(--ink-3)}

/* etiqueta de posição do pedido (F/L/M/P/B — padrão Winthor) */
.pos-tag{
  width:25px;height:25px;min-width:25px;border-radius:7px;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;
}
.pos-F{background:var(--ok-bg);color:var(--ok)}
.pos-L{background:#E3F0FB;color:#1D6FA5}
.pos-M{background:var(--roxo-100);color:var(--roxo-600)}
.pos-P{background:var(--alerta-bg);color:var(--alerta)}
.pos-B{background:var(--grave-bg);color:var(--grave)}

@media (max-width:760px){
  .cal{gap:3px}
  .cal-dia{min-height:52px;padding:4px;border-radius:8px}
  .cal-dia .cid{display:none}
  .cal-dia .cont{top:2px;right:2px;min-width:16px;height:16px;font-size:9px}
  .acc-cab .mini-kpis{margin-left:0;width:100%;justify-content:space-between;gap:8px}
}

/* Detalhado do RCA aberto pelo Resumo (Supervisor/Gerente/ADM) */
.trilha-rca{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin:0 0 12px}
.trilha-rca a{color:var(--roxo-400);font-weight:700;text-decoration:none}
.trilha-rca a:hover{text-decoration:underline}
.trilha-rca b{color:var(--ink-1,inherit)}
.card.cab-detalhe-rca{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cab-detalhe-rca .chip-visao{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--roxo-400);background:var(--roxo-50,#F4EFFB);border-radius:999px;padding:5px 11px;display:inline-flex;gap:6px;align-items:center}
a.card-rca-link{text-decoration:none;color:inherit;display:flex}
a.card-rca-link .card-rca{flex:1}
.card-rca.clicavel{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.card-rca.clicavel:hover{box-shadow:var(--sombra-alta);border-color:var(--roxo-300)}
.card-rca .ver-detalhe{font-size:10px;font-weight:700;color:var(--roxo-400);display:flex;align-items:center;gap:5px;margin-top:auto}
tr.linha-clicavel{cursor:pointer}
tr.linha-clicavel:hover td{background:var(--roxo-50,#F4EFFB)}
tr.linha-clicavel a{color:inherit;text-decoration:none}
@media (max-width:768px){.cab-detalhe-rca .chip-visao{margin-left:0}}
.card.cab-detalhe-rca{margin-bottom:14px}

/* Lista compacta de RCAs (Resumo Supervisor) — só no celular */
.lista-rca-compacta{display:none}
@media (max-width:768px){
  .grade-rca-cards{display:none !important}
  .lista-rca-compacta{display:block;padding:4px 12px}
  .lista-rca-compacta .item-rca{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--linha,#EEE9F5);text-decoration:none;color:inherit}
  .lista-rca-compacta .item-rca:last-child{border-bottom:0}
  .lista-rca-compacta .item-rca:active{background:var(--roxo-50,#F4EFFB)}
  .lista-rca-compacta .corpo{flex:1;min-width:0}
  .lista-rca-compacta .l1{display:flex;align-items:center;gap:8px;min-width:0}
  .lista-rca-compacta .l1 b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
  .lista-rca-compacta .l2{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--ink-3);margin:3px 0 5px}
  .lista-rca-compacta .l2 span:first-child{color:var(--ink-1,#1d1530);font-weight:700}
  .lista-rca-compacta .l2 small{color:var(--ink-3);font-weight:400}
  .lista-rca-compacta .prog{margin:0;height:5px}
  .lista-rca-compacta .seta{color:var(--roxo-400);font-size:12px;font-style:normal}
  .lista-rca-compacta .medalha{min-width:24px}
}

/* Busca + filtro de meta dos RCAs (Resumo Supervisor/Gerente/ADM) */
.filtro-rcas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.busca-rca{flex:1;min-width:240px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--borda);border-radius:12px;padding:0 12px;height:40px;box-shadow:var(--sombra,none)}
.busca-rca:focus-within{border-color:var(--roxo-400);box-shadow:0 0 0 3px rgba(107,63,160,.12)}
.busca-rca i{color:var(--ink-3);font-size:13px}
.busca-rca input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:inherit}
.chips-meta{display:flex;gap:6px;flex-wrap:wrap}
.chip-meta{border:1px solid var(--borda);background:#fff;border-radius:999px;padding:7px 12px;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink-2,#4a4060);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip-meta b{background:var(--roxo-100);color:var(--roxo-600);border-radius:999px;padding:1px 7px;font-size:10.5px}
.chip-meta:hover{border-color:var(--roxo-300)}
.chip-meta.ativo{background:var(--roxo-600);border-color:var(--roxo-600);color:#fff}
.chip-meta.ativo b{background:rgba(255,255,255,.22);color:#fff}
.chip-meta[data-meta="batida"] i{color:#1e8a55}
.chip-meta[data-meta="abaixo"] i{color:#c0392b}
.chip-meta.ativo i{color:#fff}
@media (max-width:768px){
  .filtro-rcas{gap:8px}
  .busca-rca{min-width:0;width:100%;flex-basis:100%}
  .chips-meta{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .chip-meta{white-space:nowrap;justify-content:center;padding:7px 6px;text-transform:capitalize}
  .chip-meta .so-desktop{display:none}
}
@media (max-width:768px){
  .trilha-rca .so-desktop{display:none}
  .card.cab-detalhe-rca{flex-wrap:nowrap;gap:12px}
  .cab-detalhe-rca > div:nth-child(2){min-width:0}
  .cab-detalhe-rca .chip-visao{display:none}
  .grade.kpis-rca{grid-template-columns:1fr 1fr !important;gap:10px}
  .grade.kpis-rca > .card:first-child:nth-last-child(3){grid-column:1 / -1}
  .grade.kpis-rca .card{padding:14px}
  .grade.kpis-rca .kpi-valor{font-size:17px;white-space:nowrap}
  .grade.kpis-rca .prog-rotulo span:first-child{display:none}
  .grade.kpis-rca h3{font-size:11px}
}

/* Faixas de % da meta (filtro faixa_meta): ≥90 verde · 80–89,9 amarelo · <80 vermelho */
.txt-ok{color:var(--ok) !important} .txt-alerta{color:var(--alerta) !important} .txt-grave{color:var(--grave) !important}

/* Duas grades seguidas (ex.: KPIs em 2 linhas no Resumo/detalhado do RCA)
   ficavam coladas — o `gap` só separa os cards DENTRO de cada grade. Mesmo
   espaçamento entre as linhas que entre os cards (23/09/2026). */
.grade + .grade{margin-top:16px}
@media (max-width:768px){.grade.kpis-rca + .grade.kpis-rca{margin-top:10px}}