/* =========================================================================
   Brigada de Incêndio FAEPU — folha de estilo única (sem framework, sem build)
   Linguagem visual: sinalização de segurança contra incêndio.
   Geometria simples, alto contraste, séria. Bordas em vez de sombras.
   ========================================================================= */

:root {
  /* --- Paleta nomeada --------------------------------------------------- */
  --vermelho-sinal: #b70402; /* primária: ações, links, marcadores (logo)  */
  --vermelho-sinal-escuro: #890301; /* hover / pressionado                 */
  --vermelho-status: #c8102e; /* status crítico (painel de ocorrências) —
                                 fixo, não acompanha a cor da marca       */
  /* Dourado da logo — só decorativo, nunca carrega significado:
     --dourado-claro SÓ sobre o chumbo da barra lateral;
     --dourado-escuro só em borda/filete sobre fundo claro, nunca em texto. */
  --dourado-claro: #e7ac3a;
  --dourado-escuro: #c27717;
  --ambar-atencao: #b26a00; /* status "em andamento" (tom legível)         */
  --verde-seguro: #1e7a3d; /* status "resolvida" / sucesso                 */
  --chumbo: #17191c; /* texto principal e barra lateral (quase preto)      */
  --cinza-medio: #5b6067; /* texto secundário                              */
  --off-white: #f2f1ee; /* fundo da aplicação (branco levemente quebrado)  */

  /* --- Neutros de apoio ----------------------------------------------- */
  --papel: #ffffff;
  --borda: #dad8d3;
  --borda-forte: #b7b4ad;
  --borda-campo: #a9a69f;
  --realce-linha: #faf9f7;

  /* --- Tipografia ---------------------------------------------------- */
  /* Título: cai numa face condensada industrial onde existir (DIN /
     Bahnschrift em Apple/Windows), senão system-ui forte. Sem CDN. */
  --fonte-titulo: "Bahnschrift", "DIN Alternate", "DIN Condensed",
    "Oswald", "Roboto Condensed", "Franklin Gothic Medium", "Arial Narrow",
    system-ui, sans-serif;
  --fonte-corpo: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --barra-w: 244px;
}

/* --- foco de teclado: duplo contorno, visível sobre claro e sobre escuro */
:focus-visible {
  outline: 2px solid var(--chumbo);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232, 164, 0, 0.9);
  border-radius: 2px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--chumbo);
  background: var(--off-white);
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
  margin: 0 0 0.6em;
}
h1 {
  font-size: clamp(1.55rem, 1.3rem + 1.1vw, 1.95rem);
}
h2 {
  font-size: 1.3rem;
}
h3 {
  font-size: 1.08rem;
}

a {
  color: var(--vermelho-sinal-escuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--vermelho-sinal);
}

p {
  margin: 0 0 1rem;
}
small {
  font-size: 0.82rem;
  color: var(--cinza-medio);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Estrutura: barra lateral fixa + área de conteúdo
   ========================================================================= */

/* Controle da gaveta: só existe abaixo de 900px (ver media query). No
   desktop fica fora da ordem de tabulação, já que a barra é sempre visível. */
.alternar-nav {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--barra-w) 1fr;
  min-height: 100vh;
}

.barra-lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 0.85rem 1rem;
  background: var(--chumbo);
  color: #c9cdd3;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem 0.9rem;
  border-bottom: 1px solid #2b2f35;
  margin-bottom: 0.7rem;
}
.marca-emblema {
  flex: none;
  display: block;
  width: 46px;
  max-width: 46px;
  height: auto;
  padding: 2px;
  background: #fff; /* o PNG não tem transparência */
  border: 1px solid var(--dourado-claro);
  border-radius: 6px;
}
.marca-texto {
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  color: #fff;
}
.marca-sub {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #9aa0a8;
}
.fechar-nav {
  display: none;
  margin-left: auto;
  padding: 0.25rem;
  color: #c9cdd3;
  cursor: pointer;
}

