/* ========================================= Menu Sidebar — CSS mejorado con Temas ========================================= */ /* TIPOGRAFÍA (puedes enlazarlo en tu layout en vez de @import) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); /* ========= VARIABLES ========= */ :root { /* Dimensiones */ --ancho-cerrado: 48px; /* ancho de la barra cerrada (antes 35px) */ --ancho-abierto: 120px; --ancho-opciones: 220px; --alto-header: 56px; /* espacio reservado para el botón hamburguesa/close */ /* Transiciones / efectos */ --t: .28s; --easing: cubic-bezier(.4,0,.2,1); --radius: 10px; --shadow-lg: 0 12px 30px rgba(0,0,0,.35); --shadow-md: 0 8px 20px rgba(0,0,0,.25); /* Acento (puedes cambiarlo con body[data-accent="rojo"|"naranja"|...]) */ --accent: #ff7043; /* naranja vibrante por defecto */ --accent-text: #ffffff; /* Tema por defecto: DARK */ --color-fondo-sidenav: #0f1116; --color-fondo-sidenav-ctrl: #2a3140; --color-fondo-opciones: rgba(24, 26, 34, .85); --glass-blur: 6px; --color-texto: #e6e9ee; --color-texto-dim: #b9c0cc; --color-hover-bg: rgba(255, 112, 67, .16); --color-hover-texto: #ffffff; --color-separador: #2b2f3a; --color-tooltip-bg: rgba(28, 31, 40, .95); --color-tooltip-text: #f4f6fa; /* Meta / info versión */ --color-meta: #9aa3b2; } /* ===== TEMAS ===== */ body[data-theme="light"] { --color-fondo-sidenav: #f9f9fb; --color-fondo-sidenav-ctrl: #e9edf4; --color-fondo-opciones: rgba(255,255,255,.9); --glass-blur: 8px; --color-texto: #2d3340; --color-texto-dim: #4a5263; --color-hover-bg: rgba(255, 112, 67, .12); --color-hover-texto: #2d3340; --color-separador: #e6e8ee; --color-tooltip-bg: rgba(30, 33, 45, .98); --color-tooltip-text: #ffffff; --color-meta: #687384; } /* ======== ACENTOS ======== */ body[data-accent="rojo"] { --accent: #e53935; } body[data-accent="naranja"] { --accent: #ff7043; } body[data-accent="verde"] { --accent: #2e7d32; } body[data-accent="azul"] { --accent: #1976d2; } body[data-accent="morado"] { --accent: #7e57c2; } /* ============================ PRUEBAS DE ANCHO CERRADO ============================ */ /* Cambia el ancho colapsado rápido desde el HTML: */ body[data-closed-size="small"] { --ancho-cerrado: 40px; } body[data-closed-size="medium"] { --ancho-cerrado: 48px; } /* default */ body[data-closed-size="large"] { --ancho-cerrado: 56px; } /* En pantallas táctiles, aumenta el ancho cerrado para mejor puntería */ @media (pointer: coarse) { body:not([data-closed-size]) { --ancho-cerrado: 56px; } } /* ================ BASE / RESET UI ================ */ .textmenu { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Open Sans', sans-serif; font-weight: 600; letter-spacing: .2px; } /* ------------ SIDENAV ------------ */ .sidenav { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Open Sans', sans-serif; position: fixed; z-index: 1000; inset: 0 auto 0 0; width: var(--ancho-cerrado); background: var(--color-fondo-sidenav); overflow: hidden; padding-top: var(--alto-header); /* reserva espacio para el botón */ transition: width var(--t) var(--easing), box-shadow var(--t) var(--easing); box-shadow: var(--shadow-md); border-right: 1px solid var(--color-separador); } .sidenav--open { width: var(--ancho-abierto); box-shadow: var(--shadow-lg); } /* Franja superior sutil (opcional, visual) */ .sidenav::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: var(--alto-header); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border-bottom: 1px solid var(--color-separador); pointer-events: none; } /* Botón de control (hamburguesa / close) */ .manageNav { position: absolute; inset: 10px 10px auto auto; /* dentro del header reservado */ font-size: 20px; color: var(--color-texto); background: var(--color-fondo-sidenav-ctrl); border-radius: 50%; padding: 10px; cursor: pointer; transition: transform var(--t) var(--easing), background-color var(--t) var(--easing), opacity var(--t) var(--easing); box-shadow: var(--shadow-md); opacity: .95; } .manageNav:hover { background-color: var(--accent); color: #fff; opacity: 1; transform: scale(1.05); } /* (Nota) No rotamos el botón al abrir, porque el icono cambia por JS (fa-bars ↔ fa-times) */ /* Enlaces dentro de la sidenav (texto) */ .sidenav a { text-decoration: none; font-size: 13px; color: var(--color-texto); display: inline-block; padding-left: 4px; transition: color var(--t) var(--easing), opacity var(--t) var(--easing); opacity: 0; pointer-events: none; white-space: nowrap; } .sidenav--open a { opacity: 1; pointer-events: auto; } /* OCULTAR TEXTO cuando la barra está cerrada para que NO ocupe espacio */ .sidenav:not(.sidenav--open) a.textmenu { display: none !important; } .sidenav--open a.textmenu { display: inline-block; } /* Íconos */ .iconmenu { padding: 6px 8px 0 6px; width: 26px; text-align: center; color: var(--color-texto); opacity: .95; } /* Ítems del menú principal */ .opcionMenu, .opcionSalir, .opcionDashboard { width: 100%; /* ocupa todo el ancho disponible del contenedor */ min-height: 36px; margin: 0 auto; padding: 8px 6px; border-bottom: 1px solid var(--color-separador); display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 8px; transition: background-color var(--t) var(--easing), color var(--t) var(--easing), transform var(--t) var(--easing); will-change: background-color, transform; } /* Un poco de aire extra al primer item */ .sidenav .opcionDashboard { margin-top: 4px; } .opcionMenu:hover, .opcionSalir:hover, .opcionPassword:hover, .opcionDashboard:hover { background-color: var(--color-hover-bg); color: var(--color-hover-texto); } /* Cuando la barra está cerrada: centrar íconos y normalizar alturas */ .sidenav:not(.sidenav--open) .opcionMenu, .sidenav:not(.sidenav--open) .opcionSalir, .sidenav:not(.sidenav--open) .opcionDashboard { justify-content: center; padding: 10px 0; min-height: 40px; } .sidenav:not(.sidenav--open) .iconmenu { font-size: 18px; width: auto; padding: 0; margin: 0; } /* Indicador de seleccionado (barrita izquierda) */ .opcionMenuChecked { position: relative; background-color: var(--color-hover-bg) !important; color: var(--accent-text) !important; } .opcionMenuChecked::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: var(--accent); border-radius: 0 6px 6px 0; } /* Acción Salir / Password */ .opcionPassword { position: absolute; left: 0; bottom: 12px; width: 100%; min-height: 36px; padding: 8px 6px; display: flex; align-items: center; gap: 8px; cursor: pointer; border-top: 1px solid var(--color-separador); } .opcionPassword .iconmenu { color: #b9b300; } /* Meta info (versión/server) */ .sidenavMeta { position: absolute; left: 0; bottom: 56px; width: 100%; font-size: 12px; color: var(--color-meta); padding: 0 10px; opacity: .85; } /* --------------- PANEL OPCIONES --------------- */ .OptionsSideBar { font-family: inherit; position: fixed; z-index: 999; inset: 0 auto 0 var(--ancho-cerrado); width: 0; background: var(--color-fondo-opciones); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); overflow-y: auto; padding-top: 20px; transition: width var(--t) var(--easing), left var(--t) var(--easing), box-shadow var(--t) var(--easing); box-shadow: none; border-right: 1px solid var(--color-separador); } .sidenav--open + .OptionsSideBar { left: var(--ancho-abierto); } .OptionsSideBar--open { width: var(--ancho-opciones); box-shadow: var(--shadow-lg); } /* Ítems del panel de opciones */ .opcionesMenu { font-size: 12.5px; color: var(--color-texto); padding: 10px 12px; border-bottom: 1px solid var(--color-separador); cursor: pointer; overflow: hidden; transition: background-color var(--t) var(--easing), color var(--t) var(--easing), padding-left var(--t) var(--easing); } .opcionesMenu:hover { background-color: var(--color-hover-bg); color: var(--color-hover-texto); padding-left: 16px; } /* ------------- CONTENEDORES ------------- */ #DINAMICO { transition: padding-left var(--t) var(--easing); padding-left: calc(var(--ancho-cerrado) + 15px); } .sidenav--open ~ #DINAMICO { padding-left: calc(var(--ancho-abierto) + 20px); } .sidenav--open ~ .OptionsSideBar.OptionsSideBar--open ~ #DINAMICO { padding-left: calc(var(--ancho-abierto) + var(--ancho-opciones) + 28px); } /* Efecto blur al abrir panel de opciones (se aplica desde JS en #ContenidoDinamico) */ .blurEffect { filter: blur(2px); } /* ----------- TOOLTIPS ----------- */ /* Tooltip custom cuando la barra está cerrada. Para un tooltip “bonito” agrega data-label al item:

*/ .sidenav:not(.sidenav--open) .opcionMenu[data-label], .sidenav:not(.sidenav--open) .opcionDashboard[data-label], .sidenav:not(.sidenav--open) .opcionSalir[data-label], .sidenav:not(.sidenav--open) .opcionPassword[data-label] { position: relative; } .sidenav:not(.sidenav--open) .opcionMenu[data-label]:hover::after, .sidenav:not(.sidenav--open) .opcionDashboard[data-label]:hover::after, .sidenav:not(.sidenav--open) .opcionSalir[data-label]:hover::after, .sidenav:not(.sidenav--open) .opcionPassword[data-label]:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--color-tooltip-bg); color: var(--color-tooltip-text); padding: 6px 10px; border-radius: 8px; white-space: nowrap; font-size: 12px; box-shadow: var(--shadow-md); } /* --------------- SCROLLBARS --------------- */ .OptionsSideBar::-webkit-scrollbar { width: 10px; } .OptionsSideBar::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.05)); border-radius: 10px; } /* ========================= REDUCE MOTION / ACCESIBILIDAD ========================= */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .blurEffect { filter: none; } } /* ========================= MODO COMPACTO RESPONSIVE ========================= */ /* Opt-in: agrega para forzar colapsado bajo 768px */ @media (max-width: 768px) { body[data-compact="auto"] .sidenav--open { width: var(--ancho-cerrado) !important; } body[data-compact="auto"] .sidenav--open + .OptionsSideBar { left: var(--ancho-cerrado) !important; } body[data-compact="auto"] .sidenav a { opacity: 0 !important; pointer-events: none !important; } body[data-compact="auto"] #DINAMICO { padding-left: calc(var(--ancho-cerrado) + 12px) !important; } :root { --alto-header: 64px; } /* más alto en móvil para hit area */ } /* ========================= HOVER SUTIL EN ÍCONOS ========================= */ .opcionMenu:hover .iconmenu, .opcionDashboard:hover .iconmenu, .opcionSalir:hover .iconmenu, .opcionPassword:hover .iconmenu { color: var(--accent); } /* ========================= ENFOQUE TECLADO (A11y) ========================= */ .opcionMenu:focus, .opcionDashboard:focus, .opcionSalir:focus, .opcionPassword:focus, .manageNav:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }