.tb-aviso {
  display: block;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.tb-aviso[hidden] { display: none; }

.tb-aviso__texto { display: block; }

.tb-aviso__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.tb-aviso__acao {
  font-size: var(--fs-xs);
  padding: 7px 13px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.tb-aviso--erro {
  background: var(--neg-fundo);
  border-color: color-mix(in srgb, var(--neg) 28%, transparent);
  color: color-mix(in srgb, var(--neg) 76%, var(--texto));
}

.tb-aviso--ok {
  background: var(--marca-fundo);
  border-color: color-mix(in srgb, var(--marca) 28%, transparent);
  color: color-mix(in srgb, var(--marca) 76%, var(--texto));
}

.tb-aviso--alerta {
  background: var(--alerta-fundo);
  border-color: color-mix(in srgb, var(--alerta) 28%, transparent);
  color: color-mix(in srgb, var(--alerta) 76%, var(--texto));
}

.tb-aviso--info {
  background: var(--info-fundo);
  border-color: color-mix(in srgb, var(--info) 28%, transparent);
  color: color-mix(in srgb, var(--info) 76%, var(--texto));
}

.tb-botao--carregando {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  cursor: progress;
}

.tb-botao__giro {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: tb-giro 0.7s linear infinite;
  flex: none;
}

@keyframes tb-giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .tb-botao__giro { animation-duration: 2.4s; }
}