.nav-secoes {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.58rem 0.7rem;
  border-radius: 4px;
  color: #c9cdd3;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
}
.nav-item-icone {
  flex: none;
  color: #8b9199;
}
.nav-item:hover {
  background: #24282e;
  color: #fff;
}
.nav-item:hover .nav-item-icone {
  color: #c9cdd3;
}
.nav-item[aria-current="page"] {
  background: #24282e;
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--vermelho-sinal);
}
.nav-item[aria-current="page"] .nav-item-icone {
  color: var(--vermelho-sinal);
}

.barra-lateral-rodape {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid #2b2f35;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.usuario-atual {
  display: flex;
  flex-direction: column;
  padding: 0 0.35rem;
}
.usuario-nome {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}
.usuario-papel {
  font-size: 0.78rem;
  color: #9aa0a8;
}
.btn-sair {
  width: 100%;
  background: transparent;
  color: #c9cdd3;
  border: 1px solid #3a3f46;
  font-weight: 600;
}
.btn-sair:hover {
  background: transparent;
  border-color: var(--vermelho-sinal);
  color: #fff;
}

.area-conteudo {
  min-width: 0; /* deixa o conteúdo encolher em vez de estourar a grade */
  display: flex;
  flex-direction: column;
}

.topo-mobile {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  background: var(--chumbo);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}
.abrir-nav {
  display: inline-flex;
  padding: 0.3rem;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}
.topo-mobile-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
}

.conteudo {
  padding: 2rem clamp(1rem, 0.4rem + 2.5vw, 2.75rem);
  max-width: 1080px;
  width: 100%;
}

.fundo-nav {
  display: none;
}

/* =========================================================================
   Tela isolada (login) — sem barra lateral
   ========================================================================= */

