/* ============================================================ Sidebar colapsable — compartido por todas las páginas Activación: nada (auto-detecta sidebar) Estado colapsado: Persistencia: localStorage 'oc:sidebar-collapsed' Atajo teclado: Ctrl+B (o Cmd+B en Mac) ============================================================ */ :root { --sidebar-width-collapsed: 60px; } /* Transiciones suaves */ .sidebar { transition: width .25s ease; } .sidebar ~ .main-content, body > .main-content { transition: margin-left .25s ease; } /* Estado colapsado en */ body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); } body.sidebar-collapsed .sidebar ~ .main-content, body.sidebar-collapsed .app-layout .sidebar ~ .main-content { margin-left: var(--sidebar-width-collapsed); } /* Ocultar texto en links pero conservar icono */ body.sidebar-collapsed .sidebar__link { white-space: nowrap; overflow: hidden; padding-left: 14px; padding-right: 14px; } /* Ocultar headers de sección (Mi Despacho, Gestión, etc.) */ body.sidebar-collapsed .sidebar__nav > div:not(.sidebar__submenu):not(details) { display: none; } /* Ocultar submenú colapsado de details (groups) */ body.sidebar-collapsed details.sidebar__group .sidebar__submenu, body.sidebar-collapsed details.sidebar-group .sidebar__submenu { display: none; } body.sidebar-collapsed details.sidebar__group .sidebar__group-arrow { display: none; } /* Ocultar texto del summary, dejar el icono */ body.sidebar-collapsed details.sidebar__group summary > span:not(.sidebar__link-icon) { display: none; } /* Marca o&co compactada en colapsado */ body.sidebar-collapsed .sidebar__brand .oz-logo__text, body.sidebar-collapsed .sidebar__brand .oz-logo__symbol { /* mantener símbolo SVG, ocultar texto */ } body.sidebar-collapsed .oz-logo__text { display: none; } /* Footer de sidebar: ocultar texto del botón cerrar sesión */ body.sidebar-collapsed .sidebar__footer .btn { font-size: 0; padding: 8px; } body.sidebar-collapsed .sidebar__footer .btn::before { content: "↪"; font-size: 16px; } /* Botón pin (expand/collapse) */ .sidebar__pin { position: absolute; top: 14px; right: 8px; background: transparent; border: none; cursor: pointer; font-size: 14px; color: var(--text-muted, #64748b); padding: 4px 8px; border-radius: 4px; z-index: 10; transition: background .15s, color .15s; } .sidebar__pin:hover { background: rgba(0, 0, 0, 0.05); color: var(--primary, #1e3a8a); } body.sidebar-collapsed .sidebar__pin { right: 50%; transform: translateX(50%); top: 50px; } /* Grupos colapsables nuevos (

) */ .sidebar-group { margin: 6px 0; } .sidebar-group__summary { list-style: none; cursor: pointer; padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted, #64748b); user-select: none; display: flex; align-items: center; gap: 6px; transition: background .15s; } .sidebar-group__summary::-webkit-details-marker { display: none; } .sidebar-group__summary::marker { content: ""; } .sidebar-group__summary::before { content: "▸"; font-size: 9px; transition: transform .15s; display: inline-block; flex-shrink: 0; } .sidebar-group[open] > .sidebar-group__summary::before { transform: rotate(90deg); } .sidebar-group__summary:hover { background: rgba(0, 0, 0, 0.04); } /* Si el grupo es navegable (data-href), el título se ve clickeable */ .sidebar-group__summary[data-href] .sidebar-group__title { color: var(--primary, #1e3a8a); cursor: pointer; } .sidebar-group__summary[data-href]:hover .sidebar-group__title { text-decoration: underline; } /* En colapsado: ocultar summary del grupo, links siguen visibles */ body.sidebar-collapsed .sidebar-group__summary { display: none; } body.sidebar-collapsed .sidebar-group:not([open]) > a.sidebar__link { display: none; } /* ── Módulos no contratados ── */ .sidebar__link--inactivo { color: #94a3b8 !important; cursor: not-allowed; opacity: 0.6; } .sidebar__link--inactivo:hover { background: #fef3c7; opacity: 0.9; cursor: pointer; } .sidebar__link--inactivo .sidebar__link-icon { filter: grayscale(100%); } /* Mobile: el pin no se muestra (ya hay menú hamburguesa) */ @media (max-width: 768px) { .sidebar__pin { display: none; } body.sidebar-collapsed .sidebar { width: var(--sidebar-width); } body.sidebar-collapsed .sidebar ~ .main-content { margin-left: 0; } }