/* ═══════════════════════════════════════════════════════════════════
   PROPUESTA — Sidebar colapsable con módulos primordiales
   Complementa static/css/main.css. Resuelve §6 del plan.

   ESTADO ACTUAL
   ─────────────
   No existe implementación previa: grep de collapsed|collapse|minimi
   sobre main.css, sidebar.html y base.html no arroja resultados.
   Lo único parecido es el drawer móvil (main.css:130-143), que se
   conserva sin cambios por debajo de 768px.

   COMPORTAMIENTO
   ──────────────
   Expandido  280px  →  igual que hoy
   Colapsado   72px  →  solo iconos, primordiales visibles, resto en «⋯ Más»

   Persistencia en localStorage.jade_sidebar_collapsed, aplicada antes
   del primer pintado (tarea C3) para evitar el salto visual.
   Atajo Ctrl/Cmd + B (tarea C5).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sidebar-width:            280px;
  --sidebar-width-collapsed:   72px;
  --sidebar-tx: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* El ancho efectivo se resuelve una sola vez aquí. Todo lo que dependa
   del sidebar debe usar --sidebar-current, nunca --sidebar-width.
   Corrige el cálculo de main.css:738, que hoy quedaría desfasado al
   colapsar (tarea C8). */
body                     { --sidebar-current: var(--sidebar-width); }
body.sidebar-collapsed   { --sidebar-current: var(--sidebar-width-collapsed); }

.sidebar {
  width: var(--sidebar-current);
  transition: width var(--sidebar-tx), transform 0.3s ease;
  overflow: visible;          /* los tooltips salen del contenedor */
}

/* ─────────────────────────────────────────────────────────────────
   1. BOTÓN DE COLAPSO
   Va en la cabecera del logo. Se oculta en móvil, donde manda el drawer.
   ───────────────────────────────────────────────────────────────── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  min-height: 60px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}

.sidebar-logo,
.brand-logo-full {
  height: 40px !important;
  width: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .2s ease;
  display: block !important;
  flex-shrink: 0;
}
.sidebar-logo:hover,
.brand-logo-full:hover { transform: scale(1.04); }

.sidebar-brand-text {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-color, #059669);
  letter-spacing: -0.5px;
  line-height: 1;
  display: inline-block;
}

.brand-logo-collapsed {
  display: none !important;
}

body.sidebar-collapsed .sidebar-header {
  padding: 12px 0 !important;
  justify-content: center !important;
}
body.sidebar-collapsed .sidebar-brand {
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
}
body.sidebar-collapsed .sidebar-brand-text {
  display: none !important;
}
body.sidebar-collapsed .sidebar-logo,
body.sidebar-collapsed .brand-logo-full {
  display: block !important;
  height: 36px !important;
  width: 36px !important;
  margin: 0 auto !important;
}
body.sidebar-collapsed .brand-logo-collapsed {
  display: none !important;
}

.sidebar-toggle {
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  transition: all .2s ease;
  padding: 0;
}

.sidebar-toggle:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  transform: translateY(-50%) scale(1.1);
}

.sidebar-toggle svg { width: 14px; height: 14px; transition: transform var(--sidebar-tx); }
body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

.sidebar-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

@media (max-width: 1023px) { .sidebar-toggle { display: none !important; } }

/* ─────────────────────────────────────────────────────────────────
   2. ÍTEMS DE NAVEGACIÓN
   ───────────────────────────────────────────────────────────────── */
:where(.sidebar) .nav-item {
  margin: 5px 12px;
  padding: 9px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  font-weight: 600;
  border-radius: 12px;
  color: var(--text-color);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04), 2px 1px 4px rgba(0, 0, 0, .03);
  white-space: nowrap;
  position: relative;
  transition: all .18s ease;
  overflow: hidden;
}

:where(.sidebar) .nav-item .nav-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

:where(.sidebar) .nav-item .nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity 140ms ease;
  white-space: nowrap;
  flex: 1;
}

