/* Casca do app: paleta do painel atual (#1d3557 e #b08d57), modo escuro obrigatório, menu lateral (docs/12, seção 10).
   PC: menu fixo à esquerda, recolhível. Celular (até 760px): menu que abre pelo ☰, por cima do conteúdo. */
:root {
  --bg: #f5f6f8; --panel: #ffffff; --fg: #14213d; --muted: #5a6478; --line: #dde1e8;
  --accent: #1d3557; --accent-soft: #e8edf5; --gold: #b08d57; --ok: #2e6b3a; --bad: #b3261e; --warn: #9a6700;
  --lateral-bg: #1d3557; --lateral-fg: #e6eaf2; --lateral-muted: #a9b6cf; --lateral-hover: rgba(255, 255, 255, .08); --lateral-ativo: rgba(255, 255, 255, .14);
  --marca-c: #1d3557;
  --f-brand: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
  --f-display: "IBM Plex Serif", Georgia, serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 6px; --lateral-w: 240px; --lateral-w-rec: 68px;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0e1524; --panel: #16203a; --fg: #e6eaf2; --muted: #9aa6bd; --line: #26324f;
  --accent: #8fb3e0; --accent-soft: #1d2a48; --gold: #d4b483; --ok: #8fcf9b; --bad: #f2948d; --warn: #e5b85c;
  --lateral-bg: #111a2e; --marca-c: #ffffff; color-scheme: dark } }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.45; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 8px; top: -40px; z-index: 50; background: var(--panel); color: var(--fg); padding: 6px 10px; border-radius: var(--r); }
.pular:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Marca (componente cm-marca, marca.js) */
cm-marca { display: inline-flex; align-items: center; color: var(--marca-c); font-family: var(--f-brand); font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.cm-marca-simbolo { height: .72em; width: auto; display: block; flex: none; }
.cm-marca-texto { margin-left: .14em; }
.lateral cm-marca { --marca-c: #ffffff; }  /* sobre o azul-marinho, o C fica branco; o traço continua dourado */

/* Estrutura */
.app { min-height: 100%; }
.lateral { position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--lateral-w); display: flex; flex-direction: column;
  background: var(--lateral-bg); color: var(--lateral-fg); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: width .18s ease, transform .2s ease; overflow-x: hidden; }
.principal { margin-left: var(--lateral-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .18s ease; }
.lateral-topo { display: flex; align-items: center; gap: 8px; padding: 18px 12px 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lateral-marca { text-decoration: none; display: inline-flex; flex: 1; min-width: 0; }
.btn-recolher { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); border: 0; background: transparent; color: var(--lateral-muted); cursor: pointer; }
.btn-recolher:hover { background: var(--lateral-hover); color: var(--lateral-fg); }
.btn-recolher svg { width: 18px; height: 18px; transition: transform .18s ease; }

#menu { flex: 1; overflow-y: auto; padding: 10px 8px; }
.menu-grupo { margin: 0; padding: 0; list-style: none; }
.menu-grupo + .menu-grupo { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.menu-titulo { margin: 0 0 4px; padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lateral-muted); }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r); color: var(--lateral-fg); text-decoration: none; font-weight: 500; white-space: nowrap; border-left: 3px solid transparent; }
.menu-item:hover { background: var(--lateral-hover); }
.menu-item[aria-current="page"] { background: var(--lateral-ativo); border-left-color: var(--gold); }
.menu-icone { width: 20px; height: 20px; flex: none; }
.lateral-perfil { margin: 0; padding: 12px 18px 16px; font-size: 12px; color: var(--lateral-muted); border-top: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; }

/* PC: menu recolhido (só ícones e o símbolo da marca) */
.app[data-recolhido="1"] .lateral { width: var(--lateral-w-rec); }
.app[data-recolhido="1"] .principal { margin-left: var(--lateral-w-rec); }
.app[data-recolhido="1"] .lateral-topo { flex-direction: column; padding: 16px 8px 10px; }
.app[data-recolhido="1"] .lateral-marca { justify-content: center; }
.app[data-recolhido="1"] .cm-marca-texto, .app[data-recolhido="1"] .menu-rotulo, .app[data-recolhido="1"] .menu-titulo, .app[data-recolhido="1"] .lateral-perfil { display: none; }
.app[data-recolhido="1"] .menu-item { justify-content: center; padding-inline: 0; }
.app[data-recolhido="1"] .btn-recolher svg { transform: rotate(180deg); }

/* Barra do topo: só no celular */
.topo { display: none; }
.fundo-menu { position: fixed; inset: 0; z-index: 15; background: rgba(8, 14, 28, .45); }

@media (max-width: 760px) {
  .lateral { width: min(84vw, 300px); transform: translateX(-100%); box-shadow: none; }
  .app[data-aberto="1"] .lateral { transform: none; box-shadow: 0 0 24px rgba(0, 0, 0, .35); }
  .principal, .app[data-recolhido="1"] .principal { margin-left: 0; }
  .btn-recolher { display: none; }
  .app[data-recolhido="1"] .lateral { width: min(84vw, 300px); }
  .app[data-recolhido="1"] .cm-marca-texto, .app[data-recolhido="1"] .menu-rotulo, .app[data-recolhido="1"] .menu-titulo, .app[data-recolhido="1"] .lateral-perfil { display: revert; }
  .app[data-recolhido="1"] .menu-item { justify-content: flex-start; padding-inline: 10px; }
  .app[data-recolhido="1"] .lateral-topo { flex-direction: row; padding: 18px 12px 14px 18px; }
  .topo { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 1px solid var(--line);
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); }
  .btn-menu { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--line); background: transparent; color: var(--fg); font-size: 20px; cursor: pointer; }
  .topo-marca { text-decoration: none; display: inline-flex; }
  .topo cm-marca { font-size: 20px; }
}
@media (min-width: 761px) { .fundo-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .lateral, .principal, .btn-recolher svg { transition: none; } }

