/*
 * Site Presence — estilos propios de las tres pantallas de zonas
 * (Dashboard / Zones / Zone Detail, plan 2026-09-05-site-presence-module F5a).
 *
 * NO redefine el patrón canónico de KPI dashboard: `.dashboard-card`, `.kpi-stat-card`,
 * `.kpi-icon-wrapper`, `.kpi-value/.kpi-label`, `.accent-*`, `.dashboard-banner`,
 * `.banner-title/.banner-subtitle` ya vienen de css/components/kpiDashboard.css, que se carga
 * global en _Host.cshtml (ver el encabezado de ese fichero: "cualquier pagina nueva que use este
 * patron NO debe redefinir estos selectores"). Aquí solo van variantes namespaced `.sp-*`.
 *
 * Fichero PLANO (no CSS scoped de Blazor) a propósito: la tabla de accesos de Zone Detail la pinta
 * DataTables desde JS, y sus filas no llevan el atributo `b-xxxxx` que el scoped CSS exige — un
 * `.razor.css` no las alcanzaría.
 */

/* Canvas del módulo. Las variables van en el contenedor de página (no en :root) por coherencia
   con el resto de dashboards. */
.sp-page {
    --sp-critical: var(--atlas-red-500);
    --sp-warning:  var(--atlas-amber-500);
    --sp-normal:   var(--atlas-emerald-500);
    --sp-muted:    var(--atlas-gray-400);
    background: var(--atlas-gray-100);
    min-height: 100%;
    padding: 1.5rem;
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */

/* Filtro global de empresa (SpCompanyFilter, plan 2026-09-16 D2): vive en el banner de las páginas
   del módulo, a la izquierda de los botones. Select compacto con icono y rótulo; se apila en móvil. */
.sp-company-filter { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .6rem; border: 1px solid var(--atlas-gray-200); border-radius: 8px; background: var(--atlas-white); }
.sp-company-filter > i { color: var(--atlas-blue-600); font-size: 1rem; }
.sp-company-label { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--atlas-gray-500); margin: 0; }
.sp-company-select { min-width: 200px; max-width: 320px; font-size: .8rem; }

/* Los fondos suaves se sacan del token con `color-mix`, que es el patrón de tokens.css
   (`--atlas-color-primary-soft`, `--atlas-sev-*-bg` del tema oscuro). Un rgba() literal aquí repetía
   el primitivo a mano y se quedaba fuera del sistema. */
.sp-badge-live { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: var(--atlas-radius-full); font-size: .65rem; font-weight: 700; letter-spacing: .05em; background: color-mix(in srgb, var(--sp-normal) 12%, transparent); color: var(--sp-normal); }
.sp-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sp-normal); animation: spPulse 1.6s infinite; }
@keyframes spPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-normal) 70%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sp-normal) 0%, transparent); }
}

.sp-widget-title { font-size: .95rem; font-weight: 700; color: var(--atlas-gray-900); }
.sp-widget-hint { font-size: .72rem; color: var(--atlas-gray-500); }
.sp-chart { height: 260px; width: 100%; position: relative; }
.sp-chart-sm { height: 220px; }
.sp-chart-lg { height: 300px; }

.sp-chart-loading {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--atlas-white) 72%, transparent); border-radius: var(--atlas-radius-md);
}

/* Skeleton del valor KPI (Bootstrap .placeholder dentro de .placeholder-glow) */
.kpi-skeleton { display: inline-block; width: 3.2rem; height: 1.4rem; border-radius: 6px; vertical-align: middle; }
.sp-kpi-sub { font-size: .72rem; color: var(--atlas-gray-500); margin-top: .15rem; }
.sp-kpi-sub .sp-strong { font-weight: 700; color: var(--atlas-gray-700); }

/* Marca un KPI DERIVADO (no viene del contrato, se calcula restando). Va en la etiqueta, no en el
   subtexto, para que se lea aunque nadie baje la vista. */
.sp-estimate-tag { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 .3rem; margin-left: .25rem; border-radius: var(--atlas-radius-xs); background: color-mix(in srgb, var(--atlas-gray-500) 13%, transparent); color: var(--atlas-gray-600); vertical-align: middle; }

