/* ============================================================
   HUF — Componente: Sidebar (.hd-sidebar) — HVL §6.3
   ------------------------------------------------------------
   "Es una consola montada en un rack, no un menú." El riel técnico es
   parte de la firma visual de Hednora (HVL §4, elemento 1) — línea
   vertical permanente, visible en ambos anchos, con marcas horizontales
   en cada separador de grupo.

   Consumo (HVL §6, "Interfaz pública oficial" — una vista NUNCA escribe
   estas clases a mano; el markup de abajo es lo que emiten las
   TagHelpers, documentado aquí solo para quien mantiene el CSS):

     <hd-sidebar>
       <hd-sidebar-link href="/dashboard" icon="gauge" active="true">Dashboard</hd-sidebar-link>

       <hd-sidebar-group label="Miembros">
         <hd-sidebar-link href="/alertas" icon="bell" badge="3">Alertas</hd-sidebar-link>
       </hd-sidebar-group>
     </hd-sidebar>

   Los íconos van por <hd-icon> sobre el sprite de Lucide (HVL §5.5/§6.11);
   `bi-*` está prohibido en cualquier pantalla migrada.

   `data-hd-tooltip` en cada link es lo que permite mostrar el nombre
   como tooltip técnico cuando el sidebar está colapsado (no requiere
   JS: es CSS puro, ::after + :hover/:focus-visible).
   Ejemplos de uso → docs/hednora-ui-framework-guide.md §Sidebar.
   ============================================================ */

.hd-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
    padding: var(--hd-space-4) 0;
    width: 100%;
    min-height: 100vh;
    /* max-height acota el scroll interno del sidebar (overflow-y: auto);
       resuelta contra el viewport grande queda tapada por la barra de
       direcciones en móviles reales — mismo bug que .hd-modal, ver
       modals.css. `100svh` lo corrige. */
    max-height: 100vh;
    max-height: 100svh;
    background: var(--hd-color-bg-secondary);
    overflow-x: hidden;
    overflow-y: auto;
    transition: width var(--hd-motion-standard) var(--hd-ease);
}

/* El ancho colapsado (72px) lo fija .hd-shell--collapsed en la columna del
   grid (css/huf/components/shell.css) — .hd-sidebar solo llena esa columna
   al 100%, no declara su propio ancho fijo. */

/* Riel técnico (HVL §4, elemento 1 de la firma): línea de 1px, siempre
   visible, en ambos anchos — es el "rack" sobre el que se montan los
   módulos, no un adorno. */
.hd-sidebar__rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--hd-size-sidebar-rail);
    width: 1px;
    background: var(--hd-color-border);
    pointer-events: none;
}

.hd-sidebar__group-label {
    position: relative;
    padding: var(--hd-space-3) var(--hd-space-3) var(--hd-space-1)
        calc(var(--hd-size-sidebar-rail) + 20px);
    font-size: var(--hd-text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hd-theme-text-muted);
}

/* División entre secciones: la línea de "estante" cruza todo el ancho del
   riel (no solo la marca de 6px de abajo), con aire extra antes del
   encabezado — para que un vistazo rápido separe "dónde termina un grupo y
   empieza el siguiente" sin tener que leer el texto en mayúscula. Vive en
   .hd-sidebar__nav-group (el contenedor de cada sección) para no duplicarse
   cuando un grupo no colapsable (ninguno hoy) reutiliza solo .group-label. */
.hd-sidebar__nav-group {
    padding-top: var(--hd-space-4);
    margin-top: var(--hd-space-2);
    border-top: 1px solid var(--hd-color-border);
}

.hd-sidebar__nav-group:first-child {
    margin-top: 0;
}

/* Marca horizontal de 6px cruzando el riel, a la altura de cada
   separador de grupo (HVL §6.3). */
.hd-sidebar__group-label::before {
    content: '';
    position: absolute;
    left: calc(var(--hd-size-sidebar-rail) - 2.5px);
    top: var(--hd-space-3);
    width: 6px;
    height: 1px;
    background: var(--hd-color-border-strong);
}

.hd-shell--collapsed .hd-sidebar .hd-sidebar__group-label-text {
    display: none;
}

.hd-sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--hd-size-control);
    padding: 0 var(--hd-space-3) 0 calc(var(--hd-size-sidebar-rail) + 20px);
    border-radius: 0 var(--hd-radius-sm) var(--hd-radius-sm) 0;
    color: var(--hd-theme-text-muted);
    text-decoration: none;
    font-size: var(--hd-text-base);
    font-weight: 500;
    transition: background var(--hd-motion-standard) var(--hd-ease),
        color var(--hd-motion-standard) var(--hd-ease);
}

.hd-sidebar__link:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--hd-theme-text);
}

/* Ítem activo: el segmento de energía de 3px se enciende SOBRE el riel
   (mismo eje X, no al costado) + fondo tenue + ícono en acento + texto
   en peso 600 (HVL §6.3). */
.hd-sidebar__link--active {
    color: var(--hd-theme-text);
    font-weight: 600;
    background: rgba(var(--hd-theme-accent-rgb), 0.10);
}

.hd-sidebar__link--active::before {
    content: '';
    position: absolute;
    left: calc(var(--hd-size-sidebar-rail) - 1px);
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--hd-theme-accent);
}

.hd-sidebar__link--active .hd-sidebar__icon {
    color: var(--hd-theme-accent-text);
}

