/* ==========================================================================
   Painel Filo Rosso — estilos
   ========================================================================== */
:root {
  color-scheme: light;
  /* vermelho da marca Filo Rosso (#EC3237) e seus tons */
  --vermelho-rgb: 236, 50, 55;
  --vermelho-900: #5c0b0e;
  --vermelho-800: #8a1217;
  --vermelho-700: #b0191f;
  --vermelho-600: #d4232a;
  --vermelho: #ec3237;
  --vermelho-400: #f0535a;
  --vermelho-300: #f67c81;
  --vermelho-200: #fbb9bc;
  --vermelho-100: #ffe3e4;
  --vermelho-50: #fff4f4;

  --tinta-900: #15161b;
  --tinta-700: #373942;
  --tinta-600: #4f515b;
  --tinta-500: #696b76;
  --tinta-400: #8c8e99;
  --tinta-300: #b7b9c2;
  --tinta-200: #dbdce2;
  --tinta-150: #e5e6eb;
  --tinta-100: #edeef2;
  --tinta-50: #f5f6f8;

  --fundo: #f2f3f6;
  --superficie: #ffffff;
  --borda: rgba(16, 17, 22, .075);
  --topo-fundo: rgba(255, 255, 255, .84);
  --grade-fundo: rgba(16, 17, 22, .035);
  --brilho: rgba(255, 255, 255, .7);

  --bom: #0e8a16;
  --bom-fundo: #e7f6e8;
  --atencao: #a86400;
  --atencao-fundo: #fff4dc;
  --atencao-borda: #f6dfa4;
  --atencao-texto: #6d4b00;
  --critico: #c62828;
  --critico-fundo: #fdeaea;
  --critico-borda: #f3c2c2;
  --critico-texto: #8a1c1c;
  --info: #2459c4;
  --info-fundo: #e8effc;
  --roxo: #5b48c8;
  --roxo-fundo: #eeebfb;
  --alterada-fundo: #fff8e1;
  --alterada-borda: #f1c75b;
  --marca-texto: #fff1b8;

  --raio-g: 16px;
  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(16, 17, 22, .04), 0 8px 24px rgba(16, 17, 22, .05);
  --sombra-forte: 0 18px 48px rgba(16, 17, 22, .18);
  --brilho-vermelho: 0 10px 28px rgba(var(--vermelho-rgb), .30);
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fonte-display: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --largura-menu: 252px;
  --altura-topo: 68px;
  --altura-ticker: 0px;
}

/* modo escuro: mesmos papéis, tons escolhidos para fundo escuro */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --vermelho-900: #ffc2c4;
  --vermelho-800: #ff9a9e;
  --vermelho-700: #ff6f74;
  --vermelho-600: #e1262d;
  --vermelho: #ef3b40;
  --vermelho-400: #f25a60;
  --vermelho-300: #c9343a;
  --vermelho-200: rgba(var(--vermelho-rgb), .36);
  --vermelho-100: rgba(var(--vermelho-rgb), .17);
  --vermelho-50: rgba(var(--vermelho-rgb), .09);

  --tinta-900: #f1f2f6;
  --tinta-700: #cdd0db;
  --tinta-600: #b2b5c2;
  --tinta-500: #9295a5;
  --tinta-400: #6f7283;
  --tinta-300: #4a4d5b;
  --tinta-200: #353744;
  --tinta-150: #2a2b35;
  --tinta-100: #20212a;
  --tinta-50: #181920;

  --fundo: #0a0b0e;
  --superficie: #121318;
  --borda: rgba(255, 255, 255, .065);
  --topo-fundo: rgba(12, 13, 17, .80);
  --grade-fundo: rgba(255, 255, 255, .03);
  --brilho: rgba(255, 255, 255, .07);

  --bom: #39d17e;
  --bom-fundo: rgba(57, 209, 126, .12);
  --atencao: #f3b545;
  --atencao-fundo: rgba(243, 181, 69, .12);
  --atencao-borda: rgba(243, 181, 69, .3);
  --atencao-texto: #f6c870;
  --critico: #ff5d67;
  --critico-fundo: rgba(255, 93, 103, .12);
  --critico-borda: rgba(255, 93, 103, .3);
  --critico-texto: #ff9ca3;
  --info: #6da8ff;
  --info-fundo: rgba(109, 168, 255, .13);
  --roxo: #a89cff;
  --roxo-fundo: rgba(168, 156, 255, .13);
  --alterada-fundo: rgba(243, 181, 69, .14);
  --alterada-borda: #b9862a;
  --marca-texto: rgba(243, 181, 69, .35);

  --sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 28px rgba(0, 0, 0, .35);
  --sombra-forte: 0 22px 60px rgba(0, 0, 0, .65);
  --brilho-vermelho: 0 10px 30px rgba(var(--vermelho-rgb), .35);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--fonte);
  font-size: 14px;
  color: var(--tinta-900);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
svg.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------- estrutura */
.app { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--largura-menu); z-index: 40;
  display: flex; flex-direction: column;
  background: linear-gradient(185deg, #c0102b 0%, #a20c24 45%, #820a1d 100%);
  color: #fff;
  transition: width .22s ease, transform .22s ease;
}
.sidebar::after { /* fio decorativo */
  content: ""; position: absolute; inset: auto 0 0 0; height: 220px; pointer-events: none; opacity: .14;
  background:
    radial-gradient(120% 60% at 0% 100%, transparent 58%, #fff 58.4%, transparent 59%),
    radial-gradient(120% 60% at 0% 100%, transparent 66%, #fff 66.4%, transparent 67%),
    radial-gradient(120% 60% at 0% 100%, transparent 74%, #fff 74.4%, transparent 75%);
}
.marca { display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; }
.marca-logo { width: 42px; height: 42px; flex: none; border-radius: 11px; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; overflow: hidden; }
.marca-texto strong { font-size: 16px; font-weight: 800; letter-spacing: .14em; }
.marca-texto span { font-size: 11.5px; opacity: .78; letter-spacing: .02em; margin-top: 3px; }

.menu { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.menu-secao { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; padding: 16px 12px 8px; white-space: nowrap; }
.menu a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
  border-radius: 10px; color: rgba(255, 255, 255, .86); font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s;
}
.menu a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.menu a.ativo { background: var(--superficie); color: var(--vermelho-700); font-weight: 650; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.menu a .ic { width: 19px; height: 19px; }

.sidebar-rodape { padding: 12px 14px 16px; border-top: 1px solid rgba(255, 255, 255, .14); position: relative; z-index: 1; }
.status-base { display: flex; align-items: center; gap: 9px; font-size: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .14); white-space: nowrap; overflow: hidden; }
.status-base .ponto { width: 8px; height: 8px; border-radius: 50%; background: #ffb3bf; flex: none; }
.status-base.ok .ponto { background: #6fe08a; box-shadow: 0 0 0 3px rgba(111, 224, 138, .25); }
.status-base.demo .ponto { background: #ffd166; box-shadow: 0 0 0 3px rgba(255, 209, 102, .25); }
.btn-recolher { margin-top: 10px; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; color: rgba(255, 255, 255, .75); border-radius: 10px; font-size: 12.5px; white-space: nowrap; }
.btn-recolher:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.principal { flex: 1; min-width: 0; margin-left: var(--largura-menu); transition: margin-left .22s ease; display: flex; flex-direction: column; }

body.menu-recolhido { --largura-menu: 76px; }
body.menu-recolhido .marca-texto, body.menu-recolhido .menu a span, body.menu-recolhido .menu-secao,
body.menu-recolhido .status-base span:not(.ponto), body.menu-recolhido .btn-recolher span { display: none; }
body.menu-recolhido .menu a { justify-content: center; padding: 11px; }
body.menu-recolhido .marca { justify-content: center; padding-left: 0; padding-right: 0; }
body.menu-recolhido .menu-secao { display: block; height: 14px; padding: 0; }
body.menu-recolhido .status-base, body.menu-recolhido .btn-recolher { justify-content: center; }
body.menu-recolhido .btn-recolher .ic { transform: rotate(180deg); }

/* ------------------------------------------------------------- topo */
.topo {
  position: sticky; top: 0; z-index: 30; height: var(--altura-topo);
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
  background: var(--topo-fundo); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--tinta-150);
}
.topo-titulo { min-width: 0; flex: 1; }
.topo-titulo h1 { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-titulo p { margin: 2px 0 0; font-size: 12.5px; color: var(--tinta-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-acoes { display: flex; align-items: center; gap: 10px; }

.ao-vivo { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--tinta-50); border: 1px solid var(--tinta-150); font-size: 12.5px; color: var(--tinta-600); white-space: nowrap; }
.ao-vivo .pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-300); position: relative; }
.ao-vivo.ligado .pulso { background: #18a34a; }
.ao-vivo.ligado .pulso::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #18a34a; animation: pulso 1.8s ease-out infinite; }
.ao-vivo.ligado .ao-vivo-texto { color: #12803a; font-weight: 650; }
.ao-vivo.piscar { animation: piscar .9s ease; }
.ao-vivo-hora { color: var(--tinta-500); font-variant-numeric: tabular-nums; }
@keyframes pulso { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes piscar { 0% { background: #dff5e5; } 100% { background: var(--tinta-50); } }

.chave-demo { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--tinta-150); font-size: 12.5px; font-weight: 550; color: var(--tinta-700); cursor: pointer; user-select: none; white-space: nowrap; }
.chave-demo input { position: absolute; opacity: 0; pointer-events: none; }
.trilho { width: 34px; height: 20px; border-radius: 999px; background: var(--tinta-200); position: relative; transition: background .18s; }
.bolinha { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--superficie); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s; }
.chave-demo input:checked + .trilho { background: var(--vermelho); }
.chave-demo input:checked + .trilho .bolinha { transform: translateX(14px); }
.chave-demo input:focus-visible + .trilho { outline: 2px solid var(--vermelho-400); outline-offset: 2px; }

.btn-icone { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--tinta-150); background: var(--superficie); color: var(--tinta-700); transition: background .15s, border-color .15s; }
.btn-icone:hover { background: var(--tinta-50); border-color: var(--tinta-200); }
.btn-icone.girando .ic { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.so-mobile { display: none; }

.aviso { margin: 18px 28px 0; padding: 12px 16px; border-radius: var(--raio); display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.45; }
.aviso .ic { width: 20px; height: 20px; }
.aviso.demo { background: var(--atencao-fundo); border: 1px solid var(--atencao-borda); color: var(--atencao-texto); }
.aviso.vazio { background: var(--superficie); border: 1px dashed var(--vermelho-200); color: var(--tinta-700); }
.aviso.vazio .ic { color: var(--vermelho); }
.aviso.erro { background: var(--critico-fundo); border: 1px solid var(--critico-borda); color: var(--critico-texto); }
.aviso button { margin-left: auto; white-space: nowrap; }

.conteudo { padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ------------------------------------------------------------- grade */
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.c-12 { grid-column: span 12; } .c-8 { grid-column: span 8; } .c-7 { grid-column: span 7; }
.c-6 { grid-column: span 6; } .c-5 { grid-column: span 5; } .c-4 { grid-column: span 4; } .c-3 { grid-column: span 3; }

/* ------------------------------------------------------------- cartões */
.card { background: var(--superficie); border-radius: var(--raio-g); box-shadow: var(--sombra); border: 1px solid var(--tinta-100); min-width: 0; display: flex; flex-direction: column; }
.card-topo { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 4px; }
.card-topo h3 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; }
.card-topo p { margin: 3px 0 0; font-size: 12.5px; color: var(--tinta-500); }
.card-topo p:empty { display: none; }
.card-topo .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.card-corpo { padding: 12px 20px 18px; flex: 1; min-width: 0; }
.card-corpo.sem-margem { padding: 6px 0 0; }

/* ------------------------------------------------------------- KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpis.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { position: relative; background: var(--superficie); border: 1px solid var(--tinta-100); border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 16px 18px 15px; min-width: 0; overflow: hidden; }
.kpi-topo { display: flex; align-items: center; gap: 10px; color: var(--tinta-500); font-size: 12.5px; font-weight: 550; }
.kpi-icone { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--vermelho-50); color: var(--vermelho); flex: none; }
.kpi-icone .ic { width: 16px; height: 16px; }
.kpi-valor { margin-top: 12px; font-size: 25px; font-weight: 750; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub { margin-top: 6px; font-size: 12px; color: var(--tinta-500); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 18px; }
.kpi.destaque { background: linear-gradient(140deg, #c8102e 0%, #9e0b22 100%); border-color: transparent; color: #fff; }
.kpi.destaque .kpi-topo, .kpi.destaque .kpi-sub { color: rgba(255, 255, 255, .82); }
.kpi.destaque .kpi-icone { background: rgba(255, 255, 255, .16); color: #fff; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; padding: 1px 7px 1px 5px; border-radius: 999px; font-size: 11.5px; }
.delta .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.delta.sobe { color: var(--bom); background: var(--bom-fundo); }
.delta.desce { color: var(--critico); background: var(--critico-fundo); }
.delta.neutro { color: var(--tinta-600); background: var(--tinta-100); }
.kpi.destaque .delta { background: rgba(255, 255, 255, .18); color: #fff; }

/* herói (meta do mês) */
.heroi { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.heroi-rotulo { font-size: 13px; color: var(--tinta-500); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.heroi-valor { font-size: 38px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.heroi-linha { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-500); }
.heroi-linha strong { display: block; color: var(--tinta-900); font-size: 15px; font-weight: 700; margin-top: 2px; }

.medidor { display: flex; flex-direction: column; gap: 8px; }
.medidor-barra { position: relative; height: 10px; border-radius: 999px; background: var(--tinta-100); overflow: visible; }
.medidor-preenchido { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--vermelho); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.medidor-fantasma { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--vermelho-200); opacity: .7; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.medidor-projecao { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--tinta-700); border-radius: 2px; }
.medidor-legenda { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--tinta-500); gap: 6px 14px; }
.medidor-legenda > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.situacao { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; font-size: 12px; padding: 3px 9px 3px 7px; border-radius: 999px; white-space: nowrap; }
.situacao .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.situacao.bom { color: var(--bom); background: var(--bom-fundo); }
.situacao.atencao { color: var(--atencao); background: var(--atencao-fundo); }
.situacao.critico { color: var(--critico); background: var(--critico-fundo); }
.situacao.neutro { color: var(--tinta-600); background: var(--tinta-100); }

/* ------------------------------------------------------------- filtros */
.barra-filtros { background: var(--superficie); border: 1px solid var(--tinta-100); border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.filtros-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filtros-linha .espaco { flex: 1; }
.btn.filtros-toggle { display: none; }
.campo-data { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--tinta-150); border-radius: 10px; background: var(--superficie); font-size: 13px; color: var(--tinta-600); }
.campo-data input { border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--tinta-900); width: 124px; }
.campo-data:focus-within { border-color: var(--vermelho-400); box-shadow: 0 0 0 3px var(--vermelho-100); }

.segmentado { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--tinta-100); gap: 2px; flex-wrap: wrap; }
.segmentado button { border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--tinta-600); white-space: nowrap; }
.segmentado button:hover { color: var(--tinta-900); }
.segmentado button.ativo { background: var(--superficie); color: var(--vermelho-700); box-shadow: 0 1px 3px rgba(16, 17, 20, .12); }

.multi { position: relative; }
.multi-botao { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--tinta-150); border-radius: 10px; background: var(--superficie); font-size: 13px; color: var(--tinta-700); white-space: nowrap; max-width: 260px; }
.multi-botao:hover { border-color: var(--tinta-300); }
.multi-botao .rotulo { color: var(--tinta-500); }
.multi-botao .valor { font-weight: 600; color: var(--tinta-900); overflow: hidden; text-overflow: ellipsis; }
.multi-botao .contador { background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.multi-botao .ic { width: 15px; height: 15px; color: var(--tinta-400); }
.multi.aberto .multi-botao, .multi.tem-selecao .multi-botao { border-color: var(--vermelho-400); }
.multi.tem-selecao .multi-botao { background: var(--vermelho-50); }
.multi-painel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 300px; background: var(--superficie); border: 1px solid var(--tinta-150); border-radius: 14px; box-shadow: var(--sombra-forte); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.multi-painel input[type=search] { width: 100%; height: 36px; border: 1px solid var(--tinta-150); border-radius: 9px; padding: 0 10px; outline: 0; font-size: 13px; }
.multi-painel input[type=search]:focus { border-color: var(--vermelho-400); box-shadow: 0 0 0 3px var(--vermelho-100); }
.multi-lista { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; }
.multi-lista label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.multi-lista label:hover { background: var(--tinta-50); }
.multi-lista input { accent-color: var(--vermelho); width: 15px; height: 15px; margin: 0; }
.multi-lista .vazio-lista { padding: 14px 8px; color: var(--tinta-500); font-size: 12.5px; text-align: center; }
.multi-rodape { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--tinta-100); padding-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--vermelho-50); border: 1px solid var(--vermelho-100); color: var(--vermelho-700); font-size: 12px; font-weight: 600; }
.chip small { font-weight: 500; color: var(--tinta-500); }
.chip button { width: 20px; height: 20px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--vermelho-700); }
.chip button:hover { background: var(--vermelho-100); }
.chip .ic { width: 12px; height: 12px; stroke-width: 2.6; }

/* ------------------------------------------------------------- botões */
.btn { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--tinta-150); background: var(--superficie); font-size: 13px; font-weight: 600; color: var(--tinta-700); white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--tinta-50); border-color: var(--tinta-200); }
.btn .ic { width: 16px; height: 16px; }
.btn.primario { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn.primario:hover { background: var(--vermelho-600); }
.btn.fantasma { border-color: transparent; background: transparent; color: var(--tinta-600); }
.btn.fantasma:hover { background: var(--tinta-100); color: var(--tinta-900); }
.btn.pequeno { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.link { border: 0; background: none; padding: 0; color: var(--vermelho); font-weight: 600; font-size: 12.5px; }
.link:hover { text-decoration: underline; }

/* ------------------------------------------------------------- abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--tinta-150); overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button { position: relative; border: 0; background: none; height: 44px; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--tinta-500); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.abas button .ic { width: 16px; height: 16px; }
.abas button:hover { color: var(--tinta-900); }
.abas button.ativo { color: var(--vermelho-700); }
.abas button.ativo::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--vermelho); }
.abas .badge-n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--tinta-100); color: var(--tinta-600); }
.abas button.ativo .badge-n { background: var(--vermelho-100); color: var(--vermelho-700); }

/* ------------------------------------------------------------- gráficos */
.grafico { position: relative; width: 100%; height: 320px; }
.grafico.alto { height: 400px; }
.grafico.baixo { height: 250px; }
.grafico-vazio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--tinta-500); font-size: 13px; padding: 20px; background: repeating-linear-gradient(0deg, transparent 0 47px, var(--tinta-100) 47px 48px); border-radius: 10px; }
.grafico-vazio .ic { width: 34px; height: 34px; color: var(--tinta-300); stroke-width: 1.5; padding: 0; }
.grafico-vazio .icone-bola { width: 58px; height: 58px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; box-shadow: 0 0 0 8px var(--tinta-50); }
.grafico-vazio strong { color: var(--tinta-700); font-size: 13.5px; }
.legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--tinta-600); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legenda i.linha { height: 3px; border-radius: 2px; width: 16px; }

