/* Sidebar polish — añadido por polish hotfix.
   No reemplaza app.css; se carga después y refina spacing/tipografía. */

.sidebar nav {
    gap: .1rem;
    padding: 0 .35rem;
}

.sidebar nav a {
    padding: .5rem .65rem;
    font-size: .89rem;
    font-weight: 500;
    letter-spacing: -.005em;
    border-radius: 7px;
}

.sidebar nav a .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .75;
    transition: opacity .15s;
}

.sidebar nav a .nav-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar nav a:hover .nav-icon,
.sidebar nav a.active .nav-icon {
    opacity: 1;
}

.sidebar nav a.sub {
    padding-left: 2.1rem;
    font-size: .84rem;
    font-weight: 400;
}

.sidebar nav a.sub .nav-icon {
    width: 14px;
    height: 14px;
    margin-right: -.1rem;
}

.sidebar nav a.sub .nav-icon svg {
    width: 14px;
    height: 14px;
}

.sidebar nav a.sub-sub {
    padding-left: 3.2rem;
    font-size: .8rem;
    font-weight: 400;
    opacity: .82;
}

.sidebar nav a.sub-sub:hover {
    opacity: 1;
}

.sidebar nav a.sub-sub::before {
    content: "·";
    margin-right: .5rem;
    opacity: .5;
}

.sidebar .sidebar-section {
    margin: 1.1rem 0 .25rem 0;
    padding: 0 .65rem;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .14em;
    opacity: .55;
}

/* Acortar la cabecera de marca para que respire */
.sidebar .brand {
    margin-bottom: .25rem;
}
.sidebar .tenant-name {
    margin-top: .15rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .65;
}

/* ─────────────────────────────────────────────────────────────────────────
   Anti-flicker en la navegación entre páginas.
   1) html con el color del sidebar: cuando el navegador limpia el viewport
      entre página y página, no se ve un flash blanco contra el sidebar oscuro.
   2) Headers de sección con engranaje (CRM, Email Marketing): reservan su
      caja desde el primer frame para que flex no recoloque cuando el ⚙
      termina de pintarse (eso era el "acordeón" al cambiar de página).
   (Se retiró el cross-fade entre páginas: el efecto de fundido no se quería.)
   ──────────────────────────────────────────────────────────────────────── */
html { background: var(--bg-sidebar); }

.sidebar .sidebar-section {
    /* Reserva la caja completa del header desde el primer pintado.
       width:100% + box-sizing:border-box garantizan que flex no estire al
       aparecer el ⚙. min-height fija deja sitio para el icono SVG 16px.
       contain:layout aísla el reflow del header del resto del sidebar. */
    width: 100%;
    box-sizing: border-box;
    min-height: 24px;
    contain: layout;
}