/* ============================================================================
Juicy — Dashboard Design System · SIDEBAR
----------------------------------------------------------------------------
Figma: "General UI" (1:3838) → Sidebar Menu Section (1:3966): la barra
colapsada y la expandida, + Menu Sidebar Item con sus estados.
AQUÍ NO SE REDISEÑÓ NADA (decisión del dueño, 2026-07-17): la barra YA era el
Figma — su fondo y su ítem activo salen del preset de marca, que es lo que la
sección pide ("MENU SIDEBAR (USES BRAND COLOR)"). Esta fase hizo dos cosas:
la separó de main.css y la TOKENIZÓ. Lo que se ve es idéntico, verificado por
foto en los 5 estados (colapsado, hover, ≥1920, táctil abierto y cerrado).
Markup (templates/template-parts/dashboard_menu.php — PHP a mano, foreach
sobre getDashboardMenu(); NO usa wp_nav_menu):
El icono del ítem NO es un elemento aparte: las clases `fi fi-rr-…` van en el
MISMO que `.menu-link`, y el glifo lo pinta su `::before`. Ver nota 3.
⚠️ LOS NOMBRES SON DE WORDPRESS Y NO SE TOCAN. `.menu-item`, `.sub-menu`,
`.menu-link` y `.current-menu-item` son las que genera `wp_nav_menu()`. Este
markup solo las IMITA. En main.css estas reglas eran GLOBALES —sin acotar a la
barra—, así que cualquier menú de WordPress del sitio recibía `height:60px` y
compañía de un CSS pensado para el dashboard. Aquí quedan ACOTADAS a
`#dashboard_sidebar`: arregla la fuga sin renombrar nada y sin tocar el JS.
Ver nota 1.
CONTRATO CON main.js — NO RENOMBRAR: `sidebar_open` y `float_active` (van en
el ), `submenu_trigger`, `menu_item_wrapper`, `.open`.
============================================================================ */
/* ---- Tokens ---------------------------------------------------------------
El 70 y el 230 estaban escritos A MANO en 11 sitios repartidos por 5 bloques
de main.css (y el móvil metía un tercer ancho, 50). Ver nota 2. */
:root {
--sidebar-rail: 70px; /* colapsada: solo la columna de iconos */
--sidebar-panel: 230px; /* expandida: iconos + etiquetas */
/* Lo que la barra le RESERVA al layout — y NO es lo mismo que su ancho.
En hover crece POR ENCIMA del contenido (z-index 100) y no lo empuja; a
≥1920 sí, porque está abierta siempre. Esa diferencia estaba implícita en
el CSS viejo y era la causa de un bug: ver nota 4. Lo consumen
`#dashboard_page_content` y el inset del lightbox, los dos desde main.css
(el PRODUCTO cablea; el DS del lightbox no sabe que existe una barra). */
--sidebar-reserved: var(--sidebar-rail);
/* El logo colapsado: dónde empieza y cuánto asoma. */
--sidebar-logo-x: 20px;
--sidebar-logo-peek: 30px;
/* Velos sobre la superficie de marca. No son colores del DS: son sombra
encima del preset, y por eso viven aquí y no en semantics.css — su valor
depende de que el fondo sea oscuro. */
--sidebar-veil: rgba(0, 0, 0, 0.2); /* hover / realce del logo */
--sidebar-veil-subtle: rgba(0, 0, 0, 0.1); /* submenú hundido */
}
@media (max-width: 768px) {
:root {
--sidebar-rail: 50px;
--sidebar-logo-x: 12px;
--sidebar-logo-peek: 28px;
}
}
@media (min-width: 1920px) {
/* Abierta siempre: aquí sí reserva su ancho completo. */
:root { --sidebar-reserved: var(--sidebar-panel); }
}
/* ---- La barra -------------------------------------------------------------- */
#dashboard_sidebar {
--sidebar-open: 0; /* el interruptor. Ver nota 2. */
position: fixed;
top: 0;
left: 0;
width: calc(var(--sidebar-rail) + (var(--sidebar-panel) - var(--sidebar-rail)) * var(--sidebar-open));
height: 100vh;
overflow-x: hidden;
background: var(--wp--preset--color--custom-600, var(--wp--preset--color--custom-color-600));
color: var(--neutral-white);
z-index: 100;
transition: all 0.3s;
}
/* LOS TRES DISPARADORES. Lo único que hacen es encender el interruptor — el
significado de "abierta" se define UNA vez, más abajo. Ver nota 2. */
@media (hover: hover) and (pointer: fine) {
#dashboard_sidebar:hover { --sidebar-open: 1; }
}
@media (pointer: coarse) {
.sidebar_open #dashboard_sidebar { --sidebar-open: 1; }
}
@media (min-width: 1920px) {
#dashboard_sidebar { --sidebar-open: 1; }
}
/* ---- Logo ------------------------------------------------------------------ */
#dashboard_logo {
height: 70px;
margin: 15px 0;
}
/* El realce que aparece detrás del logo al abrir. */
#dashboard_logo::before {
content: '';
position: absolute;
top: 0;
left: 10px;
height: 70px;
width: var(--sidebar-panel);
background: var(--sidebar-veil);
border-radius: var(--radius-md);
opacity: var(--sidebar-open);
transition: all 0.3s;
}
/* Colapsada asoma solo la marca (`--sidebar-logo-peek`) pegada a la izquierda;
abierta se centra y se ve entero. Las tres propiedades interpolan con el
interruptor en vez de repetirse por disparador. Ver nota 2. */
#dashboard_logo a {
display: inline-block;
position: absolute;
top: 50%;
left: 20px;
height: 35px;
background-size: contain;
background-position: 0;
background-repeat: no-repeat;
transform: translateY(-50%);
clip-path: inset(0 calc((100% - var(--sidebar-logo-peek)) * (1 - var(--sidebar-open))) 0 0);
transition: all 0.3s;
}
/* ---- Lista ----------------------------------------------------------------- */
#dashboard_menu_wrapper {
width: var(--sidebar-panel);
}
#dashboard_menu {
max-height: calc(100dvh - 136px); /* 70 del logo + 30 de sus márgenes + el pie */
margin: 0;
padding: 0;
list-style: none;
overflow: auto;
}
#dashboard_sidebar .menu_item_wrapper {
height: 60px;
text-transform: uppercase;
font-weight: 500;
font-size: 12px;
transition: all 0.3s;
}
#dashboard_sidebar .menu_item_wrapper:hover {
background: var(--sidebar-veil);
}
#dashboard_sidebar .menu-item {
height: 60px;
}
#dashboard_sidebar .menu-link {
width: 100%;
padding: 0 10px;
line-height: 130%;
}
/* La etiqueta solo existe con la barra abierta. */
#dashboard_sidebar .menu-link span {
opacity: var(--sidebar-open);
transition: all 0.3s;
}
/* El icono del ítem. Lleva CAJA a propósito — es la excepción que foundation.css
contempla, y aquí por partida doble: la caja es una COLUMNA de layout (los 50
que alinean todas las etiquetas), no un intento de centrar el glifo. Ver nota 3. */
#dashboard_sidebar .menu_item_wrapper a::before {
font-family: uicons-regular-rounded !important;
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* El ítem activo es el ACENTO DE MARCA. Es lo que pide el Figma y ya estaba
bien: el preset manda, la capa `--brand-*` del vertical no participa. */
#dashboard_sidebar .menu-item.current-menu-item,
#dashboard_sidebar .current-menu-item + .submenu_trigger {
background: var(--wp--preset--color--custom-500, var(--wp--preset--color--custom-color-500));
/* El texto y el glifo, EN BLANCO. Faltaba: sobre el acento de marca heredaban el color de la
barra, que no está pensado para ese fondo. Va por la ficha `--text-on-color`, que es
literalmente "lo que se escribe encima de un color" y vale #FFFFFF. */
color: var(--text-on-color);
}
/* ---- Submenú --------------------------------------------------------------- */
#dashboard_sidebar .submenu_wrapper {
display: none;
float: left;
width: 100%;
background: var(--sidebar-veil-subtle);
}
#dashboard_sidebar .sub-menu {
margin: 0;
padding: 0;
list-style: none;
display: none;
}
#dashboard_sidebar .submenu_wrapper .menu_item_wrapper .menu-item {
padding-left: 60px;
height: 50px;
}
#dashboard_sidebar .submenu_wrapper .menu_item_wrapper {
height: 50px;
}
.submenu_trigger {
position: relative;
width: 40px;
height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
/* EL RESET DE BOTÓN, aquí y no en un `style=` del front. En PHP esto es un `` y estas cinco
no le hacen nada; en el front nuevo es un `