.tela-simples {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-box {
  position: relative;
  z-index: 1; /* acima da marca d'água */
  width: 100%;
  max-width: 380px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-top: 4px solid var(--vermelho-sinal);
  border-radius: 4px;
  padding: 2rem 1.9rem;
}
/* Marca d'água: logo grande e quase invisível atrás do card. O JPG tem
   fundo branco — multiply sobre o off-white faz o branco sumir e só o
   desenho aparece. position: fixed não entra no fluxo (sem scroll). */
.login-marca-dagua {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(500px, 80vw, 640px); /* no celular passa da tela e é recortada */
  height: auto;
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.login-rodape {
  margin: 1.2rem 0 0;
  font-size: 0.9rem;
  color: var(--cinza-medio);
}
.login-box h1 {
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}
.login-box form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.login-box label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.login-box input {
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--borda-campo);
  border-radius: 3px;
  font: inherit;
}
.login-box button {
  margin-top: 0.2rem;
}

/* --- /login: herói em tela cheia + cartão escuro à direita -------------
   O texto do herói (brasão, "Prevenção salva vidas.", ícones) já está na
   imagem. Ancorada à esquerda: em telas mais estreitas que 2:1 o corte cai
   no lado direito (fumaça/caminhão), atrás do cartão, e o texto fica inteiro. */
.login-cena {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0.9rem;
  padding: 2rem clamp(1.5rem, 6vw, 7rem);
  background: #0d0908
    url("/static/Her%C3%B3i%20Cinem%C3%A1tico%20da%20Brigada%20de%20Inc%C3%AAndio.webp")
    left center / cover no-repeat;
  color: #ece6dc;
  font-family: var(--fonte-corpo);
}
.login-cena > * {
  width: 100%;
  max-width: 400px;
}

.cartao-login {
  background: rgba(14, 11, 10, 0.86);
  border: 1px solid rgba(231, 172, 58, 0.32); /* --dourado-claro, suave */
  border-top: 2px solid var(--vermelho-sinal);
  border-radius: 10px;
  padding: 1.8rem 2rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(183, 4, 2, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cartao-login-emblema {
  display: block;
  margin: 0 auto 0.6rem;
  width: 120px;
  height: 120px;
}
.cartao-login h1 {
  margin: 0;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}
.filete-dourado {
  height: 1px;
  margin: 1rem auto 1.3rem;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--dourado-claro) 25%, var(--dourado-claro) 75%, transparent);
  opacity: 0.75;
}
.cartao-login-erro {
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(232, 60, 50, 0.55);
  border-left: 3px solid #e8473c;
  border-radius: 4px;
  background: rgba(183, 4, 2, 0.16);
  color: #ffd9d4;
  font-size: 0.88rem;
  font-weight: 600;
}
.cartao-login form {
  display: flex;
  flex-direction: column;
}
.cartao-login form > label[for] {
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #e9e2d5;
}
.campo-icone {
  position: relative;
  margin-bottom: 1.05rem;
}
.campo-icone-simbolo {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(231, 172, 58, 0.75);
  pointer-events: none;
}
.campo-icone input {
  width: 100%;
  padding: 0.72rem 0.8rem 0.72rem 2.6rem;
  border: 1px solid rgba(231, 172, 58, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
}
.campo-icone input::placeholder {
  color: #8f877c;
}
.campo-icone input:focus {
  outline: none;
  border-color: var(--dourado-claro);
  box-shadow: 0 0 0 3px rgba(231, 172, 58, 0.18);
}
/* Autopreenchimento do navegador não pinta o campo de amarelo/branco. */
.campo-icone input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #1d1715 inset;
  caret-color: #fff;
}
.campo-icone #senha {
  padding-right: 2.8rem;
}
.alternar-senha {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.4rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #a79f93;
}
.alternar-senha:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.alternar-senha .icone-olho-fechado,
.alternar-senha[aria-pressed="true"] .icone-olho {
  display: none;
}
.alternar-senha[aria-pressed="true"] .icone-olho-fechado {
  display: block;
}
.botao-entrar {
  justify-content: center;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.8rem 1rem;
  border: 1px solid #e0261d;
  border-radius: 6px;
  background: linear-gradient(180deg, #d61a12 0%, var(--vermelho-sinal) 55%, var(--vermelho-sinal-escuro) 100%);
  font-size: 1rem;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(183, 4, 2, 0.35);
}
.botao-entrar:hover {
  background: linear-gradient(180deg, var(--vermelho-sinal) 0%, var(--vermelho-sinal-escuro) 100%);
}
.permanecer {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: #d8d1c5;
  cursor: pointer;
}
.permanecer input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--vermelho-sinal);
  cursor: pointer;
}
.cartao-login form + .filete-dourado {
  margin: 1.4rem auto 0.9rem;
}
.acesso-seguro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cfc7ba;
}
.acesso-seguro svg {
  color: var(--dourado-claro);
}
.login-cena-rodape {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: #cfc7ba;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.login-cena-rodape a {
  color: #fff;
}

/* Abaixo de 1024px o herói não cabe ao lado do cartão: cartão centralizado
   sobre a imagem, com o fundo escurecido pra garantir contraste. */
@media (max-width: 1024px) {
  .login-cena {
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background:
      linear-gradient(rgba(8, 6, 5, 0.72), rgba(8, 6, 5, 0.86)),
      #0d0908 url("/static/Her%C3%B3i%20Cinem%C3%A1tico%20da%20Brigada%20de%20Inc%C3%AAndio.webp")
        30% center / cover no-repeat;
  }
  .cartao-login {
    padding: 1.5rem 1.25rem 1.2rem;
    background: rgba(14, 11, 10, 0.9);
  }
}

/* =========================================================================
   Componentes de conteúdo
   ========================================================================= */

.cabecalho-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cabecalho-secao h1,
.cabecalho-secao h2,
.cabecalho-secao h3 {
  margin: 0;
}

.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 1.25rem 1.35rem;
  margin: 1.25rem 0;
}
.cartao > :first-child {
  margin-top: 0;
}
.cartao > :last-child {
  margin-bottom: 0;
}

/* Mensagem de retorno (?msg=…). Neutra de propósito: a mesma faixa serve
   confirmações e erros de validação, então não pinta de verde/vermelho. */
