/* Painel NGN QoE: casca em três zonas (barra lateral recolhível), painéis com borda-sombra de 1 px e raio 6, marcas de estado
   sempre com forma e texto, movimento só em resposta a ação (100/160/220 ms).
   Densidade por perfil: suporte 32 px por linha, cliente 42 px. */
:root {
  /* --ink-3 e --brand-ink escurecidos em relação ao mockup (#8A8780 / #C4690F) para texto pequeno passar de 4,5:1 sobre --bg e --surface-2 */
  --bg: #F7F6F3; --surface: #FFFFFF; --surface-2: #F1F0EC; --border: #E3E1DB; --ink: #1A1A18; --ink-2: #5C5A55; --ink-3: #6F6C65;
  --brand: #F29A38; --brand-ink: #A65A0A; --focus: #A65A0A; --ink-on-brand: #1A1A18; --ink-on-fail: #FFFFFF;
  --ok: #1E7F4F; --ok-ink: #176B42; --ok-bg: #E6F4EC; --deg: #B5760A; --deg-ink: #86570A; --deg-bg: #FBF1DC; --fail: #C8323F; --fail-ink: #B32837; --fail-bg: #FBE7E9; --robo: #6B6F7A;
  --veu: rgba(26, 26, 24, .32); --mapa: #F1F0EC; --mapa-l: #D6D3CB;
  /* --s2 e --s3 escurecidos (eram #A8A59D e #D6D3CB) para linha e amostra passarem de 3:1 sobre branco */
  --s1: #5C5A55; --s2: #8A8780; --s3: #B8B4AA; --c1: #1A1A18; --c2: #8A8780; --c3: #C4690F; --sombra-rol: rgba(0, 0, 0, .16);
  --r1: 4px; --r2: 6px; --r3: 12px; --t1: 100ms; --t2: 160ms; --t3: 220ms; --shadow: 0 0 0 1px var(--border);
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-c: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --row: 40px; --fs: 14px; --lat: 240px; color-scheme: light;
  /* nomes antigos, usados pelo app.js em valores de SVG e em estilos calculados */
  --panel: var(--surface); --sunk: var(--surface-2); --head: var(--surface-2); --line: var(--border); --line-soft: var(--border); --muted: var(--ink-2); --mapa-line: var(--mapa-l); --navy: var(--ink); --link: var(--brand-ink); --font-sc: var(--font);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141413; --surface: #1C1C1A; --surface-2: #232320; --border: #2E2E2A; --ink: #ECEAE4; --ink-2: #A8A59D; --ink-3: #8A8780;
  --brand: #F2A24C; --brand-ink: #F2A24C; --focus: #F2A24C; --ink-on-brand: #1A1A18; --ink-on-fail: #1A1A18;
  --ok: #3FA86F; --ok-ink: #3FA86F; --ok-bg: #15291E; --deg: #D9A040; --deg-ink: #D9A040; --deg-bg: #2C2412; --fail: #E25A66; --fail-ink: #E25A66; --fail-bg: #321A1D; --robo: #8C909A;
  --veu: rgba(0, 0, 0, .55); --mapa: #232320; --mapa-l: #3A3A35; --s1: #ECEAE4; --s2: #8A8780; --s3: #3A3A35; --c1: #ECEAE4; --c2: #8A8780; --c3: #F2A24C; --sombra-rol: rgba(0, 0, 0, .45); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #141413; --surface: #1C1C1A; --surface-2: #232320; --border: #2E2E2A; --ink: #ECEAE4; --ink-2: #A8A59D; --ink-3: #8A8780;
  --brand: #F2A24C; --brand-ink: #F2A24C; --focus: #F2A24C; --ink-on-brand: #1A1A18; --ink-on-fail: #1A1A18;
  --ok: #3FA86F; --ok-ink: #3FA86F; --ok-bg: #15291E; --deg: #D9A040; --deg-ink: #D9A040; --deg-bg: #2C2412; --fail: #E25A66; --fail-ink: #E25A66; --fail-bg: #321A1D; --robo: #8C909A;
  --veu: rgba(0, 0, 0, .55); --mapa: #232320; --mapa-l: #3A3A35; --s1: #ECEAE4; --s2: #8A8780; --s3: #3A3A35; --c1: #ECEAE4; --c2: #8A8780; --c3: #F2A24C; --sombra-rol: rgba(0, 0, 0, .45); color-scheme: dark; }

/* densidade por perfil (o app.js marca o body ao desenhar) */
body[data-perfil="suporte"] { --row: 32px; --fs: 13.5px; }
body[data-perfil="cliente"] { --row: 42px; --fs: 14px; }

/* ============================================================ base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs); line-height: 1.45; font-weight: 400; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* dentro de contêineres com overflow (segmentos, abas, tabelas e fita roláveis, marca) o anel fica por dentro para não ser cortado */
.seg button:focus-visible, .abas button:focus-visible, .tab-wrap tr:focus-visible, .c:focus-visible, .marca button:focus-visible, .z2 a:focus-visible, .lat:focus-visible { outline-offset: -2px; }
.num { font-family: var(--font-c); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }
.tab-num, .tn { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; }
.muted, .ink2 { color: var(--ink-2); }
.ink3 { color: var(--ink-3); }
.b { font-weight: 600; }
.sprite { position: absolute; }
.ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* marcas de estado: forma e cor (legenda, chips, tabelas) */
.g, .sw { display: inline-block; width: 10px; height: 10px; flex: none; vertical-align: -1px; }
.g.ok { border-radius: 50%; background: var(--ok); }
.g.degraded { background: var(--deg); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g.failed { background: var(--fail); }
.g.inconclusiva { background: var(--robo); transform: rotate(45deg) scale(.8); }
.g.adiado, .g.planejado { border-radius: 50%; border: 2px dotted var(--ink-3); }
.sw { border-radius: 2px; }
.sw.ref { width: 18px; height: 0; border-top: 1px dashed var(--ink-3); background: none; border-radius: 0; vertical-align: middle; }

/* ============================================================ casca: lateral em três zonas, topbar móvel, main */
.shell { display: grid; grid-template-columns: var(--lat) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--t2); }
html.lat-min { --lat: 56px; }
.corpo { min-width: 0; }
/* overflow: clip (não hidden): focar a busca não pode rolar a lateral e tirar a marca da tela */
.lat { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--surface); border-right: 1px solid var(--border); overflow: clip; }
.z1 { padding: 12px 12px 10px; display: grid; gap: 10px; overflow: hidden; }
/* itens de grid nascem com min-width:auto: um "Recente" longo (nowrap) alargaria a zona além dos 240 px e empurraria o botão Recolher para fora */
.z1 > *, .estado-lat, .estado-lat > *, .busca-msg { min-width: 0; }
/* link "pular para o conteúdo": primeiro focável da página, visível só com foco */
.pular { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); border-radius: var(--r2); padding: 8px 12px; font-weight: 600; text-decoration: none; }
.pular:focus { left: 8px; }
.z2 { padding: 4px 12px; overflow-y: auto; }
.z3 { padding: 10px 12px 12px; border-top: 1px solid var(--border); display: grid; gap: 2px; align-content: end; }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 600; min-height: 32px; white-space: nowrap; overflow: hidden; }
.quadro { width: 12px; height: 12px; background: var(--brand); border-radius: 2px; flex: none; }
.marca .cli { color: var(--ink-2); font-weight: 400; }
.marca .cli:not(:empty)::before { content: ' · '; }
.marca button { margin-left: auto; color: var(--ink-3); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r1); flex: none; transition: background var(--t1), color var(--t1); }
.marca button:hover { background: var(--surface-2); color: var(--ink); }
.busca-lat { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: var(--r2); background: var(--surface-2); color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; transition: box-shadow var(--t1); }
.busca-lat:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.busca-lat input, .busca-lat input:not([type="checkbox"]):not([type="radio"]) { flex: 1; min-width: 0; width: auto; min-height: 30px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: var(--ink); font-size: 13px; outline: none; }
.busca-lat input::placeholder { color: var(--ink-3); }
.busca-lat input[disabled] { cursor: default; }
.busca-lat kbd { margin-left: auto; font-family: var(--mono); font-size: 11px; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; color: var(--ink-2); }
html.lat-min .busca-lat input { display: none; }
/* "Nada encontrado": junto do campo de busca, não no rodapé da lateral */
.busca-msg { font-size: 12px; color: var(--deg-ink); padding: 0 2px; margin-top: -4px; overflow-wrap: anywhere; }
.busca-msg:empty { display: none; }
.estado-lat { display: grid; gap: 2px; font-size: 12px; color: var(--ink-3); line-height: 1.35; padding: 0 2px; overflow-wrap: anywhere; }
.estado-lat:empty { display: none; }
.aviso:empty, .vivo:empty { display: none; }
.vivo.atraso { color: var(--deg-ink); font-weight: 600; }
.nav { display: grid; gap: 1px; align-content: start; }
.nav a, .nav-a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r2); text-decoration: none; color: var(--ink-2); white-space: nowrap; overflow: hidden; width: 100%; transition: background var(--t1), color var(--t1); }
.nav a:hover, .nav-a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand); }
.ver-como { display: grid; gap: 4px; padding: 8px 10px 4px; font-size: 12.5px; }
.lat:has(.nav:empty) .ver-como, .ver-como:has(select[hidden]) { display: none; }
.ver-como select { width: 100%; font-size: 13px; }
.quem-op { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); padding: 6px 10px 0; white-space: nowrap; overflow: hidden; }
.quem-op .quem { overflow: hidden; text-overflow: ellipsis; }
.quem-op:has(.quem:empty) { display: none; }
.avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--ink-2); flex: none; }
.avatar:empty { display: none; }
/* lateral recolhida: os rótulos dos links e botões continuam na árvore de acessibilidade (só saem da vista); o resto some mesmo */
html.lat-min .busca-lat kbd, html.lat-min .estado-lat, html.lat-min .ver-como, html.lat-min .quem-op .txt, html.lat-min .busca-msg { display: none; }
html.lat-min .nav a .txt, html.lat-min .nav-a .txt, html.lat-min .marca .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html.lat-min .nav a, html.lat-min .nav-a, html.lat-min .busca-lat, html.lat-min .quem-op { justify-content: center; padding: 0; }
html.lat-min .marca { flex-direction: column; justify-content: center; gap: 6px; min-height: 0; }
html.lat-min .marca .quadro { width: 14px; height: 14px; }
html.lat-min .marca button { margin-left: 0; }
.topo-m { display: none; align-items: center; gap: 10px; height: 48px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.topo-m .topo-dir { margin-left: auto; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r2); color: var(--ink-2); flex: none; transition: background var(--t1), color var(--t1); }
.x:hover { background: var(--surface-2); color: var(--ink); }
#veu-lat { position: fixed; inset: 0; background: var(--veu); z-index: 30; }

