.acb-callout {
  padding: 16px 20px;
  margin: 24px 0;
  line-height: 1.6;
  font-size: 15px;
}

.acb-callout__content {
  display: inline;
}

.acb-callout__content p {
  margin: 0;
}

.acb-callout__content strong,
.acb-callout__content b {
  color: inherit;
}

.acb-callout__content a {
  color: #8562ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.acb-callout__content a:hover {
  color: #b7a4fb;
}

/* Default - Violeta */
.acb-callout--default {
  background: rgba(113, 61, 255, 0.1);
  border-left: 4px solid #8562ff;
  border-radius: 0 8px 8px 0;
}

/* Warning - Amarillo */
.acb-callout--warning {
  background: rgba(255, 180, 50, 0.08);
  border-left: 4px solid #ffb432;
  border-radius: 0 8px 8px 0;
}

/* Error - Rojo */
.acb-callout--error {
  background: rgba(239, 68, 68, 0.08);
  border-left: 4px solid #ef4444;
  border-radius: 0 8px 8px 0;
}

/* Success - Verde */
.acb-callout--success {
  background: rgba(34, 197, 94, 0.08);
  border-left: 4px solid #22c55e;
  border-radius: 0 8px 8px 0;
}

/* Info - Azul */
.acb-callout--info {
  background: rgba(59, 130, 246, 0.08);
  border-left: 4px solid #3b82f6;
  border-radius: 0 8px 8px 0;
}

/* Light mode override */
@media (prefers-color-scheme: light) {
  .acb-callout {
    border-color: #e0e0e0;
    background: #fafafa;
  }

  .acb-callout__content a {
    color: #713dff;
  }

  .acb-callout__content a:hover {
    color: #5a2fd6;
  }
}