/* Início, mural, notificações e administração do mural. Usa as cores e variáveis do estilo.css. */

.busca { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; min-width: 220px; outline: none; }
.busca:focus { border-color: var(--accent); }

.faixa-aviso { display: block; background: var(--coral); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 12px; }

.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.ponto.ok { background: var(--ok); }
.ponto.ruim { background: var(--bad); }
.ponto.nd { background: var(--line); }

.grupo { display: grid; gap: 10px; }
.grupo h2 { margin: 0; }
.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.numero { display: grid; gap: 2px; background: var(--surface-2); border-radius: 12px; padding: 10px; }
.numero .rotulo { font-size: 12px; color: var(--muted); font-weight: 600; }
.numero b { font-size: 24px; line-height: 1.1; }
.numero small { color: var(--muted); }

.feed { display: grid; gap: 12px; }
.fixados { display: grid; gap: 12px; }
.pub.oficial { border-color: var(--coral); }
.cab-pub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cab-pub small { color: var(--muted); }
.texto-pub { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.aviso-hospede { margin: 0; font-size: 13px; font-weight: 700; color: var(--warn); }

.fotos { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.fotos.n1 { grid-template-columns: 1fr; }
.fotos img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.previas { display: flex; gap: 8px; flex-wrap: wrap; }
.previa { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }

.reacoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.reacao { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 16px; }
.reacao.on { border-color: var(--accent); background: var(--surface); }

.comentarios { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.comentario { display: flex; gap: 10px; align-items: flex-start; }
.comentario.resposta { margin-left: 34px; }
.comentario p { margin: 2px 0; overflow-wrap: anywhere; }
.comentario small { color: var(--muted); }
.perigo-texto { color: var(--bad); }

.marca-linha { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.lista-simples { margin: 0; padding-left: 18px; }

.notificacao { display: flex; justify-content: space-between; gap: 12px; padding: 10px 6px; border-top: 1px solid var(--line); }
.notificacao:first-child { border-top: 0; }
.notificacao.nova b { color: var(--coral); }
.notificacao small { color: var(--muted); white-space: nowrap; }

@media (max-width: 860px) {
  .busca { min-width: 0; width: 100%; }
  .fotos { grid-template-columns: 1fr; }
}