/* Site da administração do 3º BPM/M.
   Tons da PMESP: preto e cinza grafite (sem azul); dourado só nos detalhes.
   Para mudar as cores do site inteiro, ajuste só as variáveis abaixo. */

/* Fontes guardadas no próprio site (static/fontes): não dependem do Google, que
   pode estar bloqueado em redes corporativas. Licença livre (SIL Open Font License). */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fontes/archivo.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fontes/ibm-plex-sans.woff2") format("woff2");
}
:root {
  --fundo: #0a0a0a;
  --superficie: #131313;
  --superficie-2: #1b1b1b;
  --borda: #262626;
  --borda-forte: #383838;
  --texto: #ececea;
  --texto-2: #9a9a96;
  --timbre: #c9a646;
  --timbre-claro: #dcc06e;
  --timbre-fundo: rgba(201, 166, 70, .09);
  --ok: #4fae80;
  --ok-fundo: #10201a;
  --pendente: #d9614f;
  --pendente-fundo: #2a1514;
  --foco: #f2e6b8;
  --topo: rgba(10, 10, 10, .97);
  /* Gráficos: dourado para o destaque, cinzas para o resto */
  --grafico-1: #c9a646;
  --grafico-2: #7a7a78;
  --grafico-neutro: #4a4a48;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--texto);
  font: 400 16px/1.5 "IBM Plex Sans", system-ui, sans-serif;
  /* Textura discreta: uma grade de pontos quase invisível sobre o fundo */
  background-color: var(--fundo);
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px);
  background-size: 22px 22px;
  background-attachment: fixed;
}
h1, h2, h3, h4 { font-family: "Archivo", "IBM Plex Sans", sans-serif; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .75rem; padding-left: .7rem; border-left: 3px solid var(--timbre); }
h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
h4 { font-size: .95rem; margin: 0 0 .5rem; }
a { color: var(--timbre-claro); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--foco); outline-offset: 2px;
}
.tab-num { font-variant-numeric: tabular-nums; }
.suave { color: var(--texto-2); }
.vazio { color: var(--texto-2); margin: .25rem 0; }
.texto-livre { white-space: pre-line; margin: .35rem 0; }
.espaco-acima { margin-top: 1.5rem; }
.espaco-pequeno { margin-top: .6rem; }
.sem-espaco { margin-top: 0; }

/* ---------- Topo e menus ---------- */
.topo { background: var(--topo); border-bottom: 1px solid var(--borda); box-shadow: inset 0 -1px 0 rgba(201, 166, 70, .35); }
.topo-in { max-width: 1240px; margin: 0 auto; padding: .6rem 1.25rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: .75rem; color: var(--texto); text-decoration: none; margin-right: auto; }
.marca img { height: 46px; width: auto; }
.marca span { font: 700 1.15rem "Archivo", sans-serif; display: flex; flex-direction: column; line-height: 1.15; }
.marca small { font: 400 .8rem "IBM Plex Sans", sans-serif; color: var(--texto-2); }
.menu { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.menu a { color: var(--texto-2); text-decoration: none; font-weight: 500; padding: .35rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--texto); }
.menu a[aria-current="page"] { color: var(--texto); border-color: var(--timbre); }
.quem { display: flex; gap: .75rem; align-items: center; color: var(--texto); font-size: .9rem; flex-wrap: wrap; }
.quem form { margin: 0; }
.perfil { color: var(--texto-2); }
.tenente { color: var(--timbre-claro); margin-left: .35rem; }
.submenu { background: var(--superficie); border-top: 1px solid var(--borda); }
.submenu .topo-in { padding-top: .45rem; padding-bottom: .45rem; gap: 1.2rem; }
.submenu a { color: var(--texto-2); text-decoration: none; font-size: .92rem; }
.submenu a:hover { color: var(--timbre-claro); }
.separador { width: 1px; align-self: stretch; background: var(--borda-forte); }

.pagina { max-width: 1240px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }

/* ---------- Mensagens ---------- */
.msg { padding: .7rem 1rem; border-left: 3px solid var(--borda-forte); background: var(--superficie); margin-bottom: .5rem; }
.msg.ok { border-color: var(--ok); }
.msg.erro { border-color: var(--pendente); }
.msg.aviso { border-color: var(--timbre); }