/* ------------------------------------------------------------- tabelas */
.tabela-ferramentas { display: flex; align-items: center; gap: 10px; padding: 0 20px 12px; flex-wrap: wrap; }
.busca { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.busca .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tinta-400); }
.busca input { width: 100%; height: 36px; border: 1px solid var(--tinta-150); border-radius: 10px; padding: 0 12px 0 34px; outline: 0; font-size: 13px; background: var(--superficie); }
.busca input:focus { border-color: var(--vermelho-400); box-shadow: 0 0 0 3px var(--vermelho-100); }
.tabela-info { font-size: 12.5px; color: var(--tinta-500); margin-left: auto; }
.tabela-rolagem { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.tabela th { position: sticky; top: 0; background: var(--tinta-50); color: var(--tinta-500); font-weight: 650; font-size: 11px; line-height: 1.3; text-transform: uppercase; letter-spacing: .03em; text-align: left; vertical-align: bottom; padding: 10px 10px; border-top: 1px solid var(--tinta-100); border-bottom: 1px solid var(--tinta-150); user-select: none; }
.tabela th.ordenavel { cursor: pointer; }
.tabela th.ordenavel:hover { color: var(--tinta-900); }
.tabela th .seta { display: inline-block; width: 10px; margin-left: 4px; opacity: .35; }
.tabela th.ordenado { color: var(--vermelho-700); }
.tabela th.ordenado .seta { opacity: 1; }
.tabela td { padding: 11px 10px; border-bottom: 1px solid var(--tinta-100); white-space: nowrap; }
.tabela td.quebra-p { white-space: normal; min-width: 100px; }
.tabela td.quebra { white-space: normal; min-width: 135px; }
.tabela th:first-child, .tabela td:first-child { padding-left: 18px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 18px; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody tr { transition: background .12s; }
.tabela tbody tr:hover { background: var(--vermelho-50); }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tfoot td { font-weight: 700; background: var(--tinta-50); border-bottom: 0; }
.tabela .forte { font-weight: 650; }
.tabela .suave { color: var(--tinta-500); }
.tabela .rank { color: var(--tinta-400); font-weight: 600; width: 36px; }
.tabela-vazia td { text-align: center; color: var(--tinta-500); padding: 42px 20px !important; white-space: normal; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px 14px; font-size: 12.5px; color: var(--tinta-500); flex-wrap: wrap; }
.paginacao .botoes { display: flex; gap: 6px; align-items: center; }

.barra-dado { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.barra-dado .trilho-b { flex: 1; height: 6px; border-radius: 999px; background: var(--tinta-100); overflow: hidden; min-width: 60px; }
.barra-dado .trilho-b i { display: block; height: 100%; border-radius: 999px; background: var(--vermelho); }
.barra-dado span { font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; font-size: 12px; color: var(--tinta-600); }

.amostra-cor { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 8px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.curva { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.curva.A { background: var(--vermelho); color: #fff; }
.curva.B { background: var(--vermelho-100); color: var(--vermelho-700); }
.curva.C { background: var(--tinta-100); color: var(--tinta-600); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.aberto { background: var(--tinta-100); color: var(--tinta-700); }
.badge.producao { background: var(--info-fundo); color: var(--info); }
.badge.parcial { background: var(--roxo-fundo); color: var(--roxo); }
.badge.faturado { background: var(--bom-fundo); color: var(--bom); }
.badge.cancelado { background: var(--critico-fundo); color: var(--critico); }
.badge.outro { background: var(--atencao-fundo); color: var(--atencao); }

.progresso { display: flex; align-items: center; gap: 6px; min-width: 78px; }
.progresso .trilho-b { flex: 1; height: 6px; border-radius: 999px; background: var(--tinta-100); overflow: hidden; }
.progresso .trilho-b i { display: block; height: 100%; background: var(--bom); border-radius: 999px; }
.progresso span { font-size: 12px; color: var(--tinta-600); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }

/* ------------------------------------------------------------- ranking compacto */
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ranking li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--tinta-100); }
.ranking li:last-child { border-bottom: 0; }
.ranking .pos { font-size: 12px; font-weight: 700; color: var(--tinta-400); }
.ranking .nome { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .val { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.ranking .trilho-b { grid-column: 2 / 4; height: 5px; border-radius: 999px; background: var(--tinta-100); overflow: hidden; }
.ranking .trilho-b i { display: block; height: 100%; background: var(--vermelho); border-radius: 999px; }

/* ------------------------------------------------------------- insights / mini-estatísticas */
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-stat { background: var(--tinta-50); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.mini-stat span { display: block; font-size: 11.5px; color: var(--tinta-500); font-weight: 550; }
.mini-stat strong { display: block; margin-top: 4px; font-size: 18px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-stat small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--tinta-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abc { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 6px 0 8px; background: var(--superficie); }
.abc i { display: block; height: 100%; }

/* ------------------------------------------------------------- gaveta & modal */
.veu { position: fixed; inset: 0; background: rgba(18, 18, 22, .42); z-index: 80; opacity: 0; transition: opacity .2s; }
.veu.visivel { opacity: 1; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(980px, 100%); background: var(--fundo); z-index: 90; box-shadow: var(--sombra-forte); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.gaveta.visivel { transform: none; }
.gaveta-topo { display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: var(--superficie); border-bottom: 1px solid var(--tinta-150); }
.gaveta-topo h2 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.015em; }
.gaveta-topo p { margin: 3px 0 0; font-size: 12.5px; color: var(--tinta-500); }
.gaveta-topo .btn-icone { margin-left: auto; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 16px; }

.modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.modal-caixa { pointer-events: auto; width: min(760px, 100%); max-height: calc(100vh - 40px); background: var(--superficie); border-radius: 18px; box-shadow: var(--sombra-forte); display: flex; flex-direction: column; transform: translateY(12px) scale(.98); opacity: 0; transition: transform .2s, opacity .2s; overflow: hidden; }
.modal.visivel .modal-caixa { transform: none; opacity: 1; }
.modal-caixa .gaveta-topo { border-radius: 18px 18px 0 0; }
.modal-caixa .gaveta-corpo { background: var(--superficie); padding: 0 0 8px; }

/* jornada do pedido */
.jornada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 6px 4px 2px; }
.etapa { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 6px; }
.etapa::before { content: ""; position: absolute; top: 19px; left: -50%; right: 50%; height: 3px; background: var(--tinta-150); z-index: 0; }
.etapa:first-child::before { display: none; }
.etapa.feita::before, .etapa.atual::before { background: var(--vermelho); }
.etapa .bola { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); border: 2px solid var(--tinta-200); color: var(--tinta-400); }
.etapa .bola .ic { width: 18px; height: 18px; }
.etapa.feita .bola { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.etapa.atual .bola { border-color: var(--vermelho); color: var(--vermelho); box-shadow: 0 0 0 5px var(--vermelho-100); }
.etapa strong { font-size: 13px; }
.etapa small { font-size: 11.5px; color: var(--tinta-500); }

.passos { display: flex; align-items: center; gap: 0; }
.passo { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-400); white-space: nowrap; }
.passo .marca-p { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--tinta-200); background: var(--superficie); }
.passo .marca-p .ic { width: 12px; height: 12px; stroke-width: 3; }
.passo.feito { color: var(--tinta-900); }
.passo.feito .marca-p { background: var(--bom); border-color: var(--bom); color: #fff; }
.passo small { color: var(--tinta-500); font-size: 11px; }
.passo-linha { width: 26px; height: 2px; background: var(--tinta-200); margin: 0 6px; flex: none; }
.passo-linha.feita { background: var(--bom); }

.item-detalhe > td { background: var(--tinta-50); padding: 0 !important; }
.item-detalhe-corpo { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 14px; white-space: normal; }
.sub-titulo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-500); display: flex; align-items: center; gap: 8px; }
.op-card { background: var(--superficie); border: 1px solid var(--tinta-150); border-radius: 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.op-card .op-info { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-500); }
.op-card .op-info strong { display: block; color: var(--tinta-900); font-size: 13px; margin-top: 2px; }
.mini-tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--tinta-150); border-radius: 12px; overflow: hidden; font-size: 12.5px; }
.mini-tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-500); background: var(--superficie); padding: 9px 12px; border-bottom: 1px solid var(--tinta-150); }
.mini-tabela td { padding: 9px 12px; border-bottom: 1px solid var(--tinta-100); }
.mini-tabela tr:last-child td { border-bottom: 0; }
.expandir { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--tinta-150); background: var(--superficie); display: inline-grid; place-items: center; color: var(--tinta-500); }
.expandir .ic { width: 14px; height: 14px; transition: transform .15s; }
tr.expandido .expandir .ic { transform: rotate(90deg); }
tr.expandido > td { background: var(--vermelho-50); }

.campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--tinta-100); border-radius: 14px; overflow: hidden; border: 1px solid var(--tinta-100); }
.campos > div { background: var(--superficie); padding: 12px 16px; }
.campos span { display: block; font-size: 11.5px; color: var(--tinta-500); font-weight: 550; }
.campos strong { display: block; margin-top: 4px; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------- toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast { background: var(--tinta-900); color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 13px; box-shadow: var(--sombra-forte); display: flex; align-items: center; gap: 10px; max-width: 380px; animation: entrar .22s ease; }
.toast.erro { background: var(--critico-texto); color: #fff; }
.toast .ic { width: 16px; height: 16px; }
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } }

/* ------------------------------------------------------------- estados */
.esqueleto { position: relative; overflow: hidden; background: var(--tinta-100); border-radius: 8px; color: transparent !important; }
.esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--brilho), transparent); animation: brilho 1.3s infinite; }
@keyframes brilho { to { transform: translateX(100%); } }
.vazio-bloco { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 48px 20px; color: var(--tinta-500); }
.vazio-bloco .ic { width: 38px; height: 38px; color: var(--tinta-300); stroke-width: 1.5; }
.vazio-bloco strong { color: var(--tinta-700); font-size: 14px; }

/* configurações */
.lista-fontes { display: flex; flex-direction: column; }
.fonte-linha { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--tinta-100); }
.fonte-linha .ic { color: var(--tinta-400); }
.fonte-linha.ok .ic { color: var(--bom); }
.fonte-linha strong { font-size: 13.5px; }
.fonte-linha code, .codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--tinta-100); padding: 2px 6px; border-radius: 6px; }
.fonte-linha p { grid-column: 2 / 4; margin: 0; font-size: 12.5px; color: var(--tinta-500); line-height: 1.5; }
.passos-config { margin: 0; padding-left: 20px; line-height: 1.75; color: var(--tinta-700); font-size: 13.5px; }

.titulo-secao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.titulo-secao h2 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.titulo-secao .espaco { flex: 1; }
.seletor-mes { display: inline-flex; align-items: center; gap: 4px; background: var(--superficie); border: 1px solid var(--tinta-150); border-radius: 12px; padding: 3px; box-shadow: var(--sombra); }
.seletor-mes strong { min-width: 150px; text-align: center; font-size: 13.5px; font-weight: 650; }
.seletor-mes button { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 9px; display: grid; place-items: center; color: var(--tinta-600); }
.seletor-mes button:hover { background: var(--tinta-100); }
.seletor-mes button:disabled { opacity: .3; cursor: default; background: none; }

/* ------------------------------------------------------------- responsivo */
@media (max-width: 1280px) {
  .c-8, .c-7, .c-5, .c-4 { grid-column: span 6; }
  .kpis.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  :root { --largura-menu: 252px; }
  body.menu-recolhido { --largura-menu: 252px; }
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  body.menu-aberto .sidebar { transform: none; box-shadow: var(--sombra-forte); }
  body.menu-recolhido .marca-texto, body.menu-recolhido .menu a span, body.menu-recolhido .menu-secao,
  body.menu-recolhido .status-base span:not(.ponto) { display: revert; }
  body.menu-recolhido .menu a { justify-content: flex-start; padding: 10px 12px; }
  .btn-recolher { display: none !important; }
  .principal { margin-left: 0 !important; }
  .sidebar-veu { position: fixed; inset: 0; z-index: 35; background: rgba(18, 18, 22, .4); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.menu-aberto .sidebar-veu { opacity: 1; pointer-events: auto; }
  .so-mobile { display: inline-grid; }
  .c-8, .c-7, .c-6, .c-5, .c-4, .c-3 { grid-column: span 12; }
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .topo { padding: 0 16px; gap: 10px; }
  .topo-titulo p { display: none; }
  .topo-titulo h1 { font-size: 17px; }
  .ao-vivo-texto, .chave-demo > span:last-child { display: none; }
  .ao-vivo { padding: 0 10px; }
  .chave-demo { padding: 0 8px; }
  .conteudo { padding: 16px 16px 32px; gap: 14px; }
  .aviso { margin: 14px 16px 0; flex-wrap: wrap; }
  .aviso button { margin-left: 0; }
  .grade { gap: 14px; }
  .kpis, .kpis.tres, .kpis.seis, .kpis.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi-valor { font-size: 19px; }
  .kpi-icone { display: none; }
  .heroi-valor { font-size: 30px; }
  .card-topo { padding: 16px 16px 4px; flex-wrap: wrap; }
  .card-topo .acoes { margin-left: 0; justify-content: flex-start; }
  .card-corpo { padding: 10px 16px 16px; }
  .tabela-ferramentas { padding: 0 16px 12px; }
  .tabela th:first-child, .tabela td:first-child { padding-left: 16px; }
  .grafico { height: 280px; }
  .grafico.alto { height: 320px; }
  .multi-painel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
  .btn.filtros-toggle { display: inline-flex; }
  .barra-filtros:not(.aberta) .filtros-dim { display: none; }
  .filtros-dim { display: grid; grid-template-columns: 1fr 1fr; }
  .filtros-dim .multi-botao { width: 100%; max-width: none; }
  .filtros-linha .multi { min-width: 0; }
  .ao-vivo-hora { display: none; }
  .ao-vivo { width: 36px; padding: 0; justify-content: center; }
  .campo-data input { width: 112px; }
  .gaveta-corpo { padding: 16px; }
  .gaveta-topo { padding: 14px 16px; }
  .jornada .etapa small { display: none; }
  .mini-stats { grid-template-columns: 1fr 1fr; }
  .toasts { left: 16px; right: 16px; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   v2 — filtros extras, ficha, busca rápida, usuários, metas, login
   ========================================================================== */
.barra-filtros:not(.extras-abertos) .filtros-extras { display: none; }
.btn-extras .ic { width: 15px; height: 15px; }

.link-ficha { cursor: pointer; text-decoration: underline; text-decoration-color: var(--tinta-200); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color .12s, text-decoration-color .12s; }
.link-ficha:hover { color: var(--vermelho-700); text-decoration-color: var(--vermelho-400); }

/* busca rápida */
.botao-busca { display: flex; align-items: center; gap: 10px; height: 38px; width: 270px; padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid var(--tinta-150); background: var(--tinta-50); color: var(--tinta-500); font-size: 13px; text-align: left; }
.botao-busca:hover { border-color: var(--tinta-300); background: var(--superficie); }
.botao-busca span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.botao-busca kbd, .paleta kbd { font-family: var(--fonte); font-size: 11px; font-weight: 600; color: var(--tinta-500); background: var(--superficie); border: 1px solid var(--tinta-200); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }
.paleta { position: fixed; inset: 0; z-index: 110; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; pointer-events: none; }
.paleta-caixa { pointer-events: auto; width: min(640px, 100%); background: var(--superficie); border-radius: 18px; box-shadow: var(--sombra-forte); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; transform: translateY(-8px); opacity: 0; transition: transform .18s, opacity .18s; }
.paleta.visivel .paleta-caixa { transform: none; opacity: 1; }
.paleta-entrada { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--tinta-100); }
.paleta-entrada .ic { width: 20px; height: 20px; color: var(--vermelho); }
.paleta-entrada input { flex: 1; border: 0; outline: 0; font-size: 16px; background: transparent; }
.paleta-lista { overflow-y: auto; padding: 8px; }
.paleta-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-400); padding: 10px 10px 4px; }
.paleta-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.paleta-item .ic-bola { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--vermelho-50); color: var(--vermelho); flex: none; }
.paleta-item .ic-bola .ic { width: 15px; height: 15px; }
.paleta-item .txt { flex: 1; min-width: 0; }
.paleta-item .txt strong { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta-item .txt small { display: block; font-size: 12px; color: var(--tinta-500); }
.paleta-item.ativo { background: var(--vermelho-50); }
.paleta-item.ativo .ic-bola { background: var(--vermelho); color: #fff; }
.paleta-item mark { background: var(--marca-texto); color: inherit; border-radius: 3px; padding: 0 1px; }
.paleta-rodape { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--tinta-100); font-size: 12px; color: var(--tinta-500); background: var(--tinta-50); }
.paleta-vazio { padding: 28px 12px; text-align: center; color: var(--tinta-500); font-size: 13px; }

/* ficha */
.ficha-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--tinta-100); color: var(--tinta-700); }
.tag .ic { width: 12px; height: 12px; }
.tag.vermelha { background: var(--vermelho-50); color: var(--vermelho-700); }
.ficha-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ficha-kpis .mini-stat { background: var(--superficie); border: 1px solid var(--tinta-100); }
.ficha-quebras { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ficha-quebras .card-corpo { padding-top: 4px; }
.ficha-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* usuário logado */
.usuario-caixa { position: relative; margin-top: 10px; }
.usuario-botao { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; text-align: left; }
.usuario-botao:hover { background: rgba(255, 255, 255, .16); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); color: var(--vermelho-700); font-weight: 800; font-size: 12.5px; flex: none; letter-spacing: .02em; }
.usuario-botao .txt { min-width: 0; flex: 1; line-height: 1.2; }
.usuario-botao strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-botao small { font-size: 11px; opacity: .75; }
.usuario-pop { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 210px; background: var(--superficie); color: var(--tinta-900); border-radius: 14px; box-shadow: var(--sombra-forte); padding: 6px; z-index: 60; }
.usuario-pop button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; border-radius: 9px; font-size: 13px; text-align: left; color: var(--tinta-700); }
.usuario-pop button:hover { background: var(--tinta-50); color: var(--tinta-900); }
.usuario-pop .ic { width: 16px; height: 16px; }
body.menu-recolhido .usuario-botao { justify-content: center; padding: 8px 0; background: none; }
body.menu-recolhido .usuario-botao .txt, body.menu-recolhido .usuario-botao > .ic { display: none; }

