/* =========================================================
   Alarme de Incêndio Online — estilos compartilhados
   Inspirado em painéis de alarme em aço pintado e em
   sinalização de segurança (vermelho sinal, verde saída).
   ========================================================= */

:root {
  --aco: #e3e6e9;          /* fundo — aço pintado */
  --chapa: #f6f7f8;        /* painéis */
  --grafite: #22272c;      /* texto */
  --suave: #5b646d;        /* texto secundário */
  --linha: #c9ced4;
  --sinal: #c1121f;        /* vermelho de segurança */
  --sinal-escuro: #8f0d17;
  --saida: #00843d;        /* verde de rota de fuga */
  --ambar: #f2a900;
  --foco: #0b63ce;

  --raio-p: 4px;
  --raio-g: 10px;
  --fonte: "Archivo", "Arial Narrow", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --aco: #1b1f23;
    --chapa: #252a30;
    --grafite: #eceff2;
    --suave: #a4adb6;
    --linha: #3a414a;
    --sinal: #e0303d;
    --sinal-escuro: #a41c26;
    --saida: #2fb36a;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--grafite);
  background: var(--aco);
  font-variant-numeric: tabular-nums;
}

h1, h2 {
  font-stretch: 112%;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h2 { font-size: 1.2rem; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: inherit; }
.suave { color: var(--suave); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ---------- Marca ---------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-stretch: 112%;
  text-decoration: none;
}
.marca-sinal {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 3px;
  background: var(--sinal);
  box-shadow: inset 0 0 0 4px var(--sinal), inset 0 0 0 6px #fff;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.6rem;
  padding: .5rem 1.1rem;
  border-radius: var(--raio-p);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.btn-primario { background: var(--sinal); color: #fff; }
.btn-primario:hover { background: var(--sinal-escuro); }
.btn-contorno { background: transparent; border-color: var(--grafite); color: var(--grafite); }
.btn-contorno:hover { background: var(--chapa); }
.btn-pequeno { min-height: 2rem; padding: .25rem .7rem; font-size: .9rem; }
.btn-largo { width: 100%; }
.btn-saida { background: var(--saida); color: #fff; }
.btn[disabled] { opacity: .55; cursor: wait; }

/* ---------- Formulários ---------- */
label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
input, select, textarea {
  font: inherit;
  font-weight: 400;
  color: var(--grafite);
  background: var(--chapa);
  border: 2px solid var(--linha);
  border-radius: var(--raio-p);
  padding: .55rem .7rem;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--grafite); outline: none; }
textarea { resize: vertical; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.linha-fim { align-items: center; }
.checagem { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.checagem input { width: auto; }

.aviso {
  border-left: 4px solid var(--ambar);
  background: color-mix(in srgb, var(--ambar) 14%, var(--chapa));
  padding: .7rem .9rem;
  border-radius: var(--raio-p);
  font-size: .95rem;
}
.aviso-erro { border-color: var(--sinal); background: color-mix(in srgb, var(--sinal) 10%, var(--chapa)); }

/* =========================================================
   Acionador manual — o elemento marcante do sistema
   ========================================================= */
.acionador { display: grid; justify-items: center; gap: .8rem; }
.acionador-caixa,
.acionador-botao {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--sinal);
  border-radius: var(--raio-g);
  box-shadow: 0 2px 0 var(--sinal-escuro), 0 18px 40px -18px rgba(90, 0, 0, .55);
}
.acionador-caixa { width: min(320px, 70vw); padding: 14%; }
.acionador-vidro {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #fbfbfb;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.08);
  color: var(--sinal-escuro);
  font-weight: 800;
  font-stretch: 75%;
  text-align: center;
  line-height: 1.15;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
}
.acionador-chama {
  position: absolute;
  top: 5%;
  left: 50%;
  translate: -50% 0;
  width: 1.1rem;
  height: 1.5rem;
  background: #fff;
  clip-path: polygon(50% 0, 78% 38%, 90% 70%, 70% 100%, 30% 100%, 10% 70%, 24% 42%, 38% 58%);
}
.acionador-legenda { color: var(--suave); font-size: .9rem; margin: 0; }

.acionador-botao {
  width: 220px;
  padding: 26px;
  border: 0;
  cursor: pointer;
  font: inherit;
  transition: transform .08s;
}
.acionador-botao:active { transform: translateY(2px); box-shadow: 0 0 0 var(--sinal-escuro); }
.acionador-botao .acionador-vidro { font-size: 1.4rem; }
.acionador-botao[disabled] { filter: grayscale(.6); cursor: wait; }

/* Estado de alarme: faixa vermelha piscando no topo */
body.em-alarme::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--sinal);
  z-index: 50;
  animation: estrobo .6s steps(2) infinite;
}
@keyframes estrobo { 50% { opacity: .15; } }

/* =========================================================
   Página inicial
   ========================================================= */
.topo, .rodape, .bloco, .hero {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}
.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
}
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: clamp(2rem, 7vw, 5rem) 0;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.3rem);
  font-stretch: 125%;
  letter-spacing: -.03em;
  max-width: 12ch;
}
.hero-sub { font-size: 1.15rem; color: var(--suave); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.acionador-caixa { cursor: pointer; }

.bloco {
  padding: 2.5rem 0;
  border-top: 2px solid var(--linha);
}
.bloco-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }

