/* ═══════════════════════════════════════════════════════════════════ Drawer / navegador expandible del menu lateral. Espacio de nombres .dwr-* a proposito: los bloques !important viejos de styles.css apuntan a .drawer-menu-item y .drawer-grupo-items, asi que no pueden pisar nada de aca. Ver docs/superpowers/specs/ 2026-08-07-menu-navegador-expandible-design.md ═══════════════════════════════════════════════════════════════════ */ :root { /* Menu monocromo. La version anterior le daba un color saturado a cada uno de los diez grupos y pintaba con el el borde, la banda del encabezado Y el titulo: diez tarjetas apiladas asi son un arcoiris, que en una herramienta que se mira todo el dia cansa y se ve poco seria. Ahora el color no identifica al grupo -- solo marca DONDE ESTAS PARADO, que es la unica distincion que hace falta de un vistazo. Las diez variables se conservan apuntando todas al mismo neutro para no romper nada que las consuma; si algun dia se quiere volver al color por grupo, alcanza con darles valores distintos otra vez. */ --dwr-neutro: #24304a; --dwr-g-inventario: var(--dwr-neutro); --dwr-g-ventas-y-clientes: var(--dwr-neutro); --dwr-g-comercial-crm: var(--dwr-neutro); --dwr-g-caja-y-cobros: var(--dwr-neutro); --dwr-g-contabilidad: var(--dwr-neutro); --dwr-g-reportes-contables: var(--dwr-neutro); --dwr-g-operaciones: var(--dwr-neutro); --dwr-g-posventa: var(--dwr-neutro); --dwr-g-sistema: var(--dwr-neutro); --dwr-g-soporte: var(--dwr-neutro); /* Acento de "estas aca". Es el unico color del menu. */ --dwr-activo: #3b82f6; /* El riel mide EXACTAMENTE lo mismo que el menu contraido. Cuando eran distintos (300 contra 248), las tarjetas cambiaban de ancho al abrir y al cerrar: se veian estirarse y encogerse en cada transicion. Igualandolos, abrir solo revela el panel a la derecha y las tarjetas no se mueven ni un pixel. Si se cambia uno, hay que cambiar el otro. */ --dwr-ancho: 300px; --dwr-riel: 300px; --dwr-ancho-abierto: 780px; /* Paleta fija del mockup aprobado (.superpowers/brainstorm/2996-1786143544/ content/drawer-expandible-v2.html). A proposito NO son tokens --sm-* del sistema de diseño: esos tokens se mezclan con el propio degradado de fondo del drawer y las tarjetas/baldosas dejan de distinguirse -- que es justo lo que se veia plano/feo. */ --dwr-bg-tarjeta: #131c2e; --dwr-borde-sutil: #1e293b; --dwr-borde-fuerte: #334155; --dwr-texto: #e8eef8; --dwr-texto-tenue: #64748b; --dwr-texto-debil: #475569; --dwr-texto-kbd: #94a3b8; /* Titulo del grupo. Sin color de grupo que lo distinga, el brillo y el peso del texto pasan a ser lo unico que ordena la lista. Peso 700 en oscuro y 800 en claro NO es una inconsistencia: el texto claro sobre fondo oscuro se ve opticamente mas pesado que el mismo peso sobre fondo claro, asi que para que los dos temas se vean iguales hay que compensar. */ --dwr-titulo: #e6edf7; --dwr-titulo-peso: 700; --dwr-titulo-activo: #ffffff; /* Relleno de hover para filas de lista. Un lavado sobre el fondo, no una superficie nueva: la fila responde sin convertirse en tarjeta. */ --dwr-hover: rgba(255, 255, 255, .055); /* El panel es una superficie distinta del riel. Sin esto, navegacion y contenido comparten fondo y la division en dos columnas queda a cargo de una linea de 1px: el ojo no registra "menu | contenido", registra una lista larga partida al medio. */ --dwr-panel-bg: #0d1526; /* Curva de entrada (frena al final, se siente fisico) y de respuesta. */ --dwr-ease-in: cubic-bezier(.16, 1, .3, 1); --dwr-ease-out: cubic-bezier(.2, .8, .3, 1); --dwr-t-card: .22s; --dwr-t-expand: .34s; --dwr-t-tile: .19s; --dwr-t-hover: .14s; --dwr-t-press: .09s; } /* ── Tema claro ─────────────────────────────────────────────────── La hoja nacio con la paleta oscura escrita a mano (ver el comentario de :root), asi que en tema claro el drawer quedaba oscuro sobre una app clara. Aca se reasignan los mismos tokens; ninguna regla de mas abajo necesita saber en que tema esta. Los valores salen de web/theme-light.css para que el menu no invente una escala de grises propia. */ html[data-sm-theme="light"] { --dwr-neutro: #d8d5cf; --dwr-activo: #2563eb; --dwr-bg-tarjeta: #ffffff; --dwr-borde-sutil: #e6e4e0; --dwr-borde-fuerte: #d8d5cf; --dwr-texto: #37352f; --dwr-texto-tenue: #6b665b; --dwr-texto-debil: #8c8578; --dwr-texto-kbd: #6b665b; /* Casi negro y mas pesado: sobre fondo claro el texto se ve mas fino, y este es el unico elemento que ordena la lista. */ --dwr-titulo: #1f1e1b; --dwr-titulo-peso: 800; --dwr-titulo-activo: #1d4ed8; --dwr-hover: rgba(31, 30, 27, .055); --dwr-panel-bg: #faf9f7; } /* La sombra del hover esta escrita para fondo oscuro; sobre blanco tapaba la tarjeta en vez de levantarla. */ html[data-sm-theme="light"] #drawer .dwr-card:hover, html[data-sm-theme="light"] #drawer .dwr-tile:hover { box-shadow: 0 6px 16px rgba(31, 30, 27, .10); } /* Si el usuario pidio menos movimiento en su sistema, se apaga todo -- incluido el ensanchamiento, que pasa a instantaneo. */ @media (prefers-reduced-motion: reduce) { :root { --dwr-t-card: 0s; --dwr-t-expand: 0s; --dwr-t-tile: 0s; --dwr-t-hover: 0s; --dwr-t-press: 0s; } .dwr-card, .dwr-tile { animation: none !important; } } /* ── Tarjeta de grupo ────────────────────────────────────────────── */ .dwr-stack { display: flex; flex-direction: column; gap: 7px; padding: 8px 12px 14px; } /* #drawer + !important a proposito, en TODA esta hoja: .dwr-card, .dwr-tile, .dwr-volver y .dwr-reciente son