/* Conteúdo */
main { flex: 1; width: 100%; max-width: 1040px; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); outline: none; }
h1 { font-family: var(--f-display); font-weight: 500; font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 4px; }
.msg { color: var(--muted); margin: 4px 0; }
.cartao { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-top: 12px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.selo-construcao { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--warn); border: 1px solid currentColor; }
.rodape { padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: 12px; }
#estado[data-pronto="ok"] { color: var(--ok); }
#estado[data-pronto="falha"] { color: var(--bad); }

/* Login do Escritório (etapa 1.2): sem menu, um cartão no centro */
.app[data-tela="login"] .lateral, .app[data-tela="login"] .topo, .app[data-tela="login"] .fundo-menu { display: none !important; }
.app[data-tela="login"] .principal { margin-left: 0; }
.app[data-tela="login"] main { display: grid; place-items: start center; max-width: none; padding-top: max(48px, 8vh); }
.entrada { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; }
.entrada-larga { max-width: 460px; }
.entrada-marca { font-size: 26px; margin-bottom: 18px; }
.entrada form { display: grid; gap: 6px; margin-top: 14px; }
.entrada label { font-size: 13px; font-weight: 500; margin-top: 8px; }
.entrada input { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; width: 100%; }
.entrada input#l-codigo { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 20px; letter-spacing: .3em; }
.entrada button { margin-top: 8px; }
button { font: inherit; font-weight: 500; border-radius: var(--r); padding: 9px 14px; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { button { color: #0e1524; } }
button.sec { background: transparent; color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
.erro { color: var(--bad); min-height: 1.2em; margin: 6px 0 0; font-size: 14px; }
.aviso { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--warn); color: var(--warn); }
.qr { display: grid; place-items: center; margin: 12px 0; }
.qr svg { width: 200px; height: 200px; background: #fff; border-radius: var(--r); }
code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; }
.codigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; margin: 14px 0; padding-left: 22px; }

/* Rodapé do menu: usuário do Escritório e Sair */
.lateral-perfil { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.perfil-nome { overflow: hidden; text-overflow: ellipsis; }
.btn-sair { padding: 4px 10px; font-size: 12px; background: transparent; color: var(--lateral-fg); border-color: rgba(255, 255, 255, .25); }
.btn-sair:hover { background: var(--lateral-hover); }

/* Acesso do Prefeito e tela Acessos (etapa 1.3) */
.entrada-alternativa { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font-weight: 500; }
#l-liberacao { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }
.form-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0 4px; }
.form-linha label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; flex: 1 1 200px; }
.form-linha select { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.form-linha input { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.codigo-liberacao { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--gold); border-radius: var(--r); background: var(--accent-soft); }
.codigo-liberacao p { margin: 4px 0; }
.confirmar-liberacao { margin: 12px 0; padding: 14px 16px; border: 2px solid var(--gold); border-radius: var(--r); background: var(--accent-soft); }
.confirmar-liberacao p { margin: 6px 0; }
.municipio-grande { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--fg); }
.codigo-grande { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 26px; font-weight: 600; letter-spacing: .14em; color: var(--fg); }
.tabela-rolagem { overflow-x: auto; margin-top: 12px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.situacao { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.situacao-pronto { color: var(--ok); }
.situacao-revogado, .situacao-codigo_vencido, .situacao-expirado { color: var(--bad); }
.situacao-aguardando_codigo, .situacao-cadastrar_passkey { color: var(--warn); }
button.perigo { color: var(--bad); border-color: var(--bad); padding: 4px 10px; font-size: 13px; }

/* Área do Prefeito com dados (etapa 1.5) */
.marca-municipio { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--lateral-muted); }
.lateral-marca { flex-direction: column; align-items: flex-start; }
.topo-marca { flex-direction: column; align-items: flex-start; }
.topo .marca-municipio { color: var(--muted); margin-top: 3px; font-size: 12px; }
.app[data-recolhido="1"] .marca-municipio { display: none; }
.blocos-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
a.bloco { display: block; color: inherit; text-decoration: none; margin-top: 0; }
a.bloco:hover { border-color: var(--accent); }
.numero { font-size: 26px; font-weight: 600; margin: 6px 0; }
.rotulo-obrigatorio { font-size: 13px; color: var(--warn); border-left: 3px solid var(--gold); padding-left: 8px; margin: 8px 0; }
.semaforo { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; margin: 6px 0; }
.semaforo .luz { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.semaforo-verde .luz { background: var(--ok); } .semaforo-amarelo .luz { background: var(--warn); }
.semaforo-vermelho .luz { background: var(--bad); } .semaforo-cinza .luz { background: var(--muted); }
.lista-blocos { padding-left: 18px; } .lista-blocos li { margin: 4px 0; }
.lista-risco, .lista-programas { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.lista-risco li, .lista-programas li { margin-top: 0; }
.situacao-nivel-alto { color: var(--bad); } .situacao-nivel-medio { color: var(--warn); } .situacao-nivel-info { color: var(--muted); }
.acompanhando { color: var(--ok); font-weight: 500; font-size: 14px; }
.filtro { display: inline-grid; gap: 4px; font-size: 13px; font-weight: 500; margin-top: 8px; }
.filtro select { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px; }
.form-pedido { display: grid; gap: 6px; margin-top: 10px; }
.form-pedido label { display: grid; gap: 4px; font-size: 13px; }
.form-pedido textarea { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
tr.proprio td { font-weight: 600; background: var(--accent-soft); }
.numero-programa { font-size: 18px; font-weight: 600; margin: 4px 0; }

/* Área do Escritório (etapa 1.6) */
.painel-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
#painel-moldura { width: 100%; height: calc(100vh - 150px); min-height: 520px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-top: 8px; }
.app[data-perfil="escritorio"] main { max-width: none; }
.seletor-municipio { margin-top: 8px; max-width: 200px; font: inherit; font-size: 13px; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 6px; }
.entrada-alternativa.sem-linha { border-top: 0; margin-top: 6px; padding-top: 0; }
button.link.discreto { color: var(--muted); font-weight: 400; font-size: 13px; }
.tabela select { font: inherit; font-size: 13px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 3px 6px; }
button.mini-acao { padding: 3px 8px; font-size: 12px; margin: 2px 0; }