/* ============================================================
   QAD Calidad — Badges, píldoras de estado, severidad y alertas
   Los colores funcionales (success/warning/danger) SOLO se usan
   aquí para severidad/estado — nunca de forma decorativa. No
   declarar aquí botones — ver buttons.css.
   ============================================================ */

/* ─── Badge genérico (compatibilidad con clases existentes) ──── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--color-border-subtle);
  color: var(--color-text-muted);
}
.badge-secondary    { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border-subtle); }
.badge-success,
.badge-approved,
.badge-completed,
.badge-active,
.badge-verified     { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning,
.badge-draft,
.badge-pending,
.badge-planned,
.badge-in_progress  { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger,
.badge-overdue,
.badge-non_conformity { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-blue,
.badge-primary,
.badge-reviewed     { background: var(--color-info-bg); color: var(--color-info-text); }
.badge-purple,
.badge-best_practice { background: var(--color-copper-soft-bg); color: var(--color-copper); }
.badge-observation  { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-opportunity  { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-cancelled    { background: var(--color-bg); color: var(--color-text-muted); }
.badge-red    { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-green  { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-yellow { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-gray   { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border-subtle); }
.badge-sm     { padding: 0.1rem 0.45rem; font-size: 0.625rem; }

/* ─── Estados (abierta / en revisión / cerrada): píldora suave ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
}
.status-green  { background: var(--color-success-bg); color: var(--color-success-text); }
.status-yellow { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-red    { background: var(--color-danger-bg); color: var(--color-danger-text); }
.status-complete { font-size: 0.75rem; color: var(--color-success-text); font-weight: 600; }
.status-pending  { font-size: 0.75rem; color: var(--color-warning-text); font-weight: 600; }

/* ─── Severidad: punto de color + etiqueta, nunca solo color ──── */
.severity { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--color-text-body); }
.severity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.severity-low .severity-dot,
.dot-green  { background: var(--color-success); }
.severity-medium .severity-dot,
.dot-yellow { background: var(--color-warning); }
.severity-high .severity-dot,
.dot-red    { background: var(--color-danger); }
.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }

/* ─── Selector de severidad tipo "chip" (formularios) ─────────── */
.severity-chip-group { display: flex; gap: 0.5rem; }
.severity-chip {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-body);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.severity-chip:hover { border-color: var(--color-copper); }
.severity-chip-active,
.severity-chip[aria-pressed="true"] {
  border-color: var(--color-copper);
  background: var(--color-copper-soft-bg);
  color: var(--color-copper);
  font-weight: 600;
}

/* ─── Alert / info box ─────────────────────────────────────────── */
.alert {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  border: 1px solid transparent;
}
.alert svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.05rem; }
.alert-info    { background: var(--color-info-bg); color: var(--color-info-text); border-color: #C7DCEC; }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: #EFD9A0; }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: #BEE0CD; }
.alert-danger  { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: #E9C3C3; }

/* ─── Mensajes flash (Django messages) ─────────────────────────── */
.messages-container { padding: 0.75rem 1.5rem 0; }
.message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  border-left: 3px solid transparent;
}
.message-success { background: var(--color-success-bg); color: var(--color-success-text); border-left-color: var(--color-success); }
.message-error   { background: var(--color-danger-bg); color: var(--color-danger-text); border-left-color: var(--color-danger); }
.message-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-left-color: var(--color-warning); }
.message-info    { background: var(--color-info-bg); color: var(--color-info-text); border-left-color: var(--color-accent); }

/* ─── Vigencia de evidencia (compliance) ───────────────────────── */
.validity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.validity-valid         { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid #BEE0CD; }
.validity-expiring_soon { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid #EFD9A0; }
.validity-expired       { background: var(--color-danger-bg); color: var(--color-danger-text); border: 1px solid #E9C3C3; }

/* ─── Chips varios (compliance) ────────────────────────────────── */
.evidence-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.evidence-type-document    { background: var(--color-info-bg); color: var(--color-info-text); border-color: #C7DCEC; }
.evidence-type-policy      { background: var(--color-copper-soft-bg); color: var(--color-copper); border-color: var(--color-copper-soft-border); }
.evidence-type-record      { background: var(--color-success-bg); color: var(--color-success-text); border-color: #BEE0CD; }
.evidence-type-certificate { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: #EFD9A0; }
.evidence-type-screenshot  { background: var(--color-copper-soft-bg); color: var(--color-copper); border-color: var(--color-copper-soft-border); }
.evidence-type-other       { background: var(--color-bg); color: var(--color-text-muted); border-color: var(--color-border-subtle); }

.evidence-count-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid #C7DCEC;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.evidence-count-chip:hover { background: #DCEAF5; }

.compliance-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid #C7DCEC;
}

.compliance-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--color-bg);
  color: var(--color-text-muted);
}