.aviso {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--chumbo);
  border-radius: 0 3px 3px 0;
  font-size: 0.9rem;
}

.erro {
  color: var(--vermelho-sinal-escuro);
  font-size: 0.9rem;
  font-weight: 600;
}

/* --- Botões e links de ação ---------------------------------------- */
button,
.botao {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--vermelho-sinal);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
button:hover,
.botao:hover {
  background: var(--vermelho-sinal-escuro);
  color: #fff;
}

.botao--secundario,
button.secundario {
  background: var(--papel);
  color: var(--chumbo);
  border-color: var(--borda-forte);
}
.botao--secundario:hover,
button.secundario:hover {
  background: var(--realce-linha);
  color: var(--chumbo);
  border-color: var(--chumbo);
}

/* Ação destrutiva discreta dentro de tabelas/listas */
button.link-perigo {
  background: none;
  border: none;
  padding: 0.2rem 0.15rem;
  color: var(--vermelho-sinal-escuro);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.link-perigo:hover {
  background: none;
  color: var(--vermelho-sinal);
}

.acoes {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.acoes form {
  margin: 0;
}
.acoes--painel {
  margin: 0 0 1.25rem;
}

/* --- Leitor de QR pela câmera (/vistorias/escanear) --------------- */
.scanner-msg {
  max-width: 520px;
  margin: 0 auto 1rem;
  text-align: center;
  font-weight: 600;
}
.scanner-quadro {
  max-width: 520px;
  margin: 0 auto;
  background: #000;
  border: 1px solid var(--borda);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  aspect-ratio: 3 / 4;
  min-height: 320px;
}
.scanner-quadro[hidden] {
  display: none;
}
.scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scanner-video[hidden] {
  display: none;
}
.scanner-erro {
  max-width: 520px;
  margin: 1.25rem auto 0;
}
.scanner-erro > :first-child {
  margin-top: 0;
}
.scanner-erro > :last-child {
  margin-bottom: 0;
}

/* --- Formulários -------------------------------------------------- */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 34rem;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--borda-campo);
  border-radius: 3px;
  background: #fff;
  width: 100%;
  color: var(--chumbo);
}
.form-grid textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}

/* Grupos de opção (radios) do checklist de vistoria */
.grupo-opcoes {
  border: 1px solid var(--borda-campo);
  border-radius: 3px;
  padding: 0.6rem 0.8rem 0.7rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.3rem;
}
.grupo-opcoes legend {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 0.35rem;
}
.grupo-opcoes .opcao {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 400;
}
.grupo-opcoes .opcao input {
  width: auto;
  margin: 0;
  flex: none;
}

/* Barra de filtro (histórico de vistorias) */
.filtro-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
  max-width: none;
}
.filtro-bar label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.filtro-bar input,
.filtro-bar select {
  font: inherit;
  font-weight: 400;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--borda-campo);
  border-radius: 3px;
  background: #fff;
}
.filtro-bar .acoes {
  gap: 0.75rem;
}

/* Lista de ativos por local (/locais) — um <details> por setor */
details.cartao > summary {
  cursor: pointer;
  font-size: 0.95rem;
  list-style-position: inside;
}
details.cartao > summary strong {
  font-size: 1.05rem;
}
details.cartao[open] > summary {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--borda);
}
details.cartao > *:not(summary) {
  margin-top: 1rem;
}
/* Formulário de adicionar ativo: mais compacto e ocupa a largura do cartão */
.form-grid--compacto {
  max-width: none;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--realce-linha);
}
.form-grid--compacto h3 {
  margin: 0;
  font-size: 0.95rem;
}

/* Edição em linha (contatos) */
.lista-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.linha-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--realce-linha);
}
.linha-form input,
.linha-form select {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--borda-campo);
  border-radius: 3px;
  background: #fff;
  flex: 1 1 8rem;
  min-width: 0;
}
.linha-form .campo-ordem {
  flex: 0 0 4rem;
}
.linha-form button {
  flex: 0 0 auto;
}

