/* ============================================================
   sidebar.css — Drawer de navegación lateral (menú ☰)
   Extraído 1:1 desde styles.css líneas 288–459.
   Nota: el panel de clientes (#sidebar, lista en mapa/lista) y sus
   filtros de tags siguen en legacy.css por ahora — su CSS no es
   contiguo en el archivo original y separarlo requiere verificar
   que ninguna regla más adelante dependa del orden de aparición
   para desempatar especificidad. Se hace en Fase 2, con esa
   verificación dedicada (ver PROGRESS).
   ============================================================ */

/* Drawer lateral */
/* v8.5.16: el scrim ya NO cubre el topbar (top:54px en vez de 0) — antes el
   negro al 50% se superponía al buscador/segmented-control y, como su fondo
   ya era de por sí muy cercano en luminosidad al fondo del topbar en dark
   mode, los dejaba prácticamente ilegibles mientras el drawer estaba abierto.
   Fix de raíz: el topbar simplemente queda fuera del área que oscurece el
   scrim, en vez de parchear cada elemento individual para que "aguante" el
   oscurecimiento. 54px = altura de #topbar (ver regla de #topbar arriba). */
#drawer-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1090; opacity: 0; pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
#drawer-overlay.open { opacity: 1; pointer-events: auto; }
#drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 85vw;
  background: var(--bg-glass-drawer);
  /* v8.6.5: saturate subida de 150% → 180% (consistente con topbar y blur-premium) */
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-right: 0.5px solid var(--border-retina);
  /* v8.6.5: inset highlight — el drawer viene desde la izquierda, así que la
     luz ficticia golpea su borde DERECHO (el que está expuesto hacia el contenido).
     Se mantiene siempre (cerrado y abierto) porque el panel tiene espesor físico real. */
  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
  z-index: 1100; transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column;
}
#drawer.open {
  transform: translateX(0);
  box-shadow: var(--shadow-lg), inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
}
.drawer-header {
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 0.5px solid var(--border-retina); height: 52px;
}
.drawer-header h2 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; }

/* Scrollbar oculta pero funcional (rueda del mouse / touch siguen activos) */
.drawer-nav {
  padding: 10px 8px; overflow-y: auto; flex: 1;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Edge legacy / IE */
}
.drawer-nav::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Chrome, Safari, Edge Chromium */

/* Ítems del menú: aire interno, esquinas suaves, transición orgánica */
.drawer-item {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 20px);
  padding: 9px 12px; background: transparent; border: none;
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer; border-radius: 6px;
  text-align: left; margin: 2px 10px;
  transition: background 0.28s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.2s ease,
              transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}
