/* ===================================================================== Quantum Central — Glass Skin v1.2 (iOS Liquid Glass — deep) --------------------------------------------------------------------- Layer cosmético sobre styles.css. Activado con . Sin tocar selectores existentes salvo via override de CSS variables. v1.2 agrega: - Specular highlight que sigue al mouse (--mx/--my, set por glass-fx.js) - Tilt 3D parallax (--rx/--ry, set por glass-fx.js) - Press state con scale-down + spring rebound - Page transitions con slide + spring + fade - Noise grain SVG sobre vidrios (realismo) - iOS-style ripple en clicks ===================================================================== */ /* ----- Tokens ------------------------------------------------------- */ :root { --glass-radius-xl: 28px; --glass-radius-lg: 22px; --glass-radius-md: 16px; --glass-radius-sm: 12px; --glass-blur-card: 24px; --glass-blur-bar: 34px; --glass-blur-modal: 44px; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 480ms; /* Edge-light reflectivo arriba de las superficies */ --glass-edge-light: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 16%, transparent 30%, transparent 100%); /* Specular spot — usa --mx/--my que JS setea en mousemove */ --glass-specular: radial-gradient( circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 24%, transparent 55%); /* Noise SVG (textura grain sutil) — realista para vidrio */ --glass-noise: url("data:image/svg+xml;utf8,"); /* Apple Pro fonts via system-ui stack: - macOS / iOS: SF Pro Display + SF Pro Text (real Apple) - Windows 11: Segoe UI Variable (Microsoft, virtually identical feel) - Older Win: Segoe UI Sin descarga externa, sin license issues. */ --qc-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; --qc-font-display: var(--qc-font-sans); /* hero/titulares con la misma fuente, sin serif */ --qc-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace; /* Status / semantic palette — usados con color-mix() para variantes alpha */ --glass-ok: #4ade80; /* verde éxito */ --glass-warn: #fbbf24; /* amarillo alerta */ --glass-err: #f87171; /* rojo indicador (activity dot) */ --glass-critical: #ef4444; /* rojo fuerte (días vencidos) */ --glass-danger: #ff6b6b; /* rojo acción destructiva */ --glass-danger-light: #ff8a8a; /* rojo claro (texto hover) */ /* Stops del gradiente iOS — complementan --ios-blue existente */ --ios-blue-light: #5db9ff; --ios-blue-deep: #0046a8; } /* Aplicar al body cuando el skin esté activo */ body.qc-skin-glass { font-family: var(--qc-font-sans); font-feature-settings: "ss01" 1, "cv11" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.011em; text-rendering: optimizeLegibility; } /* Quitar Source Serif 4 de hero/titulares — todo SF Pro / Segoe UI Variable */ body.qc-skin-glass h1, body.qc-skin-glass h2, body.qc-skin-glass h3, body.qc-skin-glass h4, body.qc-skin-glass .qc-pillar-title, body.qc-skin-glass .wizard-step-title, body.qc-skin-glass .cs-hero-title, body.qc-skin-glass .brand-text, body.qc-skin-glass .brand-central { font-family: var(--qc-font-sans) !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: -0.025em !important; } /* Sidebar brand-text: peso medio, tamaño limpio */ body.qc-skin-glass .brand-text { font-weight: 600 !important; letter-spacing: -0.015em !important; } body.qc-skin-glass .brand-central { font-weight: 500 !important; background: linear-gradient(135deg, var(--text), var(--ios-blue) 110%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Logo container más grande: el SVG ahora tiene viewBox 44x44 con dial al borde. Nota QUA-207 tanda 3: sin !important en layout — 3 clases (0,3,1) ya gana sobre `.brand-icon` base (0,1,0) de styles.css, único selector que fija estas propiedades. */ body.qc-skin-glass .sidebar-brand .brand-icon { width: 40px; height: 40px; min-width: 40px; } /* Mono */ body.qc-skin-glass code, body.qc-skin-glass pre, body.qc-skin-glass [class*="mono"], body.qc-skin-glass .qc-pedido-num, body.qc-skin-glass .qc-sku, body.qc-skin-glass kbd { font-family: var(--qc-font-mono); font-feature-settings: "tnum" 1; } /* Tabular numbers en data densa */ body.qc-skin-glass .kpi-value, body.qc-skin-glass [class*="-price"], body.qc-skin-glass [class*="-total"], body.qc-skin-glass .ap-table td, body.qc-skin-glass .topbar-stat { font-feature-settings: "tnum" 1, "ss01" 1; font-variant-numeric: tabular-nums; } /* ----- Re-skin de paleta — silver chrome + iOS blue ----------------- */ html[data-theme="dark"] body.qc-skin-glass { --accent: #b8c0cc; --accent-hover: #d6dde6; --accent-soft: rgba(184, 192, 204, 0.16); --accent-orange: #b8c0cc; --ios-blue: #0a84ff; --ios-blue-hover: #4ea1ff; --ios-blue-soft: color-mix(in srgb, var(--ios-blue) 18%, transparent); /* Tints más opacos para que cards/tablas no se laven contra el aurora */ --glass-tint: rgba(28, 32, 40, 0.72); --glass-tint-strong: rgba(28, 32, 40, 0.88); --glass-tint-soft: rgba(28, 32, 40, 0.50); --glass-stroke: rgba(255, 255, 255, 0.10); --glass-stroke-hover:rgba(255, 255, 255, 0.22); --glass-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 16px 28px -16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10); --glass-glow: 0 0 0 1px color-mix(in srgb, var(--ios-blue) 26%, transparent), 0 24px 50px -18px color-mix(in srgb, var(--ios-blue) 42%, transparent); --glass-text-dim: rgba(235, 233, 225, 0.62); } html[data-theme="light"] body.qc-skin-glass { --accent: #6b7585; --accent-hover: #4a5363; --accent-soft: rgba(107, 117, 133, 0.14); --accent-orange: #6b7585; --ios-blue: #007aff; --ios-blue-hover: #2a8eff; --ios-blue-soft: color-mix(in srgb, var(--ios-blue) 15%, transparent); --glass-tint: rgba(255, 255, 255, 0.55); --glass-tint-strong: rgba(255, 255, 255, 0.82); --glass-tint-soft: rgba(255, 255, 255, 0.36); --glass-stroke: rgba(34, 38, 46, 0.07); --glass-stroke-hover:rgba(34, 38, 46, 0.16); --glass-shadow: 0 28px 60px -22px rgba(40, 50, 70, 0.22), 0 12px 24px -12px rgba(40, 50, 70, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85); --glass-glow: 0 0 0 1px color-mix(in srgb, var(--ios-blue) 20%, transparent), 0 22px 36px -14px color-mix(in srgb, var(--ios-blue) 26%, transparent); --glass-text-dim: rgba(34, 38, 46, 0.55); } /* ----- Aurora background ------------------------------------------- */ body.qc-skin-glass { position: relative; background: var(--bg); } body.qc-skin-glass::before { content: ""; position: fixed; inset: -10vh -10vw; pointer-events: none; z-index: 0; background: radial-gradient(60vw 60vw at 12% 8%, color-mix(in srgb, var(--ios-blue) 20%, transparent), transparent 60%), radial-gradient(50vw 50vw at 88% 18%, rgba(120, 140, 180, 0.18), transparent 65%), radial-gradient(70vw 70vw at 70% 92%, rgba(160, 130, 200, 0.14), transparent 65%); filter: blur(40px) saturate(120%); animation: qcAurora 22s var(--ease-out-expo) infinite alternate; } html[data-theme="light"] body.qc-skin-glass::before { opacity: 0.55; } @keyframes qcAurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(2vw, -1.5vh, 0) scale(1.08); } } body.qc-skin-glass:has(#page-inicio.active)::before { opacity: 0.45; } /* Z-index sobre el aurora — solo aside (sidebar) y main (no flotantes que necesitan posicionamiento custom como qfab, modals, aria) */ body.qc-skin-glass > aside.sidebar, body.qc-skin-glass > main.main { position: relative; z-index: 1; } /* ===================================================================== User card (sidebar footer) — restyled glass + clean horizontal actions ===================================================================== */ /* Nota QUA-207 tanda 3: `padding`/`margin-bottom`/`gap`/`width`/`height`/ `min-width`/`padding-top`/`display`/`height` de este bloque sin !important — `body.qc-skin-glass .xxx` (0,2,1) ya gana por especificidad sobre las reglas base de styles.css (0,1,0, o 0,2,0 en `.sidebar-footer .user-card`), sin ningún !important competidor sobre las mismas propiedades. El resto (background/border/box-shadow/color/font) queda igual, es skin legítimo. */ body.qc-skin-glass .sidebar-footer { background: transparent !important; border-top: 1px solid var(--glass-stroke) !important; padding: 12px; } body.qc-skin-glass .user-card { background: var(--glass-tint) !important; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--glass-stroke) !important; border-radius: 14px !important; padding: 12px; transition: border-color 200ms, box-shadow 200ms !important; } body.qc-skin-glass .user-card:hover { border-color: var(--glass-stroke-hover) !important; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45) !important; } body.qc-skin-glass .user-card-info { margin-bottom: 12px; gap: 10px; } body.qc-skin-glass .user-card-avatar { width: 34px; height: 34px; min-width: 34px; border-radius: 50% !important; background: linear-gradient(135deg, var(--ios-blue-light), var(--ios-blue) 60%, var(--ios-blue-deep)) !important; color: #ffffff !important; font-family: var(--qc-font-sans) !important; font-weight: 600 !important; font-size: 13.5px !important; letter-spacing: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 4px 10px -3px color-mix(in srgb, var(--ios-blue) 45%, transparent) !important; } body.qc-skin-glass .user-card-name { font-size: 13px !important; font-weight: 600 !important; color: var(--text) !important; } body.qc-skin-glass .user-card-meta { font-size: 11px !important; color: var(--glass-text-dim) !important; } /* Action row: flex con auto-fit, todos los iconos en una sola fila */ body.qc-skin-glass .user-card-actions { display: flex; gap: 4px; padding-top: 10px; border-top: 1px solid var(--glass-stroke) !important; align-items: center; justify-content: space-between; } body.qc-skin-glass .user-action-btn { flex: 1 1 0; min-width: 0; height: 32px; border-radius: 8px !important; background: transparent !important; color: var(--glass-text-dim) !important; border: 1px solid transparent !important; transition: background 160ms, color 160ms, border-color 160ms, transform 160ms var(--ease-spring) !important; } body.qc-skin-glass .user-action-btn:hover { background: color-mix(in srgb, var(--ios-blue) 12%, transparent) !important; color: var(--ios-blue-hover) !important; border-color: color-mix(in srgb, var(--ios-blue) 25%, transparent) !important; transform: translateY(-1px); } body.qc-skin-glass .user-action-btn:active { transform: translateY(0) scale(0.94); transition-duration: 60ms !important; } body.qc-skin-glass .user-action-btn.user-action-logout:hover { background: color-mix(in srgb, var(--glass-danger) 12%, transparent) !important; color: var(--glass-danger-light) !important; border-color: color-mix(in srgb, var(--glass-danger) 30%, transparent) !important; } body.qc-skin-glass .user-action-btn svg { width: 14px; height: 14px; } /* ===================================================================== TopNav v4 — Steam Library / Vercel style (sidebar OUT, top bar IN) ===================================================================== */ /* Activación: body.qc-topnav-mode (lo agrega glass-fx.js). Oculta el sidebar y monta una topnav fija arriba. */ /* Nota QUA-207 tanda 2: sin !important — el selector de acá (body con 2 clases [+ elemento hijo]) ya gana por especificidad sobre las reglas base de styles.css (`body`, `aside.sidebar`, `main.main`, `.topbar`) para estas mismas propiedades. Verificado con getComputedStyle idéntico antes/después en los 4 estados relevantes (topnav-mode solo / + landing-mode, desktop ≥820px / mobile <820px) — las reglas `!important` de styles.css que sí compiten (landing-mode desktop topbar, mobile main.main) tocan propiedades distintas o coinciden en valor, así que el resultado visual no cambia. */ body.qc-skin-glass.qc-topnav-mode { display: block; /* dejar de ser flex (era para sidebar+main) */ overflow-x: hidden; } body.qc-skin-glass.qc-topnav-mode > aside.sidebar { display: none; } body.qc-skin-glass.qc-topnav-mode > main.main { margin: 0; width: 100%; max-width: none; padding-top: 0; display: block; /* sin flex column que pueda romper layout */ min-height: calc(100vh - 60px); } /* Topbar nativa de las páginas (con DOLAR / Ejecutar Ciclo) — hide global, esos datos ahora viven en la topnav. */ body.qc-skin-glass.qc-topnav-mode .topbar { display: none; } /* Trigger de menú flotante de landing-mode → no necesario más */ body.qc-skin-glass.qc-topnav-mode .landing-sidebar-trigger { display: none; } /* Las páginas ya no compiten con landing-mode — todas se renderizan igual */ body.qc-skin-glass.qc-topnav-mode.landing-mode > main.main { display: block; place-items: unset; } /* === TOPNAV bar === */ body.qc-skin-glass .qc-topnav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 18px; padding: 8px 20px; height: 60px; background: var(--glass-tint-strong); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-bottom: 1px solid var(--glass-stroke); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35); animation: qcTopnavSlideIn 600ms var(--ease-out-expo); } @keyframes qcTopnavSlideIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } body.qc-skin-glass .qc-topnav::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--glass-edge-light); } body.qc-skin-glass .qc-topnav > * { position: relative; z-index: 1; } /* Brand */ body.qc-skin-glass .qc-topnav-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 4px 4px 0; background: transparent; border: none; font-family: inherit; color: var(--text); flex-shrink: 0; } body.qc-skin-glass .qc-topnav-brand-icon { width: 30px; height: 30px; } body.qc-skin-glass .qc-topnav-brand-text { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; } body.qc-skin-glass .qc-topnav-brand-text em { font-style: normal; background: linear-gradient(135deg, var(--text), var(--ios-blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; } /* Divider entre brand y tabs */ body.qc-skin-glass .qc-topnav-divider { width: 1px; height: 24px; background: var(--glass-stroke); margin: 0 4px; } /* Tabs */ body.qc-skin-glass .qc-topnav-tabs { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; position: relative; /* contiene la sliding pill */ cursor: grab; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* momentum iOS */ /* fade lateral sutil cuando hay overflow */ mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%); } body.qc-skin-glass .qc-topnav-tabs::-webkit-scrollbar { display: none; } body.qc-skin-glass .qc-topnav-tabs.qc-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } body.qc-skin-glass .qc-topnav-tabs.qc-dragging * { pointer-events: none; } /* Sliding active pill — FLIP indicator que se desliza entre tabs activos */ body.qc-skin-glass .qc-topnav-active-pill { position: absolute; top: 50%; left: 0; width: 0; height: 34px; margin-top: -17px; background: linear-gradient(135deg, color-mix(in srgb, var(--ios-blue) 22%, transparent), color-mix(in srgb, var(--ios-blue) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--ios-blue) 32%, transparent); border-radius: 999px; pointer-events: none; opacity: 0; z-index: 0; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--ios-blue) 55%, transparent); transition: transform 540ms cubic-bezier(0.34, 1.56, 0.64, 1), width 540ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease-out; will-change: transform, width; } body.qc-skin-glass .qc-topnav-tabs.has-active .qc-topnav-active-pill { opacity: 1; } body.qc-skin-glass .qc-topnav-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--glass-text-dim); font-family: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; flex-shrink: 0; position: relative; /* z-index: 1 sobre el pill */ z-index: 1; transition: color 280ms var(--ease-out-expo); /* Entrance: animación una vez al cargar — NO se vuelve a disparar al activar */ animation: qcTabIn 0.55s var(--ease-out-expo) calc(0.15s + var(--tab-i, 0) * 0.06s) both; } @keyframes qcTabIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } body.qc-skin-glass .qc-topnav-tab:hover { color: var(--text); } /* Active state: solo cambio de color — el bg lo dibuja la sliding pill */ body.qc-skin-glass .qc-topnav-tab.active { background: transparent; border-color: transparent; box-shadow: none; color: var(--text); } body.qc-skin-glass .qc-topnav-tab svg { flex-shrink: 0; opacity: 0.85; transition: opacity 280ms var(--ease-out-expo), color 280ms; } body.qc-skin-glass .qc-topnav-tab:hover svg { opacity: 1; } body.qc-skin-glass .qc-topnav-tab.active svg { opacity: 1; color: var(--ios-blue-hover); } /* Actions block (search + dolar + user) */ body.qc-skin-glass .qc-topnav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Search trigger — compacto */ body.qc-skin-glass .qc-topnav-search-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-stroke); border-radius: 999px; color: var(--glass-text-dim); cursor: pointer; font-family: inherit; font-size: 12px; transition: background 160ms, border-color 160ms; } body.qc-skin-glass .qc-topnav-search-btn span:not(.qc-topnav-kbd) { display: none; /* ocultar texto "Buscar" en topnav, dejar solo icon + kbd */ } body.qc-skin-glass .qc-topnav-search-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--glass-stroke-hover); color: var(--text); } body.qc-skin-glass .qc-topnav-kbd { font-family: var(--qc-font-mono); font-size: 9.5px; padding: 2px 5px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 4px; color: var(--glass-text-dim); } /* User avatar dropdown trigger */ body.qc-skin-glass .qc-topnav-user { display: flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-stroke); border-radius: 999px; cursor: pointer; transition: background 160ms, border-color 160ms; font-family: inherit; } body.qc-skin-glass .qc-topnav-user:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--glass-stroke-hover); } body.qc-skin-glass .qc-topnav-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--ios-blue-light), var(--ios-blue) 60%, var(--ios-blue-deep)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30); } body.qc-skin-glass .qc-topnav-user-name { font-size: 12.5px; font-weight: 500; color: var(--text); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dropdown del user */ body.qc-skin-glass .qc-topnav-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--glass-tint-strong); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55); z-index: 105; opacity: 0; pointer-events: none; transform: translateY(-4px) scale(0.96); transform-origin: top right; transition: opacity 200ms, transform 200ms var(--ease-spring); } body.qc-skin-glass .qc-topnav-user-wrap { position: relative; } body.qc-skin-glass .qc-topnav-user-wrap.open .qc-topnav-user-menu { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } body.qc-skin-glass .qc-topnav-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: transparent; border: none; border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background 140ms; width: 100%; } body.qc-skin-glass .qc-topnav-menu-item:hover { background: color-mix(in srgb, var(--ios-blue) 12%, transparent); } body.qc-skin-glass .qc-topnav-menu-item.danger:hover { background: color-mix(in srgb, var(--glass-danger) 12%, transparent); color: var(--glass-danger-light); } body.qc-skin-glass .qc-topnav-menu-divider { height: 1px; background: var(--glass-stroke); margin: 4px 0; } /* === SUBNAV bar (contextual) === */ body.qc-skin-glass .qc-subnav { position: sticky; top: 60px; z-index: 99; display: flex; gap: 2px; padding: 8px 20px; background: var(--glass-tint); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--glass-stroke); overflow-x: auto; scrollbar-width: none; /* Solo fade-in, sin slide para no perder fluidez */ animation: qcSubnavFade 280ms var(--ease-out-expo); } body.qc-skin-glass .qc-subnav::-webkit-scrollbar { display: none; } body.qc-skin-glass .qc-subnav.hidden { display: none; } body.qc-skin-glass .qc-subnav { cursor: grab; -webkit-overflow-scrolling: touch; } body.qc-skin-glass .qc-subnav.qc-dragging { cursor: grabbing; user-select: none; } body.qc-skin-glass .qc-subnav.qc-dragging * { pointer-events: none; } @keyframes qcSubnavFade { from { opacity: 0; } to { opacity: 1; } } /* Sliding pill para subnav (mismo concepto que el topnav) */ body.qc-skin-glass .qc-subnav-active-pill { position: absolute; top: 50%; left: 0; width: 0; height: 30px; margin-top: -15px; background: color-mix(in srgb, var(--ios-blue) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ios-blue) 30%, transparent); border-radius: 999px; pointer-events: none; opacity: 0; z-index: 0; transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1), width 480ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease-out; will-change: transform, width; } body.qc-skin-glass .qc-subnav.has-active .qc-subnav-active-pill { opacity: 1; } body.qc-skin-glass .qc-subnav-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--glass-text-dim); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; position: relative; z-index: 1; transition: color 220ms var(--ease-out-expo); animation: qcSubpillFade 0.35s var(--ease-out-expo) calc(var(--pill-i, 0) * 0.03s) both; } @keyframes qcSubpillFade { from { opacity: 0; } to { opacity: 1; } } body.qc-skin-glass .qc-subnav-pill:hover { color: var(--text); } /* Active state: solo color — el bg lo dibuja la sliding pill */ body.qc-skin-glass .qc-subnav-pill.active { background: transparent; border-color: transparent; color: var(--text); } /* Layout adjustment: páginas ahora arrancan después de la topnav */ body.qc-skin-glass.qc-topnav-mode > main.main > .page { padding-top: 24px; } /* En Inicio (landing-mode), el bento queda igual centrado pero respeta el topnav */ body.qc-skin-glass.qc-topnav-mode.landing-mode #page-inicio { min-height: calc(100vh - 60px); } /* ===================================================================== Sidebar v3 — Quantum Rail (search live + grupos colapsables + sticky) LEGACY: solo se aplica si NO está qc-topnav-mode (fallback) ===================================================================== */ /* Brand sticky en la parte superior. Nota QUA-207: el !important no hacía falta — el selector de acá ya gana por especificidad sobre `.sidebar-brand` de styles.css (2 clases vs 1) y glass.css carga después en el . Sacado para no repetir el patrón de la lección #24 (glass pisando layout a la fuerza). */ body.qc-skin-glass .sidebar-brand { position: sticky; top: 0; z-index: 5; background: var(--glass-tint-strong); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); margin: 0; padding: 18px 14px; border-bottom: 1px solid var(--glass-stroke); } /* Search bar — inyectada por glass-fx.js como primer hijo de .sidebar-nav */ body.qc-skin-glass .qc-nav-search { position: sticky; top: 0; z-index: 4; margin: 0 8px 8px; padding-top: 4px; background: var(--glass-tint-strong); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); } body.qc-skin-glass .qc-nav-search-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-stroke); border-radius: 10px; transition: border-color 160ms, background 160ms; } body.qc-skin-glass .qc-nav-search-wrap:focus-within { border-color: color-mix(in srgb, var(--ios-blue) 55%, transparent); background: color-mix(in srgb, var(--ios-blue) 8%, transparent); } body.qc-skin-glass .qc-nav-search-wrap svg { color: var(--glass-text-dim); flex-shrink: 0; } body.qc-skin-glass .qc-nav-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 13px; padding: 0; } body.qc-skin-glass .qc-nav-search-input::placeholder { color: var(--glass-text-dim); } body.qc-skin-glass .qc-nav-search-kbd { font-family: var(--qc-font-mono); font-size: 10.5px; padding: 2px 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 4px; color: var(--glass-text-dim); } /* Scroll area — fade gradients arriba y abajo, scroll suave */ body.qc-skin-glass .sidebar-nav { overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; padding: 8px 0 16px; /* QUA-207 t4: glass gana por especificidad (body.qc-skin-glass), no necesita !important */ mask-image: linear-gradient(to bottom, transparent 0, black 14px, black calc(100% - 18px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 14px, black calc(100% - 18px), transparent 100%); } /* Group labels — clickables con chevron animado */ body.qc-skin-glass .nav-group-label { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px 6px; /* QUA-207 t4: layout sin !important (gana por especificidad) */ margin: 8px 0 2px; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--glass-text-dim) !important; cursor: pointer !important; user-select: none; border: none !important; background: transparent !important; transition: color 160ms; position: relative; } body.qc-skin-glass .nav-group-label::before { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; background: linear-gradient(90deg, var(--glass-stroke), transparent 80%); pointer-events: none; } body.qc-skin-glass .nav-group-label:hover { color: var(--text) !important; } body.qc-skin-glass .nav-group-label::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-bottom: 3px; transition: transform 240ms var(--ease-out-expo); } body.qc-skin-glass .nav-group-label[data-collapsed="true"]::after { transform: rotate(-45deg); margin-top: 3px; margin-bottom: 0; } /* Sub-header dentro de un grupo (ej. "Externo"/"Interno"): no colapsa, sin chevron */ body.qc-skin-glass .nav-subgroup-label { padding: 8px 16px 4px; /* QUA-207 t4: layout sin !important (gana por especificidad) */ margin: 4px 0 0; font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--glass-text-dim) !important; opacity: 0.75; cursor: default !important; user-select: none; border: none !important; background: transparent !important; } /* Group content — wrapper inyectado por JS para animación grid-template-rows */ body.qc-skin-glass .nav-group-content { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms var(--ease-out-expo); } body.qc-skin-glass .nav-group-content[data-collapsed="true"] { grid-template-rows: 0fr; } body.qc-skin-glass .nav-group-content-inner { overflow: hidden; } /* Hide nav-items when search filters them out */ body.qc-skin-glass .nav-item[data-search-hidden="true"] { display: none !important; } body.qc-skin-glass .nav-group-label[data-search-hidden="true"] { display: none !important; } /* No-results placeholder */ body.qc-skin-glass .qc-nav-no-results { padding: 20px 16px; font-size: 12.5px; color: var(--glass-text-dim); text-align: center; font-style: italic; } /* ----- Sidebar ----------------------------------------------------- */ body.qc-skin-glass .sidebar { background: var(--glass-tint-strong); backdrop-filter: blur(var(--glass-blur-bar)) saturate(170%); -webkit-backdrop-filter: blur(var(--glass-blur-bar)) saturate(170%); border-right: 1px solid var(--glass-stroke); box-shadow: var(--glass-shadow); position: relative; } body.qc-skin-glass .sidebar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--glass-edge-light); border-radius: inherit; } /* Sidebar nav — la indicador deslizante la pinta glass-fx.js */ body.qc-skin-glass .sidebar-nav { position: relative; } body.qc-skin-glass .qc-nav-indicator { position: absolute; left: 8px; right: 8px; top: 0; height: 0; pointer-events: none; border-radius: var(--glass-radius-sm); background: linear-gradient(135deg, color-mix(in srgb, var(--ios-blue) 28%, transparent), color-mix(in srgb, var(--ios-blue) 10%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ios-blue) 36%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--ios-blue) 55%, transparent); opacity: 0; transition: transform var(--dur-base) var(--ease-spring), height var(--dur-base) var(--ease-spring), opacity var(--dur-fast); z-index: 0; } body.qc-skin-glass .nav-item { position: relative; z-index: 1; border-radius: var(--glass-radius-sm); margin: 2px 8px; padding: 10px 12px; transition: color var(--dur-fast) var(--ease-out-expo), transform var(--dur-fast) var(--ease-spring), background var(--dur-fast); } body.qc-skin-glass .nav-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(2px); } html[data-theme="light"] body.qc-skin-glass .nav-item:hover { background: rgba(34, 38, 46, 0.04); } /* Cuando glass-fx.js está activo, ocultamos el bg propio del .active porque ya lo dibuja la indicator. Si JS falla → el fallback CSS mantiene el active visible. */ body.qc-skin-glass.fx-ready .nav-item.active { background: transparent; box-shadow: none; } body.qc-skin-glass:not(.fx-ready) .nav-item.active { background: linear-gradient(135deg, color-mix(in srgb, var(--ios-blue) 22%, transparent), color-mix(in srgb, var(--ios-blue) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ios-blue) 32%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--ios-blue) 50%, transparent); } /* ----- Topbar ------------------------------------------------------ */ body.qc-skin-glass .topbar { background: var(--glass-tint); backdrop-filter: blur(var(--glass-blur-bar)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur-bar)) saturate(180%); border-bottom: 1px solid var(--glass-stroke); border-radius: 0; } body.qc-skin-glass .topbar-stat { background: var(--glass-tint-soft); border: 1px solid var(--glass-stroke); border-radius: 999px; padding: 6px 14px; transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast); } body.qc-skin-glass .topbar-stat:hover { transform: translateY(-1px); border-color: var(--glass-stroke-hover); } /* ----- Glass surfaces (cards / kpi / pillars) ---------------------- */ /* perspective sobre el contenedor para que tilt 3D se vea bien */ body.qc-skin-glass .qc-pillars, body.qc-skin-glass .kpi-row, body.qc-skin-glass .grid-2 { perspective: 1000px; transform-style: preserve-3d; } body.qc-skin-glass .card, body.qc-skin-glass .kpi-card, body.qc-skin-glass .qc-pillar, body.qc-skin-glass .panel { background: var(--glass-tint); backdrop-filter: blur(var(--glass-blur-card)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur-card)) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: var(--glass-radius-lg); box-shadow: var(--glass-shadow); position: relative; overflow: hidden; transform-style: preserve-3d; /* Tilt 3D — JS setea --rx/--ry. Default 0 (no tilt). */ transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform 140ms var(--ease-soft), box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base); } /* Specular spot que sigue al mouse — solo en pillars del Inicio (donde se ve premium). En cards/kpi/tablas dentro de páginas densas evitamos el blend para no lavar el contraste. */ body.qc-skin-glass .qc-pillar { background-image: var(--glass-specular); background-blend-mode: overlay; } /* Edge-light en ::after (no choca con ::before original de pillar) */ body.qc-skin-glass .card::after, body.qc-skin-glass .kpi-card::after, body.qc-skin-glass .qc-pillar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--glass-edge-light); border-radius: inherit; z-index: 1; } /* Hover */ body.qc-skin-glass .card:hover, body.qc-skin-glass .kpi-card:hover, body.qc-skin-glass .qc-pillar:hover { border-color: var(--glass-stroke-hover); box-shadow: var(--glass-shadow), var(--glass-glow); } /* KPI tweaks */ body.qc-skin-glass .kpi-row { gap: 18px; } body.qc-skin-glass .kpi-card { padding: 22px 24px; } body.qc-skin-glass .kpi-card .kpi-value, body.qc-skin-glass .kpi-card [class*="value"] { font-feature-settings: "tnum" 1, "ss01" 1; letter-spacing: -0.02em; } /* ----- CTAs (Hero) — iOS Blue, gloss + glow ----------------------- */ body.qc-skin-glass .qc-cta-primary { background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), color-mix(in srgb, var(--ios-blue) 92%, transparent) 28%, var(--ios-blue) 88%) !important; border: 1px solid color-mix(in srgb, var(--ios-blue) 36%, transparent) !important; border-radius: 999px; padding: 13px 26px; color: #fff !important; font-weight: 600 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 14px 30px -14px color-mix(in srgb, var(--ios-blue) 65%, transparent) !important; transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) !important; position: relative; overflow: hidden; } body.qc-skin-glass .qc-cta-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60), inset 0 -1px 0 rgba(0, 0, 0, 0.24), 0 22px 42px -16px color-mix(in srgb, var(--ios-blue) 78%, transparent) !important; } body.qc-skin-glass .qc-cta-primary:active, body.qc-skin-glass .qc-cta-primary[data-pressed] { transform: translateY(0) scale(0.96); transition-duration: 60ms !important; } body.qc-skin-glass .qc-cta-secondary { background: var(--glass-tint) !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--glass-stroke) !important; border-radius: 999px; padding: 13px 24px; font-weight: 600 !important; transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast) !important; position: relative; overflow: hidden; } body.qc-skin-glass .qc-cta-secondary:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ios-blue) 50%, transparent) !important; color: var(--ios-blue-hover) !important; background: var(--glass-tint-strong) !important; } body.qc-skin-glass .qc-cta-secondary:active, body.qc-skin-glass .qc-cta-secondary[data-pressed] { transform: translateY(0) scale(0.97); transition-duration: 60ms !important; } /* ----- Generic buttons (no CTA) — press feedback ------------------ */ body.qc-skin-glass button:not(.qc-cta-primary):not(.qc-cta-secondary):not(:disabled) { transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); } body.qc-skin-glass button:not(.qc-cta-primary):not(.qc-cta-secondary):not(:disabled):active, body.qc-skin-glass button:not(.qc-cta-primary):not(.qc-cta-secondary)[data-pressed] { transform: scale(0.96); transition-duration: 50ms; } /* ----- Inputs ----------------------------------------------------- */ body.qc-skin-glass input[type="text"], body.qc-skin-glass input[type="number"], body.qc-skin-glass input[type="search"], body.qc-skin-glass input[type="email"], body.qc-skin-glass input[type="password"], body.qc-skin-glass select, body.qc-skin-glass textarea { background: var(--glass-tint-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--glass-stroke); border-radius: var(--glass-radius-sm); transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast); } body.qc-skin-glass input:focus, body.qc-skin-glass select:focus, body.qc-skin-glass textarea:focus { outline: none; border-color: color-mix(in srgb, var(--ios-blue) 65%, transparent); background: var(--glass-tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ios-blue) 18%, transparent); } /* ----- Modals ----------------------------------------------------- */ body.qc-skin-glass .modal, body.qc-skin-glass .modal-content, body.qc-skin-glass [class*="modal-overlay"] > * { background: var(--glass-tint-strong); backdrop-filter: blur(var(--glass-blur-modal)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur-modal)) saturate(180%); border: 1px solid var(--glass-stroke); border-radius: var(--glass-radius-xl); box-shadow: var(--glass-shadow), 0 60px 120px -40px rgba(0, 0, 0, 0.55); animation: qcModalIn var(--dur-slow) var(--ease-spring); } @keyframes qcModalIn { from { opacity: 0; transform: translateY(20px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ----- Page transitions — slide + spring + fade ------------------- */ body.qc-skin-glass .page { animation: qcPageIn var(--dur-slow) var(--ease-out-expo); } @keyframes qcPageIn { from { opacity: 0; transform: translateY(16px) scale(0.99); filter: blur(4px); } 60% { filter: blur(0); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* ----- iOS-style ripple — glass-fx.js inserta el span ------------- */ body.qc-skin-glass .qc-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.10) 50%, transparent 70%); width: 8px; height: 8px; transform: translate(-50%, -50%) scale(0); animation: qcRipple 600ms var(--ease-out-expo) forwards; z-index: 100; mix-blend-mode: overlay; } @keyframes qcRipple { to { transform: translate(-50%, -50%) scale(50); opacity: 0; } } /* ----- Scrollbar refino ------------------------------------------- */ body.qc-skin-glass *::-webkit-scrollbar { width: 10px; height: 10px; } body.qc-skin-glass *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background var(--dur-fast); } body.qc-skin-glass *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); background-clip: padding-box; } html[data-theme="light"] body.qc-skin-glass *::-webkit-scrollbar-thumb { background: rgba(34, 38, 46, 0.18); background-clip: padding-box; } /* Smooth scroll SOLO en page transitions, no global (rompe scroll natural del sidebar) */ /* ----- Análisis Mercado tabla — patch copper hardcoded ------------ */ body.qc-skin-glass [id^="page-analisis-"] .ap-row-serie td { background: linear-gradient(90deg, color-mix(in srgb, var(--ios-blue) 55%, transparent) 0%, color-mix(in srgb, var(--ios-blue) 18%, transparent) 100%) !important; color: #ffffff !important; } body.qc-skin-glass [id^="page-analisis-"] .ap-col-edit { background: color-mix(in srgb, var(--ios-blue) 3%, transparent) !important; } html[data-theme="dark"] body.qc-skin-glass [id^="page-analisis-"] .ap-col-edit { background: color-mix(in srgb, var(--ios-blue) 6%, transparent) !important; } body.qc-skin-glass [id^="page-analisis-"] .ap-table tbody tr:hover td { background: color-mix(in srgb, var(--ios-blue) 6%, transparent) !important; } body.qc-skin-glass [id^="page-analisis-"] .ap-col-modelo { border-right: 2px solid color-mix(in srgb, var(--ios-blue) 45%, transparent) !important; } /* Headers tabla con frosted glass + sticky */ body.qc-skin-glass [id^="page-analisis-"] .ap-table thead th, body.qc-skin-glass [id^="page-analisis-"] .ap-table thead .ap-col-modelo { background: var(--glass-tint-strong) !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--glass-stroke) !important; } /* QUA-14: columnas sticky (col 1 Modelo + col 5 Precio A) frosted-glass, opacas SIEMPRE. Las reglas L1341/1344 (.ap-col-edit tint) y L1347 (hover) las dejaban transparentes y el contenido scrolleado se veia a traves -> el sticky parecia roto. Especificidad (0,6,4) + !important le gana a esas reglas. Coherente con el thead frosted (arriba). */ body.qc-skin-glass [id^="page-analisis-"] .ap-table tbody tr:not(.ap-row-serie):not(.ap-row-sep) td.ap-col-modelo, body.qc-skin-glass [id^="page-analisis-"] .ap-table tbody tr:not(.ap-row-serie):not(.ap-row-sep) td.ap-col-precio-a { background: var(--glass-tint-strong) !important; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); } /* QUA-18: columnas fijadas por el usuario (pin) — mismo frosted-glass opaco que QUA-14, asi el sticky no transparenta el contenido scrolleado. Cubre tambien columnas editables (.ap-col-edit) fijadas: !important + esta especificidad ganan. */ body.qc-skin-glass [id^="page-analisis-"] .ap-table tbody tr:not(.ap-row-serie):not(.ap-row-sep) td.ap-col-pinned { background: var(--glass-tint-strong) !important; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); } body.qc-skin-glass [id^="page-analisis-"] .ap-table thead th.ap-col-pinned { background: var(--glass-tint-strong) !important; } /* ----- Wizard Ventas — patches específicos ------------------------ */ /* wizard-summary-item border-left + price color a iOS blue */ body.qc-skin-glass .wizard-summary-item { border-left: 3px solid var(--ios-blue) !important; } body.qc-skin-glass .wizard-summary-item-price { color: var(--ios-blue) !important; } /* btn-primary del wizard — heredar look iOS */ body.qc-skin-glass .btn-primary { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), color-mix(in srgb, var(--ios-blue) 92%, transparent) 28%, var(--ios-blue) 88%) !important; border: 1px solid color-mix(in srgb, var(--ios-blue) 36%, transparent) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.20), 0 12px 26px -12px color-mix(in srgb, var(--ios-blue) 55%, transparent) !important; } body.qc-skin-glass .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 18px 32px -14px color-mix(in srgb, var(--ios-blue) 65%, transparent) !important; } /* btn-link y .danger / "Quitar" — silver no copper */ body.qc-skin-glass .btn-link { color: var(--ios-blue) !important; } body.qc-skin-glass .btn-link.danger, body.qc-skin-glass .btn-link:hover { color: var(--ios-blue-hover) !important; } /* Producto seleccionado en wizard: green check OK, pero borde a iOS blue */ body.qc-skin-glass .wizard-card.selected, body.qc-skin-glass [class*="wizard-result"][class*="selected"] { border-color: var(--ios-blue) !important; box-shadow: 0 0 0 1px var(--ios-blue), 0 0 24px -8px var(--ios-blue) !important; } /* ----- Aria FAB / qfab — silver+blue gradient en lugar de purple --- */ body.qc-skin-glass .qfab-btn { background: linear-gradient(135deg, var(--ios-blue), #4a5363) !important; box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--ios-blue) 45%, transparent) !important; } body.qc-skin-glass .aria-fab { background: linear-gradient(135deg, var(--ios-blue), #4a5363) !important; box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--ios-blue) 45%, transparent) !important; } /* ===================================================================== Quantum Logo — animaciones (núcleo hexagonal + pulse + orbital) ===================================================================== */ /* Reset de animaciones del logo viejo (atom) — pisa el spin/intro previos */ body.qc-skin-glass .qc-logo-mark { position: relative; overflow: visible; animation: none !important; } body.qc-skin-glass .qc-logo-mark svg { width: 100%; height: 100%; display: block; overflow: visible; } /* Aniqui­lar las animations del logo viejo en svg ellipses/circles */ body.qc-skin-glass .qc-logo-mark svg ellipse, body.qc-skin-glass .qc-logo-mark svg circle:not(.qc-logo-glow):not(.qc-logo-pulse):not(.qc-logo-core), body.qc-skin-glass .qc-logo-mark svg .ch { animation: none !important; } /* --- Glow radial detrás (pulsa suave) --- */ body.qc-skin-glass .qc-logo-glow { transform-origin: center; animation: qcLogoGlowPulse 4s var(--ease-out-expo) infinite; transform-box: fill-box; } @keyframes qcLogoGlowPulse { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 0.95; transform: scale(1.08); } } /* --- Pulse rings expandiéndose (escalonados) --- */ body.qc-skin-glass .qc-logo-pulse { transform-origin: center; transform-box: fill-box; opacity: 0; } /* Halo del core: respira con el beat */ body.qc-skin-glass .qc-logo-core-halo { transform-origin: center; transform-box: fill-box; animation: qcLogoCoreHalo 2.4s var(--ease-out-expo) infinite; } @keyframes qcLogoCoreHalo { 0%, 100% { transform: scale(0.85); opacity: 0.5; } 50% { transform: scale(1.20); opacity: 1; } } /* Spark: blink ocasional como reflejo de luz */ body.qc-skin-glass .qc-logo-core-spark { animation: qcLogoSpark 5s ease-in-out infinite; } @keyframes qcLogoSpark { 0%, 88%, 100% { opacity: 0.95; transform: scale(1); } 92% { opacity: 1; transform: scale(1.4); } 96% { opacity: 0.6; transform: scale(0.8); } } @keyframes qcLogoPulse { 0% { transform: scale(0.55); opacity: 0; } 20% { opacity: 0.85; } 100% { transform: scale(1.55); opacity: 0; } } /* --- Hex frame: breathing glow (sin rotar — el dial es el que rota) --- */ body.qc-skin-glass .qc-logo-hex { transform-origin: center; transform-box: fill-box; animation: qcLogoHexBreathe 5s var(--ease-out-expo) infinite; } @keyframes qcLogoHexBreathe { 0%, 100% { filter: drop-shadow(0 0 0 color-mix(in srgb, var(--ios-blue) 0%, transparent)); } 50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ios-blue) 55%, transparent)); } } /* --- Outer dial (gear ring): rota lento, da el feel mecánico Steam --- */ body.qc-skin-glass .qc-logo-dial { transform-origin: center; transform-box: fill-box; animation: qcLogoDialSpin 18s linear infinite; } @keyframes qcLogoDialSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* --- Letra Q: shimmer de opacidad (Q "viva") --- */ body.qc-skin-glass .qc-logo-q { animation: qcLogoQGlow 3.2s ease-in-out infinite; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ios-blue) 60%, transparent)); } @keyframes qcLogoQGlow { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* --- Núcleo: respira + brilla --- */ body.qc-skin-glass .qc-logo-core { transform-origin: center; transform-box: fill-box; animation: qcLogoCoreBeat 2.4s var(--ease-out-expo) infinite; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ios-blue) 80%, transparent)); } @keyframes qcLogoCoreBeat { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.10); } } /* --- Partícula orbital: gira alrededor del centro --- */ body.qc-skin-glass .qc-logo-orbit { transform-origin: 20px 20px; /* centro del viewBox 40x40 */ animation: qcLogoOrbit 6s linear infinite; } body.qc-skin-glass .qc-logo-orbit circle { filter: drop-shadow(0 0 3px rgba(157, 196, 255, 0.9)); } @keyframes qcLogoOrbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* --- PS-style logo: solo body breathing + glow pulse + hover scale --- */ body.qc-skin-glass .qc-logo-ps .qc-logo-ps-body { transform-origin: center; transform-box: fill-box; animation: qcPSBodyBreathe 3s var(--ease-out-expo) infinite; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--ios-blue) 45%, transparent)); } @keyframes qcPSBodyBreathe { 0%, 100% { transform: scale(0.98); } 50% { transform: scale(1.02); } } body.qc-skin-glass .qc-logo-ps:hover .qc-logo-glow { animation-duration: 1.8s; } body.qc-skin-glass .qc-logo-ps:hover .qc-logo-ps-body { animation-duration: 1.4s; } body.qc-skin-glass .qc-logo-ps:hover { transform: scale(1.06); transition: transform 280ms var(--ease-spring); } body.qc-skin-glass .qc-logo-ps { transition: transform 280ms var(--ease-spring); } /* --- Hover (logo viejo, mantengo por compat si queda algo) --- */ body.qc-skin-glass .qc-logo-mark:hover .qc-logo-glow { animation-duration: 1.8s; } /* --- Initial scale-in spring (cuando aparece la página) --- */ body.qc-skin-glass .qc-logo-mark { animation: qcLogoEntrance 1.1s var(--ease-spring) both !important; } @keyframes qcLogoEntrance { 0% { opacity: 0; transform: scale(0.4) rotate(-25deg); filter: blur(8px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); } } /* ===================================================================== Landing-mode polish — el sistema nativo ya hace splash al estar en #page-inicio (app.js + styles.css linea 7430+). Aquí solo refinamos el look del trigger flotante existente con vibe glass+iOS. ===================================================================== */ body.qc-skin-glass.landing-mode .landing-sidebar-trigger { background: var(--glass-tint-strong) !important; backdrop-filter: blur(22px) saturate(180%) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; border: 1px solid var(--glass-stroke) !important; border-radius: 999px !important; color: var(--text) !important; padding: 10px 18px 10px 14px !important; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55) !important; font-weight: 500 !important; } body.qc-skin-glass.landing-mode .landing-sidebar-trigger:hover { border-color: color-mix(in srgb, var(--ios-blue) 45%, transparent) !important; color: #fff !important; transform: translateY(-2px) scale(1.03) !important; background: var(--glass-tint-strong) !important; } body.qc-skin-glass.landing-mode .landing-sidebar-trigger svg { color: var(--ios-blue) !important; } /* Hero más grande/centrado en landing-mode (cuando ya está en splash) */ body.qc-skin-glass.landing-mode .qc-hero { text-align: center; } /* ===================================================================== Quantum Hub v3 — Bento welcome (Mission Control style) ===================================================================== */ /* En landing-mode (#page-inicio activo), main.main toma toda la viewport. Centrado del Hub: si NO hay topnav, usamos grid place-items center. Si hay topnav, layout block normal y el hub se centra con margin auto. */ body.qc-skin-glass.landing-mode:not(.qc-topnav-mode) > main.main { display: grid !important; place-items: center; padding: 0; } body.qc-skin-glass.landing-mode:not(.qc-topnav-mode) #page-inicio { padding: 40px 32px !important; max-width: 1240px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: 100vh; box-sizing: border-box; } /* En topnav-mode, el bento centra horizontal con max-width auto-margin. IMPORTANTE: scope con .active para que la regla nativa display:none siga ocultando la página cuando navegás a otra. */ body.qc-skin-glass.qc-topnav-mode #page-inicio.active { padding: 32px 24px !important; max-width: 1280px; width: 100%; margin: 0 auto; display: flex !important; flex-direction: column; gap: 18px; box-sizing: border-box; min-height: calc(100vh - 60px); justify-content: center; } body.qc-skin-glass.qc-topnav-mode #page-inicio:not(.active) { display: none !important; } body.qc-skin-glass .qc-hub { display: flex; flex-direction: column; gap: 20px; width: 100%; margin: auto 0; /* fallback de centrado vertical */ } /* --- TOP BAR: status + greeting + clock --- */ body.qc-skin-glass .qc-hub-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 4px; animation: qcHubBarIn 0.6s var(--ease-out-expo) 0.2s both; } @keyframes qcHubBarIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } body.qc-skin-glass .qc-hub-bar-left { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--glass-text-dim); } body.qc-skin-glass .qc-hub-bar-text strong { color: var(--text); font-weight: 600; margin-left: 4px; } body.qc-skin-glass .qc-hub-bar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--qc-font-mono); } body.qc-skin-glass .qc-hub-clock { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; font-feature-settings: "tnum" 1; } body.qc-skin-glass .qc-hub-date { font-size: 11px; color: var(--glass-text-dim); text-transform: capitalize; letter-spacing: 0.02em; } /* --- BENTO GRID --- */ body.qc-skin-glass .qc-hub-bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: minmax(170px, auto) minmax(170px, auto); grid-template-areas: "hero catalog dolar" "hero activity activity"; gap: 16px; width: 100%; } @media (max-width: 980px) { body.qc-skin-glass .qc-hub-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "hero hero" "catalog dolar" "activity activity" "system system"; } } /* --- TILES base --- */ body.qc-skin-glass .qc-tile { position: relative; padding: 22px 24px; background: var(--glass-tint); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 22px; box-shadow: var(--glass-shadow); overflow: hidden; transform-style: preserve-3d; text-align: left; font-family: inherit; cursor: default; transition: transform 280ms var(--ease-spring), border-color 220ms, box-shadow 280ms; animation: qcTileIn 0.7s var(--ease-out-expo) calc(0.3s + var(--tile-i, 0) * 0.07s) both; } @keyframes qcTileIn { from { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } body.qc-skin-glass .qc-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--glass-edge-light); border-radius: inherit; } body.qc-skin-glass .qc-tile[data-page-link] { cursor: pointer; } body.qc-skin-glass .qc-tile[data-page-link]:hover { transform: translateY(-3px); border-color: var(--glass-stroke-hover); box-shadow: var(--glass-shadow), var(--glass-glow); } body.qc-skin-glass .qc-tile[data-page-link]:active { transform: translateY(-1px) scale(0.99); transition-duration: 100ms; } body.qc-skin-glass .qc-tile-label { font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--glass-text-dim); margin-bottom: 6px; } /* --- HERO TILE (grid-area: hero) --- */ body.qc-skin-glass .qc-tile-hero { grid-area: hero; display: flex; flex-direction: column; gap: 10px; padding: 32px; background: linear-gradient(135deg, color-mix(in srgb, var(--ios-blue) 10%, transparent) 0%, var(--glass-tint) 50%, rgba(0, 70, 168, 0.14) 100%); border-color: color-mix(in srgb, var(--ios-blue) 22%, transparent); } body.qc-skin-glass .qc-tile-hero > * { position: relative; z-index: 1; } body.qc-skin-glass .qc-tile-hero-logo { width: 80px; height: 80px; margin: 0 0 8px; } body.qc-skin-glass .qc-tile-hero-eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(157, 196, 255, 0.85); } body.qc-skin-glass .qc-tile-hero-title { font-family: var(--qc-font-sans); font-size: clamp(32px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--text); background: linear-gradient(135deg, #ffffff 0%, #79a8ff 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } body.qc-skin-glass .qc-tile-hero-tagline { font-size: 14px; line-height: 1.5; color: var(--glass-text-dim); max-width: 480px; margin-top: 2px; } body.qc-skin-glass .qc-tile-hero-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), color-mix(in srgb, var(--ios-blue) 92%, transparent) 30%, var(--ios-blue) 90%); border: 1px solid color-mix(in srgb, var(--ios-blue) 40%, transparent); border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; width: fit-content; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 14px 30px -14px color-mix(in srgb, var(--ios-blue) 65%, transparent); transition: transform 200ms var(--ease-spring); } body.qc-skin-glass .qc-tile-hero:hover .qc-tile-hero-cta { transform: translateX(3px) scale(1.03); } /* --- STAT tiles --- */ body.qc-skin-glass .qc-tile-stat:nth-of-type(2) { grid-area: catalog; } body.qc-skin-glass .qc-tile-stat:nth-of-type(3) { grid-area: dolar; } body.qc-skin-glass .qc-tile-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; } body.qc-skin-glass .qc-tile-big { font-family: var(--qc-font-sans); font-size: clamp(32px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--text); font-feature-settings: "tnum" 1; margin: 4px 0 2px; } body.qc-skin-glass .qc-tile-trend { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: color-mix(in srgb, var(--glass-ok) 92%, transparent); margin-top: 6px; } body.qc-skin-glass .qc-tile-trend svg { color: color-mix(in srgb, var(--glass-ok) 92%, transparent); } body.qc-skin-glass .qc-tile-sparkline { margin-top: auto; height: 28px; opacity: 0.85; } body.qc-skin-glass .qc-tile-sparkline svg { width: 100%; height: 100%; } /* --- ACTIVITY tile --- */ body.qc-skin-glass .qc-tile-activity { grid-area: activity; display: flex; flex-direction: column; gap: 10px; } body.qc-skin-glass .qc-tile-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } body.qc-skin-glass .qc-tile-live { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: var(--glass-danger); background: color-mix(in srgb, var(--glass-danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--glass-danger) 30%, transparent); padding: 3px 8px; border-radius: 999px; animation: qcLiveBlink 2s ease-in-out infinite; } @keyframes qcLiveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } body.qc-skin-glass .qc-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } body.qc-skin-glass .qc-activity-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.04); transition: background 160ms; } body.qc-skin-glass .qc-activity-list li:hover { background: rgba(255, 255, 255, 0.06); } body.qc-skin-glass .qc-activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } body.qc-skin-glass .qc-activity-dot.ok { background: var(--glass-ok); box-shadow: 0 0 6px color-mix(in srgb, var(--glass-ok) 60%, transparent); } body.qc-skin-glass .qc-activity-dot.warn { background: var(--glass-warn); box-shadow: 0 0 6px color-mix(in srgb, var(--glass-warn) 60%, transparent); } body.qc-skin-glass .qc-activity-dot.err { background: var(--glass-err); box-shadow: 0 0 6px color-mix(in srgb, var(--glass-err) 60%, transparent); } body.qc-skin-glass .qc-activity-text { flex: 1; font-size: 13px; color: var(--text); font-weight: 500; } body.qc-skin-glass .qc-activity-time { font-size: 11.5px; color: var(--glass-text-dim); font-family: var(--qc-font-mono); flex-shrink: 0; } /* --- SYSTEM tile (al lado de actividad en mobile) --- */ body.qc-skin-glass .qc-tile-system { grid-area: system; display: none; /* visible solo en mobile (<980px) */ } @media (max-width: 980px) { body.qc-skin-glass .qc-tile-system { display: flex; flex-direction: column; gap: 10px; } } body.qc-skin-glass .qc-system-rows { display: flex; flex-direction: column; gap: 8px; } body.qc-skin-glass .qc-system-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } body.qc-skin-glass .qc-system-row:last-child { border-bottom: none; } body.qc-skin-glass .qc-mono { font-family: var(--qc-font-mono); font-size: 12px; color: var(--glass-text-dim); } body.qc-skin-glass .qc-pill { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; } body.qc-skin-glass .qc-pill.ok { background: color-mix(in srgb, var(--glass-ok) 14%, transparent); color: var(--glass-ok); border: 1px solid color-mix(in srgb, var(--glass-ok) 30%, transparent); } body.qc-skin-glass .qc-pill.warn { background: color-mix(in srgb, var(--glass-warn) 14%, transparent); color: var(--glass-warn); border: 1px solid color-mix(in srgb, var(--glass-warn) 30%, transparent); } /* --- QUICK ACTIONS chips --- */ body.qc-skin-glass .qc-hub-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 980px) { body.qc-skin-glass .qc-hub-actions { grid-template-columns: repeat(2, 1fr); } } body.qc-skin-glass .qc-action-chip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--glass-tint); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--glass-stroke); border-radius: 16px; text-decoration: none; color: var(--text); cursor: pointer; transition: transform 220ms var(--ease-spring), border-color 200ms, background 200ms, box-shadow 220ms; animation: qcTileIn 0.6s var(--ease-out-expo) calc(0.7s + var(--chip-i, 0) * 0.06s) both; position: relative; overflow: hidden; } body.qc-skin-glass .qc-action-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ios-blue) 35%, transparent); background: var(--glass-tint-strong); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--ios-blue) 45%, transparent); } body.qc-skin-glass .qc-chip-text { min-width: 0; } body.qc-skin-glass .qc-chip-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } body.qc-skin-glass .qc-chip-desc { font-size: 11.5px; color: var(--glass-text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* === Hero v2 — Welcome panel "noble" (LEGACY, no se renderiza en hub) === */ body.qc-skin-glass .qc-hero-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ios-blue) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ios-blue) 28%, transparent); color: rgba(157, 196, 255, 0.95); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 22px; animation: qcStatusPop 0.7s var(--ease-spring) 0.4s both; } @keyframes qcStatusPop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } body.qc-skin-glass .qc-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--glass-ok); box-shadow: 0 0 8px var(--glass-ok), 0 0 14px color-mix(in srgb, var(--glass-ok) 50%, transparent); animation: qcStatusBlink 2s ease-in-out infinite; } @keyframes qcStatusBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } body.qc-skin-glass .qc-hero-greeting { font-size: 18px; font-weight: 500; color: var(--glass-text-dim); letter-spacing: -0.005em; margin-bottom: 6px; animation: qcFadeUp 0.8s var(--ease-out-expo) 0.6s both; } body.qc-skin-glass .qc-greet-name { display: inline-block; } @keyframes qcFadeUp { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } 60% { filter: blur(0); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } body.qc-skin-glass .qc-hero-ctas { animation: qcFadeUp 0.9s var(--ease-out-expo) 1.35s both; } /* ===================================================================== Modal de Ajustes (settings) — estética iOS Settings ===================================================================== */ .qc-settings-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); display: grid; place-items: center; padding: 24px; animation: qcSettingsOverlayIn 220ms ease; } .qc-settings-overlay[hidden] { display: none !important; } @keyframes qcSettingsOverlayIn { from { opacity: 0; } to { opacity: 1; } } .qc-settings-modal { position: relative; width: 100%; max-width: 460px; padding: 32px 28px 28px; background: var(--glass-tint-strong); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid var(--glass-stroke); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.10); color: var(--text); font-family: var(--qc-font-sans); animation: qcSettingsModalIn 380ms var(--ease-spring); } @keyframes qcSettingsModalIn { from { opacity: 0; transform: scale(0.94) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .qc-settings-modal h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--text); } .qc-settings-sub { margin: 0 0 22px; font-size: 13.5px; color: var(--glass-text-dim); } .qc-settings-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: none; background: rgba(255, 255, 255, 0.08); color: var(--text); font-size: 22px; font-weight: 300; line-height: 1; border-radius: 50%; cursor: pointer; transition: background 160ms, transform 160ms var(--ease-spring); } .qc-settings-close:hover { background: rgba(255, 255, 255, 0.18); transform: rotate(90deg); } .qc-settings-section { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 4px 0; margin-bottom: 14px; } .qc-settings-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--glass-text-dim); padding: 14px 16px 8px; } .qc-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--glass-stroke); cursor: pointer; user-select: none; transition: background 140ms; } .qc-toggle-row:first-of-type { border-top: none; } .qc-toggle-row:hover { background: rgba(255, 255, 255, 0.04); } .qc-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .qc-toggle-label { font-size: 14.5px; font-weight: 500; color: var(--text); } .qc-toggle-desc { font-size: 12px; color: var(--glass-text-dim); } /* Switch iOS-style */ .qc-switch { position: relative; display: inline-block; width: 50px; height: 30px; flex-shrink: 0; } .qc-switch input { opacity: 0; width: 0; height: 0; } .qc-switch-track { position: absolute; inset: 0; background: rgba(120, 120, 128, 0.32); border-radius: 999px; cursor: pointer; transition: background 250ms ease; } .qc-switch-track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #ffffff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30); transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1); } .qc-switch input:checked + .qc-switch-track { background: var(--ios-blue); } .qc-switch input:checked + .qc-switch-track::before { transform: translateX(20px); } /* ===================================================================== No-select en UI/chrome (mejora drag/swipe), select en data copiable ===================================================================== */ /* Default OFF en superficies de navegación/UI */ body.qc-skin-glass .qc-topnav, body.qc-skin-glass .qc-topnav *, body.qc-skin-glass .qc-subnav, body.qc-skin-glass .qc-subnav *, body.qc-skin-glass aside.sidebar, body.qc-skin-glass aside.sidebar *, body.qc-skin-glass .qc-hub-bar, body.qc-skin-glass .qc-hub-bar *, body.qc-skin-glass .qc-hub-actions, body.qc-skin-glass .qc-hub-actions *, body.qc-skin-glass .qc-tile-label, body.qc-skin-glass .qc-tile-hero-eyebrow, body.qc-skin-glass .qc-tile-hero-cta, body.qc-skin-glass .qc-tile-hero-cta *, body.qc-skin-glass .qc-action-chip, body.qc-skin-glass .qc-action-chip *, body.qc-skin-glass .qc-chip-title, body.qc-skin-glass .qc-chip-desc, body.qc-skin-glass .qc-tile-live, body.qc-skin-glass .qc-tile-trend, body.qc-skin-glass button, body.qc-skin-glass .btn, body.qc-skin-glass .btn-primary, body.qc-skin-glass .btn-secondary, body.qc-skin-glass .btn-ghost, body.qc-skin-glass .nav-item, body.qc-skin-glass .nav-item *, body.qc-skin-glass .nav-group-label, body.qc-skin-glass .compras-tab, body.qc-skin-glass .compras-tabs, body.qc-skin-glass .compras-tabs *, body.qc-skin-glass .compras-filters, body.qc-skin-glass .compras-filters *, body.qc-skin-glass .wizard-steps, body.qc-skin-glass .wizard-steps *, body.qc-skin-glass .wizard-toolbar, body.qc-skin-glass .wizard-toolbar *, body.qc-skin-glass .wizard-nav, body.qc-skin-glass .wizard-nav *, body.qc-skin-glass .wizard-summary-head, body.qc-skin-glass .wizard-step-header, body.qc-skin-glass .wizard-step-header *, body.qc-skin-glass .topbar, body.qc-skin-glass .topbar *, body.qc-skin-glass .mob-topbar, body.qc-skin-glass .mob-topbar *, body.qc-skin-glass .qfab-wrap, body.qc-skin-glass .qfab-wrap *, body.qc-skin-glass .aria-fab, body.qc-skin-glass .qc-menu-trigger, body.qc-skin-glass .landing-sidebar-trigger, body.qc-skin-glass .qc-settings-modal h2, body.qc-skin-glass .qc-settings-section-title, body.qc-skin-glass .qc-toggle-row, body.qc-skin-glass .qc-toggle-row *, body.qc-skin-glass .qc-tile-hero-tagline, body.qc-skin-glass .qc-hero-status, body.qc-skin-glass .qc-hero-status *, body.qc-skin-glass .qc-hero-greeting, body.qc-skin-glass .qc-pillar, body.qc-skin-glass .qc-pillar *, body.qc-skin-glass .qc-cta-primary, body.qc-skin-glass .qc-cta-secondary, body.qc-skin-glass .ap-table thead, body.qc-skin-glass .ap-table thead *, body.qc-skin-glass .ap-row-supergroup, body.qc-skin-glass .ap-row-supergroup *, body.qc-skin-glass .ap-row-serie, body.qc-skin-glass .ap-row-serie *, body.qc-skin-glass .modal-head, body.qc-skin-glass .modal-head * { -webkit-user-select: none !important; user-select: none !important; } /* RE-habilitar text-select en data copiable */ body.qc-skin-glass .qc-tile-big, body.qc-skin-glass .qc-activity-text, body.qc-skin-glass .qc-activity-time, body.qc-skin-glass .compras-prod-name, body.qc-skin-glass .compras-precio, body.qc-skin-glass .compras-precio-usd, body.qc-skin-glass .compras-cat, body.qc-skin-glass .compras-table tbody, body.qc-skin-glass .compras-table tbody *, body.qc-skin-glass .ap-table tbody td, body.qc-skin-glass .ap-table tbody td *, body.qc-skin-glass .ap-col-modelo, body.qc-skin-glass .qc-hub-clock, body.qc-skin-glass .qc-hub-date, body.qc-skin-glass .qc-system-row, body.qc-skin-glass .qc-mono, body.qc-skin-glass input, body.qc-skin-glass textarea, body.qc-skin-glass [contenteditable="true"], body.qc-skin-glass .modal-body, body.qc-skin-glass .modal-body *, body.qc-skin-glass .wizard-results, body.qc-skin-glass .wizard-results *, body.qc-skin-glass .wizard-summary-list, body.qc-skin-glass .wizard-summary-list *, body.qc-skin-glass .wizard-card, body.qc-skin-glass .wizard-card *, body.qc-skin-glass .panel-body, body.qc-skin-glass .panel-body *, body.qc-skin-glass .qc-pedido-num, body.qc-skin-glass .qc-sku, body.qc-skin-glass code, body.qc-skin-glass pre, body.qc-skin-glass kbd, body.qc-skin-glass [data-selectable="true"] { -webkit-user-select: text !important; user-select: text !important; } /* ==================================================================== v2.11.21 — Tarjetas RMA / Garantías con efecto glassy Mismo patrón que .user-card pero ajustado al ancho de los kanbans. ==================================================================== */ body.qc-skin-glass .gar-card { background: var(--glass-tint) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; border: 1px solid var(--glass-stroke) !important; border-radius: 14px !important; padding: 14px 16px !important; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.35) !important; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1) !important; animation: garCardIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } /* Glow sutil interno (capa decorativa que activa hover) */ body.qc-skin-glass .gar-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, color-mix(in srgb, var(--ios-blue) 10%, transparent) 0%, transparent 55%); opacity: 0; transition: opacity 220ms ease; pointer-events: none; border-radius: inherit; } body.qc-skin-glass .gar-card:hover { border-color: rgba(93, 185, 255, 0.40) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px -8px color-mix(in srgb, var(--ios-blue) 25%, transparent), 0 8px 28px -10px rgba(0, 0, 0, 0.45) !important; transform: translateY(-3px); } body.qc-skin-glass .gar-card:hover::before { opacity: 1; } body.qc-skin-glass .gar-card > * { position: relative; z-index: 1; } /* Numero pedido en cyan brillante */ body.qc-skin-glass .gar-card-num { background: linear-gradient(180deg, var(--ios-blue-light) 0%, var(--ios-blue) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Highlight box interno con glassmorphism propio */ body.qc-skin-glass .gar-card-hl { background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 10px !important; } /* Días pill con tint sutil */ body.qc-skin-glass .gar-card-dias { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.qc-skin-glass .gar-card-dias.warn { background: color-mix(in srgb, var(--glass-warn) 12%, transparent) !important; border-color: color-mix(in srgb, var(--glass-warn) 35%, transparent) !important; } body.qc-skin-glass .gar-card-dias.alert { background: color-mix(in srgb, var(--glass-critical) 14%, transparent) !important; border-color: color-mix(in srgb, var(--glass-critical) 40%, transparent) !important; } /* Animación de entrada de cada card. Stagger via --gar-card-i (set por JS) */ @keyframes garCardIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } body.qc-skin-glass .gar-card { animation-delay: calc(var(--gar-card-i, 0) * 30ms); } /* Wrapper kanban con scroll suave */ body.qc-skin-glass .gar-cards-grid { scroll-behavior: smooth; } /* ----- Reduced motion --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.qc-skin-glass *, body.qc-skin-glass *::before, body.qc-skin-glass *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }