/* ── Portfolio genérico · página Capacidad (shared/modules/portfolio/capacidad-vista.js) ──
   Mismo aspecto que Capacidad de Portfolio Data (apps/portfolio-data/css, que no se toca),
   con prefijo pf-. Solo hay un tipo de trabajo: las tareas (--view-9). */
.pf-carga-seg.is-tarea, .pf-carga-leyenda i.is-tarea, .pf-carga-tipo.is-tarea::before { background: var(--view-9); }
.pf-desvio { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pf-desvio.is-late { color: var(--red); }
.pf-nota { margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--bg3); color: var(--text2); font-size: 12px; line-height: 1.5; }
.pf-mini-table { min-width: 0 !important; }
.pf-capacidad-toolbar { margin-bottom: 16px; }
/* Días/Semanas/Meses sin negrita; fecha, flechas y «Hoy» sobre la superficie
   clara (como el selector), no en gris. */
.pf-capacidad-toolbar .segmented .segmented-option,
.pf-capacidad-toolbar .segmented .segmented-option.active { font-weight: 400; }
/* Días/Semanas/Meses con aire: cada opción a su ancho y sin solaparse. */
.pf-capacidad-toolbar .segmented { flex: 0 0 auto; gap: 4px; }
.pf-capacidad-toolbar .segmented .segmented-option { flex: 0 0 auto; min-width: 72px; padding: 0 14px; }
.pf-capacidad-toolbar #cap-desde,
.pf-capacidad-toolbar .pf-cap-hoy,
.pf-capacidad-toolbar .btn-icon { background: var(--bg2); }
/* Capacidad · balance de demanda (cifras grandes y barra de carga por tipo). */
.pf-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.pf-cifras.is-compactas { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.pf-cifra { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--border); min-width: 0; }
.pf-cifra-valor { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--text); letter-spacing: -0.01em; }
.pf-cifras.is-compactas .pf-cifra-valor { font-size: 24px; }
.pf-cifra-etiqueta { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.pf-cifra-sub { font-size: 11.5px; color: var(--text3); }
.pf-cifra.is-verde .pf-cifra-valor { color: var(--green); }
.pf-cifra.is-ambar .pf-cifra-valor { color: var(--warning); }
.pf-cifra.is-rojo .pf-cifra-valor { color: var(--red); }
.pf-carga { position: relative; }
.pf-carga-pista { position: relative; display: flex; height: 22px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--border); overflow: visible; }
.pf-carga.is-compacta .pf-carga-pista { height: 12px; border-radius: 6px; }
.pf-carga-seg { display: block; height: 100%; width: var(--pf-width, 0); }
.pf-carga-seg:first-child { border-radius: 7px 0 0 7px; }
.pf-carga-marca { position: absolute; top: -4px; bottom: -4px; left: var(--pf-left, 0); width: 0; border-left: 2px solid var(--text); }
.pf-carga-marca.is-umbral { border-left: 2px dashed var(--text3); }
.pf-carga.is-compacta .pf-carga-marca { top: -3px; bottom: -3px; }
.pf-carga-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--text2); }
/* Popup de la carga de una persona: aire entre cifras, barra, avisos y tabla. */
.pf-carga-bloque { margin: 4px 0 18px; }
.pf-carga-nota { margin: 0 0 14px; }
.pf-carga-tabla { margin-top: 6px; }
.pf-carga-tabla .pf-tramo { white-space: nowrap; }
.pf-avisos-subtitulo { margin: 4px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); }
.pf-avisos-subtitulo:not(:first-child) { margin-top: 18px; }
.pf-carga-leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.pf-carga-leyenda-item.is-off { opacity: 0.45; text-decoration: line-through; }
/* Leyenda del gráfico de carga: el texto va del color de su marca (como las leyendas de Chart.js). */
.pf-carga-leyenda-item:has(i.is-tarea) { color: var(--view-9); }
.pf-carga-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.pf-carga-leyenda i.is-capacidad { width: 0; height: 14px; border-radius: 0; border-left: 2px solid var(--text); }
.pf-carga-leyenda i.is-umbral { width: 0; height: 14px; border-radius: 0; border-left: 2px dashed var(--text3); }
.pf-balance-avisos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-balance-aviso { padding: 6px 12px; border-radius: 999px; background: var(--bg3); font-size: 12px; color: var(--text2); }
.pf-balance-aviso.is-rojo { background: var(--red-soft); color: color-mix(in srgb, var(--red) 75%, var(--text)); }
.pf-balance-aviso.is-ambar { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 75%, var(--text)); }
/* Capacidad · carga por persona. */
.pf-personas { display: grid; gap: 4px; }
.pf-persona { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 3fr) 88px 110px; align-items: center; gap: 14px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.pf-persona:hover, .pf-persona:focus-visible { background: var(--bg3); }
.pf-persona-nombre { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.pf-persona-nombre span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-persona-pct { font-family: var(--font-display); font-size: 20px; font-weight: 600; text-align: right; }
.pf-persona-pct.is-verde { color: var(--green); }
.pf-persona-pct.is-ambar { color: var(--warning); }
.pf-persona-pct.is-rojo { color: var(--red); }
.pf-persona-pct.is-gris { color: var(--text3); font-size: 13px; }
.pf-persona-horas { font-size: 11.5px; color: var(--text2); text-align: right; }
/* Capacidad · mapa de calor (celdas pulsables con mini barra). */
.pf-cap-celda-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 6px 4px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 6px; }
.pf-cap-celda-btn:hover, .pf-cap-celda-btn:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); }
.pf-cap-mini { display: block; width: 80%; height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.pf-cap-mini-fill { display: block; height: 100%; width: var(--pf-width, 0); background: var(--text3); }
.pf-cap-mini-fill.is-verde { background: var(--green); }
.pf-cap-mini-fill.is-ambar { background: var(--warning); }
.pf-cap-mini-fill.is-rojo { background: var(--red); }
.pf-carga-tipo { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 12px; white-space: nowrap; }
.pf-carga-tipo::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.pf-carga-ini { display: block; font-size: 11px; }
.pf-sim-cifra { font-size: 18px; }
#page-capacidad { --pf-cap-primera: 280px; }
.pf-cap-tabla { table-layout: fixed; width: 100%; min-width: var(--pf-width, 900px); }
.pf-cap-tabla col.pf-cap-col-primera { width: var(--pf-cap-primera); }
.pf-cap-tabla th.pf-cap-persona, .pf-cap-tabla td.pf-cap-persona { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.pf-cap-tabla tbody th, .pf-cap-tabla tfoot th { text-transform: none; font-family: var(--font-body); letter-spacing: 0; font-size: 13px; color: var(--text); }
.pf-cap-persona .btn-link { display: block; font-weight: 600; }
.pf-cap-rol { display: block; font-size: 11px; font-weight: 400; }
.pf-cap-periodo { text-align: center; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; }
.pf-cap-celda { position: relative; text-align: center; vertical-align: middle; border-left: 2px solid var(--bg); }
.pf-cap-celda.is-verde { background: color-mix(in srgb, var(--green) 14%, transparent); }
.pf-cap-celda.is-ambar { background: color-mix(in srgb, var(--warning) 22%, transparent); }
.pf-cap-celda.is-rojo { background: color-mix(in srgb, var(--red) 22%, transparent); }
.pf-cap-celda.is-gris, .pf-cap-celda.is-vacia { background: transparent; }
.pf-cap-pct { display: block; font-weight: 700; font-family: var(--font-mono); font-size: 13px; }
.pf-cap-horas { display: block; font-size: 10px; color: var(--text2); font-family: var(--font-mono); }
.pf-cap-reduccion { position: absolute; top: 4px; right: 6px; font-size: 8px; color: var(--pink); }
.pf-cap-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; }
.pf-sim-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; margin-bottom: 8px; }
.pf-sim-alertas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.pf-sim-alertas li { padding: 6px 10px; border-radius: var(--radius-sm); background: var(--bg3); }
.pf-sim-alertas li.is-rojo { background: var(--red-soft); color: color-mix(in srgb, var(--red) 70%, var(--text)); }
.pf-sim-alertas li.is-ambar { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 70%, var(--text)); }
.pf-sim-alertas li.is-verde { background: var(--green-soft); color: color-mix(in srgb, var(--green) 70%, var(--text)); }
.pf-sim-tabla td .progress { width: 90px; margin-right: 8px; }
.pf-aviso-fila { --tone: var(--red); display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'tag tag' 'quien cifras' 'trabajos cifras'; gap: 6px 16px; align-items: center; padding: 10px 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: border-color 160ms ease-out, background-color 160ms ease-out; border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tone) 11%, var(--bg2)); }
.pf-aviso-fila.pf-aviso-ausencia { --tone: var(--warning); }
.pf-aviso-tag { grid-area: tag; justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 22%, transparent); color: color-mix(in srgb, var(--tone) 72%, var(--text)); }
.pf-aviso-quien { grid-area: quien; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; font-size: 13px; }
.pf-aviso-quien .text-muted { font-size: 11.5px; }
@media (hover: hover) and (pointer: fine) { .pf-aviso-fila:hover { border-color: color-mix(in srgb, var(--tone) 60%, transparent); background: color-mix(in srgb, var(--tone) 17%, var(--bg2)); } }
.pf-aviso-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Cifras del aviso con protagonismo: demanda / capacidad, exceso y %. */
.pf-aviso-cifras { grid-area: cifras; display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.pf-aviso-horas { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text); }
.pf-aviso-exceso { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--tone, var(--red)) 72%, var(--text)); }
.pf-aviso-pct { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tone, var(--red)) 22%, transparent); color: color-mix(in srgb, var(--tone, var(--red)) 72%, var(--text)); }
.pf-avisos-subtitulo { display: flex; align-items: center; gap: 6px; }
.pf-aviso-trabajos { grid-area: trabajos; display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; font-size: 12px; }
.pf-aviso-trabajos .pf-carga-tipo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .pf-aviso-fila { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'tag' 'quien' 'cifras' 'trabajos'; }
.pf-aviso-cifras { flex-wrap: wrap; } }

