/* ============================================================
   KR Hub — design system
   Paleta sofisticada (slate + índigo), tipografia Inter, componentes
   modernos. Tudo em tokens: trocar o "clima" é trocar as variáveis.
   Tema por data-theme (dark padrão) + preferência do sistema.
   ============================================================ */

/* Fonte self-hostada (CSP estrita: default-src 'self') — Geist + Geist Mono. */
@import url('/assets/fonts/geist.css');

:root{
  /* superfícies */
  --bg:#0a0e16; --painel:#121826; --painel-2:#0f1522; --lateral:#0c111c;
  --linha:#1e2634; --linha-2:#2b3647;
  /* texto */
  --txt:#e8ebf2; --sub:#97a2b6; --fraco:#67718696;
  /* marca + semântico */
  --azul:#6b70bb; --azul-2:#a9ade0;
  --verde:#10b981; --laranja:#f59e0b; --vermelho:#f43f5e; --cinza:#6b7688;
  --primaria:var(--azul);
  /* forma + profundidade */
  --raio:12px; --raio-sm:9px; --raio-lg:16px; --raio-full:999px;
  --sombra-sm:0 1px 2px rgba(0,0,0,.35);
  --sombra:0 1px 2px rgba(0,0,0,.25), 0 14px 32px -18px rgba(0,0,0,.7);
  --anel:color-mix(in srgb, var(--azul) 45%, transparent);
  color-scheme:dark;
}
:root[data-theme="dark"]{
  --bg:#0a0e16; --painel:#121826; --painel-2:#0f1522; --lateral:#0c111c;
  --linha:#1e2634; --linha-2:#2b3647; --txt:#e8ebf2; --sub:#97a2b6; --fraco:#6771869c;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f4f6fb; --painel:#ffffff; --painel-2:#f5f6fa; --lateral:#ffffff;
    --linha:#e8eaf1; --linha-2:#d7dbe7; --txt:#0f1729; --sub:#5b6677; --fraco:#8b94a6;
    --azul:#5c58b4; --azul-2:#4744a0; --verde:#059669; --laranja:#d97706; --vermelho:#e11d48; --cinza:#64748b;
    --sombra-sm:0 1px 2px rgba(16,24,40,.05);
    --sombra:0 1px 3px rgba(16,24,40,.07), 0 16px 36px -20px rgba(16,24,40,.22);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f4f6fb; --painel:#ffffff; --painel-2:#f5f6fa; --lateral:#ffffff;
  --linha:#e8eaf1; --linha-2:#d7dbe7; --txt:#0f1729; --sub:#5b6677; --fraco:#8b94a6;
  --azul:#5c58b4; --azul-2:#4744a0; --verde:#059669; --laranja:#d97706; --vermelho:#e11d48; --cinza:#64748b;
  --sombra-sm:0 1px 2px rgba(16,24,40,.05);
  --sombra:0 1px 3px rgba(16,24,40,.07), 0 16px 36px -20px rgba(16,24,40,.22);
  color-scheme:light;
}

*{box-sizing:border-box}
::selection{background:color-mix(in srgb, var(--azul) 30%, transparent)}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);min-height:100vh;display:flex;
  font:14px/1.55 'Geist','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--azul)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--linha-2);border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--cinza)}

/* ---------- lateral (navegação de módulos) ---------- */
.lateral{width:232px;flex-shrink:0;background:var(--lateral);border-right:1px solid var(--linha);
  display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh}
.marca{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;font-size:16px;font-weight:650;letter-spacing:-.2px}
/* logo oficial KR (branca sobre transparente): branca no dark, escurecida no light */
.marca-logo{height:22px;width:auto;flex-shrink:0;display:block;object-fit:contain}
@media (prefers-color-scheme: light){ :root:not([data-theme]) .marca-logo{filter:brightness(0) opacity(.82)} }
:root[data-theme="light"] .marca-logo{filter:brightness(0) opacity(.82)}
.marca strong{color:var(--azul);font-weight:750}
.marca .sub-marca{display:block;font-size:10px;font-weight:500;color:var(--sub);letter-spacing:.3px;margin-top:1px}
.lateral nav{display:flex;flex-direction:column;gap:3px;padding:6px 0;overflow-y:auto}
.lateral .grupo-rot{font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
  color:var(--fraco);padding:12px 10px 5px}
