/* Barra lateral plegable (owner 08/10: «que la barra izquierda se pueda minimizar, para que dejen de aparecer nombres y
   aparezcan simplemente los logos»). Sólo escritorio: por debajo de 821 px la barra ya es otra cosa (la barra de abajo
   del celular) y esto no la toca. Plegada = la clase `qc-barra-plegada` en <html>, que theme-init.js pone antes de pintar.
   Lo que se oculta se oculta a la vista, no al lector de pantalla: cada ítem conserva su texto como nombre. */

.qc-barra-b { display: none; }
#qc-barra-tip { position: fixed; z-index: 10050; pointer-events: none; max-width: 260px; padding: 6px 10px; border-radius: 8px;
    background: oklch(27% 0.02 330); color: oklch(95% 0.006 330); border: 1px solid oklch(40% 0.02 330);
    font: 600 12.5px/1.3 "Manrope", system-ui, sans-serif; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); white-space: nowrap; }
#qc-barra-tip[hidden] { display: none; }
/* ---- El pie: el avatar y el menú de usuario (08/10). Desplegada abre hacia arriba; plegada, hacia la derecha. ---- */
.qc-yo { position: relative; padding: 0; }
.qc-yo-b { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.qc-yo-b:focus-visible, .qc-yo-it:focus-visible { outline: 2px solid var(--focus, #6aa3ff); outline-offset: -2px; }
.qc-yo-b .user-card-text { flex: 1; min-width: 0; }
.qc-yo-chev { flex: none; opacity: .6; transition: transform .15s ease; }
.qc-yo-b[aria-expanded="true"] .qc-yo-chev { transform: rotate(180deg); }
.qc-yo-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column; gap: 1px; padding: 5px; max-height: calc(100vh - 110px); overflow: auto;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); color: var(--text); }
.qc-yo-menu[hidden], .qc-yo-it[hidden], .qc-yo-it small[hidden] { display: none; }
.qc-yo-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 7px; background: none; color: inherit; font: 500 13px/1.25 inherit; font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.qc-yo-it:hover, .qc-yo-it:focus-visible { background: var(--bg-card-hover); }
.qc-yo-it svg { flex: none; color: var(--text-muted); }
.qc-yo-it > span { flex: 1; min-width: 0; }
.qc-yo-it small { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-muted); }
.qc-yo-h { padding: 8px 9px 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border-light); margin-top: 4px; }
.qc-yo-sep { height: 1px; margin: 4px 2px; background: var(--border-light); }
.qc-yo-salir:hover, .qc-yo-salir:focus-visible { color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 10%, transparent); }
.qc-yo-salir:hover svg, .qc-yo-salir:focus-visible svg { color: var(--accent-red); }
/* El ícono del tema muestra adónde se va: sol en oscuro, luna en claro. */
[data-theme="light"] .qc-yo-it .theme-icon-sun, [data-theme="dark"] .qc-yo-it .theme-icon-moon { display: none; }

