/* ═══════════════════════════════════════════════════════════════════
   PROPUESTA — Agrupación de sidebar y dashboard
   Complementa static/css/main.css y static/css/home.css.
   Resuelve §5 del plan.

   DEFECTOS QUE CORRIGE
   ────────────────────
   E1  El título «Operaciones» (sidebar.html:36) es data-dashboard-mode
       ="labels" pero 7 de sus 9 ítems son "labels-logistics". En modo
       Logística la regla de main.css:571 oculta el encabezado y muestra
       los ítems: siete accesos flotando sin título de sección.
       → Resuelto de raíz: los modos se retiran (sección 6).
   E2  La tarjeta «Operaciones y Surtido» (home-tab.html:88) es "labels",
       así que desaparece entera en modo Logística aunque el sidebar sí
       muestre esos módulos. Dos menús, dos respuestas distintas.
       → Resuelto de raíz: los modos se retiran (sección 6).
   E7  Seis ítems del sidebar llevan border-left y fondo en línea con
       colores distintos (#059669, #3b82f6, #ef4444, #10b981, #6366f1,
       #0284c7) y el resto ninguno. El color no codifica nada y compite
       con .active, que es el único color que sí significa algo.
   E8  ~40 atributos style= en línea, ninguno responde al modo oscuro.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. SECCIONES DEL SIDEBAR
   Un encabezado NUNCA se separa de sus hijos: con la agrupación de
   §5.3 cada sección reúne ítems del mismo modo, y con la Opción 1
   (retirar los modos) el problema desaparece de raíz.
   ───────────────────────────────────────────────────────────────── */
.nav-section {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.nav-section:last-of-type { border-bottom: none; }

.nav-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px 8px 22px;
  font-size: .69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color .18s ease;
}
.nav-section-title:hover { color: var(--text-color); }

.nav-section-title .chev {
  width: 12px; height: 12px;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
  opacity: .6;
}
.nav-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* Colapso de sección con estado en localStorage (tarea S6) */
.nav-section.is-collapsed .nav-section-title .chev { transform: rotate(-90deg); }
.nav-section.is-collapsed .nav-section-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.nav-section-body {
  max-height: 900px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 240ms cubic-bezier(.4, 0, .2, 1), opacity 160ms ease;
}

/* Contador de ítems: al colapsar una sección el usuario sigue viendo
   cuántos accesos guarda dentro. */
.nav-section-count {
  font-size: .64rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-color);
  border-radius: 20px;
  padding: 1px 7px;
  opacity: 0;
  transition: opacity 160ms ease;
}
.nav-section.is-collapsed .nav-section-count { opacity: .8; }

/* ─────────────────────────────────────────────────────────────────
   2. ÍTEMS — el color vuelve a significar algo (corrige E7)
   Se retiran los border-left decorativos de sidebar.html líneas
   56, 62, 68, 74, 80, 86 (tarea S5). El acento queda reservado al
   estado activo. Para las dos únicas distinciones que sí aportan
   información se usan modificadores explícitos, no color suelto.
   ───────────────────────────────────────────────────────────────── */
:where(.sidebar) .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 12px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 600;
  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);
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
  overflow: hidden;
}

: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;
}

:where(.sidebar) .nav-item.active::before,
:where(.sidebar) .nav-item::before,
:where(.sidebar) .nav-item::after {
  display: none !important;
}

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

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

/* Único uso legítimo de color por ítem: señalar que algo requiere
   atención. Se alimenta de datos reales, no de decoración fija. */
:where(.sidebar) .nav-item .nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--danger-color);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
:where(.sidebar) .nav-item .nav-badge:empty { display: none; }

/* Abre en pestaña nueva: se avisa con un icono, no con color. */
:where(.sidebar) .nav-item[data-external] .nav-label::after {
  content: "↗";
  margin-left: 5px;
  font-size: .78em;
  opacity: .5;
}

/* Retiro de filetes y líneas conectoras verticales que estorban */
.nav-section[data-section="flujo-surtido"] .nav-section-body::before {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   4. REJILLA DEL DASHBOARD
   Espeja exactamente la agrupación del sidebar.
   ───────────────────────────────────────────────────────────────── */
.home-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .home-area-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .home-area-grid {
    grid-template-columns: 1fr;
  }
}

