@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap");

:root {
  
  /* Verde institucional de verdade (Manual de Marca da ALECE, 2022) --
     antes disso o sistema inteiro usava um azul-marinho que, por mais
     que já estivesse bem refinado, não é a cor oficial da Assembleia:
     o manual não tem NENHUM azul-marinho, é tudo baseado nesse verde
     (Pantone 348C) com dourado/laranja de acento. --verde-700 é o
     verde exato do Pantone 348C; os outros são tons derivados dele
     pra manter a mesma escala de profundidade que já existia. */
  --verde-900: #0B3D24;   /* verde mais profundo — topbar, sidenav ativo */
  --verde-800: #0F5A33;   /* == cor do "chamado-id" na OS impressa */
  --verde-700: #008241;   /* Pantone 348C exato — botões primários */
  --verde-600: #1F9750;   /* hover */
  --verde-100: #E3F3E9;   /* tint de fundo */
  --verde-50:  #F2FAF5;

  /* Dois tons "frios" extras, também tirados da decupação do escudo no
     manual (Pantone 7709C e 636C) -- usados só onde o sistema precisa
     de cores bem diferentes entre si pra distinguir itens (avatar de
     usuário, faixa de prédio), já que depois do verde virar a cor
     principal não sobrou nenhuma cor fria na paleta de destaque. */
  --teal: #56A7B2;
  --azul-claro: #87D1E6;
  /* Versões escuras dos dois acima -- só pra texto/ícone BRANCO em cima
     (ex: iniciais do avatar de usuário) -- as cores claras acima têm
     contraste ruim demais com branco (~2.8:1 e ~1.7:1, abaixo do mínimo
     de acessibilidade), principalmente no celular sob luz forte. */
  --teal-escuro: #386D74;
  --azul-escuro: #238BA9;

  /* --- Dourado: único acento de destaque (== tabColor do Dashboard no Excel) --- */
  --dourado: #C9A34E;
  --dourado-escuro: #9C7B2E;
  --dourado-tint: #FBF3E1;

  /* --- Neutros (herdados do template da OS impressa) --- */
  /* Quase branco (não #F2F4F7 cinza-azulado de antes) -- pedido pra
     ficar mais parecido com a referência que a Jovanna mandou. Não é
     #FFFFFF puro igual --superficie pra uns poucos lugares que ainda
     precisam de um pouco de contraste contra um cartão branco (dia
     vazio do calendário, badge neutro do histórico) continuarem
     distinguíveis -- na prática ainda lê como "fundo branco". */
  --fundo: #FAFBFC;
  --superficie: #FFFFFF;
  --borda: #DCE3EA;
  --borda-forte: #C4CEDA;
  --texto: #1C2530;
  --texto-suave: #5B6B7A;
  --texto-fraco: #8B98A6;

  /* --- Status (== cores usadas no Excel exportado) --- */
  /* Usados só em botão/menu/ícone de AÇÃO destrutiva (excluir, bloquear
     etc.) -- de propósito iguais ao Excel exportado, não mexer. Pra
     BADGE/ETIQUETA passiva de estado (pendente/atrasado/em andamento),
     ver --estado-erro-*/--estado-alerta-* logo abaixo: o salmão/amarelo
     pastel daqui tinha baixo contraste pra esse uso (pesquisa de
     referência institucional confirmou -- ver auditoria visual). */
  --verde: #375623;
  --verde-fundo: #C6E0B4;
  --verde-texto: #2C4A1C;
  --amarelo: #9C6500;
  --amarelo-fundo: #FFE699;
  --amarelo-texto: #7A5000;
  --vermelho: #C00000;
  --vermelho-fundo: #F8CBAD;
  --vermelho-texto: #A13800;

  /* --- Estado passivo (badge/etiqueta de pendente/atrasado/em andamento,
     faixas de aviso) -- fundo quase branco + texto escuro saturado,
     padrão confirmado em GOV.UK/USWDS (ver auditoria visual), em vez do
     salmão/amarelo pastel de baixo contraste do bloco acima. */
  --estado-erro-fundo: #FEF2F2;
  --estado-erro-texto: #991B1B;
  --estado-erro-faixa: #DC2626;
  --estado-alerta-fundo: #FFFBEB;
  --estado-alerta-texto: #92400E;
  --estado-alerta-faixa: #D97706;

  /* --- Escala de espaçamento (base 4px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Cantos mais retos (menos "bolha") -- cartão muito arredondado com
     sombra suave é outra cara clássica de site feito às pressas por IA;
     site de governo de verdade tende a ser mais quadrado/sóbrio. */
  --raio: 4px;
  --raio-pequeno: 3px;
  --sombra: 0 1px 2px rgba(16, 38, 61, 0.06), 0 2px 8px rgba(16, 38, 61, 0.05);
  --sombra-elevada: 0 4px 16px rgba(16, 38, 61, 0.12), 0 1px 3px rgba(16, 38, 61, 0.08);

  /* Fontes oficiais de verdade, tiradas do Manual de Marca da ALECE
     (2022): "Lato" (pesos Black/Bold/Regular) é a família da própria
     marca/logotipo, e "HK Grotesk" (aqui pelo nome que o Google Fonts
     usa, "Hanken Grotesk" -- é a mesma fonte, só renomeada) é a família
     de apoio pra texto corrido definida no manual. Antes eu tinha
     chutado uma combinação genérica sem ver o manual -- agora bate com
     o que a Assembleia usa de verdade.  */
  --fonte-display: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonte-corpo: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonte-dado: "IBM Plex Mono", "Consolas", monospace;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Faixa verde na borda esquerda, de cima a baixo da tela, com uma linha
   dourada grossa tecendo por cima -- igual a referência que a Jovanna
   mandou (tela de carregamento com a silhueta inteira na lateral, não
   só um cantinho). Fica atrás de tudo (z-index -1): nas telas do app
   (dashboard etc.) a topbar+sidenav (opacas, >= 216px) cobrem essa
   faixa por inteiro, então ela só aparece de fato nas telas sem layout
   próprio -- carregamento e login. */
.fundo-decorativo {
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}
.fundo-decorativo-verde {
  fill: var(--verde-700);
  opacity: 0.9;
}
.fundo-decorativo-linha {
  fill: none;
  stroke: var(--dourado);
  stroke-width: 5;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .fundo-decorativo { width: 110px; }
}

/* Faixa dourada/verde no rodapé da tela -- referência que a Jovanna
   mandou. Diferente de .fundo-decorativo (só aparece no login, escondido
   atrás da topbar/sidenav nas telas do app): essa fica por CIMA do
   conteúdo de propósito, é só uma lâmina fininha (40px de um viewBox que
   estica pra cobrir a largura toda) que sobra na beirada de baixo da
   tela -- não cobre nenhum botão/formulário de verdade, então não
   precisa ficar escondida como a silhueta do Ceará fica. */
.rodape-decor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 14px;
  z-index: 50;
  pointer-events: none;
}
.rodape-decor-verde { fill: var(--verde-900); }
.rodape-decor-dourado { fill: none; stroke: var(--dourado); stroke-width: 3; }

h1, h2, h3 {
  font-family: var(--fonte-display);
  color: var(--verde-900);
  font-weight: 700; /* Lato não tem peso 600 de verdade (só 400/700/900) */
  margin: 0;
  letter-spacing: -0.01em;
}
h2 { font-size: 21px; }
h3 { font-size: 16.5px; }

p { margin: 0 0 var(--sp-3); }
.muted { color: var(--texto-suave); font-size: 14px; }

a { color: var(--verde-700); }

button { font-family: inherit; cursor: pointer; }

input, select, textarea {
  font-family: var(--fonte-corpo);
  font-size: 14px;
}

::selection { background: var(--dourado-tint); color: var(--verde-900); }

/* focus visível — acessibilidade */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, .tab:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--verde-700);
  outline-offset: 2px;
}

/*Tela de Login*/

.auth-overlay {
  position: fixed;
  inset: 0;
  /* Cor sólida (sem gradiente nem "brilho" atrás) -- o próprio manual de
     marca da ALECE é explícito sobre isso ("cores sólidas, nunca
     gradiente"), e um fundo com anéis de luz/gradiente diagonal é
     exatamente a cara de tela de login genérica de SaaS feita por IA,
     bem diferente do visual mais sóbrio que um site oficial de governo
     costuma ter. A silhueta do Ceará (::before abaixo) já dá o respiro
     visual sem precisar de gradiente nenhum. */
  background: var(--verde-900);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--sp-4);
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.35s ease;
}
/* Esmaece o login ao entrar, em vez de sumir na hora (ver app.js,
   transicaoParaApp). */
.auth-overlay.saindo {
  opacity: 0;
  pointer-events: none;
}

#appRoot {
  opacity: 1;
  transition: opacity 0.35s ease;
}
#appRoot.entrando {
  opacity: 0;
}

#telaCarregando {
  opacity: 1;
  transition: opacity 0.35s ease;
}
#telaCarregando.saindo {
  opacity: 0;
  pointer-events: none;
}

/* Silhueta do Ceará no fundo -- bem sutil, só textura/identidade visual
   (a Jovanna pediu; combina com o manual de marca da ALECE, que usa o
   contorno do mapa do estado em destaque nos materiais oficiais). */
.auth-overlay::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4%;
  width: min(65vw, 620px);
  aspect-ratio: 500 / 610;
  background: url("assets/ceara-silhueta.svg") no-repeat center / contain;
  opacity: 0.13;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Na tela estreita, o card ocupa quase toda a altura -- uma silhueta
   grande e cortada no topo ficava esquisita, sem dar pra reconhecer a
   forma. Em vez disso, uma silhueta pequena e INTEIRA (sem cortar, sem
   girar) no respiro que sobra acima do card. */
@media (max-width: 560px) {
  .auth-overlay::before {
    top: var(--sp-4);
    right: 50%;
    width: 140px;
    opacity: 0.12;
    transform: translateX(50%) rotate(0deg);
  }
}

.auth-overlay[hidden] {
  display: none;
}
.auth-card {
  position: relative;
  z-index: 1;
  background: var(--superficie);
  width: 100%;
  max-width: 460px;
  padding: calc(var(--sp-6) + 4px) var(--sp-5) 0;
  border-radius: var(--raio); /* era 16px fixo -- mesmo motivo do --raio acima */
  box-shadow: var(--sombra-elevada);
  overflow: hidden;
}
/* Barra dourada do topo com um brilho suave no meio, em vez de cor
   sólida -- fica mais parecida com a referência que a Jovanna mandou. */
.auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dourado) 0%, #F0DDA8 50%, var(--dourado) 100%);
}

.auth-card h2 {
  margin-bottom: var(--sp-4);
  text-align: center;
  font-size: 17px;
  color: var(--verde-900);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--sp-4);
}
.auth-brand img {
  height: 64px;
  width: auto;
  margin-bottom: var(--sp-2);
}
.auth-brand-name {
  font-family: var(--fonte-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--verde-900);
}
.auth-brand-subtitulo {
  font-family: var(--fonte-corpo);
  font-size: 13px;
  color: var(--texto-suave);
  margin-top: 1px;
}
.auth-brand-org {
  font-family: var(--fonte-corpo);
  font-size: 10px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-top: var(--sp-2);
  position: relative;
  padding-top: var(--sp-3);
}
/* Linha dourada curta separando o bloco de marca do formulário. */
.auth-brand-org::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--dourado);
}

.auth-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
}

.auth-campo {
  position: relative;
  margin-top: var(--sp-1);
}
.auth-card input {
  display: block;
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 14px;
  color: var(--texto);
  background: var(--verde-50);
}
.auth-card input:focus { border-color: var(--verde-700); background: var(--superficie); }
.auth-campo-icone {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  opacity: 0.7;
  pointer-events: none;
  display: flex;
}
.auth-campo-icone svg { width: 15px; height: 15px; display: block; }
.auth-campo-olho {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--texto-suave);
  opacity: 0.7;
  display: flex;
  line-height: 1;
}
.auth-campo-olho svg { width: 16px; height: 16px; display: block; }
.auth-campo-olho:hover { opacity: 1; }
.auth-campo-olho.ativo { opacity: 1; color: var(--verde-700); }
.auth-campo input#authSenha { padding-right: 34px; }

