/* UI da frota — CSS próprio, sem framework (CSP 'self', spec_ui.md §3.1).
   Tema claro/escuro pelo prefers-color-scheme; layout de tabela vira cartão
   em telas estreitas (o operador consulta isso no celular, em campo). */

:root {
  --fundo: #f6f7f9;
  --superficie: #ffffff;
  --borda: #d9dde3;
  --texto: #1c2127;
  --suave: #616b78;
  --acento: #1f6feb;
  --ok: #1a7f37;
  --alerta: #9a6700;
  --ruim: #c1121f;
  --ok-fundo: #e8f5ec;
  --alerta-fundo: #fdf6e3;
  --ruim-fundo: #fdecec;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14171c;
    --superficie: #1c2027;
    --borda: #2d333b;
    --texto: #e6edf3;
    --suave: #9aa4b0;
    --acento: #58a6ff;
    --ok: #3fb950;
    --alerta: #d29922;
    --ruim: #f85149;
    --ok-fundo: #12261a;
    --alerta-fundo: #2a2213;
    --ruim-fundo: #2d1618;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--acento); }

main { padding: 1rem 1.25rem 3rem; max-width: 1200px; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: .2rem 0; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h3 { font-size: .95rem; }

code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; }

/* --- topo ---------------------------------------------------------------- */

.topo {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.marca { font-weight: 700; text-decoration: none; color: var(--texto); }
.topo nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.topo nav a {
  padding: .35rem .7rem; border-radius: 6px; text-decoration: none;
  color: var(--suave);
}
.topo nav a:hover { background: var(--fundo); }
.topo nav a.ativo { background: var(--fundo); color: var(--texto); font-weight: 600; }
.topo-direita { display: flex; align-items: center; gap: .6rem; }
.ator { color: var(--suave); font-size: .85rem; }

.rodape {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; color: var(--suave); font-size: .8rem;
  border-top: 1px solid var(--borda);
}

/* --- avisos --------------------------------------------------------------- */

.avisos { position: fixed; right: 1rem; top: 3.6rem; z-index: 50; width: min(380px, 92vw); }
.aviso-item {
  background: var(--superficie); border: 1px solid var(--borda);
  border-left-width: 4px; border-radius: 6px;
  padding: .6rem .8rem; margin-bottom: .5rem; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.aviso-item.ok { border-left-color: var(--ok); }
.aviso-item.ruim { border-left-color: var(--ruim); }
.aviso-item.info { border-left-color: var(--acento); }

/* --- blocos --------------------------------------------------------------- */

.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 8px; padding: 1rem; margin-bottom: 1rem;
}
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }

.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.tile {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 8px; padding: .7rem .9rem; display: flex; flex-direction: column;
}
.tile b { font-size: 1.5rem; line-height: 1.1; }
.tile span { color: var(--suave); font-size: .8rem; }
.tile.alerta { border-color: var(--alerta); }
.tile.ruim { border-color: var(--ruim); }

.sub { color: var(--suave); margin: .15rem 0 .6rem; }
.nota { color: var(--suave); font-size: .85rem; }
.nota-ui { color: var(--alerta); }
.vazio { color: var(--suave); font-style: italic; }

.aviso {
  background: var(--alerta-fundo); border: 1px solid var(--alerta);
  border-radius: 6px; padding: .6rem .8rem; margin: .5rem 0; font-size: .9rem;
}

/* --- tabelas -------------------------------------------------------------- */

.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela th { color: var(--suave); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
.tabela tr:hover td { background: var(--fundo); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr.destaque td { background: var(--alerta-fundo); }
.apelido { display: block; color: var(--suave); font-size: .8rem; }
.suspeito { color: var(--alerta); }
.hash { color: var(--suave); }
.hw-desconhecido { color: var(--alerta); font-style: italic; }
tr.bin-incompativel td, option.bin-incompativel { opacity: .45; }
.confirma-familia { flex-direction: row; align-items: center; gap: .4rem; }

/* --- pílulas -------------------------------------------------------------- */

.pilula {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .75rem; border: 1px solid var(--borda); white-space: nowrap;
}
.pilula.ok, .pilula.estado-online { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok); }
.pilula.ruim, .pilula.estado-bloqueado { background: var(--ruim-fundo); color: var(--ruim); border-color: var(--ruim); }
.pilula.alerta, .pilula.estado-pendente, .pilula.estado-mudo {
  background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta);
}
.pilula.estado-offline { color: var(--suave); }
td.ruim, dd.ruim { color: var(--ruim); font-weight: 600; }
dd.ok { color: var(--ok); }

/* --- formulários ---------------------------------------------------------- */

button, .botao {
  font: inherit; padding: .4rem .8rem; border-radius: 6px;
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto); cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover:not(:disabled) { border-color: var(--acento); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.perigo { border-color: var(--ruim); color: var(--ruim); }
button.link { border: none; background: none; color: var(--acento); padding: 0; }

input, select {
  font: inherit; padding: .35rem .5rem; border-radius: 6px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  max-width: 100%;
}
label { display: inline-flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--suave); }

.linha { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.barra-filtros {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .75rem;
}
.barra-filtros label { flex-direction: row; align-items: center; gap: .3rem; }
.botoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.acoes { display: flex; gap: .4rem; }
.acoes-config { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
.campo { display: flex; flex-direction: column; gap: .2rem; }
.campo label { color: var(--texto); font-weight: 600; flex-direction: row; gap: .4rem; align-items: center; }
.campo small { color: var(--suave); font-size: .78rem; }
.erro-campo { color: var(--ruim); font-size: .8rem; margin: .2rem 0 0; }
.alvos { border: 1px solid var(--borda); border-radius: 6px; display: grid; gap: .3rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.alvos label { flex-direction: row; align-items: center; gap: .4rem; color: var(--texto); }

details.cartao summary { cursor: pointer; display: flex; gap: .6rem; align-items: center; }
details.cartao summary h2 { display: inline; margin: 0; }

/* --- abas ----------------------------------------------------------------- */

.abas { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.abas button { border-radius: 999px; }
.abas button.ativo { background: var(--acento); border-color: var(--acento); color: #fff; }
.aba.oculta { display: none; }

.cabecalho-device { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.grade { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .8rem; margin: 0; }
.grade dt { color: var(--suave); }
.grade dd { margin: 0; }
.grade dd small { display: block; color: var(--suave); }

/* --- gráfico -------------------------------------------------------------- */

.grafico {
  display: flex; align-items: flex-end; gap: 2px; height: 130px;
  padding-top: .5rem; overflow-x: auto;
}
.barra-caixa { flex: 1 0 14px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.barra { background: var(--acento); border-radius: 2px 2px 0 0; min-height: 2px; }
.barra-caixa .hora { font-size: .65rem; color: var(--suave); text-align: center; }

/* Barras empilhadas: a pilha cresce de baixo para cima, então a primeira
   fatia (raio) fica na base — column-reverse em vez de reordenar em Python. */
.pilha { display: flex; flex-direction: column-reverse; border-radius: 2px 2px 0 0; overflow: hidden; min-height: 2px; }
.fatia { width: 100%; min-height: 1px; }
.fatia.tipo-lightning, .chave.tipo-lightning { background: var(--acento); }
.fatia.tipo-disturber, .chave.tipo-disturber { background: var(--alerta); }
.fatia.tipo-noise, .chave.tipo-noise { background: var(--suave); }
.legenda { color: var(--suave); font-size: .8rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.legenda .chave { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
.legenda .chave + * { margin-right: .6rem; }

.histograma .barra-caixa { flex: 1 0 18px; }

/* --- ciclo diurno --------------------------------------------------------- */

.heatmap { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.heat-horas, .heat-linha { display: grid; grid-template-columns: 3.2rem repeat(24, minmax(10px, 1fr)); gap: 2px; align-items: center; }
.heat-horas span { font-size: .6rem; color: var(--suave); text-align: center; }
.heat-dia { font-size: .7rem; color: var(--suave); }
.heat-celula {
  height: 14px; border-radius: 2px;
  /* --i vem do template (0 a 1). color-mix mantém a célula sem raio na cor
     neutra da borda, em vez de um azul fraco que se lê como "teve pouco". */
  background: var(--borda);
  background: color-mix(in srgb, var(--acento) calc(var(--i, 0) * 100%), var(--borda));
}

/* --- perfil da sessão ----------------------------------------------------- */

.perfil { position: relative; }
.perfil-svg { width: 100%; height: 190px; display: block; }
.perfil-fundo { fill: var(--fundo); stroke: var(--borda); stroke-width: .3; }
.perfil-ponto { fill: var(--acento); }
.perfil-reta { stroke: var(--ruim); stroke-width: .4; }
.perfil-salto { stroke: var(--alerta); stroke-width: .3; stroke-dasharray: 1.5 1.5; }
.perfil-topo, .perfil-base { position: absolute; left: .3rem; font-size: .7rem; color: var(--suave); }
.perfil-topo { top: .1rem; }
.perfil-base { bottom: .1rem; }

/* --- mapa ----------------------------------------------------------------- */

.mapa { width: 100%; max-width: 520px; aspect-ratio: 1; display: block; margin: 0 auto; }
/* O cartão é --superficie: pintar o município da mesma cor deixava o mapa
   com cara de espaço em branco. Fundo distinto e traço em --suave. */
.mapa { background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; }
.mapa-municipios path { fill: var(--fundo); stroke: var(--suave); stroke-width: 1.2px; stroke-opacity: .55; }
.mapa-anel { fill: none; stroke: var(--acento); stroke-width: 1.5px; stroke-dasharray: 4 4; }
.mapa-rotulo { fill: var(--acento); text-anchor: middle; font-weight: 600; paint-order: stroke; stroke: var(--superficie); stroke-width: .35; }
.mapa-estacao { fill: var(--ruim); stroke: var(--superficie); stroke-width: 1px; }
/* paint-order + contorno na cor do fundo: o nome continua legível quando cai
   em cima de uma linha de divisa ou de um anel. */
.rede-celula { fill: var(--ruim); fill-opacity: .18; stroke: var(--ruim); stroke-opacity: .5; stroke-width: .5px; }
.rede-celula.sobre-satelite { fill: #fff; fill-opacity: .12; stroke: #fff; stroke-opacity: .8; }
.mapa-cidade { fill: var(--texto); text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: var(--fundo); stroke-width: .5; opacity: .85; }

/* --- satélite ------------------------------------------------------------- */

.satelite { width: 100%; max-width: 560px; aspect-ratio: 1; display: block; margin: 0 auto; border-radius: 8px; background: #000; }
.satelite image { image-rendering: auto; }
.sat-contorno path { fill: none; stroke: #fff; stroke-width: .7px; opacity: .45; }
.sat-escala { fill: none; stroke: #fff; stroke-width: 1px; stroke-dasharray: 3 5; opacity: .5; }
.sat-alcance { fill: none; stroke: var(--acento); stroke-width: 2px; }
.sat-rotulo { fill: #fff; text-anchor: middle; opacity: .75; }
.sat-estacao { fill: var(--ruim); stroke: #fff; stroke-width: 1px; }

/* --- login ---------------------------------------------------------------- */

.tela-login { display: grid; place-items: center; min-height: 100vh; }
.login { width: min(340px, 92vw); display: flex; flex-direction: column; gap: .8rem; }
.login h1 { margin: 0; }
.login .sub { margin: 0; }
.login label { color: var(--texto); }
.login input { width: 100%; }
.erro { color: var(--ruim); background: var(--ruim-fundo); border-radius: 6px; padding: .5rem .7rem; margin: 0; }

/* --- telas estreitas ------------------------------------------------------ */

@media (max-width: 720px) {
  .tabela thead { display: none; }
  .tabela tr {
    display: block; border: 1px solid var(--borda); border-radius: 8px;
    margin-bottom: .6rem; padding: .3rem .5rem; background: var(--superficie);
  }
  .tabela td { display: flex; justify-content: space-between; gap: 1rem; border: none; padding: .3rem 0; }
  .tabela td::before {
    content: attr(data-rotulo); color: var(--suave); font-size: .75rem;
    text-transform: uppercase;
  }
  .tabela .num { text-align: left; }
}