/* Levi System — paleta AutoTrac */
:root {
  --azul: #036289;
  --azul-escuro: #024663;
  --azul-vivo: #0093d0;
  --verde: #b1cc3d;

  --fundo: #f6f8fa;
  --superficie: #ffffff;
  --superficie-2: #f1f9fd;
  --texto: #181d27;
  --suave: #5f6b76;
  --borda: #dde5ea;

  --ok: #2f7d32;        --ok-bg: #e8f3e9;
  --atencao: #96650b;   --atencao-bg: #fdf3e0;
  --alerta: #a65a16;    --alerta-bg: #fdeede;
  --risco: #b3261e;     --risco-bg: #fbe9e7;

  --lateral: 232px;
}

/* escuro automático pelo sistema, salvo quando o tema claro está fixado */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0b1620; --superficie: #10202c; --superficie-2: #162b3a;
    --texto: #e8f2f8; --suave: #92a7b6; --borda: #1f3a4d;
    --azul: #4db8e8; --azul-escuro: #081a26;
    --ok: #86d98a; --ok-bg: #16301a;
    --atencao: #e5bb5e; --atencao-bg: #332709;
    --alerta: #e8a76a; --alerta-bg: #35220f;
    --risco: #f2938c; --risco-bg: #351614;
  }
}

/* escuro forçado pelo seletor */
:root[data-tema="escuro"] {
  --fundo: #0b1620; --superficie: #10202c; --superficie-2: #162b3a;
  --texto: #e8f2f8; --suave: #92a7b6; --borda: #1f3a4d;
  --azul: #4db8e8; --azul-escuro: #081a26;
  --ok: #86d98a; --ok-bg: #16301a;
  --atencao: #e5bb5e; --atencao-bg: #332709;
  --alerta: #e8a76a; --alerta-bg: #35220f;
  --risco: #f2938c; --risco-bg: #351614;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: Poppins, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

a { color: var(--azul-vivo); }

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral);
  flex-shrink: 0;
  background: var(--azul-escuro);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.lateral .marca { display: flex; align-items: center; gap: 11px; padding: 20px 18px 16px; }
.lateral .marca i { width: 9px; height: 26px; border-radius: 4px; background: var(--verde); flex-shrink: 0; }
.lateral .marca h1 { font-size: 17px; margin: 0; font-weight: 600; letter-spacing: -0.2px; }
.lateral .selo { font-size: 10px; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.25);
                 border-radius: 4px; padding: 1px 5px; }

