/* Índice de Maturidade Digital — DigiMoz. Moldura NewLink; dados com a escala sequencial azul 0–5
   e a paleta de estado (sempre com ícone e texto). Modo escuro com passos próprios. */
:root {
  color-scheme: light;
  --marca: #2A8CBD; --marca-forte: #1f6f97; --marca-vermelho: #D93438; --marca-cinza: #848688;
  --plano: #f9f9f7; --superficie: #fcfcfb; --tinta: #0b0b0b; --tinta-2: #52514e; --tinta-3: #898781;
  --linha: #e1e0d9; --borda: rgba(11, 11, 11, .10);
  --ok: #0ca30c; --ok-texto: #006300; --aviso: #fab219; --serio: #ec835a; --critico: #d03b3b;
  --nota-0: #cde2fb; --nota-1: #9ec5f4; --nota-2: #6da7ec; --nota-3: #3987e5; --nota-4: #256abf; --nota-5: #184f95;
  --barra: #2a78d6;
  --raio: 8px; --espaco: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --plano: #0d0d0d; --superficie: #1a1a19; --tinta: #ffffff; --tinta-2: #c3c2b7; --tinta-3: #898781;
    --linha: #2c2c2a; --borda: rgba(255, 255, 255, .10); --ok-texto: #0ca30c; --barra: #3987e5;
    --nota-0: #104281; --nota-1: #184f95; --nota-2: #1c5cab; --nota-3: #3987e5; --nota-4: #6da7ec; --nota-5: #9ec5f4;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--plano); color: var(--tinta); line-height: 1.5; }
a { color: var(--marca-forte); }
@media (prefers-color-scheme: dark) { a { color: #6db8e0; } }
.saltar { position: absolute; left: -9999px; } .saltar:focus { left: var(--espaco); top: var(--espaco); }
.topo { display: flex; flex-wrap: wrap; gap: var(--espaco); align-items: center; justify-content: space-between;
        padding: 12px 24px; background: var(--superficie); border-bottom: 3px solid var(--marca); }
.marca { font-weight: 700; color: var(--tinta); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.marca small { color: var(--marca-cinza); font-weight: 600; }
.marca-sinal { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, var(--marca) 60%, var(--marca-vermelho) 60%); }
.topo nav { display: flex; flex-wrap: wrap; gap: 16px; }
.topo nav a { text-decoration: none; font-weight: 500; }
.sessao { display: flex; gap: 12px; align-items: center; } .sessao form { margin: 0; }
main { max-width: 1200px; margin: 0 auto; padding: 24px; }
.rodape { text-align: center; color: var(--tinta-3); font-size: .85rem; padding: 24px; }
h1 { font-size: 1.6rem; margin: 0 0 12px; } h2 { font-size: 1.2rem; margin: 24px 0 8px; }
.mudo { color: var(--tinta-2); font-size: .9rem; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; margin-bottom: 16px; }
.cartao.estreito { max-width: 420px; margin: 48px auto; }
.grelha { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela th { color: var(--tinta-2); font-weight: 600; font-size: .85rem; }
.tabela td.num, .tabela th.num { text-align: right; }
.nota-celula { text-align: center !important; font-weight: 600; min-width: 44px; border: 2px solid var(--superficie); }
.nota-0, .nota-1, .nota-2 { color: #0b0b0b; } .nota-3, .nota-4, .nota-5 { color: #ffffff; }
.nota-0 { background: var(--nota-0); } .nota-1 { background: var(--nota-1); } .nota-2 { background: var(--nota-2); }
.nota-3 { background: var(--nota-3); } .nota-4 { background: var(--nota-4); } .nota-5 { background: var(--nota-5); }
@media (prefers-color-scheme: dark) { .nota-0, .nota-1, .nota-2, .nota-3 { color: #ffffff; } .nota-4, .nota-5 { color: #0b0b0b; } }
.nota-vazia { color: var(--tinta-3); text-align: center !important; }
.barra { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.barra-trilho { flex: 1; height: 10px; background: var(--linha); border-radius: 0 4px 4px 0; }
.barra-preenchida { height: 10px; background: var(--barra); border-radius: 0 4px 4px 0; }
.barra-valor { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--borda); color: var(--tinta-2); }
.alerta { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: var(--raio);
          border: 1px solid var(--borda); border-left-width: 4px; background: var(--superficie); margin: 4px 0; }
.alerta-ok { border-left-color: var(--ok); } .alerta-aviso { border-left-color: var(--aviso); }
.alerta-serio { border-left-color: var(--serio); } .alerta-critico { border-left-color: var(--critico); }
.formulario { display: grid; gap: 12px; }
.campo { display: grid; gap: 4px; font-weight: 500; }
.campo input, .campo select, .campo textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--linha);
  border-radius: 6px; background: var(--superficie); color: var(--tinta); }
.botao, .botao-secundario, .botao-perigo { font: inherit; font-weight: 600; padding: 8px 16px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.botao { background: var(--marca); color: #fff; } .botao:hover { background: var(--marca-forte); }
.botao-secundario { background: transparent; color: var(--tinta); border-color: var(--linha); }
.botao-perigo { background: var(--marca-vermelho); color: #fff; }
.botao-texto { background: none; border: none; color: var(--marca-forte); cursor: pointer; font: inherit; padding: 0; }
.erro-formulario { color: var(--critico); font-weight: 500; }
.sucesso { color: var(--ok-texto); font-weight: 500; }
.grafico { width: 100%; height: auto; }
.grafico .grade { stroke: var(--linha); stroke-width: 1; } .grafico .linha { fill: none; stroke: var(--barra); stroke-width: 2; }
.grafico .ponto { fill: var(--barra); stroke: var(--superficie); stroke-width: 2; }
.grafico text { fill: var(--tinta-3); font-size: 11px; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
@media (max-width: 700px) { main { padding: 12px; } .topo { padding: 12px; } }
@media print { .topo nav, .sessao, .rodape { display: none; } body { background: #fff; } }
.legenda { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: .85rem; }
.legenda-item { display: inline-block; padding: 2px 8px; border-radius: 4px; }
.destaque { font-size: 2.4rem; font-weight: 700; margin: 0; line-height: 1.1; }
.destaque small { font-size: 1rem; color: var(--tinta-2); font-weight: 500; }
.dimensao { display: grid; gap: 2px; margin: 8px 0; }
.linha-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 12px; }
.linha-filtros .campo { min-width: 200px; }
.codigo { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; white-space: pre-wrap;
          background: var(--plano); padding: 12px; border-radius: 6px; border: 1px solid var(--linha); overflow-x: auto; }
.multiplos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.multiplos figure { margin: 0; } .multiplos figcaption { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.miniatura { max-width: 100%; border: 1px solid var(--linha); border-radius: 6px; }
.rolar { overflow-x: auto; }
.lista-alertas { list-style: none; margin: 0; padding: 0; }