main { padding: 20px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; min-width: 0; position: relative; outline: none; }
main > * { min-width: 0; }
main { transition: opacity var(--t2); }
main.esqueleto { opacity: .55; } /* só na primeira pintura de cada rota; as demais são patch de DOM, sem esmaecer */
main.carregando { cursor: progress; } /* tela ocupada (buscando dados de uma rota já vista): a tela antiga fica nítida, o cursor avisa */
main.carregando[data-espera]::before { content: attr(data-espera); position: absolute; top: 4px; right: 24px; font-size: 12.5px; color: var(--ink-2); } /* passou de 1 s: diz o que está calculando */
.erro-tela { display: grid; gap: 10px; justify-items: start; }
/* número que mudou numa atualização em segundo plano (classe posta pelo dom.js por um instante) */
.mudou { animation: mudou var(--t2) ease-out; }
@keyframes mudou { from { opacity: .25; } }

/* ============================================================ cabeçalho de tela, controles, botões, campos */
.cab { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-start; }
.cab h1 { font-size: 22px; }
.cab h1 .h-sub { color: var(--ink-3); font-weight: 400; }
.cab .resumo { margin-top: 4px; max-width: 78ch; color: var(--ink-2); }
.cab .resumo b { color: var(--ink); font-weight: 600; }
.controles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.controles label { font-size: 12.5px; }
.seg { display: inline-flex; box-shadow: var(--shadow); border-radius: var(--r2); background: var(--surface); overflow: hidden; flex-wrap: wrap; }
.seg button { min-height: 32px; padding: 0 10px; color: var(--ink-2); transition: background var(--t1), color var(--t1); }
.seg button:hover { background: var(--surface-2); color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); }
select, .sel, input.busca, input:not([type="checkbox"]):not([type="radio"]) { min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--r2); box-shadow: var(--shadow); background: var(--surface); color: var(--ink); max-width: 100%; }
input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
input::placeholder { color: var(--ink-3); }
.filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--r2); background: var(--brand); color: var(--ink-on-brand); font-weight: 600; white-space: nowrap; transition: filter var(--t1); }
.filtro:hover { filter: brightness(.96); }
.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--r2); box-shadow: var(--shadow); background: var(--surface); white-space: nowrap; transition: background var(--t1); }
.btn:hover { background: var(--surface-2); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.prim { background: var(--brand); color: var(--ink-on-brand); box-shadow: none; font-weight: 600; }
section > h2, .sec-h h2 { font-size: 15px; }
section > h2 + .nota { margin: 2px 0 10px; }
.sec-h { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin-bottom: 8px; }
.nota { color: var(--ink-2); font-size: 13px; max-width: 90ch; }
.nota a { color: var(--brand-ink); }
.nota-pos { margin-top: 8px; }
.lim { font-weight: 400; font-size: 12.5px; }
.peq { font-size: 13px; }
.msg { margin: 0; }
.msg:empty { display: none; }
.msg-v { margin: 6px 0; }
.col { display: grid; gap: 10px; }
.cards { display: grid; gap: 16px; }
.coluna { display: grid; gap: 24px; align-content: start; min-width: 0; }
.dois > *, .coluna > *, .p-grade > *, .cards > *, .sc-grid > *, .kpis > * { min-width: 0; }
.linha, .acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.campos { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.campos label, .gi label, .form label, .form-largo label { font-size: 12.5px; color: var(--ink-2); display: block; }
.campos label > input, .gi label > input, .gi label > select, .form label > input, .form label > select, .form-largo label > input, .form-largo label > select { display: block; margin-top: 4px; font-size: var(--fs); color: var(--ink); width: 100%; }
.campos label > input { width: 180px; }
.gi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; }
.campo-curto { width: 80px !important; }
.campo-nome { flex: 1 1 280px; }
.opcoes { display: grid; gap: 6px; margin-top: 8px; }
.opcoes label { display: flex; gap: 8px; align-items: center; }
.form, .form-largo { display: grid; gap: 12px; max-width: 420px; }
.form-largo { max-width: 720px; }
.form h3, .form-largo h3, .no-card > h3 { font-size: 14px; }
.segredo { word-break: break-all; user-select: all; margin-top: 8px; }
.d { font-weight: 600; white-space: nowrap; }
.d-ok { color: var(--ok-ink); } .d-fail { color: var(--fail-ink); } .d-neutro { color: var(--ink-2); font-weight: 400; }
p.d { white-space: normal; }

/* chips: cor de fundo, marca de forma e texto */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: var(--r1); font-size: 12.5px; line-height: 20px; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); font-weight: 400; vertical-align: middle; }
.chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip.degraded { background: var(--deg-bg); color: var(--deg-ink); }
.chip.failed { background: var(--fail-bg); color: var(--fail-ink); }
.chip.inconclusiva, .chip.planejado { background: var(--surface-2); color: var(--ink-2); }