/* --- Tabelas: forma "formulário regrado", planas ------------------- */
.tabela-envolucro {
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--papel);
}
/* tabela dentro de um cartão: sem a moldura própria do envólucro */
.cartao .tabela-envolucro {
  border: 0;
  border-radius: 0;
  margin: 0.4rem 0 0;
  background: transparent;
}
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.tabela th,
.tabela td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  vertical-align: top;
}
.tabela thead th {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--cinza-medio);
  border-bottom: 2px solid var(--chumbo);
  white-space: nowrap;
}
.tabela tbody td {
  border-bottom: 1px solid var(--borda);
}
.tabela tbody tr:last-child td {
  border-bottom: none;
}
.tabela tbody tr:hover td {
  background: var(--realce-linha);
}
/* a coluna de ações precisa continuar sendo célula de tabela (não flex) */
.tabela td.acoes {
  display: table-cell;
  white-space: nowrap;
}
.tabela td.acoes > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.35rem 0 0;
}
.tabela td.acoes form {
  margin: 0;
}
/* números (datas, contagens) alinhados */
.tabela td {
  font-variant-numeric: tabular-nums;
}

/* Botão "Salvar" da edição em linha: secundário — o vermelho fica reservado
   para ação primária e alerta. */
.linha-form button[type="submit"]:not(.link-perigo) {
  background: var(--papel);
  color: var(--chumbo);
  border-color: var(--borda-forte);
}
.linha-form button[type="submit"]:not(.link-perigo):hover {
  background: var(--realce-linha);
  border-color: var(--chumbo);
  color: var(--chumbo);
}

/* --- Selo de status (3 canais: forma + texto + cor) --------------- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.6em;
  border: 1px solid;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.35;
}
.estado svg {
  flex: none;
}
.estado--aberta {
  background: #fbe9ec;
  color: #8e0c22;
  border-color: #e0a6b0;
}
.estado--em_andamento {
  background: #fbf0d9;
  color: #7a4e00;
  border-color: #e2c485;
}
.estado--resolvida,
.estado--presente,
.estado--valido {
  background: #e4f1e8;
  color: #1b5e2e;
  border-color: #a6ccb2;
}
.estado--vencido {
  background: #fbe9ec;
  color: #8e0c22;
  border-color: #e0a6b0;
}
.estado--neutro,
.estado--sem_data {
  background: #eeeeec;
  color: #4a4f57;
  border-color: #cfccc5;
}

/* --- Lista de presença (treinamentos e atas) --------------------- */
.presenca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}
.cartao .presenca {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borda);
}
.presenca form {
  margin: 0;
}
.presenca-contador {
  font-size: 0.85rem;
  color: var(--cinza-medio);
  font-variant-numeric: tabular-nums;
}
.presenca-detalhes {
  flex-basis: 100%;
}
.presenca-detalhes summary {
  cursor: pointer;
  color: var(--vermelho-sinal-escuro);
  font-size: 0.85rem;
  font-weight: 600;
  width: fit-content;
}
.presenca-detalhes summary:hover {
  color: var(--vermelho-sinal);
}
.presenca-detalhes[open] summary {
  margin-bottom: 0.5rem;
}
.presenca-detalhes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.presenca-detalhes li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--borda);
}
.presenca-detalhes li:last-child {
  border-bottom: none;
}
.presenca-detalhes .meta {
  color: var(--cinza-medio);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Conteúdo em markdown (procedimentos, sobre) ------------------ */
.conteudo-md {
  max-width: 68ch;
}
.conteudo-md > :first-child {
  margin-top: 0;
}
.conteudo-md h1,
.conteudo-md h2,
.conteudo-md h3 {
  margin-top: 1.6em;
}
.conteudo-md ul,
.conteudo-md ol {
  padding-left: 1.3rem;
}
.conteudo-md li {
  margin: 0.3rem 0;
}
.conteudo-md pre {
  background: var(--chumbo);
  color: #f2f1ee;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.88rem;
}
.conteudo-md code {
  background: #ecebe7;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.9em;
}
.conteudo-md pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.conteudo-md blockquote {
  margin: 1rem 0;
  padding: 0.3rem 0 0.3rem 1rem;
  border-left: 3px solid var(--vermelho-sinal);
  color: var(--cinza-medio);
}
.conteudo-md table {
  border-collapse: collapse;
  width: 100%;
}
.conteudo-md th,
.conteudo-md td {
  border: 1px solid var(--borda);
  padding: 0.4rem 0.6rem;
  text-align: left;
}

/* =========================================================================
   Painel (dashboard) — deliberadamente diferente dos cartões de conteúdo:
   marcador colorido à esquerda + número grande em face de título.
   ========================================================================= */

.paineis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}
.painel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--chumbo);
  border-radius: 4px;
  text-decoration: none;
  color: var(--chumbo);
}
a.painel:hover {
  background: var(--realce-linha);
  color: var(--chumbo);
}
.painel--alerta {
  border-left-color: var(--vermelho-status);
}
.painel--atencao {
  border-left-color: var(--ambar-atencao);
}
.painel--ok {
  border-left-color: var(--verde-seguro);
}
.painel-numero {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.painel-rotulo {
  font-size: 0.9rem;
  color: var(--cinza-medio);
}
.painel strong {
  font-size: 1.02rem;
}
.painel-vazio {
  color: var(--cinza-medio);
}

.lista-simples {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-simples li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--borda);
}
.lista-simples li:last-child {
  border-bottom: none;
}
.lista-simples .meta {
  color: var(--cinza-medio);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =========================================================================
   Folha do QR code de local — pensada para imprimir e fixar na parede
   ========================================================================= */

.folha-qr {
  max-width: 460px;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--papel);
  text-align: center;
}
/* Logo no topo da etiqueta: nítida e opaca (é etiqueta funcional, não
   decoração). Fica separada do QR pela margem — nunca encosta nem sobrepõe,
   pra não atrapalhar a leitura. */