/* ── Chips de estado ────────────────────────────────────────────────────── */

.sp-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.sp-chip-normal   { background: color-mix(in srgb, var(--sp-normal) 12%, transparent);   color: var(--atlas-emerald-800); }
.sp-chip-warning  { background: color-mix(in srgb, var(--sp-warning) 14%, transparent);  color: var(--atlas-amber-700); }
.sp-chip-critical { background: color-mix(in srgb, var(--sp-critical) 13%, transparent); color: var(--atlas-red-700); }
.sp-chip-muted    { background: color-mix(in srgb, var(--atlas-gray-500) 13%, transparent); color: var(--atlas-gray-700); }

/* Chips de las filas de la tabla de accesos. Los pinta DataTables desde zoneDetail.js, que ya no
   lleva ningún color: los pone aquí. */
.sp-tag-zone   { background: color-mix(in srgb, var(--atlas-teal-600) 13%, transparent);    color: var(--atlas-teal-700); }
.sp-tag-inside { background: color-mix(in srgb, var(--atlas-emerald-500) 13%, transparent); color: var(--atlas-emerald-800); }
.sp-tag-left   { background: color-mix(in srgb, var(--atlas-gray-500) 13%, transparent);    color: var(--atlas-gray-700); }

/* ── Feed de alertas ────────────────────────────────────────────────────── */

.sp-feed { max-height: 320px; overflow-y: auto; }
.sp-feed-item { padding: .6rem .8rem; border-radius: 8px; margin-bottom: .5rem; border-left: 4px solid transparent; background: var(--atlas-gray-50); }
.sp-feed-item:last-child { margin-bottom: 0; }
.sp-feed-item.sev-critical { background: color-mix(in srgb, var(--sp-critical) 5%, transparent);      border-left-color: var(--sp-critical); }
.sp-feed-item.sev-warning  { background: color-mix(in srgb, var(--sp-warning) 5%, transparent);       border-left-color: var(--sp-warning); }
.sp-feed-item.sev-info     { background: color-mix(in srgb, var(--atlas-blue-500) 5%, transparent);   border-left-color: var(--atlas-blue-500); }
.sp-feed-title { font-size: .8rem; font-weight: 600; color: var(--atlas-gray-900); }
.sp-feed-detail { font-size: .72rem; color: var(--atlas-gray-600); margin-top: .1rem; }
.sp-feed-time { font-size: .68rem; color: var(--atlas-gray-500); white-space: nowrap; }

/* Pie de la alerta: enlace a su ficha y acciones de cierre. Una alerta VIVA todavía sin fila
   persistida (alert_id = 0) no tiene ninguna de las dos cosas y aquí solo lleva su explicación. */
.sp-feed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }
.sp-feed-actions .btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .7rem; }
.sp-feed-link { font-size: .7rem; font-weight: 600; text-decoration: none; color: var(--atlas-blue-600); }
.sp-feed-link:hover { text-decoration: underline; }
.sp-feed-note { font-size: .68rem; color: var(--atlas-gray-500); }
.sp-feed-action-panel { margin-top: .5rem; padding: .5rem; border-radius: 8px; background: var(--atlas-white); border: 1px solid var(--atlas-gray-200); }
.sp-feed-action-panel textarea { font-size: .75rem; }

/* ── Lista de terminales con incidencia ─────────────────────────────────── */

.sp-term-item { padding: .6rem 0; border-bottom: 1px solid var(--atlas-gray-100); }
.sp-term-item:last-child { border-bottom: none; }
.sp-term-code { font-size: .8rem; font-weight: 600; color: var(--atlas-gray-900); }
.sp-term-meta { font-size: .7rem; color: var(--atlas-gray-500); }

/* ── Pantalla 2: rejilla de zonas ───────────────────────────────────────── */

.sp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.sp-search { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border: 1px solid var(--atlas-gray-200); border-radius: 8px; background: var(--atlas-white); box-shadow: 0 1px 2px rgba(0,0,0,.05); min-width: 280px; }
.sp-search > i { color: var(--atlas-gray-500); }
.sp-search input { border: none; outline: none; background: transparent; font-size: .85rem; color: var(--atlas-gray-900); font-family: inherit; flex: 1; padding: 0; }