.hd-sidebar__icon {
    width: 22px;
    height: 22px;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hd-sidebar__link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contador/badge de ítem: en línea, al final de la fila, alineado a la
   derecha (HVL §6.3) — reusa .hd-badge, solo ajusta tamaño/posición en
   este contexto en vez de duplicar la definición de badge. */
.hd-sidebar__link .hd-badge {
    margin-left: auto;
    height: 18px;
    padding: 0 var(--hd-space-2);
    font-size: var(--hd-text-micro);
    font-variant-numeric: tabular-nums;
}

/* ── Colapsado: solo ícono centrado, el riel permanece ────────── */
.hd-shell--collapsed .hd-sidebar .hd-sidebar__link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.hd-shell--collapsed .hd-sidebar .hd-sidebar__link-text,
.hd-shell--collapsed .hd-sidebar .hd-sidebar__link .hd-badge {
    display: none;
}

.hd-shell--collapsed .hd-sidebar .hd-sidebar__link--active::before {
    left: 0;
}

/* Tooltip técnico CSS-only en colapsado (HVL §6.3: "nunca como tooltip
   de Bootstrap") — panel L1, borde 1px, radio de control. */
.hd-shell--collapsed .hd-sidebar .hd-sidebar__link[data-hd-tooltip] {
    position: relative;
}

.hd-shell--collapsed .hd-sidebar .hd-sidebar__link[data-hd-tooltip]::after {
    content: attr(data-hd-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(var(--hd-space-2), -50%);
    padding: var(--hd-space-1) var(--hd-space-2);
    border-radius: var(--hd-radius-sm);
    border: 1px solid var(--hd-color-border);
    background: var(--hd-color-bg-secondary);
    color: var(--hd-theme-text);
    font-size: var(--hd-text-meta);
    font-weight: 500;
    white-space: nowrap;
    z-index: var(--hd-z-dropdown);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--hd-motion-standard) var(--hd-ease);
}

.hd-shell--collapsed .hd-sidebar .hd-sidebar__link[data-hd-tooltip]:hover::after,
.hd-shell--collapsed .hd-sidebar .hd-sidebar__link[data-hd-tooltip]:focus-visible::after {
    opacity: 1;
}

/* ── Cabecera: marca + cerrar (móvil) ──────────────────────────── */
.hd-sidebar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-space-2);
    padding: 0 var(--hd-space-3) var(--hd-space-3)
        calc(var(--hd-size-sidebar-rail) + 20px);
}

.hd-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    min-width: 0;
    font-weight: 600;
    color: var(--hd-theme-text);
}

.hd-sidebar__brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-shell--collapsed .hd-sidebar .hd-sidebar__brand-text {
    display: none;
}

/* Solo existe en móvil (shell.css lo revela bajo 992px), así que lleva la
   altura de control completa: se pulsa con el pulgar, no con un cursor. */
.hd-sidebar__close {
    flex-shrink: 0;
    width: var(--hd-size-control);
    height: var(--hd-size-control);
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--hd-radius-sm);
    color: var(--hd-theme-text-muted);
    cursor: pointer;
}

.hd-sidebar__close:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--hd-theme-text);
}

/* Toggle de colapso y de tema: mismo componente visual que un link de nav,
 * pero son botones de utilidad — no participan en la detección de "link
 * activo". Comparten estilo base; solo el de colapso rota su ícono. */
.hd-sidebar__collapse-toggle,
.hd-sidebar__theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

.hd-shell--collapsed .hd-sidebar .hd-sidebar__collapse-toggle .hd-sidebar__icon {
    transform: rotate(180deg);
}

.hd-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
    flex: 1 1 auto;
}

/* ── Grupos colapsables (Reportes & Alertas, Administración) ──────
 * Sin fondo ni tarjeta propia (HVL §6.3): el encabezado reusa el estilo
 * de .hd-sidebar__group-label, solo se vuelve interactivo. */
.hd-sidebar__group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.hd-sidebar__group-toggle-icon {
    transition: transform var(--hd-motion-standard) var(--hd-ease);
    margin-right: var(--hd-space-3);
}

.hd-sidebar__group-toggle[aria-expanded="true"] .hd-sidebar__group-toggle-icon {
    transform: rotate(180deg);
}

.hd-sidebar__nav-group-body {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
}

.hd-shell--collapsed .hd-sidebar .hd-sidebar__group-toggle-icon {
    display: none;
}

/* ── Pie: establecimiento + usuario + acciones ─────────────────── */
.hd-sidebar__footer {
    margin-top: auto;
    padding: var(--hd-space-4) var(--hd-space-3) 0
        calc(var(--hd-size-sidebar-rail) + 20px);
    border-top: 1px solid var(--hd-color-border);
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
}

.hd-sidebar__footer-label {
    font-size: var(--hd-text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hd-theme-text-muted);
}

.hd-sidebar__footer-value {
    font-weight: 600;
    color: var(--hd-theme-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    min-width: 0;
    margin: var(--hd-space-1) 0;
}

.hd-sidebar__user-meta {
    min-width: 0;
}

.hd-sidebar__user-name {
    font-size: var(--hd-text-base);
    font-weight: 600;
    color: var(--hd-theme-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-sidebar__user-role {
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
    text-transform: capitalize;
}

.hd-shell--collapsed .hd-sidebar .hd-sidebar__footer-label,
.hd-shell--collapsed .hd-sidebar .hd-sidebar__footer-value,
.hd-shell--collapsed .hd-sidebar .hd-sidebar__footer-warning,
.hd-shell--collapsed .hd-sidebar .hd-sidebar__user-meta,
.hd-shell--collapsed .hd-sidebar .hd-sidebar__footer .hd-btn {
    display: none;
}