/* ============================================================ menu.css — MENÚ de navegación: top-bar, sidebar y drawer móvil ------------------------------------------------------------ - Top menu (solo OSCURO; en claro se deja el menú clásico oscuro para no romper los iconos sprite blancos). - Layout lateral (sidebar) en escritorio (>=901px). - Hamburguesa + drawer en móvil (<=900px). El sidebar/drawer usa fondo OSCURO fijo (var(--nav-bg)/var(--nav-bg-2)) en AMBOS temas para que los iconos claros siempre se vean. Los iconos SVG del menú viven en icons.css; el conmutador de temas, en components.css. Clásico intacto (todo gateado). ============================================================ */ /* ----- Top menu (solo OSCURO) ----- */ html.theme-cg.theme-dark #head { background: var(--surface-2); border-color: var(--border); border-bottom-color: var(--accent); } html.theme-cg.theme-dark #head a { color: var(--accent-2); } html.theme-cg.theme-dark #menu { background: var(--surface-2); } html.theme-cg.theme-dark #menu li a:link, html.theme-cg.theme-dark #menu li a:visited { color: var(--text); } html.theme-cg.theme-dark #menu li a:hover, html.theme-cg.theme-dark #menu li a.menu_item_on { background: var(--accent); color: #fff; } html.theme-cg.theme-dark #menu li ul { background: var(--surface); border: 1px solid var(--border); } html.theme-cg.theme-dark #menu li ul li a, html.theme-cg.theme-dark #menu li ul li a:link, html.theme-cg.theme-dark #menu li ul li a:visited { background: var(--surface); color: var(--text); } html.theme-cg.theme-dark #menu li ul > li:hover > a, html.theme-cg.theme-dark #menu li ul > li > a:hover, html.theme-cg.theme-dark #menu li ul > li > a:active { background: var(--surface-3); color: var(--text); } /* ----- Sección ACTIVA (menu_item_on) — marcada con acento en TODOS los temas nuevos (barra superior clara y oscura, y sidebar). El :link/:visited es para ganar al estilo clásico en el tema claro. Hace que el ítem de la sección en la que estás (p. ej. Préstamos) se vea claramente distinto del resto. ----- */ html.theme-cg #menu > li > a.menu_item_on, html.theme-cg #menu > li > a.menu_item_on:link, html.theme-cg #menu > li > a.menu_item_on:visited { background: var(--accent); color: #fff; } /* barra de acento: abajo en barra superior, a la izquierda en sidebar */ html.theme-cg:not(.layout-side) #menu > li > a.menu_item_on { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .55); } html.theme-cg.layout-side #menu > li > a.menu_item_on { box-shadow: inset 3px 0 0 rgba(255, 255, 255, .6); } /* ----- MENÚ SUPERIOR (desktop): submenús multinivel robustos ----- Con :hover puro, al pasar el cursor del padre al submenú (o entre niveles) un mínimo hueco cierra el menú y no se llega a los hijos (p. ej. Sistema → Acceso → Usuarios). Solución (hover-intent en CSS puro): los submenús se ocultan con `visibility` y un RETARDO al cerrar (~0.3s), así da tiempo a recorrer el trayecto sin que se cierren; al entrar abren al instante. Como van en visibility (no display:none) siguen ocupando su posición absoluta, sin afectar el layout. Además .crr-flip (lo pone menu.js) abre a la IZQUIERDA los submenús de 3er nivel que se saldrían por la derecha. Solo menú superior (el lateral usa acordeón; el móvil, drawer). */ @media (min-width: 901px) { /* Oculto = display:none del clásico (sin caja => NO intercepta el cursor ni tapa los enlaces; los desplegables son más anchos que los ítems y, si quedaran en el flujo, se solaparían). Se MUESTRA con :hover O con .crr-hover (hover-intent de menu.js: cierre diferido para no perder el submenú al recorrer los niveles). */ html.theme-cg:not(.layout-side) #menu li.crr-hover > ul { display: block; } html.theme-cg:not(.layout-side) #menu ul ul.crr-flip { left: auto; right: 100%; } } /* ----- Elementos base de hamburguesa/overlay/toggle (los inyecta menu.js) ----- */ .crr-hamburger { display: none; } .crr-nav-overlay { display: none; } .crr-side-toggle { display: none; } /* Ítem "Buscar" (abre el command palette): solo en temas nuevos. */ #menu li.crr-cmd-li { display: none; } html.theme-cg #menu li.crr-cmd-li { display: block; } /* Tooltip de etiqueta para el sidebar recogido (posición fija, fuera del overflow del #head). Lo inyecta y posiciona menu.js. */ .crr-side-tip { position: fixed; transform: translateY(-50%); z-index: 1400; background: var(--surface-3); color: var(--text); border: 1px solid var(--border); padding: 6px 10px; border-radius: 8px; font-size: 13px; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; opacity: 0; transition: opacity .12s ease; } .crr-side-tip.show { opacity: 1; } /* Color base del drawer (vertical + acordeón) */ html.theme-cg.layout-side #head, html.theme-cg.crr-vnav #head { background: var(--nav-bg); } /* ===================== SIDEBAR (escritorio >=901px) ===================== */ @media (min-width: 901px) { html.theme-cg.layout-side #content { margin: 0 0 0 230px; width: auto; } html.theme-cg.layout-side #head { position: fixed; top: 0; left: 0; width: 218px; height: 100vh; margin: 0; overflow-y: auto; border: 0; border-right: 1px solid rgba(255, 255, 255, .08); background: var(--nav-bg); z-index: 1000; } html.theme-cg.layout-side #menu { display: block; min-height: 0; background: var(--nav-bg); } /* common.css flota TODOS los #menu li; sin quitar el float a los anidados, los