.sp-filter-btn { border: 1px solid var(--atlas-gray-200); background: var(--atlas-white); color: var(--atlas-gray-600); border-radius: 999px; padding: .3rem .8rem; font-size: .78rem; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.sp-filter-btn:hover { border-color: var(--atlas-gray-300); color: var(--atlas-gray-900); }
.sp-filter-btn.active { background: var(--atlas-blue-600); border-color: var(--atlas-blue-600); color: var(--atlas-white); }
.sp-filter-btn .sp-filter-count { opacity: .75; margin-left: .25rem; font-weight: 700; }

.sp-zone-card { display: block; text-decoration: none; color: inherit; padding: 1.1rem 1.25rem; }
a.sp-zone-card:hover { text-decoration: none; color: inherit; }
.sp-zone-name { font-size: 1rem; font-weight: 700; color: var(--atlas-gray-900); }
.sp-zone-meta { font-size: .72rem; color: var(--atlas-gray-500); margin-top: .1rem; }
.sp-zone-figure { display: flex; align-items: baseline; gap: .4rem; margin: .75rem 0 .35rem; }
.sp-zone-present { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--atlas-gray-900); }
.sp-zone-capacity { font-size: .82rem; color: var(--atlas-gray-500); font-weight: 500; }

.sp-bar { height: 6px; border-radius: 999px; background: var(--atlas-gray-100); overflow: hidden; }
.sp-bar-fill { height: 100%; border-radius: 999px; background: var(--sp-normal); transition: width .3s; }
.sp-bar-fill.is-warning  { background: var(--sp-warning); }
.sp-bar-fill.is-critical { background: var(--sp-critical); }

.sp-children { margin-top: .8rem; border-top: 1px dashed var(--atlas-gray-200); padding-top: .6rem; }
.sp-child-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .74rem; padding: .15rem 0; color: var(--atlas-gray-600); }
.sp-child-name { font-weight: 600; color: var(--atlas-gray-700); }

/* Lista de zonas hijas ACOTADA (ronda 2026-09-16 #4): Ras Laffan tiene decenas de hijas y sin tope
   la tarjeta —y todo lo que comparte fila con ella— medía dos pantallas. ~4 filas visibles
   (4 × ~1.65rem de fila + la cabecera) y el resto por scroll. La altura es la del CONTENIDO, así que
   una zona con 2 hijas no reserva hueco vacío. */
.sp-children-scroll { max-height: 7.6rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .25rem; scrollbar-width: thin; }

/* Nivel de la zona en el árbol (L1 raíz, L2 hija…): chip pequeño en la meta de la tarjeta. */
.sp-level-tag { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .03em; padding: 0 .35rem; border-radius: var(--atlas-radius-xs); background: color-mix(in srgb, var(--atlas-blue-600) 12%, transparent); color: var(--atlas-blue-700); margin-right: .3rem; vertical-align: middle; }

/* Separador entre el eje de estado y el eje de nivel de la barra de filtros. */
.sp-toolbar-sep { width: 1px; height: 1.4rem; background: var(--atlas-gray-200); margin: 0 .15rem; }
.sp-filter-btn.sp-filter-level.active { background: var(--atlas-teal-600); border-color: var(--atlas-teal-600); }

.sp-ap-status { margin-top: .7rem; font-size: .72rem; color: var(--atlas-gray-500); display: flex; align-items: center; gap: .35rem; }
.sp-ap-status.is-down { color: var(--atlas-red-600); font-weight: 600; }

.sp-empty { text-align: center; color: var(--atlas-gray-500); padding: 3rem 1rem; }
.sp-empty i { font-size: 2.2rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* ── Pantalla 3: detalle de zona ────────────────────────────────────────── */

.sp-breadcrumb { font-size: .78rem; color: var(--atlas-gray-500); margin-bottom: .5rem; }
.sp-breadcrumb a { color: var(--atlas-blue-600); text-decoration: none; }
.sp-breadcrumb a:hover { text-decoration: underline; }

.sp-occupancy-figure { display: flex; align-items: baseline; gap: .5rem; }
.sp-occupancy-value { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--atlas-gray-900); }
.sp-occupancy-capacity { font-size: 1.1rem; color: var(--atlas-gray-500); font-weight: 500; }
.sp-occupancy-pct { font-size: .85rem; color: var(--atlas-gray-600); margin-top: .35rem; }