.auth-esqueci {
  display: block;
  margin: -6px 0 var(--sp-4);
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--verde-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-esqueci:hover { color: var(--verde-900); }

/* Faixa de rodapé dentro do próprio card -- var(--sp-5)/6 negativos
   cancelam o padding do .auth-card pra faixa encostar nas bordas e
   ganhar o mesmo raio arredondado de baixo. */
.auth-card-footer {
  margin: var(--sp-5) calc(-1 * var(--sp-5)) 0;
  padding: var(--sp-3) var(--sp-5);
  background: var(--verde-50);
  border-top: 1px solid var(--borda);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auth-card-footer strong {
  font-size: 12px;
  color: var(--verde-900);
}
.auth-card-footer span {
  font-size: 11px;
  color: var(--texto-suave);
}

/* Seta no botão de entrar via CSS (não como texto) pra não se perder
   toda vez que o app.js reescreve o textContent do botão (estado de
   carregando, reset ao deslogar, etc.). */
#btnAuthEntrar::after { content: " →"; }
#btnAuthEntrar:disabled::after { content: ""; }

/* Modal de confirmação -- substitui o window.confirm() feio do navegador
   no fluxo de subir planilha (a Jovanna pediu pra ter a cara do sistema). */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 38, 61, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
  padding: var(--sp-4);
}
.modal-overlay[hidden] { display: none; }

.modal-confirm-card {
  background: var(--superficie);
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--sp-5);
  border-radius: var(--raio);
  box-shadow: var(--sombra-elevada);
  border-top: 3px solid var(--dourado);
}
.modal-confirm-card.perigo { border-top-color: var(--vermelho); }

.modal-confirm-card h2 {
  font-size: 18px;
  margin-bottom: var(--sp-3);
  color: var(--texto);
}

.modal-confirm-corpo {
  font-size: 14px;
  color: var(--texto-suave);
  line-height: 1.5;
}
.modal-confirm-corpo p { margin: 0 0 var(--sp-3); }
.modal-confirm-corpo p:last-child { margin-bottom: 0; }
.modal-confirm-corpo ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }
.modal-confirm-corpo li { margin-bottom: 4px; }
.modal-confirm-corpo strong { color: var(--texto); }
.modal-confirm-aviso {
  background: var(--dourado-tint);
  border-left: 3px solid var(--dourado);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raio-pequeno);
  font-size: 13px;
  margin: var(--sp-3) 0 0;
}
.modal-confirm-card.perigo .modal-confirm-aviso {
  background: var(--estado-erro-fundo);
  border-left-color: var(--estado-erro-faixa);
  color: var(--estado-erro-texto);
}

/* Campo de texto dentro do modal, usado por promptModal() (substitui o
   window.prompt() feio do navegador). */
.modal-prompt-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-1);
}
.modal-confirm-corpo input, .modal-confirm-corpo select {
  display: block;
  width: 100%;
}

.modal-confirm-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* Topbar */
.topbar {
  background: var(--verde-900);
  border-bottom: 3px solid var(--dourado);
  position: sticky;
  top: 0;
  z-index: 101;
}

.topbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
  gap: var(--sp-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
/* Logo oficial completo (brasão + "ALECE" + texto por extenso), um
   único arquivo já pronto pra fundo escuro -- recortado da peça que a
   Jovanna mandou (ver assets/alece-logo-completo.png). Antes disso era
   um <img> do brasão sozinho + duas linhas de texto montadas na mão;
   ela pediu pra trocar pelo logo "que já tem tudo". */
.brand-logo-completo {
  height: 56px;
  width: auto;
  flex-shrink: 0;
}
.brand-separador {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--fonte-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.tabs {
  display: flex;
  gap: var(--sp-1);
}

.tab {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.68);
  padding: 14px 20px;
  font-size: 16.5px;
  font-weight: 600;
  border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}
.tab:hover { color: #fff; background: rgba(255,255,255,0.06); }
.tab.active { color: #fff; }
.tab.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -3px;
  height: 3px;
  background: var(--dourado);
  border-radius: 2px 2px 0 0;
}
.tab-icon { margin-right: 7px; opacity: 0.85; display: inline-flex; vertical-align: -4px; }
.tab-icon svg { width: 19px; height: 19px; display: block; }

.topbar-acoes {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Selo dos 190 anos da ALECE (assets/alece-190anos.png) -- pedido da
   Jovanna, fica entre as abas e o menu de conta. */
.topbar-selo190 {
  height: 30px;
  width: auto;
  flex-shrink: 0;
  margin: 0 var(--sp-2);
}
@media (max-width: 900px) {
  .topbar-selo190 { display: none; }
}

/* Avatar/conta na topbar -- classe própria (não .menu-linha) pra não
   herdar o reposicionamento mobile pensado pra linha de tabela, ver
   .info-popover nos feriados nacionais pelo mesmo motivo. */
.topbar-conta { position: relative; display: inline-flex; }
.topbar-conta summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px 3px 3px;
  border-radius: 999px;
}
.topbar-conta summary::-webkit-details-marker { display: none; }
.topbar-conta summary:hover { background: rgba(255,255,255,0.1); }
.topbar-conta-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.topbar-conta-avatar svg { width: 19px; height: 19px; display: block; }
.topbar-conta-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topbar-conta-nome {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-conta-seta {
  color: rgba(255,255,255,0.65);
  font-size: 15px;
  line-height: 1;
}
.topbar-conta-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra-elevada);
  min-width: 160px;
  z-index: 150;
  padding: 4px;
}
.topbar-conta-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: var(--raio-pequeno);
  font-size: 13px;
  color: var(--texto);
  cursor: pointer;
}
.topbar-conta-menu button:hover { background: var(--verde-50); }
.topbar-conta-menu-perigo { color: var(--vermelho-texto) !important; }
.topbar-conta-menu-perigo:hover { background: var(--vermelho-fundo) !important; }

/* Faixa de alerta (usada tb como aviso inline dentro de card/seção --
   ver .alert-toast-stack logo abaixo pros avisos flutuantes no topo) */
.alert-banner {
  background: var(--estado-erro-fundo);
  border-bottom: 1px solid var(--estado-erro-faixa);
  color: var(--estado-erro-texto);
  padding: 10px var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13.5px;
  font-weight: 500;
}
.alert-banner-icon { font-size: 15px; }
.alert-banner-text { flex: 1; }
.alert-banner-close {
  background: none;
  border: none;
  color: var(--estado-erro-texto);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--raio-pequeno);
  opacity: 0.7;
}
.alert-banner-close:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* Avisos globais (atrasados, aguardando agendamento etc.) -- cartõezinhos
   flutuantes no canto da tela, sobrepostos ao conteúdo, em vez de uma
   faixa de largura total que empurra o resto da página pra baixo. Só os
   avisos DENTRO de .alert-toast-stack viram cartão; os outros usos de
   .alert-banner (avisos dentro de uma tela específica, como o de
   "adicionar prédio novo" no Cronograma) continuam como faixa normal. */
.alert-toast-stack {
  position: fixed;
  /* [QA-FIX revisão independente] Era "top: calc(--altura-topbar + 12px)",
     ou seja, logo abaixo da topbar, no canto superior direito -- MESMO
     canto onde várias telas colocam seus próprios botões de ação no
     cabeçalho do card (ex: "Excluir planta" em Localização, "Cadastrar
     equipamento" em Equipamentos). Isso não era só sobreposição visual:
     o cartão do aviso, por estar por cima, interceptava de verdade o
     clique nesses botões enquanto algum aviso estivesse visível,
     mesmo em telas grandes (1920px). Virou canto inferior direito, bem
     mais distante de onde o resto da tela coloca botões de ação -- o
     aviso continua visível e flutuante, só não compete mais pelo mesmo
     canto que os cabeçalhos de card usam. */
  bottom: 20px;
  right: 20px;
  z-index: 150; /* acima da .topbar (101), senão ela cobre o aviso */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 32px);
  /* [QA-FIX revisão independente] O próprio container (não só os
     cartões dentro dele, ver .alert-toast-stack .alert-banner abaixo)
     tem uma caixa de 340px de largura por toda a altura dos avisos +
     os "vãos" (gap) entre eles -- sem isso, mesmo o espaço VAZIO entre
     dois cartões continuava interceptando clique em qualquer coisa
     embaixo. Os controles reais (fechar, "Reagendar agora", itens da
     lista de agendamento) recebem "auto" de volta explicitamente logo
     abaixo e continuam clicáveis normalmente. */
  pointer-events: none;
}
.alert-toast-stack .alert-banner {
  /* Vermelho/dourado próprios do toast, DIFERENTES de --vermelho-fundo/
     --vermelho-texto (que ficam reservados pro resto do app, pra bater
     com as cores do Excel exportado -- ver comentário em :root). Tom
     salmão/pastel antigo (#F8CBAD) tinha pouco contraste com o texto;
     esses valores seguem o padrão comum de alerta (fundo quase branco,
     texto escuro, faixa saturada) pedido pela Jovanna. */
  --toast-bg: #FEF2F2;
  --toast-cor: #991B1B;
  --toast-faixa: #DC2626;
  background: var(--toast-bg);
  color: var(--toast-cor);
  border-bottom: none;
  border-left: 4px solid var(--toast-faixa);
  border-radius: var(--raio);
  /* Sem isso, a faixa dourada/vermelha da esquerda ultrapassa a
     cantoneira arredondada no topo/base do cartão (fica reta onde a
     borda já devia estar curvando). */
  overflow: hidden;
  box-shadow: var(--sombra-elevada);
  padding: 12px 14px;
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.alert-toast-stack .alert-banner-close { color: inherit; }
/* Ícone (sino) num círculo colorido, igual referência que a Jovanna
   mandou -- usa as mesmas cores do aviso (--toast-faixa/--toast-cor),
   então muda de cor sozinho conforme o aviso (dourado no "aguardando
   agendamento", vermelho no "atrasados" etc.) sem precisar repetir CSS
   por aviso. */
.alert-toast-stack .alert-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--toast-faixa) 25%, transparent);
  color: var(--toast-cor);
}
.alert-toast-stack .alert-banner-icon svg {
  width: 17px;
  height: 17px;
}
.alert-banner-linha {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.alert-banner-btn { align-self: stretch; }

/* [QA-FIX revisão independente] O cartão flutuante inteiro (dentro de
   .alert-toast-stack) sobrepõe conteúdo real da tela embaixo dele (ver
   comentário em .alert-toast-stack acima). Pointer-events:none no
   cartão inteiro, com "auto" de volta só nos controles que a pessoa de
   fato pode querer clicar (fechar o aviso, "Reagendar agora", os itens
   da lista de "aguardando agendamento"), faz o resto do cartão --
   ícone, texto, o preenchimento/vão entre eles -- deixar passar o
   clique pro que estiver por baixo, em vez de bloquear qualquer coisa
   num raio de ~340px de largura sempre que algum aviso estiver visível. */
.alert-toast-stack .alert-banner { pointer-events: none; }
.alert-toast-stack .alert-banner-close,
.alert-toast-stack .alert-banner-btn,
.alert-toast-stack #alertaAguardandoAgendamentoLista,
.alert-toast-stack #alertaAguardandoAgendamentoLista * {
  pointer-events: auto;
}

#alertaAguardandoAgendamentoLista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 640px) {
  .alert-toast-stack { right: 16px; left: 16px; width: auto; }
}

/* No celular, a barra de navegação de baixo (.sidenav) é fixa e tem
   z-index MAIOR que o toast -- com "bottom: 20px" sozinho, um aviso alto
   (ex: "Aguardando agendamento" com vários prédios, cada um com seu
   próprio botão "Agendar agora") ficava com a parte de baixo escondida
   atrás da barra, cortado antes da pessoa conseguir ver/clicar tudo.
   Sobe o aviso pra cima da barra (mesma altura reservada por
   .body-layout's padding-bottom) e limita a altura dele, com rolagem
   própria, pro aviso nunca ultrapassar o topo da tela também. */
@media (max-width: 768px) {
  .alert-toast-stack {
    bottom: 92px;
    max-height: calc(100vh - 92px - var(--altura-topbar, 96px) - 20px);
    overflow-y: auto;
  }
}

/* Layout geral: sidenav + conteúdo */
.body-layout {
  display: flex;
  width: 100%;
  margin: 0;
  min-height: calc(100vh - 103px); /* 100px da topbar + 3px da borda dourada */
  align-items: flex-start;
}

.sidenav {
  width: 216px;
  flex-shrink: 0;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  padding: var(--sp-5) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 103px; /* 100px da topbar + 3px da borda dourada */
  height: calc(100vh - 103px);
  overflow-y: auto;
}

