/* Badges */

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500;
  font-family: var(--font-mono);
  line-height: 1.25;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.badge-delivery   { background: var(--accent-soft);  color: color-mix(in srgb, var(--accent) 75%, var(--text)); }

.badge-value  { background: var(--green-soft);   color: color-mix(in srgb, var(--green) 75%, var(--text)); }

.badge-cost  { background: var(--amber-soft);   color: color-mix(in srgb, var(--amber) 75%, var(--text)); }

.badge-warning { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 70%, var(--text)); }

.badge-risk    { background: var(--red-soft);     color: color-mix(in srgb, var(--red) 75%, var(--text)); }

.badge-knowledge   { background: var(--pink-soft);    color: color-mix(in srgb, var(--pink) 75%, var(--text)); }

.badge-compliance   { background: var(--teal-soft);    color: color-mix(in srgb, var(--teal) 75%, var(--text)); }

.badge-neutral   { background: var(--bg4);          color: color-mix(in srgb, var(--text2) 75%, var(--text)); }

/* Categorización de coste: rampa de grises PASTEL, un tono por categoría. El
   fondo mezcla una proporción baja de --text sobre --bg2 (máx. ~46%), de modo
   que ningún paso llega al negro/blanco: se queda en grises suaves. El texto es
   siempre --text (oscuro sobre claro en tema claro, claro sobre oscuro en tema
   oscuro), lo que mantiene el contraste en ambos temas. El borde tenue da
   definición a los tonos más suaves, casi al nivel de la superficie. */
.badge-catgray-1,.badge-catgray-2,.badge-catgray-3,.badge-catgray-4,
.badge-catgray-5,.badge-catgray-6,.badge-catgray-7,.badge-catgray-8,.badge-catgray-9 {
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text);
}
.badge-catgray-1 { background: color-mix(in srgb, var(--text) 4%,  var(--bg2)); }
.badge-catgray-2 { background: color-mix(in srgb, var(--text) 8%,  var(--bg2)); }
.badge-catgray-3 { background: color-mix(in srgb, var(--text) 12%, var(--bg2)); }
.badge-catgray-4 { background: color-mix(in srgb, var(--text) 16%, var(--bg2)); }
.badge-catgray-5 { background: color-mix(in srgb, var(--text) 20%, var(--bg2)); }
.badge-catgray-6 { background: color-mix(in srgb, var(--text) 24%, var(--bg2)); }
.badge-catgray-7 { background: color-mix(in srgb, var(--text) 28%, var(--bg2)); }
.badge-catgray-8 { background: color-mix(in srgb, var(--text) 32%, var(--bg2)); }
.badge-catgray-9 { background: color-mix(in srgb, var(--text) 36%, var(--bg2)); }

.badge-muted  { background: transparent;         color: var(--text2); }

.badge-capex  { background: var(--capex-soft);   color: color-mix(in srgb, var(--capex) 75%, var(--text)); }

.badge-opex   { background: var(--opex-soft);    color: color-mix(in srgb, var(--opex) 75%, var(--text)); }
/* Badge de tono pastel libre: la clase que lo usa fija --tono (p. ej. empresa o
   año en Hub Presupuestario). Mismo patrón suave que CAPEX/OPEX. */
.badge-tono   { background: color-mix(in srgb, var(--tono, var(--text3)) 24%, transparent); color: color-mix(in srgb, var(--tono, var(--text3)) 58%, var(--text)); }

.scope-badge-estudiante { background: color-mix(in srgb, var(--scope-estudiante) 18%, transparent); color: color-mix(in srgb, var(--scope-estudiante) 60%, var(--text)); }

.scope-badge-docente { background: color-mix(in srgb, var(--scope-docente) 18%, transparent); color: color-mix(in srgb, var(--scope-docente) 60%, var(--text)); }

.scope-badge-operaciones { background: color-mix(in srgb, var(--scope-operaciones) 18%, transparent); color: color-mix(in srgb, var(--scope-operaciones) 60%, var(--text)); }

.scope-badge-empleado { background: color-mix(in srgb, var(--scope-empleado) 18%, transparent); color: color-mix(in srgb, var(--scope-empleado) 60%, var(--text)); }