.lateral a,.lateral .inativo{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--raio-sm);
  text-decoration:none;color:var(--sub);font-size:13.5px;font-weight:500;transition:background .12s,color .12s}
.lateral a:hover{background:color-mix(in srgb, var(--cinza) 12%, transparent);color:var(--txt)}
.lateral a.sel{background:color-mix(in srgb, var(--azul) 15%, transparent);color:var(--azul-2);font-weight:600}
.lateral a.sel .ic{color:var(--azul-2)}
.lateral .inativo{opacity:.5;cursor:default}
.lateral .inativo em{margin-left:auto;font-size:9.5px;font-style:normal;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;color:var(--fraco);background:color-mix(in srgb,var(--cinza) 14%,transparent);
  padding:2px 7px;border-radius:var(--raio-full)}
.ic{width:20px;height:20px;display:grid;place-items:center;flex-shrink:0;color:var(--sub)}
.ic svg{width:18px;height:18px;stroke-width:1.9}
.rodape-lateral{margin-top:auto;padding:12px 10px 2px;border-top:1px solid var(--linha);
  font-size:11px;color:var(--sub);display:flex;flex-direction:column;gap:7px}
.usuario-atual{display:flex;align-items:center;gap:8px}
.usuario-atual .quem{font-weight:600;color:var(--txt);font-size:12.5px}
.tag-somente-leitura{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;
  color:var(--laranja);background:color-mix(in srgb,var(--laranja) 15%,transparent);padding:2px 7px;border-radius:var(--raio-full)}
.links-conta{display:flex;align-items:center;gap:10px}
.links-conta a{color:var(--sub);text-decoration:none}
.links-conta a:hover{color:var(--azul)}
.form-sair{display:inline;margin:0}
.link-sair{background:none;border:0;padding:0;font:inherit;color:var(--sub);cursor:pointer}
.link-sair:hover{color:var(--azul)}
.rodape-lateral .meta{display:flex;gap:6px;flex-wrap:wrap}
.rodape-lateral .meta b{color:var(--sub);font-weight:600}
.rodape-lateral .pastilha{font-size:10px;color:var(--sub);background:color-mix(in srgb,var(--cinza) 12%,transparent);
  padding:3px 8px;border-radius:var(--raio-full)}

/* ---------- conteúdo ---------- */
.conteudo{flex:1;min-width:0;padding:26px 30px;max-width:1560px;width:100%}
.topo{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.topo h1,h1{font-size:21px;margin:0;font-weight:680;letter-spacing:-.4px}
h2{letter-spacing:-.2px}
.tag{font-size:11px;font-weight:500;padding:4px 10px;border-radius:var(--raio-full);
  background:color-mix(in srgb,var(--cinza) 12%,transparent);color:var(--sub);border:1px solid var(--linha)}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:11px;margin-bottom:20px}
.kpi{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;
  text-decoration:none;color:inherit;display:block;transition:border-color .12s,transform .12s,box-shadow .12s}
.kpi:hover{border-color:color-mix(in srgb,var(--azul) 45%,var(--linha));transform:translateY(-1px);box-shadow:var(--sombra)}
.kpi.sel{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul) inset, var(--sombra)}
.kpi .n{font-size:23px;font-weight:700;letter-spacing:-.6px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .l{font-size:10.5px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;font-weight:600}

.controles{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
select,input[type=search],input[type=number],input[type=text],input[type=email],input[type=password],input[type=date]{
  background:var(--painel);border:1px solid var(--linha);color:var(--txt);padding:8px 11px;
  border-radius:var(--raio-sm);font-size:13px;font-family:inherit;transition:border-color .12s,box-shadow .12s}
select:focus,input:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px var(--anel)}
input[type=search]{min-width:250px}
label{color:var(--sub)}

/* ---------- família (acordeão) ---------- */
.fam{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);margin-bottom:11px;overflow:hidden;
  box-shadow:var(--sombra-sm)}