/* Card de ocupación HORIZONTAL (ronda 2026-09-16 #5): cifra + barra a la izquierda (ancho fijo),
   zonas hijas a la derecha ocupando el resto. Debajo de `lg` se apilan. La lista de hijas lleva su
   propio tope de altura (.sp-children-scroll), así que la card nunca crece con el nº de hijas. */
.sp-occupancy-card { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.sp-occupancy-main { flex: 0 0 280px; max-width: 100%; }
.sp-occupancy-children { flex: 1 1 320px; min-width: 0; }
.sp-occupancy-children .sp-children-flush { margin-top: 0; border-top: none; padding-top: 0; }
.sp-occupancy-children .sp-child-row { border-bottom: 1px dashed var(--atlas-gray-100); padding: .3rem 0; }
.sp-occupancy-children .sp-child-row:last-child { border-bottom: none; }
@media (min-width: 992px) {
    .sp-occupancy-main { border-right: 1px solid var(--atlas-gray-100); padding-right: 1.5rem; }
}

/* Nota de permiso: quien solo tiene View no ve el registro nominal. */
.sp-restricted { background: var(--atlas-gray-50); border: 1px dashed var(--atlas-gray-300); border-radius: 10px; padding: 1.5rem; text-align: center; color: var(--atlas-gray-600); font-size: .82rem; }
.sp-restricted i { font-size: 1.6rem; display: block; margin-bottom: .4rem; color: var(--atlas-gray-400); }

/* Nota informativa del banner de Zones: explica por qué la mayoría de tarjetas puede decir "No
   access point assigned" sin que nada esté roto. Chip, no párrafo: comparte línea con los
   contadores y no debe competir con el título. */
.sp-banner-note {
    font-size: .72rem;
    color: var(--atlas-gray-600);
    background: var(--atlas-gray-100);
    border: 1px solid var(--atlas-gray-200);
    border-radius: 999px;
    padding: .12rem .6rem;
}

/* ── Dashboard: fila "Where does the time go" (plan 2026-09-17-site-presence-time-use, P1b) ── */

/* Paleta FIJA de categoría de presencia (§3 del plan): es la misma que resuelve AtlasCharts en la
   comparativa por empresa, así la barra Razor y la gráfica ECharts hablan del mismo color. Van como
   variables de la card para que un segmento y su muestra de leyenda compartan la definición. */
.sp-tu-card {
    --sp-tu-site:         var(--atlas-emerald-500);
    --sp-tu-office:       var(--atlas-indigo-500);
    --sp-tu-canteen:      var(--atlas-amber-500);
    --sp-tu-unclassified: var(--atlas-slate-500);
}

.sp-tu-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .9rem; }
.sp-tu-head-meta { font-size: .78rem; font-weight: 500; color: var(--atlas-gray-500); }
.sp-tu-head-meta .sp-strong { font-weight: 700; color: var(--atlas-gray-700); }

/* Barra 100 % de CUATRO segmentos. El ancho lo pone Razor (style="width:NN%", patrón BarPct de
   Workforce). Sin hueco entre segmentos: un 1px de separación se leería como un quinto bucket. El
   gris de UNCLASSIFIED se pinta SIEMPRE (D4), aunque sea el 0 % — entonces mide 0 y no se ve, pero
   la leyenda lo sigue rotulando. */
.sp-tu-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--atlas-gray-100); }
.sp-tu-seg { height: 100%; min-width: 0; transition: width .3s ease; }
.sp-tu-seg-site         { background: var(--sp-tu-site); }
.sp-tu-seg-office       { background: var(--sp-tu-office); }
.sp-tu-seg-canteen      { background: var(--sp-tu-canteen); }
.sp-tu-seg-unclassified { background: var(--sp-tu-unclassified); }

