:root {
  --azul: #0b5cab;
  --azul-escuro: #084785;
  --azul-claro: #e0edff;
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --borda: #dbe2ea;
  --texto: #0f172a;
  --texto-2: #475569;
  --texto-3: #64748b;
  --ok: #047857;
  --ok-fundo: #d1fae5;
  --alerta: #92400e;
  --alerta-fundo: #fef3c7;
  --erro: #b91c1c;
  --erro-fundo: #fee2e2;
  --info: #1d4ed8;
  --info-fundo: #dbeafe;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --grade: #e2e8f0;
  --raio: 8px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0f1419; --superficie: #1a1f26; --superficie-2: #20262e; --borda: #2e3742;
    --texto: #e8edf3; --texto-2: #b6c0cc; --texto-3: #8a96a5; --azul-claro: #16325a;
    --ok: #34d399; --ok-fundo: #0f3b2e; --alerta: #fbbf24; --alerta-fundo: #3d2e0b;
    --erro: #f87171; --erro-fundo: #451a1a; --info: #93c5fd; --info-fundo: #172a4d;
    --series-1: #3987e5; --series-2: #d95926; --grade: #2e3742; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; }
a { color: var(--azul); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a { color: #7cb3f5; } }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.muted { color: var(--texto-3); }
.pequeno { font-size: .85rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quebra { word-break: break-all; }
.oculto { display: none !important; }

/* Estrutura */
.topo { background: var(--azul); color: #fff; display: flex; align-items: center; gap: 16px; padding: 10px 20px; position: sticky; top: 0; z-index: 10; }
.topo a { color: #fff; text-decoration: none; }
.marca { font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.marca svg { width: 22px; height: 22px; }
.topo .ente { opacity: .9; font-size: .9rem; border-left: 1px solid rgba(255,255,255,.35); padding-left: 14px; }
.topo .usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.topo .usuario form { margin: 0; }
.topo .usuario button { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; }
.layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 50px); }
.menu { background: var(--superficie); border-right: 1px solid var(--borda); padding: 14px 10px; }
.menu .grupo { font-size: .72rem; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; margin: 14px 10px 4px; }
.menu a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--texto-2); text-decoration: none; font-size: .93rem; }
.menu a:hover { background: var(--superficie-2); color: var(--texto); }
.menu a.ativo { background: var(--azul-claro); color: var(--azul); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu a.ativo { color: #cfe3ff; } }
.conteudo { padding: 22px 26px 40px; max-width: 1280px; width: 100%; min-width: 0; }
.cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecalho p { margin: 0; color: var(--texto-3); }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .menu { border-right: 0; border-bottom: 1px solid var(--borda); display: flex; overflow-x: auto; gap: 4px; padding: 8px; white-space: nowrap; }
  .menu .grupo { display: none; }
  .topo .ente { display: none; }
  .conteudo { padding: 16px; }
}

/* Cartões e grade */
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 18px; min-width: 0; }
.card > h2:first-child { margin-top: 0; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .g2, .g3 { grid-template-columns: 1fr; } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); }
.kpi .rotulo { font-size: .78rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi .sub { font-size: .82rem; color: var(--texto-3); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.dl dt { color: var(--texto-3); font-size: .88rem; }
.dl dd { margin: 0; }

/* Tabelas */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); border-bottom: 1px solid var(--borda); padding: 8px 10px; white-space: nowrap; }
.tabela td { border-bottom: 1px solid var(--borda); padding: 8px 10px; vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela tfoot td { font-weight: 700; border-top: 2px solid var(--borda); }
.vazio { text-align: center; color: var(--texto-3); padding: 24px; }

/* Botões e formulários */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--azul); color: #fff; border: 1px solid var(--azul); border-radius: 6px; padding: 8px 14px; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--azul-escuro); }
.btn-sec { background: var(--superficie); color: var(--azul); border-color: var(--borda); }
.btn-sec:hover { background: var(--superficie-2); }
.btn-perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.btn-perigo:hover { background: #991b1b; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-pequeno { padding: 4px 10px; font-size: .84rem; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes form { margin: 0; }
form.inline { display: inline; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo.largo { grid-column: 1 / -1; }
label { font-size: .85rem; font-weight: 600; color: var(--texto-2); }
input, select, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 8px 10px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
textarea { min-height: 90px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check input { width: auto; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filtros .campo { min-width: 150px; flex: 1 1 150px; max-width: 280px; }
.ajuda { font-size: .8rem; color: var(--texto-3); }

/* Mensagens e selos */
.flash { border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid transparent; }
.flash-sucesso { background: var(--ok-fundo); color: var(--ok); }
.flash-erro { background: var(--erro-fundo); color: var(--erro); }
.flash-aviso { background: var(--alerta-fundo); color: var(--alerta); }
.flash-info { background: var(--info-fundo); color: var(--info); }
.flash ul { margin: 4px 0 0 18px; padding: 0; }
.badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.b-ok { background: var(--ok-fundo); color: var(--ok); }
.b-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.b-erro { background: var(--erro-fundo); color: var(--erro); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.atrasada { color: var(--erro); font-weight: 600; }
.galeria { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.galeria figure { margin: 0; width: 132px; font-size: .75rem; }
.galeria img { width: 132px; height: 99px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); display: block; }
.linhas-repetidas .form-grid { margin-bottom: .25rem; }
.b-info { background: var(--info-fundo); color: var(--info); }
.b-neutro { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }

/* Gráfico */
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .grade line { stroke: var(--grade); stroke-width: 1; }
.grafico .eixo text, .grafico .rotulo-x { fill: var(--texto-3); font-size: 13px; }
.grafico .s1 { fill: var(--series-1); }
.grafico .s2 { fill: var(--series-2); }
.grafico .alvo { fill: transparent; }
.grafico .alvo:hover + path, .grafico g.barra:hover path { opacity: .85; }
.legenda { display: flex; gap: 16px; font-size: .85rem; color: var(--texto-2); margin-bottom: 6px; }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legenda .l1::before { background: var(--series-1); }
.legenda .l2::before { background: var(--series-2); }
.mini-barras { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
details > summary { cursor: pointer; color: var(--azul); font-size: .9rem; margin-top: 10px; }

/* Autenticação */
.tela-acesso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #0b5cab 0%, #084785 55%, #06325e 100%); }
.caixa-acesso { background: var(--superficie); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 28px; width: 100%; max-width: 400px; }
.caixa-acesso h1 { margin-bottom: 4px; }
.caixa-acesso form { display: grid; gap: 14px; margin-top: 18px; }
.caixa-acesso .btn { justify-content: center; width: 100%; padding: 10px; }
.caixa-acesso .marca { color: var(--azul); margin-bottom: 14px; }
.qr { display: block; margin: 12px auto; border-radius: 8px; background: #fff; padding: 6px; }

/* Leitura em campo */
.leitura-item { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; margin-bottom: 10px; background: var(--superficie); scroll-margin-top: 70px; }
.leitura-item.feita { border-left: 4px solid var(--ok); }
.leitura-item .linha { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.leitura-form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; margin-top: 10px; align-items: end; }
@media (max-width: 600px) { .leitura-form { grid-template-columns: 1fr; } }
.leitura-form input[type="number"] { font-size: 1.15rem; font-weight: 700; }

/* Portal */
.portal-topo { background: var(--azul); color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.portal-topo a { color: #fff; text-decoration: none; }
.portal-topo nav { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.portal-topo nav form { margin: 0; }
.portal-topo nav button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; padding: 4px 10px; font: inherit; cursor: pointer; }
.portal-conteudo { max-width: 960px; margin: 0 auto; padding: 20px 16px 40px; }
.destaque-valor { font-size: 1.8rem; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.copiar { display: flex; gap: 8px; }
.copiar input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
.rodape { text-align: center; color: var(--texto-3); font-size: .8rem; padding: 18px; }
@media print { .menu, .topo, .acoes, .portal-topo nav { display: none !important; } .layout { display: block; } }
.espaco { margin-top: 16px; }
.caixa-portal { max-width: 520px; margin: 24px auto; }
.card h3 { margin-top: 16px; }
.nowrap { white-space: nowrap; }
@media (max-width: 600px) { .col-opc { display: none; } .tabela td, .tabela th { padding: 8px 6px; } }
.texto-longo { white-space: pre-wrap; }

/* ===== Aplicativo de campo (PWA) ===== */
.app-campo { min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); padding-bottom: 72px; }
.app-topo { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--azul, #0b5cab); color: #fff; }
.app-topo strong { flex: 1; }
.app-campo main { flex: 1; padding: 12px 14px; max-width: 720px; width: 100%; margin: 0 auto; }
.app-rodape { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--superficie); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom); }
.app-rodape button { min-height: 56px; border: 0; background: none; color: var(--texto); font-size: .9rem; font-weight: 600; }
.app-campo .os-item { display: block; width: 100%; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin-bottom: 10px; color: var(--texto); font: inherit; }
.app-campo .os-item .sub { font-size: .85rem; color: var(--texto-3); }
.app-campo .botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.app-campo .botoes .btn, .app-campo .btn-grande { min-height: 48px; width: 100%; }
.app-campo label { display: block; font-weight: 600; margin: 10px 0 4px; }
.app-campo input, .app-campo select, .app-campo textarea { width: 100%; min-height: 44px; font-size: 16px; }
.app-campo .assinatura { width: 100%; height: 180px; border: 1px dashed var(--borda); border-radius: 8px; background: #fff; touch-action: none; }
.app-campo .miniaturas { display: flex; flex-wrap: wrap; gap: 6px; }
.app-campo .miniaturas img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.app-campo .aviso { padding: 10px 12px; border-radius: 8px; background: var(--alerta-fundo); color: var(--alerta); margin: 8px 0; }
.app-campo .erro { padding: 10px 12px; border-radius: 8px; background: var(--erro-fundo); color: var(--erro); margin: 8px 0; }

/* ===== Portal em modo totem (terminal de autoatendimento) ===== */
.modo-totem { font-size: 1.2rem; }
.modo-totem .btn, .modo-totem button, .modo-totem input, .modo-totem select { min-height: 56px; font-size: 1.1rem; }
.modo-totem .portal-topo nav a { padding: 12px 14px; }

/* ===== Painéis (BI): tokens de gráfico validados (scripts do método de visualização: CVD, contraste, faixa de luminosidade) ===== */
.viz, .kpi { --viz-s1: #2a78d6; --viz-s2: #eb6834; --viz-s3: #1baf7a; --viz-grade: #e1e0d9; --viz-mudo: #6b6a64;
  --st-bom: #0ca30c; --st-alerta: #fab219; --st-serio: #ec835a; --st-critico: #d03b3b; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz, :root:where(:not([data-theme="light"])) .kpi { --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70; --viz-grade: #2c2c2a; --viz-mudo: #a7a69f; }
}
:root[data-theme="dark"] .viz, :root[data-theme="dark"] .kpi { --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70; --viz-grade: #2c2c2a; --viz-mudo: #a7a69f; }
.viz { margin: 0; min-width: 0; }
.viz figcaption { margin-bottom: 6px; }
.viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz .grade { stroke: var(--viz-grade); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz .eixo-texto { fill: var(--texto-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.viz .rotulo-categoria { fill: var(--texto-2); font-variant-numeric: normal; }
.viz .rotulo-dado { fill: var(--texto-2); font-size: 13px; }
.viz .rotulo-interno { fill: #fff; font-size: 12px; font-weight: 600; }
.viz .rotulo-interno.escuro { fill: #0b0b0b; }
.viz .serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.viz .serie.viz-s1 { stroke: var(--viz-s1); } .viz .serie.viz-s2 { stroke: var(--viz-s2); } .viz .serie.viz-s3 { stroke: var(--viz-s3); }
.viz .viz-s1:not(.serie) { fill: var(--viz-s1); } .viz .viz-s2:not(.serie) { fill: var(--viz-s2); } .viz .viz-s3:not(.serie) { fill: var(--viz-s3); }
.viz .ponto { stroke: var(--superficie); stroke-width: 2; }
.viz .viz-cruz { stroke: var(--texto-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz .hit { fill: transparent; outline: none; cursor: default; }
.viz .hit:focus-visible { stroke: var(--texto-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz .marca-grupo:hover .bloco, .viz .bloco.realce { opacity: .82; }
.viz .mapa-fundo { fill: var(--superficie-2); }
.viz .ponto-mapa { stroke: var(--superficie); stroke-width: 2; }
.viz .ponto-mapa.st-bom { fill: var(--st-bom); } .viz .ponto-mapa.st-alerta { fill: var(--st-alerta); }
.viz .ponto-mapa.st-serio { fill: var(--st-serio); } .viz .ponto-mapa.st-critico { fill: var(--st-critico); }
.viz-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--texto-2); margin: 0 0 6px; }
.viz-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.viz-legenda .chave-linha { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.viz-legenda .chave-bloco { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.chave-linha.viz-s1, .chave-bloco.viz-s1 { background: var(--viz-s1); } .chave-linha.viz-s2, .chave-bloco.viz-s2 { background: var(--viz-s2); }
.chave-linha.viz-s3, .chave-bloco.viz-s3 { background: var(--viz-s3); }
.viz-status { display: flex; align-items: center; gap: 6px; }
.viz-status-ponto { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 700; color: #fff; }
.viz-status-ponto.st-bom { background: var(--st-bom, #0ca30c); } .viz-status-ponto.st-alerta { background: var(--st-alerta, #fab219); color: #0b0b0b; }
.viz-status-ponto.st-serio { background: var(--st-serio, #ec835a); } .viz-status-ponto.st-critico { background: var(--st-critico, #d03b3b); }
.viz-tabela { margin-top: 6px; font-size: .85rem; }
.viz-tabela summary { cursor: pointer; color: var(--texto-3); }
.viz-tooltip { position: fixed; z-index: 60; pointer-events: none; min-width: 140px; max-width: 260px; padding: 8px 10px; border-radius: 8px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); box-shadow: 0 6px 18px rgba(0,0,0,.14); font-size: .82rem; }
.viz-tooltip .t { color: var(--texto-3); margin-bottom: 4px; }
.viz-tooltip .l { display: flex; align-items: center; gap: 8px; }
.viz-tooltip .l b { font-weight: 700; }
.viz-tooltip .l .k { display: inline-block; width: 12px; height: 2px; }
.viz-tooltip .l .k.viz-s1 { background: var(--viz-s1, #2a78d6); } .viz-tooltip .l .k.viz-s2 { background: var(--viz-s2, #eb6834); } .viz-tooltip .l .k.viz-s3 { background: var(--viz-s3, #1baf7a); }
.viz-tooltip .l .k.st-bom { background: #0ca30c; } .viz-tooltip .l .k.st-alerta { background: #fab219; } .viz-tooltip .l .k.st-serio { background: #ec835a; } .viz-tooltip .l .k.st-critico { background: #d03b3b; }
.kpi-link { text-decoration: none; color: inherit; } .kpi-link:hover { border-color: var(--azul); }
.abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.abas a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda); text-decoration: none; color: var(--texto-2); font-size: .9rem; }
.abas a.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Tarja de atualização: aviso sticky no topo quando o servidor subiu uma versão
   nova (deploy/restart). Fica oculta por padrão ([hidden]); o front a revela ao
   detectar divergência entre a versão da página e a de /versao. */
.tarja-atualizacao { position: sticky; top: 0; z-index: 100; display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: center; padding: 10px 16px; background: #e67e22; color: #fff;
  font-size: .92rem; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.tarja-atualizacao[hidden] { display: none; }
.botao-atualizar { appearance: none; cursor: pointer; border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .18); color: #fff; font-weight: 700; font-size: .88rem;
  padding: 5px 14px; border-radius: 999px; }
.botao-atualizar:hover { background: rgba(255, 255, 255, .3); }