/* ── BITÁCORA ──
   [v2026.09.13-1] sidebar.css
   2026-09-13 | − el punto ambar de modulo parcial (.sb-pto). Recordarle al cliente en cada
     pantalla lo que su plan no trae es venderle mal (Maria Pia): basta con que el sistema
     lo respete por dentro. El CANDADO se queda, con su globo — uno mudo seria peor.
     Se conserva `.sidebar-link { position: relative }`: lo usa el candadito para
     posicionarse, no solo el punto que se fue.
   [v2026.09.12-1] sidebar.css
   2026-09-12 | El contador "2/9" pasa a ser un PUNTO ambar de 6 px: el numero no cabia
     bien en ningun ancho —al lado del texto se salia con nombres largos, sobre el icono
     lo tapaba— y el dato se lee igual en el globo. El ambar es el mismo que ya significa
     "atencion" en el semaforo de urgencia.
     Se retira .sb-cont y su globo propio: el globo ahora es flotante y vive en
     hvy-permisos.css [v2026.09.12-1].
   [v2026.09.11-3] sidebar.css
   2026-09-11 (3) | + el CONTADOR de modulo parcial (.sb-cont): cuando el plan trae el
     modulo A MEDIAS, en vez de candado va un "2/9" y el globo lista que entra y que no.
     El candado queda solo para el modulo entero fuera del plan (Alberto, 11-09).
     Colocacion, con las medidas reales del menu (entrada de 36 px, icono de 20):
       · panel COMPLETO: al final de la fila, en flujo normal con margin-left:auto. No
         es absoluto a proposito — asi nunca tapa el texto, sea cual sea su largo.
       · SOLO ICONOS y CELULAR: absoluto sobre la esquina del icono, dentro de los 36 px
         de la entrada, de modo que no invade la de arriba ni la de abajo.
     El globo del contador es mas alto que el del candado (lleva dos listas): se ancla
     al centro de la entrada y se le pone un tope de alto con scroll, porque
     Conversaciones en Gratis lista nueve lineas.
   [v2026.09.11-2] sidebar.css
   2026-09-11 (2) | + la propiedad estandar `line-clamp` junto a `-webkit-line-clamp`
     del cajon movil: el editor avisaba de la falta. Solo compatibilidad, no cambia como
     se ve.
     El candadito ya no se oculta por CSS: no esta en el marcado, lo pone
     layout.js donde corresponde (sidebar.html [v2026.09.11-3]). Se retira la regla que
     intentaba esconderlo, que ademas perdia contra Font Awesome.
   [v2026.09.11-1] sidebar.css
   2026-09-11 | + el candadito de los modulos que el plan o el cargo no dan: UNO solo,
     chico, sobre la esquina del icono, en los tres anchos del panel.
     El candadito NO va en el marcado: layout.js lo agrega solo a las entradas con
     candado y lo quita al liberarlas. La primera version lo tenia en todas y lo
     ocultaba por CSS, y Font Awesome (.fas { display:inline-block }, misma
     especificidad, carga despues) le ganaba: se veia a tamano normal en las
     permitidas.
   [v2026.08.30-1] sidebar.css
   2026-08-30 | En celular el menú se cortaba abajo —«Configuración» y «Mi Perfil»
     quedaban fuera— y NO daba scroll. Causa: el marcado traía la clase Tailwind
     `min-h-screen` (min-height:100vh con !important), así que el panel medía siempre al
     menos una pantalla completa: MÁS que su contenedor de calc(100dvh - 54px). El
     contenido cabía dentro de sí mismo, nunca desbordaba y por eso no había nada que
     desplazar. En Android es peor todavía: 100vh no descuenta la barra de direcciones.
     Se retiró la clase en sidebar.html y acá se ata con min-height:0, por si vuelve.
     + padding-bottom: sin él el último ítem queda pegado al borde y no se lee que ahí
     termina la lista.
     La bitácora de la [v2026.08.20-1] ya daba por retirado min-h-screen; seguía en el
     marcado. Conviene verificar en el archivo, no en la bitácora.
   [v2026.08.21-2] sidebar.css
   2026-08-21 (2) | Estilos del SELECTOR DE EMPRESA como primer ítem del menú y de la
     HOJA de empresas (layout.js [v2026.08.21-1]).
     El ítem va arriba y separado por una línea: no es una sección más, es el CONTEXTO
     en el que ocurren todas las demás — mezclado con la lista parecería otra pantalla
     a la que se entra.
     La hoja sube desde abajo y ocupa el ancho completo: en 88 px un desplegable dentro
     del panel no se podría leer. Es el mismo patrón del cajón del menú, así que no hay
     nada nuevo que aprender.
   [v2026.08.21-1] sidebar.css
   2026-08-21 | El nombre de la sección deja de partirse y se corta con «…». Con 88 px
     y palabras largas quedaba «Seguimient / o» y «Conversaci / ones»: una letra suelta
     en la segunda línea se lee peor que una palabra cortada, porque el ojo intenta
     leerla como sílaba.
     Al no partir, cada ítem ocupa UNA línea y sobra alto, así que el texto sube de 10 a
     11 px y el ícono de 19 a 20: en un teléfono se agradece cada punto.
     Se mantienen dos líneas como tope para los nombres de dos palabras («Mi página»,
     «Mi Perfil»), que sí parten bien — por el espacio, no por la mitad de una palabra.
   [v2026.08.20-5] sidebar.css
   2026-08-20 (5) | El panel se cortaba a media altura y dejaba un bloque vacío hasta
     abajo. Causa: la [v2026.08.20-1] le retiró `min-h-screen` —correcto, porque 100vh
     dentro de un contenedor de calc(100dvh - 54px) sobraba 54 px y generaba scroll—,
     pero al quitarlo el panel pasó a medir lo que miden sus once ítems y nada más.
     La solución no es devolverle min-h-screen sino `height:100%`: se estira hasta el
     alto de SU CONTENEDOR, que ya vale calc(100dvh - 54px). Ni sobra ni falta.
     Y overflow-y:auto, por si algún día el menú tiene más ítems que alto disponible:
     que haga scroll dentro y no que empuje la página.
     En móvil no aplica: ahí el JS le da su propia altura de cajón flotante.
   [v2026.08.20-4] sidebar.css
   2026-08-20 (4) | El cajón sube de 70 a 88 px y el texto de 8.5 a 10. En el teléfono
     REAL (no en la ventana angosta del navegador) 70 px partían casi todas las
     palabras: «Dash-board», «Conver-saciones», «Segui-miento», «Adminis-tración». Eso
     ya no es compacto, es ilegible.
     Con 88 px caben en una línea Dashboard, Embudos, Empresas, Chat y Calendario, y
     solo se parten los dos o tres nombres largos. Sigue dejando ~82 % de la pantalla.
     La lección: el ancho se eligió mirando una ventana de escritorio angosta, no un
     teléfono — la densidad de pantalla cambia cuánto texto cabe en los mismos píxeles.
   [v2026.08.20-3] sidebar.css
   2026-08-20 (3) | El cajón medía 200 px pese a que el JS le escribía 70 en línea: el
     marcado trae la clase Tailwind `w-44` (11rem), y en este build Tailwind emite sus
     utilidades con !important — que le gana a un style inline sin !important. El número
     correcto estaba escrito y no mandaba.
     Se arregla donde corresponde: la clase .sidebar-movil fija el ancho en el CSS y le
     gana a w-44. El JS deja de escribir el ancho en móvil — un valor con dos dueños es
     lo que produjo esto.
   [v2026.08.20-2] sidebar.css
   2026-08-20 (2) | EN CELULAR EL CAJÓN ES COMPACTO: 70 px, ícono con su etiqueta
     DEBAJO, en vez de los 200 px con nombres al lado. Con una pantalla de ~500 px, el
     cajón ancho tapaba el 40 % y el velo oscurecía el resto — abrir el menú era perder
     de vista lo que estabas mirando.
     La etiqueta debajo y no solo el ícono: en un teléfono no hay hover que explique, y
     el embudo, las capas de Seguimiento y el globo de Chat no se distinguen solos la
     primera vez. 18 px más que la versión de solo íconos, y se entiende sin adivinar.
     UN solo ancho en celular, a propósito: dos anchos necesitarían un gesto para
     alternarlos, y un gesto que no se ve es un gesto que nadie usa (y que hay que
     recordar). La hamburguesa abre y cierra, nada más.
   [v2026.08.20-1] sidebar.css
   2026-08-20 | Estilos de los estados del panel, que hasta ahora vivían solo como
     anchos en el JS. El ancho lo sigue decidiendo layout.js; acá vive CÓMO SE VE cada
     estado — completo, íconos y oculto — porque un ancho no alcanza para que se vea
     bien: sin overflow-x oculto asomaba medio nombre cortado mientras la barra se
     encogía, y en modo íconos el ícono quedaba pegado a la izquierda en vez de
     centrado. El estado oculto retira además el borde, que si no quedaba como una
     línea flotando en el borde de la pantalla.
     El nombre de cada sección al pasar el mouse NO necesita globo propio: cada enlace
     ya trae su title en sidebar.html.
   (Sin bitácora previa: el archivo nació como extracción de estilos de
    layout/sidebar.html, sin cambios registrados hasta esta fecha.)
── */