/* Cada grupo (Gestão/Inventário/Configuração) é um <details> -- só
   mostra os itens de dentro quando a pessoa clica no rótulo (<summary>),
   pedido da Jovanna pra encolher o menu lateral. Nativo do navegador
   (sem JS nenhum pra abrir/fechar); o único JS envolvido é abrir sozinho
   o grupo certo quando a view ativa é trocada (ver abrirGrupoDaViewAtiva
   em app.js), senão a tela ativa podia ficar escondida dentro de um
   grupo fechado sem nenhuma pista visual do motivo. */
.sidenav-grupo { display: flex; flex-direction: column; gap: 3px; }
.sidenav-grupo-itens { display: flex; flex-direction: column; gap: 3px; }

.sidenav-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 var(--sp-3);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.sidenav-label::-webkit-details-marker { display: none; }
.sidenav-label:hover { color: var(--verde-900); }
.sidenav-label::after {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.sidenav-grupo[open] > .sidenav-label::after { transform: rotate(45deg); }

.sidenav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--raio-pequeno);
  padding: 12px var(--sp-3);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--texto);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.sidenav-item:hover { background: var(--verde-50); }
.sidenav-item.active {
  background: var(--fundo);
  color: var(--verde-900);
  font-weight: 600;
  border-left-color: var(--verde-900);
}

/* Atalho de Calendário/Dashboard só existe pro trabalhador na barra
   inferior do mobile (ver media query) — em qualquer outra situação
   (desktop, ou outro papel de usuário) fica escondido, já que essas telas
   já estão acessíveis pelas abas de cima. */
.sidenav-atalho-trabalhador { display: none; }

/* Ícone de verdade (SVG inline, mesmo padrão do .tab-icon da topbar) --
   antes disso era um "display:none" só com uma bolinha decorativa no
   celular; no desktop não tinha ícone nenhum. "currentColor" no stroke
   do SVG faz o ícone seguir a cor do texto sozinho (cinza no normal,
   verde-900 no item ativo, igual a cor do próprio rótulo) -- sem
   precisar de uma regra extra pro estado ativo. */
.sidenav-icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.8;
}
.sidenav-icon svg { width: 18px; height: 18px; display: block; }
.sidenav-item.active .sidenav-icon { opacity: 1; }

.sidenav-spacer { flex: 1; }
/* Silhueta real do prédio da ALECE (assets/alece-predio-silhueta.png,
   imagem enviada pela Jovanna) -- z-index negativo pra ficar ATRÁS dos
   itens do menu (que não têm fundo sólido, então ela aparece por trás
   do texto/ícone normalmente), cobrindo o .sidenav INTEIRO, não só o
   espaço vazio embaixo. Antes ficava só dentro do .sidenav-spacer, com
   uma borda reta visível onde ela começava -- parecia uma "caixa"
   colada ali embaixo, em vez de uma marca d'água contínua por trás de
   tudo (pedido da Jovanna). */
/* Wrapper que fica EXATAMENTE dentro da caixa do .sidenav (sem sangrar) --
   um elemento absoluto que sangra pra fora do pai conta como "overflow"
   dele mesmo quando o filho tem overflow:hidden, e como .sidenav tem
   overflow-y:auto, isso criava uma barra de rolagem vazia (só por causa
   da imagem, sem ter nada de verdade pra rolar). Em vez da imagem sangrar
   direto, ela sangra só DENTRO desse wrapper (que corta com
   overflow:hidden, sem nunca ultrapassar o .sidenav). */
.sidenav-decor-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sidenav-decor {
  position: absolute;
  left: -22px;
  bottom: -35px;
  width: 340px;
  height: auto;
  opacity: 0.12;
}
@media (max-width: 768px) {
  .sidenav-decor { display: none; }
}


.sidenav-danger { color: var(--vermelho-texto); }
.sidenav-danger:hover { background: var(--vermelho-fundo); }
.sidenav-danger .sidenav-icon { background: var(--vermelho); }

.page {
  flex: 1;
  min-width: 0;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);

}

.view { display: none; flex-direction: column; gap: var(--sp-4); }
.view.active { display: flex; }

/* Cards */
.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-5);
  box-shadow: var(--sombra);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.card-head h2 { margin: 0; }

/* Cabeçalho do Histórico: título + descrição à esquerda, contagem à
   direita -- em vez do "N registros" solto perto do título, agora ele
   dá mais contexto de cabeçalho de sistema (o que essa tela é), não só
   de mockup gerado por IA. */
.card-head-historico {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.card-head-historico h2 { margin: 0 0 4px; }
.card-head-historico p { margin: 0; max-width: 480px; }

/* Badge do tipo de evento na tabela de Histórico (Cadastro/Reagendamento/
   Excluído/Preventiva) -- reaproveita as MESMAS cores já usadas nos
   pills de status (.status-select) em vez de inventar uma paleta nova,
   pra continuar parecendo um único sistema. */
.hist-evento {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.hist-evento.hist-cadastro { background: var(--verde-100); color: var(--verde-800); }
.hist-evento.hist-reagendamento { background: var(--estado-alerta-fundo); color: var(--estado-alerta-texto); }
.hist-evento.hist-excluido { background: var(--estado-erro-fundo); color: var(--estado-erro-texto); }
.hist-evento.hist-preventiva { background: var(--fundo); color: var(--texto-suave); border: 1px solid var(--borda); }
.hist-evento.hist-correcao { background: var(--dourado-tint); color: var(--dourado-escuro); }

/* Data/hora do Histórico em duas linhas (data em destaque, hora
   discreta embaixo) -- ocupa menos largura que "22/09/2026, 08:23:05"
   numa linha só e dá mais peso à informação que importa primeiro. */
.hist-data-principal { font-weight: 600; }

/* Card "Agenda dos plenários" no Dashboard (ver carregarAgendaPlenarios
   em app.js) -- mesma lógica visual do .hist-evento acima (quando +
   o quê), mas em lista vertical em vez de pílula, porque o título do
   evento pode ser longo. */
.agenda-plenario-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--borda);
}
.agenda-plenario-item:last-child { border-bottom: none; }
.agenda-plenario-clicavel { cursor: pointer; }
.agenda-plenario-clicavel:hover { background: var(--verde-50); }
.agenda-plenario-quando {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
}
.agenda-plenario-titulo { font-size: 14px; }

/* Ícone pequeno antes de um título/texto (ver tela Eventos) -- mesmo
   tamanho/traço dos ícones do menu lateral, pra manter o padrão visual. */
.titulo-com-icone { display: inline-flex; align-items: center; gap: 6px; }
.titulo-com-icone svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--verde-700); }
h2.titulo-com-icone svg { width: 18px; height: 18px; }
.hist-data-hora { font-size: 11.5px; color: var(--texto-fraco); }

/* Junta as colunas "De" e "Para" numa só com uma seta -- tanto pra
   datas de reagendamento quanto pros pills de status. */
.hist-alteracao { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hist-alteracao .hist-seta { color: var(--texto-fraco); font-weight: 700; }

.card > h2 { margin-bottom: var(--sp-2); }

/* Mesma silhueta discreta da tela de login (identidade visual da
   ALECE) -- pediram uma foto de fundo pra esse card, mas achamos que
   uma foto de banco de imagens ia destoar; isso combina com o resto
   do sistema e já é um elemento aprovado. Opacidade bem mais baixa que
   no login (0.06 vs 0.13) porque aqui tem campo de formulário em
   cima, que precisa continuar fácil de ler. */
.card-com-silhueta { position: relative; overflow: hidden; }
.card-com-silhueta::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 220px;
  aspect-ratio: 500 / 610;
  background: url("assets/ceara-silhueta.svg") no-repeat center / contain;
  opacity: 0.06;
  transform: translateY(-50%);
  pointer-events: none;
}
.card-com-silhueta > * { position: relative; }
.card > h2 + .muted { margin-bottom: var(--sp-4); }

.pill {
  background: var(--verde-100);
  color: var(--verde-800);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Pill fica na cor de "atrasado" (mesma dos badges do calendário) quando
   tem pelo menos um item vencido no meio dos de hoje -- chama mais
   atenção do que o azul neutro de sempre. */
.pill.pill-atrasado { background: var(--verde-900); color: #fff; }

/* Card "O que fazer hoje" (só pro trabalhador, no topo do Dashboard) --
   a faixa dourada no topo é a mesma linguagem visual usada nos modais
   (confirmarModal/promptModal), pra destacar como o card mais
   importante da tela sem precisar de ícone ou emoji. */
.card-hoje { border-top: 3px solid var(--dourado); }

/* Tag de nome de coluna (ex: nos requisitos do upload de planilha) --
   neutra e discreta, diferente do .pill azul (que é usado pra contagens
   e status). */
.tag-coluna {
  display: inline-block;
  background: var(--fundo);
  color: var(--texto-suave);
  font-family: var(--fonte-dado);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--borda);
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn.primary {
  background: var(--verde-700);
  color: #fff;
}
.btn.primary:hover:not(:disabled) { background: var(--verde-600); }

.btn.secondary {
  background: var(--verde-100);
  color: var(--verde-800);
}
.btn.secondary:hover:not(:disabled) { background: #E1EAF3; }

.btn.ghost {
  background: transparent;
  border-color: var(--borda-forte);
  color: var(--texto);
}
.btn.ghost:hover:not(:disabled) { background: var(--verde-50); border-color: var(--verde-600); }

.btn.danger-inverted {
  background: transparent;
  border-color: var(--vermelho);
  color: var(--vermelho-texto);
}
.btn.danger-inverted:hover { background: var(--vermelho-fundo); }

.btn-icon {
  background: none;
  border: none;
  color: var(--texto-suave);
  font-size: 14px;
  padding: 4px 8px;
  border-radius: var(--raio-pequeno);
}
.btn-icon:hover { background: rgba(0,0,0,0.06); color: var(--texto); }

.btn-menu {
  background: none;
  border: 1px solid transparent;
  color: var(--texto-suave);
  font-size: 16px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--raio-pequeno);
}
.btn-menu:hover { background: var(--verde-50); border-color: var(--borda); }

/* Formulários */
.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}

.grid-form label,
.card label:not(.dropzone) {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Junto de botões (ex: seletor de planta ao lado de "+ Nova planta" /
   "Excluir esta planta") -- mesma altura/padding dos botões vizinhos,
   senão o select (regra padrão logo abaixo, pensada pra formulário
   empilhado) fica com um tamanho bem diferente e "torto" do lado deles. */
.plantaSeletor-compacto {
  width: auto !important;
  margin-top: 0 !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
}

.grid-form input, .grid-form select,
.card input[type="text"], .card input[type="date"],
.card input[type="number"], .card input[type="password"], .card select {
  display: block;
  width: 100%;
  margin-top: var(--sp-1);
  padding: 9px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: normal;
}
.grid-form input:focus, .card input:focus, .card select:focus {
  border-color: var(--verde-700);
}

.search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--verde-50);
  color: var(--texto);
  margin-bottom: var(--sp-3);
}
.search-input:focus { background: var(--superficie); border-color: var(--verde-700); }

.tooltip-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  margin-left: 6px;
  font-size: 11px;
  font-weight: bold;
  color: white;
  background: var(--verde-700);
  border-radius: 50%;
  cursor: help;
  vertical-align: super;
  position: relative;
}

.tooltip-icon:hover {
  background: var(--verde-600);
}

.filtros-equipamentos {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 8px;
  margin-bottom: var(--sp-3);
  background: var(--verde-50); 
  padding: 8px;
  border-radius: var(--raio-pequeno);
}

.filtros-equipamentos select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: #fff;
  cursor: pointer;
  color: var(--texto-suave);
  width: 100%;
}

/* --- DROPZONE (UPLOAD DE PLANILHA) --- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 210px;
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.01);
}

/* Ícone de nuvem/arquivo antes do texto */
.dropzone::before {
  content: "📁";
  font-size: 32px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.dropzone .btn { margin-top: 2px; }

/* Escolher-arquivo simples (sem dropzone/arrastar) -- usado em Foto do
   equipamento e Enviar planta -- pra não depender do botão nativo do
   navegador ("Choose File"), que destoa do resto do visual. */
.file-picker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.file-picker-nome {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--texto-suave);
}

.dropzone:hover { 
  border-color: var(--verde-600); 
  background: var(--verde-50);
}
.dropzone:hover::before {
  transform: translateY(-4px); /* O ícone dá um pulinho no hover */
}

.dropzone.dragover { 
  border-color: var(--dourado); 
  background: var(--dourado-tint); 
  color: var(--dourado-escuro); 
}

/* Capacidade por prédio */
.capacidade-linha {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--borda);
}
.capacidade-linha:last-child { border-bottom: none; }
.capacidade-nome { font-weight: 600; font-size: 13.5px; color: var(--verde-800); }
.capacidade-linha label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  font-weight: 600;
}
.capacidade-linha input {
  width: 64px;
  padding: 7px 8px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font-family: var(--fonte-dado);
  text-align: center;
}

