/* Panel de navegacion lateral. Medidas calcadas de Credify, tokens de BillRoute. */
:root { --sidebar-w: 240px; }

.br-shell { display: flex; min-height: 100dvh; }

.br-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--sidebar-w); height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--sidebar); border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform var(--dur-slow, 300ms) var(--ease-in-out, cubic-bezier(.4,0,.2,1));
}
.br-sidebar.is-open { transform: translateX(0); }

.br-sidebar__head {
    height: 64px; display: flex; align-items: center; gap: 10px;
    padding: 0 20px; border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.br-sidebar__brand { font-size: 1rem; font-weight: 600; letter-spacing: -0.025em; color: var(--foreground); }
.br-sidebar__close { margin-left: auto; display: none; background: none; border: 0; cursor: pointer;
    color: var(--muted-foreground); width: 32px; height: 32px; border-radius: var(--radius-md); }

.br-sidebar__nav { flex: 1; overflow-y: auto; padding: 16px 12px; }
.br-nav-group { margin-bottom: 8px; }
.br-nav-group__title {
    padding: 0 12px 8px; font-size: 0.7rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground);
}
.br-nav-item {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    border-radius: var(--radius); font-size: 0.875rem; color: var(--muted-foreground);
    text-decoration: none; transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}
.br-nav-item:hover { background: var(--accent); color: var(--foreground); }
.br-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.br-nav-item:hover svg { color: var(--foreground); }
.br-nav-item.is-active {
    background: color-mix(in oklab, var(--primary) 5%, transparent);
    color: var(--primary); font-weight: 500;
}
.br-nav-item.is-active svg { color: var(--brand); }
.br-nav-item.is-active .br-pill {
    margin-left: auto; width: 4px; height: 16px; border-radius: 9999px; background: var(--brand);
}

/* ── Acordeon de secciones (BR-0198) ──────────────────────────────────────
   Configuracion despliega adentro del menu las 10 secciones que antes eran
   pestañas. La cabecera lleva DOS controles distintos a proposito: el nombre
   es un enlace que entra a la pantalla, y el chevron solo abre y cierra. Si el
   padre hiciera las dos cosas, entrar a Configuracion "a secas" dejaria de ser
   posible (TK-19: ningun control mudo, y ninguno con dos significados). */
.br-nav-acordeon__cabeza { display: flex; align-items: center; gap: 2px; }
.br-nav-acordeon__cabeza .br-nav-item { flex: 1; min-width: 0; }

.br-nav-acordeon__toggle {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    border: 0; border-radius: var(--radius); background: transparent; cursor: pointer;
    color: var(--muted-foreground);
    transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}
