/* custom.css — hoja compartida por las tres marcas. * * 2026-07-23: hasta hoy existian CUATRO copias de este archivo (shared/css/ y * /web/css/ x3). deploy-web copia shared/css y despues sobreescribe con * /web/css/*, asi que la copia de marca SIEMPRE ganaba y la compartida * no llegaba a ningun navegador. Las tres copias de marca eran identicas entre * si y estaban adelantadas respecto a la compartida: un fork por accidente, no * una personalizacion. * * Editar shared/css/custom.css y no ver ningun cambio era el sintoma. Se * consolido aqui y se borraron las tres copias. Lo que SI es de marca vive en * brand.css y landing.css, que siguen por marca. * * gate-css-single-source.sh falla si alguien reintroduce /web/css/custom.css. */ /* App-wide custom styles (brand-agnostic; per-product overrides via /css/) */ /* Anti-FOUC: hide body until theme.js removes 'js' sentinel */ html.js body { visibility: hidden; } /* Landing nav mobile-menu slide-down animation */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-down { animation: fadeInDown 0.3s ease-out forwards; } /* Prevent layout shift from scrollbar appearing/disappearing between pages */ html { scrollbar-gutter: stable; } /* ========================================================================== SPA Shell — Anti-flicker + HTMX transitions ========================================================================== Layer 1 (blocking script in ): document.documentElement.classList.add('js') → hides #page-content immediately before any rendering happens Layer 2 (HTMX swap timing): hx-swap="innerHTML swap:100ms" gives htmx-swapping CSS time to fade out Layer 3 (htmx:afterSettle): Removes opacity:0 after first load, starting the CSS transition ========================================================================== */ /* Initial hide — script in adds 'js' class synchronously */ html.js #page-content { opacity: 0; } /* Content area: default transition (fade-in after settle). 2026-06-21 — founder reported flicker en cot-create/dop-create. La fade-out + fade-in producía un visible flash blanco. Bajamos a transición casi instantánea para minimizar el efecto sin perder completamente la sensación de transición. */ #page-content { transition: opacity 0.06s linear; will-change: opacity; } /* HTMX adds this class during the swap:Xms delay — triggers fade-out */ #page-content.htmx-swapping { opacity: 0; transition: opacity 0.03s linear; } /* Generic HTMX: fade-in for newly added elements (hx-get append, OOB swaps) */ .htmx-added { opacity: 0; } .htmx-added.htmx-settling { opacity: 1; transition: opacity 0.2s ease; } /* ========================================================================== Collapsible Sidebar ========================================================================== */ #app-sidebar { width: 256px; /* 16rem — expanded */ transition: width 0.22s cubic-bezier(0.4,0,0.2,1); overflow-x: hidden; flex-shrink: 0; } #app-sidebar.sidebar-collapsed { width: 68px; /* icon only */ } /* Nav labels: fade out when collapsing */ #app-sidebar .sidebar-label { transition: opacity 0.15s ease, max-width 0.22s ease; max-width: 180px; white-space: nowrap; overflow: hidden; } #app-sidebar.sidebar-collapsed .sidebar-label { opacity: 0; max-width: 0; } /* Section headings: hide when collapsed */ #app-sidebar .sidebar-section-title { transition: opacity 0.12s ease; } #app-sidebar.sidebar-collapsed .sidebar-section-title { opacity: 0; pointer-events: none; } /* Toggle button chevron rotation */ #sidebar-toggle-icon { transition: transform 0.22s cubic-bezier(0.4,0,0.2,1); } #app-sidebar.sidebar-collapsed #sidebar-toggle-icon { transform: rotate(180deg); } /* Collapsed: reduce horizontal padding so icons are visible and centered */ #app-sidebar.sidebar-collapsed .glass-card { padding-left: 4px; padding-right: 4px; margin-left: 6px; margin-right: 6px; } #app-sidebar.sidebar-collapsed nav a { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; } #app-sidebar.sidebar-collapsed .sidebar-toggle-header { justify-content: center; padding-left: 0; padding-right: 0; } /* Tooltip on hover when collapsed */ #app-sidebar.sidebar-collapsed nav a { position: relative; } #app-sidebar.sidebar-collapsed nav a .sidebar-label { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--brand-tooltip-bg); color: #f1f5f9; font-size: 0.7rem; font-weight: 700; white-space: nowrap; padding: 4px 10px; border-radius: 8px; opacity: 0; max-width: none; pointer-events: none; z-index: 100; transition: opacity 0.15s ease; } #app-sidebar.sidebar-collapsed nav a:hover .sidebar-label { opacity: 1; } /* SPA loading progress bar (top of viewport) */ #htmx-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--brand-progress-gradient); z-index: 9999; pointer-events: none; width: 0%; opacity: 0; } /* Active nav item indicator */ .nav-item-active { background-color: var(--brand-primary) !important; color: #fff !important; box-shadow: 0 4px 14px -3px var(--brand-nav-shadow); } .nav-item-active i { color: #fff !important; } /* Dark mode scrollbar */ .dark { color-scheme: dark; } .dark ::-webkit-scrollbar { width: 8px; height: 8px; } .dark ::-webkit-scrollbar-track { background: #0f172a; } .dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Brand logo link sizing (each product loads its own logo via brand-config.js) */ .brand-logo-link { min-width: 210px; } .glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(226, 232, 240, 0.8); } .dark .glass-card { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(51, 65, 85, 0.5); } /* Period selector active state */ .active-period { background: white; color: var(--brand-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .dark .active-period { background: var(--brand-dark-card); color: var(--brand-primary); } /* ========================================================================== Sub-page headers inside the SPA shell ========================================================================== When a sub-page is loaded inside the dashboard shell, its internal