/* Tabelas */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* Pisca a linha de uma data recém-adicionada (ex: "Adicionar feriados
   nacionais") pra ficar óbvio que ela entrou na lista, já que a tabela é
   ordenada por data e a linha nova pode cair no meio de muitas outras,
   longe de onde a pessoa clicou. Some sozinha (animation-fill-mode:
   forwards) sem precisar de JS pra tirar a classe depois. */
@keyframes destacarLinha {
  0% { background-color: #fff3b0; }
  100% { background-color: transparent; }
}
.linha-destaque {
  animation: destacarLinha 2.5s ease-out forwards;
}

table thead th {
  background: var(--verde-100);
  color: var(--verde-800);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 var(--borda);
}

table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  vertical-align: middle;
}

table tbody tr:last-child td { border-bottom: none; }
table tbody tr:hover td { background: var(--verde-50); }

table tbody td:first-child { font-family: var(--fonte-dado); }

/* Texto longo (ex: nome de setor) quebrando em várias linhas fazia cada
   linha da tabela de desktop ter uma altura diferente, "serrilhada" --
   trunca numa linha só com "..." e mostra o texto inteiro no title
   (tooltip nativo do navegador ao passar o mouse). Só no desktop: no
   celular essa mesma tabela vira cards empilhados (.tabela-cards-mobile,
   ver media query), onde não tem problema de altura e cortar o texto
   tiraria informação sem necessidade. */
.td-truncado {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}

/* Status (pills / selects) — cores herdadas do Excel exportado */
.status-select {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  appearance: none;
  cursor: pointer;
}
.status-select.pendente { background: var(--estado-erro-fundo); color: var(--estado-erro-texto); }
.status-select.andamento { background: var(--estado-alerta-fundo); color: var(--estado-alerta-texto); }
.status-select.concluido { background: var(--verde-fundo); color: var(--verde-texto); }
/* Literal (não a variável de marca) de propósito -- "concluido" já é
   verde, "atrasado" precisa continuar visualmente diferente dele (ver
   mesmo raciocínio em CORES_STATUS_MARCADOR no app.js). */
.status-select.aguardando { background: var(--dourado-tint); color: var(--dourado-escuro); }
.status-select.atrasado { background: #10263D; color: #fff; }

/* Filtro por prédio (pills) */
.local-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
}
/* Caixa de data (De/até) e botão "Limpar período" com a mesma altura em
   todo filtro por período (Gerar OS, Equipe de campo etc.) -- antes cada
   um tinha seu próprio padding/fonte e ficavam desalinhados lado a lado. */
.local-filtro input[type="date"] {
  padding: 8px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 13.5px;
  background: var(--superficie);
  color: var(--texto);
}
.local-filtro .btn {
  padding: 8px 14px;
}
.local-pill {
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  color: var(--texto-suave);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.12s ease;
}
.local-pill:hover { border-color: var(--verde-600); color: var(--verde-700); }
.local-pill.active {
  background: var(--verde-800);
  border-color: var(--verde-800);
  color: #fff;
}

/* Calendário */
.calendar-nav { display: flex; align-items: center; gap: var(--sp-3); }
.calendar-nav .btn { padding: 6px 14px; }
.calendar-nav h2 { font-size: 17px; min-width: 190px; text-align: center; }

/* Seletor Mês/Semana/Dia */
.calendar-modo {
  display: flex;
  background: var(--verde-50);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.btn-modo {
  background: none;
  border: none;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-modo:hover { color: var(--verde-900); }
.btn-modo.active { background: var(--verde-900); color: #fff; }

.cal-grid-semana .cal-day { min-height: 150px; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  overflow: hidden;
  margin-top: var(--sp-3);
}

.cal-dow {
  background: var(--verde-900);
  color: rgba(255,255,255,0.75);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 8px 0;
}

.cal-day {
  background: var(--superficie);
  min-height: 92px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cal-day:hover { background: var(--verde-50); }
.cal-day.empty { background: var(--fundo); cursor: default; }
.cal-day.selected { background: var(--verde-100); box-shadow: inset 0 0 0 2px var(--verde-700); }
.cal-day.is-holiday { background: var(--dourado-tint); }
.cal-day.is-gap { box-shadow: inset 0 0 0 2px var(--vermelho); }
/* Marca "hoje" na tela Eventos -- só destaca o número do dia, pra não
   se confundir com .is-holiday (fundo dourado, é feriado de verdade)
   nem com .selected (fundo verde, é o dia clicado). */
.cal-day.is-today .cal-day-num { color: var(--verde-700); text-decoration: underline; text-underline-offset: 3px; }

.cal-day-num {
  font-family: var(--fonte-dado);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
}

/* Envolve os badges do dia -- "contents" no desktop não muda nada no
   layout de hoje (os badges continuam filhos "diretos" pro CSS abaixo);
   no celular (ver media query) isso vira uma fileira de bolinhas. */
.cal-day-badges { display: contents; }

.cal-day-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: filter 0.12s ease;
}
.cal-day-badge:hover { filter: brightness(0.96); }
.cal-day-badge .badge-predio {
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-day-badge .badge-contagem {
  margin-left: auto;
  opacity: 0.75;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-day-badge.badge-empilhado {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.badge-maquina-linha {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.cal-day-badge.pendente { background: var(--estado-erro-fundo); color: var(--estado-erro-texto); }
.cal-day-badge.andamento { background: var(--estado-alerta-fundo); color: var(--estado-alerta-texto); }
.cal-day-badge.concluido { background: var(--verde-fundo); color: var(--verde-texto); }
.cal-day-badge.atrasado { background: #10263D; color: #fff; } /* literal de propósito, ver .status-select.atrasado */
.cal-day-badge.holiday { background: var(--dourado); color: var(--verde-900); } /* branco em cima do dourado tem contraste ruim (~2.4:1) */
.cal-day-badge.gap { background: var(--estado-erro-fundo); color: var(--estado-erro-texto); border: 1px dashed var(--estado-erro-faixa); cursor: default; }
.cal-day-badge.evento { background: var(--verde-fundo); color: var(--verde-texto); }

.cal-badge-tooltip {
  position: fixed;
  z-index: 250;
  background: var(--verde-900);
  color: #fff;
  padding: 8px 10px;
  border-radius: var(--raio-pequeno);
  font-size: 11.5px;
  line-height: 1.5;
  box-shadow: var(--sombra-elevada);
  max-width: 220px;
  pointer-events: none;
}
.cal-badge-tooltip strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dourado);
  margin-bottom: 4px;
}
.cal-badge-tooltip-mais { opacity: 0.7; margin-top: 2px; }

/* Opcional: Efeito hover */
.cal-day-badge.atrasado:hover {
  background: #FEE2E2;
}
.cal-day-badge.holiday { background: var(--dourado); color: var(--verde-900); } /* branco em cima do dourado tem contraste ruim (~2.4:1) */

/* Dashboard / KPIs */
.ciclo-resumo {
  background: var(--verde-900);
  color: #fff;
  border-radius: var(--raio);
  padding: var(--sp-4) var(--sp-5);
  font-size: 14px;
  border-left: 4px solid var(--dourado);
}
.ciclo-resumo strong { font-family: var(--fonte-display); font-size: 16px; }
.ciclo-barra {
  margin-top: var(--sp-2);
  height: 8px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  overflow: hidden;
}
.ciclo-barra span {
  display: block;
  height: 100%;
  background: var(--dourado);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}

.kpi-card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-5);
  box-shadow: var(--sombra);
  border-top: 4px solid var(--borda-forte); /* Aumentei um pouco a borda superior */
  
  /* Centralização Flexbox */
  display: flex;
  flex-direction: column;
  align-items: center;      /* Centraliza horizontalmente */
  justify-content: center;  /* Centraliza verticalmente */
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi-card .num {
  font-family: var(--fonte-display);
  font-size: 34px;       /* 5 números do mesmo tamanho competiam entre
    si -- "Execução" (o que resume o ciclo inteiro) fica maior que os
    outros 4, ver .kpi-card.execucao .num logo abaixo. */
  font-weight: 700;      /* Um pouco mais pesado */
  color: var(--verde-900);
  line-height: 1;
  margin-bottom: 8px;    /* Espaço entre número e rótulo */
}
.kpi-card .label {
  font-size: 14px;       /* Aumentado de 12px para 14px */
  color: var(--texto-suave);
  font-weight: 600;      /* Um pouco mais legível */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* "Atrasados" é um RECORTE de dentro de "Pendentes" (não uma categoria
   separada que soma com ela) -- sem essa linha, "125 Pendentes" do lado
   de "18 atrasados" em outro canto da tela dava a entender que eram
   143 aparelhos parados, não 125 (ver auditoria, BUG-006). */
.kpi-card .sublabel {
  font-size: 11.5px;
  color: var(--texto-suave);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 4px;
}
.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-elevada);
}
.kpi-card.total { border-top-color: var(--verde-700); }
.kpi-card.concluido { border-top-color: var(--verde-fundo); }
.kpi-card.concluido .num { color: var(--verde-texto); }
.kpi-card.andamento { border-top-color: var(--estado-alerta-faixa); }
.kpi-card.andamento .num { color: var(--estado-alerta-texto); }
.kpi-card.pendente { border-top-color: var(--estado-erro-faixa); }
.kpi-card.pendente .num { color: var(--estado-erro-texto); }
.kpi-card.execucao { border-top-color: var(--dourado); }
.kpi-card.execucao .num { color: var(--dourado-escuro); }

/* "Execução" é o número que resume o ciclo inteiro (os outros 4 são
   contexto de apoio) -- destacar ele visualmente em vez dos 5 cartões
   competirem em pé de igualdade segue o padrão visto em dashboards
   institucionais pesquisados ("lead with one headline number, then the
   breakdown"). Cálculo continua idêntico, só o tamanho mudou. */
.kpi-card.execucao .num { font-size: 44px; }

.grafico-evolucao { width: 100%; height: auto; display: block; }
.legenda-grafico { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; font-size: 12.5px; color: var(--texto-suave); }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* --- ACORDEÕES (DASHBOARD E DRAWER) --- */
details.ciclos-discreto, details.drawer-secao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

details.ciclos-discreto[open], details.drawer-secao[open] {
  box-shadow: var(--sombra);
  border-color: var(--borda-forte);
}

details.ciclos-discreto summary, details.drawer-secao summary {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--verde-900);
  background: var(--verde-50);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background 0.15s ease;
}

details.ciclos-discreto summary:hover, details.drawer-secao summary:hover {
  background: #E8EEF4;
}

/* Esconde a seta nativa feia do navegador */
details.ciclos-discreto summary::-webkit-details-marker,
details.drawer-secao summary::-webkit-details-marker {
  display: none;
}

/* Cria uma seta animada customizada do lado direito */
details.ciclos-discreto summary::after, details.drawer-secao summary::after {
  content: "▾";
  font-size: 18px;
  color: var(--texto-suave);
  transition: transform 0.2s ease;
}

/* Gira a seta quando abre */
details.ciclos-discreto[open] summary::after, details.drawer-secao[open] summary::after {
  transform: rotate(180deg);
}

details.ciclos-discreto[open] summary, details.drawer-secao[open] summary {
  border-bottom-color: var(--borda);
  background: var(--superficie);
}

/* Barra de ação flutuante (seleção em massa) */
.action-bar-flutuante {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: var(--verde-900);
  color: #fff;
  border-radius: var(--raio-pequeno);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
  font-size: 13px;
}
.action-bar-flutuante.visivel { display: flex; }
.action-bar-esquerda { display: flex; align-items: center; gap: var(--sp-2); }
.action-bar-esquerda .btn-icon { color: rgba(255,255,255,0.8); }
.action-bar-esquerda .btn-icon:hover { background: rgba(255,255,255,0.12); color: #fff; }
.action-bar-direita .btn.danger-inverted {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.action-bar-direita .btn.danger-inverted:hover { background: rgba(255,255,255,0.12); }

/* Drawer (painel lateral de detalhes) */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 38, 61, 0.45);
  z-index: 1200;
}

.drawer {
  position: fixed;
  /* top/height (em vez de top:0+bottom:0) porque "--altura-visivel" é
     atualizada em JS a partir de window.visualViewport -- no celular,
     quando o teclado abre, a área realmente visível encolhe, e sem
     isso o rodapé do drawer (onde ficam os botões Continuar/Cancelar)
     ficava escondido atrás do teclado em vez de subir junto com ele.
     Ver ajustarDrawerParaTeclado() em app.js. */
  top: var(--topo-visivel, 0px);
  right: 0;
  height: var(--altura-visivel, 100vh);
  width: 420px;
  max-width: 92vw;
  background: var(--superficie);
  box-shadow: -8px 0 24px rgba(16,38,61,0.18);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  animation: entrar-drawer 0.2s ease;
}
@keyframes entrar-drawer {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--borda);
  border-top-color: var(--dourado);
  border-radius: 50%;
  animation: girar-spinner 0.8s linear infinite;
}
@keyframes girar-spinner {
  to { transform: rotate(360deg); }
}
/* Spinner claro, pra usar sobre fundo escuro (ver .tela-carregando) --
   a borda base precisa de algum contraste com o verde-900 por trás. */
.spinner-claro { border-color: rgba(255,255,255,0.25); border-top-color: var(--dourado); }

/* Tela de carregamento inicial (antes do app.js terminar de checar login
   e montar a interface) -- mesmo fundo sólido verde-900 da tela de login
   (.auth-overlay), pra não dar a impressão de "piscar" entre uma tela
   genérica e a tela de marca logo em seguida. */
.tela-carregando {
  position: fixed;
  inset: 0;
  background: var(--verde-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 250;
  /* A moldura do Ceará (ver .tela-carregando-ceara) bleeda de propósito
     pra fora da borda direita -- sem isso, aquele pedaço "sobrando"
     empurraria a largura da página e criaria uma barra de rolagem
     horizontal fantasma (mesmo problema do zoom, resolvido antes). */
  overflow: hidden;
}
.tela-carregando-logo { width: 220px; height: auto; }
.tela-carregando-texto { color: rgba(255,255,255,0.75); font-size: 14px; margin: 0; }
/* Moldura (contorno, não preenchido) do Ceará em dourado, grande, na
   lateral -- a Jovanna mandou um exemplo mostrando que queria só o
   TRAÇADO, não uma silhueta sólida, e não precisa caber inteira na tela
   -- de propósito "sangrando" (bleed) pra fora da borda direita, cortada
   pelo overflow:hidden do .tela-carregando. Mesmo path usado na marca
   d'água dos PDFs (SILHUETA_CEARA_PATH_D), só sem "fill". */
.tela-carregando-ceara {
  position: absolute;
  right: -14vh;
  top: 50%;
  transform: translateY(-50%);
  width: 58vh;
  height: 100vh;
  fill: none;
  stroke: var(--dourado);
  stroke-width: 2.5;
  stroke-linejoin: round;
  opacity: 0.9;
  pointer-events: none;
}
@media (max-width: 600px) {
  /* Na tela estreita do celular, "bem grande" do mesmo jeito cobria a
     logo/texto no meio -- ancora embaixo (em vez de centralizado na
     vertical) e um pouco menor, pra sobrar sem disputar espaço com o
     conteúdo central. */
  .tela-carregando-ceara {
    right: -4vh;
    top: auto;
    bottom: -20vh;
    transform: none;
    width: 42vh;
    height: 48vh;
    stroke-width: 2;
  }
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 3px solid var(--dourado);
  background: var(--verde-900);
  color: #fff;
}
.drawer-head h2 { color: #fff; font-size: 17px; }

.drawer-close {
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.drawer-close:hover { background: rgba(255,255,255,0.22); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
}
/* Empilha rótulo/campo dentro de drawers com <label> soltos (ex: Minha
   conta) -- sem isso o <label> fica "inline" (padrão do navegador) e os
   campos ficam grudados lado a lado em vez de um embaixo do outro. */
.drawer-body > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--sp-4) 0 var(--sp-1);
}
.drawer-body > label input {
  display: block;
  width: 100%;
  margin-top: var(--sp-1);
  padding: 9px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 14px;
  color: var(--texto);
}
.drawer-body > label input:focus { border-color: var(--verde-700); }

.conta-avatar-linha {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.conta-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--verde-50);
  color: var(--verde-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.conta-avatar-preview svg { width: 30px; height: 30px; display: block; }
.conta-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.drawer-secao {
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.drawer-secao summary {
  padding: var(--sp-3) var(--sp-4);
  background: var(--verde-50);
  font-weight: 600;
  font-size: 13px;
  color: var(--verde-800);
  cursor: pointer;
  list-style: none;
}
.drawer-secao summary::-webkit-details-marker { display: none; }
.drawer-secao[open] summary { border-bottom: 1px solid var(--borda); }

.drawer-campo {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 9px var(--sp-4);
  border-bottom: 1px dotted var(--borda);
  font-size: 13px;
}
.drawer-campo:last-child { border-bottom: none; }
.drawer-campo .rotulo { color: var(--texto-suave); flex-shrink: 0; }
.drawer-campo .valor { text-align: right; font-weight: 500; color: var(--texto); font-family: var(--fonte-dado); font-size: 12.5px; }

/* "Ilha" de informação — agrupa um bloco de campos (ex: checklist, foto,
   dados técnicos) num sub-cartão sutil, pra separar visualmente seções de
   um formulário longo (modal de conclusão) e reduzir a carga cognitiva de
   olhar tudo junto sem nenhuma divisão. */
.ilha-secao {
  background: var(--verde-50);
  border-radius: var(--raio);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.ilha-secao h3 { margin-top: 0 !important; }
.ilha-secao:last-of-type { margin-bottom: 0; }

/* Tela de Localização na planta */
.planta-area {
  display: block;
}
.planta-imagem-wrap {
  position: relative;
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: #fff;
}
.planta-imagem-wrap svg {
  display: block;
  width: 100%;
  height: 80vh;
  cursor: grab;
}
.planta-imagem-wrap svg:active {
  cursor: grabbing;
}
.planta-imagem-wrap svg.marcacao-ativa {
  cursor: crosshair;
}
.planta-imagem-wrap svg.marcacao-ativa:active {
  cursor: crosshair;
}
.planta-editar-botao {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.planta-editar-botao.ativo {
  background: #fff4e5;
  border-color: #e0a63a;
  box-shadow: 0 0 0 2px rgba(224, 166, 58, 0.35);
}
.planta-chips-arrastar {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--borda);
}
.planta-dropdown-marcacao {
  position: absolute;
  top: 52px;
  right: 10px;
  z-index: 4;
  width: min(380px, calc(100% - 20px));
  max-height: 75%;
  overflow-y: auto;
  margin: 0;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  animation: plantaDropdownAbrir 0.15s ease-out;
}
@keyframes plantaDropdownAbrir {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.planta-chip-arrastavel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 8px;
  height: 34px;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  cursor: grab;
  user-select: none;
  background: #f8f9fa;
  touch-action: none;
  font-size: 12.5px;
  color: var(--texto-suave);
}
.planta-chip-arrastavel:active {
  cursor: grabbing;
}
.planta-tipo-linha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.planta-tipo-botao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 38px;
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: inherit;
  text-align: left;
}
.planta-tipo-botao.ativo {
  background: var(--verde-100);
  border-color: var(--verde-700);
}
.planta-acao-linha {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.planta-acao-botao {
  flex: 1;
  height: 36px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--texto-suave);
}
.planta-acao-botao.ativo {
  background: var(--verde-100);
  border-color: var(--verde-700);
  color: var(--verde-700);
}
#btnAcaoRemover.ativo {
  background: #FDEAEA;
  border-color: var(--vermelho);
  color: var(--vermelho);
}
.planta-fantasma-arrasto {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 26px;
  height: 26px;
  opacity: 0.9;
  background: #8B98A6;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.planta-fantasma-arrasto.evaporadora {
  border-radius: 6px;
}
.planta-fantasma-arrasto.condensadora {
  border-radius: 3px;
}
/* Canto superior esquerdo (não mais inferior direito) -- junto do
   desenho em vez de solto do lado, igual referência que a Jovanna
   mandou; o inferior direito agora é do minimapa (ver .planta-minimapa
   abaixo), e o editar/⚙ já fica no superior direito. */
.planta-zoom-controles {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.planta-zoom-controles button {
  width: 32px;
  height: 32px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--borda-forte);
  background: #fff;
  color: var(--verde-800);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra);
}
.planta-zoom-controles button:hover {
  background: var(--verde-50);
}

/* Minimapa (visão geral da planta inteira, com um retângulo mostrando
   onde a visão atual está) -- canto inferior direito, mesma ideia da
   referência que a Jovanna mandou. Ajuda a não se perder numa planta
   grande depois de dar zoom/arrastar bastante. */
.planta-minimapa {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 130px;
  background: #fff;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra-elevada);
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
}
.planta-minimapa svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.planta-minimapa-viewport {
  position: absolute;
  border: 1.5px solid var(--verde-700);
  background: rgba(0, 130, 65, 0.15);
  pointer-events: none;
}
@media (max-width: 560px) {
  /* Some no celular -- a planta já ocupa a tela quase toda, o minimapa
     ficaria pequeno demais pra servir de alguma coisa e só atrapalharia. */
  .planta-minimapa { display: none !important; }
}

.planta-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: var(--sp-3);
  font-size: 11.5px;
  color: var(--texto-suave);
}
.planta-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.planta-legenda-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.planta-legenda-icone {
  width: 14px;
  height: 10px;
  display: inline-block;
  border: 1.5px solid var(--texto-suave);
}
.planta-legenda-icone-evap {
  border-radius: 3px;
}
.planta-legenda-icone-cond {
  border-radius: 2px;
  width: 12px;
  height: 12px;
}
.planta-legenda-icone-candidato {
  border-radius: 50%;
  width: 11px;
  height: 11px;
  border-style: dashed;
}
.planta-legenda-icone-descartar {
  border-radius: 50%;
  width: 11px;
  height: 11px;
  border-style: dashed;
  border-color: var(--vermelho);
  position: relative;
}
.planta-legenda-icone-descartar::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  border-top: 1.5px solid var(--vermelho);
  transform: translateY(-50%) rotate(45deg);
}
/* Candidato clicado uma vez, esperando o segundo clique de confirmação
   (ver aoClicarCandidatoNaoIdentificado no app.js) -- contorno sólido
   dourado, em vez do tracejado cinza padrão, pra ficar bem claro qual
   está selecionado. */
.planta-candidato-selecionado {
  stroke: #E8A317 !important;
  stroke-dasharray: none !important;
  animation: pulsarCandidatoSelecionado 1.1s ease-in-out infinite;
}
@keyframes pulsarCandidatoSelecionado {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.45; }
}
.planta-pulso-destaque {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pulsoDestaquePlanta 1.3s ease-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(232, 163, 23, 0.85));
}
@keyframes pulsoDestaquePlanta {
  0% { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
/* Diferente do pisca acima (chama atenção na hora e some), esse fica
   desenhado enquanto o painel do aparelho estiver aberto -- pra achar
   fácil qual é a máquina mesmo numa planta cheia de símbolos parecidos.
   Cor bem diferente das usadas em status/seleção pra não confundir. */
.planta-destaque-fixo {
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(255, 46, 166, 0.9));
  animation: pulsarDestaqueFixo 1.4s ease-in-out infinite;
}
@keyframes pulsarDestaqueFixo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.planta-painel {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  width: min(340px, calc(100% - 20px));
  max-height: 48%;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-4);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.planta-camadas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px 14px;
  padding: var(--sp-3) var(--sp-4);
  font-size: 12.5px;
}
.planta-camadas label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.planta-camada-linha span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planta-camada-linha input[type="color"] {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.planta-camada-linha input[type="range"] {
  width: 46px;
  flex-shrink: 0;
  cursor: pointer;
}
.planta-camada-resetar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  color: var(--texto-suave);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.planta-camada-resetar:hover {
  color: var(--verde-700);
}

@media (max-width: 768px) {
  .planta-imagem-wrap svg {
    height: 60vh;
  }
  .planta-painel {
    width: calc(100% - 20px);
    max-height: 55%;
  }
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 0;
  border-bottom: 1px dotted var(--borda);
  font-size: 13px;
  cursor: pointer;
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }

.estrelas-widget { display: flex; gap: 10px; margin: var(--sp-2) 0; }
.estrelas-widget .estrela {
  font-size: 30px;
  line-height: 1;
  color: var(--borda-forte);
  cursor: pointer;
  user-select: none;
}
/* --dourado sozinho (usado nos botões/destaques) tem pouco contraste
   como TEXTO/ícone num fundo claro -- quase 2.4:1, ilegível principalmente
   no celular sob luz forte. --dourado-escuro (já usado noutros lugares
   pelo mesmo motivo) resolve sem perder a identidade "dourada". */
.estrelas-widget .estrela.ativa { color: var(--dourado-escuro); }

.campo-outro { margin-top: 6px; }

.drawer-form { padding-bottom: var(--sp-2); }
.drawer-form label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 var(--sp-4);
  margin-top: var(--sp-3);
}
.drawer-form input, .drawer-form select {
  display: block;
  width: calc(100% - 2 * var(--sp-4));
  margin: var(--sp-1) var(--sp-4) 0;
  padding: 8px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
}
.drawer-acoes { padding: var(--sp-4); }
.drawer-acoes .btn { width: 100%; }