:where(.sidebar) .nav-item:hover {
  background: var(--hover-color);
  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .08), 2px 2px 6px rgba(0, 0, 0, .05);
  transform: translateX(2px);
  color: var(--primary-color);
}

:where(.sidebar) .nav-item.active {
  background: rgba(5, 150, 105, 0.08) !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(5, 150, 105, 0.16), 2px 2px 6px rgba(5, 150, 105, 0.1) !important;
}

/* Colapsado: píldora centrada de 42x42px, etiqueta completamente oculta sin desbordamiento */
body.sidebar-collapsed :where(.sidebar) .nav-item {
  width: 42px !important;
  height: 42px !important;
  margin: 5px auto !important;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transform: none !important;
}

body.sidebar-collapsed :where(.sidebar) .nav-item:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important;
}

body.sidebar-collapsed :where(.sidebar) .nav-item .nav-label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

body.sidebar-collapsed :where(.sidebar) .nav-item .nav-icon {
  margin: 0 !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Sin barras verticales decorativas que ensucien */
body.sidebar-collapsed :where(.sidebar) .nav-item.active::before,
body.sidebar-collapsed :where(.sidebar) .nav-item::before,
body.sidebar-collapsed :where(.sidebar) .nav-item::after {
  display: none !important;
}

/* ═════════════════════════════════════════════════════════════════
   3. DESPLAZAMIENTO DEL NAV  (§6.6 · tareas C13-C15)

   3a. SIN BARRA HORIZONTAL
   sidebar.html:35 declara hoy   style="…; overflow-y: auto;"
   sin declarar overflow-x. Por especificación, cuando un eje NO es
   `visible` y el otro SÍ, ese `visible` COMPUTA A `auto`. Es decir,
   ese overflow-y convierte el eje horizontal en auto en silencio, y
   como cada .nav-item lleva white-space:nowrap basta un nombre largo
   —«Validación Pre-Surtido»— o el instante intermedio de la animación
   de colapso para que aparezca la barra horizontal.
   La corrección es declarar AMBOS ejes de forma explícita.
   ═════════════════════════════════════════════════════════════════ */
#sidebar-nav {
  flex: 1;
  min-height: 0;              /* imprescindible: sin esto un hijo flex
                                 no se encoge y nunca desplaza */
  padding: 14px 0;
  overflow-y: auto;
  overflow-x: hidden;         /* explícito — sin esto computa a auto  */
  overscroll-behavior: contain;

  /* 3b. BARRA VERTICAL OCULTA (tarea C14)
     En Windows la barra clásica ocupa 15-17px reales; ocultarla
     recupera ancho de verdad, no es solo estético.
     OJO: dark-mode.css:84-92 estiliza ::-webkit-scrollbar de forma
     global — estas reglas deben cargarse DESPUÉS o ser más
     específicas, o el tema oscuro vuelve a pintar la barra.
     NUNCA usar scrollbar-gutter:stable aquí: hace lo contrario. */
  scrollbar-width: none;          /* Firefox            */
  -ms-overflow-style: none;       /* Edge heredado      */
}
#sidebar-nav::-webkit-scrollbar,
body.dark-mode #sidebar-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
body.dark-mode #sidebar-nav::-webkit-scrollbar-track,
body.dark-mode #sidebar-nav::-webkit-scrollbar-thumb {
  background: transparent;        /* neutraliza dark-mode.css:84-92 */
}

/* 3c. SEÑAL DE DESBORDAMIENTO (tarea C15)
   Al ocultar la barra se pierde la única pista de que la lista sigue.
   Los degradados van en el contenedor del sidebar, NO en el nav, que
   recorta. Las clases las alterna el listener de scroll. */
@media (min-width: 769px) {
  .sidebar { position: relative; }
}

.sidebar::before,
.sidebar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 5;
}
.sidebar::before {
  top: var(--nav-top, 150px);
  background: linear-gradient(to bottom, var(--card-bg), transparent);
}
.sidebar::after {
  bottom: var(--nav-bottom, 190px);
  background: linear-gradient(to top, var(--card-bg), transparent);
}
.sidebar.nav-can-scroll-up::before   { opacity: 1; }
.sidebar.nav-can-scroll-down::after  { opacity: 1; }