.fam>summary{padding:13px 16px;cursor:pointer;display:flex;gap:8px 10px;align-items:center;list-style:none;flex-wrap:wrap}
.fam>summary::-webkit-details-marker{display:none}
.fam>summary:hover{background:color-mix(in srgb,var(--cinza) 7%,transparent)}
.fam[open]>summary{border-bottom:1px solid var(--linha)}
.seta{color:var(--sub);transition:transform .15s;font-size:10px}
details[open] .seta{transform:rotate(90deg)}
.fnome{font-weight:600;flex:1;min-width:170px}

/* ---------- badges ---------- */
.badge{font-size:10.5px;padding:3px 10px;border-radius:var(--raio-full);font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;line-height:1.5}
.badge.vermelho{background:color-mix(in srgb,var(--vermelho) 15%,transparent);color:var(--vermelho)}
.badge.laranja{background:color-mix(in srgb,var(--laranja) 16%,transparent);color:var(--laranja)}
.badge.azul{background:color-mix(in srgb,var(--azul) 15%,transparent);color:var(--azul-2)}
.badge.verde{background:color-mix(in srgb,var(--verde) 15%,transparent);color:var(--verde)}
.badge.cinza{background:color-mix(in srgb,var(--cinza) 15%,transparent);color:var(--sub)}

/* ---------- tabelas ---------- */
.tabela-wrap{overflow-x:auto;border-radius:var(--raio-sm)}
table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:900px;font-variant-numeric:tabular-nums}
thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--sub);
  padding:10px 16px;border-bottom:1px solid var(--linha);font-weight:600;background:var(--painel-2)}
td{padding:11px 16px;border-top:1px solid var(--linha);vertical-align:middle}
tbody tr{transition:background .1s}
tbody tr:hover{background:color-mix(in srgb,var(--cinza) 5%,transparent)}
tr.semp{background:color-mix(in srgb,var(--vermelho) 6%,transparent)}
.mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--sub);text-decoration:none}
.mono:hover{color:var(--azul)}
.nota{font-size:11px;color:var(--sub);margin-top:2px}