/* Menu de contexto "⋯" nas linhas de tabela */
.menu-linha { position: relative; display: inline-block; flex-shrink: 0; }
.menu-linha summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--raio-pequeno);
  color: var(--texto-suave);
}
.menu-linha summary::-webkit-details-marker { display: none; }
.menu-linha summary:hover { background: var(--verde-50); }
/* position:fixed (não mais absolute/relativo à linha da tabela) --
   calculado em JS (ver posicionarMenuLinha) toda vez que o menu abre.
   Sem isso, dentro de uma tabela com rolagem lateral (.table-wrap), o
   menu ficava preso e cortado pela borda da tabela em vez de flutuar
   por cima de tudo, como um menu de verdade. */
.menu-linha-opcoes {
  position: fixed;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--dourado);
  border-radius: var(--raio);
  box-shadow: var(--sombra-elevada);
  min-width: 180px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  padding: 4px;
  transform-origin: top right;
  animation: menuLinhaAbre 0.14s ease-out;
}
@keyframes menuLinhaAbre {
  from { opacity: 0; transform: scale(0.94) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.menu-linha-item {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--raio-pequeno);
  color: var(--texto);
}
.menu-linha-item:hover { background: var(--verde-50); }
.menu-linha-excluir { color: var(--vermelho-texto); }
.menu-linha-excluir:hover { background: var(--vermelho-fundo); }

/* Avatar (foto ou iniciais coloridas) na tabela de Usuários */
.usuario-avatar, .usuario-avatar-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}
.usuario-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.usuario-avatar-img { object-fit: cover; }