/* Desplazamiento suave al restaurar posición o centrar el activo,
   respetando la preferencia de movimiento reducido. */
@media (prefers-reduced-motion: no-preference) {
  #sidebar-nav { scroll-behavior: smooth; }
}

/* ═════════════════════════════════════════════════════════════════
   4. TOOLTIPS  —  CORRECCIÓN A LA PROPUESTA ANTERIOR (§6.6.2)

   La versión previa de esta hoja usaba ::after dentro del .nav-item.
   ESO NO FUNCIONA junto al requisito de desplazamiento: un contenedor
   que desplaza en vertical no puede tener overflow-x:visible (misma
   regla de 3a), y un ::after en left:calc(100% + 12px) cae fuera de
   la caja — con `hidden` se recorta y con `clip` también. position:
   absolute tampoco escapa: el ancestro que desplaza sigue recortando.

   Técnica correcta: UN ÚNICO elemento fuera del nav, position:fixed,
   colocado por JS al pasar el cursor. Sigue sin necesitar librería,
   pero sí ~15 líneas de JavaScript (tarea C4, revisada).

     <aside class="sidebar"> <nav id="sidebar-nav">…</nav> </aside>
     <div id="sidebar-tip" class="sidebar-tip" role="tooltip"
          aria-hidden="true"></div>
   ═════════════════════════════════════════════════════════════════ */
.sidebar-tip {
  position: fixed;               /* fuera del contexto de scroll     */
  z-index: 999999;
  background: #1e293b;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.sidebar-tip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent #1e293b transparent transparent;
}
.sidebar-tip.show,
.sidebar-tip.visible {
  opacity: 1;
  transform: translateX(0);
}