/* ---------- Botões e campos ---------- */
button, .botao {
  font: 600 .95rem "IBM Plex Sans", sans-serif; cursor: pointer; text-decoration: none; display: inline-block;
  padding: .55rem 1.1rem; border-radius: 4px;
  border: 1px solid var(--timbre); background: var(--timbre-fundo); color: var(--timbre-claro);
}
button:hover, .botao:hover { background: rgba(201, 166, 70, .18); }
button.sec, .botao.sec { background: transparent; color: var(--texto); border-color: var(--borda-forte); }
button.sec:hover, .botao.sec:hover { border-color: var(--texto-2); background: transparent; }
button.perigo { background: transparent; color: var(--pendente); border-color: var(--pendente); }
button.pequeno, .botao.pequeno { padding: .3rem .75rem; font-size: .85rem; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda-forte);
  border-radius: 4px; padding: .5rem .6rem; max-width: 100%;
}
input:disabled { color: var(--texto-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--timbre); }
input[type="file"] { padding: .4rem; }
textarea { width: 100%; max-width: 720px; resize: vertical; }
.largo { width: 100%; max-width: 520px; }
.estreito { width: 5.5rem; }
label { display: block; font-weight: 500; margin-bottom: .25rem; }
label.opcao { display: flex; gap: .45rem; align-items: center; font-weight: 400; margin: 0; }
.campo { margin-bottom: 1rem; }
.linha-form { display: flex; gap: .75rem 1rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.linha-form > div { display: flex; flex-direction: column; }
.acoes { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }
.caixa { background: var(--superficie); border: 1px solid var(--borda); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.caixa h3 { margin-top: 0; }
.caixa summary { cursor: pointer; font-weight: 500; }
.passos { margin: 0 0 1rem; padding-left: 1.25rem; }
.perfis { margin: 0 0 1rem; padding-left: 1.25rem; }

/* ---------- Navegação de data e turno ---------- */
.datas { display: flex; gap: .5rem; align-items: center; margin: .75rem 0 1.5rem; flex-wrap: wrap; }
.datas .botao { padding: .3rem .9rem; font-size: 1.25rem; line-height: 1.2; }
.nav-turno .botao { font-size: .9rem; padding: .45rem .8rem; }
.datas input { padding: .4rem .6rem; }
.alternador { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 4px; overflow: hidden; }
.alternador a { padding: .4rem .9rem; color: var(--texto-2); text-decoration: none; }
.alternador a[aria-current="page"] { background: var(--timbre-fundo); color: var(--timbre-claro); box-shadow: inset 0 -2px 0 var(--timbre); }

/* ---------- Selos de status ---------- */
.selo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .85rem; padding: .15rem .6rem; border-radius: 3px; border: 1px solid; white-space: nowrap; }
.selo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.selo.enviado { color: var(--ok); background: var(--ok-fundo); border-color: var(--ok); }
.selo.pendente { color: var(--pendente); background: var(--pendente-fundo); border-color: var(--pendente); }
.selo.neutro { color: var(--texto-2); border-color: var(--borda-forte); }
.selo.destaque { color: var(--timbre-claro); background: var(--timbre-fundo); border-color: var(--timbre); }

/* ---------- Quadro de situação (cartões pequenos) ---------- */
.quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin-top: 1rem; }
.situacao { background: var(--superficie); border: 1px solid var(--borda); border-left-width: 4px; padding: .9rem 1rem; }
.situacao.enviado { border-left-color: var(--ok); }
.situacao.pendente { border-left-color: var(--pendente); }
.situacao.aguardando { border-left-color: var(--timbre); }
.situacao h3 { margin: 0 0 .5rem; }
.situacao small { display: block; margin-top: .5rem; color: var(--texto-2); }
.link-cartao { color: var(--texto); text-decoration: none; border-left-color: var(--timbre); }
.link-cartao:hover { background: var(--superficie-2); }
.numero { font: 700 2rem "Archivo", sans-serif; margin: 0; }

