/* ===========================================
   NAVIGATION.CSS - Sidebar Universal
   Lydent - Sistema de Navegación Unificado
   =========================================== */

/* ===== LA TIPOGRAFÍA DE LA NAVEGACIÓN (2026-08-08) ====================
   El armazón vive FUERA de `ds-app`, así que `base.css` del núcleo no lo
   alcanza y toda la navegación seguía en la pila del sistema
   (-apple-system / Segoe UI) mientras el contenido de las pantallas migradas
   ya es Plex. Se notaba justo donde más: la barra horizontal está pegada al
   contenido que nombra.

   Se cambia SOLO la familia, y solo en las tres superficies de navegación
   —menú lateral, barra superior y barra de secciones—, no en el contenido:
   los tamaños y los colores heredados se quedan como están, así que ninguna
   pantalla sin migrar cambia de sitio. Plex ya se descarga en `base.html`
   (`design/fonts.css`), o sea que esto no añade ni una petición.
   ====================================================================== */
.sidebar-universal,
.app-chrome {
    font-family: var(--font-ui);
}

/* ===== SIDEBAR UNIVERSAL ===== */
.sidebar-universal {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-universal-width, 280px);
    height: 100vh;
    background: var(--bg-white);
    border-right: 1px solid var(--border-color);
    z-index: var(--z-sidebar, 300);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-universal.open {
    transform: translateX(0);
}

/* ===== SIDEBAR OVERLAY ===== */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-sidebar-overlay, 250);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== SIDEBAR HEADER ===== */
.sidebar-header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #ffffff;
}

.sidebar-header .sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.sidebar-header .sidebar-logo img {
    max-width: 140px;
    height: auto;
}

.sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    transition: var(--transition-fast);
}

.sidebar-close:hover,
.sidebar-close:focus-visible {
    background: var(--accent-bg);
    color: var(--accent);
}

/* ===== SIDEBAR CONTENT (Scrollable) ===== */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md) 0;
}

/* ===== SECCIONES DE APPS ===== */
.sidebar-section {
    padding: 0 var(--space-md);
    margin-bottom: var(--space-md);
}

.sidebar-section-title {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* ===== ITEMS DE NAVEGACION ===== */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius);
    margin: 0 var(--space-sm);
    min-height: var(--touch-min);
    transition: var(--transition-fast);
}

.sidebar-nav-item:hover,
.sidebar-nav-item:focus-visible {
    background: var(--accent-bg);
    color: var(--accent);
}

.sidebar-nav-item.active {
    background: var(--accent);
    color: white;
}

.sidebar-nav-item.active:hover {
    background: var(--accent-600);
    color: white;
}

.sidebar-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ===== GRUPOS COLAPSABLES (Nav v3) ===== */
.sidebar-nav-group {
    margin: 0 var(--space-sm);
    margin-bottom: var(--space-xs);
}

.sidebar-nav-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius);
    min-height: var(--touch-min);
    cursor: pointer;
    transition: var(--transition-fast);
    user-select: none;
}

.sidebar-nav-group-header:hover,
.sidebar-nav-group-header:focus-visible {
    background: var(--accent-bg);
    color: var(--accent);
}

.sidebar-nav-group.active > .sidebar-nav-group-header {
    background: var(--accent);
    color: white;
}

.sidebar-nav-group.active > .sidebar-nav-group-header:hover {
    background: var(--accent-600);
}

.sidebar-nav-group-header i.fa-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.sidebar-nav-group-header .chevron {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
    opacity: 0.7;
}

.sidebar-nav-group.expanded > .sidebar-nav-group-header .chevron {
    transform: rotate(90deg);
}

/* Contenedor de subitems del grupo */
.sidebar-nav-group-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.sidebar-nav-group.expanded > .sidebar-nav-group-items {
    max-height: 800px; /* Suficiente para grupos largos (Club: venta + gestión) */
    transition: max-height 0.35s ease-in;
}

/* Subitems dentro del grupo */
.sidebar-nav-group-items .sidebar-nav-subitem {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    padding-left: 2.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 400;
    border-radius: var(--radius);
    min-height: 36px;
    margin: 0 var(--space-xs);
    transition: var(--transition-fast);
}

