/* avisos.css — Canal de avisos: o comunicado que todo cliente lê no widget.
   Duas colunas: publicar à esquerda, o que já foi publicado à direita.
   A ORDEM dos <link> no index.html importa (cascata).

   Nenhuma cor nova: tudo sai das variáveis de tema, como no Novidades. Cor
   própria teria que passar a auditoria de contraste nos 8 temas e o ganho não
   pagaria. Quem distingue o urgente é a barra lateral, não um vermelho novo. */

#avisos {
  position: fixed;
  inset: 0;
  background: rgba(12, 14, 18, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
#avisos-caixa {
  background: var(--superficie);
  border-radius: var(--r-l);
  width: 100%;
  max-width: 940px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
#avisos-caixa > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 12px;
  flex-shrink: 0;
}
#avisos-caixa h2 { font-size: 17px; font-weight: 700; font-family: var(--fonte-titulo); }
#avisos-fechar {
  background: var(--fundo);
  border: 0;
  color: var(--texto-2);
  border-radius: var(--r-s);
  width: 30px; height: 30px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
#avisos-fechar:hover { background: var(--borda); }

/* as duas colunas rolam por dentro: a caixa tem altura de janela e o cabeçalho
   fica parado, como no Novidades */
#avisos-corpo {
  display: flex;
  gap: 0;
  min-height: 0;
  flex: 1;
}
#avisos-form {
  width: 366px;
  flex-shrink: 0;
  border-right: 1px solid var(--borda);
  padding: 4px 20px 20px;
  overflow-y: auto;
}
/* sem permissão de publicar, a lista ocupa a caixa inteira */
#avisos-form.oculto { display: none; }
#avisos-publicados {
  flex: 1;
  min-width: 0;
  padding: 4px 20px 20px;
  overflow-y: auto;
}
#avisos-form h3,
#avisos-publicados h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-2);
  margin: 10px 0 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
#avisos-resumo { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--texto-3); font-style: normal; }

/* ---------- formulário ---------- */
#avisos-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--texto-2);
  margin-bottom: 12px;
}
#avisos-form input[type=text],
#avisos-form input:not([type]),
#avisos-form input[type=datetime-local],
#avisos-form textarea,
#avisos-form select {
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--texto);
  border-radius: var(--r-m);
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
#avisos-form textarea { resize: vertical; line-height: 1.5; min-height: 84px; }
#avisos-form input:focus,
#avisos-form textarea:focus,
#avisos-form select:focus { border-color: var(--verde-600); background: var(--superficie); }

/* caixa de seleção com marca própria: a nativa não veste tema */
.av-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--texto);
  cursor: pointer;
  margin-bottom: 8px !important;
  line-height: 1.4;
}
.av-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.av-check i {
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--borda);
  border-radius: 4px;
  background: var(--fundo);
  position: relative;
  transition: background .15s, border-color .15s;
}
.av-check input:checked + i { background: var(--verde-600); border-color: var(--verde-600); }
.av-check input:checked + i::after {
  content: "";
  position: absolute;
  left: 4.6px; top: 1.4px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.av-check input:focus-visible + i { box-shadow: 0 0 0 3px var(--verde-tinta); }

#av-alcance {
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  padding: 10px 12px 4px;
  margin-bottom: 12px;
}
#av-alcance legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-2);
  padding: 0 4px;
}
#av-sistemas {
  max-height: 148px;
  overflow-y: auto;
  border-top: 1px solid var(--borda);
  padding-top: 8px;
  margin-top: 2px;
}

.av-linha { display: flex; gap: 10px; }
.av-linha label { flex: 1; min-width: 0; }

#av-imagem-area { margin-bottom: 12px; }
#av-imagem-btn {
  background: var(--fundo);
  color: var(--texto-2);
  border: 1px dashed var(--borda);
  border-radius: var(--r-m);
  padding: 9px 12px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}
