/* ════════════════════════════════════════════════════════════════════
   sidebar.css — Navegación lateral colapsable (rail ↔ expandido)
   · Desktop: sidebar fijo, colapsa a rail de iconos (estado recordado).
   · Mobile : drawer deslizable con backdrop.
   · El menú se genera dinámicamente por rol (mismo modelo de Acceso).
   ════════════════════════════════════════════════════════════════════ */
:root {
    --sb-w: 264px;
    --sb-w-rail: 76px;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--navbar-h);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    background: var(--glass-strong);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
    z-index: 1040;
}

.sb-toggle {
    background: transparent;
    border: none;
    font-size: 1.35rem;
    color: var(--t2);
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    transition: background var(--swift, .15s), color var(--swift, .15s);
}
.sb-toggle:hover { background: var(--surface-3); color: var(--t1); }

.topbar-brand {
    display: flex; align-items: center; gap: 0.6rem;
    text-decoration: none; color: var(--t1); font-weight: 700;
    flex: 0 0 auto;
}
.topbar-logo img { height: 40px; width: 40px; object-fit: contain; border-radius: 11px; display: block; }
.topbar-name { font-family: var(--display); letter-spacing: -0.01em; font-size: 1.05rem; }
.topbar-spacer { flex: 1 1 auto; min-width: 0; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: var(--navbar-h); left: 0; bottom: 0;
    width: var(--sb-w);
    background: var(--surface);
    border-right: 1px solid var(--hairline);
    z-index: 1035;
    overflow-y: auto; overflow-x: hidden;
    padding: 0.7rem 0.55rem;
    transition: width .22s ease, transform .25s ease;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 8px; }

.sb-nav { display: flex; flex-direction: column; gap: 0.15rem; }

/* Items (link directo o cabecera de grupo) */
.sb-item,
.sb-group-toggle,
.sb-subitem {
    position: relative;
    display: flex; align-items: center; gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: none; background: transparent;
    border-radius: 12px;
    color: var(--t2); font-weight: 600; font-size: 0.92rem;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    /* Los grupos son <button>: sin esto el navegador centra su texto y las
       etiquetas del menú quedan desalineadas entre sí. */
    text-align: left;
    transition: background .16s ease, color .16s ease;
}
/* Sin efecto hover en los ítems del menú (por pedido): el resaltado lo da
   únicamente el estado activo. */

/* .sb-ico y .sb-subico (el mosaico de color) se definen en el bloque de color
   del final del archivo, que es la única fuente de verdad de su aspecto. */
.sb-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.sb-caret { font-size: 0.7rem; color: var(--t4); transition: transform .2s ease; flex: 0 0 auto; }
.sb-group.open .sb-caret { transform: rotate(180deg); }

/* Estado activo: fondo suave + barra de acento a la izquierda */
.sb-item.active,
.sb-subitem.active { background: var(--accent-lo); color: var(--accent-hi); }
.sb-item.active::before,
.sb-subitem.active::before {
    content: ""; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 58%; border-radius: 0 4px 4px 0;
    background: var(--accent);
}
.sb-group.active > .sb-group-toggle { color: var(--t1); }
/* El mosaico del ítem activo se rellena; la regla vive en el bloque de color. */

/* El punto del subítem se reemplaza por icono alusivo */
.sb-dot { display: none; }

/* Submenú (acordeón) */
.sb-sub {
    overflow: hidden; max-height: 0;
    transition: max-height .25s ease;
    margin: 0.1rem 0 0.1rem 0.35rem;
    border-left: 2px solid var(--hairline);
    padding-left: 0.25rem;
}
.sb-group.open .sb-sub { max-height: 640px; }
.sb-sub-title { display: none; }
.sb-subitem { font-weight: 500; font-size: 0.88rem; }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t4); flex: 0 0 auto; margin-left: 0.35rem; }
.sb-subitem.active .sb-dot { background: var(--accent); }

/* ── Contenido principal ─────────────────────────────────────────── */
.app-main {
    display: flex; flex-direction: column;
    transition: margin-left .22s ease;
}
.app-main .main-content { flex: 1 0 auto; }

/* Los márgenes (offset del sidebar/topbar) solo cuando hay menú (no en login). */
.app-shell .app-main {
    margin-left: var(--sb-w);
    margin-top: var(--navbar-h);
    min-height: calc(100vh - var(--navbar-h));
}