.folha-qr-logo {
  display: block;
  width: 96px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.25rem;
}
.folha-qr-codigo {
  line-height: 0;
}
.folha-qr-codigo svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}
.folha-qr-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem);
  line-height: 1.15;
  margin-top: 1.1rem;
}
.folha-qr-descricao {
  display: block;
  color: var(--cinza-medio);
  margin-top: 0.35rem;
}
.folha-qr-rotulo {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.folha-qr-url {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--cinza-medio);
  word-break: break-all;
}

/* --- Foto de referência de local e de ativo (/locais e /vistorias/novo) */
/* Miniatura genérica: o tamanho vem do width/height passado por quem usa
   (40px na listagem de locais, menor na linha de um ativo). */
.miniatura-foto {
  border-radius: 3px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.6rem;
  border: 1px solid var(--borda);
  background: var(--realce-linha);
}
.miniatura-foto--vazia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cinza-medio);
}
.foto-atual {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.foto-atual img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--borda);
}
.foto-atual .opcao {
  font-size: 0.85rem;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.foto-atual .opcao input {
  width: auto;
}
/* Fotos na tela de vistoria — local + ativo lado a lado, cada uma legendada */
.fotos-vistoria {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.foto-vistoria {
  margin: 0;
  flex: 1 1 15rem;
  max-width: 22rem;
}
.foto-vistoria img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--borda);
}
.foto-vistoria figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cinza-medio);
}

/* =========================================================================
   Área administrativa (/admin) — casca escura própria, sem a barra lateral
   do site. Reaproveita .marca, .nav-item, .btn-sair e o rodapé da barra
   lateral (já pensados pro fundo chumbo). O conteúdo (tabelas, avisos)
   continua nos cartões claros de sempre.
   ========================================================================= */

.admin-corpo {
  background: var(--chumbo);
  color: #c9cdd3;
}

.admin-shell {
  display: grid;
  grid-template-columns: var(--barra-w) minmax(0, 1fr);
  min-height: 100vh;
}

