/* Alerta meteorologico do INMET no portal publico (includes/alerta_clima.php, assets/js/alerta-clima.js).
 * WCAG 2.3.1: a pulsacao troca entre dois tons da MESMA cor (nunca claro/escuro forte) num ciclo de 1,2 s (menos de 1 vez por segundo,
 * bem abaixo do limite de 3 por segundo) e some com prefers-reduced-motion (cor fixa). Contraste do texto: AAA (7:1) nos dois tons. */
.alerta-clima--amarelo { --ac-bg: #ffd60a; --ac-bg2: #ffee58; --ac-fg: #000; }
.alerta-clima--laranja { --ac-bg: #ff9100; --ac-bg2: #ffb74d; --ac-fg: #000; }
.alerta-clima--vermelho { --ac-bg: #9b0000; --ac-bg2: #b00000; --ac-fg: #fff; }

@keyframes alerta-clima-pulso {
  0%, 100% { background-color: var(--ac-bg); }
  50% { background-color: var(--ac-bg2); }
}
@keyframes alerta-clima-borda {
  0%, 100% { border-color: var(--ac-bg); }
  50% { border-color: var(--ac-bg2); }
}

.alerta-clima-faixa {
  position: sticky; top: 0; z-index: 1000;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  box-sizing: border-box; width: 100%; padding: .55rem 1rem;
  background-color: var(--ac-bg); color: var(--ac-fg);
  border-bottom: 3px solid var(--ac-fg);
  animation: alerta-clima-pulso 1.2s ease-in-out infinite;
}
.alerta-clima-faixa[hidden] { display: none; }
.alerta-clima-faixa .bi { font-size: 1.4rem; flex: none; }
.alerta-clima-faixa-texto { flex: 1 1 14rem; min-width: 0; margin: 0; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }

.alerta-clima-btn {
  min-height: 2.75rem; padding: .4rem 1rem; cursor: pointer;
  font: inherit; font-weight: 700; color: #000; background: #fff; border: 2px solid #000; border-radius: .4rem;
}
.alerta-clima-btn:hover { background: #f1f1f1; }
.alerta-clima-btn:focus-visible, .alerta-clima-link:focus-visible, .alerta-clima-contatos a:focus-visible, .alerta-clima-prefs input:focus-visible {
  outline: 3px solid #000; outline-offset: 2px; box-shadow: 0 0 0 5px #fff;
}

.alerta-clima-dialogo {
  box-sizing: border-box; width: min(40rem, calc(100% - 1.5rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: auto;
  color: #111; background: #fff; border: 6px solid var(--ac-bg); border-radius: .75rem;
  animation: alerta-clima-borda 1.2s ease-in-out infinite;
}
.alerta-clima-dialogo::backdrop { background-color: rgba(0, 0, 0, .55); }
/* Fundo atras da janela na cor da gravidade, translucido (a pagina continua visivel); cor fixa por classe porque ::backdrop nem sempre herda variaveis. */
.alerta-clima-dialogo.alerta-clima--amarelo::backdrop { background-color: rgba(255, 214, 10, .55); animation: alerta-clima-fundo-amarelo 1.2s ease-in-out infinite; }
.alerta-clima-dialogo.alerta-clima--laranja::backdrop { background-color: rgba(255, 145, 0, .55); animation: alerta-clima-fundo-laranja 1.2s ease-in-out infinite; }
.alerta-clima-dialogo.alerta-clima--vermelho::backdrop { background-color: rgba(155, 0, 0, .55); animation: alerta-clima-fundo-vermelho 1.2s ease-in-out infinite; }
@keyframes alerta-clima-fundo-amarelo { 0%, 100% { background-color: rgba(255, 214, 10, .55); } 50% { background-color: rgba(255, 238, 88, .45); } }
@keyframes alerta-clima-fundo-laranja { 0%, 100% { background-color: rgba(255, 145, 0, .55); } 50% { background-color: rgba(255, 183, 77, .45); } }
@keyframes alerta-clima-fundo-vermelho { 0%, 100% { background-color: rgba(155, 0, 0, .55); } 50% { background-color: rgba(176, 0, 0, .45); } }
.alerta-clima-dialogo-cab { padding: .75rem 1rem; color: var(--ac-fg); background-color: var(--ac-bg); animation: alerta-clima-pulso 1.2s ease-in-out infinite; }
.alerta-clima-dialogo-cab { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.alerta-clima-x { min-width: 2.75rem; min-height: 2.75rem; padding: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #000; background: #fff; border: 2px solid #000; border-radius: .4rem; }
.alerta-clima-dialogo-cab h2 { margin: 0; font-size: 1.3rem; line-height: 1.3; color: inherit; }
.alerta-clima-dialogo-corpo { padding: 1rem; font-size: 1.05rem; line-height: 1.55; }
.alerta-clima-dialogo-corpo p { margin: 0 0 .75rem; overflow-wrap: anywhere; }
.alerta-clima-evento { font-size: 1.15rem; font-weight: 700; }
.alerta-clima-dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem; margin: 0 0 .75rem; }
.alerta-clima-dados dt { font-weight: 700; }
.alerta-clima-dados dd { margin: 0; }
.alerta-clima-proximos { margin: 0 0 .75rem; padding-left: 1.25rem; }
.alerta-clima-link, .alerta-clima-contatos a { color: #00305a; font-weight: 700; text-decoration: underline; }
.alerta-clima-prefs { display: grid; gap: .5rem; padding-top: .75rem; border-top: 1px solid #595959; }
.alerta-clima-prefs label { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; cursor: pointer; }
.alerta-clima-prefs input { width: 1.25rem; height: 1.25rem; flex: none; }
.alerta-clima-dialogo-rodape { display: flex; justify-content: flex-end; padding: 0 1rem 1rem; }
.alerta-clima-btn--fechar { color: #fff; background: #111; border-color: #111; }
.alerta-clima-btn--fechar:hover { background: #333; }

@media (prefers-reduced-motion: reduce) {
  .alerta-clima-faixa, .alerta-clima-dialogo, .alerta-clima-dialogo-cab, .alerta-clima-dialogo::backdrop { animation: none !important; }
}
@media print { .alerta-clima-faixa { position: static; animation: none; } .alerta-clima-dialogo { display: none; } }