/* ===== Badges base ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .875rem;
  line-height: 1;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text);
  white-space: nowrap;
}

/* Paleta extendida (puedes redefinirlas en variables_dinamicas.css si quieres) */
:root {
  --color-success: #22c55e;  /* fallback verde */
  --color-danger:  #ef4444;  /* fallback rojo  */
  --color-info:    #0ea5e9;  /* fallback azul  */
}

/* Helper para crear fondos suaves; fallback mantiene el borde si el browser no soporta color-mix */
.badge {
  --_bg: var(--color-card);
}

/* ===== Estados ===== */
/* Ingresado/a */
.badge.estado-ingresado,
.badge.estado-ingresada {
  color: var(--color-info);
  border-color: currentColor;
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
}

/* Asignado para Revisión */
.badge.estado-asignado-para-revision {
  color: var(--color-accent);
  border-color: currentColor;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* Con Resolución */
.badge.estado-con-resolucion {
  color: var(--color-success);
  border-color: currentColor;
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

/* Rechazada */
.badge.estado-rechazada {
  color: var(--color-danger);
  border-color: currentColor;
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

/* ===== Badge para "Comentario Resolución" ===== */
.badge-resolucion,
.badge-success { /* compat con lo que ya usabas */
  color: var(--color-success);
  border-color: currentColor;
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

/* Opcional: versión compacta para usar dentro de listas o tablas */
.badge.badge-sm {
  padding: .2rem .5rem;
  font-size: .775rem;
}

/* Opcional: iconitos (si algún día sumas íconos) */
.badge [data-icon] {
  display: inline-block;
  width: 1em;
  height: 1em;
}