.admin-menu {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 0.85rem 1rem;
  background: #111316;
  border-right: 1px solid #2b2f35;
}
/* card branco do emblema com filete dourado — fundo escuro, permitido */
.admin-menu .marca-emblema,
.admin-login-emblema {
  background: #fff;
}
.admin-voltar-site {
  padding: 0 0.35rem;
  font-size: 0.85rem;
  color: #c9cdd3;
}
.admin-voltar-site:hover {
  color: #fff;
}

.admin-conteudo {
  padding: 2rem clamp(1rem, 0.4rem + 2.5vw, 2.75rem);
  max-width: 1080px;
  width: 100%;
}
.admin-conteudo h1,
.admin-conteudo h2 {
  color: #fff;
}
/* o que fica em cartão claro volta ao texto escuro. .tabela explícita: as
   páginas saem sem <!DOCTYPE> (modo quirks), e aí a tabela herda a cor do
   <body> — não do cartão em volta. */
.admin-conteudo .tabela-envolucro,
.admin-conteudo .tabela,
.admin-conteudo .aviso,
.admin-conteudo .cartao {
  color: var(--chumbo);
}

/* --- /admin/login ---------------------------------------------------- */
.admin-login-box {
  width: 100%;
  max-width: 400px;
  padding: 2rem 1.9rem;
  background: #111316;
  border: 1px solid #2b2f35;
  border-top: 4px solid var(--vermelho-sinal);
  border-radius: 4px;
}
.admin-login-emblema {
  width: 56px;
  margin-bottom: 1.1rem;
}
.admin-login-rotulo {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado-claro); /* só sobre o chumbo */
}
.admin-login-box h1 {
  color: #fff;
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
}
.admin-login-texto {
  margin: 0 0 1.3rem;
  font-size: 0.92rem;
  color: #9aa0a8;
}
.admin-login-erro {
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.75rem;
  background: #fbe9ec;
  color: #8e0c22;
  border: 1px solid #e0a6b0;
  border-radius: 3px;
  font-size: 0.9rem;
  font-weight: 600;
}
.admin-login-box form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-login-box label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #c9cdd3;
}
.admin-login-box input {
  padding: 0.6rem 0.65rem;
  border: 1px solid #3a3f46;
  border-radius: 3px;
  font: inherit;
  background: #fff;
  color: var(--chumbo);
}
.admin-login-box button {
  margin-top: 0.2rem;
}

@media (max-width: 900px) {
  /* sem gaveta: o menu admin é curto, vira um bloco no topo */
  .admin-shell {
    grid-template-columns: minmax(0, 1fr); /* a tabela rola dentro do cartão, não a página */
  }
  .admin-menu {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #2b2f35;
  }
}

@media print {
  .barra-lateral,
  .topo-mobile,
  .fundo-nav,
  .no-print {
    display: none !important;
  }
  .app-shell {
    display: block;
  }
  .conteudo {
    padding: 0;
    max-width: none;
  }
  .folha-qr {
    border: none;
    max-width: none;
    padding: 0;
  }
  body {
    background: #fff;
  }
}

/* =========================================================================
   Responsivo: a barra lateral vira gaveta abaixo de 900px
   ========================================================================= */

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .topo-mobile {
    display: flex;
  }

  .alternar-nav {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .barra-lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(82vw, 300px);
    height: 100vh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .alternar-nav:checked ~ .app-shell .barra-lateral {
    transform: none;
  }

  .fechar-nav {
    display: inline-flex;
  }

  .alternar-nav:checked ~ .app-shell .fundo-nav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.5);
  }

  /* reflete o foco de teclado do checkbox invisível no botão visível */
  .alternar-nav:focus-visible ~ .app-shell .abrir-nav {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(232, 164, 0, 0.9);
  }

  .conteudo {
    padding: 1.5rem 1.1rem 2.5rem;
  }
}

@media (max-width: 560px) {
  .linha-form input,
  .linha-form select {
    flex: 1 1 100%;
  }
  .linha-form .campo-ordem {
    flex: 1 1 100%;
  }
  .cabecalho-secao {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .barra-lateral {
    transition: none;
  }
}