/* COSTEROS — Componentes reutilizables */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.page-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xl);
  line-height: 1.2;
}

.lead {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

.alert {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-primary);
  background: var(--color-info-bg);
}

.alert--warning {
  border-left-color: var(--color-accent);
  background: var(--color-warning-bg);
}

.alert--error {
  border-left-color: var(--color-contra);
  background: var(--color-error-bg);
}

.status-line {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
  .page-title {
    font-size: var(--font-size-xxl);
  }
}