/* ==========================================================================
   Painel HUD — Pele
   Fusão: a geometria e a profundidade vêm da linguagem Apple; a energia vem
   do HUD cyber.

   O que cada lado entrega:
   · Apple  — raios concêntricos, sombra em camadas com fio de luz na aresta,
              vidro só na camada de navegação, molas reais no movimento.
   · Cyber  — neon como acento (10–15% da tela), mono em todo número, fundo
              vivo com grade em deriva e varredura, faixas correndo na barra.

   Nada de canto cortado: a forma é arredondada do começo ao fim.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────── tipografia ── */

body { letter-spacing: 0; }
.num, .mono, .tab, .kpi-value, .medidor__valor { letter-spacing: -0.02em; }

/* Etiqueta de sistema: mono em caixa alta, o traço técnico que sobrou do HUD.
   Espaçamento menor que antes — Ruda já é aberta o bastante. */
.tabela thead th, .nav__grupo, .marca__sub, .campo__rotulo,
.kpi-title, .mini__rot, .cal__semana span, .paleta__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card-title, .cartao__titulo { letter-spacing: -0.01em; }

/* ─────────────────────────────────────────────────────────────── painéis ── */

/* Camada de conteúdo: opaca, arredondada, com profundidade de verdade —
   sombra curta de contato, sombra longa difusa e o fio de luz no topo. */
.cartao {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--linha);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 42%, transparent 100%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--superficie-baixa) 100%);
  box-shadow: var(--rim), var(--sombra-2);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              transform var(--spring-duration) var(--spring);
}
[data-theme="light"] .cartao {
  background: linear-gradient(180deg, #ffffff 0%, var(--superficie-baixa) 160%);
}
.cartao:hover {
  border-color: var(--acento-linha);
  box-shadow: var(--rim), var(--sombra-3), 0 0 30px -14px var(--acento);
}
.cartao--acao:hover { transform: translateY(-2px); }

/* Aresta superior que acende no hover — segue o arredondamento do painel. */
.cartao::after {
  content: ''; position: absolute; inset: -1px -1px auto -1px; height: 42px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(180deg, rgba(34, 224, 245, 0.16) 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-effects);
  pointer-events: none;
}
.cartao:hover::after, .cartao:focus-within::after { opacity: 1; }
.cartao--liso { overflow: hidden; }

/* ─────────────────────────────────────────────────────────────── lateral ── */

.lateral {
  --glass-tint: rgba(8, 14, 26, 0.78);
  border-right: 1px solid var(--linha);
}
[data-theme="light"] .lateral { --glass-tint: rgba(255,255,255,0.82); }

.marca__sinal {
  border-radius: 12px;
  background: linear-gradient(160deg, #1b4a5e 0%, #0d2436 60%, #0a1a28 100%);
  border: 1px solid var(--acento-linha);
  color: var(--acento);
  box-shadow: 0 6px 18px -8px var(--acento), inset 0 1px 0 rgba(255,255,255,0.12);
}
.marca__nome { font-weight: 800; letter-spacing: -0.01em; font-size: 17px; }

/* Brilho que atravessa o logotipo — sobrou do glitch, sem a quebra de RGB
   que destoava do resto. Um efeito por tela. */
.marca:hover .marca__nome {
  background: linear-gradient(100deg,
    var(--color-label) 0%, var(--color-label) 38%,
    var(--acento) 50%, var(--color-label) 62%, var(--color-label) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: varrer-marca 0.85s var(--ease-emphasized) 1;
}
@keyframes varrer-marca {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

.nav-item { border-radius: var(--radius-sm); font-weight: 500; }
.nav-item.ativo {
  background: var(--acento-suave);
  color: var(--acento-forte);
  box-shadow: inset 0 0 0 1px var(--acento-linha);
}
.nav-item.ativo::before {
  content: ''; position: absolute; left: 5px; top: 9px; bottom: 9px; width: 3px;
  border-radius: var(--radius-full);
  background: var(--acento);
  box-shadow: 0 0 10px var(--acento);
  animation: pulso-barra 2.8s var(--ease-in-out) infinite;
}
@keyframes pulso-barra { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.nav-item.ativo .ico { filter: drop-shadow(0 0 6px var(--acento)); }
.nav-item__contador {
  border-radius: var(--radius-full);
  background: var(--critico);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}
[data-theme="light"] .nav-item__contador { color: #fff; }

.medidor-mini {
  border-radius: var(--radius-md);
  background: var(--bg-3);
  border: 1px solid var(--linha);
  box-shadow: var(--rim), var(--sombra-1);
}
.medidor-mini__pct { font-family: var(--font-mono); }

/* ─────────────────────────────────────────────────────────── barra do topo ─ */

.topo {
  --glass-tint: rgba(8, 14, 26, 0.74);
  border-bottom: 1px solid var(--linha);
  overflow: hidden;   /* segura o fio de dados dentro da barra */
}
[data-theme="light"] .topo { --glass-tint: rgba(255,255,255,0.80); }

.topo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento) 20%, var(--magenta) 55%, transparent 85%);
  opacity: 0.42;
  animation: correr-fio 8s linear infinite;
  transform-origin: left;
  pointer-events: none;
}
@keyframes correr-fio {
  0%   { transform: translate3d(-40%, 0, 0) scaleX(0.6); }
  50%  { transform: translate3d(30%, 0, 0)  scaleX(1); }
  100% { transform: translate3d(100%, 0, 0) scaleX(0.6); }
}
.topo__titulo { font-weight: 800; letter-spacing: -0.02em; }

.busca-atalho {
  border-radius: var(--radius-full);
  background: var(--color-fill-tertiary);
  border-color: var(--linha);
  font-size: 13px;
}
.busca-atalho:hover { border-color: var(--acento-linha); background: var(--acento-suave); }
kbd {
  border-radius: 5px; background: var(--bg-2);
  border-color: var(--linha-forte); color: var(--color-label-secondary);
  font-family: var(--font-mono);
}

/* ───────────────────────────────────────────────────────────────── botões ── */

.btn {
  position: relative;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: var(--color-fill-tertiary);
  box-shadow: var(--rim);
  font-weight: 600; letter-spacing: 0;
  overflow: hidden;
}
.btn:hover { background: var(--color-fill-secondary); border-color: var(--acento-linha); }
.btn:active { transform: scale(0.96); }

/* Brilho que atravessa no hover. */
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.14) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--duration-slower) var(--ease-emphasized);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }

