/* PAINEL COMERCIAL INOV9 — tema escuro único. Paleta de séries validada (dataviz validate_palette, modo escuro,
   superfície #141821): todas as checagens passam; separação CVD na faixa 6–8 → legenda + rótulo direto obrigatórios. */
:root {
  color-scheme: only dark;
  --bg-0: #07080b;
  --bg-1: #0d1016;
  --surface-1: #141821;
  --surface-2: #1b202b;
  --surface-3: #252b38;
  --line: #262c39;
  --line-strong: #353d4e;
  --text-primary: #f3f1ec;
  --text-secondary: #b9bcc6;
  --text-muted: #7c8293;
  --accent: #ff5e1a;
  --accent-soft: rgba(255, 94, 26, .14);
  --accent-glow: rgba(255, 94, 26, .35);
  --series-1: #e8571f;
  --series-2: #3987e5;
  --series-3: #129c6c;
  --series-4: #bf8900;
  --series-5: #9466e0;
  --series-6: #d24d7b;
  --up: #2fe39a;
  --down: #ff4d6a;
  --warn: #ffb020;
  --radius: 16px;
  --f-display: 'Unbounded', 'Schibsted Grotesk', system-ui, sans-serif;
  --f-body: 'Schibsted Grotesk', system-ui, sans-serif;
  --f-num: 'JetBrains Mono', ui-monospace, monospace;
}
:root:not([data-theme="light"]), :root[data-theme="dark"] { color-scheme: dark; }
/* FUNDO TRAVADO (23/10): o painel é igual para todo mundo, qualquer que seja o tema do Bitrix, o modo claro/escuro do
   navegador ou do Windows. Medido: no Windows com TEMA DE CONTRASTE ligado o navegador troca as cores da página
   (forced-colors) — o body ia de #07080b para a cor do tema (azul/branco/preto). forced-color-adjust: none mantém as
   nossas. html e body sólidos e containers opacos: nada do iframe do Bitrix aparece por trás. Não há tema claro. */
html { background: #07080b; color-scheme: only dark; forced-color-adjust: none; }
/* ícone do calendário desenhado aqui: o nativo vira um quadrado branco no tema de contraste do Windows */
::-webkit-calendar-picker-indicator { forced-color-adjust: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23b9bcc6' stroke-width='1.6'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 7h12M5 1.5v3M11 1.5v3'/%3E%3C/svg%3E") center / 16px no-repeat; color: transparent; opacity: .85; cursor: pointer; }

* { box-sizing: border-box; }
html, body { margin: 0; }
/* o body empilha as próprias camadas: sem isto, com fundo no html, o fundo do body cobriria os brilhos (::before/::after) */
body {
  position: relative; z-index: 0;
  background: #07080b;
  color: var(--text-primary);
  font: 15px/1.45 var(--f-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* profundidade: brilhos + grade + grão */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(255, 94, 26, .22), transparent 60%),
    radial-gradient(800px 600px at 105% 10%, rgba(57, 135, 229, .16), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(18, 156, 108, .10), transparent 60%),
    linear-gradient(180deg, #0a0c11, var(--bg-0) 40%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 48px 48px, 48px 48px, 160px 160px;
  mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.4) 60%, transparent);
}

.wrap { max-width: 1480px; margin: 0 auto; padding: 0 28px 64px; }

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; gap: 18px; padding: 22px 0 14px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.marca .selo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent), #c2350a); box-shadow: 0 10px 30px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); font: 800 15px/1 var(--f-display); letter-spacing: -.5px; }
.marca h1 { margin: 0; font: 800 22px/1 var(--f-display); letter-spacing: -.6px; text-transform: uppercase; }
.marca h1 span { color: var(--accent); }
.marca small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 5px; letter-spacing: .4px; }
.status { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-secondary); background: var(--surface-1); border: 1px solid var(--line); padding: 7px 8px 7px 14px; border-radius: 999px; }
.status .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px rgba(47,227,154,.15); }
.status.erro .ponto { background: var(--down); box-shadow: 0 0 0 4px rgba(255,77,106,.18); }
.status.rodando .ponto { background: var(--warn); animation: pulsa 1s infinite; }
@keyframes pulsa { 50% { opacity: .3; } }
.btn { font: 700 12.5px/1 var(--f-body); color: var(--text-primary); background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 14px; cursor: pointer; letter-spacing: .3px; transition: .2s; }
.btn:hover { border-color: var(--accent); }
.btn.primario { background: var(--accent); border-color: var(--accent); color: #140700; box-shadow: 0 8px 22px -10px var(--accent-glow); }
.btn.primario:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: progress; }

/* ---------- abas ---------- */
/* barra de abas: no computador quebra em linhas (nenhuma aba some); no celular rola na horizontal com setas */
.abas-caixa { position: sticky; top: 8px; z-index: 20; margin: 6px 0 14px; }
.abas { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; scrollbar-width: none; }
.abas-seta { position: absolute; top: 1px; bottom: 1px; width: 44px; z-index: 2; border: 0; color: var(--text-primary); font: 700 22px/1 var(--f-body); cursor: pointer; }
.abas-seta.esq { left: 1px; border-radius: 13px 0 0 13px; background: linear-gradient(90deg, var(--bg-1) 55%, rgba(13,16,22,0)); text-align: left; padding-left: 10px; }
.abas-seta.dir { right: 1px; border-radius: 0 13px 13px 0; background: linear-gradient(270deg, var(--bg-1) 55%, rgba(13,16,22,0)); text-align: right; padding-right: 10px; }
.abas-seta:hover, .abas-seta:focus-visible { color: var(--accent); }
@media (max-width: 720px) { .abas { flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; } }
.abas::-webkit-scrollbar { display: none; }
.abas button { flex: 0 0 auto; font: 700 13px/1 var(--f-body); color: var(--text-secondary); background: transparent; border: 0; padding: 11px 16px; border-radius: 10px; cursor: pointer; letter-spacing: .2px; white-space: nowrap; transition: .2s; }
.abas button:hover { color: var(--text-primary); background: var(--surface-2); }
.abas button.ativa { color: #140700; background: var(--accent); box-shadow: 0 8px 20px -10px var(--accent-glow); }
.abas button .n { font: 600 10px/1 var(--f-num); opacity: .6; margin-right: 6px; }

/* ---------- filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 14px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 22px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 140px; }
.filtros .campo:has(.segmento), .filtros .campo.datas-campo { flex: 0 0 auto; }
.filtros .campo.parado { flex: 0 0 90px; }
.campo > span { font: 700 10.5px/1 var(--f-body); color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.segmento { display: inline-flex; background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.segmento button { font: 700 12px/1 var(--f-body); color: var(--text-secondary); background: none; border: 0; padding: 8px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.segmento button.ativo { background: var(--surface-3); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--line-strong); }
select, input[type=date], input[type=number] {
  width: 100%; font: 500 13px/1 var(--f-body); color: var(--text-primary); background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; min-height: 36px; outline: none;
}
select:focus, input:focus { border-color: var(--accent); }
.datas { display: flex; gap: 6px; align-items: center; }
.datas input { width: 138px; }
.datas i { color: var(--text-muted); font-style: normal; }
.parado input { width: 70px; }

/* ---------- blocos ---------- */
.secao { margin: 28px 0 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.secao h2 { margin: 0; font: 800 18px/1.1 var(--f-display); letter-spacing: -.4px; text-transform: uppercase; }
.secao h2::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--accent); margin-right: 10px; transform: skewX(-12deg); }
.secao p { margin: 0; color: var(--text-muted); font-size: 12.5px; }