.br-nav-acordeon__toggle:hover { background: var(--accent); color: var(--foreground); }
.br-nav-acordeon__toggle svg {
    width: 14px; height: 14px;
    /* El giro del chevron ES el estado: sin el, abierto y cerrado se ven igual
       y el unico indicio seria que aparecieron cosas debajo. */
    transition: transform var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.br-nav-acordeon.is-open .br-nav-acordeon__toggle svg { transform: rotate(180deg); }

/* El despliegue: `display` para MOSTRAR, animacion para que no aparezca de golpe.
 *
 * Se separan a proposito. Animar el ALTO fue un callejon sin salida y quedo
 * medido: con `grid-template-rows: 0fr -> 1fr`, el `overflow: hidden` del hijo
 * vuelve su minimo automatico 0, y como el menu vive dentro de un contenedor de
 * alto indefinido (`.br-sidebar__nav` es `flex: 1; overflow-y: auto`), el carril
 * `1fr` no tiene espacio libre que repartir y colapsa a 0 px. Sin ese
 * `overflow: hidden` expande (290 px, medido) pero entonces NO cierra. Los dos
 * requisitos se contradicen con `fr`.
 *
 * Asi que el alto no se anima: se muestra y se esconde con `display`, que es
 * incondicional, y lo que se anima es la ENTRADA de cada seccion. Si la
 * animacion no corriera -- navegador viejo, movimiento reducido -- el acordeon
 * sigue abriendo igual. La animacion adorna; no sostiene. */
.br-nav-acordeon__cuerpo { display: none; }
.br-nav-acordeon.is-open .br-nav-acordeon__cuerpo { display: block; }

/* Entrada escalonada a 25 ms (el Design System pide 45 ms para listas de
   contenido; aca son 10 items pequeños y seguidos, y a 45 ms el ultimo llegaba
   casi medio segundo tarde). */
.br-nav-acordeon.is-open .br-nav-sub {
    animation: br-sub-entra var(--dur-base, 200ms) var(--ease-out, ease-out) both;
}
.br-nav-acordeon.is-open .br-nav-sub:nth-child(1) { animation-delay: 0ms; }
.br-nav-acordeon.is-open .br-nav-sub:nth-child(2) { animation-delay: 25ms; }
.br-nav-acordeon.is-open .br-nav-sub:nth-child(3) { animation-delay: 50ms; }
.br-nav-acordeon.is-open .br-nav-sub:nth-child(4) { animation-delay: 75ms; }
.br-nav-acordeon.is-open .br-nav-sub:nth-child(5) { animation-delay: 100ms; }
.br-nav-acordeon.is-open .br-nav-sub:nth-child(n+6) { animation-delay: 125ms; }

@keyframes br-sub-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.br-nav-sub {
    display: block; padding: 7px 12px 7px 40px;
    font-size: 0.8125rem; color: var(--muted-foreground); text-decoration: none;
    border-radius: var(--radius);
    transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}
.br-nav-sub:hover { background: var(--accent); color: var(--foreground); }
.br-nav-sub.is-active { color: var(--primary); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
    /* Se apagan las dos: el giro del chevron y la entrada de las secciones. El
       acordeon sigue abriendo -- lo que se apaga es el adorno, no la funcion. */
    .br-nav-acordeon__toggle svg { transition: none; }
    .br-nav-acordeon.is-open .br-nav-sub { animation: none; }
}

.br-nav-badge {
    margin-left: auto; flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 9999px; background: var(--brand); color: var(--primary-foreground, #fff);
    font-size: 0.7rem; font-weight: 600; line-height: 18px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.br-nav-item.is-active .br-nav-badge { margin-left: 0; }

.br-sidebar__user {
    border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    padding: 12px; display: flex; align-items: center; gap: 10px;
}
.br-avatar {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 9999px;
    background: var(--accent); color: var(--foreground);
    display: grid; place-items: center; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
}
.br-user__meta { flex: 1; min-width: 0; }
.br-user__name { font-size: 0.8rem; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-user__role { font-size: 0.72rem; color: var(--muted-foreground); }
/* BR-0140 -- el CeCo. Más chico y más apagado que el rol: es la tercera
   línea, la de menos peso -- el nombre manda, el rol ubica, el CeCo aclara. */
.br-user__ceco {
    font-size: 0.68rem;
    color: var(--muted-foreground);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.br-logout { flex-shrink: 0; background: none; border: 0; cursor: pointer; width: 28px; height: 28px;
    border-radius: var(--radius-md); color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
    display: grid; place-items: center; }
.br-logout:hover { background: var(--accent); color: var(--foreground); }

.br-content { flex: 1; min-width: 0; }

.br-topbar { display: none; height: 56px; align-items: center; gap: 8px;
    padding: 0 16px; background: var(--card); border-bottom: 1px solid var(--border); }
/* La hamburguesa es la UNICA salida cuando el menu esta escondido (por debajo
   de 1024px): si el dedo no le acierta, el usuario se queda sin navegacion.
   44x44 es el minimo usable en tactil; se agranda el boton entero -- y no solo
   el area invisible -- porque aca no hay controles vecinos que puedan comerse
   el toque, y un blanco mas grande tambien se ve mejor en la barra. */
.br-hamburger { background: none; border: 0; cursor: pointer; width: 44px; height: 44px;
    border-radius: var(--radius); color: var(--muted-foreground); display: grid; place-items: center; }

.br-backdrop { position: fixed; inset: 0; z-index: 30;
    background: color-mix(in oklab, var(--foreground) 40%, transparent); backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity var(--dur-slow, 300ms); }
.br-backdrop.is-open { opacity: 1; pointer-events: auto; }

@media (min-width: 1024px) {
    /* BR-0111: sticky (no static) para que el sidebar quede inmovilizado y no
       se vaya con el scroll en paginas largas como el Flujograma. height 100dvh
       + align-self flex-start lo dejan como columna fija; su nav ya scrollea
       internamente (.br-sidebar__nav { overflow-y:auto }). */
    .br-sidebar { position: sticky; top: 0; height: 100dvh; align-self: flex-start; transform: none; }
    .br-topbar, .br-backdrop, .br-sidebar__close { display: none !important; }
    .br-content { margin-left: 0; }
}
@media (max-width: 1023px) {
    .br-topbar { display: flex; }
    .br-sidebar__close { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
    .br-sidebar, .br-backdrop { transition: none; }
}