/* ── Rail colapsado (desktop) ────────────────────────────────────── */
@media (min-width: 992px) {
    .app-shell.sb-collapsed .sidebar { width: var(--sb-w-rail); }
    .app-shell.sb-collapsed .app-main { margin-left: var(--sb-w-rail); }
    .app-shell.sb-collapsed .sb-label,
    .app-shell.sb-collapsed .sb-caret { opacity: 0; visibility: hidden; }
    /* Los iconos del riel quedan alineados a la izquierda (misma sangría que
       cuando el sidebar está expandido), no centrados. */
    .app-shell.sb-collapsed .sb-item,
    .app-shell.sb-collapsed .sb-group-toggle { justify-content: flex-start; gap: 0; }

    /* Submenús cerrados en rail: solo se abren al hacer click en el grupo
       (que expande el sidebar, ver sidebar.js). */
    .app-shell.sb-collapsed .sb-sub { max-height: 0 !important; }

    /* Hover sobre el rail: el sidebar se expande (overlay) mostrando SOLO las
       opciones principales. Al salir el mouse vuelve al riel (colapsado),
       aunque se haya hecho click en un grupo. */
    .app-shell.sb-collapsed .sidebar:hover { width: var(--sb-w); box-shadow: var(--shadow-lg); }
    .app-shell.sb-collapsed .sidebar:hover .sb-label,
    .app-shell.sb-collapsed .sidebar:hover .sb-caret { opacity: 1; visibility: visible; }
    .app-shell.sb-collapsed .sidebar:hover .sb-item,
    .app-shell.sb-collapsed .sidebar:hover .sb-group-toggle { justify-content: flex-start; gap: 0.7rem; }
    /* El submenú de un grupo abierto solo se ve mientras el mouse está encima. */
    .app-shell.sb-collapsed .sidebar:hover .sb-group.open .sb-sub { max-height: 640px !important; }
}

/* ── Backdrop (mobile) ───────────────────────────────────────────── */
.sb-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.42); z-index: 1034;
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}

/* ── Mobile: drawer ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sb-w);
        box-shadow: var(--shadow-lg);
    }
    .app-shell .app-main { margin-left: 0; }
    .app-shell.sb-open .sidebar { transform: none; }
    .app-shell.sb-open .sb-backdrop { display: block; }
    /* en móvil el "rail" no aplica: el drawer siempre va expandido */
    .app-shell.sb-collapsed .sb-label,
    .app-shell.sb-collapsed .sb-caret { opacity: 1; visibility: visible; }
    .topbar-name { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   COLOR DE LOS ICONOS DEL MENÚ — MOSAICO, EL TONO CUELGA DEL GRUPO
   ──────────────────────────────────────────────────────────────────
   POR QUÉ UN MOSAICO Y NO SOLO EL ICONO A COLOR
      Los Bootstrap Icons son de trazo fino (~1px a 1.16rem). Colorear ese trazo
      pinta poquísimos píxeles: por muy distintos que sean los tonos, a simple
      vista no se aprecian y el usuario termina leyendo la etiqueta igual. Con
      un mosaico de 30x30 el color pasa a ser un BLOQUE y se vuelve la señal
      dominante; la forma del icono queda de apoyo, no de único indicio.
      Es el mismo recurso de Ajustes de iOS/macOS, y funciona con los iconos de
      línea que ya usa el menú (pasar a rellenos no era opción: Bootstrap Icons
      solo trae variante -fill para la mitad de los que necesita esta app).

   DE DÓNDE SALE EL TONO — data-ico, NO la clase del icono
      El color se declara sobre el atributo data-ico que _Layout.cshtml pone en
      el GRUPO (o en el ítem suelto) con el icono DEL PADRE, y los mosaicos lo
      toman por herencia de la variable. Consecuencia buscada: cada sub-opción
      conserva su icono propio —dice QUÉ hace— pero se pinta del color de su
      grupo —dice A QUÉ pertenece—. Antes el color salía de la clase bi-* de
      cada fila y un grupo como Reportes terminaba con siete colores sueltos,
      sin relación con su cabecera.

      Se resuelve por herencia y no con :has() a propósito: :has() recién existe
      desde Safari 15.4 y el iPad de caja no tiene por qué estar al día.

   POR QUÉ RGB Y NO HEX
      El tono se guarda como canales sueltos (--tone-rgb: 22, 163, 74) para
      poder derivar el relleno translúcido con rgba() sin repetir el color ni
      depender de color-mix(), que tampoco está en Safari viejo.

   CRITERIO DE COLOR: que no haya dos parecidos. Los matices se reparten por
   TODO el círculo cromático siguiendo el orden real del menú y saltando al lado
   opuesto de la rueda en cada paso (verde → azul → naranja → violeta → teal →
   rosa → ámbar → cian → rojo...), así dos opciones vecinas nunca caen en tonos
   cercanos. Todos comparten el mismo escalón de luminosidad y saturación: entre
   ellos cambia el MATIZ, no la intensidad, así que ninguno grita más que otro y
   el conjunto se lee como un sistema.

   Agregar una opción al menú no obliga a tocar esto: si su icono está en la
   lista hereda el color y si no, el mosaico queda gris, nunca invisible.
   ══════════════════════════════════════════════════════════════════ */

/* Reserva gris. Va en el contenedor y NO en los mosaicos: si se declarara sobre
   .sb-ico/.sb-subico ganaría por especificidad al tono heredado del grupo y
   ningún submenú tomaría color. */
.sb-nav { --tone-rgb: 120, 130, 145; }

.sb-ico,
.sb-subico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: rgb(var(--tone-rgb));
    background: rgba(var(--tone-rgb), 0.14);
    transition: background .16s ease, color .16s ease;
}