.lateral nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; }
.lateral nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px; text-decoration: none;
  color: rgba(255,255,255,.75); font-size: 14px;
}
.lateral nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.lateral nav a.ativo { background: var(--azul-vivo); color: #fff; font-weight: 500; }
.lateral nav a svg { width: 17px; height: 17px; flex-shrink: 0; }

.grupo-lateral { padding: 16px 18px 6px; }
.grupo-lateral > span { font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
                        color: rgba(255,255,255,.45); }

.carteiras { display: flex; flex-direction: column; gap: 3px; padding: 6px 10px 0; }
.carteiras a {
  padding: 7px 12px; border-radius: 8px; text-decoration: none;
  color: rgba(255,255,255,.72); font-size: 13px;
}
.carteiras a:hover { background: rgba(255,255,255,.08); color: #fff; }
.carteiras a.ativo { background: rgba(255,255,255,.14); color: #fff; font-weight: 500;
                     box-shadow: inset 3px 0 0 var(--verde); }

.rodape-lateral { margin-top: auto; padding: 14px 14px 18px; }
.temas { display: flex; gap: 4px; background: rgba(0,0,0,.22); border-radius: 9px; padding: 3px; }
.temas button {
  flex: 1; background: transparent; border: 0; border-radius: 7px; cursor: pointer;
  color: rgba(255,255,255,.65); font-size: 11px; padding: 6px 4px; font-family: inherit;
}
.temas button:hover { color: #fff; background: rgba(255,255,255,.08); }
.temas button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main.limite { max-width: 1180px; width: 100%; margin: 0 auto; padding: 24px 22px 8px;
              display: flex; flex-direction: column; gap: 16px; }

/* ---------- componentes ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 18px; }
.cartao > h2 { margin: 0 0 12px; font-size: 15px; color: var(--azul); }
.cartao header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cartao header h2 { margin: 0; font-size: 15px; color: var(--azul); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { background: var(--superficie-2); border: 1px solid var(--borda); border-left: 3px solid var(--azul-vivo);
       border-radius: 12px; padding: 10px 14px; }
.kpi b { display: block; font-size: 25px; font-weight: 600; color: var(--azul); line-height: 1.1;
         font-variant-numeric: tabular-nums; }
.kpi.risco b { color: var(--risco); }
.kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
     color: var(--suave); font-weight: 500; padding: 0 8px 8px; }
td { padding: 8px; border-top: 1px solid var(--borda); vertical-align: top; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rolante { overflow-x: auto; }

.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px;
            font-weight: 600; white-space: nowrap; }
.f-sem { background: var(--superficie-2); color: var(--suave); }
.f-mais2anos { background: var(--risco-bg); color: var(--risco); }
.f-um_dois { background: var(--alerta-bg); color: var(--alerta); }
.f-tres_doze { background: var(--atencao-bg); color: var(--atencao); }
.f-recente { background: var(--ok-bg); color: var(--ok); }

.prio { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px;
        border-radius: 5px; color: #fff; font-size: 11px; font-weight: 700; }
.pA { background: var(--risco); } .pB { background: var(--alerta); } .pC { background: var(--suave); }

.barra { height: 7px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; min-width: 60px; }
.barra i { display: block; height: 100%; background: var(--azul-vivo); border-radius: 999px; }

form.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
input[type="search"], select {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px;
  padding: 7px 11px; font-size: 13px; color: var(--texto); font-family: inherit;
}
input[type="search"] { width: 250px; }
input[type="search"]:focus, select:focus { outline: none; border-color: var(--azul-vivo); }
button.acao { background: var(--azul); color: #fff; border: 0; border-radius: 8px; padding: 8px 15px;
              font-size: 13px; cursor: pointer; font-family: inherit; }
button.acao:hover { background: var(--azul-vivo); }

.oferta-bloco { border-top: 3px solid var(--verde); }
.oferta-bloco .topo-oferta { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.oferta-bloco h3 { margin: 0; font-size: 16px; color: var(--azul); }
.oferta-bloco p.chamada { margin: 2px 0 0; font-size: 13px; color: var(--suave); }
.oferta-bloco .contador { text-align: right; flex-shrink: 0; }
.oferta-bloco .contador b { display: block; font-size: 25px; font-weight: 600; color: var(--azul);
                            line-height: 1; font-variant-numeric: tabular-nums; }
.oferta-bloco .contador span { font-size: 10px; text-transform: uppercase; color: var(--suave); }
ul.condicoes { margin: 12px 0; padding: 0; list-style: none; font-size: 13px; }
ul.condicoes li { padding-left: 16px; position: relative; margin-bottom: 4px; }
ul.condicoes li::before { content: "•"; color: var(--verde); font-weight: 700; position: absolute; left: 2px; }

.aviso { font-size: 12px; border-radius: 10px; padding: 9px 12px; }
.aviso-atencao { background: var(--atencao-bg); color: var(--atencao); }
.aviso-risco { background: var(--risco-bg); color: var(--risco); }
.rodape-oferta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 12px;
                 border-top: 1px solid var(--borda); font-size: 12px; color: var(--suave); }
.rodape-oferta a { margin-left: auto; }

footer.rodape { max-width: 1180px; width: 100%; margin: 16px auto 0; padding: 18px 22px;
                border-top: 1px solid var(--borda); font-size: 11px; color: var(--suave); }

.contato { font-size: 12px; line-height: 1.35; }
.contato a { word-break: break-all; }
.vazio { text-align: center; color: var(--suave); padding: 28px 0; }
.sutil { font-size: 11px; color: var(--suave); }
.alerta-susp { color: var(--risco); font-weight: 700; }
.titulo-pagina { margin: 0; color: var(--azul); font-size: 21px; }

@media (max-width: 980px) {
  .app { flex-direction: column; }
  .lateral { width: 100%; height: auto; position: static; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; }
  .carteiras { flex-direction: row; flex-wrap: wrap; }
  .carteiras a.ativo { box-shadow: none; }
  .rodape-lateral { margin-top: 0; }
  .temas { max-width: 280px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .duas, .tres { grid-template-columns: 1fr; }
  input[type="search"] { width: 100%; }
}

/* ================= Painel DIAT ================= */
:root {
  --c-azul: #1b8fd6; --c-vermelho: #d63b30; --c-roxo: #8a3fd6;
  --c-laranja: #e8920c; --c-verde: #2fa84f; --c-cinza: #5b6573; --c-preto: #20262e; --c-amarelo: #e3b416;
}

.faixa-ficticio { background: #fff3cd; color: #7a5600; border-bottom: 1px solid #f0d78a;
                  font-size: 12px; font-weight: 600; text-align: center; padding: 7px 14px; letter-spacing: .2px; }
:root[data-tema="escuro"] .faixa-ficticio { background: #3a2e08; color: #f3d27a; border-color: #5a4710; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .faixa-ficticio { background: #3a2e08; color: #f3d27a; border-color: #5a4710; }
}

.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cabecalho p { margin: 4px 0 0; }
.ponto-vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-verde);
              margin-right: 6px; vertical-align: middle; }

.botao-secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda);
                    border-radius: 8px; padding: 8px 15px; font-size: 13px; cursor: pointer;
                    font-family: inherit; text-decoration: none; display: inline-block; }