.sidebar-nav-group-items .sidebar-nav-subitem:hover,
.sidebar-nav-group-items .sidebar-nav-subitem:focus-visible {
    background: var(--accent-bg);
    color: var(--accent);
}

.sidebar-nav-group-items .sidebar-nav-subitem.active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 500;
}

.sidebar-nav-group-items .sidebar-nav-subitem i {
    width: 16px;
    text-align: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Badge de conteo en un subitem (p. ej. pedidos pendientes de la tienda) */
.sidebar-nav-group-items .sidebar-nav-subitem .sidebar-nav-badge {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Badge de notificación en grupo */
.sidebar-nav-group-header .badge {
    background: var(--accent);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    margin-left: auto;
    margin-right: var(--space-sm);
}

.sidebar-nav-group.active > .sidebar-nav-group-header .badge {
    background: white;
    color: var(--accent);
}

/* ===== PIN TOGGLE (Solo PC) ===== */
.sidebar-footer {
    padding: var(--space-md);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
    display: none; /* Oculto por defecto, visible solo en PC */
}

.pin-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.pin-toggle:hover,
.pin-toggle:focus-visible {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.pin-toggle.pinned {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.pin-toggle i {
    font-size: 0.875rem;
}

/* ===== ACTION BAR — el menú horizontal de cada app =====================
   Normalizada al sistema de diseño el 2026-08-08. Nació como una fila de
   BOTONES —cada sección con su caja, su borde, su fondo y su radio de 8px, y
   la activa rellena de acento—, que es el vocabulario de una barra de
   acciones, no de una navegación: pesaba 57px de alto (40 del botón + 16 de
   relleno + el borde) en todas las pantallas de las seis apps que la usan y
   competía con la acción primaria de la propia pantalla, que es el único
   botón relleno de acento que debería haber (DESIGN.md §5).

   Pasa al vocabulario de `ds-tabs` (components.css §5.b): texto plano, sin
   caja, y la sección actual marcada con el canto inferior en acento. No es
   una invención para el armazón — es EXACTAMENTE lo que Analytics ya hizo con
   su menú, que vació su `action_bar` y pinta un `<nav class="ds-tabs">`
   dentro de su `ds-app`. Aquí se hace en el CSS y no en las plantillas por
   dos motivos: esta barra vive FUERA de `ds-app` (es armazón, y `base.css`
   solo actúa dentro), y `ds-tabs` no sabe de menús desplegables, que es lo
   que usan cinco de las seis (Comercial tiene 22 entradas en 5 grupos).

   Las clases NO se tocan: seis plantillas base las escriben y las tres
   `*-action-bar` que hay por ahí (`solicitud-`, `fin-`, `pedido-`) son
   clases propias de una pantalla y no heredan de esta.

   Alto: 57px → 37px. Se recupera media tira de KPIs en cada pantalla. */
.action-bar {
    display: flex;
    gap: var(--s-2);
    padding: 0 var(--s-6);
    background: var(--n-0);
    border-bottom: var(--bd-strong);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.action-bar::-webkit-scrollbar {
    display: none;
}

/* `font: inherit` no es cosmético: el toggle del desplegable es un <button>,
   y un botón no hereda la tipografía del documento por defecto. */
.action-bar-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background: none;
    border: 0;
    border-bottom: var(--bd-w-signal) solid transparent;
    border-radius: 0;
    color: var(--n-600);
    text-decoration: none;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: var(--lh-tight);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
    flex-shrink: 0;
}

.action-bar-item:hover,
.action-bar-item:focus-visible {
    color: var(--n-900);
    text-decoration: none;
}

/* La sección actual: acento en el texto Y en el canto. El canto es lo que la
   distingue del hover sin depender del color (DESIGN.md §5). */
.action-bar-item.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* El icono al cuerpo del texto. Iba a 16px sobre una etiqueta de 13 y era
   media razón del peso de la barra. */
.action-bar-item i {
    font-size: var(--fs-base);
}

/* Texto oculto en movil pequeno */
.action-bar-item .action-text {
    display: none;
}

/* ===== ACTION BAR DROPDOWNS ===== */
.action-bar-dropdown {
    position: relative;
    flex-shrink: 0;
}

/* Caret icon in toggle button */
.action-bar-toggle .caret {
    font-size: var(--fs-micro);
    margin-left: var(--s-1);
    transition: transform var(--dur-base) var(--ease);
}

.action-bar-toggle[aria-expanded="true"] .caret {
    transform: rotate(180deg);
}

/* Cursor pointer for dropdown toggle */
.action-bar-toggle {
    cursor: pointer;
}

/* El grupo que contiene la sección actual se marca como el ítem suelto: es la
   misma información («estás aquí») y tiene que leerse igual. */
.action-bar-dropdown.active .action-bar-toggle {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* Dropdown menu.
   `z-index: 1000` NO se toca: `.ds-modal-backdrop` está en 1100 justamente
   porque este vale 1000 (medido el 2026-08-07, cuando el modal salía debajo
   del menú abierto). El desplegable SÍ flota sobre el documento, así que es
   de los pocos sitios donde la sombra está permitida (DESIGN.md §1). */
.action-bar-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 200px;
    margin-top: 0;
    padding: var(--s-2) 0;
    background: var(--n-0);
    border: var(--bd-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-overlay);
}

.action-bar-dropdown.open .action-bar-dropdown-menu {
    display: block;
}

/* Dropdown items — el vocabulario de `.ds-tabs--sub`: mismo idioma que el
   primer nivel, menos peso. */
.action-bar-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    color: var(--n-700);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}

/* Los dos únicos colores escritos a mano que quedaban en el chrome, y eran los
   verdes claros del acento viejo (#e8f0d0 y #dde8c0). Todo lo demás de esta
   barra —el ítem, su hover, el botón del desplegable— ya iba con `--accent`,
   así que al pasar el acento a índigo el menú se volvía verde SOLO al
   desplegarlo: la parte que se ve siempre había cambiado y la que se ve al
   pulsar, no. Reportado el 2026-08-07.

   El activo se distingue del hover con la marca lateral y no con un verde más
   oscuro: el estado no se comunica solo con color (DESIGN.md §5), y así no hay
   que inventar un tinte intermedio que la paleta no tiene.

   Y el 2026-08-08, al normalizar la barra: el hover se lleva el `--accent-bg`
   y pasa a neutro. Los dos estados compartían FONDO y solo se diferenciaban
   por la marca y el peso de la letra, así que pasar el ratón por encima
   pintaba una entrada casi idéntica a la que dice dónde estás. Es el reparto
   de `.ds-tabs--sub`: neutro para «te estoy señalando esto», acento para
   «estás aquí». */
.action-bar-dropdown-item:hover,
.action-bar-dropdown-item:focus-visible {
    background: var(--n-100);
    color: var(--n-900);
    text-decoration: none;
}

.action-bar-dropdown-item.active {
    background: var(--accent-bg);
    color: var(--accent-600);
    font-weight: 600;
    box-shadow: inset var(--bd-w-signal) 0 0 var(--accent);
}

.action-bar-dropdown-item i {
    font-size: var(--fs-sm);
    width: var(--s-7);
    text-align: center;
    color: var(--n-500);
}

.action-bar-dropdown-item:hover i { color: inherit; }
.action-bar-dropdown-item.active i { color: var(--accent); }

/* ===== TOP BAR MODIFICADO (Contexto) ===== */
.top-bar-context {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.top-bar-context .context-separator {
    color: var(--text-muted);
}

.top-bar-context .context-app {
    color: var(--accent);
    font-weight: 600;
}

.top-bar-context .context-section {
    color: var(--text-dark);
    font-weight: 500;
}

/* ===== CONTENIDO CON SIDEBAR PINNED ===== */
/* Las reglas de pinned mode estan en la seccion body.nav-v2-enabled.sidebar-pinned */

/* ===== MÓVIL Y TABLETA ESTRECHA: LA BARRA ENVUELVE, NO SE ARRASTRA =====
   Defecto que solo apareció MIDIENDO (2026-08-08, viewport de 390px): por
   debajo de 768px la barra lleva `overflow-x: auto`, y como el desplegable es
   un absoluto DENTRO de ella, quedaba recortado — `overflow-x: auto` obliga
   al otro eje a dejar de ser `visible`, así que el menú de 168px de alto se
   metía dentro de una barra de 34. En un móvil, los menús de sección de cinco
   apps se abrían dentro de una rendija.

   El arrastre horizontal existía porque los botones no cabían: medido, los 6
   grupos de Comercial pedían 565px en una ventana de 390. Sin caja **caben**
   (390 de 390), así que el scroll ya no compra nada y se cambia por
   `flex-wrap`: si algún día no caben, la barra hace dos renglones —que se
   ven— en vez de esconder secciones detrás de un arrastre que nadie descubre.
   ====================================================================== */
@media (max-width: 767px) {
    .action-bar {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* ===== RESPONSIVE: TABLET (576px+) ===== */
@media (min-width: 576px) {
    .action-bar-item .action-text {
        display: inline;
    }

    .action-bar {
        padding: 0 var(--s-7);
        gap: var(--s-2);
    }
}

/* ===== RESPONSIVE: TABLET (768px+) ===== */
@media (min-width: 768px) {
    .sidebar-universal {
        width: var(--sidebar-universal-width, 280px);
    }

    .action-bar {
        justify-content: flex-start;
        overflow-x: visible;
    }

    .action-bar-item {
        padding: var(--s-4) var(--s-6);
    }
}

/* ===== RESPONSIVE: PC (1024px+) ===== */
@media (min-width: 1024px) {
    /* Mostrar boton de pin */
    .sidebar-footer {
        display: block;
    }

    .action-bar {
        padding: 0 var(--s-9);
    }
}

/* ===== OBJETIVO TÁCTIL =================================================
   La barra pierde la caja del botón, pero no el sitio donde se pulsa: sin
   caja, el alto lo da el relleno, y 34px es poco para un dedo. `base.css`
   del núcleo ya sube a 44px con `pointer: coarse`, pero SOLO dentro de un
   `ds-app` — y el armazón no lo es. Va aquí, con la misma consulta, para que
   no dependa de que la pantalla de debajo esté migrada.
   ====================================================================== */
@media (pointer: coarse) {
    .action-bar-item,
    .action-bar-dropdown-item {
        min-height: 44px;
    }
}

body.nav-v2-enabled .hamburger-btn {
    display: flex;
}

/* Cuando el sidebar esta pinned en PC */
body.nav-v2-enabled.sidebar-pinned .sidebar-universal {
    transform: translateX(0);
    box-shadow: none;
}

body.nav-v2-enabled.sidebar-pinned .sidebar-overlay {
    display: none;
}

body.nav-v2-enabled.sidebar-pinned .app-layout {
    margin-left: var(--sidebar-universal-width, 280px);
    transition: margin-left var(--transition-base);
}

/* ===== ANTI-FOUC + NAVEGACIÓN SIN ANIMACIÓN (Fase 1) ===== */
/* El script inline de base.html marca <html> antes del primer frame:
   - .nav-preload         → suprime transiciones durante la carga (la navegación NO debe animar)
   - .sidebar-pinned-boot → pre-posiciona el sidebar fijado para evitar el slide-in en cada página
   navigation.js retira ambas clases tras el primer pintado, de modo que el pin/unpin manual del
   usuario sí anima, pero pasar de una pantalla a otra deja el sidebar inmóvil. */
html.nav-preload .sidebar-universal,
html.nav-preload .sidebar-overlay,
html.nav-preload .app-layout,
html.nav-preload .sidebar-nav-group-items,
html.nav-preload .sidebar-nav-group-header .chevron {
    transition: none !important;
}

/* El grupo activo lo marca el servidor con .active (bloque nav_xxx). Lo pre-pintamos
   ya desplegado en el primer frame para que el acordeón NO se contraiga y vuelva a
   abrirse en cada navegación. navigation.js añade luego .expanded (mismo estado visual)
   y, al retirar nav-preload, el efecto acordeón solo se anima al pulsar el usuario. */
html.nav-preload .sidebar-nav-group.active > .sidebar-nav-group-items {
    max-height: 800px;
}

html.nav-preload .sidebar-nav-group.active > .sidebar-nav-group-header .chevron {
    transform: rotate(90deg);
}

@media (min-width: 1024px) {
    html.sidebar-pinned-boot .sidebar-universal {
        transform: translateX(0);
        box-shadow: none;
    }

    html.sidebar-pinned-boot .app-layout {
        margin-left: var(--sidebar-universal-width, 280px);
    }
}

.wizard-step {
    scroll-snap-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: var(--space-sm);
    background: var(--bg-light);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.wizard-step.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.wizard-step.completed {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

/* Tablet: mostrar texto abreviado */
@media (min-width: 768px) {
    .wizard-step {
        min-width: auto;
        padding: var(--space-sm) var(--space-md);
    }
}

/* Desktop: texto completo */
@media (min-width: 1024px) {
    .wizard-step {
        padding: var(--space-sm) var(--space-lg);
    }
}

/* ===== ANIMACIONES ===== */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Badge de notificaciones en sidebar nav */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--accent);
    margin-left: auto;
}

.nav-badge--mensajeria {
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== BARRA DE CARGA SUPERIOR (Fase 1b) ===== */
/* Feedback de actividad durante la navegación: en vez de quedar la app muerta con el
   spinner del navegador como única señal, una barrita asoma y avanza mientras el servidor
   responde (útil sobre todo en vistas lentas). nav-progress.js la crea e inyecta. */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(137, 160, 44, 0.6);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: width 0.25s ease, opacity 0.2s ease;
}

.nav-progress.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .nav-progress {
        transition: opacity 0.2s ease;
    }
}

/* =========================================================================
   PIE DEL MENÚ — IDENTIDAD DEL USUARIO   (2026-08-03)
   El correo y las acciones de cuenta vivían arriba a la derecha y se comían
   una franja de pantalla en TODAS las apps para enseñar un dato que no se
   consulta ni una vez al día. Bajan aquí, que además es donde se esperan.

   Valores tomados de static/design/tokens.css: este bloque es nuevo, así que
   no tiene por qué arrastrar la escala vieja de este fichero.
   ========================================================================= */

.sidebar-user {
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--n-100);
}

/* La fila que siempre se ve. El resto vive dentro del <details> y no ocupa
   sitio hasta que se pide: son acciones de una vez al mes y estaban gastando
   cinco renglones del menú de forma permanente. */
.sidebar-user-sum {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-sm);
    cursor: pointer;
    list-style: none;
    color: var(--n-600);
}

.sidebar-user-sum::-webkit-details-marker { display: none; }
.sidebar-user-sum:hover { background: var(--n-50); }

.sidebar-user-chev {
    margin-left: auto;
    font-size: var(--fs-micro);
    color: var(--n-400);
    transition: transform var(--dur-fast) var(--ease);
}

.sidebar-user[open] .sidebar-user-chev { transform: rotate(180deg); }

.sidebar-user-actions {
    display: flex;
    flex-direction: column;
}

.sidebar-user-actions form {
    margin: 0;
}

.sidebar-user-action {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    width: 100%;
    padding: var(--s-4);
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--n-700);
    font-size: var(--fs-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.sidebar-user-action i {
    width: 1rem;
    text-align: center;
    color: var(--n-400);
}

.sidebar-user-action:hover,
.sidebar-user-action:focus-visible {
    background: var(--accent-bg);
    color: var(--accent-600);
}

.sidebar-user-action:hover i,
.sidebar-user-action:focus-visible i {
    color: var(--accent);
}

/* Cerrar sesión es la única de las cuatro que no se puede deshacer. Se marca
   al pasar por encima, no en reposo: en reposo competiría con el resto del
   menú por atención que no merece. */
.sidebar-user-action--salir:hover,
.sidebar-user-action--salir:focus-visible {
    background: var(--risk-bg);
    color: var(--risk);
}

.sidebar-user-action--salir:hover i,
.sidebar-user-action--salir:focus-visible i {
    color: var(--risk);
}

/* El pie deja de ser solo-PC: la identidad tiene que estar también en móvil,
   que es donde la barra superior tenía aún menos sitio. El botón de fijar
   sigue siendo cosa de escritorio y se oculta él solo (ver más abajo). */
.sidebar-footer {
    display: block;
}

.pin-toggle {
    display: none;
}

@media (min-width: 1024px) {
    .pin-toggle {
        display: flex;
    }
}