/* ── Capacidad · planificador del equipo (persona › trabajos en el tiempo) ── */
.pf-planificador { overflow-x: auto; border: 1px solid transparent; }
/* Rejilla común con el mapa de calor: misma primera columna (la del
   planificador) y el mismo ancho por periodo, para ver las semanas alineadas. */
.pf-planificador-lienzo { display: grid; gap: 0; min-width: var(--pf-width, 0); }
.pf-plan-fila { display: grid; grid-template-columns: var(--pf-cap-primera) minmax(0, 1fr); align-items: center; min-height: 30px; border-bottom: 1px solid var(--border); }
.pf-plan-nombre { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 10px 4px 0; font-size: 12px; overflow: hidden; }
.pf-plan-nombre a, .pf-plan-nombre > span:not(.pf-carga-tipo):not(.badge):not(.pf-aviso-carga) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-plan-nombre .pf-carga-tipo { margin-right: 0; }
.pf-plan-pista { position: relative; height: 100%; min-height: 26px; }
.pf-plan-eje .pf-plan-pista { min-height: 28px; }
.pf-plan-tick { position: absolute; top: 0; bottom: 0; left: var(--pf-left, 0); width: var(--pf-width, 0); padding: 6px 4px; border-left: 1px solid var(--border); font-size: 10.5px; font-family: var(--font-mono); color: var(--text3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-plan-cabecera { background: var(--bg3); border-top: 1px solid var(--border2); }
.pf-plan-cabecera .pf-plan-nombre { flex-wrap: wrap; row-gap: 2px; padding-left: 8px; font-size: 13px; }
.pf-plan-periodo { position: absolute; top: 5px; bottom: 5px; left: var(--pf-left, 0); width: var(--pf-width, 0); border-left: 1px solid var(--bg2); border-radius: 2px; background: color-mix(in srgb, var(--text3) 14%, transparent); }
.pf-plan-periodo.is-verde { background: color-mix(in srgb, var(--green) 32%, transparent); }
.pf-plan-periodo.is-ambar { background: color-mix(in srgb, var(--warning) 42%, transparent); }
.pf-plan-periodo.is-rojo { background: color-mix(in srgb, var(--red) 55%, transparent); }
.pf-plan-barra { position: absolute; top: 8px; height: 12px; left: var(--pf-left, 0); width: var(--pf-width, 0); border-radius: 4px; box-sizing: border-box; cursor: help; }
.pf-plan-barra.is-tarea { background: var(--view-9); }
.pf-plan-barra.is-terminado { opacity: 0.45; }
@media (max-width: 1100px) {
  .pf-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-persona { grid-template-columns: minmax(0, 1fr) 70px; }
  .pf-persona .pf-carga { grid-column: 1 / -1; grid-row: 2; }
  .pf-persona-horas { display: none; }
}
@media (max-width: 640px) { .pf-cifras.is-compactas { grid-template-columns: minmax(0, 1fr); } }
/* Catálogo › Equipo · calendario de reducciones (ficha del miembro). */
.pf-reducciones { display: grid; gap: 6px; }
.pf-reduccion { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 90px 34px; gap: 6px; align-items: center; }
@media (max-width: 640px) { .pf-reduccion { grid-template-columns: minmax(0, 1fr); } }

/* ── Capacidad · avisos de sobrecarga ─────────────────────────────── */
.pf-avisos-ok { --tone: var(--green); padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent); background: color-mix(in srgb, var(--tone) 11%, var(--bg2)); color: color-mix(in srgb, var(--tone) 72%, var(--text)); font-size: 13px; }
.pf-avisos-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
/* Tarjeta de aviso con el estilo de los resúmenes de Costes de la Evaluación (.eval-rl):
   tono por gravedad (--tone): sobrecarga = rojo, ausencia = aviso. */