/* Componentes do hub admin. Os tokens vivem em tokens.css (fonte única,
   compartilhada com os relatórios de scripts/). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
   background: var(--bg); color: var(--text);
   font-family: var(--font); font-size: 13px; line-height: 1.45;
   padding: 14px; -webkit-text-size-adjust: 100%;
}
.container { max-width: 1440px; margin: 0 auto; }

/* ───────────────────────────── cabeçalho ───────────────────────────── */

.topo { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.marca { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.marca em { font-style: normal; color: var(--muted); font-weight: 500; }
.topo-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.chip-meta {
   font-size: 11px; color: var(--muted); background: var(--surface);
   border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px;
}
.chip-meta b { color: var(--primary); font-weight: 600; }

.abas {
   position: sticky; top: 0; z-index: 20; background: var(--bg);
   display: flex; gap: 6px; align-items: center; padding: 8px 0;
   border-bottom: 1px solid var(--border); margin-bottom: 12px; flex-wrap: wrap;
}
.aba {
   font: inherit; font-size: 12px; font-weight: 600; padding: 5px 14px;
   border-radius: 999px; border: 1px solid var(--border);
   background: var(--surface); color: var(--text); cursor: pointer;
}
.aba:hover { border-color: var(--primary); color: var(--primary); }
.aba[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

.btn {
   font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px;
   border-radius: 6px; border: 1px solid var(--border);
   background: var(--surface); color: var(--text); cursor: pointer;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ───────────────────────────── banner ───────────────────────────── */

.banner {
   border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
   border: 1px solid var(--crit-border); background: var(--crit-bg); color: var(--crit);
   font-weight: 600; display: flex; gap: 10px; align-items: center;
}
.banner.warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.banner small { font-weight: 500; opacity: .85; }

/* ───────────────────────────── grid e cards ───────────────────────────── */

.grid { display: grid; gap: 10px; }
.g6 { grid-template-columns: repeat(6, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.cols-32 { grid-template-columns: 3fr 2fr; }
@media (max-width: 1100px) { .g6 { grid-template-columns: repeat(3, 1fr); } .g3, .g2, .cols-32 { grid-template-columns: 1fr; } }
@media (max-width: 700px)  { .g6 { grid-template-columns: repeat(2, 1fr); } }

.card {
   background: var(--surface); border: 1px solid var(--border);
   border-radius: var(--radius); padding: 12px 14px; min-width: 0;
}
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.card h2 {
   font-size: 12px; font-weight: 700; text-transform: uppercase;
   letter-spacing: .7px; color: var(--muted);
}
.card h2 .nota { text-transform: none; letter-spacing: 0; font-weight: 500; }
.card-acao { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* Stat tiles */
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; }
.stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.stat-value { font-size: 25px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; margin-top: 3px; }
.stat-value small { font-size: 14px; font-weight: 700; color: var(--muted); }
.stat-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.stat-sub b { color: var(--text); font-weight: 600; }

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

/* Scroll VERTICAL dentro da tabela, não na página: a lista de Assinantes tem ~470
 * linhas, e sem o teto chegar ao diagnóstico embaixo era rolar a página inteira.
 * O `max-height` só age em quem passa dele - as tabelas equivalentes dos gráficos
 * (≤13 linhas) nem percebem. E é este overflow-y que faz o `position: sticky` do
 * `th` funcionar de fato: antes o wrap só tinha overflow-x, o container não rolava
 * na vertical e o cabeçalho "sticky" ia embora junto com a página. */
.tabela-wrap { overflow: auto; max-height: min(70vh, 760px); }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th {
   font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
   color: var(--muted); font-weight: 700; position: sticky; top: 0; z-index: 1;
   background: var(--surface); cursor: pointer; user-select: none;
   /* Com `border-collapse: collapse` a borda do th NÃO acompanha o sticky (fica
    * colada na posição original e o cabeçalho rola "sem chão") - o risco de baixo
    * vira sombra, que é do elemento e viaja com ele. */
   border-bottom: none; box-shadow: 0 1px 0 var(--border);
}
th[data-ord]::after { content: ' ↕'; opacity: .3; }
th[data-ord][aria-sort="ascending"]::after  { content: ' ↑'; opacity: 1; color: var(--primary); }
th[data-ord][aria-sort="descending"]::after { content: ' ↓'; opacity: 1; color: var(--primary); }
tbody tr:hover { background: var(--surface2); }
td.num, th.num { text-align: right; font-family: var(--mono); }
td.mut { color: var(--muted); }

/* Tabela equivalente sob cada gráfico — caminho de acessibilidade e de conferência */
details.dados { margin-top: 8px; }
details.dados > summary {
   cursor: pointer; font-size: 11px; color: var(--muted); font-weight: 600;
   list-style: none; padding: 2px 0;
}
details.dados > summary:hover { color: var(--primary); }
details.dados[open] > summary { margin-bottom: 6px; }

/* ───────────────────────────── badges ───────────────────────────── */

.badge {
   display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
   border-radius: 999px; border: 1px solid var(--border); background: var(--surface2);
   color: var(--muted); white-space: nowrap;
}
.badge.wix  { background: hsl(213 96% 57% / .12); border-color: hsl(213 96% 57% / .3); color: var(--primary); }
.badge.mp   { background: hsl(160 60% 40% / .14); border-color: hsl(160 60% 40% / .32); color: var(--c2); }
.badge.ok   { background: var(--ok-bg);   border-color: var(--ok-border);   color: var(--ok); }
.badge.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.badge.crit { background: var(--crit-bg); border-color: var(--crit-border); color: var(--crit); }

.legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ───────────────────────────── filtros ───────────────────────────── */

.filtros { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.filtros label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
select, input[type="search"] {
   font: inherit; font-size: 12px; padding: 4px 9px; border: 1px solid var(--border);
   border-radius: 6px; background: var(--surface); color: var(--text);
}
select:focus, input:focus { outline: none; border-color: var(--primary); }
input[type="search"] { min-width: 190px; }

/* ───────────────────────────── gráficos ───────────────────────────── */

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grade line { stroke: var(--border); stroke-width: 1; }
.chart .eixo { fill: var(--muted); font-size: 10px; font-family: var(--font); }
.chart .rotulo-dado { fill: var(--text); font-size: 10px; font-weight: 700; font-family: var(--font); }
/* Coluna zerada: toco na linha de base + "0" em cinza. Slot sem marca nenhuma lê como
   gráfico cortado, e foi assim que o calendário de renovação passou por "mostra só 5". */
.chart .marca-zero { fill: var(--border); }
.chart .rotulo-dado.zero { fill: var(--muted); font-weight: 600; }
.chart .marca-serie { transition: opacity 120ms ease; }
.chart.hover .marca-serie { opacity: .45; }
.chart.hover .marca-serie.destaque { opacity: 1; }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart .hit { fill: transparent; cursor: crosshair; }

.tip {
   position: absolute; pointer-events: none; z-index: 40; opacity: 0;
   transform: translate(-50%, -100%); transition: opacity 120ms ease;
   background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
   padding: 7px 9px; font-size: 11.5px; box-shadow: 0 6px 20px hsl(215 50% 12% / .16);
   min-width: 130px;
}
.tip.on { opacity: 1; }
.tip .tip-tit { font-weight: 700; margin-bottom: 4px; }
.tip .tip-l { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tip .tip-l i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tip .tip-l span { color: var(--muted); margin-right: auto; }
.tip .tip-l b { font-family: var(--mono); font-weight: 700; }
.tip .tip-tot { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }

/* ───────────────── relatório de ops embutido ───────────────── */

/* O relatório traz o próprio `.container{max-width:1440px}`; como o nosso também é
   1440, o de dentro não constrange nada — e o padding do body dele é zerado via JS
   após o load, senão soma com o nosso e a margem esquerda foge das outras abas. */
#rel {
   width: 100%; border: 0; display: block;
   background: var(--bg); border-radius: var(--radius);
   min-height: 400px;
}

.vazio { color: var(--muted); font-size: 12px; padding: 14px 0; text-align: center; }
.rodape { color: var(--muted); font-size: 11px; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.erro { border-color: var(--crit-border); background: var(--crit-bg); color: var(--crit); }

/* ───────────── filtro global e blocos que não se aplicam ───────────── */

.filtro-global {
   background: var(--surface); border: 1px solid var(--border);
   border-radius: var(--radius); padding: 7px 12px;
}
.nao-aplica { padding: 22px 10px; line-height: 1.6; }
.nao-aplica b { color: var(--text); }
.nao-aplica small { display: inline-block; margin-top: 4px; opacity: .8; }

/* ─────────────── diagnóstico e recomendações (fim de cada aba) ─────────────── */

/* Mesmo markup dos dois relatórios de ops - o renderizador é um só
   (public/diagnostico.js). A CSS é que continua em três lugares, porque os relatórios
   têm que seguir autocontidos. Ao mexer aqui, mexer nos dois `<style>` de scripts/. */
.diagnostico { margin-top: 12px; }
.insight {
   display: flex; gap: 8px; align-items: flex-start;
   padding: 7px 10px; border-radius: 8px; margin-bottom: 6px;
}
.insight.ok { background: var(--ok-bg); }
.insight.warn { background: var(--warn-bg); }
.insight.crit { background: var(--crit-bg); }
.insight-icon { font-weight: 800; }
.insight.ok .insight-icon { color: var(--ok); }
.insight.warn .insight-icon { color: var(--warn); }
.insight.crit .insight-icon { color: var(--crit); }
.insight-body { min-width: 0; font-size: 12.5px; }
.insight-head { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
/* O rótulo separa "tem trabalho aqui" de "só saiba disso" antes de a frase ser lida. */
.insight-tag {
   font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
   padding: 1px 6px; border-radius: 4px; flex-shrink: 0; color: #fff;
}
.insight-tag.ok { background: var(--ok); }
.insight-tag.warn { background: var(--warn); }
.insight-tag.crit { background: var(--crit); }
/* Recência do evento (`quando()` em diagnostico.js): `quente` ocorreu hoje e herda a cor da
   severidade; `frio` está na janela mas parou, e o contorno neutro é o que separa "agir
   agora" de "já passou" antes de a frase ser lida. */
.insight-quando {
   font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
   padding: 1px 6px; border-radius: 4px; flex-shrink: 0;
   border: 1px solid var(--border); color: var(--muted); background: var(--surface);
}
.insight.crit .insight-quando.quente { border-color: var(--crit); color: var(--crit); }
.insight.warn .insight-quando.quente { border-color: var(--warn); color: var(--warn); }
.insight-acao { margin-top: 3px; color: var(--muted); font-size: 12px; }
.insight-acao b { color: var(--text); }
.insight-acao code, .insight-head code {
   font-family: var(--mono); font-size: 11.5px; background: var(--surface2);
   border-radius: 3px; padding: 0 4px;
}
.insight-ref { display: inline-block; margin-top: 3px; font-size: 11px; color: var(--primary); text-decoration: none; }
.insight-ref:hover { text-decoration: underline; }
.diagnostico-nota { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* A barra de abas é sticky: sem a margem, o link do `ref` para debaixo dela. */
[id^="sec-"] { scroll-margin-top: 60px; }

/* ───────────────────── notas de rodapé da página ───────────────────── */

/* O marcador é o único elemento clicável DENTRO de um título, então precisa de área de
   toque própria — daí o padding em vez de só o `sup` cru. */
.nota-ref { font-size: 9px; font-weight: 800; margin-left: 2px; }
.nota-ref a {
   color: var(--primary); text-decoration: none; padding: 0 2px;
   border-radius: 3px; background: var(--surface2);
}
.nota-ref a:hover { background: var(--primary); color: #fff; }

.notas {
   margin-top: 18px; padding: 14px 16px; background: var(--surface);
   border: 1px solid var(--border); border-radius: var(--radius);
}
.notas h2 {
   font-size: 12px; font-weight: 700; text-transform: uppercase;
   letter-spacing: .7px; color: var(--muted); margin-bottom: 10px;
}
.notas ol { margin: 0; padding-left: 22px; }
.notas li {
   font-size: 12px; color: var(--muted); line-height: 1.55;
   padding: 3px 0; scroll-margin-top: 60px;   /* a barra de abas é sticky */
}
.notas li b { color: var(--text); }
.notas li code {
   font-family: var(--mono); font-size: 11.5px;
   background: var(--surface2); border-radius: 3px; padding: 0 4px;
}
/* Realce ao chegar pelo marcador: sem isso o salto leva a uma lista de 8 itens
   iguais e a pessoa tem que reencontrar qual era. */
.notas li:target { color: var(--text); }
.notas li:target::marker { color: var(--primary); font-weight: 800; }