/* Portfolio IA · estado vigente por fase (antes en shared/css/components/badges.css). */
/* Estado vigente por fase: F2 · Producción es una sola unidad semántica.
   El número de fase comparte el color del estado para que tarjetas y tabla
   lean exactamente igual. */
.phase-status-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.phase-status-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font: 500 10px/1.25 var(--font-mono);
  white-space: nowrap;
}

.phase-status-number {
  display: inline-flex;
  align-items: center;
  padding: 0;
  min-height: 0;
  color: currentColor;
}

.phase-status-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.phase-status-list.is-compact {
  gap: 4px;
}

.phase-status-list.is-compact .phase-status-number {
  min-height: 0;
  font-size: 9px;
}

.phase-status-list.is-compact .phase-status-item {
  min-height: 0;
  padding: 2px 6px;
  font-size: 9px;
}

.phase-status-list.is-minimal {
  gap: 5px;
}

.phase-status-list.is-minimal .phase-status-number {
  padding: 0;
  font-size: 10px;
}

.phase-status-list.is-minimal .phase-status-item {
  padding: 2px 6px;
  font-size: 9px;
}

/* Columna «IA Act» de la tabla de iniciativas y otras tablas: misma pieza que Fases («F1 · Riesgo bajo»),
   con el color del nivel (clase badge-*). Permite envolver en varias líneas dentro de la celda para no pisar las columnas a su derecha. */
.phase-status-list {
  max-width: 100%;
}
.phase-status-item.badge {
  max-width: 100%;
  white-space: normal;
  height: auto;
  line-height: 1.3;
  text-align: left;
}
.phase-status-item.badge .phase-status-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.table-wrap td .phase-status-item.badge {
  display: inline;
  max-width: 100%;
  white-space: normal;
  line-height: 2;
  text-align: left;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* El color de cada pastilla también sale de su clase (token del estado o del nivel), no solo de
   data-bd-color: así se pinta bien aunque el aplicador de variables dinámicas llegue tarde. */
.phase-status-item.phase-estado-1 { --bd-color: var(--ia-estado-1); }
.phase-status-item.phase-estado-2 { --bd-color: var(--ia-estado-2); }
.phase-status-item.phase-estado-3 { --bd-color: var(--ia-estado-3); }
.phase-status-item.phase-estado-4 { --bd-color: var(--ia-estado-4); }
.phase-status-item.phase-estado-5 { --bd-color: var(--ia-estado-5); }
.phase-status-item.phase-estado-6 { --bd-color: var(--ia-estado-6); }
.phase-status-item.phase-estado-7 { --bd-color: var(--ia-estado-7); }
.phase-status-item.phase-estado-8 { --bd-color: var(--ia-estado-8); }
.phase-status-item.phase-estado-9 { --bd-color: var(--ia-estado-9); }
.phase-status-item.phase-tono-semantic-value { --bd-color: var(--semantic-value); }
.phase-status-item.phase-tono-semantic-risk { --bd-color: var(--semantic-risk); }
.phase-status-item.phase-tono-warning { --bd-color: var(--warning); }
.phase-status-item.phase-tono-text2 { --bd-color: var(--text2); }
.phase-status-item.phase-tono-semantic-compliance { --bd-color: var(--semantic-compliance); }
.phase-status-item.phase-tono-semantic-knowledge { --bd-color: var(--semantic-knowledge); }
.phase-status-item.phase-tono-semantic-delivery { --bd-color: var(--semantic-delivery); }