/* ============================================================
   HUF — Componente: WorkQueue (.hd-work-queue) — HVL §7.2 zona B
   ------------------------------------------------------------
   Vehículo: <hd-work-queue> + <hd-work-queue-item> (AdminPortal/
   TagHelpers/HdWorkQueueTagHelper.cs). Patrón Workspace v1, aprobado y
   congelado el 2026-08-07 (HVL §11.1 #21-26).

   La urgencia se lee en DOS señales, nunca solo en el color del borde:
   la severidad también escala el ícono (18/22/32 — los únicos tamaños
   válidos de HVL §6.11, nunca valores intermedios inventados) y el
   peso del título. "warning" es el tamaño base: las reglas de abajo
   solo describen lo que cambia respecto a él, no lo repiten.
   ============================================================ */

.hd-work-queue {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
}

.hd-work-queue__item {
    display: flex;
    align-items: center;
    gap: var(--hd-space-3);
    padding: var(--hd-space-3) var(--hd-space-4);
    background: var(--hd-theme-surface);
    border: 1px solid var(--hd-color-border);
    border-left-width: 3px;
    border-radius: var(--hd-radius-sm);
}

.hd-work-queue__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--hd-radius-sm);
}

.hd-work-queue__body {
    flex: 1;
    min-width: 0;
}

.hd-work-queue__title {
    font-size: var(--hd-text-base);
    font-weight: 600;
    color: var(--hd-theme-text);
}

.hd-work-queue__subtitle {
    margin-top: 2px;
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
}

.hd-work-queue__action {
    flex-shrink: 0;
}

/* ── Severidad = tipo (color del borde) + urgencia (tamaño) ───── */
.hd-work-queue__item--danger {
    border-left-color: var(--hd-color-error);
    border-left-width: 4px;
}

.hd-work-queue__item--danger .hd-work-queue__icon {
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.14);
    color: var(--hd-color-error);
}

.hd-work-queue__item--danger .hd-work-queue__title {
    font-size: var(--hd-text-title);
    font-weight: 700;
}

.hd-work-queue__item--warning {
    border-left-color: var(--hd-color-warning);
}

.hd-work-queue__item--warning .hd-work-queue__icon {
    background: rgba(245, 158, 11, 0.14);
    color: var(--hd-color-warning);
}

.hd-work-queue__item--info {
    border-left-color: var(--hd-color-info);
    border-left-width: 2px;
}

.hd-work-queue__item--info .hd-work-queue__icon {
    width: 26px;
    height: 26px;
    background: rgba(0, 149, 255, 0.14);
    color: var(--hd-color-info);
}

.hd-work-queue__item--info .hd-work-queue__title {
    font-weight: 500;
}

/* Una acción que cambia estado es un <form>+POST, no un enlace — igual
   que ya resuelve tables.css §"Acciones de fila". Un <form> es de
   bloque por defecto y duplicaría la altura de la fila. */
.hd-work-queue__action form {
    display: inline-block;
}

@media (max-width: 575.98px) {
    .hd-work-queue__item {
        flex-wrap: wrap;
    }

    .hd-work-queue__action {
        width: 100%;
    }

    .hd-work-queue__action .hd-btn {
        width: 100%;
    }
}