/* ---------- Indicadores do painel do mês ---------- */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.indicador { background: var(--superficie); border: 1px solid var(--borda); padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.ind-rotulo { color: var(--texto-2); font-size: .85rem; }
.ind-valor { font: 700 1.6rem "Archivo", sans-serif; line-height: 1.2; }
.ind-valor small { font: 400 .85rem "IBM Plex Sans", sans-serif; color: var(--texto-2); }

/* ---------- Gráficos de barras (HTML montado em graficos.barras) ---------- */
.barras { display: flex; flex-direction: column; gap: .55rem; }
.barra-linha { display: grid; grid-template-columns: minmax(110px, 190px) 1fr 4.5rem; gap: .75rem; align-items: center; }
.barra-rotulo { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-trilho { position: relative; height: 14px; background: rgba(255, 255, 255, .03); border-radius: 2px; }
.barra { display: block; height: 100%; background: var(--grafico-neutro); border-radius: 2px; min-width: 1px; }
.barra-linha.destaque .barra { background: var(--grafico-1); }
.barra-linha.destaque .barra-rotulo { color: var(--timbre-claro); font-weight: 600; }
.barra-ref { position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed var(--timbre-claro); }
.barra-valor { font-size: .85rem; color: var(--texto-2); text-align: right; }
.barras-ref-legenda { margin: 0 0 .25rem; font-size: .8rem; color: var(--texto-2); text-align: right; }

/* ---------- Gráfico de colunas (SVG desenhado em graficos.colunas_turnos) ---------- */
.grafico { display: block; width: 100%; height: auto; overflow: visible; }
.rolagem-grafico { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g-eixo { fill: var(--texto-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.g-serie-1 { fill: var(--grafico-1); }
.g-serie-2 { fill: var(--grafico-2); }
.g-grade { stroke: var(--borda); stroke-width: 1; }
.g-ref { stroke: var(--timbre-claro); stroke-width: 1.2; stroke-dasharray: 4 3; }
.g-ref-txt { fill: var(--timbre-claro); }
.grade-graficos { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.grade-graficos .cartao { margin: 0; }
.legenda-grafico { font-size: .85rem; color: var(--texto-2); margin: 0 0 .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.amostra { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-left: .4rem; }
.amostra.serie-1 { background: var(--grafico-1); }
.amostra.serie-2 { background: var(--grafico-2); }
.amostra.ref { height: 0; border-top: 2px dashed var(--timbre-claro); }

/* ---------- Tabelas ---------- */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borda); background: var(--superficie); }
/* Em tabelas largas, a 1ª coluna (nome do campo) fica parada ao rolar para o lado */
.rolagem table:not(.simples) th:first-child,
.rolagem table:not(.simples) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); box-shadow: 1px 0 0 var(--borda); }
.rolagem table:not(.simples) thead th:first-child,
.rolagem table:not(.simples) tr.grupo td:first-child { background: var(--superficie-2); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .5rem .8rem; text-align: right; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { background: var(--superficie-2); font-weight: 600; color: var(--texto-2); font-size: .9rem; }
tr.grupo td { background: var(--superficie-2); color: var(--timbre-claro); font-family: "Archivo", sans-serif; font-weight: 700; text-align: left; }
td.total, th.total { font-weight: 700; background: var(--timbre-fundo); color: var(--texto); }
table.simples td, table.simples th { text-align: left; white-space: normal; }
table.simples form { margin: 0; }

/* ---------- Formulários de lançamento ---------- */
.form-resultado .linha { display: grid; grid-template-columns: 1fr 160px; gap: 1rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--borda); }
.form-resultado .linha label { margin: 0; }
.form-resultado .linha input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.form-resultado .un { color: var(--texto-2); font-size: .85rem; font-weight: 400; }
/* Campos lado a lado, como na planilha (6 por linha no computador) */
.grupo-campos { border: 1px solid var(--borda); background: var(--superficie); margin: 0 0 1rem; padding: .4rem 1rem 1rem; min-width: 0; }
.grupo-campos legend { font: 700 1rem "Archivo", sans-serif; color: var(--timbre-claro); padding: 0 .5rem; margin-left: -.5rem; }
.grade-campos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.celula-campo { display: flex; flex-direction: column; justify-content: space-between; gap: .35rem; min-width: 0; }
.celula-campo label, .celula-rotulo { margin: 0; font-size: .85rem; font-weight: 500; line-height: 1.25; color: var(--texto); }
.celula-campo input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.celula-campo input:placeholder-shown { border-color: var(--borda); }
.celula-campo input:not(:placeholder-shown) { border-color: var(--timbre); background: rgba(201, 166, 70, .05); }
.subgrupo { margin: .9rem 0 0; font-size: .8rem; font-weight: 600; color: var(--texto-2); text-transform: none; }
.grupo-campos.leitura .celula-campo { background: var(--fundo); border: 1px solid var(--borda); padding: .5rem .6rem; }
.celula-valor { font: 700 1.2rem "Archivo", sans-serif; text-align: right; }
.celula-campo.zero .celula-valor { color: var(--texto-2); font-weight: 500; }
.interruptor { margin: .5rem 0 0; padding: .55rem .7rem; border: 1px dashed var(--borda-forte); border-radius: 4px; width: fit-content; cursor: pointer; }
.bloco-campos[hidden] { display: none; }
.lista-unidades { display: flex; gap: .4rem 1rem; flex-wrap: wrap; }
.lista-unidades.compacta { gap: .2rem .75rem; font-size: .85rem; }
.rotulo-unidades { margin: 0 0 .35rem; font-weight: 500; }
.nao-se-aplica { color: var(--borda-forte); }
@media (max-width: 1000px) {
  .grade-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.total-turno { border-bottom: 0 !important; padding-top: .9rem !important; }
.total-turno strong { text-align: right; font: 700 1.5rem "Archivo", sans-serif; color: var(--timbre-claro); }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.meus-turnos table td { padding: .35rem .3rem; }
details.extras summary { cursor: pointer; font-weight: 500; }

/* ---------- Seções que abrem e fecham (macro "secao" em _macros.html) ----------
   Começam fechadas; o site lembra, em cada aparelho, quais a pessoa abriu. */
details.secao { background: var(--superficie); border: 1px solid var(--borda); margin: 0 0 .6rem; }
details.secao > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem; min-height: 48px;
}
details.secao > summary::-webkit-details-marker { display: none; }
details.secao > summary::after {
  content: ""; flex: none; width: .5rem; height: .5rem; margin-left: .25rem;
  border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
details.secao[open] > summary::after { transform: rotate(-135deg) translateX(-2px); }
details.secao > summary:hover { background: var(--superficie-2); }
details.secao > summary h2, details.secao > summary h3 { margin: 0; padding: 0; border: 0; font-size: 1rem; }
.resumo-secao { margin-left: auto; color: var(--texto-2); font-size: .85rem; text-align: right; }
.corpo-secao { padding: .25rem 1rem 1rem; border-top: 1px solid var(--borda); }
.corpo-secao > :first-child { margin-top: .75rem; }
.corpo-secao .rolagem { border-color: var(--borda); }
.secoes { margin-top: 1.25rem; }

/* ---------- Resumo do dia (informação obrigatória dos superiores) ---------- */
.resumo-dia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.bloco-resumo {
  background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--borda-forte);
  padding: .8rem 1rem; display: flex; flex-direction: column; gap: .15rem; color: var(--texto); text-decoration: none;
}
.bloco-resumo.ok { border-top-color: var(--ok); }
.bloco-resumo.falta { border-top-color: var(--pendente); }
.bloco-resumo.atencao { border-top-color: var(--timbre); }
a.bloco-resumo:hover { background: var(--superficie-2); }
.bloco-resumo .ind-valor { font-size: 1.5rem; }
.bloco-resumo small { color: var(--texto-2); font-size: .82rem; }
.faltam { color: var(--pendente); }
.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.destaques .indicador { padding: .7rem .9rem; }
.destaques .ind-valor { font-size: 1.35rem; }

/* ---------- Aviso de pendência no topo (SOI da companhia) ---------- */
.aviso-topo { background: var(--pendente-fundo); border-bottom: 1px solid var(--pendente); }
.aviso-topo .topo-in { padding-top: .5rem; padding-bottom: .5rem; gap: .4rem 1rem; font-size: .9rem; }
.aviso-topo strong { color: var(--pendente); }
.aviso-topo a { color: var(--texto); }

/* ---------- Linha de título com ação à direita ---------- */
.titulo-linha { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.titulo-linha h1 { margin: 0; }
.status-linha { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 1rem; font-size: .9rem; }
.dica { color: var(--texto-2); font-size: .85rem; margin: 0 0 .75rem; }

/* ---------- DEJEM (público, sem login) ---------- */
.dejem { max-width: 640px; margin: 0 auto; }
.quem.anonimo { align-self: flex-end; margin-top: .9rem; }
.botao-dejem { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; padding: .35rem .9rem;
  font: 700 .95rem "Archivo", sans-serif; letter-spacing: .06em; color: var(--timbre-claro); text-decoration: none;
  border: 1px solid var(--timbre); border-radius: 4px; background: var(--timbre-fundo); }
.botao-dejem small { font: 400 .68rem "IBM Plex Sans", sans-serif; letter-spacing: 0; color: var(--texto-2); }
.botao-dejem:hover, .botao-dejem[aria-current="page"] { background: rgba(201, 166, 70, .22); color: var(--texto); }
.barra-dejem { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: 0 0 1rem; }
.barra-dejem .datas { margin: 0; }
.abas-dejem { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 4px; overflow: hidden; }
.abas-dejem a { padding: .4rem .85rem; color: var(--texto-2); text-decoration: none; font-size: .9rem; font-weight: 500; }
.abas-dejem a + a { border-left: 1px solid var(--borda-forte); }
.abas-dejem a[aria-current="page"] { color: var(--texto); background: var(--timbre-fundo); box-shadow: inset 0 -2px 0 var(--timbre); }
.abas-dejem small { color: var(--texto-2); font-weight: 400; }
.baixar-periodo { flex-wrap: wrap; margin: 0 0 1rem; }
.envio-detalhado { margin-bottom: 1.25rem; }
.envio-detalhado h2 { font-size: 1.1rem; }
.cabeca-envio { border-bottom: 1px solid var(--borda); margin-bottom: .75rem; padding-bottom: .5rem; }
.cabeca-envio .acoes { flex-wrap: wrap; margin-top: .4rem; }
.etapas { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1.25rem; }
.etapas li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .78rem; color: var(--texto-2); text-align: center; }
.etapa-n { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--borda-forte); font-weight: 600; }
.etapas li.atual { color: var(--texto); }
.etapas li.atual .etapa-n { border-color: var(--timbre); color: var(--timbre-claro); background: var(--timbre-fundo); }
.etapas li.feita .etapa-n { border-color: var(--ok); color: var(--ok); }
.form-dejem input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .form-dejem select, .form-dejem textarea { width: 100%; max-width: none; }
.form-dejem .linha-form > div { flex: 1; min-width: 150px; }
.quadro-assinatura { display: block; width: 100%; height: 180px; background: #fff; border-radius: 4px; touch-action: none; cursor: crosshair; }
.linha-assinatura { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .4rem; }
.linha-assinatura .dica { margin: 0; }
.escolha-falta { border: 1px solid var(--borda); background: var(--superficie); padding: .6rem 1rem .9rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .6rem; }
.escolha-falta legend { font-weight: 600; padding: 0 .4rem; }
.lista-passos { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.lista-passos li { margin-bottom: .4rem; }
.dados-dejem { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 .75rem; }
.dados-dejem dt { color: var(--texto-2); }
.dados-dejem dd { margin: 0; }
.baixar-dejem { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; }
.tabela-dejem { border: 1px solid var(--borda); background: var(--superficie); padding: .6rem 1rem 1rem; margin: 0 0 1rem; min-width: 0; }
.tabela-dejem legend { font-weight: 600; padding: 0 .4rem; }
.item-tabela { border: 1px solid var(--borda-forte); border-radius: 4px; padding: .7rem .8rem; margin: .6rem 0; background: var(--fundo); }
.item-tabela .linha-form, .item-tabela .campo { margin-bottom: .6rem; }
.form-dejem .linha-form > div.curto { flex: 0 1 110px; min-width: 90px; }
.baixar-dejem .botao { text-align: center; }

/* ---------- Login ---------- */
.login { max-width: 400px; margin: 3rem auto; }
.pagina-erro { text-align: center; }
.pagina-erro .acoes { justify-content: center; }
.codigo-erro { color: var(--timbre); font-weight: 600; letter-spacing: .05em; margin: 0; }
.link-esqueci { margin: .75rem 0 0; text-align: center; }
.login .caixa { border-top: 2px solid var(--timbre); }
.login input, .login select { width: 100%; }

/* ---------- Cartões genéricos (tela inicial e painel) ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.cartao > h2 { margin: 0 0 1rem; padding: 0 0 .6rem; border-left: 0; border-bottom: 1px solid var(--borda); }
.cartao > h2 .suave { font: 400 .95rem "IBM Plex Sans", sans-serif; }
.meta { font-size: .9rem; margin: 0; }

/* ---------- Tela inicial (módulo da Administração) ---------- */
.abertura { margin-bottom: 1.5rem; }
.abertura p { margin: 0; }
.recado-destaque { background: var(--timbre-fundo); border: 1px solid var(--timbre); border-left-width: 4px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.recado-destaque h2 { margin: .15rem 0 .25rem; font-size: 1.3rem; border: 0; padding: 0; }
.rotulo { color: var(--timbre-claro); font-weight: 600; font-size: .85rem; }
.inicio-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ocorrencia { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; padding: .75rem 0; }
.ocorrencia + .ocorrencia { border-top: 1px solid var(--borda); }
.ocorrencia:not(:has(.foto)) { grid-template-columns: 1fr; }
.foto { display: block; object-fit: cover; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 4px; }
.foto-larga { width: 100%; aspect-ratio: 4 / 3; }
.sem-foto { display: grid; place-items: center; color: var(--timbre); font: 700 1.6rem "Archivo", sans-serif; }
.policial .foto { width: 96px; height: 120px; }
.foto.mini { width: 56px; height: 56px; font-size: 1rem; flex: none; }
.policiais { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.policial { display: flex; gap: 1rem; align-items: flex-start; }
.aniversarios { list-style: none; margin: 0; padding: 0; }
.aniversarios li { display: flex; gap: .75rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--borda); }
.aniversarios li:last-child { border-bottom: 0; }
.aniversarios .dia { font: 700 1rem "Archivo", sans-serif; color: var(--timbre); min-width: 2ch; }
.aniversarios li.hoje { background: var(--timbre-fundo); margin: 0 -.6rem; padding-left: .6rem; padding-right: .6rem; }
.selo-hoje { margin-left: auto; font-size: .8rem; font-weight: 600; color: #1b1608; background: var(--timbre); padding: .05rem .5rem; border-radius: 3px; }
.recado { padding: .75rem 0; }
.recado + .recado { border-top: 1px solid var(--borda); }
.mes-titulo { margin: 1.25rem 0 .5rem; color: var(--timbre); }
.item-lista { display: flex; gap: 1rem; align-items: center; background: var(--superficie); border: 1px solid var(--borda); padding: .6rem .9rem; margin-bottom: .5rem; }
.item-texto { flex: 1; min-width: 0; }
.item-lista form { margin: 0; }

/* ---------- Situação do dia (CFP) ---------- */
.turnos-dia { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.turno-cartao {
  display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; text-decoration: none; color: var(--texto);
  border: 1px solid var(--borda-forte); border-left: 4px solid var(--pendente); background: var(--fundo); border-radius: 4px;
}
.turno-cartao.feito { border-left-color: var(--ok); }
.turno-cartao.agora { border-color: var(--timbre); border-left-color: var(--timbre); }
.turno-cartao:hover { background: var(--superficie-2); }
.turno-nome { font: 700 1rem "Archivo", sans-serif; display: flex; gap: .5rem; align-items: center; }
.turno-pontos { font: 700 1.5rem "Archivo", sans-serif; }
.turno-pontos small { font: 400 .85rem "IBM Plex Sans", sans-serif; color: var(--texto-2); }
.turno-pontos.vazio { font-size: 1.05rem; color: var(--pendente); }

.so-celular { display: none; }

@media (max-width: 900px) {
  .inicio-grade, .duas-colunas { grid-template-columns: 1fr; }
  .ocorrencia { grid-template-columns: 1fr; }
}

/* =====================================================================
   Celular (até 640px de largura). A maior parte do uso é por aqui.
   ===================================================================== */
@media (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.1rem; margin-top: 1.75rem; }
  .so-celular { display: block; }
  span.so-celular { display: inline; }
  .so-desktop { display: none !important; }

  /* Topo: marca e usuário em cima, menu rolando para o lado embaixo */
  .topo-in { gap: .5rem .75rem; padding: .5rem 1rem; }
  .marca img { height: 34px; }
  .marca span { font-size: 1rem; }
  .marca small { display: none; }
  .quem.anonimo { width: auto; margin-top: .6rem; }
  .botao-dejem small { display: none; }
  .botao-dejem { padding: .4rem .8rem; }
  .barra-dejem { gap: .6rem; }
  .barra-dejem > * { width: 100%; }
  .abas-dejem { display: flex; }
  .abas-dejem a { flex: 1; text-align: center; }
  .abas-cia { flex-wrap: wrap; }
  .abas-cia a { flex: 1 1 30%; border-bottom: 1px solid var(--borda-forte); }
  .baixar-periodo .botao { flex: 1 1 45%; text-align: center; }
  .quem { width: 100%; gap: .5rem; font-size: .85rem; }
  .quem > span:first-child { flex: 1; min-width: 0; line-height: 1.3; }
  .tenente { display: block; margin: 0; }
  .menu { width: 100%; }
  .submenu .topo-in { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; padding: 0 .5rem; scrollbar-width: none; }
  .submenu .topo-in::-webkit-scrollbar { display: none; }
  .submenu a { white-space: nowrap; padding: .75rem .65rem; font-size: .9rem; }
  .separador { margin: .5rem .25rem; }

  .pagina { padding: 1rem 1rem 5rem; }
  .caixa, .cartao { padding: .9rem 1rem; }

  /* Toques: alvos com pelo menos ~44px de altura */
  button, .botao { min-height: 44px; padding: .6rem 1rem; }
  button.pequeno, .botao.pequeno { min-height: 38px; }
  input, select, textarea { font-size: 16px; min-height: 44px; } /* 16px evita o zoom automático do iPhone */
  input[type="checkbox"] { min-height: 0; width: 22px; height: 22px; }
  .linha-form { flex-direction: column; align-items: stretch; }
  .linha-form > div input, .linha-form > div select { width: 100%; }
  .largo, .estreito { width: 100%; max-width: none; }

  /* Navegação de data: [Anterior] [data] [Próximo] numa linha só */
  .datas { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; }
  .datas input { width: 100%; min-width: 0; }
  .datas .botao { padding: .4rem 1rem; }
  .nav-turno .botao { font-size: .85rem; padding: .5rem .7rem; }
  .nav-turno { grid-template-columns: 1fr 1fr; }
  .nav-turno input { grid-column: 1 / -1; order: -2; }
  .nav-turno .alternador { grid-column: 1 / -1; order: -1; }
  .alternador a { flex: 1; text-align: center; padding: .6rem; }

  /* Cartões de situação: dois por linha */
  .quadro { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .situacao { padding: .7rem .75rem; }
  .situacao h3 { font-size: .95rem; }
  .selo { font-size: .78rem; padding: .1rem .45rem; white-space: normal; }
  .turnos-dia { grid-template-columns: 1fr 1fr; gap: .5rem; }

  /* Formulários de lançamento: no celular os campos voltam a ser uma lista */
  .form-resultado .linha { grid-template-columns: 1fr 108px; gap: .75rem; }
  .grupo-campos { padding: .3rem .8rem .6rem; }
  .grade-campos { display: block; margin-top: 0; }
  .celula-campo { display: grid; grid-template-columns: 1fr 108px; align-items: center; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--borda); }
  .grade-campos:last-child .celula-campo:last-child { border-bottom: 0; }
  .celula-campo label, .celula-rotulo { font-size: .92rem; }
  .grupo-campos.leitura .celula-campo { background: none; border: 0; border-bottom: 1px solid var(--borda); padding: .4rem 0; }
  .celula-valor { font-size: 1.05rem; }
  .interruptor { width: 100%; }
  table.cartoes-mobile .lista-unidades { justify-content: flex-end; }
  .form-resultado .acoes {
    position: sticky; bottom: 0; z-index: 5; margin: 1rem -1rem 0; padding: .75rem 1rem;
    background: var(--topo); border-top: 1px solid var(--borda-forte);
  }
  .form-resultado .acoes button { flex: 1; }

  /* Tabelas de cadastro e histórico viram cartões empilhados */
  table.cartoes-mobile thead { display: none; }
  table.cartoes-mobile, table.cartoes-mobile tbody, table.cartoes-mobile tr { display: block; width: 100%; }
  table.cartoes-mobile tr { padding: .7rem .9rem; border-bottom: 1px solid var(--borda-forte); }
  table.cartoes-mobile td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .3rem 0; border: 0; text-align: right; }
  table.cartoes-mobile td[data-rotulo]::before { content: attr(data-rotulo); color: var(--texto-2); font-size: .85rem; text-align: left; flex: none; }
  table.cartoes-mobile td input:not([type="checkbox"]), table.cartoes-mobile td select { width: 62%; min-width: 0; }
  table.cartoes-mobile td.titulo-cartao { font-weight: 600; text-align: left; padding-bottom: .4rem; }
  table.cartoes-mobile td.acao-cartao { justify-content: flex-end; padding-top: .5rem; }
  table.cartoes-mobile td.vazio-cartao { display: none; }
  th, td { padding: .45rem .6rem; }

  /* DEJEM */
  .etapa-nome { font-size: .7rem; }
  .dados-dejem { grid-template-columns: 1fr; gap: 0; }
  .dados-dejem dd { margin-bottom: .5rem; }
  .form-dejem .acoes button, .form-dejem .acoes .botao { flex: 1; text-align: center; }
  .form-dejem .linha-form > div.curto { flex: none; }  /* empilhado: sem altura fixa */
  .tabela-dejem { padding: .5rem .7rem .8rem; }

  /* Seções, resumo do dia e aviso de pendência */
  details.secao > summary { padding: .75rem .9rem; }
  .corpo-secao { padding: .25rem .9rem .9rem; }
  .corpo-secao .rolagem { margin: 0 -.9rem; border-left: 0; border-right: 0; }
  .resumo-dia { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .resumo-dia .bloco-resumo:last-child { grid-column: 1 / -1; }
  .bloco-resumo { padding: .7rem .8rem; }
  .destaques { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .titulo-linha { flex-direction: column; align-items: stretch; }
  .titulo-linha .botao { text-align: center; }
  .quem .perfil { display: none; }

  /* Painel do mês */
  .indicadores { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .indicador { padding: .75rem; }
  .ind-valor { font-size: 1.3rem; }
  .indicadores .indicador:last-child { grid-column: 1 / -1; }
  .grade-graficos { grid-template-columns: 1fr; }
  .rolagem-grafico .grafico { min-width: 640px; }
  .barra-linha { grid-template-columns: 1fr auto; grid-template-areas: "rotulo valor" "trilho trilho"; gap: .2rem .75rem; }
  .barra-rotulo { grid-area: rotulo; }
  .barra-valor { grid-area: valor; }
  .barra-trilho { grid-area: trilho; }

  .login { margin: 1.5rem auto; }
  .policiais { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .quadro, .turnos-dia, .indicadores { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* DEJEM: tela inicial e aviso de privacidade, mais limpos */
.subtitulo { color: var(--texto-2); margin: 0 0 1.25rem; }
.centro { text-align: center; }
.aviso-tipo-dejem { text-align: center; border-left: 0; border-top: 2px solid var(--timbre);
  border-radius: 4px; padding: .8rem 1rem; margin: 0 0 1.5rem; }
.passos-dejem { list-style: none; counter-reset: passo; padding: 0; margin: 0 0 1.75rem;
  display: grid; gap: .5rem; }
.passos-dejem li { counter-increment: passo; display: flex; align-items: baseline; gap: .75rem;
  padding: .6rem .8rem; border: 1px solid var(--borda); border-radius: 4px; }
.passos-dejem li::before { content: counter(passo); color: var(--timbre); font-weight: 700; min-width: 1rem; }
.passos-dejem span { color: var(--texto-2); font-size: .9rem; margin-left: auto; text-align: right; }
.botao-largo { min-width: 12rem; text-align: center; }
.link-discreto { text-align: center; font-size: .85rem; margin: 2rem 0 0; }
.link-discreto a { color: var(--texto-2); }
.privacidade h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.privacidade p, .privacidade li { color: var(--texto-2); }
.privacidade strong { color: var(--texto); }
.resumo-lgpd p { margin: 0 0 .5rem; color: var(--texto); }
.resumo-lgpd p:last-child { margin: 0; }
.resumo-lgpd a, .privacidade a { overflow-wrap: anywhere; }
.lista-limpa { padding-left: 1.1rem; margin: 0; }
.lista-limpa li { margin-bottom: .35rem; }
@media (max-width: 640px) {
  .passos-dejem li { gap: .6rem; padding: .55rem .7rem; }
  .passos-dejem span { font-size: .8rem; }
}