/* 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)); }

/* Área (Portfolio IA y Portfolio Data) y empresa / unidad de negocio (las tres
   apps): un pastel fijo por valor (tokens --area-N / --empresa-N) sobre .badge-tono.
   El tono lo eligen areaBadge / unidadBadge / empresaTono (shared/js/ui/badges.js). */
.badge-area-1 { --tono: var(--area-1); }
.badge-area-2 { --tono: var(--area-2); }
.badge-area-3 { --tono: var(--area-3); }
.badge-area-4 { --tono: var(--area-4); }
.badge-area-5 { --tono: var(--area-5); }
.badge-area-6 { --tono: var(--area-6); }
.badge-area-7 { --tono: var(--area-7); }
.badge-area-8 { --tono: var(--area-8); }
.badge-area-9 { --tono: var(--area-9); }
.badge-area-10 { --tono: var(--area-10); }
.badge-area-11 { --tono: var(--area-11); }
.badge-area-12 { --tono: var(--area-12); }
.badge-area-13 { --tono: var(--area-13); }
.badge-area-14 { --tono: var(--area-14); }
.badge-area-15 { --tono: var(--area-15); }
.badge-area-16 { --tono: var(--area-16); }
.badge-empresa-1 { --tono: var(--empresa-1); }
.badge-empresa-2 { --tono: var(--empresa-2); }
.badge-empresa-3 { --tono: var(--empresa-3); }
.badge-empresa-4 { --tono: var(--empresa-4); }
.badge-empresa-5 { --tono: var(--empresa-5); }
.badge-empresa-6 { --tono: var(--empresa-6); }
.badge-empresa-7 { --tono: var(--empresa-7); }
.badge-empresa-8 { --tono: var(--empresa-8); }

.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)); }

/* Número de fase (faseBadge): ancho fijo y cifras tabulares, centrado, para que todas las
   fases queden alineadas en su columna (antes «1» era más estrecho que «3»). */
.badge.badge-fase { display: inline-flex; justify-content: center; min-width: 2.4em; font-variant-numeric: tabular-nums; }