/*
 * Sidebar ATLAS — overrides sobre el nav de Limitless (html/layout_2 es vendor: no se toca).
 *
 * Módulo con home (plan 2026-09-13-asset-monitoring-dashboard D3): el nombre del módulo es un
 * NavLink que navega al submódulo `dashboard`, y el desplegable lo abre un <button
 * class="nav-submenu-toggle"> hermano. El caret ::after del tema se oculta en ese enlace (el botón
 * trae el suyo) y el botón hereda el color del enlace para leerse igual en sidebar-dark.
 * Sin hex ni estilos inline (WARNINGS §38): solo tokens y variables del tema.
 */

.nav-item-has-home {
    position: relative;
}

/* El caret del tema vive en el ::after del enlace; en el home lo pinta el botón. */
.nav-item-has-home > .nav-link[data-nav-home]::after {
    display: none;
    content: none;
}

/* Reserva el hueco del botón (2.5rem ≈ hit area de 2rem + margen). */
.nav-item-has-home > .nav-link[data-nav-home] {
    padding-right: 2.5rem;
}

.nav-submenu-toggle {
    position: absolute;
    top: var(--nav-link-spacer-y, 0);
    right: calc(var(--nav-link-padding-x, 1.25rem) - var(--atlas-space-2));
    width: 2rem;
    /* Alto del enlace: padding × 2 + línea de texto, para centrar en vertical sin medir. */
    height: calc(var(--nav-link-padding-y, 0.625rem) * 2 + var(--body-line-height-computed, 1.5rem));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--atlas-radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

.nav-submenu-toggle > i {
    font-size: var(--body-font-size, 0.875rem);
    transition: transform ease-in-out var(--transition-collapse-timer, 0.15s);
}

.nav-item-submenu.nav-item-open > .nav-submenu-toggle > i {
    transform: rotate(90deg);
}

.nav-submenu-toggle:hover {
    background: var(--nav-link-hover-bg, var(--atlas-color-primary-soft));
}

.nav-submenu-toggle:focus-visible {
    outline: 2px solid var(--atlas-border-focus);
    outline-offset: -2px;
}

/* Sidebar plegada (mini): el tema quita el caret del enlace; el botón también desaparece. */
.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) .nav-sidebar .nav-submenu-toggle {
    display: none;
}
.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) .nav-sidebar .nav-item-has-home > .nav-link[data-nav-home] {
    padding-right: var(--nav-link-padding-x, 1.25rem);
}

@media (prefers-reduced-motion: reduce) {
    .nav-submenu-toggle > i {
        transition: none;
    }
}

/*
 * Pie legal (Data protection & privacy → /data-protection). .sidebar-content es flex-column en el
 * tema (layout.css), así que margin-top:auto lo pega abajo y, si el menú no cabe, queda al final del
 * scroll. Color: mismo patrón rgba(white) que --nav-link-color en .sidebar-dark, más apagado. El
 * texto lleva sidebar-resize-hide (lo que el tema usa para el <h6> de cabecera): al plegar desaparece.
 */
.sidebar-legal {
    margin-top: auto;
}

.sidebar-legal-link {
    display: flex;
    align-items: center;
    padding: var(--atlas-space-2) var(--nav-link-padding-x, 1.25rem);
    font-size: 0.7rem;
    color: rgba(var(--white-rgb), 0.55);
    text-decoration: none;
    transition: color ease-in-out var(--transition-base-timer, 0.15s);
}

.sidebar-legal-link:hover,
.sidebar-legal-link:focus-visible {
    color: rgba(var(--white-rgb), 0.85);
    text-decoration: none;
}

.sidebar-legal-link:focus-visible {
    outline: 2px solid var(--atlas-border-focus);
    outline-offset: -2px;
}

.sidebar-legal-link > i {
    font-size: 0.85rem;
    margin-right: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-legal-link {
        transition: none;
    }
}