/* ============================================================
   announcement.css — Banner de aviso flutuante
   Posicionado abaixo do #filter-row via JS (_reposition()).
   ============================================================ */

/* Base */
.ab {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1010;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;

  max-width: 92dvw;
  width: max-content;
  box-sizing: border-box;

  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  color: #1a1a1a;

  animation: ab-enter 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Entrada */
@keyframes ab-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Saída */
.ab-exit {
  animation: ab-exit 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes ab-exit {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* ---- Tipos ---- */

/* Warning */
.ab-warning {
  background-color: rgba(230, 140, 20, 0.88);
  color: #1a1a1a;
}
.ab-warning .ab-icon svg {
  stroke: #7a3d00;
}

/* Info */
.ab-info {
  background-color: rgba(20, 100, 220, 0.88);
  color: #ffffff;
}
.ab-info .ab-icon svg {
  stroke: #ffffff;
}

/* Error */
.ab-error {
  background-color: rgba(200, 30, 30, 0.90);
  color: #ffffff;
}
.ab-error .ab-icon svg {
  stroke: #ffffff;
}

/* ---- Elementos internos ---- */

.ab-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 1px;
}

.ab-icon svg {
  width: 16px;
  height: 16px;
}

.ab-message {
  flex: 1;
}

.ab-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 150ms, background 150ms;
  padding: 0;
  margin-left: 4px;
  align-self: flex-start;
  color: inherit;
}

.ab-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.12);
}

.ab-close svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
  .ab-warning {
    background-color: rgba(210, 120, 10, 0.92);
    color: #1a1a1a;
  }
  .ab-warning .ab-icon svg { stroke: #5a2800; }

  .ab-info {
    background-color: rgba(30, 110, 230, 0.92);
    color: #ffffff;
  }
  .ab-info .ab-icon svg { stroke: #ffffff; }

  .ab-error {
    background-color: rgba(200, 30, 30, 0.92);
    color: #ffffff;
  }
  .ab-error .ab-icon svg { stroke: #ffffff; }

  .ab-close:hover { background: rgba(0, 0, 0, 0.18); }
}

/* ---- Responsivo ---- */
@media (max-width: 480px) {
  .ab {
    font-size: 12px;
    padding: 7px 12px;
  }
}