/*  [MENU 2026-09-25] La barra lateral, con más aire y la marca como único acento.
 *
 *  Se carga DESPUÉS de la hoja de la página y sólo pisa lo visual: la rejilla que angosta
 *  (`body.side-angosta .premium-shell`), el cajón del teléfono (`drawer-open`) y las reglas de
 *  alto siguen donde estaban. Todos los colores son tokens: el tema oscuro sale solo.  */

.premium-sidebar { padding: 18px 12px 14px; gap: 10px; }
.premium-sidebar .side-brand { padding: 0 6px 6px; }

/*  El menú puede encoger y desplazarse DENTRO de su parte cuando la ventana es baja; el pie
 *  (persona, conector, tema, salir) pide su alto y no lo cede. Base 0 y `min-height: 0`: sin
 *  eso el contenido impone el alto y el pie queda encima de la lista (ver test_home_vistas).  */
.premium-sidebar > .side-nav {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  gap: 2px; padding: 2px; margin: 0 -2px; scrollbar-width: thin;
}

/*  `hidden` pierde contra el `display: flex` de los items: sin esto «Pricing» u «Informes TOP»
 *  se verían en la empresa donde no aplican.  */
.premium-sidebar .side-nav [hidden] { display: none !important; }

.premium-sidebar .side-grupo {
  margin: 14px 0 4px; padding: 0 10px; font-size: 10px; letter-spacing: .12em;
  color: var(--text-mute); font-weight: 600;
}
.premium-sidebar .side-grupo:first-of-type { margin-top: 2px; }

.premium-sidebar .side-nav button,
.premium-sidebar .side-nav a,
.premium-sidebar .side-pie button {
  position: relative; width: 100%; min-height: 38px; padding: 8px 10px; gap: 10px;
  border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-soft);
  background: transparent; line-height: 1.25;
  transition: background-color .15s ease, color .15s ease;
}
.premium-sidebar .side-ic { width: 18px; height: 18px; color: var(--text-mute); transition: color .15s ease; }
.premium-sidebar .side-tx { flex: 1 1 auto; }

/*  Pasar por encima: un gris cálido, sin granate — el granate queda para «estás acá».  */
.premium-sidebar .side-nav button:hover:not(.is-active),
.premium-sidebar .side-nav a:hover,
.premium-sidebar .side-pie button:hover {
  background: var(--hx-papel); color: var(--text);
}
.premium-sidebar .side-nav button:hover .side-ic,
.premium-sidebar .side-nav a:hover .side-ic,
.premium-sidebar .side-pie button:hover .side-ic { color: var(--primary); }

/*  El activo: píldora granate suave y un acento a la izquierda.  */
.premium-sidebar .side-nav button.is-active {
  background: var(--primary-soft); color: var(--primary-dark); font-weight: 600;
}
.premium-sidebar .side-nav button.is-active .side-ic { color: var(--primary); }
.premium-sidebar .side-nav button.is-active::before {
  content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--primary);
}
body.theme-dark .premium-sidebar .side-nav button.is-active { color: var(--text); }
body.theme-dark .premium-sidebar .side-nav button.is-active .side-ic { color: var(--text); }

/*  Foco de teclado visible, del mismo granate, sin depender del ratón.  */
.premium-sidebar .side-nav button:focus-visible,
.premium-sidebar .side-nav a:focus-visible,
.premium-sidebar .side-pie button:focus-visible,
.premium-sidebar .side-colapsar:focus-visible,
.premium-sidebar .drawer-close:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px;
}

/*  El globo de notificaciones, a la derecha del renglón.  */
.premium-sidebar .side-nav .nv-globo { float: right; margin: 1px 0 0 8px; }

/*  ── EL PIE ─────────────────────────────────────────────────────────────────────────  */
.side-pie {
  margin-top: auto; flex: none; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 4px 0; border-top: 1px solid var(--border);
}
.side-usuario { display: flex; align-items: center; gap: 10px; padding: 2px 6px; min-width: 0; }
.side-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
  background: var(--primary-soft); color: var(--primary-dark);
}
body.theme-dark .side-avatar { color: var(--text); }
.side-quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.side-quien-nombre, .side-quien-empresa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-quien-nombre { font-size: 13px; font-weight: 600; color: var(--text); }
.side-quien-empresa { font-size: 12px; color: var(--text-mute); }
.side-quien-empresa:empty { display: none; }