/* Botão de ícone único (lápis/lixeira) nas linhas da tabela --
   substitui o "⋯" só onde faz sentido ter uma ação sozinha em
   destaque (excluir), sem perder o menu com as outras opções. */
.icone-acao-tabela {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--raio-pequeno);
  color: var(--texto-suave);
  background: none;
  border: none;
  cursor: pointer;
}
.icone-acao-tabela svg { width: 16px; height: 16px; }
.icone-acao-tabela:hover { background: var(--verde-50); color: var(--texto); }
.icone-acao-tabela.icone-acao-perigo:hover { background: var(--vermelho-fundo); color: var(--vermelho-texto); }

/* Botão "⋯" discreto pra mostrar um texto informativo dentro de um
   card-head (ex: "Feriados nacionais"), sem deixar o parágrafo grande
   sempre visível ocupando espaço no card. Classe própria (não reusa
   .menu-linha) pra não herdar o reposicionamento mobile daquele menu,
   que é pensado pra linha de tabela que rola pro lado -- aqui o botão
   já fica perto da borda direita normal do card em qualquer largura. */
.info-popover { position: relative; display: inline-block; flex-shrink: 0; }
.info-popover summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--raio-pequeno);
  color: var(--texto-suave);
}
.info-popover summary::-webkit-details-marker { display: none; }
.info-popover summary:hover { background: var(--verde-50); }
.info-popover-painel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra-elevada);
  z-index: 20;
  width: 280px;
  max-width: min(280px, calc(100vw - 48px));
  padding: 10px 12px;
}
.info-popover-painel p { margin: 0; }

/* Botão de fechar (× no canto) -- injetado em todo ".info-popover-painel"
   via JS (ver ligarFechoDosPopovers). Sem isso, no celular esse painel
   vira um cartão fixo cobrindo boa parte da tela (ver
   .info-popover-painel-formulario) e o "⋯" que abriu ele fica coberto
   por baixo do próprio painel -- sem um jeito claro de fechar.
   Fica DENTRO do padding (não "pra fora" da borda) porque a variante
   de formulário tem "overflow-y:auto" -- um filho posicionado fora dos
   limites do painel ficaria cortado por esse scroll interno. */
.info-popover-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 16px;
  line-height: 1;
  box-shadow: var(--sombra);
  cursor: pointer;
}
.info-popover-close:hover { background: var(--verde-50); color: var(--texto); }

/* Variante maior do popover "⋯", pra caber um formulário inteiro (ex:
   cadastro manual de equipamento) em vez de só um texto curto. */
.info-popover-painel-formulario {
  width: 560px;
  max-width: min(560px, calc(100vw - 48px));
  max-height: min(560px, calc(100vh - 140px));
  overflow-y: auto;
  padding: var(--sp-4);
}
.info-popover-painel-formulario p { margin-bottom: var(--sp-3); }

/* Em tela estreita, "right: 0" (herdado de .info-popover-painel) corta o
   formulário pra fora da tela, já que o "⋯" que abre fica perto da borda
   direita do card -- vira um painel fixo, ancorado logo abaixo da
   topbar, em vez de um dropdown ancorado no botão.
   "--altura-topbar" é medida de VERDADE em JS (ver atualizarAlturaTopbar)
   -- ela pode ter 1 ou 2 linhas dependendo da largura da tela, então um
   número fixo chutado aqui sempre acabava errado (o painel cobria ou
   ficava embaixo da topbar). O "px" no var()/calc() é só um valor de
   reserva pro instante antes do JS medir a primeira vez. */