#av-imagem-btn:hover { color: var(--texto); border-color: var(--verde-600); }
#av-imagem-previa {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 7px 8px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
}
#av-imagem-mini {
  width: 42px; height: 42px;
  object-fit: cover;
  border-radius: var(--r-s);
  flex-shrink: 0;
  background: var(--borda);
}
#av-imagem-nome {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#av-imagem-remover {
  background: none;
  border: 0;
  color: var(--texto-2);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
#av-imagem-remover:hover { color: var(--alerta); }

.av-acoes { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; }
/* ⚠️ O gradiente é um tom MAIS ESCURO que o dos outros botões primários do
   painel, e não é descuido: branco sobre --verde-600 dá 3,77:1 e sobre o teal
   #0d9488 dá 3,74:1, os dois abaixo do mínimo de 4,5 para texto. Com verde-700
   e teal-700 são 5,48:1 e 5,47:1, medidos.
   Os outros botões verdes do painel (Enviar, novo sistema, org-acoes) têm o
   mesmo 3,77:1 e passam despercebidos porque nunca entraram na auditoria.
   Dívida anotada: trocar o fundo deles é mudança de identidade visual do
   painel inteiro e precisa de decisão do dono, não de um efeito colateral
   desta tela. */
#av-publicar {
  background: linear-gradient(135deg, var(--verde-700), #0f766e);
  color: #fff;
  border: 0;
  border-radius: var(--r-m);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
#av-publicar:hover { filter: brightness(1.08); }
#av-publicar:disabled { opacity: .6; cursor: default; filter: none; }
.av-feedback { font-size: 12px; color: var(--verde-texto); }
.av-feedback.erro { color: var(--alerta); }
.av-nota { font-size: 11.5px; color: var(--texto-2); line-height: 1.5; }

/* ---------- lista do que já foi publicado ---------- */
#avisos-lista { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.av-nada {
  font-size: 12.5px;
  color: var(--texto-2);
  line-height: 1.6;
  padding: 18px 14px;
  background: var(--fundo);
  border-radius: var(--r-cartao);
  text-align: center;
}
.av-item {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--verde-600);
  border-radius: var(--r-cartao);
  padding: 11px 13px;
}
/* fora do ar continua na lista (é o registro do que o cliente leu), mas
   recuado do que está valendo agora */
.av-item.fora { border-left-color: var(--borda); opacity: .72; }
.av-item.urgente { border-left-color: var(--alerta); }
.av-item-topo { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.av-item-topo b { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.av-item p {
  font-size: 12.5px;
  color: var(--texto-2);
  line-height: 1.55;
  white-space: pre-wrap;
  margin-bottom: 6px;
}
.av-item-img {
  max-width: 100%;
  max-height: 180px;
  border-radius: var(--r-s);
  display: block;
  margin-bottom: 7px;
}
.av-chip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .02em;
}
.av-chip.no-ar { background: var(--verde-tinta); color: var(--verde-texto); }
.av-chip.fora { background: var(--borda); color: var(--texto-2); }
.av-chip.urgente { background: var(--alerta-tinta); color: var(--alerta); }
/* --texto-2 e não --texto-3: o 3 já reprovou contraste em tema claro uma vez
   (.saude-dica, 11/09) e aqui mora o alcance e a validade, que é o que decide
   se o aviso ainda serve */
.av-item-pe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--texto-2);
}
.av-item-pe span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.av-tirar {
  margin-left: auto;
  background: none;
  border: 1px solid var(--borda);
  color: var(--texto-2);
  border-radius: var(--r-s);
  padding: 4px 9px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.av-tirar:hover { border-color: var(--alerta); color: var(--alerta); }

/* Lista estreita: o formulário vira a primeira faixa e a coluna some. Abaixo
   de 900px duas colunas deixam o campo de texto com ~150px, que não serve
   para escrever um comunicado. */
@media (max-width: 900px) {
  #avisos { padding: 10px; }
  #avisos-corpo { flex-direction: column; overflow-y: auto; }
  #avisos-form {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--borda);
    overflow: visible;
  }
  #avisos-publicados { overflow: visible; }
}