/* ============================================================
   HUF — Componente: Workspace (.hd-workspace) — HVL §7.2
   ------------------------------------------------------------
   Vehículo: <hd-workspace> · <hd-workspace-main> · <hd-workspace-queue>
   · <hd-workspace-table> · <hd-workspace-rail> (AdminPortal/TagHelpers/
   HdWorkspaceTagHelper.cs).

   Es la región D de HVL §8.1 cuando la pantalla ES un Workspace: reparte
   el alto fijo entre la cola de trabajo (zona B, dominante, ≥40%/320px),
   la banda operativa (zona C, el resto) y el rail de indicadores (zona
   D, 320px, opcional). Mismo mecanismo de grid que .hd-listing
   (listing.css), pero con dos zonas apiladas en la columna principal en
   vez de una sola tabla.

   Patrón v1, aprobado y congelado el 2026-08-07 (HVL §11.1 #21-26).
   Implementación de referencia: AdminPortal/Pages/Dashboard.cshtml
   ("Centro de operaciones").
   ============================================================ */

.hd-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hd-space-4);
    height: 100%;
    min-height: 0;
}

.hd-workspace--with-rail {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.hd-workspace__main {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-4);
    min-width: 0;
    min-height: 0;
}

/* Zona B — cola de trabajo: dominante, hasta 320px/55% cuando tiene
   pendientes suficientes para llenarlos (HVL §7.2), con scroll propio
   si hay más de los que caben. Sin min-height: forzar un piso de altura
   con 1-2 pendientes deja una franja vacía — exactamente lo que §8.5
   prohíbe (§11.1 #19). El espacio que la cola no necesita lo hereda la
   banda operativa (flex:1 en .hd-workspace__table), no queda muerto. */
.hd-workspace__queue {
    flex: 0 1 auto;
    max-height: 55%;
    overflow-y: auto;
}

/* Zona C — banda operativa: el resto del alto, con su propio scroll (el
   encabezado de <hd-table> ya es sticky, HVL §6.7). */
.hd-workspace__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--hd-theme-surface);
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-md);
    overflow: auto;
}

.hd-workspace__table .hd-table {
    flex: 1;
}

.hd-workspace__table .hd-empty-state {
    flex: 1;
    border: none;
    background: transparent;
}

/* Zona D — rail de indicadores: subordinado, superficie de chrome (L1),
   nunca L2, para que no compita con la banda operativa. Mismo criterio
   que .hd-listing__rail (listing.css). */
.hd-workspace__rail {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    min-height: 0;
    padding: var(--hd-space-3);
    background: var(--hd-color-bg-secondary);
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-md);
    overflow-y: auto;
}

/* Bajo 1200px se relaja el alto fijo (HVL §7.2: "en <992px esta regla se
   relaja y la página scrollea normalmente" — aquí un poco antes, en
   cuanto el rail ya no cabe como columna, para no dejar una columna de
   320px angosta contra una principal comprimida). */
@media (max-width: 1199.98px) {
    .hd-workspace--with-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .hd-workspace {
        height: auto;
    }

    .hd-workspace__queue {
        max-height: none;
    }

    .hd-workspace__rail {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hd-workspace__rail > * {
        flex: 1 1 220px;
    }
}

/* ── Zona C con pestañas ───────────────────────────────────────
   Cuando la banda operativa tiene más de una lista de trabajo, se parte en
   pestañas y no en secciones apiladas: apiladas, la de abajo nace fuera de
   la vista y nadie la encuentra. La tira tiene que quedarse quieta y hacer
   scroll SOLO el panel activo — sin esto, `.hd-workspace__table` scrollea
   entero y las pestañas se van hacia arriba con las filas.

   `min-height: 0` en los dos niveles: sin él, un hijo flex no baja de su
   alto de contenido y la cáscara de alto definido (HVL §7.2) se desborda
   por abajo en vez de dar scroll interno. */
.hd-workspace__table > .hd-tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.hd-workspace__table > .hd-tabs > .hd-tabs__list {
    flex: 0 0 auto;
    padding: var(--hd-space-3) var(--hd-space-3) var(--hd-space-2);
}

/* `overflow` va en TODOS los paneles, visibles u ocultos. Ponerlo solo bajo
   `:not([hidden])` parece equivalente y no lo es: `initStickyFirst` de
   hd-table.js busca el scroller subiendo por el DOM hasta el primer ancestro
   con `overflow-x: auto|scroll`, y lo hace UNA vez al cargar. Con la regla
   condicionada, el panel de una pestaña que nace oculta todavía no era
   scroller, el motor observaba `.hd-workspace__table` en su lugar, y al abrir
   la pestaña la primera columna nunca se fijaba: la tabla de segmentos
   desbordaba 402px a 1440 y al deslizarla se perdía de vista el nombre del
   cliente — justo el defecto de ADR-073, reintroducido por la puerta de atrás.
   Medido en el navegador: `stickyFirst` false en la pestaña 2 y true en la 1. */
.hd-workspace__table > .hd-tabs > .hd-tabs__panel {
    flex: 1;
    min-height: 0;
    padding-top: 0;
    overflow: auto;
}

/* `display: flex` sí queda condicionado: ganaría contra el `display: none`
   que el navegador aplica a [hidden] y las tres pestañas se verían a la vez. */
.hd-workspace__table > .hd-tabs > .hd-tabs__panel:not([hidden]) {
    display: flex;
    flex-direction: column;
}

/* ── Grupo del rail con micro-etiqueta ─────────────────────────
   Un <hd-rank> solo no dice qué mide. Con un ranking en el rail bastaba el
   contexto; con dos (horas pico y segmentos) hace falta el rótulo, que es
   el título del widget que HVL §7.6 le niega al gráfico. */
.hd-workspace__rail-group {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
}

.hd-workspace__rail-group-label {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    margin: 0;
    color: var(--hd-theme-text-muted);
    font-size: var(--hd-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}