@media (max-width: 768px) {
  .info-popover-painel-formulario {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--altura-topbar, 96px) + 10px);
    width: auto;
    max-width: none;
    max-height: calc(100vh - var(--altura-topbar, 96px) - 30px);
  }
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--verde-900);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--raio-pequeno);
  border-left: 3px solid var(--dourado);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--sombra-elevada);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1250;
  max-width: min(90vw, 420px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Erro (mensagem começa com "Erro", ver toast() em app.js) fica visualmente
   diferente de um aviso comum -- antes era a mesma caixinha verde pra tudo,
   sem distinguir "deu certo"/"só um aviso" de "algo falhou de verdade"
   (ver auditoria visual). */
.toast.toast-erro {
  background: var(--estado-erro-fundo);
  color: var(--estado-erro-texto);
  border-left-color: var(--estado-erro-faixa);
}

/* RESPONSIVIDADE (MOBILE / CELULAR) */

@media (max-width: 960px) {
  .body-layout { flex-direction: column; }
  .page { padding: var(--sp-4); }
  .drawer { width: 100%; max-width: 100%; }
  /* Botão de fechar maior no celular (toque com o dedo, não com o
     mouse) -- ele já fechava clicando fora/Escape, mas o "×" pequeno
     de antes era fácil de não achar/acertar na tela pequena. */
  .drawer-close { width: 44px; height: 44px; font-size: 26px; }
}

/* Escondido por padrão (desktop) -- o @media abaixo mostra em telas
   estreitas. Precisa vir ANTES dele: com a mesma especificidade, a
   regra que aparece DEPOIS no arquivo é que vence, então se essa regra
   ficasse depois do @media ela sempre ganhava e o botão nunca aparecia
   em lugar nenhum, nem no celular (bug real que existia antes). */
.fab { display: none; }

@media (max-width: 768px) {
  /* 1. LAYOUT GERAL E ESPAÇO PRO MENU INFERIOR */
  /* Trava a página inteira pra não dar pra arrastar de lado -- rede de
     segurança: mesmo que algum elemento (ex: a barra de baixo, se algum
     dia voltar a ter mais itens do que cabe) acabe estourando a largura
     da tela, isso nunca deve virar um scroll horizontal da página
     inteira, só (no máximo) daquele elemento específico. */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .body-layout { padding-bottom: 80px; } /* Aumentei pra garantir que nada fique escondido */
  .page { padding: 12px; gap: 16px; width: 100%; overflow-x: hidden; }

  /* 2. TOPBAR COMPACTA E ABAS DESLIZANTES */
  .topbar-inner { flex-wrap: wrap; padding: 10px; min-height: auto; gap: 8px; }
  .brand-separador { display: none; }
  .brand-logo-completo { height: 30px; }
  .brand-name { font-size: 18px; }
  /* Engrenagem+conta ficavam empurradas pra uma TERCEIRA linha, embaixo
     das abas (width:100% força as abas pra linha de baixo sozinhas,
     empurrando quem vem depois delas no HTML junto) -- "order" reordena
     só visualmente: logo+nome e engrenagem+conta dividem a primeira
     linha (perto do nome "PMOC ALECE", como já é sem tela estreita),
     abas ficam sozinhas na segunda. */
  .brand { order: 1; }
  .topbar-acoes { order: 2; flex-shrink: 0; }
  .tabs { order: 3; }
  /* Some na tela estreita -- avatar+seta já bastam pra abrir o menu de
     conta, e o nome completo some com o espaço que teria. */
  .topbar-conta-nome { display: none; }
  /* Com a topbar quebrando linha, o avatar de conta deixa de ficar na
     borda direita da tela -- "right:0" abriria o menu fora da tela. */
  .topbar-conta-menu { right: auto; left: 0; }
  
  .tabs {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; /* Rolar suave no iPhone */
    scrollbar-width: none; /* Esconde a barrinha de rolagem feia */
  }
  .tabs::-webkit-scrollbar { display: none; }
  /* Esfumaça as bordas quando tem mais aba pra cada lado -- sem isso, a
     aba cortada na borda parecia layout quebrado, não "arraste pra ver
     mais" (a Jovanna notou isso na revisão de estética). */
  .tabs, .sidenav {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .tab { padding: 8px 12px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* 3. MENU LATERAL VIRA MENU INFERIOR (APP) */
  .sidenav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto; height: auto;
    width: 100%;
    background: var(--superficie); /* <--- AQUI ESTÁ A CORREÇÃO DO ENCAVALAMENTO */
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-top: 1px solid var(--borda);
    padding: 8px;
    z-index: 1000;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidenav::-webkit-scrollbar { display: none; }
  .sidenav-label, .sidenav-spacer { display: none !important; }
  /* No celular o menu vira uma barra de ícones no rodapé (sem rótulo,
     sem recolher). Tentei primeiro "display:contents" e depois
     "display:flex" DIRETO no <details> (ver .sidenav-grupo) -- as duas
     deram errado: testado e confirmado que <details> não participa
     direito de layout flex nesse navegador (nem com !important), os
     botões de dentro insistiam em empilhar um embaixo do outro em vez
     de ficar lado a lado, não importa o que mandasse no CSS. Bug
     conhecido de <details>/<summary> com flex em vários navegadores.
     Solução: não depender do <details> pra flex nenhum -- ele só
     encolhe em volta do conteúdo (shrink-to-fit normal de item flex,
     isso funciona) e quem vira a fileira de verdade é a <div> nova por
     dentro dele (.sidenav-grupo-itens, ver index.html), que é um
     elemento comum sem esse bug. */
  .sidenav-grupo-itens {
    display: flex;
    flex-direction: row;
    gap: inherit;
  }
  /* <details> é flex-item de ".sidenav" (a barra toda) -- sem
     flex-shrink:0 aqui, ele podia ser espremido pra caber ao lado dos
     outros 2 grupos, sobrando menos espaço do que o conteúdo (a div de
     cima) precisa. */
  .sidenav-grupo { flex-shrink: 0; }
  .sidenav-item {
    /* Era "flex:1" -- esticava/encolhia cada item pra caber todo mundo
       numa largura fixa (daí o texto quebrar em 2 linhas pra não
       cortar), sobrava espaço vazio desigual entre eles, e os
       "tracinhos" de ícone ficavam meio perdidos em cima de cada texto
       quebrado. "flex: 0 0 auto" + nowrap: cada item fica do tamanho
       natural dele numa linha só -- com os 6 itens de Gestão (Ordens de
       serviço, Histórico, Equipamentos, Condensadoras, Localização,
       Feriados e férias) nesse tamanho de fonte, cabem lado a lado sem
       nem precisar rolar; se um dia a lista crescer e não couber mais,
       ".sidenav" já tem overflow-x:auto pra rolar sem cortar nada. */
    flex: 0 0 auto;
    /* Sem isso, o "width:100%" da regra padrão (pensada pro menu vertical
       do desktop) virava a base do flex aqui (flex-basis:auto usa o
       width quando ele não é "auto") -- cada item tentava ocupar 100% da
       barra inteira, sobrando só um item gigante por vez com espaço
       vazio enorme ao redor, em vez de vários lado a lado. Isso ficou
       mais fácil de notar à medida que mais itens foram entrando nos
       grupos (a barra passou a precisar rolar de verdade). */
    width: auto;
    min-width: 64px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    font-size: 9.5px;
    line-height: 1.15;
    padding: 6px 10px;
    text-align: center;
    white-space: nowrap;
    border-left: none; /* a linha à esquerda do menu de desktop não faz sentido numa barra horizontal */
  }
  .sidenav-icon { display: block; margin: 0 auto; }
  .sidenav-icon svg { width: 20px; height: 20px; }
  #btnSair, #btnApagarCronograma { margin-top: 0 !important; }
  /* No celular a barra de baixo já vem cheia (Hoje/Calendário/Dashboard/
     Localização pro trabalhador, mais itens de Gestão pro admin) -- o
     "Sair" sempre acabava sendo o item cortado na borda. Ele continua
     funcionando pelo menu de perfil lá em cima (que só "clica" nesse
     mesmo botão por trás, ver #btnSairTopbar) -- só esconde a duplicata
     daqui de baixo, que não tem espaço sobrando. */
  #btnSair { display: none; }

  /* Trabalhador só enxerga Calendário/Dashboard — sem isso, a barra
     inferior (o menu "estilo app", o mais fácil de alcançar com o
     polegar) ficava só com o botão Sair, enquanto as duas telas que ele
     realmente usa ficavam escondidas na faixa de abas de cima. Troca:
     os atalhos aparecem embaixo, e a duplicata em cima some. */
  body.modo-trabalhador .sidenav-atalho-trabalhador { display: flex; }
  /* Só 3 itens (Hoje/Calendário/Dashboard) nessa barra pro trabalhador,
     contra os 6+ do admin (Gestão) -- sobra espaço de sobra, então o
     alvo de toque pode ser maior nesse caso específico. É a única
     navegação que esse papel tem no celular, usada o turno inteiro. */
  body.modo-trabalhador .sidenav-item {
    font-size: 11.5px;
    padding: 10px 4px;
    gap: 4px;
    min-height: 48px;
  }
  /* Pro trabalhador, TODA aba dessa faixa de cima já está escondida
     (essas três por essa regra, Levantamento/Cronograma por já não
     serem admin) -- sem esconder a faixa inteira, sobrava um vão vazio
     no cabeçalho (reservado pra abas que nunca aparecem nesse papel). */
  body.modo-trabalhador .tabs { display: none; }

  /* 4. FORMULÁRIOS E TOOLBARS EM 1 COLUNA */
  .grid-form { grid-template-columns: 1fr; }
  .capacidade-linha { grid-template-columns: 1fr; gap: 8px; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  /* Cards mais baixos no celular: com 5 cards em 2 colunas, o 5º fica
     sozinho na última linha, e a versão "esticada" (padding 24px + número
     de 42px) empurrava esse card pra trás da barra inferior fixa (fica
     cortado assim que o Dashboard abre, antes de rolar a tela). */
  .kpi-card { padding: var(--sp-3) var(--sp-4); }
  .kpi-card .num { font-size: 26px; margin-bottom: 4px; }
  .kpi-card.execucao .num { font-size: 34px; }

  /* Busca/filtros de Equipamentos: as regras de ".toolbar-pesquisa" e
     ".filtros-equipamentos" puras (usadas no desktop) têm mais peso do
     que uma classe só, então "vazavam" pro celular e desmanchavam essa
     versão empilhada -- prefixa com ".card" pra ganhar sempre. Os 3
     filtros ficam 2 por linha (em vez de empilhados um embaixo do
     outro) pra ocupar bem menos altura na tela do celular. */
  .card .toolbar-pesquisa { flex-direction: column; align-items: stretch; gap: 8px; }
  .card .toolbar-pesquisa .search-input { width: 100%; min-width: 100%; }
  .card .toolbar-pesquisa .filtros-equipamentos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
    background: transparent;
    padding: 0;
  }
  .card .toolbar-pesquisa .filtros-equipamentos select {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    font-size: 12.5px;
  }

  /* 5. CALENDÁRIO ULTRA-COMPACTO */
  .cal-dow { font-size: 9px; padding: 4px 0; }
  .cal-day { min-height: 50px; padding: 2px; }
  /* No desktop, o "min-width:190px" do h2 (ver regra acima) já dava
     esse respiro simétrico dos dois lados; no celular ele soma até
     ficar maior que a tela, então tira o min-width -- mas sem algo no
     lugar, o grupo "‹ Mês › " inteiro fica junto na ESQUERDA da faixa
     (a faixa toda que centraliza, não o texto dentro dela). */
  .calendar-nav { justify-content: center; }
  .calendar-nav h2 { min-width: 0; font-size: 14px; }
  .cal-day-num { font-size: 11px; }
  /* No mês inteiro, o texto do badge ("SEDE -- 4 pendentes") não cabe
     numa célula de 7 colunas no celular -- vira uma bolinha colorida
     (a cor já diz "atrasado"/"pendente"/etc.), e tocar no dia continua
     abrindo os detalhes embaixo do calendário, como já funcionava. */
  .cal-day-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 2px; }
  .cal-day-badge {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }
  .cal-badge-tooltip { display: none !important; }

  /* 6. AJUSTES EM TABELAS PARA NÃO QUEBRAREM A TELA */
  .table-wrap { width: 100%; overflow-x: auto; }
  table { min-width: 600px; /* Garante que a tabela role para o lado ao invés de esmagar o conteúdo */ }
  table tbody td, table thead th { padding: 8px; font-size: 12px; }
  .toast { width: 90vw; bottom: 80px; }

  /* 7. TABELAS QUE VIRAM CARDS NO MOBILE (em vez de rolar de lado) — hoje
     usado na tabela de equipamentos e na de detalhe do dia (calendário),
     que são as que mais aparecem em campo, inclusive pro trabalhador (que
     só enxerga Calendário/Dashboard). As outras tabelas continuam com
     rolagem horizontal por enquanto (ajuste 6 acima). */
  .tabela-cards-mobile thead { display: none; }
  .tabela-cards-mobile, .tabela-cards-mobile tbody { display: block; width: 100%; min-width: 0 !important; }
  .tabela-cards-mobile tr {
    display: block;
    position: relative;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--superficie);
  }
  .tabela-cards-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: none;
    text-align: right;
    font-size: 13px;
  }
  /* No card empilhado do celular não tem o problema de altura desigual
     que o truncamento resolve no desktop -- aqui só tiraria informação
     à toa, então desfaz. */
  .tabela-cards-mobile td.td-truncado {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .tabela-cards-mobile td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--texto-suave);
    text-align: left;
    flex-shrink: 0;
  }

  /* O <select> de status é o toque mais repetido do sistema (o técnico
     usa pra marcar Pendente/Em andamento/Concluída várias vezes por
     turno, nas telas "Hoje" e no detalhe do dia do Calendário) -- o
     tamanho normal (pensado pra encaixar numa célula de tabela desktop)
     fica pequeno demais pra acertar com o dedo. Maior só no celular. */
  select.status-select {
    padding: 8px 14px;
    font-size: 12.5px;
    min-height: 40px;
  }

  /* Tabelas com coluna de seleção (checkbox) E de ações (⋯) nas pontas
     (Equipamentos, Histórico, Ordens de serviço) — viram "cantos" fixos
     do card em vez de mais uma linha de rótulo:valor. As outras tabelas
     em cards (ex: detalhe do dia) não têm essas colunas extras, usam só
     o padrão genérico acima. */
  .tabela-com-selecao tr { padding: 30px 40px 8px 12px; }
  .tabela-com-selecao td:first-child {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 0;
  }
  .tabela-com-selecao td:last-child {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 0;
  }

  /* 8. BOTÃO FLUTUANTE (FAB) — atalho pra ação primária de uma tela sem
     precisar rolar de volta pro topo. Hoje só usado no cadastro manual de
     equipamento (ver #fabAdicionarEquipamento no JS). */
  .fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    /* Era 78px -- ficava colado na barra de baixo (só 1px de vão, na
       prática encostado), e com z-index menor que ela (.sidenav é 1000,
       o fab é 998) qualquer coisinha a mais de altura na barra já cobria
       pedaço do botão. Mesma folga usada no aviso flutuante (ver
       .alert-toast-stack). */
    bottom: 92px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--verde-700);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    border: none;
    box-shadow: 0 4px 14px rgba(16,38,61,0.35);
    z-index: 998;
    cursor: pointer;
  }
  .fab:active { background: var(--verde-800); }

  /* 9. TOAST ACIMA DO MENU INFERIOR — bottom:28px (valor de desktop) cai
     bem atrás da barra de navegação fixa no celular; sem isso a mensagem
     nem aparecia (escondida atrás do menu). Mesma folga do fab acima
     (92px) -- 78px ficava só 1px acima da barra, na prática colado. */
  .toast { bottom: 92px; }
}

.drawer-overlay {
  transition: opacity 0.2s ease;
  opacity: 1;
}
.drawer-overlay[hidden] { 
  opacity: 0; 
  display: block; 
  pointer-events: none; 
}