.botao-secundario:hover { border-color: var(--azul-vivo); }
.acao-laranja { background: var(--c-laranja); color: #fff; border-radius: 8px; padding: 9px 18px;
                text-decoration: none; font-weight: 600; font-size: 13px; text-align: center; }
.acao-laranja:hover { filter: brightness(1.07); }

.filtros-agenda { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.filtros-agenda label { display: flex; flex-direction: column; gap: 5px; font-size: 10px;
                        text-transform: uppercase; letter-spacing: .5px; color: var(--suave); }
.filtros-agenda select, input[type="date"] {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px;
  padding: 7px 11px; font-size: 13px; color: var(--texto); font-family: inherit; }
.botoes-filtro { display: flex; gap: 8px; }

.linha-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rotulo { display: block; font-size: 12px; color: var(--suave); }
.carimbo { font-size: 10px; color: var(--suave); border: 1px dashed var(--borda); border-radius: 6px;
           padding: 1px 6px; white-space: nowrap; }
.valor-grande { font-size: 30px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.valor-medio { display: block; font-size: 22px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.lado { text-align: right; }
.lado b { font-variant-numeric: tabular-nums; }
.direita { text-align: right; }
.centro { text-align: center; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
.cor-ok { color: var(--ok); } .cor-azul { color: var(--azul-vivo); } .cor-risco { color: var(--risco); }

.barra.grossa { height: 11px; margin-top: 6px; }
.barra i.b-verde { background: var(--c-verde); } .barra i.b-amarelo { background: var(--c-amarelo); }
.barra i.b-vermelho { background: var(--c-vermelho); } .barra i.b-azul { background: var(--c-azul); }
.barra i.b-preto { background: var(--c-preto); }
.barra-rotulo { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.barra-rotulo .barra { flex: 1; }
.barra-rotulo b, .barra-rotulo small { font-size: 12px; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }

.grupo-titulo { margin: 0 0 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--suave); }
.fluxo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.etapa { border-radius: 14px; padding: 14px; color: #fff; display: flex; flex-direction: column; min-height: 118px; }
.etapa span { font-size: 13px; opacity: .92; }
.etapa b { font-size: 32px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.etapa small { font-size: 11px; opacity: .8; }
.e-azul { background: var(--c-azul); } .e-vermelho { background: var(--c-vermelho); }
.e-roxo { background: var(--c-roxo); } .e-laranja { background: var(--c-laranja); }
.e-verde { background: var(--c-verde); } .e-cinza { background: var(--c-cinza); }

.resumo-atencao { display: grid; grid-template-columns: 2.6fr 1fr; gap: 16px; }
.resumo-atencao td { white-space: nowrap; }
tr.linha-risco td { background: var(--risco-bg); color: var(--risco); }
ul.alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
ul.alertas li { padding-left: 16px; position: relative; }
ul.alertas li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; }
ul.alertas li.al-risco::before { background: var(--c-vermelho); }
ul.alertas li.al-info::before { background: var(--c-azul); }

.alternador { display: flex; gap: 3px; background: var(--superficie-2); border: 1px solid var(--borda);
              border-radius: 9px; padding: 3px; }
.alternador a { padding: 5px 12px; border-radius: 7px; text-decoration: none; color: var(--suave); font-size: 12px; }
.alternador a.ativo { background: var(--superficie); color: var(--texto); font-weight: 600;
                      box-shadow: 0 1px 2px rgba(0,0,0,.08); }

table.detalhe td { font-size: 13px; white-space: nowrap; }
.st-em_servico { background: #e3f1fb; color: #136ba3; }
.st-atrasado { background: var(--risco-bg); color: var(--risco); }
.st-orcamento { background: #f1e7fb; color: #6c2fae; }
.st-aguard_autorizacao { background: #fdf0dc; color: #9a5d00; }
.st-liberado { background: #e5f5e9; color: #22783a; }
.st-cancelado { background: var(--superficie-2); color: var(--suave); }

.kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; overflow-x: auto; }
.coluna { background: var(--superficie-2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column;
          gap: 8px; border-top: 4px solid var(--c-cinza); max-height: 640px; overflow-y: auto; }
.k-em_servico { border-top-color: var(--c-azul); } .k-orcamento { border-top-color: var(--c-roxo); }
.k-aguard_autorizacao { border-top-color: var(--c-laranja); } .k-liberado { border-top-color: var(--c-verde); }
.coluna-topo { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; padding: 2px 4px; }
.ficha { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 9px 10px;
         font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.ficha-atraso { border-left: 3px solid var(--c-vermelho); }
.vazio-coluna { text-align: center; }

.tres-kpis { grid-template-columns: repeat(3, 1fr); }
.kpi small { display: block; }

.meta-geral { display: flex; justify-content: space-between; gap: 20px; border-radius: 16px; padding: 20px 22px; color: #fff; }
.meta-geral > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meta-geral > div:first-child { flex: 1; max-width: 420px; }
.meta-geral .rotulo { color: rgba(255,255,255,.8); }
.meta-geral span { font-size: 12px; opacity: .85; }
.barra.clara { background: rgba(255,255,255,.25); }
.barra.clara i { background: #fff; }
.mg-preto { background: var(--c-preto); } .mg-vermelho { background: var(--c-vermelho); }
.mg-amarelo { background: #b88a00; } .mg-verde { background: var(--c-verde); } .mg-azul { background: var(--c-azul); }

.legenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; }
.item-legenda { display: inline-flex; align-items: center; gap: 6px; }
.bola { display: inline-flex; width: 20px; height: 20px; border-radius: 6px; align-items: center; justify-content: center;
        color: #fff; font-size: 10px; font-weight: 700; font-style: normal; }
.bola.b-preto { background: var(--c-preto); } .bola.b-vermelho { background: var(--c-vermelho); }
.bola.b-amarelo { background: var(--c-amarelo); } .bola.b-verde { background: var(--c-verde); }
.bola.b-azul { background: var(--c-azul); }

ol.ranking { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
ol.ranking li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--borda); }
.posicao { width: 24px; height: 24px; border-radius: 50%; background: var(--superficie-2); display: inline-flex;
           align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--suave); }
ol.ranking li:nth-child(-n+3) .posicao { background: #fdf0dc; color: #9a5d00; }
.quem { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.anel { --cor: var(--c-cinza); width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center;
        justify-content: center; font-size: 11px; font-weight: 700; color: var(--cor); position: relative; isolation: isolate;
        background: conic-gradient(var(--cor) calc(var(--p) * 1%), var(--superficie-2) 0); }
.anel::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--superficie); z-index: -1; }
.a-preto { --cor: var(--c-preto); } .a-vermelho { --cor: var(--c-vermelho); } .a-amarelo { --cor: #b88a00; }
.a-verde { --cor: var(--c-verde); } .a-azul { --cor: var(--c-azul); }
:root[data-tema="escuro"] .a-preto { --cor: #c9d3dc; }

dialog.pop { border: 2px solid #f2c27a; border-radius: 18px; padding: 22px; width: min(560px, 92vw);
             background: var(--superficie); color: var(--texto); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog.pop::backdrop { background: rgba(10, 20, 30, .55); }
.pop-topo { display: flex; justify-content: space-between; align-items: flex-start; }
.pop-topo h2 { margin: 0; font-size: 19px; }
.pop-topo p { margin: 3px 0 0; }
.fechar { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--suave); }
ul.pop-alertas { list-style: none; margin: 14px 0; padding: 10px 14px; background: var(--risco-bg); color: var(--risco);
                 border: 1px solid #f0b6b0; border-radius: 12px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
ul.pop-alertas li::before { content: "⚠ "; }
.pop-cartoes { margin-top: 14px; gap: 10px; }
.pop-cartoes .rotulo { text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.pop-contas { display: flex; justify-content: space-between; margin: 14px 4px 4px; font-size: 13px; }
.pop-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

.palco-3d { position: relative; height: 68vh; min-height: 460px; border-radius: 16px; overflow: hidden;
            border: 1px solid var(--borda); background: var(--superficie); }
#cena { position: absolute; inset: 0; }
#cena canvas { display: block; cursor: grab; }
.camada-rotulos { position: absolute; inset: 0; pointer-events: none; }
.rotulo-placa { font: 600 10px Consolas, monospace; background: rgba(255,255,255,.92); color: #181d27;
                padding: 1px 5px; border-radius: 4px; border: 1px solid #c8d0d6; }
.rotulo-atraso { background: #d63b30; color: #fff; border-color: #a82a21; }
.rotulo-area { font: 600 11px Poppins, sans-serif; color: #fff; background: rgba(2, 70, 99, .85);
               padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.rotulo-titulo { font-size: 13px; background: #036289; }
.rotulo-baia { font: 500 9px Poppins, sans-serif; color: #3d3200; background: rgba(242, 209, 58, .9);
               padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.controles-3d { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; }
.controles-3d button[aria-pressed="true"] { border-color: var(--azul-vivo); color: var(--azul-vivo); }
.ficha-3d { position: absolute; top: 14px; right: 14px; width: 270px; background: var(--superficie);
            border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ficha-3d h3 { margin: 8px 0 6px; font-size: 15px; }
.ficha-3d .fechar { position: absolute; top: 8px; right: 10px; }
.ficha-3d dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12px; }
.ficha-3d dt { color: var(--suave); }
.ficha-3d dd { margin: 0; }
#sem-webgl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#sem-webgl[hidden] { display: none; }
.longe .rotulo-baia { display: none; }

@media (max-width: 980px) {
  .filtros-agenda { grid-template-columns: 1fr 1fr; }
  .fluxo { grid-template-columns: repeat(3, 1fr); }
  .resumo-atencao, .tres-kpis { grid-template-columns: 1fr; }
  .meta-geral { flex-direction: column; }
  .meta-geral .direita { text-align: left; }
}

/* ---------- revisão 30/10: contraste e tema escuro ---------- */
/* tons escuros onde há texto branco em cima (as cores vivas ficavam entre 2,5:1 e 3,5:1) */
:root { --c-azul-txt: #136ba3; --c-verde-txt: #1f7a3a; --c-laranja-txt: #a35f00; }
.e-azul { background: var(--c-azul-txt); } .e-verde { background: var(--c-verde-txt); }
.e-laranja { background: var(--c-laranja-txt); }
/* no escuro --azul vira um azul claro: botão com texto branco precisa do azul fixo */
button.acao { background: #036289; }
button.acao:hover { background: #024663; }
/* itens de grid encolhem: sem isso a Agenda no celular rolava a página inteira na horizontal */
.duas > *, .resumo-atencao > *, .cartao { min-width: 0; }
.botao-secundario:focus-visible, .alternador a:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }

:root[data-tema="escuro"] .bola.b-preto { background: #c9d3dc; color: #0b1620; }
:root[data-tema="escuro"] .st-em_servico { background: #12324a; color: #8fd0ff; }
:root[data-tema="escuro"] .st-orcamento { background: #2e1d47; color: #d3b3ff; }
:root[data-tema="escuro"] .st-aguard_autorizacao { background: #3a2a0c; color: #f3c879; }
:root[data-tema="escuro"] .st-liberado { background: #133320; color: #8fdca6; }
:root[data-tema="escuro"] dialog.pop { border-color: #7a5a1f; }
:root[data-tema="escuro"] ul.pop-alertas { border-color: #6b2b26; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .a-preto { --cor: #c9d3dc; }
  :root:not([data-tema="claro"]) .bola.b-preto { background: #c9d3dc; color: #0b1620; }
  :root:not([data-tema="claro"]) .st-em_servico { background: #12324a; color: #8fd0ff; }
  :root:not([data-tema="claro"]) .st-orcamento { background: #2e1d47; color: #d3b3ff; }
  :root:not([data-tema="claro"]) .st-aguard_autorizacao { background: #3a2a0c; color: #f3c879; }
  :root:not([data-tema="claro"]) .st-liberado { background: #133320; color: #8fdca6; }
  :root:not([data-tema="claro"]) dialog.pop { border-color: #7a5a1f; }
  :root:not([data-tema="claro"]) ul.pop-alertas { border-color: #6b2b26; }
}