.btn--primario {
  /* Chapado e saturado. O degradê de três paradas lavava a cor e, no tema
     claro, virava um azul leitoso sem identidade. */
  background: var(--acento-botao);
  color: var(--acento-sobre);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 16px -6px var(--acento-brilho);
}
.btn--primario:hover {
  background: color-mix(in srgb, var(--acento-botao) 84%, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 22px -6px var(--acento-brilho);
  transform: translateY(-1px);
}
.btn--fantasma { background: transparent; border-color: var(--linha-forte); color: var(--color-label-secondary); box-shadow: none; }
.btn--fantasma:hover { color: var(--acento); border-color: var(--acento-linha); background: var(--acento-suave); }
.btn--perigo {
  background: linear-gradient(180deg, #FF8598 0%, var(--vermelho) 60%, #D82B47 100%);
  color: #1a0509;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 6px 20px -6px rgba(255, 84, 112, 0.6);
}

.icone-btn { border-radius: var(--radius-full); }
.icone-btn:hover { background: var(--acento-suave); color: var(--acento); }

.seg { border-radius: var(--radius-full); background: var(--color-fill-tertiary); border-color: var(--linha); }
.seg button { border-radius: var(--radius-full); }
.seg button.ativo {
  background: var(--bg-3); color: var(--acento-forte);
  box-shadow: var(--rim), var(--sombra-1), inset 0 0 0 1px var(--acento-linha);
}

/* ────────────────────────────────────────────────────────────────── chips ── */

.chip {
  border-radius: var(--radius-full); height: 23px; padding: 0 10px;
  font: 600 11.5px/1 var(--font-system);
  letter-spacing: 0.01em; text-transform: none;
  background: var(--color-fill-tertiary);
  box-shadow: inset 0 0 0 1px currentColor;
  gap: 6px;
}
.chip i { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 7px currentColor; }
.chip--ok     { color: var(--positivo); background: color-mix(in srgb, var(--positivo) 13%, transparent); }
.chip--ruim   { color: var(--critico);  background: color-mix(in srgb, var(--critico) 13%, transparent); }
.chip--alerta { color: var(--atencao-texto); background: color-mix(in srgb, var(--atencao) 13%, transparent); }
.chip--info   { color: var(--acento);   background: var(--acento-suave); }
.chip--neutro { color: var(--color-label-secondary); background: var(--color-fill-tertiary); }
/* Só o vencido pulsa: se tudo pisca, nada chama atenção. */
.chip--ruim i { animation: pulso-ponto 1.7s var(--ease-in-out) infinite; }
@keyframes pulso-ponto { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.78); } }

/* ───────────────────────────────────────────────────────────────── tabelas ─ */

.tabela-rolagem { border-radius: var(--radius-md); border-color: var(--linha); background: var(--superficie-baixa); }
.cartao--liso .tabela-rolagem { border-radius: 0; border-inline: 0; border-bottom: 0; background: transparent; }
.tabela thead th {
  background: var(--superficie-baixa);
  border-bottom: 1px solid var(--acento-linha);
  color: var(--color-label-secondary);
}
.tabela tbody td { border-bottom: 1px solid var(--linha); }
.tabela tbody tr.clicavel:hover { background: var(--acento-suave); }
.tabela .principal.mono { white-space: nowrap; font-size: 13px; letter-spacing: -0.04em; }

/* ───────────────────────────────────────────────────────────────── campos ── */