.tab, .btn, .sidenav-item, .local-pill, .cal-day.has-tasks {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* O travamento COMPLETO (sem nenhuma exceção extra) só vale pra "padrão"
   de verdade (:not(.modo-trabalhador)) nas linhas de input/select/botão
   primário -- trabalhador tem sua PRÓPRIA versão dessas três logo abaixo,
   com os campos de "Corrigir informações do aparelho" liberados. As
   outras linhas (excluir, limpar histórico/ordens etc.) continuam sem
   essa ressalva -- travadas pros dois perfis igual sempre foi, só não
   tinham nada que o trabalhador precisasse desbloquear. */
body.modo-padrao:not(.modo-trabalhador) .status-select,
body.modo-padrao:not(.modo-trabalhador) input:not(.search-input):not(#authEmail):not(#authSenha):not(#modalConclusao *):not([type="checkbox"]),
body.modo-padrao:not(.modo-trabalhador) select:not(#filtroStatus):not(#filtroSetorPCM):not(#filtroOrigem):not(#plantaSeletor):not(#filtroStatusPlanta):not(.status-select):not(#modalConclusao *),
body.modo-padrao:not(.modo-trabalhador) button.btn.primary:not(#modalConclusao *):not(#modalConfirmOverlay *),
body.modo-padrao button.btn.danger-inverted:not(#modalConfirmOverlay *),
body.modo-padrao button.sidenav-danger,
body.modo-padrao #drawerEnviarFoto,
body.modo-padrao #drawerExcluir,
body.modo-padrao .menu-linha-item,
body.modo-padrao #btnLimparHistorico,
body.modo-padrao #btnLimparOrdens {
  pointer-events: none !important;
  cursor: not-allowed;
  background: var(--fundo) !important;
  color: var(--texto-suave) !important;
  border-color: var(--borda) !important;
}

/* Trabalhador: mesmo travamento geral de cima, só que com os campos de
   "Corrigir informações do aparelho" liberados (ver abrirDrawerEquipamento
   em app.js). Sem isso, essa função inteira (aberta sozinha pro
   trabalhador, único jeito dele corrigir um dado errado) ficava visível
   na tela mas travada de ponta a ponta -- pointer-events:none bloqueia o
   clique até "atravessar" até o campo, então nem dava pra digitar nos
   inputs, nem clicar em Salvar. Reportado em produção: "mesmo tendo essa
   opção ele não consegue".
*/
body.modo-trabalhador input:not(.search-input):not(#drawerPatrimonio):not(#drawerTag):not(#drawerAmbiente):not(#drawerMarca):not(#drawerModelo):not(#drawerCapacidade):not(#drawerObservacao):not(#modalConclusao *):not([type="checkbox"]),
body.modo-trabalhador select:not(#filtroStatus):not(#filtroSetorPCM):not(#filtroOrigem):not(#plantaSeletor):not(#filtroStatusPlanta):not(.status-select):not(#drawerTipoGas):not(#modalConclusao *),
body.modo-trabalhador button.btn.primary:not(#drawerSalvarCadastro):not(#modalConclusao *):not(#modalConfirmOverlay *) {
  pointer-events: none !important;
  cursor: not-allowed;
  background: var(--fundo) !important;
  color: var(--texto-suave) !important;
  border-color: var(--borda) !important;
}

/* Checkbox nativo não aceita cor de fundo/texto de forma confiável entre
   navegadores — opacidade moderada é o jeito que sobra de indicar
   "desabilitado" nesse caso específico, sem derrubar tanto o contraste
   quanto os 50% usados antes pros outros elementos. */
body.modo-padrao input[type="checkbox"]:not(#modalConclusao *) {
  pointer-events: none !important;
  opacity: 0.6;
  cursor: not-allowed;
}

body.modo-padrao .badge-somente-leitura {
  display: inline-flex;
}

/* Trabalhador: pode mudar status no calendário — os elementos dentro do
   #modalConclusao já ficam de fora do travamento geral do modo padrão
   (ver os :not(#modalConclusao *) acima), não precisam de exceção aqui. */
body.modo-trabalhador .status-select {
  pointer-events: auto !important;
  opacity: 1;
  cursor: pointer;
}
.badge-somente-leitura {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin-left: 12px;
}

.vg-card {
  background: var(--verde-50);
  border-radius: var(--raio-pequeno);
  padding: 12px;
}
.vg-card .vg-titulo { font-size: 12.5px; color: var(--texto-suave); margin: 0 0 4px; }
.vg-card .vg-pct { font-family: var(--fonte-display); font-size: 22px; font-weight: 700; margin: 0 0 2px; color: var(--verde-900); }
.vg-card .vg-detalhe { font-size: 11.5px; color: var(--texto-fraco); margin: 0; }
.vg-dia {
  background: var(--verde-50);
  border-radius: var(--raio-pequeno);
  padding: 8px 4px;
  text-align: center;
}
.vg-dia .vg-dia-nome { font-size: 10.5px; color: var(--texto-fraco); margin: 0 0 4px; text-transform: uppercase; }
.vg-dia .vg-dia-num { font-size: 16px; font-weight: 700; margin: 0; color: var(--verde-900); }
.vg-dia.vg-fimdesemana { background: var(--dourado-tint); }
.vg-dia.vg-fimdesemana .vg-dia-num { color: var(--dourado-escuro); }
.vg-equipe-grupo { margin-bottom: 14px; }
.vg-equipe-grupo:last-child { margin-bottom: 0; }
.vg-equipe-predio-nome {
  font-size: 11px; color: var(--texto-fraco); text-transform: uppercase;
  letter-spacing: 0.04em; margin: 0 0 6px;
}
.vg-equipe-linha {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--verde-50); border-radius: var(--raio-pequeno);
  padding: 8px 12px; font-size: 13px; margin-bottom: 4px;
}
.vg-equipe-linha:last-child { margin-bottom: 0; }
.subview { display: none; flex-direction: column; gap: var(--sp-4); }
.subview.active { display: flex; }
.subtabs-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: 16px;
}
.subtabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--fundo);
  border-radius: 999px;
}
.subtab {
  padding: 8px 18px; background: none; border: none;
  border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--texto-suave); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.subtab:hover { color: var(--texto); }
.subtab.active { background: var(--superficie); color: var(--verde-800); box-shadow: var(--sombra); }
.subtab-perigo { color: var(--vermelho-texto); }
.subtab-perigo:hover { color: var(--vermelho-texto); background: var(--vermelho-fundo); }

/* --- TELA DE GESTÃO DE EQUIPES (MODERNO) --- */
#equipesPorPredio {
  display: grid;
  /* "auto-fit" (não "auto-fill") -- quando o último prédio fica sozinho
     na linha, ele estica pra preencher o espaço todo em vez de deixar
     aquele vão vazio do lado (que ficava esquisito), sem precisar de
     nenhum enfeite/painel de preenchimento. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

.eq-predio-card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--eq-cor-predio, var(--dourado));
  border-radius: var(--raio);
  padding: var(--sp-5);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}

.eq-predio-titulo {
  font-family: var(--fonte-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--verde-900);
  border-bottom: 2px solid var(--fundo);
  padding-bottom: 12px;
  margin: 0 0 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--fundo); 
}
::-webkit-scrollbar-thumb {
  background: var(--borda-forte); 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--verde-700); 
}

.eq-predio-titulo .badge-capacidade {
  font-family: var(--fonte-corpo);
  font-size: 11px;
  font-weight: 600;
  background: var(--verde-50);
  color: var(--verde-900);
  padding: 4px 8px;
  border-radius: 999px;
}

.eq-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: var(--fundo);
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  transition: all 0.2s ease;
}

.eq-linha:focus-within {
  background: #fff;
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px rgba(201, 163, 78, 0.15);
}

.eq-nome-input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--texto) !important;
  outline: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.eq-nome-input::placeholder {
  color: var(--texto-suave);
  font-style: italic;
  font-weight: 400;
}

/* Ícone de "pegar" ao lado do nome (visual só -- ainda não dá pra
   arrastar de verdade pra reordenar) */
.eq-drag-handle {
  display: flex;
  color: var(--borda-forte);
  flex-shrink: 0;
}
.eq-drag-handle svg { width: 14px; height: 14px; }

.eq-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.eq-badge-rodizio { background: var(--verde-700); color: #fff; }
.eq-badge-fora-rodizio { background: #ea580c; color: #fff; }
.eq-badge-rotina { background: var(--estado-alerta-fundo); color: var(--estado-alerta-texto); }
.eq-badge-reserva { background: var(--borda); color: var(--texto-suave); }

.btn-adicionar-vaga {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  font-size: 13px;
  padding: 8px 12px;
  border-style: dashed;
}
/* --- TOOLBAR DE FILTROS E BUSCA --- */
.toolbar-pesquisa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--verde-50);
  padding: 12px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  margin-bottom: var(--sp-4);
}

.toolbar-pesquisa .search-input {
  flex: 1; 
  min-width: 250px;
  margin-bottom: 0;
  background: var(--superficie);
  border-color: var(--borda-forte);
}

.toolbar-pesquisa .filtros-equipamentos {
  display: flex;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  width: auto;
}

.toolbar-pesquisa .filtros-equipamentos select {
  min-width: 140px;
}
/* --- LAUNCHPAD (GERAR CRONOGRAMA) --- */
.launchpad-card {
  background: var(--verde-900); /* sólido, não gradiente -- ver .auth-overlay acima pelo motivo */
  border-radius: var(--raio);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  box-shadow: var(--sombra-elevada);
  color: #fff;
  margin-top: 8px;
}

.launchpad-texto h3 {
  color: #fff;
  margin-bottom: 8px;
  font-size: 18px;
}

.launchpad-texto p {
  color: rgba(255,255,255,0.8);
  margin-bottom: 0;
  font-size: 13.5px;
  line-height: 1.4;
}

.launchpad-resumo {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--dourado);
  font-family: var(--fonte-dado);
}

.launchpad-card .btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Botão separado (em vez de um checkbox que mudava o que "Gerar
   Cronograma" fazia) -- clicar num botão chamado "Gerar Cronograma"
   quando a intenção é JUSTAMENTE não gerar ainda é confuso; cada ação
   tem o próprio botão agora. */
.launchpad-acao {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.launchpad-btn-secundario {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
}
.launchpad-btn-secundario:hover:not(:disabled) {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

@media (max-width: 768px) {
  .launchpad-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .launchpad-acao {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===================== Análise GLPI (painel de chamados) ===================== */
/* Classes próprias (prefixo ag-) pros gráficos em SVG montados na hora pelo
   JS (ver renderAnaliseGlpi em app.js) -- mesma técnica de "montar com
   createElementNS" já usada no resto do app (ver plantas/calendário), só
   que reaproveitando as cores institucionais já definidas lá em cima. */
.ag-eixo-label { font-size: 10.5px; fill: var(--texto-fraco); }
.ag-valor-label { font-size: 11px; fill: var(--texto-suave); font-weight: 500; }
.ag-nome-label { font-size: 11.5px; fill: var(--texto); }
.ag-linha-grade { stroke: var(--borda); stroke-width: 1; }
.ag-tooltip {
  position: fixed; pointer-events: none; background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: 8px; padding: 8px 10px;
  font-size: 12.5px; box-shadow: 0 6px 20px rgba(0,0,0,0.18); z-index: 80;
  opacity: 0; transition: opacity 0.1s; max-width: 260px;
}
.ag-tooltip.ag-visivel { opacity: 1; }
.ag-tooltip .ag-tt-nome { color: var(--texto-suave); margin-bottom: 2px; }
.ag-tooltip .ag-tt-valor { font-weight: 600; font-size: 14px; }
.ag-legenda-item { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; color: var(--texto-suave); }
.ag-legenda-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ag-pilula { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; border: 1px solid var(--borda-forte); color: var(--texto-suave); }
.ag-pilula.fechado { color: var(--texto-suave); }
.ag-pilula.andamento { color: var(--dourado-escuro, #9C7B2E); border-color: var(--dourado-escuro, #9C7B2E); }
.ag-pilula.pendente { color: var(--vermelho); border-color: var(--vermelho); }
.ag-pendencia-card { border: 1px solid var(--borda); border-left: 3px solid var(--vermelho); border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 8px; font-size: 13px; }
.ag-pendencia-card .ag-ped-meta { font-size: 11.5px; color: var(--texto-suave); margin-bottom: 3px; }
#agBarraFiltros label { display: flex; flex-direction: column; gap: 3px; color: var(--texto-suave); }
#agBarraFiltros input, #agBarraFiltros select { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--borda-forte); background: var(--fundo); color: var(--texto); font-size: 13px; }
.ag-pagina svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- Layout compacto, pra caber na tela sem rolar demais --- */
.ag-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 820px) { .ag-grid-2 { grid-template-columns: 1fr; } }

#view-analiseglpi .ag-pagina > .card,
#view-analiseglpi .ag-pagina > .ag-grid-2,
#view-analiseglpi .ag-pagina > .kpi-row,
#view-analiseglpi .ag-pagina > p.muted {
  margin-bottom: 10px;
}
#view-analiseglpi .ag-pagina > *:last-child { margin-bottom: 0; }

#view-analiseglpi .card { padding: 12px 14px; box-shadow: none; }
#view-analiseglpi .card h2 { font-size: 13px; margin: 0 0 6px; }

#view-analiseglpi .kpi-row { gap: 8px; }
#view-analiseglpi .kpi-card {
  padding: 10px 8px; border-top-width: 2px; box-shadow: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: help;
}
#view-analiseglpi .kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--verde-600);
  box-shadow: var(--sombra);
}
#view-analiseglpi .kpi-card .num { font-size: 23px; margin-bottom: 2px; }
#view-analiseglpi .kpi-card .label { font-size: 11.5px; letter-spacing: 0.03em; }
#view-analiseglpi .kpi-card .sublabel { font-size: 11px; margin-top: 2px; }

#view-analiseglpi .tabs { margin-bottom: 10px !important; }
#view-analiseglpi .btn-modo { padding: 8px 16px; font-size: 14.5px; }

#view-analiseglpi #agBarraFiltros { padding: 8px 12px; margin: 0 0 10px !important; }
#view-analiseglpi #agBarraFiltros label { font-size: 10.5px; }
#view-analiseglpi #agBarraFiltros input,
#view-analiseglpi #agBarraFiltros select { padding: 4px 6px; font-size: 12.5px; }
.ag-filtro-btn-wrap { display: flex; flex-direction: column; gap: 3px; }
.ag-filtro-btn-spacador { font-size: 10.5px; visibility: hidden; line-height: 1; }
#view-analiseglpi #agBarraFiltros .ag-filtro-btn-wrap .btn.ghost { padding: 4px 10px; font-size: 12.5px; line-height: 1.3; }

/* Filtro de data da "Equipe de campo" igual, PIXEL A PIXEL, ao filtro de
   cima (#agBarraFiltros, usado em Visão geral/Falhas/Acompanhamento) --
   sem esses seletores com #agPagina-equipe (mais específicos que a regra
   genérica .local-filtro em cima), a caixa de data e o botão "Limpar
   período" ficavam mais altos que o filtro dos outros modos, porque
   aquela regra genérica nunca ganhava de #agBarraFiltros (que tem um ID
   no seletor) -- só igualava Equipe de campo com o Gerar OS, não com os
   "outros" de verdade que a Jovanna queria. */
#agPagina-equipe .local-filtro label { font-size: 10.5px; }
#agPagina-equipe .local-filtro input[type="date"] { padding: 4px 6px; font-size: 12.5px; border-radius: 6px; }
#agPagina-equipe .local-filtro .btn { padding: 4px 10px; font-size: 12.5px; line-height: 1.3; }

#agChartStatus { max-width: 480px; margin: 0 auto; }
#agLegendaStatus { display: flex; justify-content: center; flex-wrap: wrap; text-align: center; }