.sidebar-tip.is-danger { background: var(--danger-color); color: #fff; }
.sidebar-tip.is-danger::before { border-color: transparent var(--danger-color) transparent transparent; }

/* El tooltip solo tiene sentido colapsado: expandido la etiqueta ya
   se lee. El JS no debe mostrarlo fuera de ese estado. */
body:not(.sidebar-collapsed) .sidebar-tip { display: none; }

body.dark-mode .sidebar-tip {
  background: #f8fafc;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
body.dark-mode .sidebar-tip::before {
  border-color: transparent #f8fafc transparent transparent;
}

/* MATIZ ÚTIL: solo los ítems del NAV necesitan el tooltip fijo.
   El pie (.sidebar-footer) y la pastilla de cliente están FUERA de
   #sidebar-nav, y .sidebar no recorta (overflow:visible), así que ahí
   los tooltips ::after de las secciones 7 y 8 siguen funcionando tal
   cual. El JS de la tarea C4 solo tiene que atender .nav-item. */

/* ─────────────────────────────────────────────────────────────────
   5. MÓDULOS PRIMORDIALES — conjunto confirmado (§6.3)
   Con data-primary en el markup, el colapso no obliga a recorrer 26
   iconos indistinguibles. Diez sobreviven, en cinco secciones:

     Flujo de Surtido      surtido-ingesta · surtido-picker ·
                           recordings · surtido-incidencias
     Envíos y Guías        fedex · guias-cola
     Impresión Etiquetas   standard  → «Etiquetas Rápidas»
     Herramientas          guides → «Edición de Guías» · crop
     Clientes              martiderm

   RESUELTO (§5.3.1): «standard» se renombra a «Etiquetas Rápidas» y
   «guides» a «Edición de Guías» — tareas N11 y N12. Así ningún par de
   tooltips comparte la primera palabra con «Estación de Surtidos» ni
   con «Cola de Guías». Los data-tab-slug NO cambian.
   ───────────────────────────────────────────────────────────────── */
/* En colapsado todos los módulos se muestran como píldoras de icono de 42x42px con tooltip */
body.sidebar-collapsed :where(.sidebar) .nav-item {
  display: flex !important;
}

/* Encabezados de sección: en colapsado se reducen a un separador limpio. */
.nav-section-title {
  padding: 16px 16px 6px 20px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: .75;
  transition: padding var(--sidebar-tx), opacity 140ms ease;
}
.nav-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

body.sidebar-collapsed .nav-section-title {
  padding: 12px 18px 4px;
  font-size: 0;              /* oculta el texto, conserva el separador */
  gap: 0;
}
body.sidebar-collapsed .nav-section-title::after { flex: 1; }

.nav-more-trigger,
.nav-more-panel,
.nav-more-btn {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   7. SELECTOR DE CLIENTE
   En colapsado el <select> no cabe: se sustituye por una pastilla con
   las iniciales del cliente activo que, al pulsarse, expande el sidebar.

   Nota: el conmutador de modo (.mode-switcher) ya no aparece aquí —
   por decisión 1 los modos del dashboard se retiran junto con su
   markup y sus reglas de main.css:533-601.
   ───────────────────────────────────────────────────────────────── */
body.sidebar-collapsed .client-context-selector { display: none; }

.client-chip { display: none; }

body.sidebar-collapsed .client-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--primary-light);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  font-weight: 800;
  font-size: .78rem;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease;
}
body.sidebar-collapsed .client-chip:hover { transform: scale(1.06); }

body.sidebar-collapsed .client-chip[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-color);
  color: var(--card-bg);
  padding: 7px 11px;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 200;
}
body.sidebar-collapsed .client-chip:hover::after { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────
   8. ZONA INFERIOR
   En colapsado se conservan SIEMPRE VISIBLES la foto de perfil y el
   cierre de sesión. Ayuda y tema pasan al menú emergente del avatar.

   Razón (§6.5 del plan): cerrar sesión es lo que más se busca a ciegas
   al terminar un turno, y en terminales compartidas de almacén dejarla
   a dos clics invita a que la sesión anterior siga abierta. El avatar,
   además de llevar al perfil, dice CON QUÉ CUENTA trabaja la terminal
   — en un piso con relevos eso es información operativa.
   ───────────────────────────────────────────────────────────────── */
.sidebar-footer {
  padding: 12px 10px 18px;
  border-top: 1px solid var(--border-color);
  background: var(--card-bg);
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: padding var(--sidebar-tx);
}

body.sidebar-collapsed .sidebar-footer {
  padding: 10px 6px 14px;
}

/* Perfil de usuario centrado */
.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 10px 8px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.user-profile:hover {
  background: var(--hover-color, rgba(5, 150, 105, 0.08));
  border-color: var(--primary-color);
}

.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.user-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--text-color);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.user-role {
  font-size: .76rem;
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
}

/* Colapsado: solo avatar centrado */
body.sidebar-collapsed .user-profile {
  padding: 4px 0 !important;
  background: transparent !important;
  border: none !important;
}
body.sidebar-collapsed .user-info {
  display: none !important;
}
body.sidebar-collapsed .user-avatar {
  width: 38px !important;
  height: 38px !important;
  font-size: .88rem;
  margin: 0 auto !important;
}

/* 3 Botones de acción con texto */
.footer-actions {
  display: flex;
  gap: 6px;
  width: 100%;
}

.footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  transition: all .18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}

.footer-btn:hover {
  background: var(--hover-color, rgba(5, 150, 105, 0.08));
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.footer-btn.is-logout {
  color: var(--danger-color);
}
.footer-btn.is-logout:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--danger-color);
  color: var(--danger-color);
}