.sp-tu-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .55rem; font-size: .76rem; color: var(--atlas-gray-600); }
.sp-tu-legend-item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.sp-tu-legend-item b { color: var(--atlas-gray-900); font-weight: 700; }
.sp-tu-legend-item small { font-size: .68rem; color: var(--atlas-gray-500); }
/* La muestra reutiliza las clases de segmento para el color: una sola fuente de verdad por bucket. */
.sp-tu-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* Los 3 KPIs en línea. No son .kpi-stat-card (esas van con icono y acento propio en la fila de
   arriba): aquí son cifras secundarias dentro de una card, más compactas. Debajo de `sm` se apilan. */
.sp-tu-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--atlas-gray-200); }
.sp-tu-kpi { min-width: 0; }
.sp-tu-kpi-value { font-size: 1.45rem; font-weight: 800; line-height: 1.1; color: var(--atlas-gray-900); }
.sp-tu-kpi-label { font-size: .72rem; font-weight: 600; color: var(--atlas-gray-600); margin-top: .2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.sp-tu-kpi-sub { font-size: .68rem; color: var(--atlas-gray-500); margin-top: .15rem; }
.sp-tu-kpi-sub .sp-strong { font-weight: 700; color: var(--atlas-gray-700); }
@media (max-width: 575.98px) {
    .sp-tu-kpis { grid-template-columns: 1fr; }
}

/* Delta del ratio productivo vs el rango anterior, en puntos. Verde arriba, rojo abajo, neutro a 0. */
.sp-tu-delta { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; color: var(--atlas-gray-600); }
.sp-tu-delta.is-up   { color: var(--atlas-emerald-600); }
.sp-tu-delta.is-down { color: var(--atlas-red-600); }

/* AtlasChartPanel dentro de la card: sin el chrome de .dashboard-card (sería una card dentro de
   otra), pero con el mismo padding lateral que el bloque de la izquierda para que las cabeceras
   queden alineadas. La altura la calcula la página según el nº de empresas. */
.sp-tu-chart-panel { padding: 0; }
.sp-tu-chart-panel .atlas-chart-panel-title { font-size: .82rem; }

/* Avisos honestos (too_large / una sola categoría / sin eventos / no disponible): caja con icono a
   la izquierda y texto a la derecha, alineados arriba. No se usa .sp-empty porque ese es un estado
   centrado y alto; esto es una fila de dashboard que no debe crecer de más. */
.sp-tu-notice { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-radius: 10px; border: 1px solid var(--atlas-gray-200); background: var(--atlas-gray-50); }
.sp-tu-notice > i { font-size: 1.4rem; line-height: 1; margin-top: .1rem; color: var(--atlas-gray-500); flex: 0 0 auto; }
.sp-tu-notice-title { font-size: .82rem; font-weight: 700; color: var(--atlas-gray-900); }
.sp-tu-notice-text { font-size: .74rem; color: var(--atlas-gray-600); margin-top: .15rem; }
.sp-tu-notice-text .sp-strong { font-weight: 700; color: var(--atlas-gray-800); }
.sp-tu-notice.is-warning { border-color: color-mix(in srgb, var(--sp-warning) 40%, transparent); background: color-mix(in srgb, var(--sp-warning) 7%, transparent); }
.sp-tu-notice.is-warning > i { color: var(--atlas-amber-700); }
.sp-tu-notice.is-muted > i { color: var(--atlas-gray-400); }

/* Pie de fila: la nota de honestidad de la salida del comedor, los person-days sin clock-out y el
   chip "Low sample". Misma tipografía que .atlas-chart-footer para que no desentone con los paneles. */
.sp-tu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--atlas-gray-100); font-size: .7rem; color: var(--atlas-gray-500); }
.sp-tu-foot > i { color: var(--atlas-gray-400); margin-right: .1rem; }
.sp-tu-foot .sp-strong { font-weight: 700; color: var(--atlas-gray-700); }

/* Esqueleto de la fila (Bootstrap .placeholder): una barra del alto de la real + 3 cifras. */
.sp-tu-skeleton-bar { display: block; width: 100%; height: 16px; border-radius: 999px; }
.sp-tu-skeleton-kpis { display: flex; gap: 1rem; margin-top: 1.1rem; }
.sp-tu-skeleton-kpis .placeholder { height: 1.45rem; border-radius: 6px; }

