/* ============================================================
   HUF — Componente: Listing (.hd-listing) — HVL §8.6
   ------------------------------------------------------------
   Vehículo: <hd-listing> · <hd-listing-main> · <hd-listing-rail>.

   Es el cuerpo del PATRÓN OFICIAL DE PÁGINA DE LISTADO: la región D
   (contenido) de una pantalla de listado, repartida entre la tabla y el
   rail de pendientes.

   Existe por HVL §8.5 (prioridad del espacio vertical): una tabla con 5
   filas dejaba 400px de fondo desnudo debajo. El rail no es relleno —
   es la cola de trabajo del módulo, y cada entrada trae su acción
   (§7.3). Cuando no hay pendientes, el rail no se renderiza y la tabla
   ocupa todo el ancho.

   Implementación de referencia: AdminPortal/Pages/Empresas/Index.cshtml.
   ============================================================ */

.hd-listing {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hd-space-4);
    /* Ocupa TODO el alto de la región, no el de su contenido (HVL §8.5
       regla 1): la tabla termina donde termina la pantalla. */
    height: 100%;
    min-height: 0;
    align-items: stretch;
}

.hd-listing--with-rail {
    /* 320px es el ancho de rail que fija HVL §7.2 zona D. */
    grid-template-columns: minmax(0, 1fr) 320px;
}

/* ── Columna principal — la tabla ─────────────────────────────
   `min-height: 0` permite que el scroll ocurra dentro y no empuje la
   página; el escalón L2 la separa del fondo sin necesidad de borde de
   acento (HVL §4.2). */
.hd-listing__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--hd-theme-surface);
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-md);
    overflow: auto;
}

/* El estado vacío ocupa la región entera, centrado — nunca una tira de
   80px bajo el encabezado (HVL §8.5 regla 5). */
.hd-listing__main .hd-empty-state {
    flex: 1;
    border: none;
    background: transparent;
}

/* ── Rail de pendientes ───────────────────────────────────────
   Cola de trabajo, no resumen. Subordinado: superficie L1 (chrome), no
   L2 (panel), para que nunca compita con la tabla. */
.hd-listing__rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--hd-color-bg-secondary);
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-md);
    overflow: hidden;
}

.hd-listing__rail-title {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    height: var(--hd-size-header);
    padding: 0 var(--hd-space-4);
    font-size: var(--hd-text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hd-theme-text-muted);
    border-bottom: 1px solid var(--hd-color-border);
    flex-shrink: 0;
}

/* El ícono de alerta va en el color de estado, no en acento: comunica
   "esto requiere atención", no "esto está activo" (HVL §4.2, §5.3). */
.hd-listing__rail-title .hd-icon {
    color: var(--hd-color-warning);
}

.hd-listing__rail-body {
    overflow-y: auto;
    min-height: 0;
}

/* Las entradas de pendiente van a sangre —su separador tiene que cruzar
   el rail entero para leerse como lista—, pero cualquier otro contenido
   del rail (un <hd-rank> con el desglose del turno, un bloque de texto)
   necesita su propio aire o queda pegado al borde. */
.hd-listing__rail-body > :not(.hd-listing__pendiente) {
    padding: var(--hd-space-4);
}

/* ── Entrada de pendiente ─────────────────────────────────────
   Motivo + acción EN LA MISMA FILA (HVL §7.2 zona B): un pendiente que
   obliga a buscar dónde actuar no es una cola de trabajo. */
.hd-listing__pendiente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-space-2);
    padding: var(--hd-space-3) var(--hd-space-4);
    border-bottom: 1px solid var(--hd-color-border);
}

.hd-listing__pendiente:last-child {
    border-bottom: none;
}

.hd-listing__pendiente-info {
    min-width: 0;
}

.hd-listing__pendiente-nombre {
    font-size: var(--hd-text-base);
    color: var(--hd-theme-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-listing__pendiente-motivo {
    font-size: var(--hd-text-micro);
    color: var(--hd-theme-text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* ── Móvil ────────────────────────────────────────────────────
   El rail pasa DEBAJO de la tabla: es subordinado, así que en una sola
   columna va después, no antes. */
@media (max-width: 1199.98px) {
    .hd-listing--with-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .hd-listing {
        height: auto;
    }

    .hd-listing__rail {
        max-height: 20rem;
    }
}