.grade { 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); }
.g5 { grid-template-columns: repeat(5, 1fr); }
.span2 { grid-column: span 2; }

.card { position: relative; background: linear-gradient(180deg, #1b202b, #141821); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; overflow: hidden; min-width: 0; }
.card::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
.card h3 { margin: 0 0 12px; font: 700 12px/1.2 var(--f-body); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.1px; display: flex; justify-content: space-between; gap: 8px; }
.card h3 small { color: var(--text-muted); font-weight: 600; letter-spacing: .3px; text-transform: none; }

/* KPI */
.kpi { padding: 18px 18px 16px; }
.kpi .rot { font: 700 11.5px/1.2 var(--f-body); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.1px; }
.kpi .valor { font: 800 clamp(30px, 3.4vw, 46px)/1 var(--f-display); letter-spacing: -1.5px; margin: 12px 0 12px; font-variant-numeric: tabular-nums; }
.kpi .valor.dinheiro { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -1px; }
.kpi.destaque { border-color: rgba(255,94,26,.45); background: radial-gradient(400px 160px at 0 0, rgba(255,94,26,.18), transparent 70%), linear-gradient(180deg, #1b202b, #141821.95)); }
.kpi.destaque .valor { color: var(--text-primary); text-shadow: 0 0 30px rgba(255,94,26,.35); }
.comp { display: flex; flex-wrap: wrap; gap: 6px 12px; font: 600 12px/1.2 var(--f-body); color: var(--text-muted); }
.delta { display: inline-flex; align-items: center; gap: 4px; font: 700 12px/1 var(--f-num); padding: 4px 7px; border-radius: 6px; }
.delta.alta { color: var(--up); background: rgba(47,227,154,.1); }
.delta.queda { color: var(--down); background: rgba(255,77,106,.1); }
.delta.neutro { color: var(--text-secondary); background: rgba(255,255,255,.05); }
.delta svg { width: 10px; height: 10px; }
.comp .base { color: var(--text-muted); }
.comp .base b { color: var(--text-secondary); font: 600 12px var(--f-num); }
.nota { color: var(--text-muted); font-size: 11.5px; margin-top: 10px; line-height: 1.4; }
.nota b { color: var(--warn); font-weight: 700; }

/* funil */
.funil { display: flex; flex-direction: column; gap: 8px; }
.passo { display: grid; grid-template-columns: 210px 1fr 150px 110px; gap: 14px; align-items: center; }
.passo .nome { font: 700 13px/1.2 var(--f-body); }
.passo .nome small { display: block; color: var(--text-muted); font-weight: 500; font-size: 11.5px; margin-top: 3px; }
.barra { position: relative; height: 40px; background: rgba(255,255,255,.03); border-radius: 8px; overflow: hidden; }
.barra i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px 8px 8px 4px; background: linear-gradient(90deg, #a83510, var(--accent)); box-shadow: 0 0 24px -6px var(--accent-glow); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.barra b { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 800 17px/1 var(--f-display); letter-spacing: -.5px; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.passo .conv { font: 700 12px/1.2 var(--f-num); color: var(--text-secondary); text-align: right; }
.passo .conv em { display: block; font: 600 10.5px var(--f-body); color: var(--text-muted); font-style: normal; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.passo .tempo { font: 600 12px/1.2 var(--f-num); color: var(--text-secondary); text-align: right; }
.passo .tempo em { display: block; font: 600 10.5px var(--f-body); color: var(--text-muted); font-style: normal; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.seta-conv { height: 10px; margin-left: 224px; border-left: 2px dashed var(--line-strong); }

/* gráficos */
.grafico { width: 100%; height: 300px; }
.grafico.alto { height: 360px; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 8px; font: 600 12px var(--f-body); color: var(--text-secondary); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; }

/* tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-rolo { overflow: auto; max-height: 460px; border-radius: 10px; }
.tabela th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font: 700 10.5px/1.2 var(--f-body); color: var(--text-muted); text-transform: uppercase; letter-spacing: .9px; padding: 9px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; cursor: pointer; user-select: none; }
.tabela th.num, .tabela td.num { text-align: right; }
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--text-secondary); white-space: nowrap; }
.tabela td:first-child { color: var(--text-primary); font-weight: 600; }
.tabela td.num { font: 500 12.5px var(--f-num); color: var(--text-primary); }
.tabela tr:hover td { background: rgba(255,94,26,.05); }
.tabela .pos { color: var(--text-muted); font: 600 11px var(--f-num); width: 28px; }
.tabela tr.top1 .pos { color: var(--accent); }
.tabela a { color: var(--text-primary); text-decoration: none; border-bottom: 1px dashed var(--line-strong); }
.tabela a:hover { color: var(--accent); border-color: var(--accent); }
.selo-dias { font: 700 11px var(--f-num); padding: 3px 7px; border-radius: 6px; background: rgba(255,176,32,.12); color: var(--warn); }
.selo-dias.d30 { background: rgba(255,77,106,.14); color: var(--down); }
.vazio { color: var(--text-muted); font-size: 13px; padding: 18px 4px; }
/* faixas de idade (pendências, em negociação) */
.faixas { display: flex; flex-wrap: wrap; gap: 10px; }
.faixa { flex: 1 1 90px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.faixa b { display: block; font: 700 24px var(--f-num); color: var(--text-primary); }
.faixa span { color: var(--text-muted); font-size: 12px; }
.faixa:last-child b { color: var(--down); }
.tabela small.fonte { color: var(--text-muted); font-size: 11px; }
.tabela .motivo { display: inline-block; white-space: normal; min-width: 220px; max-width: 420px; line-height: 1.35; }
.tabela .sem { color: var(--text-muted); font-style: italic; }
.mini-bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); vertical-align: middle; margin-left: 8px; opacity: .8; }

/* quadro atividade × conversão */
.quadro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quad { border-radius: 12px; border: 1px solid var(--line); padding: 14px; background: var(--bg-1); }
.quad h4 { margin: 0 0 4px; font: 800 13px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: -.2px; }
.quad .q-n { font: 800 34px/1 var(--f-display); margin: 8px 0; }
.quad ul { list-style: none; padding: 0; margin: 8px 0 0; max-height: 180px; overflow: auto; font-size: 12.5px; color: var(--text-secondary); }
.quad li { padding: 3px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.quad.q1 { border-color: rgba(47,227,154,.35); } .quad.q1 h4 { color: var(--up); }
.quad.q2 { border-color: rgba(255,176,32,.35); } .quad.q2 h4 { color: var(--warn); }
.quad.q3 { border-color: rgba(255,77,106,.35); } .quad.q3 h4 { color: var(--down); }

/* avisos */
.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,176,32,.35); background: rgba(255,176,32,.07); color: var(--text-secondary); font-size: 13px; margin-bottom: 14px; }
.aviso.erro { border-color: rgba(255,77,106,.45); background: rgba(255,77,106,.08); }
.aviso b { color: var(--text-primary); }
.alerta-zero { display: inline-flex; gap: 6px; align-items: center; font: 700 11px var(--f-body); color: var(--down); background: rgba(255,77,106,.12); padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .6px; }

/* carregando */
.esqueleto { height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-1), #2a3140, var(--surface-1)); background-size: 200% 100%; animation: brilho 1.4s infinite; border: 1px solid var(--line); }
@keyframes brilho { to { background-position: -200% 0; } }
.carregando-geral { text-align: center; padding: 80px 20px; color: var(--text-secondary); }
.carregando-geral h2 { font: 800 22px var(--f-display); text-transform: uppercase; color: var(--text-primary); }

/* entrada em sequência */
/* atraso da entrada com teto: numa aba com 40 blocos o último esperava 2 s+ e a tela parecia vazia (24/10) */
.entra { opacity: 0; transform: translateY(14px) scale(.985); animation: entra .45s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(min(var(--i, 0), 8) * 35ms); }
@keyframes entra { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .entra { animation: none; opacity: 1; transform: none; } .barra i { transition: none; } }

.rodape { margin-top: 40px; color: var(--text-muted); font-size: 11.5px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; }

/* botão que recolhe os filtros: só no celular */
.filtros-botao { display: none; width: 100%; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-primary); font: 600 13px var(--f-body); cursor: pointer; }
.filtros-botao b { font: 800 11px var(--f-body); text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
.filtros-botao span { flex: 1; text-align: left; color: var(--text-secondary); }
.filtros-botao[aria-expanded="true"] i { transform: rotate(180deg); }

/* ---------- celular ---------- */
@media (max-width: 1180px) {
  .g5 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .passo { grid-template-columns: 170px 1fr 110px 90px; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px 48px; }
  .topo { padding-top: 14px; gap: 10px; }
  .marca h1 { font-size: 17px; }
  .status { width: 100%; justify-content: space-between; }
  .filtros-botao { display: flex; }
  .filtros:not(.aberto) { display: none; }
  .filtros { padding: 12px; gap: 8px; }
  .filtros .campo:has(.segmento), .filtros .campo.datas-campo, .filtros .campo.largo { flex: 1 1 100%; }
  .filtros .campo { flex: 1 1 40%; }
  .segmento { width: 100%; overflow-x: auto; }
  .segmento button { flex: 1; }
  .datas input { width: 100%; }
  .g5, .g4, .g3, .g2 { grid-template-columns: 1fr 1fr; }
  .span2 { grid-column: span 2; }
  .g2 > .card:not(.kpi), .g3 > .card:not(.kpi) { grid-column: span 2; }
  .kpi { padding: 14px; }
  .kpi .valor { font-size: 28px; margin: 8px 0; }
  .kpi .valor.dinheiro { font-size: 20px; }
  .passo { grid-template-columns: 1fr 70px; gap: 6px 10px; }
  .passo .nome { grid-column: 1 / -1; }
  .passo .tempo { display: none; }
  .seta-conv { margin-left: 12px; height: 6px; }
  .quadro { grid-template-columns: 1fr; }
  .grafico { height: 240px; }
  .card { padding: 14px; }
}

/* ---------- "ver lista": tabela detalhada recolhida ---------- */
details.ver-lista > summary { cursor: pointer; list-style: none; font: 700 13px/1.3 var(--f-body); color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
details.ver-lista > summary::-webkit-details-marker { display: none; }
details.ver-lista > summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font: 800 14px/1 var(--f-num); flex: 0 0 auto; }
details.ver-lista[open] > summary::before { content: '–'; }
details.ver-lista > summary small { color: var(--text-muted); font-weight: 600; }
details.ver-lista[open] > summary { margin-bottom: 12px; }

/* ---------- período em andamento nos gráficos ---------- */
.selo-andamento { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px; border: 1px dashed rgba(255,94,26,.55); color: #ff8a55; font: 700 11px/1.2 var(--f-body); letter-spacing: .3px; }
.selo-andamento i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulsa 1.4s infinite; }
.abas-ranking { margin-bottom: 12px; }
.tabela-rolo.sem-rolagem { max-height: none; overflow: visible; }
.tabela-rolo.sem-rolagem .tabela td { white-space: normal; }
.tabela-rolo.sem-rolagem .tabela td.num { white-space: nowrap; }
.kpi.alerta { border-color: rgba(255,176,32,.45); }
.kpi.alerta .valor { color: var(--warn); }
.aviso small { color: var(--text-muted); }

/* ---------- logo INOV9 (a mesma do hub on.inov9-imoveis.com.br) ---------- */
.marca .logo { height: 45px; width: auto; display: block; filter: drop-shadow(0 6px 18px rgba(255,94,26,.18)); }
.marca .marca-txt { padding-left: 16px; border-left: 1px solid var(--line-strong); }
@media (max-width: 640px) { .marca .logo { height: 34px; } .marca .marca-txt { padding-left: 12px; } .marca h1 { font-size: 17px; } }

/* =====================================================================
   FASE 3 — visual high-tech (23/10). Mesmo tema: escuro, laranja, Unbounded nos números de vitrine.
   ===================================================================== */

/* mini gráfico dos cartões: 4 períodos em tom apagado, o atual em laranja */
.spark { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.spark svg { overflow: visible; }
.spark span { font: 600 10px var(--f-body); color: var(--text-muted); letter-spacing: .4px; text-transform: uppercase; }

/* ---------- funil legível ---------- */
.funil2 { display: flex; flex-direction: column; gap: 0; }
.f-passo { display: grid; grid-template-columns: 220px 1fr 150px; gap: 16px; align-items: center; }
.f-rot b { display: block; font: 700 14px/1.2 var(--f-body); }
.f-rot small { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 4px; }
.f-trilho { display: flex; justify-content: center; }
.f-barra { width: 0; height: 58px; display: grid; place-items: center; border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, #a83108, var(--accent) 45%, #ff8a4c 55%, var(--accent) 65%, #a83108);
  box-shadow: 0 0 0 1px rgba(255,138,76,.35) inset, 0 14px 40px -18px var(--accent-glow);
  transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.f-barra::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px); }
.f-barra b { position: relative; z-index: 1; font: 800 26px/1 var(--f-display); letter-spacing: -1px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.f-tempo { text-align: right; font: 600 13px/1.2 var(--f-num); color: var(--text-secondary); }
.f-tempo em { display: block; font: 600 10.5px var(--f-body); color: var(--text-muted); font-style: normal; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.f-tempo small { color: var(--text-muted); }
.f-conv { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; position: relative; }
.f-conv::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed var(--line-strong); z-index: 0; }
.f-conv span { position: relative; z-index: 1; font: 700 12px var(--f-num); color: var(--text-primary); background: var(--surface-3); border: 1px solid var(--line-strong); padding: 4px 10px; border-radius: 999px; }
.f-conv small { position: relative; z-index: 1; color: var(--text-muted); font-size: 11px; background: var(--surface-1); padding: 0 4px; }

/* ---------- medidor de meta ---------- */
.meta-card { padding: 20px 22px; background: radial-gradient(600px 220px at 100% 0, rgba(255,94,26,.14), transparent 60%), linear-gradient(180deg, #1b202b, #141821.95)); border-color: rgba(255,94,26,.35); margin-bottom: 6px; }
.meta-cab { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.meta-cab h3 { margin: 0; font: 800 17px/1.1 var(--f-display); color: var(--text-primary); text-transform: uppercase; letter-spacing: -.3px; }
.meta-cab small { color: var(--text-muted); font-size: 12px; }
.meta-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 16px; }
.medidor .m-topo { display: flex; justify-content: space-between; align-items: baseline; }
.medidor .rot { font: 700 11.5px/1.2 var(--f-body); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.m-pct { font: 800 22px/1 var(--f-display); letter-spacing: -.6px; }
.m-pct.bom { color: var(--up); } .m-pct.atras { color: var(--warn); }
.m-num { margin: 10px 0 12px; }
.m-num b { font: 800 clamp(30px, 3.6vw, 52px)/1 var(--f-display); letter-spacing: -1.6px; text-shadow: 0 0 34px rgba(255,94,26,.35); }
.m-num span { font: 600 15px var(--f-num); color: var(--text-muted); }
.m-trilho { position: relative; height: 16px; border-radius: 999px; background: rgba(255,94,26,.12); box-shadow: inset 0 0 0 1px rgba(255,94,26,.22); overflow: visible; }
.m-trilho i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #c2350a, var(--accent) 70%, #ffa06b); box-shadow: 0 0 18px var(--accent-glow); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.m-trilho em { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--text-primary); border-radius: 2px; box-shadow: 0 0 0 3px rgba(7,8,11,.8); }
.m-trilho em::after { content: 'hoje'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font: 700 9.5px var(--f-body); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .6px; }
.medidor .nota .ok { color: var(--up); font-weight: 700; } .medidor .nota .atras { color: var(--warn); font-weight: 700; }
.meta-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.meta-form label { display: flex; flex-direction: column; gap: 5px; font: 700 10.5px var(--f-body); color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; }
.meta-form input { width: 170px; }

/* ---------- pódio ---------- */
.podio { position: relative; padding: 22px 22px 0; border-radius: var(--radius); border: 1px solid rgba(255,94,26,.3); overflow: hidden; margin-bottom: 8px;
  background: radial-gradient(500px 260px at 50% 0, rgba(255,94,26,.22), transparent 70%), linear-gradient(180deg, #11141b, #0b0d12); }
.podio h3 { margin: 0 0 6px; font: 800 17px var(--f-display); text-transform: uppercase; letter-spacing: -.3px; }
.podio h3 small { display: block; font: 600 12px var(--f-body); color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-top: 4px; }
.podio-grade { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 14px; max-width: 980px; margin: 0 auto; }
.degrau { display: flex; flex-direction: column; align-items: center; text-align: center; }
.degrau .avatar { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); margin-bottom: 10px;
  box-shadow: 0 0 0 3px var(--md), 0 0 30px -4px var(--md); }
.degrau.d1 .avatar { width: 124px; height: 124px; }
.degrau .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; z-index: 1; }
.degrau .avatar span { font: 800 28px var(--f-display); color: var(--text-secondary); }
.degrau .medalha { position: absolute; z-index: 2; right: -4px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--f-display); font-style: normal; color: #1a1205;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--md); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.degrau.d1 { --md: #f6c445; } .degrau.d2 { --md: #c9d2dc; } .degrau.d3 { --md: #d38a4f; }
.degrau .pn { font: 800 15px/1.2 var(--f-body); }
.degrau small { color: var(--text-muted); font-size: 12px; }
.degrau .pv { font: 800 clamp(20px, 2.4vw, 32px)/1.1 var(--f-display); letter-spacing: -1px; margin: 8px 0 2px; color: var(--text-primary); text-shadow: 0 0 26px rgba(255,94,26,.4); }
.degrau.d1 .pv { font-size: clamp(24px, 3vw, 40px); color: #ffd56b; }
.degrau .pq { font: 600 12px var(--f-num); color: var(--text-secondary); margin-bottom: 12px; }
.degrau .base { width: 100%; border-radius: 12px 12px 0 0; display: grid; place-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--md) 30%, #1b202b), #141821); border: 1px solid color-mix(in srgb, var(--md) 45%, transparent); border-bottom: 0; }
.degrau .base span { font: 800 40px var(--f-display); color: color-mix(in srgb, var(--md) 80%, white); opacity: .85; }
.degrau.d1 .base { height: 120px; } .degrau.d2 .base { height: 86px; } .degrau.d3 .base { height: 64px; }
.degrau .pv-curto { display: none; }   /* VGV abreviado ("R$ 714 mil"): só no celular */

/* ---------- qualidade dos dados ---------- */
.q-topo { grid-template-columns: 300px 1fr; }
.q-hero { display: flex; flex-direction: column; justify-content: center; padding: 22px; }
.q-hero .rot { font: 700 11.5px var(--f-body); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.q-hero b { font: 800 82px/1 var(--f-display); letter-spacing: -3px; margin-top: 10px; display: inline; }

.q-hero.bom b { color: var(--up); } .q-hero.medio b { color: var(--warn); } .q-hero.ruim b { color: var(--down); }
.q-hero .ia { margin-top: 16px; padding: 12px 16px; font-size: 14px; }
.q-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.q-campo { padding: 16px; }
.q-campo .rot { font: 700 11px var(--f-body); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .8px; }
.q-campo .valor { font: 800 34px/1 var(--f-display); letter-spacing: -1px; margin: 10px 0; }
.q-trilho { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.q-trilho i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--accent); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.bom .q-trilho i { background: var(--up); } .medio .q-trilho i { background: var(--warn); } .ruim .q-trilho i { background: var(--down); }
.q-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.q-rank li { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) 120px 62px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--line); }
.q-rank .pos { font: 700 11px var(--f-num); color: var(--text-muted); }
.q-rank .av { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; overflow: hidden; }
.q-rank .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.q-rank .av em { font: 800 11px var(--f-display); font-style: normal; color: var(--text-secondary); }
.q-rank .nm b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-rank .nm small { color: var(--text-muted); font-size: 11px; }
.q-rank .nt { text-align: right; font: 700 14px var(--f-num); }
.q-rank li.bom .nt { color: var(--up); } .q-rank li.medio .nt { color: var(--warn); } .q-rank li.ruim .nt { color: var(--down); }
.faltam { color: var(--warn); white-space: normal; }
.kpi .q-trilho { margin: -2px 0 4px; }

@media (max-width: 1100px) { .q-topo { grid-template-columns: 1fr; } .q-campos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .f-passo { grid-template-columns: 1fr; gap: 8px; }
  .f-tempo { text-align: left; }
  .meta-grade { grid-template-columns: 1fr; gap: 18px; }
  /* celular (24/10): as 3 colunas encolhem até caber (minmax(0, …)), o VGV vai abreviado e pode quebrar a linha, o nome
     longo quebra; sem isto a coluna do 3º lugar passava da tela e cortava nome, VGV e vendas */
  .podio { padding: 16px 10px 0; }
  .podio-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 6px; }
  .degrau { min-width: 0; }
  .degrau .pn, .degrau small, .degrau .pq { max-width: 100%; overflow-wrap: anywhere; }
  .degrau .pv { font-size: clamp(14px, 4.4vw, 20px); letter-spacing: -.5px; max-width: 100%; }
  .degrau.d1 .pv { font-size: clamp(16px, 5vw, 24px); }
  .degrau .pv-cheio { display: none; } .degrau .pv-curto { display: inline; }
  .degrau .pq { font-size: 11px; }
  .degrau .avatar { width: 60px; height: 60px; } .degrau.d1 .avatar { width: 74px; height: 74px; }
  .degrau .pn { font-size: 12px; } .degrau .base span { font-size: 24px; }
  .q-campos { grid-template-columns: 1fr 1fr; }
  .q-rank li { grid-template-columns: 22px 34px minmax(0, 1fr) 54px; } .q-rank .q-trilho { display: none; }
}
.meta-form[hidden], [hidden] { display: none !important; }
.q-hero .q-num { display: flex; align-items: baseline; gap: 4px; margin-top: 10px; white-space: nowrap; }
.q-hero .q-num b { margin-top: 0; font-size: clamp(56px, 6vw, 82px); }
.q-hero .q-num span { font: 800 30px var(--f-display); color: var(--text-muted); }
.spark svg { max-width: 100%; height: auto; }
@media (max-width: 760px) {
  .spark span { display: none; }
  .f-conv { height: auto; flex-wrap: wrap; padding: 8px 0; }
  .f-conv span { white-space: nowrap; }
}

/* ---------- correção com IA ---------- */
.corr-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
.corr-form { display: flex; flex-direction: column; gap: 12px; }
.corr-form .arquivo { display: flex; align-items: center; justify-content: center; min-height: 92px; border: 1.5px dashed rgba(255,94,26,.5); border-radius: 14px; background: var(--accent-soft); cursor: pointer; text-align: center; padding: 14px; font-weight: 700; }
.corr-form .arquivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.corr-form textarea { width: 100%; background: var(--bg-1); color: var(--text-primary); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: 13px var(--f-num); margin-top: 8px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-secondary); }
.corr-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.guia summary { cursor: pointer; } .guia summary small { color: var(--text-muted); }
.passos { margin: 14px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.passos b { color: var(--text-primary); }
.guia h4 { margin: 14px 0 8px; font: 700 12px var(--f-body); text-transform: uppercase; letter-spacing: .8px; color: var(--text-secondary); }
.guia code { font: 12px var(--f-num); color: var(--text-primary); }
.cert { display: inline-block; font: 700 11px var(--f-body); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cert.alta { background: rgba(47,227,154,.14); color: var(--up); } .cert.media, .cert.baixa { background: rgba(255,176,32,.14); color: var(--warn); } .cert.sem { background: rgba(255,77,106,.14); color: var(--down); }
.corr-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; position: sticky; top: 8px; z-index: 5; margin-bottom: 12px; background: var(--bg-0); border-radius: 12px; }
.corr-barra #corr-sel { margin: 0 auto 0 4px; }
.corr-card { margin-top: 12px; } .corr-card h3 a { color: var(--text-primary); text-transform: none; letter-spacing: 0; font-size: 14px; }
.corr-tab td { white-space: normal; vertical-align: top; }
.corr-tab tr.cert-alta td:first-child { box-shadow: inset 3px 0 0 var(--up); } .corr-tab tr.cert-media td:first-child, .corr-tab tr.cert-baixa td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.corr-tab .antes { color: var(--text-muted); text-decoration: line-through; } .corr-tab .seta { color: var(--accent); }
.corr-tab select { min-width: 180px; }
.fonte { font: 700 11px var(--f-body); padding: 2px 7px; border-radius: 6px; } .fonte.k { background: rgba(57,135,229,.16); color: #8db8f2; } .fonte.c { background: rgba(148,102,224,.18); color: #c3a6f2; }
.evid { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; max-width: 320px; }
.aviso-linha { font-size: 11.5px; color: var(--warn); margin-top: 4px; }
.sem-card { margin-top: 14px; border-color: rgba(255,77,106,.45); } .sem-card h3 { color: var(--down); }
.st { font: 700 11px var(--f-body); padding: 2px 7px; border-radius: 6px; } .st.ok { color: var(--up); background: rgba(47,227,154,.12); } .st.erro { color: var(--down); background: rgba(255,77,106,.12); } .st.aviso { color: var(--warn); background: rgba(255,176,32,.12); } .st.neutro { color: var(--text-secondary); background: rgba(255,255,255,.06); }
.btn.mini { padding: 5px 9px; font-size: 11.5px; }
dialog.confirma { max-width: min(860px, 94vw); width: 100%; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--line-strong); border-radius: 16px; padding: 20px; }
dialog.confirma::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
dialog.confirma .conf-lista { max-height: 50vh; overflow: auto; margin: 12px 0; }
@media (max-width: 900px) { .corr-topo { grid-template-columns: 1fr; } }
.corr-tab { table-layout: fixed; }
.corr-tab th:nth-child(1) { width: 38px; } .corr-tab th:nth-child(2) { width: 18%; } .corr-tab th:nth-child(3) { width: 20%; } .corr-tab th:nth-child(4) { width: 30px; } .corr-tab th:nth-child(6) { width: 16%; } .corr-tab th:nth-child(7) { width: 120px; }

/* ---------- esteira de crédito ---------- */
.trecho { padding: 18px; position: relative; overflow: hidden; }
.trecho::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--line-strong); }
.trecho.bom::after { background: var(--up); } .trecho.medio::after { background: var(--warn); } .trecho.ruim::after { background: var(--down); }
.tr-cab { display: flex; gap: 12px; align-items: flex-start; }
.tr-cab b { display: block; font: 800 15px var(--f-display); text-transform: uppercase; letter-spacing: -.3px; }
.tr-cab small { color: var(--text-muted); font-size: 12px; }
.tr-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 800 14px var(--f-display); }
.tr-meta { margin-left: auto; font: 700 11px var(--f-num); color: var(--text-secondary); background: var(--surface-3); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.tr-num { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
.tr-num b { font: 800 clamp(36px, 4vw, 54px)/1 var(--f-display); letter-spacing: -1.6px; }
.trecho.bom .tr-num b { color: var(--up); } .trecho.medio .tr-num b { color: var(--warn); } .trecho.ruim .tr-num b { color: var(--down); }
.tr-num span { color: var(--text-muted); font-size: 12px; }
.tr-p90 { font-size: 13.5px; color: var(--text-secondary); } .tr-p90 b { color: var(--text-primary); font-family: var(--f-num); }
.fila { border-color: rgba(255,94,26,.35); }
.fila-cab { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fila-cab h3 { margin: 0; }
.fila-cores { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rot-fc { font: 700 10.5px var(--f-body); color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; margin-left: 8px; }
.fc { font: 700 11.5px var(--f-num); padding: 4px 8px; border-radius: 999px; }
.fc.verde, .tempo-fila.verde { color: var(--up); background: rgba(47,227,154,.12); }
.fc.amarelo, .tempo-fila.amarelo { color: var(--warn); background: rgba(255,176,32,.13); }
.fc.vermelho, .tempo-fila.vermelho { color: var(--down); background: rgba(255,77,106,.14); }
.tempo-fila { font: 700 12.5px var(--f-num); padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.tabela .du { display: block; color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.sub-h { margin: 14px 0 6px; font: 700 12px var(--f-body); text-transform: uppercase; letter-spacing: .8px; color: var(--text-secondary); }
.esteira-resumo { margin-top: 14px; }
.er-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .er-cab h3 { margin: 0; }
.er-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.er { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.er span { display: block; font: 700 11px var(--f-body); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .6px; }
.er b { display: block; font: 800 30px/1.1 var(--f-display); margin: 6px 0 4px; letter-spacing: -1px; }
.er small { color: var(--text-muted); font-size: 11.5px; }
.er.bom b { color: var(--up); } .er.medio b { color: var(--warn); } .er.ruim b { color: var(--down); }
@media (max-width: 900px) { .er-grade { grid-template-columns: 1fr 1fr; } }

/* ---------- Campanhas da TV (admin) ---------- */
.mu-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.mu-item { padding: 12px; } .mu-item .ma-caixa { border-radius: 10px; }
.mu-info { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .mu-info small { color: var(--text-muted); } .mu-info .st { align-self: flex-start; }
.mu-form { margin-bottom: 18px; border-color: rgba(255,94,26,.4); }
.mu-form-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; }
.mu-campos { display: flex; flex-direction: column; gap: 10px; }
.mu-campos label { display: flex; flex-direction: column; gap: 5px; font: 700 10.5px var(--f-body); color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; }
.mu-campos input:not([type=file]) { width: 100%; background: var(--bg-1); color: var(--text-primary); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font: 14px var(--f-body); text-transform: none; letter-spacing: 0; box-sizing: border-box; }
.mu-campos input[type=file] { color: var(--text-secondary); font: 12px var(--f-body); text-transform: none; letter-spacing: 0; }
.mu-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mu-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.mu-foto { display: flex; flex-direction: column; gap: 4px; width: 110px; } .mu-foto img { width: 110px; height: 70px; object-fit: cover; border-radius: 8px; } .mu-foto.logo img { object-fit: contain; background: #fff1; }
.mu-previa { display: flex; flex-direction: column; gap: 8px; } .mu-previa .ma-caixa.grande { border-radius: 12px; box-shadow: 0 20px 60px -20px rgba(255,94,26,.35); }
.mu-modelos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mu-modelo { background: none; border: 2px solid var(--line); border-radius: 10px; padding: 4px; cursor: pointer; color: var(--text-secondary); font: 700 12px var(--f-body); display: flex; flex-direction: column; gap: 6px; }
.mu-modelo.ativo { border-color: var(--accent); color: var(--text-primary); } .mu-modelo .ma-caixa { border-radius: 6px; pointer-events: none; }
.mu-telas { display: flex; flex-direction: column; gap: 8px; }
.mu-tela { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); }
.mu-tela .pos { font: 700 12px var(--f-num); color: var(--accent); } .mu-tela label { font-size: 12px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; } .mu-tela input[type=number] { width: 64px; }
.mu-link { width: min(640px, 100%); margin-top: 6px; font: 13px var(--f-num); background: var(--bg-1); color: var(--text-primary); border: 1px solid var(--accent); border-radius: 8px; padding: 8px; }
@media (max-width: 900px) { .mu-form-grade { grid-template-columns: 1fr; } .mu-tela { grid-template-columns: 24px 1fr; } }

/* ---------- metas por time e indicador (23/10) ---------- */
.mt-rolagem { overflow-x: auto; }
.mt-quadro { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.mt-quadro th, .mt-quadro td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mt-quadro thead th { font: 700 11px var(--f-body); text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); white-space: nowrap; }
.mt-quadro tbody th { font-weight: 700; white-space: nowrap; color: var(--text-primary); }
.mt-quadro tr.mt-geral th, .mt-quadro tr.mt-geral td { background: var(--surface-2); }
.mt-cel { min-width: 128px; }
.mt-cel .mt-l1 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mt-cel b { font: 700 16px var(--f-num); color: var(--text-primary); }
.mt-cel small { color: var(--text-muted); font-size: 11.5px; }
.mt-cel .mt-pct { margin-left: auto; font: 700 12px var(--f-num); padding: 2px 7px; border-radius: 6px; }
.mt-cel.verde .mt-pct { color: #04130c; background: var(--up); }
.mt-cel.amarelo .mt-pct { color: #1a1100; background: var(--warn); }
.mt-cel.vermelho .mt-pct { color: #1d0207; background: var(--down); }
.mt-cel.sem b { color: var(--text-secondary); }
.mt-cel.sem small { margin-left: 6px; }
.mt-trilho { position: relative; height: 6px; margin: 7px 0 4px; border-radius: 99px; background: var(--surface-3); }
.mt-trilho i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.mt-cel.verde .mt-trilho i { background: var(--up); } .mt-cel.amarelo .mt-trilho i { background: var(--warn); } .mt-cel.vermelho .mt-trilho i { background: var(--down); }
.mt-trilho em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text-primary); border-radius: 2px; }
.mt-sit { display: block; }
.mt-leg { font-weight: 700; padding: 0 5px; border-radius: 4px; }
.mt-leg.verde { color: #04130c; background: var(--up); } .mt-leg.amarelo { color: #1a1100; background: var(--warn); } .mt-leg.vermelho { color: #1d0207; background: var(--down); }
.mt-resumo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.mt-resumo .rot { display: block; font: 700 11px var(--f-body); text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-bottom: 6px; min-height: 2.6em; }
.mt-resumo .mt-cel b { font-size: 22px; }
.mt-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mt-nav b { font: 800 16px var(--f-display); text-transform: uppercase; padding: 0 6px; }
.mt-nav .nota { margin: 0 0 0 auto; }
.mt-editor h3 small { color: var(--text-muted); font-weight: 500; }
.mt-edita input { width: 100%; min-width: 110px; background: var(--bg-1); color: var(--text-primary); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 9px; font: 600 14px var(--f-num); }
.mt-edita input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.mt-edita input::placeholder { color: var(--text-muted); font: 500 12px var(--f-body); }
.guia ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-secondary); line-height: 1.55; } .guia li { margin: 4px 0; }
@media (max-width: 1100px) { .mt-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mt-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-nav .nota { margin-left: 0; } }

/* ---------- primeira venda (rampa do novato, 23/10) ---------- */
.pv-equipes { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-equipes span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--text-secondary); }
.pv-equipes b { color: var(--text-primary); margin-right: 6px; }
.pv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pv-lista li { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.pv-lista li:has(.btn) { grid-template-columns: 28px 40px minmax(0, 1fr) auto auto auto; }
.pv-lista .pos { font: 700 13px var(--f-num); color: var(--text-muted); text-align: center; }
.pv-lista:not(.sem) li:nth-child(-n+3) .pos { color: var(--accent); }
.pv-lista .av { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; }
.pv-lista .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-lista .av em { font: 700 13px var(--f-body); font-style: normal; color: var(--text-secondary); }
.pv-lista .nm b { display: block; font-size: 14px; } .pv-lista .nm small { color: var(--text-muted); font-size: 12px; }
.pv-datas { font-size: 12.5px; color: var(--text-secondary); text-align: right; line-height: 1.5; white-space: nowrap; }
.pv-datas small { color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; font-size: 10px; margin-right: 4px; }
.pv-dias { text-align: right; min-width: 78px; } .pv-dias b { display: block; font: 700 17px var(--f-num); } .pv-dias small { color: var(--text-muted); font-size: 10.5px; }
.pv-lista li.amarelo { border-color: var(--warn); } .pv-lista li.amarelo .pv-dias b { color: var(--warn); }
.pv-lista li.vermelho { border-color: var(--down); } .pv-lista li.vermelho .pv-dias b { color: var(--down); }
.pv-lista li.conferir { border-style: dashed; border-color: var(--down); }
.pv-ajuste, .pv-tag { font: 700 10px var(--f-body); text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-secondary); }
.pv-ajuste { background: var(--accent-soft); color: var(--accent); cursor: help; } .pv-tag.erro { background: rgba(255,77,106,.14); color: var(--down); }
.pv-dialogo { max-width: min(520px, 94vw); }
@media (max-width: 720px) {
  .pv-lista li, .pv-lista li:has(.btn) { grid-template-columns: 22px 36px minmax(0, 1fr) auto; }
  .pv-datas { grid-column: 3 / 4; text-align: left; } .pv-lista .btn { grid-column: 3 / -1; justify-self: start; }
}
.pv-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; margin-bottom: 14px; }
@media (max-width: 720px) { .pv-topo { grid-template-columns: 1fr; } }

/* ---------- LIA, a agente do painel (24/10) ---------- */
.lia-botao { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(135deg, #ff8a4c, var(--accent)); color: #140700; font: 800 14px var(--f-body); box-shadow: 0 10px 30px -8px var(--accent-glow), 0 4px 14px rgba(0,0,0,.5); }
.lia-botao:hover { filter: brightness(1.06); } .lia-botao:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lia-ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #140700; color: #ff8a4c; font: 800 15px var(--f-display); flex: 0 0 auto; }
body.lia-aberta .lia-botao { display: none; }
.lia-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--bg-1); border-left: 1px solid var(--line-strong); box-shadow: -20px 0 40px rgba(0,0,0,.5); }
.lia-painel[hidden] { display: none; }
.lia-cab { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); background: var(--surface-1); }
.lia-cab div { flex: 1; } .lia-cab b { display: block; font: 800 16px var(--f-display); } .lia-cab small { color: var(--text-muted); font-size: 12px; }
.lia-fechar { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-primary); font-size: 22px; line-height: 1; cursor: pointer; }
.lia-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.lia-msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.lia-msg p { margin: 0 0 6px; } .lia-msg p:last-of-type { margin-bottom: 0; } .lia-msg ul { margin: 4px 0 6px; padding-left: 18px; }
.lia-msg.eu { align-self: flex-end; background: var(--accent-soft); border: 1px solid rgba(255,94,26,.35); color: var(--text-primary); white-space: pre-wrap; }
.lia-msg.lia { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); }
.lia-msg.erro { border-color: var(--down); } .lia-msg.pensando { color: var(--text-muted); font-style: italic; }
.lia-ass { display: block; margin-top: 6px; font: 700 11px var(--f-body); color: var(--accent); }
.lia-fonte { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-size: 12px; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lia-fonte details { width: 100%; } .lia-fonte summary { cursor: pointer; color: var(--text-muted); } .lia-fonte ul { margin: 6px 0 0; padding-left: 16px; } .lia-fonte li { margin: 2px 0; }
.lia-fraco { margin-top: 6px; font-size: 12px; color: var(--warn); }
.lia-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--line); background: var(--surface-1); }
.lia-form textarea { flex: 1; resize: none; background: var(--bg-0); color: var(--text-primary); border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 10px; font: 500 14px var(--f-body); }
.lia-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lia-mic { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; display: grid; place-items: center; }
.lia-mic svg { width: 20px; height: 20px; } .lia-mic.ouvindo { color: #140700; background: var(--accent); }
.lia-hist { font-size: 12.5px; } .lia-hist h4 { margin: 14px 0 6px; } .lia-hist .tabela { font-size: 12px; }
@media (max-width: 720px) {
  .lia-painel { width: 100vw; border-left: 0; }
  .lia-botao { right: 12px; bottom: 12px; padding: 8px 14px 8px 8px; }
}
/* Lia, Etapa 2: proposta de correção e desfazer dentro da conversa */
.fonte.m { background: var(--accent-soft); color: var(--accent); }
.lia-acao { margin-top: 10px; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,94,26,.35); background: var(--bg-1); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.lia-acao ul { margin: 2px 0; padding-left: 16px; } .lia-acao a { color: var(--text-primary); }
.lia-acao .btn { align-self: flex-start; }
.corr-resumo .grade div { display: flex; flex-direction: column; gap: 4px; } .corr-resumo b { font: 700 18px var(--f-num); }
/* Etapa 3: previsão do mês e plano para bater a meta */
.previsao { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.previsao .rot { display: block; font: 700 11px var(--f-body); text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-bottom: 6px; }
.previsao-lin { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; } .previsao-lin b { font: 700 16px var(--f-num); }
.previsao details { margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); } .previsao summary { cursor: pointer; color: var(--text-muted); }
.pv-sit { font: 700 11px var(--f-body); padding: 2px 7px; border-radius: 6px; margin-left: 4px; }
.pv-sit.ok { color: #04130c; background: var(--up); } .pv-sit.meio { color: #1a1100; background: var(--warn); } .pv-sit.nao { color: #1d0207; background: var(--down); }
.plano h4 { margin: 16px 0 6px; font-size: 14px; } .plano h3 small { color: var(--text-muted); font-weight: 500; }
.plano-veredito { font-size: 15px; font-weight: 600; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--bg-1); border-radius: 8px; }
.plano-acoes { padding-left: 20px; } .plano-acoes li { margin: 8px 0; } .plano-cards { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; } .plano-cards a { color: var(--text-primary); }

/* ---------- áreas (Vendas · Locação) e LOCAÇÃO (24/10) ---------- */
.areas { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; }
.areas button { font: 800 13px/1 var(--f-body); letter-spacing: .4px; text-transform: uppercase; color: var(--text-secondary); background: transparent; border: 0; padding: 10px 18px; border-radius: 9px; cursor: pointer; }
.areas button:hover { color: var(--text-primary); background: var(--surface-2); }
.areas button.ativa { color: var(--text-primary); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
#loc .abas-caixa { margin-bottom: 14px; }
.aviso.info { border-color: var(--line-strong); background: var(--surface-1); }
.aviso.faixa-roleta { border-width: 2px; font-size: 14px; background: rgba(255,77,106,.16); }
.aviso.faixa-roleta b { color: #ff8095; }
.loc-faixas { flex-wrap: wrap; }
.loc-faixas button b { font-family: var(--f-num); margin-left: 4px; color: var(--text-primary); }
@media (max-width: 720px) { .areas { display: flex; } .areas button { flex: 1; padding: 10px 8px; } }
.loc-num { font: 800 34px/1 var(--f-display); letter-spacing: -1px; margin: 4px 0 10px; }
.loc-lista { margin: 4px 0; font-size: 12.5px; }
.loc-lista summary { cursor: pointer; color: var(--accent); font-weight: 700; white-space: nowrap; }
.loc-lista > div { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 8px 0 2px; max-width: 640px; white-space: normal; font-family: var(--f-num); }
.loc-grade { border-collapse: separate; border-spacing: 2px; font: 600 11px/1 var(--f-num); }
.loc-grade th { color: var(--text-muted); font-weight: 600; padding: 4px 2px; text-align: center; }
.loc-grade tbody th { text-align: left; padding-right: 8px; font-family: var(--f-body); }
.loc-grade td { width: 30px; height: 26px; text-align: center; color: var(--text-primary); border-radius: 4px; background: rgba(255, 94, 26, calc(0.06 + var(--a, 0) * 0.85)); }
.loc-grade td.num { background: none; color: var(--text-secondary); width: auto; padding-left: 8px; }
.loc-rank { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.loc-rank b { color: var(--text-primary); }
.loc-rank small { color: var(--text-muted); }
#loc .grade + .aviso { margin-top: 14px; }
.loc-quad { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.loc-quad small { display: block; color: var(--text-muted); font-size: 12px; }
.loc-quebra { white-space: normal; display: inline-block; max-width: 420px; }
#loc .g5 .kpi .valor { font-size: clamp(24px, 2.3vw, 36px); letter-spacing: -1px; }
.loc-meta small { display: block; color: var(--text-muted); font-size: 11.5px; white-space: normal; }
.loc-meta.bom b { color: var(--good, #2bd18b); } .loc-meta.alerta b { color: var(--warn); } .loc-meta.ruim b { color: #ff5d73; }
.loc-meta-in { width: 96px; padding: 6px 8px; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text-primary); font: 600 13px var(--f-num); text-align: right; }
#loc-metas-editor summary { cursor: pointer; padding: 4px 0 10px; }

/* carregando… (troca de aba ou de área) */
.carregando-tela { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; color: var(--text-secondary); font: 700 13px var(--f-body); letter-spacing: .3px; }
.carregando-tela .pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulso 1s infinite ease-in-out; }
@keyframes pulso { 50% { opacity: .25; transform: scale(.7); } }
.esqueleto.alto { height: 300px; }
@media (prefers-reduced-motion: reduce) { .carregando-tela .pulso { animation: none; } }
/* tabelas "sem rolagem" (a vertical é livre): cabem na largura do cartão — o cabeçalho quebra linha em vez de empurrar
   a última coluna para fora (o cartão corta com overflow hidden). Se ainda não couber (celular), rola só a tabela. */
.tabela-rolo.sem-rolagem { overflow-x: auto; overflow-y: hidden; }
.tabela-rolo.sem-rolagem .tabela th { white-space: normal; vertical-align: bottom; }
#loc .tabela th, #loc .tabela td { padding: 8px 8px; }
.tabela .loc-lista > div { max-width: 300px; }
@media (max-width: 1180px) and (min-width: 761px) {
  .tabela-rolo.sem-rolagem .tabela { font-size: 12px; }
  .tabela-rolo.sem-rolagem .tabela th { padding: 7px 5px; font-size: 9.5px; letter-spacing: .5px; }
  .tabela-rolo.sem-rolagem .tabela td { padding: 7px 5px; }
  .tabela-rolo.sem-rolagem .tabela td.num { font-size: 11.5px; }
}