.home-area-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  transition: border-color .2s ease, box-shadow .2s ease;
  align-self: start;
  height: fit-content;
}
.home-area-card:hover {
  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

/* La tarjeta del flujo principal ocupa todo el ancho superior */
.home-area-card[data-area="flujo-surtido"] {
  grid-column: 1 / -1;
}

.home-area-card[data-area="flujo-surtido"] .tab-launcher-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.home-area-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-color);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  letter-spacing: -.2px;
}

.home-area-header .area-hint {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────
   5. BOTONES DE ACCESO DIRECTO
   ───────────────────────────────────────────────────────────────── */
.tab-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 8px;
}

.launcher-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px 10px;
  min-height: 96px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  color: var(--text-color);
  transition: background .18s ease, border-color .18s ease, transform .16s ease, box-shadow .18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}

.launcher-btn:hover {
  background: var(--card-bg);
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}
.launcher-btn:active { transform: translateY(0); }

.launcher-icon {
  font-size: 46px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
}
.launcher-icon img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain;
}
.launcher-icon iconify-icon {
  font-size: 46px !important;
  width: 46px;
  height: 46px;
}

.launcher-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

/* Numeración del flujo: el orden de proceso también visible aquí. */
.home-area-card[data-area="flujo-surtido"] .launcher-btn {
  position: relative;
}
.home-area-card[data-area="flujo-surtido"] .launcher-btn[data-step]::before {
  content: attr(data-step);
  position: absolute;
  top: 7px;
  left: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-color);
  font-size: .64rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.launcher-btn .launcher-badge {
  position: absolute;
  top: 7px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger-color);
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.launcher-btn .launcher-badge:empty { display: none; }

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

/* ─────────────────────────────────────────────────────────────────
   6. RETIRO DE LOS MODOS DEL DASHBOARD — decisión 1
   Se eliminan por completo. Este bloque NO añade estilos: documenta
   qué se borra, porque el retiro es la mitad del trabajo de la Fase 5.

   BORRAR de static/css/main.css
   ─────────────────────────────
     533-570   .mode-switcher, .mode-pill, .mode-pill:hover, .active
     574-579   regla 1 — oculta lo ajeno al modo (con !important)
     581-590   regla 2 — fuerza display:flex a lo propio del modo
     593-602   regla 3 — mismo par para .home-area-card

   Conservar de ese tramo:
     609-611   .nav-section-title, .nav-item { display:flex }
               ← reemplazado por las reglas de la sección 1 y 2 de
                 este archivo, que ya fijan el display correcto.

   BORRAR de templates/
   ────────────────────
     sidebar.html      38 atributos data-dashboard-mode
                       bloque .mode-switcher (líneas 13-20)
     home-tab.html      7 atributos data-dashboard-mode
                       bloque .central-mode-pill (líneas 34-42)
     base.html         switchDashboardMode()        (143-177)
                       su llamada en DOMContentLoaded (185-188)
                       localStorage.jade_dashboard_mode

   DOS TRAMPAS
   ───────────
   a) switchDashboardMode() también fija #home-subtitle (base.html:
      167-176). Al borrarla el subtítulo del dashboard queda vacío:
      dejar un texto fijo en la plantilla ANTES de borrar la función.

   b) body.mode-client (base.html:151) no aparece en ninguna hoja de
      estilo: es código muerto. Su consecuencia es que un client_viewer
      nunca recibe una clase mode-* reconocida, así que las reglas de
      filtrado jamás se le aplicaron. El portal del cliente ya funciona
      hoy como funcionará después — el retiro no lo altera. */

/* ─────────────────────────────────────────────────────────────────
   7. AVISO ÚNICO DE REORGANIZACIÓN
   Reordenar el menú desorienta a quien tiene memoria muscular. Un aviso
   de una sola vez con el mapa de cambios evita la mayoría de las
   llamadas de soporte (§7, nota sobre la Fase 5).
   ───────────────────────────────────────────────────────────────── */
.nav-moved-notice {
  margin: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
  color: var(--primary-text);
  font-size: .8rem;
  line-height: 1.45;
  position: relative;
}
.nav-moved-notice strong { display: block; margin-bottom: 4px; font-size: .84rem; }
.nav-moved-notice ul     { margin: 6px 0 0; padding-left: 16px; }
.nav-moved-notice li     { margin-bottom: 2px; }
.nav-moved-notice .dismiss {
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border: none;
  background: none;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  border-radius: 4px;
}
.nav-moved-notice .dismiss:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

body.sidebar-collapsed .nav-moved-notice { display: none; }

/* ─────────────────────────────────────────────────────────────────
   8. MODO OSCURO
   ───────────────────────────────────────────────────────────────── */