.footer-btn-text {
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* En colapsado los 3 botones se apilan como iconos de 38x38px */
body.sidebar-collapsed .footer-actions {
  flex-direction: column !important;
  gap: 6px !important;
  align-items: center !important;
}

body.sidebar-collapsed .footer-btn {
  width: 38px !important;
  height: 38px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

body.sidebar-collapsed .footer-btn-text {
  display: none !important;
}

body.sidebar-collapsed .footer-btn.is-logout[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--danger-color);
  color: #fff;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity 150ms ease;
}
body.sidebar-collapsed .footer-btn.is-logout:hover::after { opacity: 1; }

/* Menú emergente del avatar: ayuda y tema, solo en colapsado. */
.user-menu {
  position: fixed;
  left: calc(var(--sidebar-width-collapsed) + 8px);
  bottom: 22px;
  width: 194px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  padding: 6px;
  z-index: 300;
  display: none;
}
.user-menu.open { display: block; animation: navMoreIn 160ms cubic-bezier(.4, 0, .2, 1); }
.user-menu .footer-btn { justify-content: flex-start; padding: 9px 11px; }

/* ─────────────────────────────────────────────────────────────────
   8b. COLAPSO IMPOSIBLE — sin primordiales permitidos
   §6.4: data-primary decide QUÉ se ve al colapsar, nunca QUIÉN puede
   verlo. Si el filtro de permisos de main.js:426 oculta los diez
   primordiales, la barra colapsada quedaría vacía. En ese caso el
   botón se deshabilita en vez de producir un menú sin contenido.
   ───────────────────────────────────────────────────────────────── */
.sidebar-toggle[disabled] {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: auto;       /* conserva el tooltip explicativo */
}
.sidebar-toggle[disabled]:hover {
  background: var(--card-bg);
  color: var(--text-muted);
  border-color: var(--border-color);
}

/* ─────────────────────────────────────────────────────────────────
   9. MÓVIL
   El colapso no aplica: manda el drawer de main.css:130-143.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: var(--sidebar-width) !important;
    max-width: 85vw !important;
    transform: translateX(-100%) !important;
    z-index: 1050 !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  .content {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  body.sidebar-collapsed { --sidebar-current: var(--sidebar-width); }
  body.sidebar-collapsed .sidebar { width: var(--sidebar-width) !important; }
  body.sidebar-collapsed :where(.sidebar) .nav-item:not([data-primary]) { display: flex !important; }
  body.sidebar-collapsed :where(.sidebar) .nav-item { justify-content: flex-start; padding: 10px 14px; gap: 12px; }
  body.sidebar-collapsed :where(.sidebar) .nav-item .nav-label { opacity: 1; width: auto; }
  body.sidebar-collapsed .nav-section-title { font-size: .7rem; padding: 20px 16px 8px 24px; }
  body.sidebar-collapsed .client-context-selector,
  body.sidebar-collapsed .user-meta,
  body.sidebar-collapsed .footer-actions,
  body.sidebar-collapsed .footer-btn.is-help,
  body.sidebar-collapsed .footer-btn.is-theme { display: revert; }
  body.sidebar-collapsed .footer-btn.is-logout {
    width: 100%; height: auto; margin: 0; padding: 9px;
    border: none; background: none; border-radius: var(--radius-md); gap: 8px;
  }
  body.sidebar-collapsed .footer-btn.is-logout .lb { display: revert; }
  body.sidebar-collapsed .user-avatar { width: 40px; height: 40px; }
  body.sidebar-collapsed .client-chip,
  body.sidebar-collapsed .nav-more-trigger,
  body.sidebar-collapsed .user-menu { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   10. MODO OSCURO (tarea C9)
   Sobre body.dark-mode de dark-mode.css.
   ───────────────────────────────────────────────────────────────── */
body.dark-mode .sidebar-toggle {
  background: #292524;
  border-color: #44403c;
  color: #a8a29e;
}
body.dark-mode .sidebar-toggle:hover {
  background: var(--primary-color);
  color: #0c0a09;
  border-color: var(--primary-color);
}

body.dark-mode.sidebar-collapsed .client-chip[data-label]::after,
body.dark-mode.sidebar-collapsed .user-card[data-label]::after {
  background: #f5f5f4;
  color: #1c1917;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

body.dark-mode.sidebar-collapsed .footer-btn.is-logout[data-label]::after {
  background: var(--danger-color);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

body.dark-mode .nav-more-panel,
body.dark-mode .user-menu {
  background: #292524;
  border-color: #44403c;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

body.dark-mode.sidebar-collapsed .footer-btn.is-logout {
  background: rgba(220, 38, 38, .14);
  border-color: rgba(220, 38, 38, .34);
}
body.dark-mode.sidebar-collapsed .footer-btn.is-logout:hover {
  background: var(--danger-color);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   11. ACCESIBILIDAD
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  :where(.sidebar) .nav-item,
  :where(.sidebar) .nav-item .nav-label,
  .sidebar-toggle svg,
  .nav-more-panel { transition: none !important; animation: none !important; }
}

:where(.sidebar) .nav-item:focus-visible,
.footer-btn:focus-visible,
.client-chip:focus-visible,
.user-card:focus-visible,
.nav-more-trigger:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.footer-btn.is-logout:focus-visible { outline-color: var(--danger-color); }

/* ═══════════════════════════════════════════════════════════════════
   NOTAS DE INTEGRACIÓN

   1. El markup de cada .nav-item pasa a:
        <div class="nav-item" data-tab-slug="…" data-primary data-label="Estación de Surtidos">
          <span class="nav-icon"><iconify-icon icon="…"></iconify-icon></span>
          <span class="nav-label">Estación de Surtidos</span>
        </div>
      data-tab-slug NO se toca: main.js:426 filtra permisos contra él.

   2. Aplicar el estado antes del primer pintado (tarea C3), en el <head>
      de base.html, antes de cualquier <link>:
        <script>
          try {
            if (localStorage.getItem('jade_sidebar_collapsed') === '1' &&
                window.matchMedia('(min-width: 769px)').matches) {
              document.documentElement.classList.add('pre-collapsed');
            }
          } catch (e) {}
        </script>
      y trasladar la clase a <body> en cuanto exista.

   3. Retirar de sidebar.html los ~40 atributos style= en línea y los
      onmouseover/onmouseout de las líneas 8-9 y 260-262 (tareas S3-S4):
      ninguno responde al modo oscuro.

   4. Todo lo que hoy calcula posiciones con var(--sidebar-width) debe
      pasar a var(--sidebar-current) — en particular main.css:738.

   5. Markup del pie (§6.5). El avatar y el cierre de sesión sobreviven
      al colapso; ayuda y tema van al menú emergente:

        <div class="sidebar-footer">
          <div class="user-card" tabindex="0"
               data-label="Ana Ruiz&#10;Administrador"
               onclick="…">
            <div class="user-avatar">…</div>
            <div class="user-meta">…</div>
          </div>
          <div class="footer-actions">
            <button class="footer-btn is-help">…</button>
            <button class="footer-btn is-theme">…</button>
            <button class="footer-btn is-logout" data-label="Cerrar sesión">
              <span class="ic">⏻</span><span class="lb">Cerrar Sesión</span>
            </button>
          </div>
          <div class="user-menu" id="userMenu"><!-- ayuda + tema --></div>
        </div>

      El tooltip del avatar usa &#10; para partir nombre y rol en dos
      líneas; por eso white-space es pre-line y no nowrap.

   6. Tarea C12: antes de habilitar el botón de colapso, comprobar que
      al menos un [data-primary] sobreviva al filtro de permisos de
      main.js:426. Si no queda ninguno, poner el atributo disabled y
      un data-label que explique por qué — la regla .sidebar-toggle
      [disabled] de la sección 8b ya cubre la presentación.

   7. Tarea C13: retirar el style= en línea de sidebar.html:35. Todo
      el overflow del nav vive ahora en la sección 3 de esta hoja; un
      style en línea gana a cualquier regla y reintroduciría la barra
      horizontal.

   8. Tarea C15 — el listener que alterna los degradados de borde:

        const nav = document.getElementById('sidebar-nav');
        const sb  = document.querySelector('.sidebar');
        const sync = () => {
          sb.classList.toggle('nav-can-scroll-up', nav.scrollTop > 4);
          sb.classList.toggle('nav-can-scroll-down',
            nav.scrollTop + nav.clientHeight < nav.scrollHeight - 4);
        };
        nav.addEventListener('scroll', sync, { passive: true });
        new ResizeObserver(sync).observe(nav);   // colapso y permisos
        sync();

      El ResizeObserver importa: al colapsar o al ocultar ítems por
      permisos cambia scrollHeight sin que haya evento de scroll.

   9. Tarea C16 — persistencia del desplazamiento (§6.6.5):
      · sessionStorage.jade_sidebar_scroll, no localStorage: por
        pestaña, para que una no arrastre la posición de otra.
      · Guardar en 'scroll' con requestAnimationFrame o ~100ms de
        retardo; no escribir en cada píxel.
      · Restaurar ANTES del primer pintado, junto al estado de colapso
        de la tarea C3. Hacerlo en DOMContentLoaded produce un salto.
      · PRIORIDAD: si hay un .nav-item.active fuera de la vista, gana
        centrarlo sobre restaurar la posición guardada. Llegar a una
        página y no ver dónde estás es peor que perder el scroll.
   ═══════════════════════════════════════════════════════════════════ */

/* Interruptor «Recibir impresiones» (print-receiver.js) debajo del nombre y rol de usuario en el sidebar */
.print-receiver-sidebar-card {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}

.print-receiver-sidebar-card[data-state="on"] {
  border-color: rgba(5, 150, 105, 0.45);
  background: rgba(16, 185, 129, 0.06);
}

.print-receiver-sidebar-card[data-state="warn"] {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.08);
}

.pr-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.pr-switch-main {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-color);
  font-size: 0.77rem;
  font-weight: 600;
  text-align: left;
  min-width: 0;
  flex: 1;
}

.pr-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.print-receiver-sidebar-card[data-state="on"] .pr-status-dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

.print-receiver-sidebar-card[data-state="warn"] .pr-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.24);
}