.drawer-item:hover:not(.active) { background: var(--input-bg); color: var(--text-primary); }
.drawer-item:active { transform: scale(0.975); }
.drawer-item.active { background: var(--accent-blue); color: #FFFFFF; box-shadow: 0 2px 6px var(--accent-blue-trans); }
.drawer-item.active .di-icon { color: #FFFFFF; }

/* Iconografía Lucide: SVG lineal, fino, escalado consistente */
.drawer-item .di-icon {
  flex-shrink: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: color 0.2s ease;
}
.drawer-item .di-icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.drawer-item:hover:not(.active) .di-icon { color: var(--text-primary); }
.drawer-item .di-label { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════
   v8.5.20 — CARPETAS COLAPSABLES DEL DRAWER, v2 (chevron a la izquierda)
   Reemplaza la v8.5.19: ahí el chevron vivía a la derecha y el header no
   tenía ícono propio. Ahora el orden es estrictamente chevron → ícono de
   grupo → texto (extremo derecho de la fila vacío), y el mecanismo de
   apertura se invirtió: ".is-open" en .drawer-folder es la que EXPANDE
   (antes ".is-collapsed" colapsaba con default abierto) — más natural
   para que app.js solo tenga que alternar una clase con semántica obvia.
═══════════════════════════════════════════════════════════════ */

/* Carpeta: simple agrupador, separación discreta entre secciones */
.drawer-folder { margin-bottom: 4px; }
.drawer-folder + .drawer-folder { margin-top: 2px; }

/* Encabezado de sección — toda la fila es el botón clickeable, con su
   propio hover translúcido y esquinas redondeadas (8px), igual lenguaje
   que un .drawer-item normal pero con tipografía de encabezado adentro. */
.sidebar-folder-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer;
  padding: 9px 10px; margin: 0; border-radius: 8px;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.sidebar-folder-btn:hover { background: var(--overlay-hover); }
.sidebar-folder-btn:active { background: var(--overlay-active); }

/* Chevron — SIEMPRE primero (extremo izquierdo). Apunta a la derecha en
   reposo (cerrado) y rota 90° hacia abajo cuando la carpeta está abierta,
   con la curva física del proyecto. Un solo ícono, nunca dos alternados. */
.sf-chevron {
  width: 13px; height: 13px; stroke-width: 2; flex-shrink: 0;
  color: var(--text-muted);
  transform: rotate(0deg);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s ease;
}
.drawer-folder.is-open .sf-chevron { transform: rotate(90deg); }

/* Ícono representativo del grupo — segundo en el orden, mismo tratamiento
   lineal/fino que el resto de los íconos Lucide de la app. */
.sf-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: color 0.25s ease;
}
.sf-icon svg { width: 16px; height: 16px; stroke-width: 1.85; }
.sidebar-folder-btn:hover .sf-icon { color: var(--text-primary); }

/* Texto del título — pequeño, semibold, atenuado: jerarquía de encabezado
   de sección, no de ítem de menú. */
.sf-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: color 0.25s ease;
}
.sidebar-folder-btn:hover .sf-label { color: var(--text-primary); }

/* Cuerpo de la carpeta: la sangría de los hijos se calcula para que el
   ÍCONO de cada .drawer-item arranque exactamente donde arranca el TEXTO
   del título de arriba — es decir, salta el ancho del chevron + su gap +
   el ícono de grupo + su gap. Con los valores de arriba (padding 10px +
   chevron 13px + gap 8px + ícono 16px + gap 8px ≈ 55px) y el padding propio
   de .drawer-item (14px), el indent extra queda en 41px. Si en el futuro
   cambian esos tamaños, ajustar --sf-indent acá es el único lugar a tocar.
   El colapso sigue siendo vía max-height (display:none no se puede animar;
   overflow:hidden evita que el contenido se escape un frame). */
.drawer-folder-body {
  --sf-indent: 41px;
  display: flex; flex-direction: column; gap: 1px;
  padding-left: var(--sf-indent); overflow: hidden;
  max-height: 0; opacity: 0;
  /* v8.6.5: reemplazada cubic-bezier(0.4, 0, 0.2, 1) (Material Design easing)
     por la misma curva orgánica que ya usa el #drawer al abrirse. */
  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity    0.24s cubic-bezier(0.25, 1, 0.5, 1);
}
.drawer-folder.is-open .drawer-folder-body { max-height: 600px; opacity: 1; }

/* Ítems dentro de una carpeta: mismo lenguaje que .drawer-item pero con
   esquinas más cerradas (8px en vez de 12px) — ligeramente más "compactas"
   al estar anidadas, hover translúcido muy suave heredado de .drawer-item. */
.drawer-folder-body .drawer-item { border-radius: 8px; }

/* Carpetas vacías para el rol actual (todo su contenido era admin-only y
   quedó oculto por .drawer-item-admin): se ocultan enteras para no dejar
   un encabezado "Análisis" sin nada debajo.
   v8.6.3: en vez de depender de JS marcando .is-empty (quedaba "lista y sin
   efecto" según el comentario original — nunca se implementó), se resuelve
   100% en CSS con :has(): si NINGÚN .drawer-item directo de la carpeta es
   visible para el rol actual, la carpeta entera desaparece. Cero JS, nunca
   queda desactualizado aunque se reordenen ítems entre carpetas. */
body.role-vendedor .drawer-folder:not(:has(.drawer-item:not(.drawer-item-admin))),
body.role-oficina .drawer-folder:not(:has(.drawer-item:not(.drawer-item-admin))) {
  display: none;
}

/* v8.6.3 — ítem deshabilitado ("Próximamente"): mismo lenguaje visual que
   .drawer-item pero sin estado hover/active y opacidad reducida — el
   módulo de Calendario tiene su CSS de pantalla completa ya preparado
   (ver legacy.css "MÓDULO CALENDARIO PREMIUM") pero todavía no tiene vista
   ni lógica detrás, así que el ítem queda visible (comunica la jerarquía
   completa del menú) pero no clickeable. */
.drawer-item:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.tb-badge.soon { background: var(--bg-modifier-strong); color: var(--text-muted); }

/* Pin vencido — ring rojo pulsante */
.leaflet-marker-icon.overdue-pin {
  filter: drop-shadow(0 0 4px rgba(255,107,107,0.95)) drop-shadow(0 0 8px rgba(255,107,107,0.7));
  animation: pulseOverdue 1.8s ease-in-out infinite;
}
@keyframes pulseOverdue {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,107,107,0.85)); }
  50% { filter: drop-shadow(0 0 8px rgba(255,107,107,1)) drop-shadow(0 0 14px rgba(255,107,107,0.6)); }
}

/* En mobile, el título se esconde y la grilla pasa a auto/1fr/auto para darle prioridad al buscador */
@media (max-width: 500px) {
  #topbar { grid-template-columns: auto 1fr auto; column-gap: 8px; padding: 0 8px; --tb-search-inset: 0px; }
  #topbar h1 { display: none; }
}