body.dark-mode .home-area-card {
  background: #292524;
  border-color: #44403c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
body.dark-mode .home-area-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }

body.dark-mode .launcher-btn { background: #1c1917; }
body.dark-mode .launcher-btn:hover { background: #34302c; border-color: var(--primary-color); }

body.dark-mode .nav-section-count { background: #1c1917; }

/* ─────────────────────────────────────────────────────────────────
   9. RESPONSIVO Y ACCESIBILIDAD
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .home-area-grid    { grid-template-columns: 1fr; gap: 14px; }
  .home-area-card    { padding: 16px; }
  .tab-launcher-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .launcher-btn      { min-height: 96px; padding: 13px 6px 11px; }
  .launcher-icon     { font-size: 34px; height: 38px; }
  .launcher-icon img,
  .launcher-icon iconify-icon { width: 34px; height: 34px; }
  .launcher-label    { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-section-body,
  .launcher-btn,
  .home-area-card,
  :where(.sidebar) .nav-item { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ESTRUCTURA PROPUESTA (§5.3) — orden y data-section

     flujo-surtido    Escaneo · Validación · Estación · Bitácora ·
                      Incidencias · FIDS
     envios-guias     FedEx Manager · Cola de Guías · Jade Track ·
                      Ciclos · Conciliación DHL
     etiquetas        Etiquetas Rápidas · Digrifar · Importación ·
                      Nutrimental · DUN-14 · Control de Estado
     clientes         MartiDerm Hub · Inventario
     herramientas     Edición de Guías · Recortes · PDF ·
                      Receptor Remoto · Laboratorio ZPL
     evidencia        Consulta de Evidencias · Archivo de Bitácoras ·
                      Historial Global
     administracion   Usuarios · Clientes · Configuración FedEx ·
                      Impresoras de Red

   NOTAS DE INTEGRACIÓN

   1. data-tab-slug NO cambia en ningún ítem. main.js:426 filtra
      permisos contra ese atributo; un slug distinto haría desaparecer
      el acceso para todos los usuarios no-admin (riesgo registrado
      en §8 del plan).

   2. «Bitácora de Surtido» aparece dos veces a propósito: en
      flujo-surtido la usa el operario, en evidencia la consulta
      auditoría. Mismo destino, dos audiencias.

   3. Impresoras de Red (/admin/impresoras-red) es hoy completamente
      inalcanzable: se registra en main.py:240 y se define en
      network_print_routes.py:568, sin un solo enlace en toda la
      aplicación (hallazgo H1).

   4. Configuración FedEx (/admin/fedex) sigue viva — es la pantalla de
      credenciales de API del módulo. Hoy es una puerta de un solo
      sentido: tiene un botón «Volver a Usuarios» hacia /admin/users
      (admin_fedex.html:12) pero /admin/users no enlaza de vuelta.
      Añadir ambos sentidos, con data-role-gated: la ruta ya exige
      require_admin (main.py:839) y no debe relajarse.

   5. Renombrados aceptados (tareas N11 y N12). Solo cambia el texto
      visible; los data-tab-slug siguen siendo standard y guides:

        standard   «Surtido»  →  «Etiquetas Rápidas»
        guides     «Guías»    →  «Edición de Guías»

      Con eso ningún par de tooltips del menú colapsado comparte la
      primera palabra con «Estación de Surtidos» ni «Cola de Guías».
      Nota: home-tab.html:157 YA decía «Edición de Guías» — era el
      sidebar el que discrepaba del propio dashboard.

   6. El nav y el panel «⋯ Más» necesitan overflow-x:hidden explícito
      y la barra de desplazamiento oculta — ver sección 3 de
      sidebar-colapsable.css y §6.6 del plan.

   7. REGLA DE AGRUPACIÓN, fijada al decidir dónde va Digrifar:
      · Una herramienta que PRODUCE algo (etiqueta, guía, recorte) se
        agrupa por lo que produce. Digrifar genera etiquetas → va en
        «Impresión de Etiquetas», aunque sea además un cliente
        registrado (models.py:863).
      · Un tablero que MONITOREA una cuenta va en «Clientes».
        MartiDerm Hub no genera nada: muestra pedidos, guías y
        evidencias de una cuenta.
      El menú agrupa por el trabajo que hace la persona, no por a
      quién se factura. Con el criterio contrario el operario tendría
      que saber de qué cuenta es un pedido antes de encontrar la
      herramienta. */