/* ==========================================================================
   status-badge.css: Etiqueta de estado
   --------------------------------------------------------------------------
   Forma propia (pill suave) y tipografía propia, construida sobre los
   colores semánticos de Bootstrap.
   ========================================================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--lib-radius-pill);
  font-size: var(--lib-font-size-xs);
  font-weight: var(--lib-font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.status-badge--sin-punto::before {
  display: none;
}

/* Activo / completado → éxito */
.status-badge--activo,
.status-badge--completado {
  background-color: var(--lib-success-50);
  color: var(--lib-success-700);
  border-color: var(--lib-success-200);
}

/* Pendiente → advertencia */
.status-badge--pendiente {
  background-color: var(--lib-warning-50);
  color: var(--lib-warning-700);
  border-color: var(--lib-warning-200);
}

/* Cancelado → peligro */
.status-badge--cancelado {
  background-color: var(--lib-danger-50);
  color: var(--lib-danger-700);
  border-color: var(--lib-danger-200);
}

/* En proceso → info */
.status-badge--proceso {
  background-color: var(--lib-info-50);
  color: var(--lib-info-700);
  border-color: var(--lib-info-200);
}

/* Borrador / inactivo → neutro */
.status-badge--borrador,
.status-badge--inactivo {
  background-color: var(--lib-surface-muted);
  color: var(--lib-text-muted);
  border-color: var(--lib-border);
}

/* Ajustes para modo oscuro: los tonos -50 son oscuros, se aclara el texto */
[data-bs-theme="dark"] .status-badge--activo,
[data-bs-theme="dark"] .status-badge--completado {
  color: var(--lib-success-300);
  border-color: var(--lib-success-800);
}

[data-bs-theme="dark"] .status-badge--pendiente {
  color: var(--lib-warning-300);
  border-color: var(--lib-warning-800);
}

[data-bs-theme="dark"] .status-badge--cancelado {
  color: var(--lib-danger-300);
  border-color: var(--lib-danger-800);
}

[data-bs-theme="dark"] .status-badge--proceso {
  color: var(--lib-info-300);
  border-color: var(--lib-info-800);
}

[data-bs-theme="dark"] .status-badge--borrador,
[data-bs-theme="dark"] .status-badge--inactivo {
  color: var(--lib-text-muted);
  border-color: var(--lib-border-strong);
}