:root {
  --marca-azul: #506D9C; --marca-rosa: #EF5994; --marca-lavanda: #7987C3;
  --fundo: #f4f5fa; --superficie: #ffffff; --texto: #1f2433; --suave: #5b6276; --borda: #dde1ec;
  --chip: #EBEEF7; --acento: #506D9C; --acento-texto: #ffffff; --destaque-texto: #C2306B;
  --secundaria-texto: #4F5C99;
  --n-ok: #2E7D4F; --n-ok-fundo: #E2F1E8;
  --n-atrasado: #E3A23B; --n-atrasado-texto: #8A5300; --n-atrasado-fundo: #FDF1DD;
  --n-fora: #B42335; --n-fora-fundo: #FBE3E6;
  --n-sem: #C9CEDB; --n-sem-texto: #5b6276; --n-sem-fundo: #EBEEF7;
  --fonte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --largura: 960px; --raio: 12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121624; --superficie: #1b2032; --texto: #e7e9f2; --suave: #a2a8bd; --borda: #2e3550;
    --chip: #252b42; --acento: #8EA6D6; --acento-texto: #10182a; --destaque-texto: #F47AA9;
    --secundaria-texto: #A3ADE0;
    --n-ok: #86D3A4; --n-ok-fundo: #1F3328;
    --n-atrasado: #F2C46D; --n-atrasado-texto: #F2C46D; --n-atrasado-fundo: #3A2F1A;
    --n-fora: #FF8A96; --n-fora-fundo: #3A1F25;
    --n-sem: #3A4158; --n-sem-texto: #a2a8bd; --n-sem-fundo: #252b42;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 16px; line-height: 1.5; }
a { color: var(--secundaria-texto); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--marca-lavanda); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.conteudo { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 16px; }

.faixa-marca { display: grid; grid-template-columns: 34fr 33fr 33fr; height: 4px; }
.faixa-marca span:nth-child(1) { background: var(--marca-azul); }
.faixa-marca span:nth-child(2) { background: var(--marca-lavanda); }
.faixa-marca span:nth-child(3) { background: var(--marca-rosa); }

.topo { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topo-linha { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; min-height: 44px; }
.logo { height: 28px; width: auto; display: block; }
.topo-titulo { font-weight: 600; color: var(--suave); border-left: 1px solid var(--borda); padding-left: 12px; }
.topo-link { margin-left: auto; font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; }

main.conteudo { padding-top: 24px; padding-bottom: 40px; display: grid; gap: 20px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 16px; }

.resumo { display: flex; gap: 14px; align-items: flex-start; border-left-width: 6px; }
.resumo h1 { font-size: 22px; }
.resumo p { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
.resumo-ok { border-left-color: var(--n-ok); }
.resumo-atrasado { border-left-color: var(--n-atrasado); }
.resumo-fora { border-left-color: var(--n-fora); }
.resumo-sem { border-left-color: var(--n-sem); }
.ponto { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 6px; background: var(--n-sem); }
.resumo-ok .ponto { background: var(--n-ok); }
.resumo-atrasado .ponto { background: var(--n-atrasado); }
.resumo-fora .ponto { background: var(--n-fora); }

.grupo-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.grupo-cabeca h2 { font-size: 18px; }
.grupo-cabeca h2 a { color: inherit; text-decoration: none; }
.grupo-cabeca h2 a:hover { text-decoration: underline; }
.selo { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--chip); color: var(--secundaria-texto); }
.selo-interno { background: var(--n-atrasado-fundo); color: var(--n-atrasado-texto); }

.servicos { list-style: none; margin: 0; padding: 0; }
.servico { padding: 14px 0; border-top: 1px solid var(--borda); }
.servico:first-child { border-top: 0; }
.servico-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.servico-nome { font-weight: 600; }
.nivel { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.nivel-ok { background: var(--n-ok-fundo); color: var(--n-ok); }
.nivel-atrasado { background: var(--n-atrasado-fundo); color: var(--n-atrasado-texto); }
.nivel-fora { background: var(--n-fora-fundo); color: var(--n-fora); }
.nivel-sem { background: var(--n-sem-fundo); color: var(--n-sem-texto); }

.barras { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; gap: 2px; height: 32px; }
.barra { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--n-sem); }
.barra:nth-child(-n+60) { display: none; }
.b-ok { background: var(--n-ok); }
.b-sem { background: var(--n-sem); }
.b-atrasado { background: var(--n-atrasado); }
.b-fora { background: var(--n-fora); }
.barras-pe { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--suave); }
.so-largo { display: none; }
.detalhe { margin: 6px 0 0; font-family: var(--fonte-mono); font-size: 12px; color: var(--suave); }

.legenda ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.legenda li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.legenda .amostra { flex: none; width: 12px; height: 12px; border-radius: 2px; transform: translateY(1px); }
.legenda strong { white-space: nowrap; }
.legenda span.texto { color: var(--suave); }

h2.secao { font-size: 18px; margin-bottom: 8px; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.incidente { border-left: 4px solid var(--n-sem); padding: 2px 0 2px 12px; }
.incidente-fora { border-left-color: var(--n-fora); }
.incidente-atrasado { border-left-color: var(--n-atrasado); }
.incidente p { margin: 0; }
.incidente-titulo { font-weight: 600; }
.incidente-quando { font-size: 14px; color: var(--suave); }
.vazio { color: var(--suave); margin: 0; }
.como p { margin: 0 0 8px; color: var(--suave); }
.como p:last-child { margin-bottom: 0; }

.config dl { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 8px 0 16px; }
.config dt { font-weight: 600; font-size: 14px; margin-top: 8px; }
.config dd { margin: 0; color: var(--suave); font-size: 14px; overflow-wrap: anywhere; }
.sim { color: var(--n-ok); font-weight: 600; }
.nao { color: var(--n-fora); font-weight: 600; }
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--acento); background: var(--acento); color: var(--acento-texto); }
.aviso { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.aviso-ok { background: var(--n-ok-fundo); color: var(--n-ok); }
.aviso-erro { background: var(--n-fora-fundo); color: var(--n-fora); }

.rodape { border-top: 1px solid var(--borda); background: var(--superficie); padding: 20px 0; font-size: 14px; color: var(--suave); }
.rodape a { display: inline-flex; min-height: 44px; align-items: center; }

@media (min-width: 720px) {
  .cartao { padding: 24px; }
  .barra:nth-child(-n+60) { display: block; }
  .so-largo { display: inline; }
  .so-estreito { display: none; }
  .resumo h1 { font-size: 26px; }
  .config dl { grid-template-columns: max-content 1fr; }
  .config dt { margin-top: 0; }
}