/* ---------- ações / botões ---------- */
.acao{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
button,.btn{background:var(--azul);color:#fff;border:0;padding:8px 14px;border-radius:var(--raio-sm);font-size:12.5px;
  cursor:pointer;font-weight:600;font-family:inherit;line-height:1.3;transition:filter .12s,box-shadow .12s,transform .05s;
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
button:hover,.btn:hover{filter:brightness(1.08);box-shadow:0 4px 14px -6px color-mix(in srgb,var(--azul) 80%,transparent)}
button:active{transform:translateY(1px)}
button.sec{background:transparent;border:1px solid var(--linha-2);color:var(--sub);box-shadow:none}
button.sec:hover{background:color-mix(in srgb,var(--cinza) 10%,transparent);color:var(--txt);border-color:var(--cinza);filter:none}
button.mini,.mini{padding:5px 11px;font-size:11.5px}

/* ---------- avisos ---------- */
.aviso{padding:12px 16px;border-radius:var(--raio-sm);margin-bottom:18px;font-size:13px;border:1px solid transparent}
.aviso.ok{background:color-mix(in srgb,var(--verde) 12%,transparent);color:var(--verde);border-color:color-mix(in srgb,var(--verde) 30%,transparent)}
.aviso.erro{background:color-mix(in srgb,var(--vermelho) 12%,transparent);color:var(--vermelho);border-color:color-mix(in srgb,var(--vermelho) 30%,transparent)}
.vazio{text-align:center;padding:56px 24px;color:var(--sub);background:var(--painel);border:1px dashed var(--linha-2);border-radius:var(--raio)}
.vazio h2{margin:0 0 6px}
.rodape{margin-top:28px;padding-top:16px;border-top:1px solid var(--linha);color:var(--sub);font-size:11px}

/* ---------- sub-navegação do módulo (abas) ---------- */
.subnav{display:flex;gap:3px;margin-bottom:22px;background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--raio);padding:5px;flex-wrap:wrap;box-shadow:var(--sombra-sm)}
.subnav a{padding:8px 14px;text-decoration:none;color:var(--sub);font-size:13px;font-weight:550;
  border-radius:var(--raio-sm);display:inline-flex;align-items:center;gap:7px;transition:background .12s,color .12s}
.subnav a:hover{color:var(--txt);background:color-mix(in srgb,var(--cinza) 10%,transparent)}
.subnav a.sel{color:#fff;background:var(--azul);box-shadow:0 2px 10px -4px color-mix(in srgb,var(--azul) 80%,transparent)}
.subnav a.sel .pill{background:rgba(255,255,255,.25);color:#fff}
.voltar{color:var(--sub);text-decoration:none;font-size:12.5px;font-weight:500}
.voltar:hover{color:var(--azul)}

/* ---------- layout de duas colunas ---------- */
.grade{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
@media (max-width:1080px){.grade{grid-template-columns:1fr}}
.painel{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra-sm)}
.painel h2{font-size:13px;margin:0 0 14px;text-transform:uppercase;letter-spacing:.5px;color:var(--sub);font-weight:600}
.lado{display:flex;flex-direction:column;gap:16px}

/* ---------- cartão de oferta ---------- */
.oferta{border:1px solid var(--linha);border-radius:var(--raio-sm);padding:12px 14px;margin-bottom:10px}
.oferta.ativa{border-color:color-mix(in srgb,var(--verde) 40%,transparent);background:color-mix(in srgb,var(--verde) 6%,transparent)}
.oferta.nova{border-style:dashed}
.oferta-topo{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.oferta-dados{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--sub);margin-bottom:9px}
.oferta-dados strong{color:var(--txt)}
.oferta-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.urgente{color:var(--vermelho);font-weight:600}
.linha{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
label.mini{display:flex;flex-direction:column;gap:2px;font-size:10.5px;color:var(--sub);text-transform:uppercase;letter-spacing:.3px}
button.mini{padding:5px 11px;font-size:11px}
.lote{margin-left:auto}
.lote form{display:inline}

/* ---------- tabela miúda (margem) ---------- */
table.miudo{width:100%;font-size:12.5px;border-collapse:collapse;min-width:0}
table.miudo td{padding:6px 0;border:0;border-bottom:1px solid var(--linha)}
table.miudo td.r{text-align:right;font-variant-numeric:tabular-nums}
table.miudo tr:hover{background:transparent}
table.miudo tr.destaque td{font-weight:600;border-bottom-width:2px}
table.miudo tr.total td{font-weight:700;font-size:14px;padding-top:10px;border-bottom:0}
table.miudo tr.total.bom td{color:var(--verde)}
table.miudo tr.total.ruim td{color:var(--vermelho)}
.neg{color:var(--sub)}

/* ---------- medidor de experiência ---------- */
.medidor{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.barra{flex:1;height:8px;background:var(--linha);border-radius:99px;overflow:hidden}
.preenche{height:100%;border-radius:99px}
.preenche.c-green{background:var(--verde)}
.preenche.c-yellow{background:var(--laranja)}
.preenche.c-orange{background:var(--laranja)}
.preenche.c-red{background:var(--vermelho)}

/* ---------- formulários ---------- */
.form-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}
.form-grade label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--sub);font-weight:500}
.form-grade input,.form-grade select{background:var(--painel-2);border:1px solid var(--linha);color:var(--txt);
  padding:9px 11px;border-radius:var(--raio-sm);font-size:13px}
.form-grade fieldset{grid-column:1/-1;border:1px solid var(--linha);border-radius:var(--raio-sm);padding:14px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px}
.form-grade legend{font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.4px;padding:0 6px;font-weight:600}
.form-grade label.check{flex-direction:row;align-items:center;gap:7px}
.acoes-form{grid-column:1/-1;display:flex;gap:8px}

/* ---------- cartões de conta (dashboard) ---------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.conta-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.conta-numeros{display:flex;gap:20px;padding-bottom:12px;border-bottom:1px solid var(--linha)}
.conta-numeros div{display:flex;flex-direction:column}
.conta-numeros .v{font-size:21px;font-weight:700;letter-spacing:-.5px}
.conta-numeros .r{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-top:2px}
.cobertura{display:flex;align-items:center;gap:8px;margin:12px 0 14px}
.cobertura .barra{flex:1}
.conta-acoes{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.conta-acoes a{text-decoration:none}
td.alerta{color:var(--vermelho);font-weight:600}
.sub-kpi{font-size:9.5px;color:var(--sub);margin-top:3px;line-height:1.3}
.controles a{text-decoration:none}

/* ---------- indicador de experiência na lista ---------- */
.exp{display:inline-grid;place-items:center;min-width:28px;height:23px;padding:0 6px;border-radius:7px;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.exp.verde{background:color-mix(in srgb,var(--verde) 16%,transparent);color:var(--verde)}
.exp.laranja{background:color-mix(in srgb,var(--laranja) 16%,transparent);color:var(--laranja)}
.exp.vermelho{background:color-mix(in srgb,var(--vermelho) 16%,transparent);color:var(--vermelho)}

/* ---------- cartão de campanha dentro da linha ---------- */
.campanha{margin-bottom:8px;padding-bottom:7px;border-bottom:1px dashed var(--linha)}
.campanha:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.campanha.melhor{border:1px solid color-mix(in srgb,var(--azul) 38%,transparent);border-radius:var(--raio-sm);
  padding:7px 9px;background:color-mix(in srgb,var(--azul) 7%,transparent)}
.c-nome{font-size:12px;font-weight:600;margin-bottom:3px}
.c-linha{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:2px}
.chip{font-size:10px;padding:3px 8px;border-radius:var(--raio-full);background:color-mix(in srgb,var(--cinza) 14%,transparent);
  color:var(--sub);white-space:nowrap;font-weight:500}
.chip.verde{background:color-mix(in srgb,var(--verde) 15%,transparent);color:var(--verde);font-weight:600}
.chip.cinza{background:color-mix(in srgb,var(--cinza) 16%,transparent);color:var(--sub)}
.ganho{font-size:11px;font-weight:700;color:var(--verde);margin-top:3px}
.alerta-estoque{color:var(--vermelho)}

/* ---------- faixa demo/mock ---------- */
.faixa-mock{background:color-mix(in srgb,var(--laranja) 12%,transparent);border:1px solid color-mix(in srgb,var(--laranja) 35%,transparent);
  color:var(--laranja);padding:11px 15px;border-radius:var(--raio-sm);font-size:12px;margin-bottom:18px;line-height:1.5}
.faixa-mock code{background:color-mix(in srgb,var(--cinza) 16%,transparent);padding:1px 6px;border-radius:5px;font-size:11px}

/* ---------- filtros (barra) ---------- */
.filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;
  background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;box-shadow:var(--sombra-sm)}
.filtros .campo{display:flex;flex-direction:column;gap:6px}
.filtros .campo>span{font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.filtros select,.filtros input[type=search]{background:var(--painel-2);border:1px solid var(--linha);
  color:var(--txt);border-radius:var(--raio-sm);padding:9px 11px;font-size:13px;min-width:160px}
.filtros .campo-busca{flex:1;min-width:240px}
.filtros .busca-linha{display:flex;gap:6px}
.filtros .busca-linha input{flex:1;min-width:0}
.filtros-ativos{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
  font-size:12.5px;color:var(--sub)}
.chip-filtro{display:inline-flex;align-items:center;gap:2px;background:color-mix(in srgb,var(--azul) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--azul) 25%,transparent);border-radius:var(--raio-full);
  padding:4px 5px 4px 12px;color:var(--txt);font-size:12px;font-weight:500}
.chip-filtro a{color:var(--sub);text-decoration:none;font-weight:700;padding:0 6px;line-height:1}
.chip-filtro a:hover{color:var(--vermelho)}
.filtros-ativos .limpar{color:var(--azul);text-decoration:none;font-weight:600}
.filtros-ativos .limpar:hover{text-decoration:underline}
.filtros-ativos .sep{flex:1}
.filtros-ativos .link-acao{color:var(--sub);cursor:pointer;text-decoration:none}
.filtros-ativos .link-acao:hover{color:var(--txt)}

/* ---------- botão de tema ---------- */
.btn-tema{background:transparent;border:1px solid var(--linha-2);color:var(--sub);border-radius:var(--raio-sm);
  padding:7px 10px;cursor:pointer;font-size:14px;line-height:1;box-shadow:none}
.btn-tema:hover{color:var(--txt);border-color:var(--azul);background:transparent;filter:none}

/* ---------- leitura da tabela de anúncios ---------- */
.fam td{vertical-align:top}
.fam .acao{align-items:flex-start}
.fam td:first-child{min-width:150px}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .conteudo{padding:18px 16px}
  .lateral{width:200px}
}
@media (max-width:720px){
  body{flex-direction:column}
  .lateral{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;
    padding:10px 14px;border-right:0;border-bottom:1px solid var(--linha)}
  .lateral nav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;padding:0;gap:4px}
  .lateral .grupo-rot{display:none}
  .lateral .marca{padding:0;margin-right:auto}
  .lateral .inativo{display:none}
  .rodape-lateral{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;border-top:0;margin:0;padding:0}
  .subnav{overflow-x:auto;flex-wrap:nowrap}
}