.passos {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.passos li { counter-increment: passo; display: grid; gap: .3rem; align-content: start; }
.passos li::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--saida);
  color: #fff;
  font-weight: 800;
  margin-bottom: .4rem;
}
.passos span { color: var(--suave); }

.perfis dt { font-weight: 800; margin-top: .8rem; }
.perfis dd { margin: .2rem 0 0; color: var(--suave); }

.rodape {
  padding: 2rem 0 3rem;
  border-top: 2px solid var(--linha);
  color: var(--suave);
}

/* =========================================================
   Login
   ========================================================= */
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login { width: min(420px, 100%); display: grid; gap: 1.5rem; }
.login-caixa {
  display: grid;
  gap: 1rem;
  background: var(--chapa);
  padding: 2rem;
  border-radius: var(--raio-g);
  border-top: 6px solid var(--sinal);
}
.login-caixa p { margin: 0; }

/* =========================================================
   Dashboard
   ========================================================= */
.painel { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }

.lateral {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.4rem 1rem;
  background: var(--grafite);
  color: #eef1f4;
  position: sticky;
  top: 0;
  height: 100vh;
}
.menu { display: grid; gap: .25rem; }
.menu button {
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 0;
  border-left: 4px solid transparent;
  padding: .6rem .8rem;
  cursor: pointer;
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
}
.menu button:hover { background: rgba(255,255,255,.06); }
.menu button.ativo { border-left-color: var(--sinal); background: rgba(255,255,255,.1); }
.menu button[data-view="disparar"] { color: #ff8f96; }

@media (prefers-color-scheme: dark) {
  .lateral { background: #111417; }
}

.conta { margin-top: auto; display: grid; gap: .3rem; font-size: .92rem; }
.conta a { color: #c9d0d7; }
.selo {
  justify-self: start;
  font-size: .78rem;
  font-weight: 700;
  padding: .1rem .5rem;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
}

.conteudo { padding: 1.4rem clamp(1rem, 3vw, 2.4rem) 3rem; min-width: 0; }
.barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.barra h1 { margin: 0; }
.barra-acoes { display: flex; align-items: center; gap: .8rem; }
.status {
  font-size: .85rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 99px;
  border: 2px solid var(--linha);
  color: var(--suave);
}
.status.on { border-color: var(--saida); color: var(--saida); }

.view { display: none; }
.view.ativa { display: block; }

/* Convidado não vê o que é de administrador */
.perfil-convidado .admin-only { display: none !important; }
.carregando .conteudo { opacity: .4; }

/* Números */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.numero { background: var(--chapa); padding: 1rem 1.1rem; display: grid; gap: .1rem; font-size: .88rem; color: var(--suave); }
.numero-valor { font-size: 1.9rem; font-weight: 800; font-stretch: 112%; color: var(--grafite); line-height: 1.1; }
.numero-destaque .numero-valor { color: var(--saida); }

/* Gráficos e quadros */
.graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.quadro {
  background: var(--chapa);
  border-radius: var(--raio-g);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1rem;
}
.graficos .quadro { margin: 0; }
.quadro-largo { grid-column: 1 / -1; }
.quadro figcaption { font-weight: 700; margin-bottom: .6rem; }
.quadro-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.quadro-topo h2 { margin: 0; }
.grafico { position: relative; height: 240px; }
#analiseIA { white-space: pre-line; margin: 0; }

/* Ferramentas e tabelas */
.ferramentas { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.ferramentas input { flex: 1 1 260px; }
.ferramentas select { flex: 0 1 220px; }

.tabela-rolagem { overflow-x: auto; background: var(--chapa); border-radius: var(--raio-g); }
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th, .tabela td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela th { font-weight: 700; color: var(--suave); font-size: .85rem; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td.acoes { text-align: right; }
.tabela td.acoes .btn + .btn { margin-left: .4rem; }
.vazio { text-align: center; color: var(--suave); padding: 2rem !important; white-space: normal !important; }

.tipo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.tipo::before { content: ""; width: .6rem; height: .6rem; border-radius: 2px; background: var(--cor, var(--suave)); }

.progresso { display: flex; align-items: center; gap: .6rem; }
.progresso-barra { width: 90px; height: 8px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.progresso-barra span { display: block; height: 100%; background: var(--saida); }

/* Disparo */
.disparo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  background: var(--chapa);
  padding: 1.5rem;
  border-radius: var(--raio-g);
  margin-bottom: 1rem;
}
.disparo-campos { display: grid; gap: 1rem; }

.envios { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.envios li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .6rem .8rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}
.envios li.feito { opacity: .6; }
.envios small { color: var(--suave); display: block; }

.estado-ok { color: var(--saida); font-weight: 700; }
.estado-pendente { color: var(--sinal); font-weight: 700; }

/* Modais */
.modal {
  border: 0;
  border-radius: var(--raio-g);
  padding: 1.6rem;
  width: min(560px, 100% - 2rem);
  background: var(--chapa);
  color: var(--grafite);
  border-top: 6px solid var(--sinal);
}
.modal-largo { width: min(760px, 100% - 2rem); }
.modal::backdrop { background: rgba(20, 24, 28, .55); }
.modal form { display: grid; gap: 1rem; }
.modal-acoes { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .6rem; }
.detalhe-msg { background: var(--aco); padding: .8rem 1rem; border-radius: var(--raio-p); white-space: pre-line; }

/* Toast */
.toast {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  max-width: 360px;
  padding: .8rem 1rem;
  border-radius: var(--raio-p);
  background: var(--grafite);
  color: var(--aco);
  font-weight: 600;
  opacity: 0;
  translate: 0 10px;
  pointer-events: none;
  transition: opacity .2s, translate .2s;
  z-index: 60;
}
.toast.visivel { opacity: 1; translate: 0 0; }
.toast.erro { background: var(--sinal); color: #fff; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .hero, .bloco-duplo { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr 1fr; }
  .graficos { grid-template-columns: 1fr; }
  .disparo { grid-template-columns: 1fr; justify-items: center; }
  .disparo-campos { width: 100%; }
}

@media (max-width: 720px) {
  .painel { grid-template-columns: 1fr; }
  .lateral {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 1.2rem;
    padding: .8rem 1rem;
  }
  .menu { display: flex; overflow-x: auto; width: 100%; order: 3; }
  .menu button { border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; white-space: nowrap; }
  .menu button.ativo { border-bottom-color: var(--sinal); }
  .conta { margin: 0 0 0 auto; grid-auto-flow: column; align-items: center; gap: .6rem; }
  .linha, .passos { grid-template-columns: 1fr; }
  .barra { flex-wrap: wrap; }
}

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

/* =========================================================
   Complementos — versão hospedada
   ========================================================= */
.login-caixa-form { display: grid; gap: 1rem; }
.espaco-topo { margin-top: 1.6rem; }
.ferramentas-texto { flex: 1 1 260px; margin: 0; align-self: center; }

.link {
  justify-self: start;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #c9d0d7;
  text-decoration: underline;
  cursor: pointer;
}
.menu a {
  display: block;
  padding: .6rem .8rem;
  border-left: 4px solid transparent;
  font-weight: 600;
  color: #aeb7c0;
  text-decoration: none;
}
.menu a:hover { color: #fff; }

.btn-claro { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-claro:hover { background: rgba(255,255,255,.22); }
.btn-branco { background: #fff; color: #7a0c0c; }
.btn-branco:hover { background: #ffe9d6; }

/* Faixa de alerta ativo no painel */
.faixa-alerta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem 1.2rem;
  background: var(--sinal);
  color: #fff;
  padding: .8rem 1.1rem;
  border-radius: var(--raio-g);
  margin-bottom: 1.5rem;
}
.faixa-alerta[hidden] { display: none; }
.faixa-alerta strong { display: block; font-stretch: 112%; }
.faixa-alerta span { opacity: .9; font-size: .92rem; }
.faixa-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

/* =========================================================
   Tela de alerta 3D — preto, vermelho e laranja
   ========================================================= */
body.com-alerta { overflow: hidden; }

.alerta-tela {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 55% at 50% 115%, rgba(255, 110, 0, .75), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(170, 10, 10, .55), transparent 75%),
    #080202;
  animation: alerta-entra .35s ease-out;
}
/* luz estroboscópica vermelha */
.alerta-tela::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff1a1a;
  mix-blend-mode: screen;
  opacity: 0;
  animation: alerta-estrobo 1.1s steps(1) infinite;
  pointer-events: none;
}
@keyframes alerta-entra { from { opacity: 0; transform: scale(1.04); } }
@keyframes alerta-estrobo { 0% { opacity: .28; } 12% { opacity: 0; } 24% { opacity: .18; } 36% { opacity: 0; } }

.alerta-conteudo { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1rem; max-width: 1100px; }

.alerta-palco {
  perspective: 900px;
  display: grid;
  justify-items: center;
  gap: 1.2rem;
}

/* Título com volume (extrusão em camadas) e movimento 3D */
.alerta-titulo {
  margin: 0;
  font-size: clamp(2.6rem, 10vw, 8.5rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .95;
  letter-spacing: -.02em;
  color: #ffe45c;
  text-shadow:
    0 1px 0 #ffc21a,
    0 2px 0 #ffa811,
    0 3px 0 #ff8c0a,
    0 4px 0 #ff7004,
    0 5px 0 #f25500,
    0 6px 0 #e03e00,
    0 7px 0 #c92a00,
    0 8px 0 #ad1c00,
    0 9px 0 #901200,
    0 10px 0 #700a00,
    0 14px 18px rgba(0, 0, 0, .7),
    0 0 50px rgba(255, 90, 0, .85),
    0 0 110px rgba(255, 30, 0, .6);
  transform-style: preserve-3d;
  animation: alerta-balanco 3.2s ease-in-out infinite, alerta-pulso .9s ease-in-out infinite;
  will-change: transform;
}
@keyframes alerta-balanco {
  0%, 100% { transform: rotateX(14deg) rotateY(-16deg) translateY(0); }
  50%      { transform: rotateX(6deg)  rotateY(16deg)  translateY(-14px); }
}
@keyframes alerta-pulso {
  50% { color: #fff6c2; filter: brightness(1.2); }
}

/* Placa triangular de perigo girando */
.alerta-placa {
  width: clamp(80px, 12vw, 130px);
  aspect-ratio: 1.12;
  display: grid;
  place-items: end center;
  padding-bottom: 12%;
  background: linear-gradient(160deg, #ffb21a, #ff6a00 60%, #d93800);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  color: #120303;
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  filter: drop-shadow(0 0 24px rgba(255, 120, 0, .9));
  animation: alerta-gira 1.6s ease-in-out infinite alternate;
}
@keyframes alerta-gira { from { transform: rotateY(-40deg) scale(1); } to { transform: rotateY(40deg) scale(1.08); } }

.alerta-msg {
  max-width: 50ch;
  margin: .6rem 0 0;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.alerta-local {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 700;
  color: #ffb36b;
}
.alerta-instrucao {
  margin: .4rem 0 0;
  padding: .5rem 1rem;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 99px;
  font-weight: 600;
  background: rgba(0,0,0,.35);
}
.alerta-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1rem; }

/* Chamas subindo no rodapé */
.alerta-chamas {
  position: absolute;
  inset: auto 0 0 0;
  height: 42vh;
  z-index: 1;
  pointer-events: none;
  filter: blur(14px);
}
.alerta-chamas span {
  position: absolute;
  bottom: -12vh;
  width: 22vw;
  aspect-ratio: .7;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 70%, #ffd23f 0%, #ff7a00 38%, #d11a00 68%, transparent 72%);
  opacity: .8;
  animation: alerta-chama 1.8s ease-in infinite;
}
.alerta-chamas span:nth-child(1) { left: -6%;  animation-delay: -.2s; }
.alerta-chamas span:nth-child(2) { left: 8%;   animation-delay: -1.1s; animation-duration: 2.1s; }
.alerta-chamas span:nth-child(3) { left: 20%;  animation-delay: -.6s; }
.alerta-chamas span:nth-child(4) { left: 33%;  animation-delay: -1.4s; animation-duration: 1.6s; }
.alerta-chamas span:nth-child(5) { left: 45%;  animation-delay: -.9s; animation-duration: 2.2s; }
.alerta-chamas span:nth-child(6) { left: 57%;  animation-delay: -.3s; }
.alerta-chamas span:nth-child(7) { left: 69%;  animation-delay: -1.6s; animation-duration: 1.7s; }
.alerta-chamas span:nth-child(8) { left: 81%;  animation-delay: -.7s; animation-duration: 2s; }
.alerta-chamas span:nth-child(9) { left: 92%;  animation-delay: -1.2s; }
@keyframes alerta-chama {
  0%   { transform: translateY(0) scale(1); opacity: .85; }
  70%  { opacity: .55; }
  100% { transform: translateY(-26vh) scale(.35); opacity: 0; }
}

/* Variações por tipo */
.alerta-teste .alerta-titulo,
.alerta-simulado .alerta-titulo { color: #fff; }
.alerta-teste::before, .alerta-simulado::before { animation-duration: 2.4s; }
.alerta-fumaca .alerta-chamas span {
  background: radial-gradient(circle at 50% 60%, #9aa0a6 0%, #5b6168 45%, transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .alerta-titulo { transform: rotateX(8deg); }
  .alerta-chamas { display: none; }
}

/* =========================================================
   Monitor (TVs / recepção)
   ========================================================= */
.pagina-monitor { background: #0d0f11; color: #e9edf0; min-height: 100vh; }
.monitor {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.2rem;
  padding: 2rem;
  text-align: center;
}
.monitor-relogio {
  margin: 0;
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
}
.monitor-estado { display: flex; align-items: center; gap: .8rem; }
.monitor-estado h1 { margin: 0; font-size: clamp(1.4rem, 3.5vw, 2.4rem); }
.monitor-luz {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #6b7280;
}
.monitor-luz.on { background: #2fb36a; box-shadow: 0 0 0 6px rgba(47, 179, 106, .2); }
.monitor-local { margin: 0; color: #a4adb6; font-size: 1.2rem; }
.monitor-dica { color: #7c858e; font-size: .95rem; margin: 0; }