.controle { border-radius: var(--radius-sm); background: var(--bg-3); border-color: var(--borda-forte); }
.controle:hover { border-color: var(--acento-linha); }
.controle:focus { border-color: var(--acento); box-shadow: var(--brilho-neon); }
.controle--prefixo .prefixo {
  background: transparent;
  border-right: 1px solid var(--linha);
  color: var(--color-label-tertiary);
  font-weight: 600;
}
.controle--prefixo:focus-within .prefixo { color: var(--acento); }
.campo__rotulo { color: var(--color-label-secondary); }
.campo__estatico { background: var(--color-fill-tertiary); border-radius: var(--radius-sm); }
.switch i { background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--linha); }
.switch input:checked + i { background: var(--positivo); box-shadow: 0 0 14px -4px var(--positivo); }
.switch i::after {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

/* ────────────────────────────────────────────────────────────────── modal ── */

.modal {
  border-radius: var(--radius-xl);
  border: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-4), 0 0 60px -30px var(--acento);
}
.modal.glass { --glass-tint: rgba(10, 17, 30, 0.94); }
[data-theme="light"] .modal.glass { --glass-tint: rgba(255,255,255,0.96); }
.modal::backdrop { background: rgba(3, 7, 15, 0.68); backdrop-filter: blur(5px) saturate(120%); }
.modal[open] { animation: entrar-modal var(--spring-duration) var(--spring); }
@keyframes entrar-modal {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.modal__topo { border-bottom: 1px solid var(--linha); background: transparent; }
.modal__titulo { font-weight: 800; letter-spacing: -0.02em; }
.modal__acoes { background: var(--color-fill-tertiary); border-top: 1px solid var(--linha); }

/* ────────────────────────────────────────────────────────── paleta ⌘K ────── */

.modal--paleta .paleta__busca { border-bottom-color: var(--linha); }
.paleta__input { font-size: 16px; }
.paleta__item { border-radius: var(--radius-sm); }
.paleta__item.sel { background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento-linha); }
.paleta__tag { border-radius: 5px; background: var(--color-fill-secondary); color: var(--acento); }
/* Cursor de terminal piscando: o aceno mais direto ao lado cyber. */
.paleta__busca::after {
  content: '_'; font: 700 16px/1 var(--font-mono); color: var(--acento);
  animation: piscar 1.1s steps(2, end) infinite; margin-left: -4px;
}
@keyframes piscar { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ────────────────────────────────────────────────────────────────── toasts ─ */

.toast {
  border-radius: var(--radius-full);
  background: var(--bg-3);
  color: var(--color-label);
  box-shadow: var(--rim), var(--sombra-3), inset 0 0 0 1px var(--linha);
  font-size: 13px;
}
.toast--ok   { color: var(--lima);     box-shadow: var(--sombra-3), inset 0 0 0 1px rgba(168,240,74,0.4), 0 0 24px -10px var(--lima); }
.toast--ruim { color: var(--vermelho); box-shadow: var(--sombra-3), inset 0 0 0 1px rgba(255,84,112,0.4), 0 0 24px -10px var(--vermelho); }
.toast--info { color: var(--acento);   box-shadow: var(--sombra-3), inset 0 0 0 1px var(--acento-linha), 0 0 24px -10px var(--acento); }

/* ──────────────────────────────────────────────────────────── medidor teto ─ */

.medidor__trilho {
  border-radius: var(--radius-full);
  background: var(--bg-0);
  border-color: var(--linha);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}
.medidor__fill {
  border-radius: var(--radius-full);
  overflow: hidden;   /* segue absolute, vindo do app.css */
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 58%, #000) 0%, var(--acento) 100%);
  box-shadow: 0 0 22px -6px var(--acento), inset 0 1px 0 rgba(255,255,255,0.28);
}
/* Faixas de risco correndo dentro da barra: lê-se "isto está em curso". */
.medidor__fill::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 22px);
  animation: correr-faixas 1.5s linear infinite;
}
@keyframes correr-faixas { to { transform: translateX(22px); } }
/* Cabeça luminosa na ponta. */
.medidor__fill::before {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--radius-full);
  background: #fff; box-shadow: 0 0 16px 3px var(--neon-forte);
}
.medidor__fill--alerta {
  background: linear-gradient(90deg, color-mix(in srgb, var(--atencao) 62%, #000) 0%, var(--atencao) 100%);
  box-shadow: 0 0 22px -6px var(--atencao);
}
.medidor__fill--ruim {
  background: linear-gradient(90deg, color-mix(in srgb, var(--critico) 62%, #000) 0%, var(--critico) 100%);
  box-shadow: 0 0 22px -6px var(--critico);
}
.medidor__valor { font-family: var(--font-mono); text-shadow: 0 0 28px rgba(34, 224, 245, 0.30); }
.medidor__marca > span { font-family: var(--font-mono); letter-spacing: 0.04em; }

.meta { border-radius: var(--radius-full); background: var(--bg-0); }
.meta__fill { border-radius: var(--radius-full); }
/* Todos derivam do token: trocar a cor de status muda a barra junto. */
.meta__fill--info   { background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 62%, #000), var(--acento)); box-shadow: 0 0 10px -2px var(--acento); }
.meta__fill--ok     { background: linear-gradient(90deg, color-mix(in srgb, var(--positivo) 62%, #000), var(--positivo)); box-shadow: 0 0 10px -2px var(--positivo); }
.meta__fill--alerta { background: linear-gradient(90deg, color-mix(in srgb, var(--atencao) 62%, #000), var(--atencao)); box-shadow: 0 0 10px -2px var(--atencao); }
.meta__fill--ruim   { background: linear-gradient(90deg, color-mix(in srgb, var(--critico) 62%, #000), var(--critico)); box-shadow: 0 0 10px -2px var(--critico); }

/* ──────────────────────────────────────────────────────── KPIs e gráficos ── */

.kpi {
  position: relative;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 60%), var(--bg-2);
  box-shadow: var(--rim), var(--sombra-1), inset 0 0 0 1px var(--linha);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  overflow: hidden;
}
/* Luz da cor da série descendo da aresta de cima — identifica sem gritar. */
.kpi::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 56px;
  background: linear-gradient(180deg, var(--c-soft, var(--acento-suave)) 0%, transparent 100%);
  pointer-events: none;
}
.kpi::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--c, var(--acento)), transparent 85%);
  opacity: 0.85;
}
.kpi:hover {
  box-shadow: var(--rim), var(--sombra-3), inset 0 0 0 1px var(--acento-linha), 0 0 26px -12px var(--acento);
  transform: translateY(-2px);
}
.kpi-value { font-family: var(--font-mono); font-weight: 700; }
.kpi-delta { border-radius: var(--radius-full); font-family: var(--font-mono); }

.mini {
  border-radius: var(--radius-sm);
  background: var(--color-fill-tertiary);
  border-color: var(--linha);
  border-left: 3px solid var(--acento-linha);
}
.mini__val { font-family: var(--font-mono); }

.lista__marca { border-radius: 10px; box-shadow: inset 0 0 0 1px currentColor; }
.lista__valor { font-family: var(--font-mono); }

.aviso { border-radius: var(--radius-md); border-left: 3px solid var(--acento); background: var(--acento-suave); }
.aviso--alerta { border-color: rgba(255,179,60,0.22); border-left-color: var(--ambar); background: rgba(255, 179, 60, 0.09); }
.aviso--alerta .ico { color: var(--atencao-texto); }
.aviso--ruim { border-color: rgba(255,84,112,0.22); border-left-color: var(--vermelho); background: rgba(255, 84, 112, 0.09); }
.aviso--ruim .ico { color: var(--vermelho); }

.chart-tip { border-radius: var(--radius-xs); font-family: var(--font-mono); box-shadow: var(--sombra-3); }

/* ─────────────────────────────────────────────────────── entrada das telas ─ */

/* Os módulos sobem em cascata, como painel ligando por seção. */
main.tela > * { animation: subir-modulo 0.46s var(--ease-emphasized) both; }
main.tela > *:nth-child(1) { animation-delay: 0ms; }
main.tela > *:nth-child(2) { animation-delay: 55ms; }
main.tela > *:nth-child(3) { animation-delay: 110ms; }
main.tela > *:nth-child(4) { animation-delay: 165ms; }
main.tela > *:nth-child(n+5) { animation-delay: 200ms; }
@keyframes subir-modulo {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ────────────────────────────────────────────────────────────── documento ── */

.doc-tela { background: var(--bg-0); }
.doc-barra { --glass-tint: rgba(8,14,26,0.86); border-bottom-color: var(--linha); }
[data-theme="light"] .doc-barra { --glass-tint: rgba(255,255,255,0.88); }
.doc-folha { border-radius: var(--radius-md); box-shadow: var(--sombra-4); }

/* ──────────────────────────────────── contraste do texto pequeno ────────── */

.chip--neutro, .campo__rotulo, .kpi-title, .mini__rot, .nav__grupo,
.cal__semana span, .sel-op__nota, .marca__sub, .medidor-mini__val, .kpi-note,
.medidor__marca > span, .bar-x, .hbar-name small, .donut-legend small,
.ring-label, .funnel-name { color: var(--color-label-secondary); }
/* charts.js escreve a cor da porcentagem no atributo style: só !important vence. */
.donut-legend b small { color: var(--color-label-secondary) !important; }

/* ──────────────────────────────────────────────────────── menos movimento ── */

@media (prefers-reduced-motion: reduce) {
  .marca:hover .marca__nome,
  .nav-item.ativo::before,
  .topo::after,
  .medidor__fill::after,
  .chip--ruim i,
  .paleta__busca::after,
  main.tela > * { animation: none; }
  main.tela > * { opacity: 1; transform: none; }
  .marca:hover .marca__nome { -webkit-text-fill-color: currentColor; background: none; }
  .btn::after { display: none; }
  .cartao, .cartao::after { transition: none; }
}

/* ==========================================================================
   Barra do topo em uma linha só
   ========================================================================== */
@media (min-width: 701px) {
  .topo { flex-wrap: nowrap; }
  .topo > div:first-child { min-width: 0; flex: 1 1 auto; }
  .topo__titulo, .topo__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topo__acoes { flex-wrap: nowrap; flex: none; }
}

/* Em tela estreita os dois rótulos da barra do teto se encontram: o traço de
   +20% continua marcado, mas sem legenda — "limite" é o número que importa. */
@media (max-width: 620px) {
  .medidor__marca--fim > span { display: none; }
  .medidor__marca > span { font-size: 9px; }
}

/* ==========================================================================
   Especificação das marcas
   Correções sobre charts.css para bater com o método de visualização: marca
   fina, ponta arredondada só na extremidade do dado, respiro na cor da
   superfície separando marcas que se tocam — nunca um contorno, que seria
   tinta sem dado.
   ========================================================================== */

/* Linha de 2px e ponto de 8px de diâmetro com anel da superfície. */
.linechart .series-line { stroke-width: 2; }
.linechart .dot { r: 4; stroke: var(--bg-2); stroke-width: 2; }
.linechart .dot:hover { r: 6; }

/* Coluna: no máximo 24px, canto de 4px só no topo, quadrada na linha de base. */
.bar {
  max-width: 24px;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.bar-group { gap: 4px; }

/* Empilhada: 2px de respiro entre segmentos, na cor da superfície. */
.bar--stack { gap: 2px; overflow: visible; }
.bar--stack > i:first-child { border-radius: 0 0 0 0; }
.bar--stack > i:last-child { border-radius: 4px 4px 0 0; }

/* Barra horizontal: mesma ponta arredondada, trilho recessivo. */
.hbar-track { height: 8px; border-radius: var(--radius-full); }
.hbar-fill { border-radius: var(--radius-full); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }

/* Waterfall: o total é neutro; ganhos e perdas usam o par de polaridade. */
.wf-bar { border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }

/* Grade recessiva e sólida — nunca tracejada. */
.linechart .grid-line { stroke: var(--viz-grid); stroke-width: 1; stroke-dasharray: none; }

/* Coluna do waterfall também obedece ao teto de 24px. */
.wf-bar { max-width: 24px; margin-inline: auto; left: 0; right: 0; }

/* Com o trilho mais fino, o nome da série pode ocupar mais coluna — nome de
   cliente e de serviço são longos e truncar é pior do que barra curta. */
.hbar-row { grid-template-columns: minmax(0, 1.9fr) 1.6fr minmax(84px, auto); }

/* Véu do KPI mais curto: identidade vem da faixa de 2px, não de tingir o
   cartão inteiro — cor demais no contêiner compete com a cor do dado. */
.kpi::before { height: 34px; }

/* ==========================================================================
   Fio interno
   Divisória de tabela, item de lista e legenda usam o traço leve; a aresta do
   painel continua com o fio cheio. Antes tudo usava o mesmo peso e o interior
   dos cartões ficava riscado.
   ========================================================================== */
.tabela tbody td,
.lista__item,
.hbar-row + .hbar-row,
.donut-legend li + li,
.sel-painel__busca,
.cal__rodape { border-color: var(--divisor); }
.tabela tbody tr:last-child td,
.lista__item:last-child { border-color: transparent; }

/* Seleção de texto e barra de rolagem na cor do sistema — detalhe que o
   navegador pinta de azul padrão se ninguém disser nada. */
::selection { background: rgba(34, 224, 245, 0.28); color: var(--color-label); }
::-webkit-scrollbar-thumb { background: var(--linha-forte); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--acento-linha); background-clip: content-box; }

/* Linha de referência do gráfico: mais presente que a grade, porque marca um
   valor que decide leitura (o zero, uma meta), não uma escala. */
.linechart .ref-line {
  stroke: var(--color-label-tertiary);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
.linechart .ref-label {
  font: 700 10px/1 var(--font-mono);
  fill: var(--color-label-secondary);
}

/* ==========================================================================
   Densidade
   A escala anterior só ficava confortável com o navegador em 80%. Aqui o
   tamanho de tela cheia já é esse: tipografia a ~0,85 (nos tokens) e alturas
   de componente a ~0,8, que é de onde vinha a maior parte do excesso.
   ========================================================================== */

main.tela { padding: 16px 18px 90px; gap: 14px; }
.grade { gap: 12px; }
.cartao { padding: var(--pad-cartao); }
.cartao__topo { margin-bottom: 12px; gap: 10px; }

.topo { padding: 7px 18px; gap: 12px; }
.lateral { padding: 12px 8px; gap: 6px; }
.marca { padding: 6px 6px 12px; gap: 8px; }
.marca__sinal { width: 32px; height: 32px; border-radius: 9px; }
.nav-item { min-height: 33px; padding: 0 10px; gap: 8px; }
.nav__grupo { padding: 12px 10px 2px; }
.medidor-mini { padding: 10px; }

.controle, .sel__botao, .dt__caixa { height: var(--alt-controle); }
.controle--prefixo input, .dt__texto { height: calc(var(--alt-controle) - 2px); }
.controle--area { height: auto; min-height: 68px; padding: 8px 10px; }
.campo__estatico { min-height: var(--alt-controle); }
.controle { padding: 0 10px; }

.btn { height: var(--alt-botao); padding: 0 13px; gap: 6px; }
.btn--pequeno { height: 27px; padding: 0 10px; gap: 5px; }
.icone-btn { width: 30px; height: 30px; }
.busca-atalho { height: 31px; }
.seg { padding: 2px; }
.seg button { height: 26px; padding: 0 11px; }
.chip { height: 20px; padding: 0 9px; font-size: 11px; }

.tabela thead th { padding: 7px 11px; }
.tabela tbody td { padding: 9px 11px; }
.lista__item { padding: 9px 3px; gap: 10px; }
.lista__marca { width: 28px; height: 28px; border-radius: 8px; }
.mini { padding: 10px 11px; gap: 3px; }
.linha-minis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.kpi { padding: 12px 13px; gap: 4px; }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px; }
.aviso { padding: 11px 13px; gap: 10px; }

.medidor__valor { font-size: 27px; }
.medidor__trilho { height: 26px; }
.medidor__escala { padding-top: 17px; }
.medidor__marca { top: 15px; }

.modal__topo { padding: 15px 16px 12px; }
.modal__corpo { padding: 16px; }
.modal__acoes { padding: 11px 16px; }
.grade-form { gap: 12px; }

.switch i { width: 40px; height: 24px; }
.switch i::after { width: 20px; height: 20px; }
.switch input:checked + i::after { transform: translateX(16px); }

.cal__dia { height: 30px; }
.sel-op { min-height: 32px; padding: 6px 8px; }

/* Ponteiro grosso pede alvo grande: no toque os controles voltam a crescer. */
@media (pointer: coarse) {
  :root { --alt-controle: 42px; --alt-botao: 40px; }
  .icone-btn { width: 40px; height: 40px; }
  .btn--pequeno { height: 34px; }
  .cal__dia { height: 36px; }
  .sel-op { min-height: 40px; }
}

/* ==========================================================================
   Alinhamento dos formulários
   Dois defeitos reais: campos com dica e sem dica esticavam diferente dentro
   da mesma linha da grade, empurrando o controle para baixo; e o switch não
   tinha linha de rótulo, então começava no topo enquanto os vizinhos
   começavam abaixo do rótulo deles.
   ========================================================================== */

.grade-form { align-items: start; }
.campo {
  align-content: start;      /* não distribui a sobra entre rótulo e controle */
  gap: 5px;
}
.campo__rotulo {
  min-height: var(--alt-rotulo);
  display: flex; align-items: flex-end;
}
/* Rótulo do switch é vazio e só existe para ocupar a mesma linha dos vizinhos. */
.campo__rotulo--fantasma { visibility: hidden; }
.campo--switch { justify-content: start; }
.campo--switch .switch { min-height: var(--alt-controle); gap: 9px; }
.campo__dica { margin-top: 1px; line-height: 1.35; }

/* O valor em dinheiro alinha à direita dentro do campo, como na tabela. */
.controle--prefixo input { text-align: right; }

/* O texto do atalho de busca ficou em 4,03:1 depois da mudança de densidade —
   é rótulo de controle, precisa fechar 4,5. */
.busca-atalho { color: var(--color-label-secondary); }

/* ==========================================================================
   Ranking infográfico
   Posição em destaque, trilho cheio mostrando o quanto falta para o líder e o
   valor num selo colado na ponta da barra. Selo curto fica dentro; barra curta
   empurra o selo para fora — rótulo em marca nunca é cortado.
   ========================================================================== */

.rank { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.rank__linha {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  align-items: center; gap: 10px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--duration-slow) var(--ease-out) var(--reveal-delay),
              transform var(--duration-slow) var(--ease-emphasized) var(--reveal-delay);
}
.chart.in-view .rank__linha { opacity: 1; transform: none; }

.rank__n {
  font: 800 21px/1 var(--font-system);
  letter-spacing: -0.04em;
  color: var(--cor);
  text-align: right;
  font-variant-numeric: lining-nums;
}
.rank__corpo { min-width: 0; display: grid; gap: 4px; }
.rank__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rank__nome {
  font: 600 13px/1.3 var(--font-system);
  color: var(--color-label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank__share { font: 700 11px/1 var(--font-system); color: var(--color-label-secondary); flex: none; }
.rank__sub { font: var(--text-caption2); color: var(--color-label-secondary); }

.rank__trilho {
  position: relative;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--viz-track);
  overflow: visible;
}
.rank__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0; border-radius: var(--radius-full);
  background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: width var(--duration-chart) var(--spring-subtle) var(--reveal-delay);
}
.chart.in-view .rank__fill { width: calc(var(--v) * 1%); }

.rank__selo {
  position: absolute; top: 50%;
  left: calc(var(--v) * 1%);
  transform: translate(8px, -50%);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: var(--color-fill-tertiary);
  color: var(--color-label);
  font: 700 11.5px/1 var(--font-system);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out)
              calc(var(--reveal-delay) + var(--duration-chart) * 0.7);
}
/* Barra longa: o selo entra nela, com o texto invertido sobre a cor cheia. */
.rank__selo--dentro {
  left: auto; right: calc(100% - var(--v) * 1%);
  transform: translate(-8px, -50%);
  background: transparent; color: #04141b;
}
[data-theme="light"] .rank__selo--dentro { color: #ffffff; }
.chart.in-view .rank__selo { opacity: 1; }

/* ==========================================================================
   Funil infográfico
   Cone afunilando com os rótulos ao lado, ligados por um fio. A cor é uma
   rampa de um matiz só: etapa tem ordem, e a ordem fica visível na cor.
   ========================================================================== */

.funil2 { display: flex; align-items: flex-start; gap: 0; min-width: 0; }
.funil2__cone { flex: 0 0 auto; width: 52%; max-width: 210px; overflow: visible; }
.funil2__capa { opacity: 0.55; }

.funil2__banda {
  opacity: 0; transform-origin: center top; transform: scaleY(0.4);
  transition: opacity var(--duration-slow) var(--ease-out) var(--reveal-delay),
              transform var(--duration-chart) var(--spring-subtle) var(--reveal-delay);
}
.chart.in-view .funil2__banda { opacity: 1; transform: none; }

.funil2__valor {
  font: 700 12px/1 var(--font-system);
  fill: #04141b;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out)
              calc(var(--reveal-delay) + var(--duration-chart) * 0.6);
}
[data-theme="light"] .funil2__valor { fill: #ffffff; }
.funil2__valor--claro { fill: #eafcff; }
.chart.in-view .funil2__valor { opacity: 1; }

.funil2__fio {
  stroke: var(--linha-forte); stroke-width: 1; stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out)
              calc(var(--reveal-delay) + var(--duration-chart) * 0.75);
}
.chart.in-view .funil2__fio { opacity: 1; }

.funil2__lados { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.funil2__lado {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--duration-slow) var(--ease-out) calc(var(--reveal-delay) + 120ms),
              transform var(--duration-slow) var(--ease-emphasized) calc(var(--reveal-delay) + 120ms);
}
.chart.in-view .funil2__lado { opacity: 1; transform: none; }
.funil2__ponto {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  border: 2px solid var(--cor);
  box-shadow: 0 0 8px -2px var(--cor);
}
.funil2__texto { min-width: 0; display: grid; gap: 1px; }
.funil2__nome {
  font: 700 12px/1.25 var(--font-system);
  color: var(--cor);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.funil2__meta { font: var(--text-caption2); color: var(--color-label-secondary); }
.funil2__meta b { color: var(--critico); font-weight: 700; }

@media (max-width: 520px) {
  .funil2__cone { width: 44%; }
  .funil2__nome { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .rank__linha, .rank__fill, .rank__selo,
  .funil2__banda, .funil2__valor, .funil2__fio, .funil2__lado { transition: none; opacity: 1; transform: none; }
  .chart .rank__fill { width: calc(var(--v) * 1%); }
}

/* ==========================================================================
   Linha HUD
   Dentro do SVG só há caminho, e o traço usa non-scaling-stroke: o desenho
   estica para preencher a largura, mas a espessura é medida em pixel de tela.
   Rótulo, ponto e chamada são HTML posicionados em porcentagem — texto dentro
   de um SVG esticado sai deformado, e era daí que vinha o borrão.
   ========================================================================== */

.hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: var(--h, 230px) auto;
  gap: 4px 8px;
}

.hud__eixoY { position: relative; width: 46px; }
.hud__eixoY span {
  position: absolute; right: 0; top: var(--t); transform: translateY(-50%);
  font: 600 10px/1 var(--font-system);
  color: var(--color-label-secondary);
  white-space: nowrap;
}

.hud__plot {
  position: relative;
  border-left: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.hud__plot > svg { display: block; width: 100%; height: 100%; overflow: visible; }

.hud__grade { stroke: var(--viz-grid); stroke-width: 1; }
.hud__ref { stroke: var(--color-label-tertiary); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hud__refRot {
  position: absolute; right: 4px; top: var(--t); transform: translateY(-140%);
  font: 700 9.5px/1 var(--font-system);
  color: var(--color-label-secondary);
  letter-spacing: 0.06em;
}

.hud__area { opacity: 0; transition: opacity var(--duration-slow) var(--ease-out) calc(var(--reveal-delay) + 260ms); }
.chart.in-view .hud__area { opacity: 1; }

.hud__linha {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--acento) 60%, transparent));
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  transition: stroke-dashoffset var(--duration-chart) var(--ease-out) var(--reveal-delay);
}
.chart.in-view .hud__linha { stroke-dashoffset: 0; }

/* Ponto em HTML: círculo continua círculo por mais que o plot estique. */
.hud__ponto {
  position: absolute; left: var(--e); top: var(--t);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 2px var(--bg-2);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out) calc(var(--reveal-delay) + var(--duration-chart) * 0.55 + var(--i) * 18ms),
              transform var(--spring-fast-duration) var(--spring-fast);
  cursor: default;
}
.chart.in-view .hud__ponto { opacity: 1; }
.hud__ponto:hover { transform: scale(1.6); }

/* Alvo e chamada no ponto que decide a leitura. */
.hud__alvo {
  position: absolute; left: var(--e); top: var(--t);
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  border: 2px solid var(--acento-forte);
  box-shadow: 0 0 14px -2px var(--acento);
  animation: alvo-pulsa 2.4s var(--ease-in-out) infinite;
}
@keyframes alvo-pulsa { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.28); opacity: 0.55; } }

.hud__chamada {
  position: absolute; left: var(--e); top: var(--t);
  transform: translate(-50%, calc(-100% - 16px));
  display: grid; gap: 1px;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--acento-linha);
  box-shadow: var(--sombra-2), 0 0 18px -8px var(--acento);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out) calc(var(--reveal-delay) + var(--duration-chart) * 0.8);
}
.chart.in-view .hud__chamada { opacity: 1; }
.hud__chamada b { font: 700 12px/1.2 var(--font-system); color: var(--acento-forte); }
.hud__chamada span { font: var(--text-caption2); color: var(--color-label-secondary); }
/* Perto das bordas a chamada encosta e é ancorada para dentro. */
.hud__chamada[style*="--e:0"] { transform: translate(0, calc(-100% - 16px)); }

.hud__eixoX { position: relative; grid-column: 2; height: 14px; }
.hud__eixoX span {
  position: absolute; left: var(--e); transform: translateX(-50%);
  font: 600 10px/1 var(--font-system);
  color: var(--color-label-secondary);
  white-space: nowrap;
}

/* ==========================================================================
   Cascata HUD
   Colunas em HTML: crescem por altura, sem escala não uniforme, sem borrão.
   O fio tracejado leva o nível de fechamento de uma coluna à seguinte, que é
   o que faz a cascata ser lida como saldo correndo.
   ========================================================================== */

.casc {
  position: relative;
  display: flex; align-items: flex-end; gap: 6px;
  height: var(--h, 250px);
  padding-top: 20px;
}
.casc__base {
  position: absolute; left: 0; right: 0; top: var(--t);
  height: 1px; background: var(--linha-forte);
}
.casc__col { position: relative; flex: 1; height: 100%; min-width: 0; }

.casc__barra {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--base) * 1%);
  width: 100%; max-width: 26px;
  height: 0;
  border-radius: 4px;
  background: var(--grad-neutro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: height var(--duration-chart) var(--spring-subtle) calc(var(--reveal-delay) + var(--i) * 60ms);
}
.chart.in-view .casc__barra { height: calc(var(--alt) * 1%); }
.casc__col--pos .casc__barra { background: var(--grad-pos); box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 0 16px -6px var(--positivo); }
.casc__col--neg .casc__barra { background: var(--grad-neg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 0 16px -6px var(--critico); }
.casc__col--neutro .casc__barra { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 16px -8px var(--viz-neutro); }

.casc__valor {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc((var(--base) + var(--alt)) * 1% + 5px);
  font: 700 10.5px/1 var(--font-system);
  color: var(--color-label);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out)
              calc(var(--reveal-delay) + var(--i) * 60ms + var(--duration-chart) * 0.7);
}
.chart.in-view .casc__valor { opacity: 1; }
.casc__col--pos .casc__valor { color: var(--positivo); }
.casc__col--neg .casc__valor { color: var(--critico); }

.casc__fio {
  position: absolute; left: 50%; right: -50%; top: var(--t);
  height: 0; border-top: 1px dashed var(--color-label-tertiary);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out)
              calc(var(--reveal-delay) + var(--i) * 60ms + var(--duration-chart) * 0.8);
}
.chart.in-view .casc__fio { opacity: 1; }

.casc__rot {
  position: absolute; left: 0; right: 0; bottom: -17px;
  text-align: center;
  font: var(--text-caption2);
  color: var(--color-label-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.casc { padding-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  .hud__linha, .hud__area, .hud__ponto, .hud__chamada,
  .casc__barra, .casc__valor, .casc__fio { transition: none; opacity: 1; }
  .hud__linha { stroke-dashoffset: 0; }
  .hud__alvo { animation: none; }
  .chart .casc__barra { height: calc(var(--alt) * 1%); }
}