/* SIPDC — azul escuro e cinza claro (docs/09-layout.md) */
:root {
  --azul-950: #08172D;
  --azul-900: #0B1F3A;
  --azul-800: #12305A;
  --azul-700: #1A4176;
  --azul-600: #1E4E8C;
  --azul-100: #E3ECF7;
  --cinza-50:  #F4F6F9;
  --cinza-100: #EAEEF3;
  --cinza-200: #DCE2EA;
  --cinza-300: #C5CEDA;
  --cinza-500: #6B7787;
  --cinza-700: #3B4656;
  --texto:     #1A2433;
  --branco:    #FFFFFF;
  --st-prazo: #1D5FD6;     --st-prazo-bg: #DCE8FC;
  --st-vencida: #C62828;   --st-vencida-bg: #FBE3E3;
  --st-paga: #1E7F43;      --st-paga-bg: #DDF3E5;
  --st-cancelada: #6B7280; --st-cancelada-bg: #ECEEF1;
  --st-alerta: #9A6400;    --st-alerta-bg: #FCF0D6;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(11,31,58,.06), 0 2px 8px rgba(11,31,58,.05);
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--fonte); color: var(--texto); background: var(--cinza-50); font-size: 15px; line-height: 1.45; }
a { color: var(--azul-600); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- topo ---------- */
.faixa-homologacao { background: #9A6400; color: #fff; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; }
.topo { background: var(--azul-900); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 22px; min-height: 64px; position: sticky; top: 0; z-index: 5; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .04em; color: #fff; text-decoration: none; }
.marca img { width: 30px; height: 30px; border-radius: 7px; }
.orgao { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9FB6D6; border-left: 1px solid #2A4569; padding-left: 14px; }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; }
.relogio { text-align: right; line-height: 1.25; color: #C9D6E8; white-space: nowrap; }
.relogio b { color: #fff; font-weight: 600; }
.usuario { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--azul-700); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.usuario small { display: block; color: #9FB6D6; font-size: 11px; }
.botao-topo { color: #C9D6E8; background: transparent; border: 1px solid #2A4569; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; text-decoration: none; }
.botao-topo:hover { color: #fff; border-color: #4A6A93; }
.seletor-area { display: flex; align-items: center; gap: 8px; }
.seletor-area select { font: inherit; font-size: 13px; background: var(--azul-800); color: #fff; border: 1px solid #2A4569; border-radius: 8px; padding: 6px 8px; }

/* ---------- estrutura ---------- */
.corpo { display: flex; min-height: calc(100vh - 64px); }
.lateral { width: 228px; background: var(--azul-800); color: #C9D6E8; padding: 16px 10px; flex: none; }
.lateral a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: inherit; text-decoration: none; margin-bottom: 2px; }
.lateral a:hover { background: rgba(255,255,255,.06); color: #fff; }
.lateral a.ativo { background: var(--azul-600); color: #fff; }
.lateral svg { width: 18px; height: 18px; flex: none; }
.lateral .sep { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7F98BC; padding: 14px 12px 6px; }
.lateral .contador { margin-left: auto; background: var(--st-vencida); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight: 700; }
.conteudo { flex: 1; padding: 24px 28px 48px; min-width: 0; }
.estreito { max-width: 760px; }

h1.titulo, h2.titulo { font-size: 22px; margin: 0 0 4px; font-weight: 700; color: var(--azul-900); }
.sub { color: var(--cinza-500); font-size: 13px; margin: 0 0 18px; }
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecalho-pagina .sub { margin: 0; }

.cartao { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao + .cartao { margin-top: 16px; }
.cartao .cab { padding: 14px 18px; border-bottom: 1px solid var(--cinza-100); font-weight: 600; color: var(--azul-900); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cartao .miolo { padding: 16px 18px; }

/* ---------- botões, selos, campos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 15px; border-radius: 9px; padding: 11px 18px; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn-primario { background: var(--azul-600); color: #fff; }
.btn-primario:hover { background: var(--azul-700); }
.btn-sec { background: #fff; color: var(--azul-800); border-color: var(--cinza-300); }
.btn-sec:hover { border-color: var(--azul-600); }
.btn-perigo { background: #fff; color: var(--st-vencida); border-color: #E8B4B4; }
.btn-peq { padding: 6px 12px; font-size: 13px; border-radius: 7px; }
.btn-bloco { width: 100%; padding: 16px; font-size: 17px; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.prazo { color: var(--st-prazo); background: var(--st-prazo-bg); }
.chip.vencida { color: var(--st-vencida); background: var(--st-vencida-bg); }
.chip.paga { color: var(--st-paga); background: var(--st-paga-bg); }
.chip.cancelada { color: var(--st-cancelada); background: var(--st-cancelada-bg); }
.chip.alerta { color: var(--st-alerta); background: var(--st-alerta-bg); }

.rot { display: block; font-size: 12px; font-weight: 600; color: var(--cinza-700); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; }
.campo { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--cinza-300); border-radius: 9px; background: #fff; color: var(--texto); }
textarea.campo { min-height: 90px; resize: vertical; }
.campo:focus { outline: 2px solid var(--azul-600); outline-offset: 1px; }
.campo.invalido { border-color: var(--st-vencida); }
.erro-campo { color: var(--st-vencida); font-size: 13px; margin-top: 4px; }
.ajuda { color: var(--cinza-500); font-size: 13px; margin-top: 4px; }
.grupo { margin-bottom: 16px; }
.linha { display: flex; gap: 12px; flex-wrap: wrap; }
.linha > .grupo { flex: 1; min-width: 160px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- avisos ---------- */
.aviso { border-radius: 9px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; border: 1px solid; }
.aviso.ok { background: var(--st-paga-bg); color: #145A30; border-color: #B7E1C6; }
.aviso.erro { background: var(--st-vencida-bg); color: #8E1C1C; border-color: #F0C2C2; }
.aviso.info { background: var(--azul-100); color: var(--azul-800); border-color: #C3D5EC; }

/* ---------- tabelas e filtros ---------- */
.filtros { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--cinza-100); flex-wrap: wrap; }
.filtros .campo { width: auto; padding: 7px 10px; font-size: 13px; }
.filtros .campo.busca { flex: 1; min-width: 200px; }
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-500); font-weight: 600; padding: 10px 14px; background: var(--cinza-50); white-space: nowrap; }
td { padding: 11px 14px; border-top: 1px solid var(--cinza-100); vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.inativo td { color: var(--cinza-500); }
.forte { font-weight: 700; color: var(--azul-900); }
.forte .fraco, .forte .mono { font-weight: 400; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.fraco { color: var(--cinza-500); font-size: 13px; }
.vazio { padding: 28px; text-align: center; color: var(--cinza-500); }
.paginacao { display: flex; gap: 6px; padding: 12px 14px; justify-content: flex-end; align-items: center; border-top: 1px solid var(--cinza-100); font-size: 13px; }
details.json summary { cursor: pointer; color: var(--azul-600); font-size: 13px; }
details.json pre { background: var(--cinza-50); border: 1px solid var(--cinza-200); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-width: 520px; }

/* ---------- indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 16px 18px; border-left: 4px solid var(--azul-600); text-decoration: none; color: inherit; display: block; }
.kpi small { display: block; color: var(--cinza-500); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kpi b { font-size: 26px; color: var(--azul-900); }
.kpi.vencida { border-left-color: var(--st-vencida); }
.kpi.alerta { border-left-color: var(--st-alerta); }

/* ---------- terminal (tablet e computador) ---------- */
.ola { padding: 24px 24px 8px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 8px 24px 20px; }
.tablet .grade { grid-template-columns: 1fr 1fr; }
.bloco { background: #fff; border: 1px solid var(--cinza-200); border-radius: 14px; padding: 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px; min-height: 150px; text-decoration: none; color: inherit; position: relative; }
.bloco.indisponivel { opacity: .72; cursor: default; }
.bloco .ic { width: 52px; height: 52px; border-radius: 12px; background: var(--azul-100); color: var(--azul-700); display: grid; place-items: center; }
.bloco .ic svg { width: 28px; height: 28px; }
.bloco b { font-size: 19px; color: var(--azul-900); }
.bloco span.desc { font-size: 13px; color: var(--cinza-500); margin-top: -6px; }
.bloco .fase { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 600; color: var(--cinza-500); background: var(--cinza-100); border-radius: 999px; padding: 3px 9px; }
.info-sessao { margin: 0 24px 24px; }
.pagina-terminal { padding: 20px 24px 40px; max-width: 1180px; }
.voltar-link { display: inline-block; font-size: 13px; color: var(--azul-600); text-decoration: none; margin-bottom: 8px; }
.ficha-topo { margin-bottom: 16px; }
.ficha-topo .miolo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.docs .cartao + .cartao { margin-top: 0; }
.tablet .docs { grid-template-columns: 1fr; }
.tablet .pagina-terminal { padding: 18px 18px 40px; }
td.forte { white-space: nowrap; }
.cab .chip { margin-left: auto; }
.borda-topo { border-top: 1px solid var(--cinza-100); }
.marcar { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--cinza-700); cursor: pointer; }
.marcar.caixa { border: 1px solid var(--cinza-300); border-radius: 8px; padding: 8px 12px; background: #fff; font-weight: 600; }
.marcar input { width: 16px; height: 16px; }
dl.dados { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.dados dt { color: var(--cinza-500); font-size: 13px; }
dl.dados dd { margin: 0; }
.campo.leitura { background: var(--cinza-50); color: var(--cinza-700); }
.veiculo-linha { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 16px 18px; border-top: 1px solid var(--cinza-100); align-items: start; }
.veiculo-linha:first-of-type { border-top: 0; }
.veiculo-linha .placa { background: #fff; border: 2px solid var(--azul-800); border-radius: 6px; padding: 8px 12px; font-weight: 700; letter-spacing: .14em; color: var(--azul-900); font-size: 18px; margin-top: 22px; }
.veiculo-linha .grupo { margin-bottom: 10px; }
details.excluir { grid-column: 2; font-size: 13px; }
details.excluir summary { cursor: pointer; color: var(--st-vencida); }
details.excluir form { margin-top: 8px; }
details.excluir .campo { flex: 1; min-width: 220px; padding: 7px 10px; font-size: 13px; }

/* ---------- multa ---------- */
.form-multa .cartao { margin-bottom: 14px; }
.form-multa .cartao + .cartao { margin-top: 0; }
.campo-placa { width: 140px; font-size: 22px; font-weight: 700; letter-spacing: .18em; text-align: center; }
.seg { display: inline-flex; border: 1px solid var(--cinza-300); border-radius: 9px; overflow: hidden; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 11px 16px; font-weight: 600; color: var(--cinza-700); background: #fff; }
.seg input:checked + span { background: var(--azul-100); color: var(--azul-800); }
.seg input:focus-visible + span { outline: 2px solid var(--azul-600); outline-offset: -2px; }
.veiculo-achado { display: flex; gap: 14px; align-items: flex-start; background: var(--azul-100); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.veiculo-achado:empty { display: none; }
.placa, .placa-mini { background: #fff; border: 2px solid var(--azul-800); border-radius: 6px; font-weight: 700; letter-spacing: .12em; color: var(--azul-900); }
.veiculo-achado .placa { padding: 6px 10px; font-size: 18px; }
.placa-mini { padding: 1px 6px; font-size: 13px; border-width: 1.5px; }
.escolhido { padding: 10px 12px; background: var(--cinza-50); border: 1px dashed var(--cinza-300); border-radius: 9px; margin-bottom: 8px; min-height: 42px; }
.lista-sugestoes { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sugestao { text-align: left; font: inherit; padding: 10px 12px; border: 1px solid var(--cinza-200); border-radius: 8px; background: #fff; cursor: pointer; }
.sugestao:hover { border-color: var(--azul-600); }
.artigos-selecao { padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 8px; }
.artigo-sel { display: flex; gap: 8px; align-items: center; }
.artigo-sel select { flex: 1; min-width: 0; padding: 12px; font-size: 15px; }
.botao-redondo { width: 46px; height: 46px; padding: 0; font-size: 22px; line-height: 1; flex: none; }
.botao-redondo[hidden] { display: none; }
.artigos-lista { max-height: 360px; overflow-y: auto; padding: 8px 12px; }
.artigo-linha { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cinza-200); border-radius: 9px; margin-bottom: 6px; cursor: pointer; background: #fff; }
.artigo-linha.escolhido { border-color: var(--azul-600); background: var(--azul-100); }
.artigo-linha b { width: 76px; color: var(--azul-900); flex: none; }
.artigo-linha .t { flex: 1; font-size: 14px; }
.artigo-linha .val { font-weight: 600; white-space: nowrap; }
.artigo-linha .qtd { width: 64px; padding: 6px 8px; text-align: center; }
.total { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--azul-900); color: #fff; font-weight: 600; font-size: 16px; }
.cartao > .total:last-child { border-radius: 0 0 var(--raio) var(--raio); }
.anexos { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.thumb { width: 110px; height: 82px; border-radius: 8px; border: 1px solid var(--cinza-200); overflow: hidden; background: var(--cinza-100); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--cinza-700); text-align: center; padding: 4px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.colar { flex: 1; min-width: 200px; min-height: 82px; border: 2px dashed var(--cinza-300); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cinza-500); font-size: 13px; text-align: center; padding: 10px; background: #fff; }
.colar:focus { outline: 2px solid var(--azul-600); }
.colar b { color: var(--azul-700); }
.link-arquivo { color: var(--azul-600); text-decoration: underline; cursor: pointer; }
.assin { font-size: 13px; color: var(--cinza-500); margin: 4px 0 14px; }
.assin b { color: var(--azul-900); }
.prova { display: flex; flex-direction: column; gap: 4px; max-width: 260px; font-size: 12px; word-break: break-all; }
.prova img { max-width: 260px; max-height: 180px; border-radius: 8px; border: 1px solid var(--cinza-200); display: block; }
.linha-do-tempo { list-style: none; margin: 0; }
.linha-do-tempo li { padding: 8px 0 8px 14px; border-left: 3px solid var(--cinza-200); margin-left: 4px; font-size: 14px; }
.riscado { text-decoration: line-through; color: var(--cinza-500); }
.aba { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 7px; color: var(--cinza-700); text-decoration: none; }
.aba.on { background: var(--azul-100); color: var(--azul-800); }
/* ---------- BO e fichamento ---------- */
textarea.relato { min-height: 160px; }
.texto-longo { white-space: normal; line-height: 1.55; }
.envolvidos { padding: 14px 18px 4px; display: flex; flex-direction: column; gap: 10px; }
.envolvido { display: grid; grid-template-columns: 150px 1fr 150px 1fr 46px; gap: 8px; align-items: start; padding-bottom: 10px; border-bottom: 1px dashed var(--cinza-200); }
.envolvido:last-child { border-bottom: 0; }
.envolvido .pessoa { position: relative; }
.envolvido .selo-rg { position: absolute; right: 10px; top: 12px; font-size: 12px; color: var(--st-paga); font-weight: 600; pointer-events: none; }
.envolvido .lista-sugestoes { position: absolute; left: 0; right: 0; z-index: 3; }
.envolvido .remover-pessoa[hidden] { display: none; }
@media (max-width: 900px) {
  .envolvido { grid-template-columns: 1fr 1fr 46px; }
  .envolvido .pessoa { grid-column: 2 / 4; grid-row: 1; }
  .envolvido .papel { grid-row: 1; }
  .envolvido .profissao { grid-column: 1; }
  .envolvido .obs { grid-column: 2; }
}
.tablet .envolvido { grid-template-columns: 1fr 1fr 46px; }
.tablet .envolvido .pessoa { grid-column: 2 / 4; grid-row: 1; }
.tablet .envolvido .profissao { grid-column: 1; }
.tablet .envolvido .obs { grid-column: 2; }

/* ---------- processo (MP) ---------- */
.tribunal { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza-500); font-weight: 700; margin-bottom: 4px; }
.forte-maiusculo { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: 12px; }
.divisor { border: 0; border-top: 1px solid var(--cinza-100); margin: 14px 0; }
.proc-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.proc-cab small { display: block; color: var(--cinza-500); font-size: 12px; }
.proc-cab b { font-size: 15px; font-weight: 600; }
.processo-topo { margin-bottom: 16px; }
.etapas { padding: 4px 18px; }
.etapa { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--cinza-100); }
.etapa:first-child { border-top: 0; }
.etapa .bola { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; background: var(--cinza-100); color: var(--cinza-500); }
.etapa.concluida .bola { background: var(--st-paga-bg); color: var(--st-paga); }
.etapa.atual .bola { background: var(--azul-600); color: #fff; }
.etapa.pulada .bola { background: var(--cinza-50); color: var(--cinza-300); }
.etapa.pulada b { color: var(--cinza-500); }
.etapa .tx { flex: 1; min-width: 0; }
.etapa .tx b { color: var(--azul-900); }
.etapa .tx small { display: block; color: var(--cinza-500); font-size: 12px; margin-top: 2px; }
.etapa .texto { margin: 10px 0 8px; background: var(--cinza-50); border: 1px solid var(--cinza-200); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--cinza-700); }
.etapa .form-etapa { margin-top: 10px; }
.etapa .form-etapa textarea { min-height: 90px; margin-bottom: 8px; }
.etapa .sentenca { background: var(--azul-100); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }

/* ---------- prefeitura ---------- */
.kpi.prazo-kpi { border-left-color: var(--st-prazo); }
.kpi.paga-kpi { border-left-color: var(--st-paga); }
.kpi span.fraco { margin-left: 6px; }
.tabela-cobrancas tr td:first-child { border-left: 4px solid transparent; }
.tabela-cobrancas tr.faixa-prazo td:first-child { border-left-color: var(--st-prazo); }
.tabela-cobrancas tr.faixa-vencida td:first-child { border-left-color: var(--st-vencida); }
.tabela-cobrancas tr.faixa-paga td:first-child { border-left-color: var(--st-paga); }
.tabela-cobrancas tr.faixa-cancelada td { color: var(--st-cancelada); }
.tabela-cobrancas tr.faixa-cancelada td:first-child { border-left-color: var(--st-cancelada); text-decoration: line-through; }
.ficha-topo[class*="faixa-cartao-"] { border-left-width: 5px; }
.faixa-cartao-prazo { border-left-color: var(--st-prazo); }
.faixa-cartao-vencida { border-left-color: var(--st-vencida); }
.faixa-cartao-paga { border-left-color: var(--st-paga); }
.faixa-cartao-cancelada { border-left-color: var(--st-cancelada); }
.valor-grande { font-size: 24px; font-weight: 700; color: var(--azul-900); margin-bottom: 4px; }
.previa-notice { background: #2b2f36; color: #e8e8e8; font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 12px 14px; border-radius: 8px; }
.previa-notice b { color: #fff; }

.ultimos { margin: 0 24px 24px; }
.ultimos .item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--cinza-100); text-decoration: none; color: inherit; }
.ultimos .item .num { font-weight: 700; color: var(--azul-900); width: 120px; }
.ultimos .item .desc { flex: 1; color: var(--cinza-700); font-size: 14px; }

/* ---------- páginas simples (login, avisos, simulador) ---------- */
.pagina-simples { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; background: var(--azul-900); }
.pagina-simples.clara { background: var(--cinza-50); justify-content: flex-start; }
.caixa-simples { width: 100%; max-width: 420px; }
.caixa-simples.larga { max-width: 1180px; }
.logo-simples { display: block; margin: 0 auto 18px; width: 96px; height: 96px; border-radius: 20px; }
.rodape-simples { color: #9FB6D6; font-size: 12px; text-align: center; margin-top: 16px; }
.pagina-simples.clara .rodape-simples { color: var(--cinza-500); }
pre.detalhe { background: #111; color: #eee; padding: 12px; border-radius: 8px; overflow: auto; font-size: 12px; max-height: 320px; }

@media (max-width: 820px) {
  .corpo { flex-direction: column; }
  .lateral { width: auto; display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
  .lateral .sep { display: none; }
  .lateral a { white-space: nowrap; margin: 0; }
  .conteudo { padding: 18px 16px 40px; }
  .topo { padding: 0 16px; gap: 10px; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .relogio { display: none; }
}