.premium-sidebar .side-conector {
  display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 18px; font-size: 12px;
}
.side-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-mute); }
.side-conector[data-estado="online"] .side-punto { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.side-conector[data-estado="degradado"] .side-punto { background: var(--hx-ambar); box-shadow: 0 0 0 3px var(--hx-ambar-soft); }
.side-conector[data-estado="sin-conexion"] .side-punto { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
body.theme-dark .side-punto { box-shadow: none !important; }

.side-pie-acciones { display: flex; gap: 4px; }
.premium-sidebar .side-pie-acciones button {
  display: flex; align-items: center; min-width: 0; min-height: 36px; font: inherit; font-size: 13px;
  font-weight: 500; padding: 6px 8px; border: 0; box-shadow: none; text-align: left; cursor: pointer;
}
.premium-sidebar .side-pie-acciones .theme-toggle { flex: 1 1 auto; }
.premium-sidebar .side-pie-acciones #btn-logout { flex: 0 0 auto; width: auto; }

/*  El botón de angostar, discreto.  */
.premium-sidebar .side-colapsar { border-color: transparent; color: var(--text-mute); }
.premium-sidebar .side-colapsar:hover { border-color: var(--border); background: var(--hx-papel); }

/*  ── ANGOSTADA: SÓLO ICONOS (el nombre pasa a `title`/`aria-label` y al tooltip) ────────  */
body.side-angosta .premium-sidebar { padding-left: 8px; padding-right: 8px; }
body.side-angosta .premium-sidebar .side-nav button,
body.side-angosta .premium-sidebar .side-nav a,
body.side-angosta .premium-sidebar .side-pie button { justify-content: center; padding: 8px 0; }
body.side-angosta .premium-sidebar .side-nav button.is-active::before { left: -6px; }
body.side-angosta .premium-sidebar .side-usuario { justify-content: center; padding: 2px 0; }
body.side-angosta .premium-sidebar .side-conector { display: flex; justify-content: center; padding: 2px 0; }
body.side-angosta .premium-sidebar .side-pie-acciones { flex-direction: column; }
body.side-angosta .premium-sidebar .side-pie-acciones #btn-logout { width: 100%; justify-content: center; }
body.side-angosta .premium-sidebar .side-grupo { display: block; height: 1px; margin: 10px 8px; padding: 0; overflow: hidden; color: transparent; background: var(--border); }
/*  Con la etiqueta escondida, el globo de notificaciones se vuelve un punto sobre el icono.  */
body.side-angosta .premium-sidebar .side-con-globo::after {
  content: ""; position: absolute; top: 7px; right: 12px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--shell);
}

/*  El tooltip de la barra angostada: aparece al lado del icono, con ratón o con teclado.  */
.side-tip {
  position: fixed; z-index: 70; padding: 5px 9px; border-radius: 6px; pointer-events: none;
  background: var(--shell-accent); color: #FFFFFF; font-size: 12.5px; font-weight: 500;
  white-space: nowrap; box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
}
.side-tip[hidden] { display: none; }
body.theme-dark .side-tip { background: var(--card); color: var(--text); border: 1px solid var(--border); }

/*  ── TELÉFONO Y TABLETA: CAJÓN CON FONDO ────────────────────────────────────────────────
 *  Angostar es de escritorio. Si la preferencia quedó guardada y se abre en un teléfono, el
 *  cajón se muestra ENTERO (con nombres): un cajón de sólo iconos no sirve para nada.  */
@media (max-width: 980px) {
  .premium-sidebar .side-colapsar { display: none; }
  .premium-sidebar { box-shadow: 0 0 40px rgba(15, 23, 42, .22); }
  body.side-angosta .premium-sidebar { width: 280px; padding: 18px 12px 14px; }
  body.side-angosta .premium-sidebar .side-tx { display: block; }
  body.side-angosta .premium-sidebar .side-quien { display: flex; }
  body.side-angosta .premium-sidebar .side-brand img { display: block; }
  body.side-angosta .premium-sidebar .side-grupo { height: auto; margin: 14px 0 4px; padding: 0 10px; color: var(--text-mute); background: none; }
  body.side-angosta .premium-sidebar .side-nav button,
  body.side-angosta .premium-sidebar .side-nav a,
  body.side-angosta .premium-sidebar .side-pie button { justify-content: flex-start; padding: 8px 10px; }
  body.side-angosta .premium-sidebar .side-usuario,
  body.side-angosta .premium-sidebar .side-conector { justify-content: flex-start; }
  body.side-angosta .premium-sidebar .side-pie-acciones { flex-direction: row; }
  .mobile-topbar #drawer-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
  .mobile-topbar #drawer-toggle .side-ic { width: 16px; height: 16px; }
}
@media (max-width: 560px) {
  body.side-angosta .premium-sidebar { width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-sidebar .side-nav button, .premium-sidebar .side-nav a, .premium-sidebar .side-pie button,
  .premium-sidebar .side-ic { transition: none; }
}