/* ════════════════════════════════════════ UTILIDADES — variables CSS globales Incluir PRIMERO en cualquier página ════════════════════════════════════════ */ /* ── Reset base ── */ * { box-sizing: border-box; margin: 0; padding: 0; } /* ── Micro-interacción global: todo botón se "hunde" al presionar ── Especificidad baja (0-0-1), así que cualquier regla más específica ya existente en cada módulo la sobreescribe sin conflicto. */ button:not(:disabled) { transition: transform 0.15s var(--ease-apple); } button:not(:disabled):active { transform: scale(0.97); } /* ── Scroll morado: nativo del documento + interno de cualquier contenedor con overflow propio (aparece solo cuando hay contenido) ── Selectores que se suman acá con el tiempo, cada uno porque tenía su propia versión gris/suelta en otro archivo (index.html, notas.css, graficos.css) en vez de usar esta regla: - .autocomplete-lista: cliente/empresa/equipo. - .vit-sidebar: filtros de catálogo/gráficos/registro/agenda/admin. - .vit-carrito-col: columnas del carrito flotante (Persona+ Dispositivo | Carrito). - .notas-modal-body, #muro-notas: módulo de Notas. - .chart-wrap-scroll: scroll horizontal del gráfico temporal. - .admin-panel: contenido de cada pestaña del Panel Admin. - .tab-panel: contenido interno de cada pestaña (Catálogo, Registro, Gráficos, Notas, Agenda, Planilla). - .kpi-detalle-lista: listas del detalle de una tarjeta en Gráficos. - #reg-grid-wrap: grilla de Comprobantes. Si aparece un contenedor nuevo con scroll propio, se suma ACÁ, no se le inventa su propia regla en otro archivo. OJO con el "contain" de abajo: corta la cadena de scroll en los DOS ejes. En un contenedor que solo scrollea en horizontal (una tira de imágenes, un gráfico ancho), eso deja la rueda vertical muerta encima de él en vez de pasarla al panel que sí scrollea. Esos casos declaran overscroll-behavior-x:contain y -y:auto aparte (ver .chart-wrap-scroll y #np-imagen-referencia). ── */ /* La lista va una sola vez con :is(): antes estaba repetida en las seis reglas de abajo, y sumar un contenedor nuevo obligaba a acordarse de agregarlo en las seis — cualquier olvido dejaba ese scroll con la barra gorda del navegador. Así se agrega en un solo lugar. */ html, .scroll-morado, .autocomplete-lista, .vit-sidebar, .vit-carrito-col, .notas-modal-body, #muro-notas, .chart-wrap-scroll, .admin-panel, .tab-panel, .vit-login-dropdown, #selector-empresas, .kpi-detalle-lista, #reg-grid-wrap { scrollbar-width: thin; scrollbar-color: var(--color-accent-dark) #1d1d1d; /* Sin esto, al llegar al borde de un scroll interno (esta lista, el sidebar, etc.) el scroll "se pasa" al contenedor de afuera — la página entera, u otro panel — en vez de quedarse quieto acá. */ overscroll-behavior: contain; } html { overflow-y: auto; } :is(html, .scroll-morado, .autocomplete-lista, .vit-sidebar, .vit-carrito-col, .notas-modal-body, #muro-notas, .chart-wrap-scroll, .admin-panel, .tab-panel, .vit-login-dropdown, #selector-empresas, .kpi-detalle-lista, #reg-grid-wrap)::-webkit-scrollbar { width: 8px; height: 8px; } :is(html, .scroll-morado, .autocomplete-lista, .vit-sidebar, .vit-carrito-col, .notas-modal-body, #muro-notas, .chart-wrap-scroll, .admin-panel, .tab-panel, .vit-login-dropdown, #selector-empresas, .kpi-detalle-lista, #reg-grid-wrap)::-webkit-scrollbar-track { background: #1d1d1d; border-radius: 4px; } :is(html, .scroll-morado, .autocomplete-lista, .vit-sidebar, .vit-carrito-col, .notas-modal-body, #muro-notas, .chart-wrap-scroll, .admin-panel, .tab-panel, .vit-login-dropdown, #selector-empresas, .kpi-detalle-lista, #reg-grid-wrap)::-webkit-scrollbar-thumb { background: var(--color-accent-dark); border-radius: 4px; border: 2px solid #1d1d1d; transition: background 0.2s var(--ease-apple); } :is(html, .scroll-morado, .autocomplete-lista, .vit-sidebar, .vit-carrito-col, .notas-modal-body, #muro-notas, .chart-wrap-scroll, .admin-panel, .tab-panel, .vit-login-dropdown, #selector-empresas, .kpi-detalle-lista, #reg-grid-wrap)::-webkit-scrollbar-thumb:hover { background: var(--color-accent); } :is(html, .scroll-morado, .autocomplete-lista, .vit-sidebar, .vit-carrito-col, .notas-modal-body, #muro-notas, .chart-wrap-scroll, .admin-panel, .tab-panel, .vit-login-dropdown, #selector-empresas, .kpi-detalle-lista, #reg-grid-wrap)::-webkit-scrollbar-corner { background: transparent; } /* ── Alto del sidebar de filtros: reutilizado por las dos variantes de .vit-sidebar (sticky en Catálogo vs fixed en Gráficos/Registro/ Agenda/Admin, ver vitrina.css). Siempre llega hasta el fondo del viewport aunque el contenido sea corto (ej. Agenda con pocos filtros) — antes solo Catálogo tenía height fijo y las otras páginas se achicaban al alto de su contenido, así que las cuatro se veían distintas entre sí. Le resta --vit-nav-alto (alto completo del navbar: fila de menú + barra de filtros) porque su "top" (ver vitrina.css) también le suma ese mismo valor. Restarle TAMBIÉN el alto del footer acá se probó y se descartó — dejaba el sidebar chico todo el tiempo (no solo cerca del final del scroll, que es cuando en verdad hace falta), incluso arriba de todo con miles de píxeles de productos de por medio antes de llegar al footer. Ese ajuste fino, dependiente de la posición real del scroll (no solo del alto de viewport), vive en JS — ver _clampSidebarCatalogo() en vitp-paginas.js, que solo achica el sidebar (con max-height inline) cuando de verdad está por taparse con la cabecera o el footer, y lo deja en su alto normal el resto del tiempo. ── */ @media (min-width: 701px) { .vit-sidebar { height: calc(100vh - var(--vit-nav-alto, 62px) - 20px); max-height: calc(100vh - var(--vit-nav-alto, 62px) - 20px); padding: 4px 0 4px 0; z-index: 270; } } /* ── Espacio reservado para el sidebar fijo dentro de una página vitp (Comprobantes/Gráficos/Agenda/Admin/Registro-tabla, todas con class "vitp-page") — el