/* ---------- cortina lateral (drawer) + pill ---------- */
.cortina-fundo{position:fixed;inset:0;background:rgba(3,6,12,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;
  transition:opacity .2s;z-index:60}
.cortina-fundo.aberta{opacity:1;visibility:visible}
.cortina{position:fixed;top:0;right:0;height:100dvh;width:min(480px,94vw);z-index:61;
  background:var(--painel);border-left:1px solid var(--linha);box-shadow:-16px 0 48px rgba(0,0,0,.4);
  transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column}
.cortina.aberta{transform:translateX(0)}
.cortina-topo{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--linha)}
.cortina-titulo{font-weight:650;font-size:15px;flex:1;min-width:0}
.cortina-corpo{padding:18px;overflow-y:auto;flex:1}
.cortina-sec{margin-bottom:18px}
.cortina-sec h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--sub)}
.c-sub{font-size:12px;color:var(--sub);margin-bottom:14px}
.col-acao{text-align:right;white-space:nowrap}
.pill{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;border-radius:var(--raio-full);
  background:var(--azul);color:#fff;font-size:10px;font-weight:700;line-height:1}
.entrar-form{padding:10px 0;border-bottom:1px solid var(--linha)}
.entrar-form:last-child{border-bottom:0}
.t-anuncios{min-width:1000px}
.col-camp,.col-melhor{max-width:230px}
.mini-camp{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:11.5px;margin-bottom:5px;line-height:1.4}
.mini-camp:last-child{margin-bottom:0}
.mini-camp .c-nome{font-weight:600;margin:0;font-size:11.5px}
.ganho{color:var(--verde);font-weight:700;font-size:11px}

/* ---- seletor de período (todas as telas: views/_periodo.php) ---- */
.periodo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v-periodo{display:flex;gap:4px;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:4px;flex-wrap:wrap}
.v-periodo a{padding:6px 12px;border-radius:var(--raio-sm);text-decoration:none;color:var(--sub);font-size:12.5px;font-weight:550;white-space:nowrap}
.v-periodo a:hover{color:var(--txt);background:color-mix(in srgb,var(--cinza) 10%,transparent)}
.v-periodo a.sel{background:var(--azul);color:#fff}
.periodo-livre{display:flex;align-items:center;gap:6px;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:4px 6px 4px 10px;margin:0}
.periodo-livre.sel{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.periodo-livre label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sub);margin:0}
.periodo-livre input[type=date]{padding:4px 6px;font-size:12.5px;width:auto;min-width:0;background:transparent;color:var(--txt);border:1px solid var(--linha);border-radius:var(--raio-sm);color-scheme:light dark}
@media (max-width:720px){.periodo,.periodo-livre{width:100%}.periodo-livre label{flex:1}.periodo-livre input[type=date]{flex:1}}