would create a second top-bar alongside the shell's own header. On desktop the sidebar handles navigation, so inner headers are hidden entirely. On mobile ( #spa-content > header, #main-wrapper #page-content > #spa-content > #main-wrapper > header { display: none !important; } } /* Mobile ( #spa-content > header, #main-wrapper #page-content > #spa-content > #main-wrapper > header { position: static !important; box-shadow: none !important; } } /* AI chat bubbles — used in ai-copilot.html and dashboard widget */ .chat-bubble { max-width: 80%; padding: 0.875rem 1rem; border-radius: 1.5rem; position: relative; font-size: 0.9rem; line-height: 1.5; } .chat-user { background-color: var(--brand-chat-user-bg); color: #fff; margin-left: auto; border-bottom-right-radius: 0.25rem; } .chat-ai { background-color: #f1f5f9; color: #1e293b; margin-right: auto; border-bottom-left-radius: 0.25rem; } .dark .chat-ai { background-color: #1e293b; color: #e2e8f0; } /* =========================================================================== WCAG AA contrast overrides (Lighthouse color-contrast audit fix — 2026-06-03). =========================================================================== text-slate-500 sobre bg-dark/bg-dark-card daba contraste 3.75-4.23 (need ≥4.5). En dark mode lo subimos a slate-400 (#94a3b8) que alcanza ~5.7 sobre #020617. En light mode dejamos slate-500 intacto (contraste suficiente sobre fondo claro). text-primary (#6366f1 indigo en RL, varía per brand) sobre bg-dark daba 3.99. En dark mode forzamos un primary más claro definido por --brand-primary-light con fallback al primary actual; brands sin esa var quedan igual hasta que los brand-config la sienten. */ .dark .text-slate-500 { color: rgb(148 163 184); } /* slate-400 */ .dark .text-slate-600 { color: rgb(148 163 184); } /* same boost */ .dark .text-primary { color: rgb(var(--brand-primary-light-rgb, var(--brand-primary-rgb)) / 1); } /* Tailwind CDN doesn't always JIT-generate peer-checked utilities used by segmented radio controls in enterprise-settings ("Sí, recurrente programada" / "No, cobranza al momento"). Inline them here so the visual flip on the active option is guaranteed; the SPA HTMX shell strips inline