/* ============================================================ tabelas densas */
.tab-wrap { overflow-x: auto; }
/* pista de rolagem horizontal: sombra nas bordas enquanto houver conteúdo escondido (as duas primeiras camadas rolam junto e cobrem a sombra) */
.tab-wrap, .fita-box { background-image: linear-gradient(to right, var(--surface) 40%, transparent), linear-gradient(to left, var(--surface) 40%, transparent), linear-gradient(to right, var(--sombra-rol), transparent), linear-gradient(to left, var(--sombra-rol), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 36px 100%, 36px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs); }
th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: 12.5px; padding: 0 12px 0 0; height: var(--row); border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
td { padding: 4px 12px 4px 0; height: var(--row); border-bottom: 1px solid var(--border); vertical-align: middle; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel td { transition: background var(--t1); }
tbody tr.clicavel:hover td, tbody tr.sel td, tbody tr[aria-current="true"] td { background: var(--surface-2); }
tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--brand); }
tbody tr[aria-current="true"] td:first-child { box-shadow: inset 2px 0 0 var(--brand-ink); }
/* ranking por impacto e indicadores do dia (visão geral) */
table.rank td, table.rank th, table.ind td, table.ind th { white-space: nowrap; }
table.rank td.onde { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
table.rank td, table.rank th { padding-right: 8px; }
table.ind td.def { font-size: 12.5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } /* uma linha por indicador: a definição curta cabe, e o title traz a completa */
table.ind th.sp, table.ind td.sp { width: 120px; }
.imp { width: 56px; }
.imp-b { display: block; height: 8px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.imp-b i { display: block; height: 100%; background: var(--fail); border-radius: 2px; }
.imp-b i.degraded { background: var(--deg); } .imp-b i.adiado { background: var(--ink-3); } .imp-b i.inconclusiva { background: var(--robo); }
.col-v { container-type: inline-size; }
/* "quem aciona" é a segunda linha da célula Causa (sempre); a coluna da esquerda da visão geral mede ~695 px em 1440, então a
   Situação (em curso, resolvido) cabe até ~660 e a janela some abaixo de 600 */
table.rank .quem-r { display: block; font-size: 12px; }
table.rank td.onde { max-width: 200px; }
.sit-in { display: none; } /* a situação dentro do chip de Estado ("Degradado · em curso"), quando a coluna não cabe */
@container (max-width: 880px) { .sit { display: none; } .sit-in { display: inline; } }
@container (max-width: 760px) { table.rank .jan { display: none; } }
/* cidades do Resumo do cliente em duas colunas estreitas (900–1250 px): "O que houve" vira a segunda linha da célula Cidade */
@media (min-width: 900px) and (max-width: 1250px) { table.cid-cli .m-oc { display: none; } table.cid-cli .so-estreito { display: block; font-size: 12.5px; color: var(--ink-2); white-space: normal; } table.cid-cli td { white-space: normal; } }
.so-estreito { display: none; }
.pn > .tab-wrap table th:first-child, .pn > .tab-wrap table td:first-child { padding-left: 14px; }
.pn > .tab-wrap table th:last-child, .pn > .tab-wrap table td:last-child { padding-right: 14px; }
section > .tab-wrap, .cards + .tab-wrap { background-color: var(--surface); box-shadow: var(--shadow); border-radius: var(--r2); }
section > .tab-wrap table th:first-child, section > .tab-wrap table td:first-child { padding-left: 14px; }
section > .tab-wrap table th:last-child, section > .tab-wrap table td:last-child { padding-right: 14px; }
.k-nome b { font-weight: 600; display: block; }
.k-nome span { color: var(--ink-2); font-size: 12.5px; }
.k-val { font-size: 20px; }
.k-val small { font-size: 12px; font-family: var(--font); font-weight: 400; color: var(--ink-2); margin-left: 3px; }
.faixa { width: 190px; height: 28px; display: block; }
.th-cor th { text-align: right; }
.th-cor th:first-child { text-align: left; }
.th-cor .t-ok::before, .th-cor .t-deg::before, .th-cor .t-fail::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.th-cor .t-ok::before { border-radius: 50%; background: var(--ok); }
.th-cor .t-deg::before { background: var(--deg); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.th-cor .t-fail::before { background: var(--fail); }
table.grade td { text-align: right; font-variant-numeric: tabular-nums; }
table.grade td:first-child { text-align: left; font-weight: 600; }
.h-bom { background: var(--ok-bg); color: var(--ok-ink); } .h-atencao { background: var(--deg-bg); color: var(--deg-ink); } .h-ruim { background: var(--fail-bg); color: var(--fail-ink); }

/* ============================================================ dias, fita do dia, legenda */
.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia { display: grid; gap: 3px; align-content: start; padding: 6px 8px; border-radius: var(--r2); background: var(--surface); box-shadow: var(--shadow); min-width: 0; transition: background var(--t1); }
.dia:hover { background: var(--surface-2); }
.dia[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--ink); }
.dia b { font-size: 12px; color: var(--ink-2); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dia .tab-num { font-family: var(--font-c); font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: -.01em; }
.dia .barra { height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.dia .barra i { display: block; height: 100%; background: var(--ok); border-radius: 2px; }
.fita-box { overflow-x: auto; background-color: var(--surface); box-shadow: var(--shadow); border-radius: var(--r2); }
.fita { min-width: 960px; padding: 6px 12px 10px; display: grid; }
table.densa td, table.densa th { white-space: nowrap; }
table.densa td:last-child { white-space: normal; min-width: 260px; }
/* uma linha de grupo por cenário (só o nome) e, dentro dela, uma linha por nó: "ID · cidade"; o Teste Core é o último grupo */
.f-linha { display: grid; grid-template-columns: 200px repeat(48, minmax(0, 1fr)); align-items: center; height: var(--row); column-gap: 1px; }
.f-linha.grupo { height: 28px; margin-top: 4px; border-top: 1px solid var(--border); padding-top: 2px; }
.f-linha.grupo .f-nome { color: var(--ink); }
.f-linha.f-horas { height: 20px; }
.f-linha.core { opacity: .85; }
.f-linha.core:not(.grupo) .f-nome b { font-weight: 400; }
.f-nome { font-size: var(--fs); padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--surface); z-index: 1; height: 100%; display: flex; align-items: center; gap: 6px; }
.f-nome b { font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-linha:not(.grupo) .f-nome b { flex: none; }
.f-nome b > span { color: inherit; font-size: inherit; }
.f-nome span { color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.f-hora { height: 18px; font-size: 11px; color: var(--ink-3); position: relative; font-variant-numeric: tabular-nums; }
.f-hora span { position: absolute; left: 0; top: 0; }
.fita > p { grid-column: 1 / -1; padding: 8px 0; }
.c { height: 100%; min-height: 20px; display: grid; place-items: center; position: relative; border-radius: 2px; transition: background var(--t1); }
.c::before { content: ''; display: block; }
.c.ok::before { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.c.degraded::before { width: 11px; height: 10px; background: var(--deg); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.c.failed::before { width: 100%; height: 18px; background: var(--fail); }
.c.inconclusiva::before { width: 8px; height: 8px; background: var(--robo); transform: rotate(45deg); }
.c.adiado::before { width: 8px; height: 8px; border-radius: 50%; border: 2px dotted var(--ink-3); }
.c.vazio { cursor: default; pointer-events: none; }
.c.vazio::before { width: 2px; height: 2px; border-radius: 50%; background: var(--border); }
button.c:hover, button.c:focus-visible { background: var(--surface-2); }
.c[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--brand-ink); }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================ painéis, grades, kpis, gráficos, mapa */
.pn { background: var(--surface); box-shadow: var(--shadow); border-radius: var(--r2); min-width: 0; }
.pn > h3 { font-size: 14px; padding: 12px 14px 0; }
.pn-corpo { padding: 8px 14px 14px; }
.pn-corpo > .nota:first-child { margin-bottom: 8px; }
.pn-corpo .tab-wrap table th:first-child, .pn-corpo .tab-wrap table td:first-child { padding-left: 0; }
.p-grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .p-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-grade .largo { grid-column: 1 / -1; } }
.dois { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1100px) { .dois { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .dois.iguais { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dois.reg { grid-template-columns: 320px minmax(0, 1fr); } .dois.visao { grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); } }
.mapa-pn { padding-top: 12px; }
@media (min-width: 900px) and (max-width: 1099px) { .dois.iguais { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dois.reg td, .dois.reg th { white-space: nowrap; padding-right: 8px; }
.dois.reg td.entrega { white-space: normal; min-width: 170px; }
table.cid-cli td.oq-c { white-space: normal; font-size: 13px; color: var(--ink-2); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kp { background: var(--surface); box-shadow: var(--shadow); border-radius: var(--r2); padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.kp .rot { font-weight: 600; font-size: 13px; }
.kp .num { font-size: 32px; }
.kp small { font-size: 14px; font-family: var(--font); color: var(--ink-2); font-weight: 400; }
.kp .d { white-space: normal; font-size: 12.5px; }
.pilha { display: grid; gap: 8px; }
.pilha-l { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; font-size: var(--fs); }
.pilha-b { display: flex; height: 18px; background: var(--surface-2); gap: 2px; border-radius: 2px; overflow: hidden; }
.pilha-b i { display: block; height: 100%; }
.pilha-b i.ok { background: var(--ok); } .pilha-b i.degraded { background: var(--deg); } .pilha-b i.failed { background: var(--fail); }
.gr { width: 100%; height: auto; display: block; }
.gr text, svg text { fill: var(--ink-3); font-family: var(--font); font-size: 11px; font-variant-numeric: tabular-nums; }
.gr .eixo { stroke: var(--border); } .gr .grade { stroke: var(--border); }
.gr rect.hit { fill: transparent; }
.gr rect.hit:hover { fill: var(--ink); opacity: .06; }
.mapa-box { display: grid; justify-items: start; gap: 4px; }
.mapa { width: 100%; max-width: 360px; height: auto; display: block; }
.mapa .pais { fill: var(--mapa); stroke: var(--mapa-l); stroke-width: 1.2; stroke-linejoin: round; }
.mapa .cid { cursor: pointer; }
.mapa .cid text { fill: var(--ink); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.mapa .sem circle { fill: var(--ink-3); opacity: .55; }
.mapa .plan circle { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 2 2; }
.mapa .cid .anel { stroke: transparent; }
.mapa .cid .alvo { fill: transparent; pointer-events: all; } /* área de toque maior que a marca (raio 20) */
.mapa .cid.sel .anel { stroke: var(--ink); stroke-width: 2; }
.mapa .cid:hover .anel, .mapa .cid:focus-visible .anel { stroke: var(--brand-ink); stroke-width: 2; }
.mapa .cid:focus-visible { outline: none; }
.rosca { display: block; }

/* ============================================================ cartões de nó, cliente, sistema e formulários */
.no-card { background: var(--surface); box-shadow: var(--shadow); border-radius: var(--r2); display: grid; gap: 14px; padding: 14px 16px 16px; align-content: start; }
.no-card.col { gap: 10px; }
.no-card.destaque { box-shadow: 0 0 0 2px var(--brand-ink); } /* nó aberto pela busca lateral */
.no-card:focus { outline: none; }
.no-card.form-largo { gap: 12px; }
.no-cab { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.no-cab h3 { font-size: 16px; }
.no-cab > span:not(.chip) { color: var(--ink-2); font-size: 13px; }
.saude { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.no-dados { display: grid; gap: 6px 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); font-size: var(--fs); margin: 0; }
.no-dados dt { color: var(--ink-2); font-size: 12.5px; } .no-dados dd { margin: 0 0 4px; }
.tira-rot { font-size: 12.5px; color: var(--ink-2); display: block; margin-bottom: 4px; }
.tira { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; }
.tira i { height: 16px; display: block; background: var(--ok); border-radius: 2px; }
.tira i.degraded { background: var(--deg); } .tira i.failed { background: var(--fail); } .tira i.vazio { background: transparent; border: 1px dashed var(--border); } /* sem dado: tracejado, distinto do OK */
.cmds { margin: 0; padding-left: 18px; font-size: 13px; list-style: disc; }
.cmds li { margin: 3px 0; }
.cen-lista { display: grid; gap: 4px; padding-left: 22px; }
.cen-item { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.rotina .dias { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.rotina .dias label { display: inline-flex; gap: 6px; align-items: center; }
details { border-top: 1px solid var(--border); padding-top: 8px; }
summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; color: var(--ink-2); }
summary:hover { color: var(--ink); }
details[open] > summary { color: var(--ink); }
pre { background: var(--surface-2); padding: 12px; overflow-x: auto; font-size: 12.5px; font-family: var(--mono); margin: 8px 0 0; border-radius: var(--r1); }
details.log pre { max-height: 240px; overflow: auto; white-space: pre-wrap; }
details.diag-celular { margin-top: 8px; }
details.diag-celular .no-dados { margin: 8px 0; }

/* resumo do cliente: cartões de cenário, banner de situação, últimas execuções, ocorrências */
.sc-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.sc-card { background: var(--surface); box-shadow: var(--shadow); border-radius: var(--r2); padding: 16px 18px 18px; display: grid; gap: 14px; align-content: start; }
.sc-card header { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: flex-start; }
.sc-card h3 { font-size: 17px; }
.sc-card .prop { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; max-width: 40ch; }
.sc-kpis { display: grid; gap: 14px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk { display: grid; gap: 4px; align-content: start; }
.sk .rot { font-weight: 600; font-size: 13px; }
.sk .num { font-size: 34px; }
.sk .num small { font-size: 15px; font-family: var(--font); font-weight: 400; color: var(--ink-2); margin-left: 3px; }
.sk .mut { color: var(--ink-2); font-size: 12.5px; }
.sk .chip { justify-self: start; white-space: normal; }
.banner { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 14px 18px; border-radius: var(--r2); background: var(--ok-bg); color: var(--ok-ink); }
.banner.degraded { background: var(--deg-bg); color: var(--deg-ink); } .banner.failed { background: var(--fail-bg); color: var(--fail-ink); }
.banner.inconclusiva { background: var(--surface-2); color: var(--ink-2); } /* cliente ainda sem testes */
.banner > div { flex: 1; min-width: 0; }
.banner { position: relative; }
.banner-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.banner-x:hover { background: rgba(127, 127, 127, .25); }
.banner-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.banner:has(.banner-x) > div { padding-right: 36px; }
.ult .c[data-run] { cursor: pointer; }
.banner .g { width: 22px; height: 22px; }
.banner h2 { font-size: 20px; } .banner p { margin-top: 2px; font-size: 15px; }
.banner .mono { font-size: 13px; }
.banner .peq { font-size: 12.5px; margin-top: 4px; } /* sem opacity: o texto pequeno precisa dos 4,5:1 do tom cheio */
.lnk { text-decoration: underline; font-weight: 600; color: inherit; }
.ult-l { display: grid; gap: 4px; margin-bottom: 12px; }
.ult { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 2px; height: 22px; }
.ult .c { min-height: 0; }
.ult .c.failed::before { height: 100%; }
.oc { display: grid; gap: 12px; }
.oc li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.oc .chip { margin-top: 1px; }
.oc li b { font-weight: 600; display: block; }
.oc li span { color: var(--ink-2); font-size: 13.5px; }
.oc .btn { margin-top: 6px; min-height: 28px; font-size: 13px; }
.rodape { color: var(--ink-2); font-size: 12.5px; border-top: 1px solid var(--border); padding-top: 12px; max-width: 90ch; }

/* ============================================================ dica, véu e gaveta de detalhe */
#tip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--bg); padding: 6px 10px; font-size: 12.5px; max-width: 300px; display: none; border-radius: var(--r1); line-height: 1.35; }
#tip b { font-weight: 600; }
/* véu e gaveta: entram e saem com transform/opacity em 220 ms. Com display animável (allow-discrete + @starting-style) a saída
   também é animada e o display só vira none no fim; sem suporte, a entrada usa a animação antiga e a saída é imediata. */
#veu { position: fixed; inset: 0; background: var(--veu); z-index: 30; display: none; opacity: 0; transition: opacity var(--t3) ease-out, display var(--t3) allow-discrete; }
#gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--bg); z-index: 40; overflow-y: auto; border-left: 1px solid var(--border); display: none; opacity: 0; transform: translateX(24px); transition: transform var(--t3) ease-out, opacity var(--t3) ease-out, display var(--t3) allow-discrete; }
body.aberta #veu { display: block; opacity: 1; }
body.aberta #gaveta { display: block; opacity: 1; transform: none; }
@starting-style { body.aberta #veu { opacity: 0; } body.aberta #gaveta { opacity: 0; transform: translateX(24px); } }
@supports not (transition-behavior: allow-discrete) {
  #veu, #gaveta { transition: none; }
  body.aberta #veu { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) { body.aberta #gaveta { animation: entra var(--t3) ease-out; } @keyframes entra { from { transform: translateX(16px); opacity: .4; } } }
}
.g-cab { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 16px; display: flex; align-items: center; gap: 12px; min-height: 52px; }
.g-tit { flex: 1; min-width: 0; }
.g-cab h2 { font-size: 15px; min-width: 0; }
.g-cab .sub { display: block; color: var(--ink-2); font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-cab .chip { flex: none; }
.g-nav { display: flex; gap: 4px; flex: none; }
.g-nav .btn { min-height: 28px; padding: 0 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.g-corpo { padding: 16px; display: grid; gap: 18px; }
.g-corpo > *, .g-corpo [role="tabpanel"] { min-width: 0; } /* a tabela da aba Rede não pode alargar a gaveta no celular */
#gaveta .tab-wrap table { min-width: 0; }
.g-corpo > div:first-child { display: grid; gap: 8px; }
/* veredito: frase (com a parte e quem aciona) e comparação com os outros nós no mesmo horário */
.veredito { font-size: 15px; padding-left: 22px; position: relative; }
.veredito p { max-width: 64ch; }
.veredito .cmp { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.veredito::before { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); }
.veredito.failed::before { border-radius: 0; background: var(--fail); }
.veredito.degraded::before { border-radius: 0; background: var(--deg); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 13px; height: 12px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: 12.5px; }
.meta b { font-weight: 600; color: var(--ink); }
/* reprodução: barra da resolução com travamentos e parada por cima; o gráfico das amostras fica embaixo */
.tl { display: grid; gap: 4px; margin-bottom: 10px; }
.tl-b { position: relative; height: 18px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.tl-b i { position: absolute; top: 0; bottom: 0; }
/* resolução: 1080p em tom cheio; abaixo disso, hachura (sem opacity, para passar de 3:1 sobre o fundo) */
.tl-b i.q { background: var(--ok); } .tl-b i.q2 { background: repeating-linear-gradient(135deg, var(--ok) 0 4px, var(--ok-bg) 4px 7px); } .tl-b i.st { background: var(--deg); } .tl-b i.fx { background: var(--fail); }
.tl-e { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.g-corpo .legenda { margin-top: 2px; margin-bottom: 8px; }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; position: sticky; top: 52px; background: var(--bg); z-index: 1; }
.abas button { height: 40px; padding: 0 10px; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; transition: color var(--t1); }
.abas button:hover { color: var(--ink); }
.abas button[aria-selected="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); }
.abas .cnt { font-size: 11px; background: var(--fail-bg); color: var(--fail-ink); border-radius: 10px; padding: 0 6px; margin-left: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.g-corpo section > h3 { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
.g-corpo section > h3 + .nota { margin-bottom: 8px; }
.casc { display: grid; gap: 2px; }
.p-linha { display: grid; grid-template-columns: 18px minmax(0, 160px) minmax(0, 1fr) 150px; gap: 10px; align-items: center; min-height: 28px; font-size: 13px; }
.p-trilho { height: 8px; background: var(--surface-2); position: relative; border-radius: 2px; }
.p-trilho i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--ok); }
.p-trilho i.degraded { background: var(--deg); } .p-trilho i.failed { background: var(--fail); }
.p-trilho em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-3); }
.p-trilho u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--info); text-decoration: none; opacity: .85; }
.cen-ref { grid-column: 1 / -1; }
.p-normal { margin: -4px 0 6px 28px; font-size: 12px; font-variant-numeric: tabular-nums; }
.p-linha .tv { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fotos { display: grid; gap: 12px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.fotos.real { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.fr { box-shadow: var(--shadow); border-radius: var(--r2); background: var(--surface); overflow: hidden; margin: 0; }
.fr img { display: block; width: 100%; height: auto; background: #0C0C0B; }
.fr .cap { padding: 6px 8px; }
.fr-barra { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: var(--surface-2); }
.fr-barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: block; }
.fr-url { flex: 1; min-width: 0; background: var(--surface); font-size: 11.5px; padding: 1px 8px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 3px; }
.vp { aspect-ratio: 16 / 9; position: relative; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; color: var(--ink); font-size: 12px; }
.vp.escuro { background: #0C0C0B; color: #AEB6C6; }
.vp .menu { position: absolute; top: 0; left: 0; right: 0; height: 9%; background: var(--border); }
.vp .posters { position: absolute; top: 16%; left: 4%; right: 4%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3%; }
.vp .posters i { aspect-ratio: 2 / 3; background: var(--mapa-l); display: block; border-radius: 2px; }
.vp .posters.apagado { opacity: .45; }
.vp .caixa { position: absolute; border: 2px dashed var(--fail); color: var(--fail-ink); font-size: 11px; font-weight: 600; padding: 2px 6px; }
.vp .caixa-assistir { left: 34%; top: 62%; width: 32%; height: 16%; }
.vp .faixa-erro { position: absolute; left: 0; right: 0; bottom: 0; background: var(--fail); color: var(--ink-on-fail); padding: 4px 8px; font-size: 11.5px; }
.vp .toast { background: #1C1C1A; color: #ECEAE4; padding: 8px 14px; border-left: 3px solid var(--fail); font-size: 12.5px; max-width: 80%; z-index: 1; border-radius: var(--r1); }
.vp .centro { text-align: center; padding: 0 16px; }
.vp .rodar { width: 34px; height: 34px; border: 4px solid #3A3A35; border-top-color: #AEB6C6; border-radius: 50%; margin: 0 auto 10px; }
.vp .prog { position: absolute; left: 4%; right: 4%; bottom: 8%; height: 4px; background: #2E2E2A; }
.vp .prog i { display: block; width: 12%; height: 100%; background: var(--brand); }
.cap { font-size: 12px; color: var(--ink-2); padding: 6px 0; }
.evid-nota { font-size: 13px; color: var(--ink-2); max-width: 70ch; margin: 8px 0 0; }
.evid-tit { font-size: 13px; color: var(--ink-2); font-weight: 600; margin: 16px 0 6px; }
/* linha dos passos: a foto do início de cada passo, em ordem; o passo que falhou ou degradou ganha borda, marca e texto (não só cor) */
.passos-fotos { margin-bottom: 4px; }
.linha-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.lp { position: relative; min-width: 0; background: var(--surface); box-shadow: var(--shadow); border-radius: var(--r2); overflow: hidden; border: 2px solid transparent; }
.lp[aria-current="step"] { border-color: var(--fail); }
.lp.degraded[aria-current="step"] { border-color: var(--deg); border-style: dashed; }
.lp-btn { display: block; width: 100%; padding: 0; border: 0; background: #0C0C0B; cursor: zoom-in; aspect-ratio: 16 / 9; }
.lp-btn img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lp-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.lp-cab { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px 8px; font-size: 12.5px; }
.lp-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-weight: 600; display: grid; place-items: center; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lp.failed .lp-n { background: var(--fail-bg); color: var(--fail-ink); border: 2px solid var(--fail); border-radius: 3px; }
.lp.degraded .lp-n { background: var(--deg-bg); color: var(--deg-ink); border: 2px dashed var(--deg); border-radius: 3px; }
.lp-rot { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lp-rot b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lp-rot .tv { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp .chip { flex: none; }
/* foto ampliada */
.ampliar { border: 0; padding: 0; background: var(--bg); color: var(--ink); border-radius: var(--r2); box-shadow: var(--shadow); width: min(96vw, 1100px); max-width: 96vw; max-height: 96vh; }
.ampliar::backdrop { background: rgba(0, 0, 0, .62); }
.amp-cab { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.amp-cab p { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.amp-img { display: block; width: 100%; max-height: calc(96vh - 112px); object-fit: contain; background: #0C0C0B; }
.amp-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .ampliar[open] { animation: amp-entra var(--t3) ease-out; } @keyframes amp-entra { from { opacity: 0; transform: scale(.98); } } }
.filtro-rede { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.filtro-rede label { display: inline-flex; gap: 6px; align-items: center; }
.log { font-family: var(--mono); font-size: 12px; box-shadow: var(--shadow); border-radius: var(--r2); background: var(--surface); overflow: hidden; max-height: 340px; overflow-y: auto; }
.log div { display: grid; grid-template-columns: 62px 56px minmax(0, 1fr); gap: 8px; padding: 4px 10px; border-bottom: 1px solid var(--border); }
.log div:last-child { border: 0; }
.log div > span:first-child { color: var(--ink-3); }
.log .error { color: var(--fail-ink); } .log .warning { color: var(--deg-ink); }
.wf { position: relative; height: 8px; background: var(--surface-2); min-width: 160px; border-radius: 2px; }
.wf i { position: absolute; top: 0; bottom: 0; background: var(--ok); border-radius: 2px; }
.wf i.bad { background: var(--fail); }

/* ============================================================ tela de acesso e troca de senha (cartão central) */
.acesso { display: grid; gap: 16px; max-width: 420px; width: 100%; margin: 6vh auto 0; background: var(--surface); box-shadow: var(--shadow); border-radius: var(--r2); padding: 22px 22px 20px; }
.acesso .cab { gap: 4px; }
.acesso .cab h1 { font-size: 20px; }
.acesso .form { max-width: none; }
.acesso details { border-top: 1px solid var(--border); padding-top: 4px; }
.acesso .form .filtro, .acesso .form .btn { justify-self: start; }

/* ============================================================ telas estreitas */
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .lat { display: none; }
  body.lat-aberta .lat { display: grid; position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 88vw); z-index: 40; box-shadow: 8px 0 24px rgba(0, 0, 0, .18); }
  @media (prefers-reduced-motion: no-preference) { body.lat-aberta .lat { animation: entra-lat var(--t3) ease-out; } @keyframes entra-lat { from { transform: translateX(-16px); opacity: .4; } } }
  html.lat-min .txt, html.lat-min .busca-lat kbd, html.lat-min .estado-lat, html.lat-min .busca-msg { display: initial; }
  html.lat-min .estado-lat, html.lat-min .ver-como { display: grid; }
  html.lat-min .nav a .txt, html.lat-min .nav-a .txt, html.lat-min .marca .txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
  html.lat-min .marca .quadro { width: 12px; height: 12px; }
  html.lat-min .nav a, html.lat-min .nav-a, html.lat-min .busca-lat, html.lat-min .quem-op { justify-content: flex-start; padding: 0 10px; }
  html.lat-min .busca-lat { padding: 0 8px; }
  html.lat-min .marca { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 32px; }
  html.lat-min .marca button { margin-left: auto; }
  html.lat-min .busca-lat input { display: block; }
  .busca-lat { min-height: 44px; }
  .busca-lat input, .busca-lat input:not([type="checkbox"]):not([type="radio"]) { min-height: 42px; }
  #lat-rec { display: none; }
  .topo-m { display: flex; }
  /* alvos de toque de 44 px no celular */
  .x { width: 44px; height: 44px; }
  .nav a, .nav-a, .seg button, .btn, .filtro, select, .sel, input:not([type="checkbox"]):not([type="radio"]), summary { min-height: 44px; }
  .nav { gap: 0; }
  .abas button { height: 44px; }
  .dia { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; }
  .opcoes label, .rotina .dias label, .filtro-rede label { min-height: 44px; }
  main { padding: 16px 16px 40px; gap: 20px; }
  .cab h1 { font-size: 20px; }
  .controles { margin-left: 0; }
  .dias { gap: 4px; }
  .dia { padding: 4px 4px; }
  .dia .tab-num { font-size: 14px; }
  .dia b { font-size: 10.5px; }
  .dia .dia-d { display: none; }
  /* fita do dia: coluna de nomes mais estreita (só o id do nó, ou o nome do cenário na linha de grupo) para sobrar espaço aos 48 ciclos */
  .f-linha { grid-template-columns: 140px repeat(48, minmax(0, 1fr)); }
  .f-linha:not(.grupo):not(.f-horas) { height: 44px; } /* alvo de toque das células */
  .f-nome { padding-right: 6px; }
  .f-linha:not(.grupo) .f-nome span { display: none; }
  .fita { min-width: 960px; padding: 6px 8px 10px; }
  /* tabelas de Execuções e Indicadores do dia: menos colunas em vez de rolar; cenário abreviado */
  .so-largo { display: none; }
  .so-estreito { display: inline; }
  table.ind, table.densa { min-width: 0; }
  table.ind .def, table.ind .fx, table.densa .oq, table.densa .m-oc { display: none; }
  table.ind th.sp, table.ind td.sp { width: auto; }
  table.ind td.sp svg { width: 60px; height: 18px; }
  table.ind td.k-nome { white-space: normal; }
  table.ind td, table.ind th, table.densa td, table.densa th { padding-right: 8px; }
  table.densa td:last-child { min-width: 0; }
  .k-val { font-size: 17px; }
  /* ranking no celular: a ordem já diz o impacto, então a barra sai e "Onde" encurta para a tabela caber sem rolar */
  table.rank .quem-r, table.rank .sit, table.rank .sit-in, table.rank .jan, table.rank .imp, table.rank td.onde .muted { display: none; }
  table.rank td.onde { max-width: none; }
  table.rank td:nth-child(3) { white-space: normal; }
  .tab-wrap table.rank { min-width: 0; }
  .p-linha { grid-template-columns: 16px minmax(0, 1fr) 120px; }
  .p-trilho { display: none; }
  .p-normal { margin-left: 26px; }
  .fotos { grid-template-columns: minmax(0, 1fr); }
  .linha-passos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .faixa { width: 120px; }
  .pilha-l { grid-template-columns: 1fr; gap: 4px; }
  .meta { font-size: 12px; }
  .sc-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .sk .num { font-size: 30px; }
  .banner { padding: 12px 14px; }
  .banner h2 { font-size: 18px; }
  .ult { grid-template-columns: repeat(30, minmax(0, 1fr)); }
  .ult .c:nth-child(-n+30) { display: none; }
  .tab-wrap table { min-width: 560px; }
  .pn-corpo .tab-wrap table, .acesso table, .tab-wrap table.ind, .tab-wrap table.densa, .tab-wrap table.reg-cli, .tab-wrap table.cid-cli { min-width: 0; }
  table.ult-testes .oq { display: none; }
  table.ult-testes td, table.ult-testes th { white-space: nowrap; padding-right: 8px; }
  /* cidades do cliente (Resumo e tela Cidades): as colunas de tempo e travamentos viram a segunda linha da célula Cidade, sem rolar */
  table.reg-cli .m-oc, table.cid-cli .m-oc { display: none; }
  table.reg-cli .so-estreito, table.cid-cli .so-estreito { display: block; font-size: 12.5px; color: var(--ink-2); white-space: normal; }
  table.reg-cli td, table.cid-cli td, table.reg-cli th, table.cid-cli th { white-space: normal; padding-right: 8px; }
  table.cid-cli .chip, table.reg-cli .chip { white-space: normal; }
  .seg button { padding: 0 8px; font-size: 13px; }
  .g-cab { padding: 10px 12px; }
  .g-nav { display: none; }
  .g-corpo { padding: 12px; }
  /* aba Rede da gaveta: sem a linha do tempo, e o endereço quebra em vez de alargar a gaveta */
  #gaveta .m-oc { display: none; }
  #gaveta td .mono { white-space: normal; overflow-wrap: anywhere; }
  .acesso { margin-top: 0; padding: 18px 16px; }
}

/* antes de entrar (acesso e troca de senha) não há o que navegar: sem lateral nem barra do celular */
html.sem-sessao .lat, html.sem-sessao .topo-m { display: none; }
html.sem-sessao .shell { grid-template-columns: minmax(0, 1fr); }

/* grupos de cenários (rotina do nó): um fieldset por grupo, marcas da hora e lista de cenários */
.grupo-ed { border: 1px solid var(--border); border-radius: var(--r2); padding: 10px 12px; margin-top: 10px; display: grid; gap: 8px; }
.grupo-ed legend { padding: 0 4px; }
.min-op { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.grupos-ed .linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ============================================================ aba Cenários (só NGN): ciclo de vida do cenário */
:root { --info: #2F6DB5; --info-ink: #234F86; --info-bg: #E4EDF8; --meio-chrome-bg: #F0E7F5; --meio-chrome-ink: #6B3A7E; --meio-android-bg: #E3F1E6; --meio-android-ink: #2F6B3C; --meio-firetv-bg: #FBEBDD; --meio-firetv-ink: #8A4A12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --info: #6FA3E0; --info-ink: #8DB8EA; --info-bg: #172334; --meio-chrome-bg: #2A1C33; --meio-chrome-ink: #D3A8E3; --meio-android-bg: #1B2E20; --meio-android-ink: #9BD3A7; --meio-firetv-bg: #33241A; --meio-firetv-ink: #E8B98A; } }
:root[data-theme="dark"] { --info: #6FA3E0; --info-ink: #8DB8EA; --info-bg: #172334; --meio-chrome-bg: #2A1C33; --meio-chrome-ink: #D3A8E3; --meio-android-bg: #1B2E20; --meio-android-ink: #9BD3A7; --meio-firetv-bg: #33241A; --meio-firetv-ink: #E8B98A; }
.chip.val { background: var(--info-bg); color: var(--info-ink); }
.g.val { border-radius: 50%; border: 2px solid var(--info); background: transparent; }
.chip.aposentado { text-decoration: line-through; color: var(--ink-3); }
.g.aposentado { background: var(--ink-3); transform: scale(.7); }
.chip.meio-chrome { background: var(--meio-chrome-bg); color: var(--meio-chrome-ink); }
.chip.meio-android { background: var(--meio-android-bg); color: var(--meio-android-ink); }
.chip.meio-firetv { background: var(--meio-firetv-bg); color: var(--meio-firetv-ink); }
.cen-no-bloq > label { opacity: .72; }
.ag-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.ag-card h2 { font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag-marcas { display: flex; flex-wrap: wrap; gap: 4px; }
.ag-m { font-variant-numeric: tabular-nums; font-size: 12px; padding: 2px 6px; border-radius: var(--r1, 6px); background: var(--info-bg); color: var(--info-ink); }
.ag-m.ag-passou { background: transparent; color: var(--ink-2); text-decoration: line-through; opacity: .7; }
.ag-impl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cen-ultima h4 { font-size: 13px; margin-top: 4px; }
.cen-rec { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--info-ink); text-decoration: underline; cursor: pointer; font: inherit; }
.cen-no-bloq label { cursor: not-allowed; }
.cen-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.cen-filtros label.sr { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: 0; }
.cen-filtros select, .cen-filtros .busca { min-height: 32px; font-size: 13px; }
.cen-abas { display: inline-flex; flex-wrap: wrap; border-radius: var(--r2); box-shadow: var(--shadow); overflow: hidden; }
.cen-abas button { min-height: 32px; padding: 0 12px; background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.cen-abas button + button { box-shadow: -1px 0 0 var(--border); }
.cen-abas button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-ink); }
.cen-abas button:focus-visible { outline-offset: -2px; }
.cen-cont { margin-left: auto; }
.cen-tab { min-width: 900px; }
.cen-tab th { text-align: left; }
.cen-tab td { vertical-align: top; }
.cen-tab tr.linha-cen { cursor: pointer; }
.cen-tab tr.linha-cen:hover td, .cen-tab tr.linha-cen[aria-expanded="true"] td { background: var(--surface-2); }
.cen-tab tr.linha-cen:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cen-nome .mono { display: block; }
.cen-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.cen-acoes .btn { min-height: 28px; padding: 0 8px; font-size: 12.5px; }
.cen-exp > td { background: var(--surface-2); padding: 12px; }
.cen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.cen-bloco { background: var(--surface); box-shadow: var(--shadow); border-radius: var(--r2); padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cen-bloco h3 { font-size: 14px; }
.cen-passos { width: 100%; min-width: 0; font-size: 12.5px; }
.cen-passos th, .cen-passos td { padding: 3px 6px; }
.cen-apertado { color: var(--deg-ink); font-weight: 600; }
.cen-sub { margin-top: 4px; }
.cen-ck, .cen-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cen-ck li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13px; }
.cen-m { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; margin-top: 2px; background: var(--surface-2); color: var(--ink-3); border: 1px dashed var(--border); }
.cen-m.ok { background: var(--ok-bg); color: var(--ok-ink); border: 0; }
.cen-m.at { background: var(--deg-bg); color: var(--deg-ink); border: 0; }
.cen-quem { display: block; color: var(--ink-3); font-size: 12px; }
.cen-ck label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.cen-hist li { display: grid; grid-template-columns: 112px 1fr; gap: 8px; font-size: 12.5px; }
.cen-no { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); }
.cen-no label { display: inline-flex; gap: 6px; align-items: center; }
.cen-no select { min-height: 28px; font-size: 12.5px; }
.dlg-cen { border: 0; padding: 0; background: var(--bg); color: var(--ink); border-radius: var(--r2); box-shadow: var(--shadow); width: min(94vw, 560px); max-height: 92vh; }
.dlg-cen::backdrop { background: rgba(0, 0, 0, .55); }
.dlg-cen-corpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; max-height: 64vh; }
.dlg-cen-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.cen-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.cen-campo textarea, .cen-campo input { font: inherit; }
.cen-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .cen-datas { grid-template-columns: 1fr; } .cen-hist li { grid-template-columns: 1fr; } }

.cen-quando { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cen-quando label { display: flex; gap: 6px; align-items: center; }