/* formulários (modais) */
.form { display: flex; flex-direction: column; gap: 14px; padding: 18px 24px 22px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--tinta-700); }
.campo small { font-size: 12px; color: var(--tinta-500); }
.campo input, .campo select { height: 40px; border: 1px solid var(--tinta-200); border-radius: 10px; padding: 0 12px; font-size: 14px; background: var(--superficie); outline: 0; width: 100%; }
.campo input:focus, .campo select:focus { border-color: var(--vermelho-400); box-shadow: 0 0 0 3px var(--vermelho-100); }
.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo-com-botao { display: flex; gap: 8px; }
.campo-com-botao input { flex: 1; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tinta-700); cursor: pointer; }
.check input { accent-color: var(--vermelho); width: 16px; height: 16px; }
.form-erro { background: var(--critico-fundo); color: var(--critico-texto); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.form-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.perfil { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px; }
.perfil.admin { background: var(--vermelho-50); color: var(--vermelho-700); }
.perfil.gestor { background: var(--info-fundo); color: var(--info); }
.perfil.visualizador { background: var(--tinta-100); color: var(--tinta-700); }
.perfis-explicacao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.perfis-explicacao > div { background: var(--tinta-50); border-radius: 12px; padding: 14px; font-size: 12.5px; color: var(--tinta-600); line-height: 1.5; }
.perfis-explicacao strong { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--tinta-900); font-size: 13px; }
.senha-gerada { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--tinta-50); border: 1px dashed var(--tinta-300); border-radius: 10px; padding: 10px 12px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* editor de metas */
.editor-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.editor-topo .espaco { flex: 1; }
.editor-info { font-size: 12.5px; color: var(--tinta-500); display: flex; align-items: center; gap: 6px; }
.editor-info .ic { width: 14px; height: 14px; }
.editor-dica { font-size: 12.5px; color: var(--tinta-600); background: var(--tinta-50); border-radius: 12px; padding: 10px 14px; line-height: 1.55; display: flex; gap: 10px; }
.editor-dica .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--vermelho); }
.grade-metas-rolagem { overflow: auto; max-height: calc(100vh - 330px); min-height: 220px; border-top: 1px solid var(--tinta-100); }
table.grade-metas { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
.grade-metas th { position: sticky; top: 0; z-index: 2; background: var(--tinta-50); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-500); padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--tinta-150); white-space: nowrap; }
.grade-metas th:first-child, .grade-metas td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--superficie); min-width: 200px; max-width: 260px; padding-left: 18px; border-right: 1px solid var(--tinta-100); }
.grade-metas th:first-child { z-index: 3; background: var(--tinta-50); }
.grade-metas td { padding: 6px 6px; border-bottom: 1px solid var(--tinta-100); vertical-align: top; }
.grade-metas td.nome { font-weight: 600; font-size: 12.5px; padding-top: 12px; white-space: normal; }
.grade-metas td.nome small { display: block; font-weight: 500; color: var(--tinta-500); font-size: 11px; margin-top: 2px; }
.celula-meta { width: 98px; height: 32px; border: 1px solid var(--tinta-150); border-radius: 8px; padding: 0 8px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; outline: 0; background: var(--superficie); }
.celula-meta:hover { border-color: var(--tinta-300); }
.celula-meta:focus { border-color: var(--vermelho-400); box-shadow: 0 0 0 3px var(--vermelho-100); }
.celula-meta.alterada { background: var(--alterada-fundo); border-color: var(--alterada-borda); }
.celula-meta.invalida { background: var(--critico-fundo); border-color: var(--critico); }
.celula-meta:disabled { background: var(--tinta-50); color: var(--tinta-700); border-color: transparent; }
.celula-real { display: block; font-size: 10.5px; color: var(--tinta-400); text-align: right; margin-top: 3px; padding-right: 4px; white-space: nowrap; }
.celula-real.bate { color: var(--bom); }
.grade-metas td.total { text-align: right; font-weight: 700; padding: 12px 10px 0; white-space: nowrap; }
.grade-metas tr.linha-total td { background: var(--tinta-50); font-weight: 700; text-align: right; padding: 12px 8px; white-space: nowrap; position: sticky; bottom: 0; z-index: 1; border-top: 1px solid var(--tinta-150); }
.grade-metas tr.linha-total td:first-child { z-index: 2; text-align: left; }
.ferramentas-linha { display: flex; gap: 4px; padding-top: 4px; }
.ferramentas-linha button { width: 28px; height: 28px; border: 1px solid var(--tinta-150); background: var(--superficie); border-radius: 8px; display: grid; place-items: center; color: var(--tinta-500); }
.ferramentas-linha button:hover { color: var(--vermelho-700); border-color: var(--vermelho-200); background: var(--vermelho-50); }
.ferramentas-linha .ic { width: 14px; height: 14px; }
.barra-salvar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 12px; background: var(--tinta-900); color: #fff; border-radius: 14px; padding: 10px 12px 10px 18px; box-shadow: var(--sombra-forte); font-size: 13px; }
.barra-salvar .espaco { flex: 1; }
.barra-salvar .btn.fantasma { color: #fff; }
.barra-salvar .btn.fantasma:hover { background: rgba(255, 255, 255, .12); }

/* login */
body.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background:
  radial-gradient(1200px 600px at 10% -10%, rgba(255, 255, 255, .14), transparent 60%),
  linear-gradient(150deg, #c8102e 0%, #9e0b22 55%, #6f0817 100%); }
.login-caixa { width: min(420px, 100%); background: var(--superficie); border-radius: 22px; box-shadow: 0 30px 80px rgba(40, 0, 8, .35); overflow: hidden; }
.login-topo { padding: 30px 30px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.login-topo img { width: 58px; height: 58px; border-radius: 15px; box-shadow: 0 8px 22px rgba(200, 16, 46, .28); }
.login-topo h1 { margin: 6px 0 0; font-size: 21px; letter-spacing: -.01em; }
.login-topo p { margin: 0; font-size: 13px; color: var(--tinta-500); line-height: 1.5; }
.login-caixa .form { padding: 18px 30px 30px; }
.login-caixa .btn.primario { height: 44px; font-size: 14px; }
.login-rodape { text-align: center; font-size: 12px; color: rgba(255, 255, 255, .7); margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.login-rodape .ic { width: 14px; height: 14px; }
.olho { width: 40px; flex: none; }

@media (max-width: 1000px) {
  .botao-busca { width: 38px; padding: 0; justify-content: center; }
  .botao-busca span, .botao-busca kbd { display: none; }
  .ficha-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfis-explicacao { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .form { padding: 16px; }
  .campo-linha { grid-template-columns: 1fr; }
  .paleta { padding-top: 12px; }
  .grade-metas-rolagem { max-height: none; }
}

/* ==========================================================================
   v3 — aba Top 10, filtros com valores
   ========================================================================== */
.controle-top { position: sticky; top: calc(var(--altura-topo) + 10px); z-index: 25; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; background: rgba(255, 255, 255, .95); backdrop-filter: saturate(1.4) blur(10px); border: 1px solid var(--tinta-100); border-radius: var(--raio-g); box-shadow: var(--sombra); }
.controle-grupo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.controle-grupo > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-400); white-space: nowrap; }
.controle-top .espaco { flex: 1; }
.ir-para { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; padding-top: 8px; border-top: 1px solid var(--tinta-100); }
.ir-para > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-400); margin-right: 4px; }
.ir-para button { border: 1px solid var(--tinta-150); background: var(--superficie); border-radius: 999px; height: 28px; padding: 0 11px; font-size: 12px; font-weight: 600; color: var(--tinta-600); display: inline-flex; align-items: center; gap: 6px; }
.ir-para button .ic { width: 13px; height: 13px; }
.ir-para button:hover { border-color: var(--vermelho-200); color: var(--vermelho-700); background: var(--vermelho-50); }
.alvo-rolagem { scroll-margin-top: 190px; }

.secao-titulo { display: flex; align-items: flex-end; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px; }
.secao-titulo h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.secao-titulo h2 .ic { width: 20px; height: 20px; color: var(--vermelho); }
.secao-titulo p { margin: 0; font-size: 12.5px; color: var(--tinta-500); }
.secao-titulo .espaco { flex: 1; }
.legenda-mov { display: flex; gap: 12px; font-size: 12px; color: var(--tinta-500); align-items: center; flex-wrap: wrap; }

/* pódio */
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; height: 318px; padding: 6px 4px 0; }
.podio-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; height: 100%; justify-content: flex-end; cursor: pointer; }
.podio-col:hover .podio-nome { color: var(--vermelho-700); }
.podio-info { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; width: 100%; padding: 0 2px; }
.medalha { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; box-shadow: 0 6px 14px rgba(0, 0, 0, .14), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.medalha.ouro { background: linear-gradient(145deg, #f8d877, #d6a00f); color: #4d3400; }
.medalha.prata { background: linear-gradient(145deg, #eef0f3, #a7acb6); color: #33373e; }
.medalha.bronze { background: linear-gradient(145deg, #edbb93, #b46f38); color: #44230a; }
.podio-nome { font-weight: 700; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; word-break: break-word; min-height: 32px; transition: color .15s; }
.podio-valor { font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.podio-part { font-size: 11.5px; color: var(--tinta-500); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.podio-bloco { width: 100%; border-radius: 14px 14px 4px 4px; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: rgba(255, 255, 255, .92); height: 0; overflow: hidden; transition: height .9s cubic-bezier(.2, .8, .2, 1); }
.podio-col.p1 .podio-bloco { background: linear-gradient(180deg, #d42a45, #9e0b22); box-shadow: 0 10px 24px rgba(200, 16, 46, .28); }
.podio-col.p2 .podio-bloco { background: linear-gradient(180deg, #ec8a9a, #d63c55); }
.podio-col.p3 .podio-bloco { background: linear-gradient(180deg, #f8c4cd, #eb8b9b); color: rgba(127, 10, 28, .75); }

/* destaques */
.destaques-frase { font-size: 14px; color: var(--tinta-700); line-height: 1.6; margin: 0 0 14px; }
.destaques-frase strong { color: var(--tinta-900); }
.destaques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.destaque { background: var(--tinta-50); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer; border: 1px solid transparent; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.destaque:hover { background: var(--superficie); border-color: var(--vermelho-200); transform: translateY(-2px); box-shadow: var(--sombra); }
.destaque-rotulo { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-500); }
.destaque-rotulo .ic { width: 13px; height: 13px; color: var(--vermelho); }
.destaque-nome { font-weight: 700; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; word-break: break-word; }
.destaque-valor { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.destaque-extra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--tinta-500); min-height: 18px; }

/* listas de ranking */
.card-rank .card-topo { align-items: center; }
.icone-card { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--vermelho-50); color: var(--vermelho); flex: none; }
.icone-card .ic { width: 17px; height: 17px; }
.rk-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rk-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 8px 6px; border-radius: 10px; cursor: pointer; transition: background .12s; align-items: start; }
.rk-item:hover { background: var(--vermelho-50); }
.rk-item:focus-visible { outline: 2px solid var(--vermelho-400); outline-offset: 1px; }
.rk-pos { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--tinta-500); background: var(--tinta-100); font-variant-numeric: tabular-nums; }
.rk-pos.p1 { background: var(--vermelho); color: #fff; }
.rk-pos.p2 { background: #e0596d; color: #fff; }
.rk-pos.p3 { background: #f6c5cd; color: var(--vermelho-800); }
.rk-linha { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rk-nome { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-valor { font-weight: 750; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-barra { height: 6px; border-radius: 999px; background: var(--tinta-100); margin-top: 6px; overflow: hidden; }
.rk-barra i { display: block; height: 100%; border-radius: 999px; background: var(--vermelho); width: 0; transition: width .75s cubic-bezier(.2, .8, .2, 1); }
.rk-sub { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11.5px; color: var(--tinta-500); min-width: 0; }
.rk-sub .esp { flex: 1; }
.rk-sub .det { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mov { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 750; padding: 1px 7px 1px 5px; border-radius: 999px; white-space: nowrap; flex: none; }
.mov .ic { width: 11px; height: 11px; stroke-width: 2.8; }
.mov.sobe { color: var(--bom); background: var(--bom-fundo); }
.mov.desce { color: var(--critico); background: var(--critico-fundo); }
.mov.igual { color: var(--tinta-500); background: var(--tinta-100); }
.mov.novo { color: var(--info); background: var(--info-fundo); padding: 1px 7px; }
.var { font-size: 11px; font-weight: 700; white-space: nowrap; flex: none; }
.var.pos { color: var(--bom); }
.var.neg { color: var(--critico); }
.rk-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--tinta-100); font-size: 12px; color: var(--tinta-500); flex-wrap: wrap; }
.chip-conc { font-size: 11.5px; font-weight: 650; color: var(--vermelho-700); background: var(--vermelho-50); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.rk-nota { font-size: 11.5px; color: var(--tinta-500); padding: 4px 6px 0; }

/* altas e quedas */
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.movers h4 { margin: 0 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-500); display: flex; align-items: center; gap: 6px; }
.movers h4 .ic { width: 14px; height: 14px; }
.mover { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.mover:hover { background: var(--tinta-50); }
.mover .nome { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover .delta { font-weight: 800; font-size: 13px; text-align: right; white-space: nowrap; }
.mover .delta.pos { color: var(--bom); }
.mover .delta.neg { color: var(--critico); }
.mover small { color: var(--tinta-500); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover .barra-div { grid-column: 1 / 3; height: 4px; border-radius: 999px; background: var(--tinta-100); overflow: hidden; }
.mover .barra-div i { display: block; height: 100%; border-radius: 999px; width: 0; transition: width .7s cubic-bezier(.2, .8, .2, 1); }

/* entrada e saída de clientes */
.mov-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mov-stat { background: var(--tinta-50); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.mov-stat span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tinta-500); font-weight: 650; }
.mov-stat span .ic { width: 12px; height: 12px; }
.mov-stat strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.mov-stat small { display: block; font-size: 11px; color: var(--tinta-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-stat.novos strong { color: var(--info); }
.mov-stat.perdidos strong { color: var(--critico); }
.mini-lista-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-500); margin: 8px 0 2px; }
.mini-lista { list-style: none; margin: 0; padding: 0; }
.mini-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 4px; font-size: 12.5px; border-bottom: 1px solid var(--tinta-100); cursor: pointer; border-radius: 6px; }
.mini-lista li:hover { background: var(--tinta-50); }
.mini-lista li:last-child { border-bottom: 0; }
.mini-lista li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 550; }
.mini-lista li strong { white-space: nowrap; font-size: 12.5px; }
.dica-comparar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dica-comparar .ic-grande { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--vermelho-50); color: var(--vermelho); flex: none; }
.dica-comparar .ic-grande .ic { width: 22px; height: 22px; }
.dica-comparar div { flex: 1; min-width: 220px; font-size: 13px; color: var(--tinta-600); line-height: 1.5; }
.dica-comparar strong { display: block; color: var(--tinta-900); font-size: 14px; }

/* filtros com valores do período */
.multi-painel { width: 340px; }
.multi-dica { font-size: 11.5px; line-height: 1.3; color: var(--tinta-500); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.multi-rapidos { display: flex; gap: 4px; }
.multi-rapidos button { white-space: nowrap; border: 1px solid var(--tinta-150); background: var(--superficie); border-radius: 999px; height: 24px; padding: 0 9px; font-size: 11.5px; font-weight: 650; color: var(--tinta-600); }
.multi-rapidos button:hover { border-color: var(--vermelho-200); color: var(--vermelho-700); background: var(--vermelho-50); }
.multi-lista label .op-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-valor { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tinta-500); flex: none; font-variant-numeric: tabular-nums; }
.op-barra { width: 42px; height: 4px; background: var(--tinta-100); border-radius: 999px; overflow: hidden; }
.op-barra i { display: block; height: 100%; background: var(--vermelho); border-radius: 999px; }
.multi-lista label.sem-venda { color: var(--tinta-400); }

@media (max-width: 1280px) {
  .destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .controle-top { position: static; }
  .podio { height: auto; min-height: 210px; gap: 6px; }
  .podio-valor { font-size: 14px; }
  .podio-bloco { font-size: 26px; }
  .movers { grid-template-columns: 1fr; }
  .mov-stat strong { font-size: 19px; }
}
.segmentado.pequeno button { height: 26px; padding: 0 10px; font-size: 12px; }

/* ==========================================================================
   v4 — identidade Filo Rosso: "o fio vermelho" (visual tecnológico)
   ========================================================================== */
body {
  background-color: var(--fundo);
  background-image:
    radial-gradient(900px 420px at 100% -140px, rgba(var(--vermelho-rgb), .10), transparent 70%),
    linear-gradient(var(--grade-fundo) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade-fundo) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  background-attachment: fixed, fixed, fixed;
  transition: background-color .3s;
}

/* tipografia: títulos e números em fonte geométrica; rótulos técnicos em mono */
.topo-titulo h1, .card-topo h3, .kpi-valor, .heroi-valor, .mini-stat strong, .destaque-valor, .podio-valor,
.secao-titulo h2, .titulo-secao h2, .gaveta-topo h2, .mov-stat strong, .login-topo h1, .seletor-mes strong,
.rk-valor, .campos strong, .ficha-kpis strong, .holofote-nome, .holofote-pos, .cat-valor, .resumo-faixa strong { font-family: var(--fonte-display); }
.kpi-valor { font-weight: 700; letter-spacing: -.035em; }
.heroi-valor { font-weight: 700; letter-spacing: -.04em; }
.menu-secao, .controle-grupo > span, .ir-para > span, .destaque-rotulo, .mini-lista-titulo, .tabela th, .ao-vivo-hora,
.paleta-grupo, .sub-titulo, .movers h4, .grade-metas th, .mini-tabela th, .ticker-rotulo, .rotulo-tec, .chip-conc,
.status-base, .cat-rotulo { font-family: var(--fonte-mono); }
.tabela th, .grade-metas th, .mini-tabela th { font-size: 10.5px; letter-spacing: .05em; }

/* ---------------------------------------------------------------- menu lateral "carbono" */
.sidebar {
  background:
    radial-gradient(380px 260px at -10% -6%, rgba(var(--vermelho-rgb), .22), transparent 70%),
    radial-gradient(300px 300px at 120% 105%, rgba(var(--vermelho-rgb), .10), transparent 70%),
    linear-gradient(180deg, #15161c 0%, #0c0d11 100%);
  color: #e9eaf0;
}
.sidebar::after { display: none; }
.fio { position: absolute; top: 0; bottom: 0; right: -1px; width: 2px; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--vermelho-rgb), .95) 14%, rgba(var(--vermelho-rgb), .55) 62%, transparent 100%);
  box-shadow: 0 0 14px rgba(var(--vermelho-rgb), .55); }
.fio::after { content: ""; position: absolute; left: -2px; width: 6px; height: 110px; top: -120px; border-radius: 6px; opacity: 0;
  background: linear-gradient(180deg, transparent, #fff 50%, transparent); box-shadow: 0 0 16px 2px rgba(var(--vermelho-rgb), .9); }
.fio.pulsando::after { animation: fio-pulso 1.7s cubic-bezier(.45, 0, .2, 1); }
@keyframes fio-pulso { 0% { top: -120px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: .9; } 100% { top: 100%; opacity: 0; } }

.marca { flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 16px; text-align: center; }
.marca-logo { width: auto; height: 96px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 22px rgba(var(--vermelho-rgb), .35)); transition: transform .3s; }
.marca:hover .marca-logo { transform: scale(1.03); }
.marca-simbolo { display: none; width: 40px; height: auto; filter: drop-shadow(0 0 12px rgba(var(--vermelho-rgb), .45)); }
.marca-texto { align-items: center; }
.marca-texto span { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #8b8e9c; opacity: 1; margin: 0; }
body.menu-recolhido .marca-logo { display: none; }
body.menu-recolhido .marca-simbolo { display: block; }
body.menu-recolhido .marca { padding: 18px 0 12px; }

.menu-secao { color: #6c6f7e; opacity: 1; font-size: 10px; letter-spacing: .18em; padding-top: 18px; }
.menu a { position: relative; color: #b7b9c6; font-weight: 500; }
.menu a .ic { color: #8b8e9c; transition: color .15s; }
.menu a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.menu a:hover .ic { color: #fff; }
.menu a.ativo { background: linear-gradient(90deg, rgba(var(--vermelho-rgb), .26), rgba(var(--vermelho-rgb), .05)); color: #fff; font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(var(--vermelho-rgb), .28); }
.menu a.ativo .ic { color: #ff6f74; }
.menu a.ativo::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--vermelho); box-shadow: 0 0 12px rgba(var(--vermelho-rgb), .9); }
.sidebar-rodape { border-top: 1px solid rgba(255, 255, 255, .06); }
.status-base { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); color: #b7b9c6; font-size: 11px; letter-spacing: .02em; }
.usuario-botao { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); }
.usuario-botao:hover { background: rgba(255, 255, 255, .07); }
.avatar { background: linear-gradient(135deg, #ef3b40, #a8161c); color: #fff; box-shadow: 0 0 0 2px rgba(var(--vermelho-rgb), .25); }
.btn-recolher { color: #7f8291; }
.btn-recolher:hover { background: rgba(255, 255, 255, .05); }

/* ---------------------------------------------------------------- topo de vidro + fio */
.topo { border-bottom: 1px solid var(--borda); }
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--vermelho-rgb), .95), rgba(var(--vermelho-rgb), .18) 38%, transparent 72%); }
.topo::before { content: ""; position: absolute; bottom: -1px; left: -180px; width: 180px; height: 2px; z-index: 1; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 10px rgba(var(--vermelho-rgb), .9); }
.topo.pulsando::before { animation: varrer 1.5s cubic-bezier(.45, 0, .2, 1); }
@keyframes varrer { 0% { left: -180px; opacity: 0; } 12% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.topo-titulo h1 { font-weight: 700; letter-spacing: -.02em; font-size: 20px; }
.topo-simbolo { display: none; width: 30px; height: auto; flex: none; }
.btn-icone { background: var(--superficie); border-color: var(--borda); }
.btn-icone:hover { border-color: rgba(var(--vermelho-rgb), .35); color: var(--vermelho-700); }
.ao-vivo, .chave-demo, .botao-busca { border-color: var(--borda); }
.ao-vivo { background: var(--superficie); }
.botao-busca { background: var(--superficie); }
.bolinha { background: #fff; }

/* ---------------------------------------------------------------- cartões com a "etiqueta" do fio */
.card, .kpi, .barra-filtros, .controle-top, .seletor-mes { border-color: var(--borda); }
.card { position: relative; transition: border-color .2s, box-shadow .2s; }
.card::before { content: ""; position: absolute; top: -1px; left: 22px; width: 28px; height: 2px; border-radius: 0 0 2px 2px; background: var(--vermelho); }
.card:hover { border-color: rgba(var(--vermelho-rgb), .18); }
:root[data-tema="escuro"] .card::before { box-shadow: 0 0 10px rgba(var(--vermelho-rgb), .8); }
.card-topo h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

/* KPIs: arco da logo no canto */
.kpi { transition: transform .2s, border-color .2s, box-shadow .2s; }
.kpi:hover { transform: translateY(-2px); border-color: rgba(var(--vermelho-rgb), .25); box-shadow: var(--sombra), 0 0 0 1px rgba(var(--vermelho-rgb), .06); }
.kpi::after { content: ""; position: absolute; right: -46px; top: -46px; width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(var(--vermelho-rgb), .13); border-bottom-color: transparent; border-left-color: transparent; transform: rotate(-18deg); }
.kpi-icone { background: var(--vermelho-50); }
.kpi.destaque { background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .20), transparent 48%), linear-gradient(135deg, #ef3b40 0%, #b0191f 100%); box-shadow: var(--brilho-vermelho); }
.kpi.destaque::after { border-color: rgba(255, 255, 255, .28); border-bottom-color: transparent; border-left-color: transparent; }

/* herói (meta do mês) */
.heroi-valor { font-size: 40px; }
.medidor-preenchido { background: linear-gradient(90deg, var(--vermelho-600), var(--vermelho)); box-shadow: 0 0 12px rgba(var(--vermelho-rgb), .45); }

/* controles */
.btn.primario { background: linear-gradient(135deg, var(--vermelho), var(--vermelho-600)); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(var(--vermelho-rgb), .28); }
.btn.primario:hover { background: linear-gradient(135deg, var(--vermelho), var(--vermelho-600)); filter: brightness(1.05); box-shadow: 0 6px 22px rgba(var(--vermelho-rgb), .42); }
.btn { background: var(--superficie); border-color: var(--borda); }
.btn:hover { border-color: rgba(var(--vermelho-rgb), .3); }
.btn.fantasma { background: transparent; border-color: transparent; }
.segmentado { background: var(--tinta-100); }
.segmentado button.ativo { background: var(--superficie); color: var(--vermelho-700); box-shadow: 0 1px 2px rgba(16, 17, 22, .10), inset 0 0 0 1px rgba(var(--vermelho-rgb), .28); }
.abas button.ativo::after { box-shadow: 0 0 10px rgba(var(--vermelho-rgb), .7); }
.multi-botao, .campo-data, .busca input, .campo input, .campo select { border-color: var(--borda); }
.multi.tem-selecao .multi-botao { background: var(--vermelho-50); border-color: rgba(var(--vermelho-rgb), .45); }
.chip { background: var(--vermelho-50); border-color: rgba(var(--vermelho-rgb), .2); }
.rk-pos.p1 { box-shadow: 0 0 0 3px rgba(var(--vermelho-rgb), .16); }
.curva.A { background: var(--vermelho); }
.tabela tbody tr:hover { background: var(--vermelho-50); }
.tabela th { background: var(--tinta-50); }

/* tema escuro: ajustes finos */
:root[data-tema="escuro"] .segmentado button.ativo { background: var(--tinta-200); }
:root[data-tema="escuro"] .kpi-icone, :root[data-tema="escuro"] .icone-card { background: var(--vermelho-100); color: #ff6f74; }
:root[data-tema="escuro"] .aviso.vazio { background: var(--superficie); }
:root[data-tema="escuro"] .grafico-vazio .icone-bola { background: var(--tinta-100); box-shadow: 0 0 0 8px var(--tinta-50); }
:root[data-tema="escuro"] .esqueleto { background: var(--tinta-100); }
:root[data-tema="escuro"] .toast { background: #23242d; border: 1px solid var(--tinta-150); }
:root[data-tema="escuro"] .barra-salvar { background: #23242d; border: 1px solid var(--tinta-150); }
:root[data-tema="escuro"] .veu { background: rgba(0, 0, 0, .6); }
:root[data-tema="escuro"] .podio-col.p3 .podio-bloco { color: rgba(255, 255, 255, .85); background: linear-gradient(180deg, #7d1c22, #57151a); }
:root[data-tema="escuro"] .podio-col.p2 .podio-bloco { background: linear-gradient(180deg, #b52a31, #8a1f25); }
:root[data-tema="escuro"] .rk-pos.p3 { background: #5a1a1e; color: #ffb3b6; }
:root[data-tema="escuro"] .curva.B { background: var(--vermelho-100); color: #ff9a9e; }
:root[data-tema="escuro"] .medalha.ouro { color: #3b2800; }

/* ---------------------------------------------------------------- faixa ao vivo (últimas notas) */
body.com-ticker { --altura-ticker: 36px; }
.ticker { position: sticky; top: var(--altura-topo); z-index: 29; height: 36px; display: flex; align-items: stretch; background: var(--superficie);
  border-bottom: 1px solid var(--borda); overflow: hidden; font-size: 12.5px; }
.ticker[hidden] { display: none; }
.ticker-rotulo { flex: none; display: flex; align-items: center; gap: 9px; padding: 0 16px 0 28px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--vermelho-700); text-transform: uppercase; border-right: 1px solid var(--borda); background: var(--superficie); z-index: 1; }
.ticker-rotulo .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 0 rgba(var(--vermelho-rgb), .6); animation: radar 2s infinite; }
@keyframes radar { 0% { box-shadow: 0 0 0 0 rgba(var(--vermelho-rgb), .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(var(--vermelho-rgb), 0); } }
.ticker-janela { flex: 1; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
.ticker-trilha { display: inline-flex; white-space: nowrap; will-change: transform; animation: rolar var(--duracao, 80s) linear infinite; }
.ticker:hover .ticker-trilha { animation-play-state: paused; }
@keyframes rolar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { display: inline-flex; align-items: center; gap: 9px; padding: 0 20px; border-right: 1px solid var(--borda); cursor: pointer; color: var(--tinta-600); height: 36px; }
.ticker-item:hover { background: var(--vermelho-50); color: var(--tinta-900); }
.ticker-item .nf { font-family: var(--fonte-mono); color: var(--vermelho-700); font-size: 11.5px; font-weight: 600; }
.ticker-item strong { color: var(--tinta-900); font-family: var(--fonte-display); font-weight: 700; }
.ticker-item .quando { font-family: var(--fonte-mono); font-size: 11px; color: var(--tinta-400); }
.ticker-item.nova { animation: chegou 1.2s ease 3; }
.ticker-item.nova .nf::before { content: "NOVA "; color: var(--bom); }
@keyframes chegou { 0%, 100% { background: transparent; } 50% { background: rgba(var(--vermelho-rgb), .14); } }
.controle-top { top: calc(var(--altura-topo) + var(--altura-ticker) + 10px); }
.alvo-rolagem { scroll-margin-top: calc(var(--altura-topo) + var(--altura-ticker) + 130px); }

/* rótulo técnico de seção: ● TEXTO ───── */
.rotulo-tec { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-500); }
.rotulo-tec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 8px rgba(var(--vermelho-rgb), .8); flex: none; }
.rotulo-tec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--vermelho-rgb), .4), transparent); }

/* entrada suave das telas */
/* "backwards": a animação de entrada não deixa camada presa depois que termina (era o que escondia o filtro aberto) */
.conteudo > * { animation: subir .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.conteudo > *:nth-child(2) { animation-delay: .04s; }
.conteudo > *:nth-child(3) { animation-delay: .08s; }
.conteudo > *:nth-child(4) { animation-delay: .12s; }
.conteudo > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .topo-simbolo { display: block; }
  .marca-logo { height: 84px; }
}
@media (max-width: 720px) {
  .ticker { position: static; }
  .ticker-rotulo { padding: 0 12px 0 16px; }
  .ticker-rotulo span:last-child { display: none; }
  .heroi-valor { font-size: 30px; }
  .topo-simbolo { width: 26px; }
}

/* ==========================================================================
   v4 — Top 10 "explorador de campeões"
   ========================================================================== */
.resumo-faixa { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 12px 18px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra); font-size: 13px; color: var(--tinta-600); }
.resumo-item { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.resumo-item small { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-400); }
.resumo-item strong { font-size: 18px; font-weight: 700; color: var(--tinta-900); letter-spacing: -.02em; }
.resumo-item strong small { font-family: var(--fonte); font-size: 11px; letter-spacing: 0; text-transform: none; }
.resumo-div { width: 1px; height: 22px; background: var(--borda); display: inline-block; }

/* seletor de categorias */
.cat-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cat { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 14px 13px; border-radius: 14px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); color: var(--tinta-700); overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s; }
.cat::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 84px; height: 84px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(var(--vermelho-rgb), .10); border-top-color: transparent; border-left-color: transparent; transition: border-color .2s; }
.cat:hover { transform: translateY(-2px); border-color: rgba(var(--vermelho-rgb), .30); }
.cat.ativo { border-color: rgba(var(--vermelho-rgb), .65); background: linear-gradient(160deg, var(--vermelho-50), var(--superficie) 70%);
  box-shadow: var(--sombra), 0 0 0 3px rgba(var(--vermelho-rgb), .12), 0 10px 26px rgba(var(--vermelho-rgb), .14); }
.cat.ativo::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 0 0 2px 2px; background: var(--vermelho); box-shadow: 0 0 10px rgba(var(--vermelho-rgb), .8); }
.cat.ativo::after { border-right-color: rgba(var(--vermelho-rgb), .35); border-bottom-color: rgba(var(--vermelho-rgb), .35); }
.cat-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cat-topo .ic { width: 15px; height: 15px; color: var(--vermelho); flex: none; }
.cat-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat.ativo .cat-rotulo { color: var(--vermelho-700); }
.cat-qtd { margin-left: auto; font-family: var(--fonte-mono); font-size: 10.5px; color: var(--tinta-400); }
.cat-campeao { font-size: 12.5px; font-weight: 600; color: var(--tinta-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 17px; }
.cat-valor { font-size: 16px; font-weight: 700; color: var(--tinta-900); letter-spacing: -.02em; white-space: nowrap; }

/* palco */
.palco .card-topo { flex-wrap: wrap; }
.palco .card-topo h3 { display: flex; align-items: center; gap: 8px; }
.palco .card-topo h3 .ic { width: 17px; height: 17px; color: var(--vermelho); }
.palco-corpo { min-height: 320px; }
.podio-mini { height: auto; padding-top: 4px; margin-bottom: 6px; border-bottom: 1px solid var(--borda); padding-bottom: 0; }
.podio-mini .podio-col { gap: 6px; border-radius: 12px; padding-top: 6px; transition: background .15s; }
.podio-mini .podio-col:hover { background: var(--vermelho-50); }
.podio-mini .podio-col.selecionado .podio-info { position: relative; }
.podio-mini .podio-col.selecionado .podio-nome { color: var(--vermelho-700); }
.podio-mini .podio-col.selecionado .podio-bloco { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px rgba(var(--vermelho-rgb), .55), 0 10px 26px rgba(var(--vermelho-rgb), .3); }
.podio-mini .medalha { width: 34px; height: 34px; font-size: 13px; }
.podio-mini .podio-valor { font-size: 16px; }
.podio-mini .podio-bloco { border-radius: 10px 10px 0 0; }
.rk-item.selecionado { background: var(--vermelho-50); box-shadow: inset 3px 0 0 var(--vermelho); }
.rk-item.selecionado .rk-nome { color: var(--vermelho-700); }
.movers-lista .delta { font-weight: 800; }
.movers-lista .delta.pos { color: var(--bom); }
.movers-lista .delta.neg { color: var(--critico); }
.movers-lista.subiram .rk-barra i { background: var(--bom); }
.movers-lista.cairam .rk-barra i { background: var(--critico); }

/* holofote */
.rotulo-holofote { display: flex; align-items: center; gap: 8px; }
.rotulo-holofote::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 4px rgba(var(--vermelho-rgb), .15), 0 0 12px rgba(var(--vermelho-rgb), .8); }
.holofote { display: flex; flex-direction: column; gap: 16px; }
.holofote-topo { display: flex; gap: 16px; align-items: center; }
.holofote-pos { flex: none; width: 74px; height: 74px; border-radius: 20px; display: grid; place-items: center; font-family: var(--fonte-display); font-size: 34px; font-weight: 700;
  color: #fff; letter-spacing: -.04em; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .25), transparent 55%), linear-gradient(135deg, #ef3b40, #a8161c);
  box-shadow: var(--brilho-vermelho); }
.holofote-pos small { font-size: 16px; margin-left: 1px; opacity: .85; }
.holofote-id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rotulo-mini { font-family: var(--fonte-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-400); }
.holofote-nome { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--tinta-900); word-break: break-word; }
.holofote-mov { font-size: 12px; color: var(--tinta-500); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.holofote-meio { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
.arco-caixa { position: relative; width: 132px; height: 132px; }
.arco { width: 100%; height: 100%; }
.arco circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.arco-trilho { stroke: var(--tinta-100); }
.arco-valor { stroke: var(--vermelho); filter: drop-shadow(0 0 6px rgba(var(--vermelho-rgb), .55)); transition: stroke-dasharray 1s cubic-bezier(.2, .8, .2, 1); }
.arco-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 18px; }
.arco-centro strong { font-family: var(--fonte-display); font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--tinta-900); }
.arco-centro small { font-size: 10.5px; color: var(--tinta-500); line-height: 1.25; }
.holofote-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hstat { background: var(--tinta-50); border: 1px solid var(--borda); border-radius: 12px; padding: 9px 11px; min-width: 0; }
.hstat span { display: block; font-size: 10.5px; color: var(--tinta-500); font-weight: 600; }
.hstat strong { display: block; font-family: var(--fonte-display); font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hstat small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tinta-500); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.hstat small em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.evolucao { background: var(--tinta-50); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; }
.evolucao-topo { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.evolucao-barras { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.evolucao-barras i { flex: 1; min-width: 4px; border-radius: 4px 4px 1px 1px; background: rgba(var(--vermelho-rgb), .35); transition: background .15s; }
.evolucao-barras i:hover { background: var(--vermelho-600); }
.evolucao-barras i.ultima { background: var(--vermelho); box-shadow: 0 0 10px rgba(var(--vermelho-rgb), .5); }
.evolucao-eixo { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--fonte-mono); font-size: 10px; color: var(--tinta-400); }
.rel-titulo { margin: 4px 0 2px; }
.rel-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rel-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 7px 6px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.rel-lista li:hover { background: var(--vermelho-50); }
.rel-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.rel-lista strong { font-family: var(--fonte-display); }
.rel-barra { grid-column: 1 / 3; height: 4px; border-radius: 999px; background: var(--tinta-100); overflow: hidden; }
.rel-barra i { display: block; height: 100%; border-radius: 999px; background: var(--vermelho); }
.holofote-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* explorar visualmente */
.visual-legenda { margin: 10px 0 4px; font-size: 12.5px; color: var(--tinta-500); }

@media (max-width: 1280px) {
  .cat-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .cat-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cat-grade { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .cat-grade::-webkit-scrollbar { display: none; }
  .cat { flex: 0 0 62%; scroll-snap-align: start; }
  .resumo-faixa { gap: 8px 14px; }
  .resumo-div { display: none; }
  .holofote-meio { grid-template-columns: 1fr; justify-items: center; }
  .holofote-stats { width: 100%; }
  .holofote-pos { width: 60px; height: 60px; font-size: 28px; }
}

/* ==========================================================================
   v4 — tela de login
   ========================================================================== */
body.pagina-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; overflow-x: hidden;
  background:
    radial-gradient(700px 420px at 18% 30%, rgba(var(--vermelho-rgb), .22), transparent 70%),
    radial-gradient(600px 400px at 90% 90%, rgba(var(--vermelho-rgb), .12), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px),
    #0b0c10;
  background-size: auto, auto, 32px 32px, 32px 32px, auto; color: #f1f2f6; }
.fios-fundo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.fio-linha { fill: none; stroke: url(#fio-grad); stroke-width: 1.4; stroke-dasharray: 2 10; opacity: .55; animation: fluir 26s linear infinite; }
.fio-linha.l2 { opacity: .35; animation-duration: 34s; }
.fio-linha.l3 { opacity: .4; animation-duration: 30s; animation-direction: reverse; }
.fio-linha.l4 { opacity: .25; animation-duration: 40s; }
.fio-luz { fill: none; stroke: #ff6f74; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 140 2200; stroke-dashoffset: 140; filter: drop-shadow(0 0 6px #ec3237);
  animation: correr 7s cubic-bezier(.45, 0, .2, 1) infinite; }
.fio-luz.atraso { animation-delay: 3.5s; opacity: .8; }
@keyframes fluir { to { stroke-dashoffset: -480; } }
@keyframes correr { 0% { stroke-dashoffset: 140; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -2100; opacity: 0; } }
.login-palco { position: relative; z-index: 1; width: min(980px, 100%); display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 56px; align-items: center; }
.login-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.login-marca img { width: 220px; height: auto; filter: drop-shadow(0 0 40px rgba(var(--vermelho-rgb), .45)); animation: surgir .9s cubic-bezier(.2, .8, .2, 1) both; }
.login-slogan { margin: 6px 0 0; font-family: var(--fonte-mono); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: #9da0ae; }
.login-pontos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.login-pontos li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #c9cbd6; }
.login-pontos li::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--vermelho); box-shadow: 0 0 8px rgba(var(--vermelho-rgb), .9); }
@keyframes surgir { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.login-caixa { position: relative; width: 100%; background: #ffffff; color: #15161b; border-radius: 22px; box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden;
  animation: surgir .7s .1s cubic-bezier(.2, .8, .2, 1) both; }
.login-caixa::before { content: ""; position: absolute; top: 0; left: 32px; right: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--vermelho); box-shadow: 0 0 14px rgba(var(--vermelho-rgb), .9); }
.login-caixa .login-topo { align-items: flex-start; text-align: left; padding: 30px 30px 6px; }
.login-caixa .login-topo img { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 8px 22px rgba(var(--vermelho-rgb), .35); }
.login-caixa .login-topo h1 { color: #15161b; font-size: 22px; }
.login-caixa .login-topo p { color: #696b76; }
.login-caixa .campo > span { color: #373942; }
.login-caixa .campo input { background: #fff; color: #15161b; border-color: #dbdce2; }
.login-caixa .check { color: #373942; }
.login-caixa .btn { background: #fff; color: #373942; border-color: #e5e6eb; }
.login-caixa .btn.primario { background: linear-gradient(135deg, #ec3237, #d4232a); color: #fff; border-color: transparent; }
.login-rodape { position: relative; z-index: 1; color: #7f8291; margin-top: 26px; font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .06em; }
@media (max-width: 860px) {
  .login-palco { grid-template-columns: 1fr; gap: 26px; justify-items: center; }
  .login-marca { align-items: center; text-align: center; }
  .login-marca img { width: 140px; }
  .login-pontos { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fio-luz { display: none; }
  .ticker-trilha { animation: none; }
  .ticker-janela { overflow-x: auto; }
}
.controle-top { background: var(--topo-fundo); }
@media (max-width: 720px) {
  .chave-demo, #btn-atualizar, .ao-vivo-texto { display: none !important; }
  .topo-acoes { gap: 6px; }
  .fio { right: 0; }
  .topo-titulo h1 { font-size: 17px; }
}

/* a barra de filtros fica acima do conteúdo (a lista aberta precisa passar por cima dos cartões e da barra de controle),
   mas abaixo do topo e da faixa ao vivo */
.barra-filtros { position: relative; z-index: 28; }

/* ==========================================================================
   v5 — topo preto com o fio vermelho vivo
   ========================================================================== */
.topo { background: rgba(9, 10, 13, .95); border-bottom-color: rgba(255, 255, 255, .06); color: #f1f2f6; backdrop-filter: saturate(1.2) blur(14px); }
.topo-fio { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.topo > *:not(.topo-fio) { position: relative; z-index: 1; }
.topo-titulo h1 { color: #ffffff; }
.topo-titulo p { color: #8f92a2; }
.topo .btn-icone, .topo .botao-busca, .topo .ao-vivo, .topo .chave-demo { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .10); color: #d6d8e1; }
.topo .btn-icone:hover, .topo .botao-busca:hover { background: rgba(255, 255, 255, .09); border-color: rgba(var(--vermelho-rgb), .55); color: #fff; }
.topo .botao-busca kbd { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #aeb1bf; }
.topo .ao-vivo-hora { color: #9a9dad; }
.topo .ao-vivo.ligado .pulso { background: #4ade80; }
.topo .ao-vivo.ligado .pulso::after { border-color: #4ade80; }
.topo .ao-vivo.ligado .ao-vivo-texto { color: #4ade80; }
.topo .ao-vivo.piscar { animation: piscar-escuro .9s ease; }
@keyframes piscar-escuro { 0% { background: rgba(74, 222, 128, .28); } 100% { background: rgba(255, 255, 255, .05); } }
.topo .trilho { background: rgba(255, 255, 255, .18); }
.topo .chave-demo input:checked + .trilho { background: var(--vermelho); }

.ticker { background: #0b0c10; border-bottom-color: rgba(255, 255, 255, .06); }
.ticker-rotulo { background: #0b0c10; color: #ff6f74; border-right-color: rgba(255, 255, 255, .08); }
.ticker-item { color: #a7aab9; border-right-color: rgba(255, 255, 255, .06); }
.ticker-item strong { color: #ffffff; }
.ticker-item:hover { background: rgba(var(--vermelho-rgb), .14); color: #fff; }
.ticker-item .nf { color: #ff6f74; }
.ticker-item .quando { color: #6f7283; }

/* ==========================================================================
   v5 — Dias sem compra: o fio que escolhe os dias
   ========================================================================== */
.rotulo-campo { font-family: var(--fonte-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-400); white-space: nowrap; }
.dsc-controle .segmentado { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dsc-controle .segmentado::-webkit-scrollbar { display: none; }

/* o palco escuro onde o fio corre (nos dois temas, como o topo) */
.card.dsc-palco { position: relative; overflow: hidden; color: #e9eaf0; border-color: rgba(255, 255, 255, .06);
  background:
    radial-gradient(760px 230px at 50% 122%, rgba(var(--vermelho-rgb), .22), transparent 70%),
    radial-gradient(420px 220px at -4% -10%, rgba(var(--vermelho-rgb), .12), transparent 70%),
    linear-gradient(180deg, #15161c 0%, #0c0d11 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 18px 44px rgba(12, 13, 17, .20); }
.card.dsc-palco::before { box-shadow: 0 0 10px rgba(var(--vermelho-rgb), .8); }
.card.dsc-palco:hover { border-color: rgba(var(--vermelho-rgb), .22); }
.dsc-palco .card-topo h3 { color: #fff; }
.dsc-palco .card-topo p { color: #7f8291; }
.dsc-palco .card-corpo { padding-bottom: 20px; }

.dsc-frase { font-family: var(--fonte-display); font-size: 19px; line-height: 1.3; letter-spacing: -.01em; color: #c9ccd8; }
.dsc-frase .dsc-n { font-size: 36px; font-weight: 700; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-right: 4px;
  text-shadow: 0 0 26px rgba(var(--vermelho-rgb), .55); }
.dsc-frase .dsc-faixa { color: #ff6f74; font-weight: 600; white-space: nowrap; }
.dsc-contexto { margin-top: 4px; font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .04em; color: #6f7283; }

.dsc-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.dsc-atalho { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .04); color: #aeb1bf;
  font-family: var(--fonte-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; transition: color .15s, border-color .15s, background .15s, box-shadow .15s; }
.dsc-atalho:hover { color: #fff; border-color: rgba(var(--vermelho-rgb), .5); }
.dsc-atalho.ativo { color: #fff; background: rgba(var(--vermelho-rgb), .18); border-color: rgba(var(--vermelho-rgb), .75); box-shadow: 0 0 16px rgba(var(--vermelho-rgb), .35); }

/* o fio seletor */
.fio-seletor { position: relative; margin: 8px 0 10px; user-select: none; -webkit-user-select: none; }
.fio-svg { display: block; overflow: visible; touch-action: pan-y; }
.fio-faixa { cursor: pointer; }
.fio-faixa-alvo { fill: transparent; }
.fio-barra { pointer-events: none; }
.fio-barra:not(.dentro) { fill: rgba(255, 255, 255, .09); transition: fill .15s; }
.fio-faixa:hover .fio-barra:not(.dentro) { fill: rgba(255, 255, 255, .17); }
.fio-barra-n { font-family: var(--fonte-mono); font-size: 10px; font-weight: 600; fill: #5d6070; pointer-events: none; }
.fio-barra-n.dentro { fill: #ffb3b6; }
.fio-marca { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.fio-marca-txt { font-family: var(--fonte-mono); font-size: 10px; fill: #6f7283; }
.fio-fundo { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.6; stroke-dasharray: 1.5 5.5; stroke-linecap: round; }
.fio-sel { fill: none; stroke: #ff3c43; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fio-alvo { fill: transparent; cursor: pointer; }
.fio-alca { cursor: grab; outline: none; touch-action: none; }
.fio-alca.ativa { cursor: grabbing; }
.fio-alca-halo { fill: rgba(var(--vermelho-rgb), .24); transform-box: fill-box; transform-origin: center; transform: scale(.6);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), fill .2s; animation: fio-respira 2.8s ease-in-out infinite; }
.fio-alca:hover .fio-alca-halo, .fio-alca:focus-visible .fio-alca-halo, .fio-alca.ativa .fio-alca-halo { transform: scale(1); fill: rgba(var(--vermelho-rgb), .32); animation: none; }
@keyframes fio-respira { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.fio-alca-anel { fill: #fff; stroke: #ff3c43; stroke-width: 2.6; transition: stroke-width .15s; }
.fio-alca:focus-visible .fio-alca-anel { stroke-width: 3.6; }
.fio-alca-miolo { fill: #ff3c43; }
.fio-pilula rect { fill: #e8262d; }
.fio-pilula text { fill: #fff; font-family: var(--fonte-mono); font-size: 11px; font-weight: 700; }
.fio-alca[aria-valuetext="sem limite"] .fio-pilula rect { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .24); }
.fio-alca[aria-valuetext="sem limite"] .fio-pilula text { fill: #c9ccd8; }

/* lista */
.dsc-dias { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.dsc-dias strong { font-family: var(--fonte-display); font-size: 14px; color: var(--tinta-900); min-width: 3ch; text-align: right; }
.dsc-dias-barra { width: 64px; height: 5px; border-radius: 99px; background: var(--tinta-100); overflow: hidden; flex: none; }
.dsc-dias-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vermelho-300), var(--vermelho)); }

@media (max-width: 720px) {
  .dsc-frase { font-size: 16px; }
  .dsc-frase .dsc-n { font-size: 29px; }
  .dsc-dias-barra { display: none; }
  .dsc-atalhos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dsc-atalhos::-webkit-scrollbar { display: none; }
  .dsc-atalho { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fio-alca-halo { animation: none; }
}

/* ==========================================================================
   v6 — perfis de acesso: contas no fio
   ========================================================================== */
.perfil.outro { background: var(--roxo-fundo); color: var(--roxo); }
.matriz-rolagem { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.matriz-perfis { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; }
.matriz-perfis th { padding: 6px 4px; text-align: center; font-family: var(--fonte-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-400); }
.matriz-perfis th.mp-grupo { border-bottom: 1px solid var(--borda); }
.matriz-perfis th.mp-nome-th { text-align: left; }
.mp-tela { vertical-align: bottom; }
.mp-tela .ic { display: block; width: 15px; height: 15px; margin: 4px auto 5px; color: var(--tinta-400); }
.mp-tela span { display: block; font-family: var(--fonte); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta-600); white-space: nowrap; }
.matriz-perfis td { position: relative; padding: 12px 4px; border-top: 1px solid var(--borda); text-align: center; }
.matriz-perfis td.mp-nome { position: sticky; left: 0; z-index: 2; background: var(--superficie); text-align: left; white-space: nowrap; padding-right: 18px; }
.mp-nome small { display: block; margin-top: 5px; font-size: 11px; color: var(--tinta-400); }
/* o fio passa por todas as contas da linha e fica vermelho onde a tela está liberada */
.mp-celula::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--tinta-150); }
.mp-celula.ligada::before { background: rgba(var(--vermelho-rgb), .55); box-shadow: 0 0 6px rgba(var(--vermelho-rgb), .35); }
.mp-conta { position: relative; z-index: 1; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--tinta-200); background: var(--superficie);
  display: inline-grid; place-items: center; color: #fff; cursor: pointer; transition: transform .15s, border-color .2s, box-shadow .2s; }
.mp-conta .ic { width: 13px; height: 13px; stroke-width: 3.2; }
.mp-conta:hover:not(:disabled) { transform: scale(1.14); border-color: var(--vermelho-400); }
.mp-conta:focus-visible { outline: 2px solid var(--vermelho-400); outline-offset: 2px; }
.mp-conta.ligada { border-color: transparent; background: radial-gradient(circle at 35% 30%, #ff7a7f, var(--vermelho) 55%, #a8161c);
  box-shadow: 0 0 0 3px rgba(var(--vermelho-rgb), .14), 0 4px 10px rgba(var(--vermelho-rgb), .35); }
.mp-conta:disabled { cursor: default; }
.mp-conta:disabled:not(.ligada) { opacity: .45; }
.mp-admin .mp-conta.ligada { filter: saturate(.55); box-shadow: none; }
.mp-conta.mudou { animation: mp-pop .42s cubic-bezier(.2, .8, .2, 1); }
@keyframes mp-pop { 0% { transform: scale(.55); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.mp-acoes { white-space: nowrap; text-align: right !important; }
.mp-acao { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-500); display: inline-grid; place-items: center; }
.mp-acao:hover { background: var(--tinta-100); color: var(--tinta-900); }
.mp-acao .ic, .mp-trava .ic { width: 15px; height: 15px; }
.mp-trava { color: var(--tinta-400); display: inline-grid; place-items: center; width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) { .mp-conta.mudou { animation: none; } }

/* ==========================================================================
   v6 — Estoque: o galpão de fios
   ========================================================================== */
.card.est-palco {
  background:
    radial-gradient(520px 170px at 16% -70px, rgba(255, 242, 222, .11), transparent 70%),
    radial-gradient(520px 170px at 50% -70px, rgba(255, 242, 222, .09), transparent 70%),
    radial-gradient(520px 170px at 84% -70px, rgba(255, 242, 222, .11), transparent 70%),
    radial-gradient(760px 240px at 50% 122%, rgba(var(--vermelho-rgb), .16), transparent 70%),
    linear-gradient(180deg, #15161c 0%, #0c0d11 100%);
}
.est-realces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.est-realces .rotulo-campo { color: #6f7283; margin-right: 4px; }
.galpao { display: flex; flex-direction: column; gap: 20px; }
.prateleira-placa { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; font-family: var(--fonte-mono); font-size: 11px; color: #7f8291; }
.prateleira-placa strong { flex: 0 1 auto; max-width: 45%; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #e9eaf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placa-barra { flex: 1 1 60px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.placa-barra i { display: block; height: 100%; background: linear-gradient(90deg, #ff3c43, rgba(255, 60, 67, .35)); box-shadow: 0 0 8px rgba(var(--vermelho-rgb), .6); }
.placa-num { white-space: nowrap; }
/* cada linha da grade tem a sua tábua: a faixa de baixo do fundo se repete a cada 98px */
.prateleira-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); grid-auto-rows: 98px; align-items: end; justify-items: center; padding: 0 8px;
  background: linear-gradient(to bottom, transparent 89px, rgba(255, 255, 255, .16) 89px 90px, #2a2b33 90px, #18191e 97px, rgba(0, 0, 0, .5) 97px 98px) 0 0 / 100% 98px repeat-y;
  border-left: 3px solid #23242b; border-right: 3px solid #23242b; }
.prateleira-grade > .cone { margin-bottom: 9px; }

/* o cone: tubete de papel em cima, fio enrolado com sombreamento de cilindro e sombra no chão */
.cone { --alt: calc(28px + 54px * var(--tam, .5)); position: relative; display: block; width: calc(var(--alt) * .64); height: var(--alt); padding: 0; border: 0; background: none;
  cursor: pointer; transform-origin: 50% 100%; transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .3s, filter .3s; -webkit-tap-highlight-color: transparent; }
.cone-fio { position: absolute; inset: 7px 0 2px; clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .1) 24%, rgba(255, 255, 255, .3) 45%, rgba(255, 255, 255, .06) 60%, rgba(0, 0, 0, .45) 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .08) 0 1px, rgba(0, 0, 0, .08) 1px 2.5px),
    var(--cor); }
.cone::before { content: ""; position: absolute; left: 50%; top: 0; width: 28%; height: 9px; transform: translateX(-50%);
  background: linear-gradient(90deg, #7d5f3a, #e3c9a2 45%, #94734b); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.cone::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -4px; height: 7px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); }
.cone:hover, .cone:focus-visible { transform: translateY(-5px) scale(1.06); }
.cone:hover .cone-fio, .cone:focus-visible .cone-fio { filter: brightness(1.15); }
.cone:focus-visible { outline: none; }
.cone:focus-visible::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .6), transparent); }
.cone-etiqueta { position: absolute; top: 6px; right: 1px; width: 8px; height: 11px; background: #ff3c43; clip-path: polygon(0 22%, 50% 0, 100% 22%, 100% 100%, 0 100%); }
.cone.apagado { opacity: .13; filter: grayscale(.85); }
.cone.realce::after { left: -16%; right: -16%; bottom: -6px; height: 10px; background: radial-gradient(closest-side, rgba(255, 70, 76, .95), transparent); }
.cone.selecionado { z-index: 2; transform: translateY(-7px) scale(1.1); }
.cone.selecionado .cone-fio { animation: cone-girar .9s linear infinite; }
@keyframes cone-girar { to { background-position: 0 0, 0 -10px, 0 0; } }
.cone-puxar { position: absolute; left: 50%; bottom: calc(100% - 3px); width: 2px; height: 160px; margin-left: -1px; pointer-events: none; transform-origin: 50% 100%;
  background: linear-gradient(to top, #ff3c43 0%, rgba(255, 60, 67, .6) 60%, rgba(255, 60, 67, 0)); box-shadow: 0 0 8px rgba(var(--vermelho-rgb), .7); animation: cone-puxar .7s cubic-bezier(.2, .8, .2, 1) both; }
.cone-puxar.sem-animar { animation: none; }
@keyframes cone-puxar { from { transform: scaleY(0); } }
.cone.fantasma { cursor: default; }
.cone.fantasma .cone-fio { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px), rgba(255, 255, 255, .05); }
.cone.fantasma::before { opacity: .25; }
.cone-grande { --alt: 132px; cursor: default; }

.galpao-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 11.5px; color: #7f8291; }
.galpao-legenda > span { display: inline-flex; align-items: center; gap: 8px; }
.galpao-legenda .ic { width: 14px; height: 14px; }
.lg-cones { display: inline-flex; align-items: flex-end; gap: 3px; }
.lg-cones i { --alt: calc(8px + 14px * var(--tam)); width: calc(var(--alt) * .64); height: var(--alt); background: #9a9dad; clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%); }
.lg-etiqueta { display: inline-block; width: 8px; height: 11px; background: #ff3c43; clip-path: polygon(0 22%, 50% 0, 100% 22%, 100% 100%, 0 100%); }
.galpao-vazio { position: relative; display: flex; flex-direction: column; gap: 20px; }
.galpao-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px;
  background: radial-gradient(closest-side, rgba(12, 13, 17, .92), rgba(12, 13, 17, .35)); color: #8f92a2; font-size: 12.5px; }
.galpao-msg .ic { width: 30px; height: 30px; color: #ff6f74; }
.galpao-msg strong { color: #fff; font-size: 15px; }

/* situação do estoque */
.sit { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.sit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sit-livre { background: var(--bom-fundo); color: var(--bom); }
.sit-reservado { background: var(--info-fundo); color: var(--info); }
.sit-separado { background: var(--roxo-fundo); color: var(--roxo); }
.sit-bloqueado { background: var(--critico-fundo); color: var(--critico); }
.cone-dica .sit, .ficha-fio-topo .sit { background: rgba(255, 255, 255, .07); }
.cone-dica .sit-livre, .ficha-fio-topo .sit-livre { color: #4ade80; }
.cone-dica .sit-reservado, .ficha-fio-topo .sit-reservado { color: #7cb4ff; }
.cone-dica .sit-separado, .ficha-fio-topo .sit-separado { color: #b3a8ff; }
.cone-dica .sit-bloqueado, .ficha-fio-topo .sit-bloqueado { color: #ff7a82; }

/* dica do cone */
.cone-dica { position: fixed; z-index: 90; width: max-content; max-width: 290px; padding: 12px 14px; border-radius: 12px; pointer-events: none;
  background: rgba(16, 17, 22, .97); color: #e9eaf0; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); font-size: 12px; }
.dica-cor { display: flex; align-items: center; font-size: 13px; }
.dica-cor .amostra-cor, .ficha-fio-topo .amostra-cor { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.dica-titulo { margin-top: 2px; color: #9a9dad; }
.dica-kg { margin-top: 8px; font-family: var(--fonte-display); font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.dica-kg small { display: block; font-family: var(--fonte); font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: #8f92a2; }
.dica-sits { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.dica-sits span { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dica-sits b { font-weight: 650; color: #d6d8e1; }
.dica-rodape { margin-top: 9px; color: #7f8291; font-size: 11px; }

/* ficha do fio */
.ficha-fio-topo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 22px; border-radius: var(--raio-g); color: #e9eaf0;
  background: radial-gradient(260px 160px at 14% 105%, rgba(var(--vermelho-rgb), .2), transparent 70%), linear-gradient(180deg, #15161c, #0c0d11); }
.ficha-fio-cone { display: grid; place-items: end center; height: 150px; }
.ficha-fio-num .rotulo-mini { color: #7f8291; }
.ficha-fio-num strong { display: block; font-family: var(--fonte-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.ficha-fio-num small { display: block; margin-top: 2px; font-size: 12px; color: #8f92a2; }
.sit-barra { display: flex; gap: 2px; height: 8px; margin-top: 14px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.sit-barra i.sit-livre { background: #39d17e; }
.sit-barra i.sit-reservado { background: #6da8ff; }
.sit-barra i.sit-separado { background: #a89cff; }
.sit-barra i.sit-bloqueado { background: #ff5d67; }
.sit-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: #c9ccd8; }
.sit-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.saida-mes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 150px; }
.sm-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.sm-val { font-size: 11px; font-weight: 650; color: var(--tinta-600); white-space: nowrap; }
.sm-trilho { flex: 1; display: flex; align-items: flex-end; width: 100%; max-width: 46px; border-radius: 8px; background: var(--tinta-50); overflow: hidden; }
.sm-trilho i { display: block; width: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--vermelho-400), var(--vermelho-700)); }
.sm-mes { font-family: var(--fonte-mono); font-size: 10.5px; color: var(--tinta-500); }

@media (max-width: 720px) {
  .prateleira-grade { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); grid-auto-rows: 84px;
    background: linear-gradient(to bottom, transparent 75px, rgba(255, 255, 255, .16) 75px 76px, #2a2b33 76px, #18191e 83px, rgba(0, 0, 0, .5) 83px 84px) 0 0 / 100% 84px repeat-y; }
  .cone { --alt: calc(24px + 44px * var(--tam, .5)); }
  .prateleira-placa strong { max-width: 55%; }
  .placa-num { font-size: 10px; }
  .ficha-fio-topo { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .cone-grande { --alt: 100px; }
  .ficha-fio-cone { height: 116px; }
  .saida-mes { gap: 6px; }
  .est-realces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .est-realces::-webkit-scrollbar { display: none; }
  .est-realces > * { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cone.selecionado .cone-fio, .cone-puxar { animation: none; }
}

/* ==========================================================================
   v6 — Produção: a linha da fábrica
   ========================================================================== */
.linha-producao { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 4px 0 2px; }
.lp-fio { position: absolute; left: 10%; right: 10%; top: 37px; height: 3px; border-radius: 3px; overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 60, 67, .55), #ff3c43 50%, rgba(255, 60, 67, .55)); box-shadow: 0 0 12px rgba(var(--vermelho-rgb), .6); }
/* faíscas que correm pelo fio, da montagem até o pronto */
.lp-fio::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 236, 237, .95) 46px 50px, transparent 50px 96px);
  animation: lp-fluir 2.4s linear infinite; }
@keyframes lp-fluir { to { background-position: 96px 0; } }
@keyframes lp-fluir-v { to { background-position: 0 96px; } }
.lp-estacao { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; transition: opacity .25s; }
.lp-estacao.apagada { opacity: .38; }
.lp-maquina { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #2d2e37, #121318 70%); box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .2s, box-shadow .2s; }
.lp-maquina .ic { width: 26px; height: 26px; color: #ff6f74; }
/* o anel mostra quanto da linha (em kg) está nesta estação */
.lp-anel { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(#ff3c43 calc(var(--carga, 0) * 360deg), rgba(255, 255, 255, .08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); }
button.lp-maquina:hover { transform: scale(1.06); }
button.lp-maquina:focus-visible { outline: 2px solid #ff6f74; outline-offset: 6px; }
.lp-estacao.ativa .lp-maquina { box-shadow: 0 0 0 5px rgba(var(--vermelho-rgb), .22), 0 0 28px rgba(var(--vermelho-rgb), .6); }
.lp-pronto .lp-maquina { cursor: default; background: radial-gradient(circle at 35% 30%, #ff5a60, #a8161c 72%); }
.lp-pronto .lp-maquina .ic { color: #fff; width: 30px; height: 30px; stroke-width: 2.6; }
.lp-info { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.lp-info strong { font-family: var(--fonte-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #e9eaf0; }
.lp-qtd { font-family: var(--fonte-display); font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.lp-qtd small { font-family: var(--fonte); font-size: 12px; font-weight: 500; letter-spacing: 0; color: #8f92a2; }
.lp-kg, .lp-tempo { font-size: 11.5px; color: #8f92a2; }
.lp-alerta { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: #ff7a82; }
.lp-alerta .ic { width: 12px; height: 12px; }
.lp-link { margin-top: 5px; font-size: 12px; font-weight: 600; color: #ff6f74; }
.lp-vazio { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px; text-align: center; font-size: 12.5px; color: #8f92a2; }
.lp-vazio .ic { width: 30px; height: 30px; color: #ff6f74; }
.lp-vazio strong { font-size: 15px; color: #fff; }
.op-etapa { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.texto-atrasado { color: var(--critico); font-weight: 650; }
@media (prefers-reduced-motion: reduce) {
  .lp-fio::after, .op-segs i.atual, .q-eixo-passado::after { animation: none; }
}

/* ==========================================================================
   v7 — Produção: as OPs de cada estação, em cartões que se leem
   ========================================================================== */
.lp-lista { display: flex; flex-direction: column; gap: 6px; align-self: stretch; margin-top: 6px; text-align: left; }
.lp-lista-tit { font-family: var(--fonte-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: #6f7283; }
.lp-lista-vazia { padding: 12px 8px; border: 1px dashed rgba(255, 255, 255, .1); border-radius: 10px; font-size: 11.5px; text-align: center; color: #6f7283; }
.lp-op { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px; text-align: left;
  background: rgba(255, 255, 255, .04); color: #c9ccd8; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.lp-op:hover, .lp-op:focus-visible { transform: translateY(-2px); border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .08); outline: none; }
.lp-op.atrasada { border-color: rgba(255, 60, 67, .4); }
.lp-op.atrasada::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #ff3c43; }
.cone.cone-mini { --alt: calc(28px + 14px * var(--tam, .5)); flex: none; cursor: inherit; }
.cone.cone-mini:hover { transform: none; }
.cone.cone-mini::after { display: none; }
.lp-op:hover .cone-mini .cone-fio, .lp-op:focus-visible .cone-mini .cone-fio { animation: cone-girar .9s linear infinite; }
.lp-op-txt { display: flex; flex-direction: column; flex: 1; gap: 1px; min-width: 0; }
.lp-op-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 6px; }
.lp-op-topo strong { font-family: var(--fonte-mono); font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.lp-op-topo em { font-size: 11px; font-style: normal; font-weight: 600; color: #d6d8e1; white-space: nowrap; }
.lp-op.atrasada .lp-op-topo em { color: #ff8a90; }
.lp-op-fio, .lp-op-cor, .lp-op-cli { overflow: hidden; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.lp-op-fio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; color: #d6d8e1; }
.lp-op-cor { color: #9a9dad; }
.lp-op-cli { color: #6f7283; }
.lp-op-vencida { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: #ff8a90; }
.lp-op-vencida .ic { width: 11px; height: 11px; }
.lp-ver { padding: 7px 8px; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 10px; background: transparent; font-size: 11.5px; font-weight: 600; color: #aeb1bf; cursor: pointer; transition: color .15s, border-color .15s; }
.lp-ver:hover, .lp-ver:focus-visible { border-color: #ff6f74; color: #fff; outline: none; }
/* na tabela: as 4 etapas numa barrinha */
.op-segs { display: inline-flex; gap: 2px; }
.op-segs i { width: 11px; height: 5px; border-radius: 2px; background: var(--tinta-150); }
.op-segs i.feita { background: var(--vermelho); }
.op-segs i.atual { background: var(--vermelho-300); animation: op-seg-pulso 1.6s ease-in-out infinite; }
@keyframes op-seg-pulso { 50% { opacity: .45; } }

/* ==========================================================================
   v7 — Pedidos: quadro de entregas
   ========================================================================== */
.quadro-rolagem { margin-top: 12px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.quadro { --vao: 12px; --col: calc((100% - 4 * var(--vao)) / 5); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px var(--vao); min-width: 900px; }
/* a linha do tempo: o fio aceso até hoje, costurado daí em diante */
.q-eixo { grid-column: 1 / -1; position: relative; height: 40px; }
.q-eixo-rotulo { position: absolute; top: 0; font-family: var(--fonte-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7f8291; }
.q-eixo-rotulo.esq { left: 0; color: #ff8a90; }
.q-eixo-rotulo.dir { right: 0; }
.q-eixo-passado { position: absolute; left: 0; bottom: 8px; width: calc(var(--col) + var(--vao) / 2); height: 3px; overflow: hidden; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(255, 60, 67, .3), #ff3c43); box-shadow: 0 0 12px rgba(var(--vermelho-rgb), .6); }
.q-eixo-passado::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 236, 237, .95) 46px 50px, transparent 50px 96px); animation: lp-fluir 2.4s linear infinite; }
.q-eixo-futuro { position: absolute; left: calc(var(--col) + var(--vao) / 2); right: 0; bottom: 8px; border-top: 3px dotted rgba(255, 255, 255, .22); }
.q-hoje { position: absolute; left: calc(var(--col) + var(--vao) / 2); bottom: 0; z-index: 1; transform: translateX(-50%); height: 19px; padding: 0 10px; border-radius: 999px; font-family: var(--fonte-mono); font-size: 10.5px; font-weight: 700; line-height: 19px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #fff;
  background: #e8262d; box-shadow: 0 0 16px rgba(var(--vermelho-rgb), .7); }
.q-coluna { --tom: rgba(255, 255, 255, .34); --tom-texto: #d6d8e1; display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-snap-align: start; transition: opacity .2s; }
.q-coluna.atrasado { --tom: #ff3c43; --tom-texto: #ff8a90; }
.q-coluna.urgente { --tom: #f3b545; --tom-texto: #f6c870; }
.q-coluna.apagada { opacity: .42; }
.q-cabeca { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; text-align: left; background: rgba(255, 255, 255, .03); color: #e9eaf0; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.q-cabeca:hover, .q-cabeca:focus-visible { border-color: var(--tom); background: rgba(255, 255, 255, .06); outline: none; }
.q-coluna.ativa .q-cabeca { border-color: var(--tom); background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 1px var(--tom), 0 6px 22px rgba(0, 0, 0, .4); }
.q-nome { font-family: var(--fonte-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tom-texto); white-space: nowrap; }
.q-num { font-family: var(--fonte-display); font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.q-num small { font-family: var(--fonte); font-size: 12px; font-weight: 500; letter-spacing: 0; color: #8f92a2; }
.q-soma { font-size: 11.5px; color: #8f92a2; white-space: nowrap; }
.q-barra { display: block; height: 3px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .07); }
.q-barra i { display: block; height: 100%; border-radius: inherit; background: var(--tom); }
.q-cartoes { display: flex; flex-direction: column; gap: 6px; }
.q-cartao { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 11px 9px 13px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px; text-align: left;
  background: rgba(255, 255, 255, .04); color: #c9ccd8; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.q-cartao::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tom); }
.q-cartao:hover, .q-cartao:focus-visible { transform: translateY(-2px); border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .08); outline: none; }
.q-cliente { overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.q-prazo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; }
.q-prazo b { font-weight: 650; color: var(--tom-texto); white-space: nowrap; }
.q-prazo time { font-family: var(--fonte-mono); font-size: 11px; color: #7f8291; }
.q-linha { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; color: #9a9dad; }
.q-ped { font-family: var(--fonte-mono); font-size: 10.5px; color: #6f7283; }
.q-entregue { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 10.5px; color: #8f92a2; white-space: nowrap; }
.q-entregue-barra { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.q-entregue-barra i { display: block; height: 100%; background: #4ade80; }
.q-mais { padding: 7px 8px; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 10px; background: transparent; font-size: 11.5px; font-weight: 600; color: #aeb1bf; cursor: pointer; transition: color .15s, border-color .15s; }
.q-mais:hover, .q-mais:focus-visible { border-color: var(--tom); color: #fff; outline: none; }
.q-vazio { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 8px; border: 1px dashed rgba(255, 255, 255, .1); border-radius: 10px; font-size: 11.5px; color: #6f7283; }
.q-vazio .ic { width: 13px; height: 13px; color: #4ade80; }
.q-tudo-certo { font-weight: 600; color: #4ade80; }
.q-sem-data { margin-top: 10px; }
.q-sem-data:empty { display: none; }
.q-sem-data .link { color: #ff8a90; }
@media (max-width: 720px) {
  .quadro-rolagem { scroll-snap-type: x proximity; }
  .quadro { min-width: 1080px; }
}

/* rolar até um cartão não pode deixá-lo escondido embaixo do topo */
.card { scroll-margin-top: calc(var(--altura-topo) + var(--altura-ticker) + 14px); }

/* a linha se adapta à largura que sobra no cartão (com o menu aberto ou recolhido):
   5 colunas no fio horizontal; em tela média, uma fileira por estação; no celular, tudo empilhado */
.prod-palco .card-corpo { container: linha / inline-size; }
@container linha (max-width: 900px) {
  .linha-producao { grid-template-columns: 1fr; gap: 22px; }
  .lp-fio { left: 37px; right: auto; top: 38px; bottom: 38px; width: 3px; height: auto; }
  .lp-fio::after { background: repeating-linear-gradient(180deg, transparent 0 46px, rgba(255, 236, 237, .95) 46px 50px, transparent 50px 96px); animation-name: lp-fluir-v; }
  .lp-estacao { display: grid; grid-template-columns: 76px 176px minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left; }
  .lp-info { align-items: flex-start; }
  .lp-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
  .lp-lista-tit { grid-column: 1 / -1; text-align: left; }
  .lp-lista-vazia, .lp-ver { grid-column: 1 / -1; }
}
@container linha (max-width: 620px) {
  .lp-estacao { grid-template-columns: 76px minmax(0, 1fr); }
  .lp-lista { grid-column: 2; display: flex; margin-top: 8px; }
}
@media (max-width: 720px) {
  .campo-data { flex-wrap: wrap; height: auto; min-height: 36px; padding-block: 6px; max-width: 100%; }
}

/* login: o fio que sai da logo e acompanha o cursor */
.fio-cursor { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.login-marca img.fio-chegou { animation: logo-acende .7s ease-out; }
@keyframes logo-acende { 35% { filter: drop-shadow(0 0 64px rgba(var(--vermelho-rgb), .95)) brightness(1.15); } }