.pr-switch-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.pr-switch-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.pr-queue-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 22px;
  min-width: 22px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pr-queue-link:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.pr-queue-badge {
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  color: #ea580c;
}

.pr-pill-switch {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: #cbd5e1;
  border: none;
  padding: 2px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

body.dark-mode .pr-pill-switch {
  background: #44403c;
}

.print-receiver-sidebar-card[data-state="on"] .pr-pill-switch {
  background: #059669;
}

.print-receiver-sidebar-card[data-state="warn"] .pr-pill-switch {
  background: #f59e0b;
}

.pr-pill-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transform: translateX(0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.print-receiver-sidebar-card[data-state="on"] .pr-pill-thumb,
.print-receiver-sidebar-card[data-state="warn"] .pr-pill-thumb {
  transform: translateX(15px);
}

.pr-printer-drawer {
  width: 100%;
  padding-top: 5px;
  border-top: 1px dashed var(--border-color);
}

.pr-printer-select {
  width: 100%;
  font-size: 0.73rem;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-color);
  outline: none;
  cursor: pointer;
}

/* Colapsado: solo el punto de estado centrado en un botón de 38x38 */
@media (min-width: 769px) {
  body.sidebar-collapsed .sidebar-footer #print-receiver-chip.in-sidebar {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  body.sidebar-collapsed #print-receiver-chip.in-sidebar .pr-switch-row,
  body.sidebar-collapsed #print-receiver-chip.in-sidebar .pr-switch-main {
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  body.sidebar-collapsed #print-receiver-chip.in-sidebar .pr-status-dot {
    width: 10px;
    height: 10px;
  }
  body.sidebar-collapsed #print-receiver-chip.in-sidebar .pr-switch-text,
  body.sidebar-collapsed #print-receiver-chip.in-sidebar .pr-switch-controls,
  body.sidebar-collapsed #print-receiver-chip.in-sidebar .pr-printer-drawer {
    display: none !important;
  }
}