/* ============================================================================ Balancoop · Sidebar lateral moderno (colapsable) - Colapsado por defecto (solo iconos); se expande al hover / focus-within. - Tema oscuro con acento verde Balancoop. Accesible (WCAG 2.2 AA): focos visibles, contraste, targets >=44px, prefers-reduced-motion, ARIA. - Se carga después de balancoop.css. Solo aplica cuando . ========================================================================== */ :root { --sb-collapsed: 76px; --sb-expanded: 268px; --sb-topbar-h: 60px; --sb-bg: #0e1726; --sb-bg-2: #0a111d; --sb-border: rgba(148, 163, 184, 0.12); --sb-text: #cbd5e1; /* idle (>=9:1 sobre --sb-bg) */ --sb-text-dim: #94a3b8; --sb-text-on: #ffffff; /* hover/activo */ --sb-accent: #5ec234; /* verde exacto del logo Balancoop */ --sb-accent-soft: rgba(94, 194, 52, 0.12); --sb-hover: rgba(148, 163, 184, 0.10); --sb-z: 1030; } /* ---- Layout general -------------------------------------------------------- */ body.has-sidebar { padding-top: 0 !important; /* anula el padding del antiguo navbar fijo */ margin-top: 0 !important; /* anula el margin superior heredado (dejaba un hueco sobre el topbar) */ margin-left: var(--sb-collapsed); /* background: #f1f5f9; */ } /* Aire entre el topbar y el contenido de la vista */ body.has-sidebar #main-content { padding-top: 1.75rem; } /* Salto al contenido (a11y 2.4.1) */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: calc(var(--sb-z) + 20); padding: 0.6rem 1rem; background: #0e1726; color: #fff; border-radius: 8px; transform: translateY(-200%); transition: transform 0.18s ease; } .skip-link:focus { transform: translateY(0); color: #fff; } /* ---- Barra superior -------------------------------------------------------- */ .app-topbar { position: sticky; top: 0; z-index: calc(var(--sb-z) - 1); height: var(--sb-topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.5rem; background: #ffffff; border-bottom: 1px solid #e2e8f0; } /* Breadcrumb de la página (izquierda) */ .app-topbar__crumbs { display: inline-flex; align-items: baseline; gap: 0.6rem; min-width: 0; } .app-topbar__section { font-family: "Nunito", "Nunito Sans", sans-serif; font-weight: 800; font-size: 1.9rem; color: #0e1726; white-space: nowrap; } .app-topbar__sep { color: #cbd5e1; font-size: 1.5rem; } .app-topbar__page { font-family: "Nunito Sans", sans-serif; font-size: 1.5rem; font-weight: 600; color: #64748b; /* más oscuro: cumple contraste AA (>=4.5:1 sobre blanco) */ white-space: nowrap; } /* Usuario (derecha) */ .app-topbar__user { display: inline-flex; align-items: center; } .app-topbar__avatar { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #e0edff; color: #2563eb; font-family: "Nunito", "Nunito Sans", sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: 0.02em; cursor: pointer; user-select: none; transition: box-shadow 0.15s ease, background-color 0.15s ease; } .app-topbar__avatar:hover, .app-topbar__avatar[aria-expanded="true"] { background: #c7ddff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); } .app-topbar__avatar:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* Menú desplegable del usuario */ .app-usermenu { min-width: 240px; padding: 0.5rem 0; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(2, 6, 23, 0.16); margin-top: 0.5rem; font-family: "Nunito Sans", sans-serif; } .app-usermenu__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.1rem 0.9rem; } .app-usermenu__avatar { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #e0edff; color: #2563eb; font-weight: 800; font-size: 1.3rem; } .app-usermenu__name { font-weight: 700; font-size: 1.45rem; color: #0e1726; line-height: 1.2; } .app-usermenu .dropdown-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1.1rem; font-size: 1.4rem; color: #334155; } .app-usermenu .dropdown-item i { width: 18px; text-align: center; color: #94a3b8; } .app-usermenu .dropdown-item:hover, .app-usermenu .dropdown-item:focus { background: #f1f5f9; color: #0e1726; } .app-usermenu__logout, .app-usermenu__logout i { color: #dc2626 !important; } .app-usermenu__logout:hover, .app-usermenu__logout:focus { background: #fef2f2 !important; } /* ---- Sidebar --------------------------------------------------------------- */ .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-collapsed); z-index: var(--sb-z); display: flex; flex-direction: column; background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-2) 100%); border-right: 1px solid var(--sb-border); overflow: hidden; transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease; } .app-sidebar:hover, .app-sidebar:focus-within { width: var(--sb-expanded); box-shadow: 8px 0 40px rgba(2, 6, 23, 0.35); } /* Marca */ .app-sidebar__brand { display: flex; align-items: center; gap: 0.85rem; height: var(--sb-topbar-h); min-height: var(--sb-topbar-h); padding: 0 calc((var(--sb-collapsed) - 38px) / 2); border-bottom: 1px solid var(--sb-border); text-decoration: none; color: var(--sb-text-on); } .app-sidebar__logo { flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; display: block; } .app-sidebar__brand-text { font-family: "Nunito", "Nunito Sans", sans-serif; font-weight: 800; font-size: 1.9rem; white-space: nowrap; opacity: 0; transition: opacity 0.18s ease; } /* Navegación */ .app-sidebar__nav { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; padding: 0.75rem 0; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent; } .app-sidebar__nav::-webkit-scrollbar { width: 8px; } .app-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 8px; } .sidebar-menu, .sidebar-submenu { list-style: none; margin: 0; padding: 0; } .sidebar-item { position: relative; } /* Enlace base (item de nivel 1 y resumen de grupo) */ .sidebar-link { position: relative; display: flex; align-items: center; gap: 0.9rem; min-height: 48px; margin: 2px 10px; padding: 0 calc((var(--sb-collapsed) - 20px - 24px) / 2); border-radius: 12px; color: var(--sb-text); font-family: "Nunito Sans", sans-serif; font-size: 1.45rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar-link:hover, .sidebar-link:focus-visible { background: var(--sb-hover); color: var(--sb-text-on); } .sidebar-link__icon { flex: 0 0 24px; width: 24px; text-align: center; font-size: 1.7rem; line-height: 1; } .sidebar-link__label { flex: 1 1 auto; opacity: 0; transition: opacity 0.16s ease; } .sidebar-link__chevron { flex: 0 0 auto; font-size: 1.1rem; opacity: 0; transition: opacity 0.16s ease, transform 0.2s ease; } /* Estado activo (página actual) */ .sidebar-link.is-active { background: var(--sb-accent-soft); color: var(--sb-text-on); } .sidebar-link.is-active .sidebar-link__icon { color: var(--sb-text-on); } /* Submenú (acordeón) */ .sidebar-submenu { margin: 2px 10px 6px; padding-left: 22px; border-left: 1px solid var(--sb-border); } .sidebar-sublink { display: block; padding: 9px 14px; border-radius: 10px; color: var(--sb-text-dim); font-family: "Nunito Sans", sans-serif; font-size: 1.35rem; font-weight: 600; text-decoration: none; white-space: normal; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar-sublink:hover, .sidebar-sublink:focus-visible { background: var(--sb-hover); color: var(--sb-text-on); } .sidebar-sublink.is-active { color: var(--sb-accent); } .sidebar-divider { height: 1px; margin: 8px 18px; background: var(--sb-border); } /* Footer (cerrar sesión) */ .app-sidebar__footer { flex: 0 0 auto; padding: 0.6rem 0 0.9rem; border-top: 1px solid var(--sb-border); } .sidebar-link--logout { color: #fda4af; } .sidebar-link--logout:hover, .sidebar-link--logout:focus-visible { background: rgba(244, 63, 94, 0.14); color: #fecdd3; } /*

sin marcador por defecto */ .sidebar-group { width: 100%; } .sidebar-group > summary { list-style: none; } .sidebar-group > summary::-webkit-details-marker { display: none; } .sidebar-group > summary::marker { content: ""; } .sidebar-group[open] > summary .sidebar-link__chevron { transform: rotate(180deg); } /* ---- Estado COLAPSADO: ocultar textos, chevrons y submenús ---------------- */ .app-sidebar:not(:hover):not(:focus-within) .sidebar-link__label, .app-sidebar:not(:hover):not(:focus-within) .sidebar-link__chevron, .app-sidebar:not(:hover):not(:focus-within) .app-sidebar__brand-text { opacity: 0; pointer-events: none; } .app-sidebar:not(:hover):not(:focus-within) .sidebar-submenu { display: none; } /* Expandido: mostrar textos */ .app-sidebar:hover .sidebar-link__label, .app-sidebar:focus-within .sidebar-link__label, .app-sidebar:hover .sidebar-link__chevron, .app-sidebar:focus-within .sidebar-link__chevron, .app-sidebar:hover .app-sidebar__brand-text, .app-sidebar:focus-within .app-sidebar__brand-text { opacity: 1; } /* ---- Foco visible (a11y 2.4.7) -------------------------------------------- */ .app-sidebar a:focus-visible, .app-sidebar summary:focus-visible, .skip-link:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; } /* El dashboard de Listas tiene su propia barra lateral fija a left:0 (categorías). Se desplaza por el ancho del app-sidebar colapsado para que no quede oculta debajo de él (su contenido ya está margin-left:320, dentro del body que ya lleva margin-left del app-sidebar, así que sigue alineado). */ body.has-sidebar .dashboard-sidebar { left: var(--sb-collapsed); } /* ---- Responsive: en móvil el sidebar se oculta (queda el topbar) ----------- */ @media (max-width: 767.98px) { body.has-sidebar { margin-left: 0; } body.has-sidebar .dashboard-sidebar { left: 0; } .app-sidebar { transform: translateX(-100%); transition: transform 0.22s ease, width 0.22s ease; } .app-sidebar.is-open { transform: translateX(0); width: var(--sb-expanded); } } /* ---- Movimiento reducido (a11y 2.3.3) ------------------------------------- */ @media (prefers-reduced-motion: reduce) { .app-sidebar, .sidebar-link, .sidebar-link__label, .sidebar-link__chevron, .app-sidebar__brand-text, .skip-link { transition: none !important; } }