/* ── Heatmap (Punching Records tab) ─────────────────────────────────────────────────────────── */
/* F1: scroll vertical con cabecera y columna de nombre sticky. F5: la tabla no se estira más de lo
   que su contenido necesita (max-content) pero nunca queda más estrecha que el contenedor
   (min-width: 100%), así 1 fila o 200 filas quedan igual de bien encuadradas. */
.wf-heatmap-scroll { overflow-x: auto; overflow-y: auto; max-height: 540px; }
.wf-heatmap-table { width: max-content; min-width: 100%; white-space: nowrap; border-collapse: separate; border-spacing: 2px; }
.wf-heatmap-name-col { min-width: 200px; max-width: 280px; position: sticky; left: 0; background: var(--bs-body-bg); z-index: 2; }
.wf-heatmap-cell { width: 48px; min-width: 48px; max-width: 48px; text-align: center; font-size: .72rem; padding: .2rem .1rem; border-radius: 3px; vertical-align: middle; }
.wf-heatmap-weekend { background: var(--atlas-gray-100, #f0f0f0) !important; color: var(--atlas-gray-400, #aaa) !important; }
.wf-heatmap-zero { background: var(--atlas-gray-50, #f8f8f8); color: var(--atlas-gray-300, #ccc); }
.wf-heatmap-total { font-weight: 600; min-width: 60px; text-align: center; }

/* Cabecera sticky (F1): el thead flota al hacer scroll vertical, con fondo opaco para no dejar
   pasar filas por debajo. z-index por encima de las celdas normales pero por debajo de la esquina
   superior izquierda, que es sticky en los dos ejes a la vez y necesita ganar a ambas. */
.wf-heatmap-table thead th { position: sticky; top: 0; background: var(--bs-body-bg); z-index: 3; }
.wf-heatmap-table thead th.wf-heatmap-name-col { z-index: 4; }

/* Leyenda compacta bajo la tabla */
.wf-heatmap-legend { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wf-heatmap-legend-item { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--atlas-gray-600, #666); }
.wf-heatmap-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: 0 0 auto; }

/* F4/F6: cabecera del componente en una sola línea (título + categorías + búsqueda + rest days),
   sin el flex-wrap que la duplicaba a ancho normal. min-width:0 es necesario para que este item
   flex pueda encogerse por debajo de su contenido y scrollear en vez de desbordar la card. */
.wf-heatmap-controls { flex-wrap: nowrap; overflow-x: auto; min-width: 0; }
.wf-heatmap-controls .btn-group .btn { padding: .2rem .5rem; font-size: .76rem; }

/* F2/F3: selector de días de descanso (override de sesión, no persiste). Checkboxes compactos en
   fila; en anchos estrechos el propio grupo puede envolver sin romper el resto de la cabecera. */
.wf-heatmap-restdays { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.wf-heatmap-restdays-label { font-size: .7rem; color: var(--atlas-gray-500); white-space: nowrap; }
.wf-heatmap-restday-toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; line-height: 1; font-size: .68rem; font-weight: 600; border-radius: 4px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--atlas-gray-600); cursor: pointer; user-select: none; }
.wf-heatmap-restday-toggle.is-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

/* El ancho de .wf-bio-search vive en Workforce.razor.css, que es CSS aislado de ESE componente:
   sus reglas se compilan con el atributo de scope de Workforce.razor y no alcanzan al marcado
   interno de WorkforceHeatmap. Sin esto el buscador del heatmap se queda sin ancho propio y, ahora
   que la cabecera va en una sola fila sin wrap (F4/F6), se encoge contra los demás controles. */
.wf-heatmap-controls .wf-bio-search { width: 220px; min-width: 160px; max-width: 100%; flex: 0 1 auto; }

/* ── Person search typeahead (filter bar → WorkerProfile) ───────────────────────────────────── */
.wf-filter-search { position: relative; }
.wf-person-search-wrap { position: relative; }
.wf-person-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 4px 16px rgba(0,0,0,.15); max-height: 280px; overflow-y: auto; }
.wf-person-row { padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid var(--bs-border-color); }
.wf-person-row:last-child { border-bottom: none; }
.wf-person-row:hover { background: var(--bs-tertiary-bg); }