@media (min-width: 821px) {
    .qc-barra-b { display: grid; place-items: center; flex: none; margin-left: auto; width: 30px; height: 30px; padding: 0;
        border: 1px solid transparent; border-radius: 8px; background: none; color: var(--plum-text, inherit); opacity: .72; cursor: pointer; }
    .qc-barra-b:hover { opacity: 1; background: var(--plum-pill, rgba(255, 255, 255, .12)); }
    .qc-barra-b:focus-visible { opacity: 1; outline: 2px solid var(--focus, #6aa3ff); outline-offset: 2px; }
    html.qc-barra-plegada .qc-barra-b { margin-left: 0; }
    html.qc-barra-plegada .qc-barra-b svg { transform: scaleX(-1); }
    html.qc-barra-lista aside.sidebar { transition: width .18s ease, min-width .18s ease; }
    /* El menú con teclado: el foco se ve, y un grupo cerrado no se recorre (sus ítems están, pero no a la vista). */
    .sidebar-nav a.nav-item:focus-visible { outline: 2px solid var(--focus, #6aa3ff); outline-offset: -2px; }
    .sidebar-nav .nav-group-items.collapsed > .nav-group-inner { visibility: hidden; transition: visibility 0s linear .35s; }
    html.qc-barra-plegada .sidebar-nav .nav-group-items.collapsed > .nav-group-inner { visibility: visible; transition: none; }

    html.qc-barra-plegada aside.sidebar { width: 60px; min-width: 60px; overflow: visible; }
    html.qc-barra-plegada .sidebar-brand { flex-direction: column; align-items: center; gap: 8px; height: auto; padding: 14px 0 6px; }
    html.qc-barra-plegada .sidebar-brand .brand-text { display: none; }

    html.qc-barra-plegada .nav-modsel { margin: 2px 9px 6px; }
    html.qc-barra-plegada .nav-modsel-btn { justify-content: center; padding: 9px 0; gap: 0; }
    html.qc-barra-plegada .nav-modsel-btn .nav-modsel-tx, html.qc-barra-plegada .nav-modsel-btn .nav-modsel-chev { display: none; }
    html.qc-barra-plegada .nav-modsel-menu { right: auto; width: 210px; }

    html.qc-barra-plegada .sidebar-nav { padding: 6px 9px 10px; }
    html.qc-barra-plegada .sidebar-nav a.nav-item { flex: none; justify-content: center; align-items: center; gap: 0; height: 38px; padding: 0; font-size: 0; }
    html.qc-barra-plegada .sidebar-nav a.nav-item:hover { transform: none; }
    html.qc-barra-plegada .sidebar-nav a.nav-item svg { flex: none; margin: 0; }
    /* Los contadores, como un punto sobre el ícono (el número se lee al pasar por el ítem). */
    html.qc-barra-plegada .sidebar-nav a.nav-item .nav-badge, html.qc-barra-plegada .sidebar-nav a.nav-item .cart-badge,
    html.qc-barra-plegada .sidebar-nav a.nav-item .qc-badge, html.qc-barra-plegada .sidebar-nav a.nav-item .cnt-tar-navbadge {
        position: absolute; top: 6px; right: 8px; width: 8px; min-width: 0; height: 8px; margin: 0; padding: 0; border-radius: 50%;
        font-size: 0; line-height: 0; box-shadow: 0 0 0 2px var(--plum-deep, #2a1a26); }
    /* Los rótulos de grupo quedan como una línea fina; los grupos que estaban cerrados se ven igual (no hay rótulo para abrirlos). */
    html.qc-barra-plegada .sidebar-nav .nav-group-label { height: 1px; min-height: 0; margin: 8px 6px; padding: 0; font-size: 0; overflow: hidden;
        background: var(--line-2, rgba(255, 255, 255, .22)); pointer-events: none; animation: none; }
    html.qc-barra-plegada .sidebar-nav .nav-group-label .nav-group-chevron { display: none; }
    html.qc-barra-plegada .sidebar-nav .nav-subgroup-label { height: 1px; margin: 5px 14px; padding: 0; font-size: 0; overflow: hidden;
        background: var(--line, rgba(255, 255, 255, .14)); }
    html.qc-barra-plegada .sidebar-nav .nav-group-items.collapsed { grid-template-rows: 1fr; }

    html.qc-barra-plegada .sidebar-footer { padding: 6px; }
    html.qc-barra-plegada .qc-yo-b { justify-content: center; padding: 7px 0; }
    html.qc-barra-plegada .qc-yo-b .user-card-text, html.qc-barra-plegada .qc-yo-b .qc-yo-chev { display: none; }
    html.qc-barra-plegada .qc-yo-menu { left: calc(100% + 10px); right: auto; bottom: 0; width: 250px; }
}
@media (prefers-reduced-motion: reduce) {
    html.qc-barra-lista aside.sidebar { transition: none; }
}

/* Tema claro (08/10): la barra sigue siendo ciruela y «Central» tomaba el verde oscuro del tema (2,5:1). */
[data-theme="light"] .sidebar .brand-central { color: #5fd6ad; }