.sb-ico { width: 30px; height: 30px; font-size: 1rem; }
.sb-subico { width: 25px; height: 25px; font-size: 0.84rem; border-radius: 7px; }

/* Activo: el mosaico se llena y el icono va en blanco. Es el contraste más
   fuerte de todo el menú, así que la opción en la que estás parado se ubica de
   inmediato sin perder el color de su grupo. */
.sb-item.active .sb-ico,
.sb-subitem.active .sb-subico,
.sb-group.active > .sb-group-toggle .sb-ico {
    background: rgb(var(--tone-rgb));
    color: #fff;
}

/* ── Opciones principales, en el orden en que suele verse el menú ── */
[data-ico="bi-house-door"]       { --tone-rgb: 100, 116, 139; } /* inicio        · pizarra */
[data-ico="bi-cart3"]            { --tone-rgb:  22, 163,  74; } /* venta         · verde   */
[data-ico="bi-receipt"]          { --tone-rgb:  37,  99, 235; } /* facturación   · azul    */
[data-ico="bi-arrow-left-right"] { --tone-rgb: 249, 115,  22; } /* transacciones · naranja */
[data-ico="bi-bag-check"]        { --tone-rgb: 124,  58, 237; } /* compras       · violeta */
[data-ico="bi-boxes"]            { --tone-rgb:  13, 148, 136; } /* inventario    · teal    */
[data-ico="bi-box-seam"]         { --tone-rgb: 219,  39, 119; } /* consignación  · rosa    */
[data-ico="bi-cash-stack"]       { --tone-rgb: 217, 119,   6; } /* caja          · ámbar   */
[data-ico="bi-graph-up-arrow"]   { --tone-rgb:   8, 145, 178; } /* reportes      · cian    */
[data-ico="bi-speedometer2"]     { --tone-rgb: 220,  38,  38; } /* dashboards    · rojo    */
[data-ico="bi-truck"]            { --tone-rgb: 101, 163,  13; } /* proveedores   · lima    */
[data-ico="bi-tags"]             { --tone-rgb: 192,  38, 211; } /* productos     · fucsia  */
[data-ico="bi-people"]           { --tone-rgb:  79,  70, 229; } /* usuarios      · índigo  */
[data-ico="bi-gear"]             { --tone-rgb:  87,  83,  78; } /* configuración · piedra  */

/* ── Iconos que hoy suelen encabezar áreas menores. Si alguno pasa a ser una
      opción principal en el menú de algún rol, ya tiene su color. ── */
[data-ico="bi-sliders"]          { --tone-rgb:   2, 132, 199; } /* mantenimiento · celeste   */
[data-ico="bi-sliders2"]         { --tone-rgb:   5, 150, 105; } /* ajustes       · esmeralda */
[data-ico="bi-wallet2"]          { --tone-rgb:   2, 132, 199; } /* cuentas       · celeste   */
[data-ico="bi-cash-coin"]        { --tone-rgb: 217, 119,   6; } /* adelantos     · ámbar     */
[data-ico="bi-safe2"]            { --tone-rgb: 101, 163,  13; } /* bóveda        · lima      */
[data-ico="bi-calculator"]       { --tone-rgb:  79,  70, 229; } /* consolidado   · índigo    */
[data-ico="bi-clipboard-data"]   { --tone-rgb:   8, 145, 178; } /* recuentos     · cian      */
[data-ico="bi-clipboard-check"]  { --tone-rgb:  79,  70, 229; } /* resúmenes     · índigo    */
[data-ico="bi-clipboard2-check"] { --tone-rgb:  13, 148, 136; } /* arqueos       · teal      */
[data-ico="bi-arrow-repeat"]     { --tone-rgb: 124,  58, 237; } /* ciclos        · violeta   */
[data-ico="bi-box-arrow-in-down"]{ --tone-rgb:  22, 163,  74; } /* entradas      · verde     */
[data-ico="bi-box-arrow-up"]     { --tone-rgb: 220,  38,  38; } /* retiros       · rojo      */
[data-ico="bi-person-vcard"]     { --tone-rgb: 225,  29,  72; } /* clientes      · carmín    */
[data-ico="bi-person-badge"]     { --tone-rgb: 249, 115,  22; } /* empleados     · naranja   */
[data-ico="bi-shield-lock"]      { --tone-rgb: 147,  51, 234; } /* roles         · púrpura   */