/* ============================================================================= BOY OR GIRL — CAPA VISUAL DEL SHELL (topbar, menú lateral, dropdowns, footer) ----------------------------------------------------------------------------- Se activa con la clase `bog-shell` en (index.html). Quitar esa clase revierte todo este archivo sin tocar nada más. Por qué en y no en : el tema de la usuaria se aplica con $("#theme13").trigger('click'), y el script del tema de Dashtreme suele reemplazar el atributo class completo de . En no se pisa. Qué NO cambia (a propósito): · El fondo del menú lateral: sigue usando var(--sidebar-gradient) del tema. · Los degradados de topbar y footer de cada tema (11 niño, 13 niña, 15 neutro). · El marcado, los IDs y los ganchos de JS (toggle-menu, simplebar, dropdowns de Bootstrap, notificaciones, idioma, FCM). Color de íconos y enlaces sobre topbar y footer: negro puro, como el original. Sobre los degradados azul y rosa da 5.7:1 o más; el azul tinta de la home bajaba a 4.2:1. Qué SÍ cambia: · Tipografía Figtree / Baloo 2 (tokens en bog-tokens.css). · Íconos de la topbar sin sombra difusa y con hover legible en los 3 temas. · Zonas táctiles de 44 px y foco visible (app-style.css lo elimina). · Ítem activo del menú con acento del color del tema. · Hover de dropdowns legible (antes: blanco sobre amarillo claro en el tema 15). ============================================================================= */ /* --------------------------------------------------------------------------- Tipografía --------------------------------------------------------------------------- */ html.bog-shell .topbar-nav .navbar, html.bog-shell #sidebar-wrapper, html.bog-shell .dropdown-menu, html.bog-shell .footer { font-family: var(--bog-font-body); letter-spacing: normal; } /* --------------------------------------------------------------------------- Topbar --------------------------------------------------------------------------- */ html.bog-shell .topbar-nav .navbar { height: var(--bog-topbar-h); border-bottom: 0; box-shadow: 0 1px 0 rgba(27, 35, 64, 0.08), 0 10px 24px -18px rgba(27, 35, 64, 0.45); } html.bog-shell .toggle-menu i { color: #000; text-shadow: none; font-size: 18px; } html.bog-shell .toggle-menu { display: inline-flex; align-items: center; min-height: 44px; } /* Íconos de la derecha (el sello de privacidad conserva su propio estilo) */ html.bog-shell .right-nav-link a.nav-link:not(.privacy-seal) { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 44px; min-height: 44px; border-radius: 999px; font-size: 19px; color: #000; text-shadow: none; transition: background-color 0.2s, color 0.2s; } html.bog-shell .right-nav-link a.nav-link:not(.privacy-seal):hover, html.bog-shell .right-nav-link a.nav-link:not(.privacy-seal):focus { color: #000; background-color: rgba(255, 255, 255, 0.4); transform: none; } /* Sello de privacidad: app-style.css (.right-nav-link a.nav-link, color #000) le ganaba en especificidad al verde definido en index.html */ html.bog-shell .right-nav-link a.privacy-seal.nav-link { color: #1c6b46; text-shadow: none; font-size: 13px; } html.bog-shell .right-nav-link a.privacy-seal.nav-link:hover, html.bog-shell .right-nav-link a.privacy-seal.nav-link:focus { color: #145235; transform: none; } /* Enlace "Iniciar sesión" de visitantes (no lleva la clase nav-link) */ html.bog-shell .right-nav-link > .nav-item > a:not(.nav-link) { display: inline-flex; align-items: center; min-height: 40px; padding: 0.35rem 1rem; border: 2px solid var(--bog-ink); border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: var(--bog-ink); font-weight: 700; font-size: 0.95rem; line-height: 1.2; white-space: nowrap; transition: background-color 0.2s, color 0.2s; } html.bog-shell .right-nav-link > .nav-item > a:not(.nav-link):hover, html.bog-shell .right-nav-link > .nav-item > a:not(.nav-link):focus { background: var(--bog-ink); color: #fff; } /* Topbar auto-ocultable (lógica en assets/js/bog-shell.js). Sin JS la topbar se queda fija como siempre. */ html.bog-shell .topbar-nav .navbar { transition: transform 0.28s ease; will-change: transform; } html.bog-shell.bog-topbar-hidden .topbar-nav .navbar { transform: translateY(-100%); } /* Franja sensible al cursor en el borde superior. El JS solo la crea en equipos con puntero; queda por debajo de la topbar (z-index 999). */ html.bog-shell .bog-topbar-hotspot { position: fixed; top: 0; left: 0; right: 0; z-index: 998; background: transparent; } @media (prefers-reduced-motion: reduce) { html.bog-shell .topbar-nav .navbar { transition: none; } } /* --------------------------------------------------------------------------- Dropdowns (notificaciones, idioma, cuenta, sello de privacidad) --------------------------------------------------------------------------- */ html.bog-shell .dropdown-menu { border: 1px solid var(--bog-line); border-radius: var(--bog-radius-sm); color: var(--bog-ink); } html.bog-shell .dropdown-item { color: var(--bog-ink); } html.bog-shell .dropdown-item:hover, html.bog-shell .dropdown-item:focus, html.bog-shell .dropdown-item.active, html.bog-shell .dropdown-item:active { background: var(--bog-tint); color: var(--bog-ink); box-shadow: inset 3px 0 0 var(--primary-color, var(--bog-pink)); transform: none; } html.bog-shell .dropdown-item.active, html.bog-shell .dropdown-item:active { font-weight: 700; } html.bog-shell .dropdown-item:hover a, html.bog-shell .dropdown-item:focus a { color: inherit; } /* El bloque de usuaria usaba texto blanco (--text-on-theme) sobre el dropdown blanco */ html.bog-shell .dropdown-menu .user-details .user-title { color: var(--bog-ink); } html.bog-shell .dropdown-menu .user-details .user-subtitle { color: var(--bog-muted); } /* --------------------------------------------------------------------------- Menú lateral — el fondo NO se toca (var(--sidebar-gradient) del tema) --------------------------------------------------------------------------- */ html.bog-shell .logo-text { font-family: var(--bog-font-display); font-weight: 700; font-size: 1.2rem; text-transform: none; letter-spacing: 0; text-shadow: none; } html.bog-shell .sidebar-menu li a { border-radius: var(--bog-radius-sm); font-size: 15px; font-weight: 600; letter-spacing: normal; } html.bog-shell .sidebar-menu .sidebar-submenu > li > a { font-size: 14px; font-weight: 500; } /* Acento del tema en el ítem activo (azul, rosa o mantequilla según la usuaria) */ html.bog-shell .sidebar-menu > li.active > a { box-shadow: inset 4px 0 0 var(--primary-color, #fff), 0 4px 15px rgba(0, 0, 0, 0.25); } html.bog-shell .sidebar-menu .sidebar-submenu > li.active > a { box-shadow: inset 3px 0 0 var(--primary-color, #fff); } /* --------------------------------------------------------------------------- Menú lateral colapsado = RAIL de íconos que se expande (opción B) ----------------------------------------------------------------------------- Antes, la clase `toggled` mandaba el menú a left:-250px (app-style.css) y desaparecía entero, mientras el CSS en línea de index.html intentaba dejarlo en 70 px: ese rail estaba escrito pero nunca se veía. Ahora `toggled` deja una columna de 70 px con los íconos. Al pasar el cursor (o al entrar el foco del teclado) se despliega a 250 px POR ENCIMA del contenido: el contenido no se recompone, porque su margen sigue en 70 px. Solo escritorio. Por debajo de 1025 px el menú sigue siendo deslizante con fondo oscuro, exactamente como hoy. --------------------------------------------------------------------------- */ @media (min-width: 1025px) { html.bog-shell #wrapper.toggled #sidebar-wrapper { left: 0; width: var(--bog-rail-w, 70px); } html.bog-shell #wrapper.toggled .content-wrapper { margin-left: var(--bog-rail-w, 70px); } html.bog-shell #wrapper.toggled .footer { left: var(--bog-rail-w, 70px); } /* La hamburguesa vive en la topbar y se posiciona con el ancho del menú */ html.bog-shell #wrapper.toggled .toggle-menu i, html.bog-shell #wrapper.toggled .menu-icon { margin-left: var(--bog-rail-w, 70px); } /* Estado en reposo: solo íconos */ html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .logo-text, html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-menu span, html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-menu .badge, html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-menu small, html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-menu .fa-angle-left, html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-submenu { display: none !important; } html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-menu li a { display: flex; align-items: center; justify-content: center; padding-left: 0; padding-right: 0; } html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-menu li a i, html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .sidebar-menu li a .fa { width: auto; margin: 0; font-size: 17px; } html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .brand-logo { display: flex; align-items: center; justify-content: center; } html.bog-shell #wrapper.toggled #sidebar-wrapper:not(:hover):not(:focus-within) .logo-icon { width: 34px; margin: 0; } /* Expansión sobre el contenido */ html.bog-shell #wrapper.toggled #sidebar-wrapper:hover, html.bog-shell #wrapper.toggled #sidebar-wrapper:focus-within { width: var(--bog-sidebar-w, 250px); box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35); } /* El desplegado se anima con el width del propio tema (0.3s); con movimiento reducido, sin animación. */ @media (prefers-reduced-motion: reduce) { html.bog-shell #sidebar-wrapper { transition: none !important; } } } /* --------------------------------------------------------------------------- Footer --------------------------------------------------------------------------- */ html.bog-shell .footer { font-size: 13px; } html.bog-shell .footer a, html.bog-shell .footer a:hover, html.bog-shell .footer a:focus { color: #000; } html.bog-shell .footer .legal-links a, html.bog-shell .footer a[href^="mailto:"] { text-decoration: underline; text-underline-offset: 2px; } /* --------------------------------------------------------------------------- Foco visible (app-style.css aplica outline:0 !important a :focus y a ) --------------------------------------------------------------------------- */ html.bog-shell .topbar-nav a:focus-visible, html.bog-shell .topbar-nav button:focus-visible, html.bog-shell .dropdown-menu a:focus-visible, html.bog-shell .dropdown-menu button:focus-visible, html.bog-shell .dropdown-item:focus-visible, html.bog-shell .footer a:focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; } html.bog-shell #sidebar-wrapper a:focus-visible { outline: 3px solid #fff !important; outline-offset: -3px; } @media (prefers-reduced-motion: reduce) { html.bog-shell .sidebar-menu li a, html.bog-shell .dropdown-item, html.bog-shell .right-nav-link a.nav-link { transition: none !important; transform: none !important; } }