/* ═══════════════════════════════════════════════════════════
   HEAVENSY — SIDEBAR
   assets/css/sidebar.css
   Estilos extraídos de layout/sidebar.html
═══════════════════════════════════════════════════════════ */

/* Base: texto gris, ícono azul */
.sidebar-link {
  color: #374151;
}

.sidebar-link i {
  color: #547fff;
}

/* Hover */
.sidebar-link:hover {
  background-color: #ede9fe;
}

.sidebar-link:hover i {
  color: #547fff;
}

/* Activo */
.sidebar-link.active {
  background-color: #ddd6fe !important;
}

.sidebar-link.active i {
  color: #6d28d9 !important;
}

.sidebar-link.active span {
  color: #6d28d9;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   PANEL COLAPSADO Y CAJÓN  [20-08-2026]
   El JS (layout.js) decide el ancho; acá vive cómo se ve en cada estado.
   Tres estados en escritorio: completo · íconos · oculto.
═══════════════════════════════════════════════════════════ */

/* [20-08-2026 (5)] El panel llena su contenedor. Sin esto mide lo que miden sus ítems
   y el fondo se corta a media pantalla; con min-h-screen (100vh) sobrarían los 54 px
   del navbar y aparecería un scroll que no corresponde. */
#sidebar { display: flex; align-self: stretch; }   /* el envoltorio, hijo flex del layout */
#appSidebar { height: 100%; overflow-y: auto; }

/* En modo íconos y en el tránsito a oculto, el contenido no debe asomarse por el
   borde: sin esto se ve medio nombre cortado mientras el ancho se achica. */
#appSidebar { overflow-x: hidden; }

/* Íconos centrados cuando no hay texto que acompañar. El title de cada enlace da el
   nombre al pasar el mouse — ya venía en el marcado, no hace falta un globo propio. */
#appSidebar.sidebar-iconos .sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; }
#appSidebar.sidebar-iconos .sidebar-link i { margin: 0; }

/* Oculto: sin borde ni sombra, para que no quede una línea flotando en el borde. */
#appSidebar[style*="width: 0"] { border-right: none !important; }

/* El cajón en móvil se despega del contenido con su propia sombra (la pone el JS);
   acá solo se asegura que el scroll interno funcione con muchas secciones. */
@media (max-width: 1023px) {
  #appSidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* [30-08-2026] El cajón NO puede crecer más que su alto: si crece, el contenido
     cabe dentro de sí mismo, no desborda y no hay nada que desplazar — solo se corta.
     Es lo que hacía min-h-screen (100vh con !important de Tailwind), ya retirado del
     marcado; esto lo deja atado también desde el CSS por si la clase vuelve.
     Y un respiro abajo: sin él, el último ítem queda pegado al borde y no se ve que
     ahí termina la lista. */
  #appSidebar.sidebar-movil { min-height: 0 !important; padding-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   CELULAR — CAJÓN COMPACTO  [20-08-2026 (2)]
   El ancho lo pone layout.js; acá vive cómo se ve. Ícono arriba, etiqueta debajo.
   Solo cuando el cajón está en modo móvil (lo marca la clase .sidebar-movil).
═══════════════════════════════════════════════════════════ */
#appSidebar.sidebar-movil .sidebar-link {
  flex-direction: column;
  gap: 3px;
  padding: 10px 4px;
  text-align: center;
  justify-content: center;
}
#appSidebar.sidebar-movil .sidebar-link i {
  font-size: 20px;
  margin: 0;
}
/* La etiqueta: chica pero legible, y en dos líneas si el nombre es largo
   ("Configuración", "Conversaciones"). Sin el ml-3 de Tailwind, que la corría. */
#appSidebar.sidebar-movil .sidebar-text {
  display: block !important;
  margin-left: 0 !important;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  width: 100%;
  /* [21-08] Sin partir palabras: se corta con «…». «Seguimient / o» se lee peor que
     «Seguimien…», porque el ojo intenta leer esa letra suelta como una sílaba. Las de
     dos palabras («Mi página») igual usan dos líneas: ahí el corte cae en el espacio,
     que es donde corresponde. */
  overflow-wrap: normal;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  line-clamp: 2;              /* [11-09] la estandar, junto a la de -webkit- */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* El encabezado de la empresa no cabe en 70 px y no aporta: se oculta. */
#appSidebar.sidebar-movil > div:first-child .sidebar-text { display: none !important; }
#appSidebar.sidebar-movil { padding-top: 6px; }

/* El ancho del cajón vive ACÁ y no en el JS: el marcado trae w-44 (Tailwind con
   !important) y le ganaba al style inline. Un ancho, un dueño. */
#appSidebar.sidebar-movil {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
}

/* ═══════════════════════════════════════════════════════════
   SELECTOR DE EMPRESA  [21-08-2026]  · lógica en layout.js
═══════════════════════════════════════════════════════════ */
.sidebar-empresa-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; margin-bottom: 6px;
  background: #fff; border: none; border-bottom: 1px solid #eceaf7;
  border-radius: 10px; cursor: pointer; font-family: 'DM Sans', sans-serif;
  text-align: left; transition: background .15s;
}
.sidebar-empresa-item:hover { background: #faf7ff; }
/* Con una sola empresa el ítem informa, no invita: sin mano ni realce. */
.sidebar-empresa-item.sin-accion { cursor: default; }
.sidebar-empresa-item.sin-accion:hover { background: #fff; }

.sidebar-empresa-ini {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, #9961FF, #5b8dee); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800;
}
.sidebar-empresa-nom {
  font-size: 12px; font-weight: 700; color: #383838; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-empresa-chev { position: absolute; top: 7px; right: 8px; font-size: 8px; color: #b8bed0; }

/* Panel angosto: la misma forma de los demás ítems — inicial arriba, nombre debajo. */
#appSidebar.sidebar-movil .sidebar-empresa-item {
  flex-direction: column; gap: 4px; padding: 10px 4px; text-align: center;
  justify-content: center; border-radius: 0;
}
#appSidebar.sidebar-movil .sidebar-empresa-nom {
  font-size: 10px; max-width: 100%;
}
#appSidebar.sidebar-movil .sidebar-empresa-chev { top: 5px; right: 5px; }

/* Panel colapsado a íconos (escritorio): solo la inicial. */
#appSidebar.sidebar-iconos .sidebar-empresa-item { justify-content: center; padding: 10px 0; }
#appSidebar.sidebar-iconos .sidebar-empresa-nom,
#appSidebar.sidebar-iconos .sidebar-empresa-chev { display: none; }

/* ── La hoja ── */
.empresa-hoja-bg {
  position: fixed; inset: 0; z-index: 60; background: rgba(30,25,80,0);
  display: flex; align-items: flex-end; transition: background .22s;
}
.empresa-hoja-bg.abierta { background: rgba(30,25,80,.42); }
.empresa-hoja {
  width: 100%; max-height: 82vh; background: #fff; border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -8px 30px rgba(30,25,80,.2);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.empresa-hoja-bg.abierta .empresa-hoja { transform: translateY(0); }
/* En escritorio no se pega abajo: queda centrada como una ficha. */
@media (min-width: 769px) {
  .empresa-hoja-bg { align-items: center; justify-content: center; padding: 24px; }
  .empresa-hoja { max-width: 420px; border-radius: 16px; transform: translateY(16px); }
}

.empresa-hoja-asa { width: 38px; height: 4px; border-radius: 3px; background: #e0e0ea;
  margin: 9px auto 4px; flex-shrink: 0; }
.empresa-hoja-t { padding: 6px 18px 12px; font-size: 14px; font-weight: 800; color: #383838; }
.empresa-hoja-t small { display: block; font-size: 11.5px; font-weight: 500; color: #6b7194;
  margin-top: 3px; }
.empresa-hoja-buscar { margin: 0 18px 10px; border: 1px solid #e4e9f5; border-radius: 10px;
  padding: 8px 11px; display: flex; gap: 8px; align-items: center; color: #b8bed0; }
.empresa-hoja-buscar input { border: none; outline: none; flex: 1; font-size: 13px;
  font-family: 'DM Sans', sans-serif; color: #383838; background: none; }
.empresa-hoja-lista { overflow-y: auto; padding-bottom: 14px; }

.empresa-fila { width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 11px 18px; background: #fff; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; text-align: left; transition: background .12s; }
.empresa-fila:hover { background: #faf7ff; }
.empresa-fila.actual { background: #f5f0ff; }
.empresa-av { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; color: #fff;
  background: linear-gradient(135deg, #9961FF, #5b8dee);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.empresa-info { flex: 1; min-width: 0; }
.empresa-info b { display: block; font-size: 13px; font-weight: 700; color: #383838;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empresa-check { color: #9961FF; font-size: 13px; flex-shrink: 0; }
.empresa-vacio { padding: 22px 18px; text-align: center; font-size: 12.5px; color: #b8bed0; }

/* ══ [11-09] LO QUE EL PLAN O EL CARGO NO DAN ═══════════════════════════════ */

/* EL CANDADO GRANDE NO VA EN EL MENU. hvy-permisos.css lo dibuja al final de todo
   elemento con texto (.hvy-con-texto::after), que sirve para botones como "Nueva
   empresa" pero aqui sobra: cada entrada ya lleva su candadito sobre el icono. */
#appSidebar .sidebar-link::after { content: none !important; }

/* La entrada apagada: se ve, se lee y SIGUE navegando (el destino explica). */
.sidebar-link { position: relative; }
.sidebar-link.hvy-bloqueado { cursor: pointer !important; color: #b9b9c8 !important; }
.sidebar-link.hvy-bloqueado:hover { background: #faf9ff; color: #a9a9bb !important; }

/* El candadito: UNO solo, chico, sobre la esquina del icono. Solo existe en las
   entradas con candado (layout.js lo agrega y lo quita): no hay nada que ocultar. */
#appSidebar .sidebar-link .sb-cand {
  display: block;
  position: absolute;
  left: 26px;
  top: 4px;
  width: 11px;
  height: 11px;
  margin: 0;
  padding: 0;
  font-size: 7px;
  line-height: 11px;
  text-align: center;
  color: #b7791f;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #f0e0bd;
  opacity: 1 !important;
}

/* El globo sale a la DERECHA del panel: angosto como es, debajo no cabe. */
.sidebar-link.hvy-bloqueado .hvy-candado-globo {
  left: calc(100% + 10px);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar-link.hvy-bloqueado .hvy-candado-globo::before {
  left: -7px;
  right: auto;
  top: 50%;
  border-left: 1.5px solid #c9b8ff;
  border-bottom: 1.5px solid #c9b8ff;
  border-top: 0;
  transform: translateY(-50%) rotate(45deg);
}
#appSidebar, #appSidebar nav { overflow: visible; }

/* [13-09] Aquí vivía el punto ámbar de módulo parcial. Se retiró: recordarle al cliente
   en cada pantalla lo que su plan no trae es venderle mal (María Pía). El candado se
   queda —con su globo— porque eso sí hay que decirlo.
   `.sidebar-link { position: relative }` sigue abajo: lo necesita el candadito. */
.sidebar-link { position: relative; }