/* * modern.css — F109 v5 — INTECAP Norte Design System 2026 * * FILOSOFÍA: card centrado brand-violeta con pulido pro. Login preserva * textos originales ("Cerebro Administrativo", "PIN DE SEGURIDAD", * "Todos los portales"). Cambia SOLO el look — spacing, tipografía, * sombras multicapa, gradient sutil de fondo, glow morado en logo. * * CONTENIDO: * 1. TOKENS — neutrales zinc, brand primary, tipografía, spacing, motion * 2. DARK MODE — via [data-theme="dark"] sobre * 3. UTILITIES — layout, typography, motion * 4. LOGIN v4 — card centrado sobre fondo neutro con dot grid sutil * 5. BUTTONS v2 — sólidos, sin shine * 6. CARDS — hover lift sutil, bento grid ready * 7. FORMS — labels claros, focus rings suaves * 8. THEME TOGGLE — botón flotante circular * * GARANTÍA: aditivo. NO borra clases viejas. IDs HTML preservados. */ /* ============================================================ * 1. TOKENS * ============================================================ */ :root { /* ── Paleta neutrales (zinc-like Linear) ── */ --n-50: #fafafa; --n-100: #f4f4f5; --n-150: #ececee; --n-200: #e4e4e7; --n-300: #d4d4d8; --n-400: #a1a1aa; --n-500: #71717a; --n-600: #52525b; --n-700: #3f3f46; --n-800: #27272a; --n-900: #18181b; --n-950: #09090b; /* ── Paleta brand primary (violet → indigo) ── */ --p-50: #f5f3ff; --p-100: #ede9fe; --p-200: #ddd6fe; --p-300: #c4b5fd; --p-400: #a78bfa; --p-500: #8b5cf6; --p-600: #7c3aed; --p-700: #6d28d9; --p-800: #5b21b6; --p-900: #4c1d95; --p-gradient: #8b5cf6; --p-gradient-soft: #f5f3ff; /* ── Accent (cyan → sky) ── */ --a-400: #22d3ee; --a-500: #06b6d4; --a-600: #0891b2; --a-gradient: #22d3ee; /* ── Semánticos ── */ --success-500: #10b981; --success-600: #059669; --success-bg: #ecfdf5; --warning-500: #f59e0b; --warning-600: #d97706; --warning-bg: #fffbeb; --danger-500: #ef4444; --danger-600: #dc2626; --danger-bg: #fef2f2; /* ── Superficies semánticas (light por default) ── */ --surface-0: #ffffff; --surface-1: #fafafa; --surface-2: #f4f4f5; --surface-3: #ececee; --border-1: #e4e4e7; --border-2: #d4d4d8; --overlay: rgba(9, 9, 11, 0.6); --text-1: #09090b; --text-2: #27272a; --text-3: #52525b; --text-4: #71717a; --text-5: #a1a1aa; /* ── Tipografía ── */ --font-sans: 'Sora', system-ui, -apple-system, sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px; --fs-5xl: 48px; --fs-6xl: 60px; --fw-r: 400; --fw-m: 500; --fw-sb: 600; --fw-b: 700; --fw-eb: 800; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-widest: 0.08em; /* ── Spacing scale (baseline 4) ── */ --s-0: 0; --s-0-5: 2px; --s-1: 4px; --s-1-5: 6px; --s-2: 8px; --s-2-5: 10px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ── Radios ── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-3xl: 24px; --r-full: 999px; /* ── Sombras (multicapa Linear-style) ── */ --sh-xs: 0 1px 2px rgba(9, 9, 11, 0.05); --sh-sm: 0 1px 2px rgba(9, 9, 11, 0.06), 0 1px 3px rgba(9, 9, 11, 0.04); --sh-md: 0 4px 8px -2px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.04); --sh-lg: 0 12px 20px -4px rgba(9, 9, 11, 0.10), 0 4px 8px -2px rgba(9, 9, 11, 0.04); --sh-xl: 0 24px 40px -8px rgba(9, 9, 11, 0.14), 0 8px 16px -4px rgba(9, 9, 11, 0.06); --sh-2xl: 0 40px 80px -12px rgba(9, 9, 11, 0.22), 0 16px 32px -8px rgba(9, 9, 11, 0.08); /* Colored glows */ --glow-primary: 0 8px 32px -4px rgba(139, 92, 246, 0.35); --glow-accent: 0 8px 32px -4px rgba(6, 182, 212, 0.35); --glow-success: 0 8px 32px -4px rgba(16, 185, 129, 0.35); --glow-danger: 0 8px 32px -4px rgba(239, 68, 68, 0.35); /* Ring focus */ --ring-primary: 0 0 0 4px rgba(139, 92, 246, 0.15); --ring-danger: 0 0 0 4px rgba(239, 68, 68, 0.15); /* ── Motion ── */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 100ms; --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-slower: 600ms; /* ── Z-index scale ── */ --z-base: 0; --z-elev: 10; --z-sticky: 100; --z-header: 200; --z-sidebar: 300; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; --z-popover: 1200; --z-tooltip: 1300; } /* ============================================================ * 2. DARK MODE * ============================================================ */ html[data-theme="dark"] { --surface-0: #0a0a0b; --surface-1: #121214; --surface-2: #1a1a1d; --surface-3: #232327; --border-1: #27272a; --border-2: #3f3f46; --overlay: rgba(0, 0, 0, 0.75); --text-1: #fafafa; --text-2: #e4e4e7; --text-3: #a1a1aa; --text-4: #71717a; --text-5: #52525b; --p-gradient-soft: #1e1b4b; --success-bg: rgba(16, 185, 129, 0.1); --warning-bg: rgba(245, 158, 11, 0.1); --danger-bg: rgba(239, 68, 68, 0.1); /* Sombras más marcadas en oscuro */ --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); --sh-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --sh-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.55), 0 4px 8px -2px rgba(0, 0, 0, 0.3); --sh-xl: 0 24px 40px -8px rgba(0, 0, 0, 0.65), 0 8px 16px -4px rgba(0, 0, 0, 0.4); /* Rebind app.css legacy tokens al scheme dark */ --ink: var(--text-1); --ink-light: var(--text-2); --muted: var(--text-3); --subtle: var(--text-4); --line: var(--border-1); --bg: var(--surface-1); --bg-card: var(--surface-2); color-scheme: dark; } html { transition: background-color var(--dur-base) var(--ease-standard); } body, .card, .config-card, .modal-content, .sol-card, .sidebar { transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } /* ============================================================ * 3. UTILITIES * ============================================================ */ .stack-v { display: flex; flex-direction: column; } .stack-h { display: flex; flex-direction: row; align-items: center; } .stack-1 { gap: var(--s-1); } .stack-2 { gap: var(--s-2); } .stack-3 { gap: var(--s-3); } .stack-4 { gap: var(--s-4); } .stack-6 { gap: var(--s-6); } .stack-8 { gap: var(--s-8); } .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-base { font-size: var(--fs-base); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } .text-2xl { font-size: var(--fs-2xl); } .text-3xl { font-size: var(--fs-3xl); } .text-4xl { font-size: var(--fs-4xl); letter-spacing: var(--tracking-tight); } .text-5xl { font-size: var(--fs-5xl); letter-spacing: var(--tracking-tight); } .font-r { font-weight: var(--fw-r); } .font-m { font-weight: var(--fw-m); } .font-sb { font-weight: var(--fw-sb); } .font-b { font-weight: var(--fw-b); } .font-eb { font-weight: var(--fw-eb); } .text-muted { color: var(--text-3); } .text-subtle { color: var(--text-4); } .text-brand { background: var(--p-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ============================================================ * 4. LOGIN v6 — DARK RADIAL · VIMEDIA GIGANTE · PIN NEÓN * Fullscreen violeta profundo con orbes blur y deco vector. * Wordmark "VIMEDIA" en Montserrat 900 con entrada tipo escritura. * PIN segmentado (6 celdas glass) con puntos neón palpitantes. * Botón Entrar pill glass. Todo con motion staggered al cargar. * IDs preservados: #login-view, #login-logo-btn, #login-form-wrap, * #login-pin (hidden), #btn-login. JS de F74 intacto. * ============================================================ */ /* Base fullscreen — VIOLETA BRAND presente (no negro) * Base #2a1668 (violeta profundo pero visiblemente brand) * + radial glow #5e2ced arriba + toque cyan sutil abajo * Tipografía Inter con font-feature-settings (sello propuesta 2026) */ .login-screen-v2 { position: fixed; inset: 0; z-index: var(--z-header); font-family: 'Geist', 'Inter', 'Sora', system-ui, -apple-system, sans-serif; font-feature-settings: "cv11","ss01"; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ede9fe; background: radial-gradient(80vw 60vh at 50% 20%, rgba(94, 44, 237, .5), transparent 65%), radial-gradient(60vw 45vh at 85% 90%, rgba(0, 218, 252, .16), transparent 70%), #2a1668; overflow: hidden; isolation: isolate; } .login-screen-v2.hidden { display: none !important; } /* Elementos legacy (mockups previos): ocultar por seguridad */ .login-screen-v2 .login-bg-orbs, .login-screen-v2 > .login-hero-content, .login-screen-v2 .login-title, .login-screen-v2 .login-subtitle, .login-screen-v2 .login-heading, .login-screen-v2 .login-pin-row, .login-screen-v2 .login-pin-label, .login-screen-v2 .login-pin-hint, .login-screen-v2 .login-helper, .login-screen-v2 .login-footer { display: none !important; } /* Capas de fondo — minimal, solo 2 blobs (mesh) */ .login-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* 2 blobs mesh sutiles animados (patrón welcome propuesta 2026) */ .login-orb { position: absolute; border-radius: 50%; filter: blur(120px); animation: orbFloat 28s ease-in-out infinite; } .login-orb-1 { width: 55vw; height: 55vw; top: -18%; left: -12%; background: #5e2ced; opacity: .4; } .login-orb-2 { width: 50vw; height: 50vw; bottom: -18%; right: -12%; background: #00dafc; opacity: .22; animation-delay: -14s; } @keyframes orbFloat { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(6vw,-4vh) scale(1.12); } 66% { transform: translate(-4vw,3vh) scale(.92); } } /* Elementos legacy — ocultos en v9 (limpieza) */ .login-deco, .login-particles, .login-particle { display: none !important; } /* Aura del logo (respiración loop) */ @keyframes logoAura { 0%, 100% { opacity: .38; transform: scale(1); } 50% { opacity: .58; transform: scale(1.1); } } /* Contenido central */ .login-screen-v2 .login-content { position: relative; z-index: 1; width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-8) var(--s-6); gap: var(--s-4); box-sizing: border-box; text-align: center; } /* ═══ LOGO cuadrado gradient brand (estilo propuesta 2026) ═══ * 140px, radius 40px. Gradient #5e2ced → #00dafc. Aura blur detrás. * Highlight glass superior (efecto cristal). ISOTIPO invertido a blanco. * Breathe animation loop. */ .login-screen-v2 .login-logo-btn { position: relative; width: 140px; height: 140px; border-radius: 40px; background: linear-gradient(135deg, #5e2ced 0%, #00dafc 100%); border: none; color: #fff; cursor: pointer; display: grid; place-items: center; font-family: inherit; overflow: hidden; padding: 0; opacity: 0; transform: translateY(40px) scale(.6); animation: logoIn 1.1s .2s cubic-bezier(.34,1.56,.64,1) forwards, logoBreath 5s ease-in-out 1.4s infinite; transition: transform .35s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 0 0 8px rgba(255,255,255,.06), 0 32px 64px -16px rgba(94, 44, 237, .55), 0 12px 28px -6px rgba(0, 218, 252, .35); } .login-screen-v2 .login-logo-btn:hover { transform: translateY(-4px) scale(1.02); } .login-screen-v2 .login-logo-btn:active { transform: translateY(0) scale(.98); } /* Aura blur DETRÁS (::before) — respira en loop */ .login-screen-v2 .login-logo-btn::before { content: ''; position: absolute; inset: -20px; border-radius: 52px; background: #5e2ced; filter: blur(36px); opacity: .38; z-index: -1; animation: logoAura 5s ease-in-out 1.4s infinite; pointer-events: none; } /* Highlight glass superior (::after) — reflejo cristal */ .login-screen-v2 .login-logo-btn::after { content: ''; position: absolute; left: 18%; right: 18%; top: 10%; height: 36%; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); border-radius: 26px 26px 50% 50%; pointer-events: none; z-index: 2; } .login-screen-v2 .login-logo-btn .login-logo-ring { display: none; } .login-screen-v2 .login-logo-btn .login-logo-img { width: 66%; height: 66%; object-fit: contain; position: relative; z-index: 1; filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0,0,0,.18)); } /* Fallback default: ISOTIPO real invertido a blanco */ .login-screen-v2 .login-logo-btn .login-logo-default-img { width: 66%; height: 66%; object-fit: contain; position: relative; z-index: 1; filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0,0,0,.18)); } /* Compat con versiones previas — si algún deploy tiene el span, hacerlo invisible */ .login-screen-v2 .login-logo-btn .login-logo-default { color: #fff; display: none; } /* ═══ WORDMARK VIMEDIA — Montserrat 900, letra por letra ═══ */ .login-wordmark { font-family: 'Geist', 'Inter', 'Montserrat', 'Sora', sans-serif; font-weight: 900; font-size: clamp(56px, 10vw, 128px); letter-spacing: -0.04em; color: #fff; margin: 0; line-height: 0.95; text-shadow: 0 0 24px rgba(94, 44, 237, .55), 0 0 60px rgba(94, 44, 237, .3), 0 0 90px rgba(0, 218, 252, .18); display: inline-flex; gap: 0; user-select: none; } .wm-l { display: inline-block; opacity: 0; transform: translateY(30px) scale(.85); filter: blur(8px); animation: typeIn .5s cubic-bezier(.5,-.2,.3,1.4) forwards; will-change: transform, opacity, filter; } /* Letras acento del wordmark (M+E) — gradient text violeta→cyan */ .wm-accent { background: #a78bfa; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .wm-l1 { animation-delay: .55s; } .wm-l2 { animation-delay: .63s; } .wm-l3 { animation-delay: .71s; } .wm-l4 { animation-delay: .79s; } .wm-l5 { animation-delay: .87s; } .wm-l6 { animation-delay: .95s; } .wm-l7 { animation-delay: 1.03s; } /* Línea acento debajo del wordmark */ .login-accent-line { display: block; width: 0; height: 1.5px; background: linear-gradient(90deg, transparent, #a78bfa 50%, transparent); opacity: 0; margin-top: 4px; animation: drawLine .55s 1.15s cubic-bezier(.65,0,.35,1) forwards; } /* Hint "Ingresá tu PIN" */ .login-hint { font-size: 14px; font-weight: 500; color: #e9d5ff; letter-spacing: 1px; margin: 0; opacity: 0; transform: translateY(20px); animation: slideUp .5s 1.3s ease-out forwards; } /* Form wrap */ .login-screen-v2 .login-form-wrap { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 24px; opacity: 1 !important; transform: none !important; pointer-events: auto !important; margin-top: 8px; } /* ═══ PIN pill único glass con shimmer tipo escritura ═══ */ .pin-shell { position: relative; width: 100%; max-width: 420px; opacity: 0; transform: translateY(20px); animation: cellIn .55s 1.5s cubic-bezier(.2,.8,.2,1) forwards; } /* Input pill largo, glass */ .pin-input-single { width: 100%; height: 64px; border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border: 1.5px solid rgba(196, 181, 253, .28); color: #fff; caret-color: #00dafc; font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: 10px; text-align: center; outline: none; padding: 0 var(--s-6); box-sizing: border-box; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 20px 40px -12px rgba(26, 16, 61, .55), inset 0 1px 0 rgba(255,255,255,.28); transition: border-color .35s cubic-bezier(.2,.8,.2,1), background .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1); position: relative; z-index: 1; } .pin-input-single::placeholder { color: transparent; } .pin-input-single::-webkit-input-placeholder { color: transparent; } .pin-input-single::-moz-placeholder { color: transparent; opacity: 1; } /* Focus: borde violeta brillante + ring cyan + glow */ .pin-input-single:focus { border-color: rgba(196, 181, 253, .8); background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); box-shadow: 0 0 0 4px rgba(94, 44, 237, .28), 0 0 30px rgba(0, 218, 252, .22), inset 0 1px 0 rgba(255,255,255,.35); } /* Placeholder shimmer — dots que "esperan escritura" con onda violeta→cyan */ .pin-placeholder-shimmer { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; text-align: center; font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: 10px; pointer-events: none; z-index: 2; background: rgba(196, 181, 253, .35); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmerWave 2.8s linear infinite; transition: opacity .35s cubic-bezier(.2,.8,.2,1); } /* Apagar shimmer cuando el input está focused o tiene valor */ .pin-input-single:focus ~ .pin-placeholder-shimmer, .pin-input-single.has-value ~ .pin-placeholder-shimmer { opacity: 0; } /* ═══ BOTÓN Entrar — sólido gradient brand (estilo propuesta oficial) ═══ */ .login-screen-v2 .login-submit { border: none; cursor: pointer; background: linear-gradient(135deg, #5e2ced 0%, #7c3aed 100%); color: #fff; padding: 0 var(--s-8); border-radius: 999px; font-family: 'Geist', 'Inter', 'Sora', sans-serif; font-weight: 700; font-size: 15px; height: 54px; min-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: -0.01em; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 12px 32px -8px rgba(94, 44, 237, .55), 0 4px 10px rgba(94, 44, 237, .3); opacity: 0; transform: translateY(40px); animation: btnIn .6s 1.95s cubic-bezier(.34,1.56,.64,1) forwards; transition: all .35s cubic-bezier(.2,.8,.2,1); } .login-screen-v2 .login-submit::before { content: ''; position: absolute; top: 1px; left: 3%; right: 3%; height: 42%; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.32), transparent); pointer-events: none; } .login-screen-v2 .login-submit:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 20px 44px -8px rgba(94, 44, 237, .65), 0 8px 16px rgba(94, 44, 237, .4); } .login-screen-v2 .login-submit:active { transform: translateY(0); } .login-screen-v2 .login-submit span { position: relative; z-index: 1; } /* ═══ Link "Todos los portales" — chip glass debajo del botón ═══ */ .login-back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(196, 181, 253, .18); color: #ede9fe; text-decoration: none; font-family: 'Geist', 'Inter', 'Sora', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transform: translateY(20px); animation: slideUp .5s 2.2s cubic-bezier(.2,.8,.2,1) forwards; transition: all .3s cubic-bezier(.2,.8,.2,1); margin-top: 4px; } .login-back:hover { background: rgba(255, 255, 255, .12); border-color: rgba(196, 181, 253, .35); color: #fff; transform: translateY(-2px); } .login-back i { font-size: 11px; opacity: .8; } /* ═══ KEYFRAMES DEL LOGIN v6 ═══ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes logoIn { from { opacity: 0; transform: translateY(40px) scale(.6); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes typeIn { 0% { opacity: 0; transform: translateY(30px) scale(.85); filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes drawLine { from { width: 0; opacity: 0; } to { width: 200px; opacity: .7; } } @keyframes cellIn { from { opacity: 0; transform: translateY(20px) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes btnIn { 0% { opacity: 0; transform: translateY(40px); } 60% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes neonPulse { 0%, 100% { opacity: .85; box-shadow: 0 0 6px #c4b5fd, 0 0 12px #a78bfa, 0 0 24px rgba(167,139,250,.55); } 50% { opacity: 1; box-shadow: 0 0 8px #e9d5ff, 0 0 20px #c4b5fd, 0 0 40px rgba(167,139,250,.85); } } @keyframes shimmerWave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* orbFloat + bgDrift ya definidos arriba en v9 (o eliminados por limpieza) */ @keyframes logoBreath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(0) scale(1.04); } } /* Reduced motion — respetar prefer-reduced */ @media (prefers-reduced-motion: reduce) { .login-screen-v2 *, .login-screen-v2 *::before, .login-screen-v2 *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } .wm-l { opacity: 1; transform: none; filter: none; } .login-accent-line { opacity: .7; width: 200px; } .login-hint, .pin-shell, .login-screen-v2 .login-submit, .login-screen-v2 .login-logo-btn { opacity: 1; transform: none; } .pin-placeholder-shimmer { animation: none; } .login-particle { display: none; } } /* Mobile */ @media (max-width: 600px) { .login-screen-v2 .login-content { padding: var(--s-8) var(--s-4); gap: var(--s-3); } .login-wordmark { font-size: clamp(52px, 17vw, 84px); letter-spacing: -0.045em; } .login-screen-v2 .login-logo-btn { width: 104px; height: 104px; border-radius: 30px; } .login-screen-v2 .login-logo-btn::after { border-radius: 20px 20px 50% 50%; } .pin-shell { max-width: 100%; } .pin-input-single { height: 58px; font-size: 20px; letter-spacing: 8px; border-radius: 29px; } .pin-placeholder-shimmer { font-size: 20px; letter-spacing: 8px; } .login-screen-v2 .login-submit { min-width: 200px; font-size: 14px; height: 50px; } } /* ============================================================ * 5. BUTTONS v2 — gradient + shine, variantes ricas * ============================================================ */ .btn-mod { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 10px 16px; border-radius: var(--r-md); border: 1px solid transparent; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-sb); line-height: 1; cursor: pointer; user-select: none; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); position: relative; overflow: hidden; white-space: nowrap; } .btn-mod:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-mod .fa-solid, .btn-mod .fa-regular, .btn-mod .fa-brands { font-size: var(--fs-base); } .btn-mod-sm { padding: 6px 12px; font-size: var(--fs-xs); border-radius: var(--r-sm); } .btn-mod-lg { padding: 14px 24px; font-size: var(--fs-md); border-radius: var(--r-lg); } .btn-mod-primary { background: var(--p-gradient); color: #fff; border-color: transparent; box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255,255,255,0.15); } .btn-mod-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-standard); pointer-events: none; } .btn-mod-primary:hover { transform: translateY(-1px); box-shadow: var(--glow-primary), var(--sh-md), inset 0 1px 0 rgba(255,255,255,0.2); } .btn-mod-primary:hover::before { transform: translateX(100%); } .btn-mod-primary:active { transform: translateY(0); } .btn-mod-secondary { background: var(--surface-1); color: var(--text-1); border-color: var(--border-1); box-shadow: var(--sh-xs); } .btn-mod-secondary:hover { background: var(--surface-2); border-color: var(--border-2); box-shadow: var(--sh-sm); } .btn-mod-ghost { background: transparent; color: var(--text-2); border-color: transparent; } .btn-mod-ghost:hover { background: var(--surface-2); color: var(--text-1); } .btn-mod-danger { background: var(--danger-500); color: #fff; border-color: transparent; box-shadow: var(--glow-danger); } .btn-mod-danger:hover { background: var(--danger-600); transform: translateY(-1px); } .btn-mod-success { background: var(--success-500); color: #fff; border-color: transparent; box-shadow: var(--glow-success); } .btn-mod-success:hover { background: var(--success-600); transform: translateY(-1px); } /* ============================================================ * 6. CARDS — hover lift, bento grid ready * ============================================================ */ .card-mod { background: var(--surface-0); border: 1px solid var(--border-1); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--sh-sm); transition: transform var(--dur-base) var(--ease-emphasized), box-shadow var(--dur-base) var(--ease-emphasized), border-color var(--dur-base) var(--ease-emphasized); } .card-mod:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--border-2); } .card-mod-brand { background: var(--p-gradient-soft); border-color: transparent; color: var(--text-1); } .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } .bento-grid > .bento-col-2 { grid-column: span 2; } .bento-grid > .bento-col-3 { grid-column: span 3; } .bento-grid > .bento-col-4 { grid-column: span 4; } .bento-grid > .bento-row-2 { grid-row: span 2; } @media (max-width: 900px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } .bento-grid > .bento-col-3, .bento-grid > .bento-col-4 { grid-column: span 2; } } @media (max-width: 480px) { .bento-grid { grid-template-columns: 1fr; } .bento-grid > * { grid-column: span 1 !important; } } /* ============================================================ * 7. FORMS * ============================================================ */ .input-mod, .textarea-mod, .select-mod { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border-1); border-radius: var(--r-md); background: var(--surface-0); color: var(--text-1); font-family: var(--font-sans); font-size: var(--fs-base); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); } .input-mod:focus, .textarea-mod:focus, .select-mod:focus { outline: none; border-color: var(--p-500); box-shadow: var(--ring-primary); } .input-mod::placeholder, .textarea-mod::placeholder { color: var(--text-5); } .label-mod { display: block; font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--text-2); margin-bottom: var(--s-2); } /* ============================================================ * 8. THEME TOGGLE * ============================================================ */ .theme-toggle { position: fixed; top: var(--s-4); right: var(--s-4); z-index: var(--z-tooltip); width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid var(--border-1); background: var(--surface-0); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: var(--sh-sm); transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); } .theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--sh-md); background: var(--surface-1); } .theme-toggle:active { transform: translateY(0); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } html[data-theme="dark"] .theme-toggle .icon-sun { display: inline; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* En dark mode, el toggle sobre el login (que tiene panel oscuro a la izq) queda más elegante */ html[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ============================================================================ * ═════════════════════════ PORTAL 2026 ═════════════════════════════════════ * Sección 13 · Design System del panel empleados INTECAP (F111 · Foundation) * * PALETA OBLIGATORIA (única fuente de verdad de colores brand): * #5e2ced Violeta (primary) * #75cebb Verde cyan (accent) * #ffffff Blanco (surfaces) * + escala de grises neutros para texto/bordes (accesibilidad). * * ARQUITECTURA: * 13.0 Tokens (colores, tipografía, spacing, radios, sombras, motion) * 13.1 Layout shell (sidebar, topbar, main) * 13.2 Componentes atómicos (.vm-btn, .vm-input, .vm-card, .vm-chip, etc.) * 13.3 Patrones compuestos (page header, toolbar, empty, toast, loading) * 13.4 Escritorio bento (home) * 13.5 Overrides legacy (mapea .sol-card, .chip, .btn-primary… al DS) * * SCOPE: `body:not(.ws-marcas-active) #dashboard-view` — no afecta MARCAS. * PRESERVA: IDs y clases originales (switchSection, badges, forms). * ============================================================================ */ /* ══ 13.0 · TOKENS ══════════════════════════════════════════════════════════ */ :root { --vm-violet: #5e2ced; /* F129.3: variables que se usaban sin estar definidas — hover quedaba transparente (blanco) */ --vm-v-700: color-mix(in srgb, var(--accent, #5e2ced) 84%, #000); --vm-v-14: color-mix(in srgb, var(--accent, #5e2ced) 14%, transparent); --vm-violet-h: color-mix(in srgb, var(--accent, #5e2ced) 84%, #000); --vm-violet-d: #6d28d9; --vm-cyan: #75cebb; --vm-cyan-h: #5cbaa5; --vm-cyan-d: #0e7a63; --vm-v-04: color-mix(in srgb, var(--accent, #5e2ced) 4%, transparent); --vm-v-06: color-mix(in srgb, var(--accent, #5e2ced) 6%, transparent); --vm-v-08: color-mix(in srgb, var(--accent, #5e2ced) 8%, transparent); --vm-v-12: color-mix(in srgb, var(--accent, #5e2ced) 12%, transparent); --vm-v-18: color-mix(in srgb, var(--accent, #5e2ced) 18%, transparent); --vm-v-24: color-mix(in srgb, var(--accent, #5e2ced) 24%, transparent); --vm-v-35: color-mix(in srgb, var(--accent, #5e2ced) 35%, transparent); --vm-v-50: rgba(94, 44, 237, .50); --vm-c-08: rgba(117, 206, 187, .08); --vm-c-14: rgba(117, 206, 187, .14); --vm-c-22: rgba(117, 206, 187, .22); --vm-c-35: rgba(117, 206, 187, .35); --vm-n-0: #ffffff; --vm-n-50: #fafafa; --vm-n-100: #f4f4f5; --vm-n-150: #ececee; --vm-n-200: #e4e4e7; --vm-n-300: #d4d4d8; --vm-n-400: #a1a1aa; --vm-n-500: #71717a; --vm-n-600: #52525b; --vm-n-700: #3f3f46; --vm-n-800: #27272a; --vm-n-900: #18181b; --vm-success: #10b981; --vm-warning: #f59e0b; --vm-danger: #ef4444; --vm-font-sans: 'Geist', 'Inter', 'Sora', system-ui, -apple-system, sans-serif; --vm-font-mono: 'JetBrains Mono', ui-monospace, monospace; --vm-fs-xs: 11px; --vm-fs-sm: 12px; --vm-fs-md: 13.5px; --vm-fs-lg: 15px; --vm-fs-xl: 18px; --vm-fs-2xl: 22px; --vm-fs-3xl: 28px; --vm-fs-4xl: 36px; --vm-fw-r: 400; --vm-fw-m: 500; --vm-fw-sb: 600; --vm-fw-b: 700; --vm-fw-eb: 800; --vm-fw-bl: 900; --vm-sp-1: 4px; --vm-sp-2: 8px; --vm-sp-3: 12px; --vm-sp-4: 16px; --vm-sp-5: 20px; --vm-sp-6: 24px; --vm-sp-8: 32px; --vm-sp-10: 40px; --vm-sp-12: 48px; --vm-r-sm: 8px; --vm-r-md: 10px; --vm-r-lg: 14px; --vm-r-xl: 18px; --vm-r-2xl: 22px; --vm-r-full: 999px; --vm-sh-xs: 0 1px 2px rgba(15, 23, 42, .04); --vm-sh-sm: 0 2px 8px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03); --vm-sh-md: 0 8px 24px -8px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04); --vm-sh-lg: 0 20px 40px -12px rgba(15, 23, 42, .14), 0 8px 16px rgba(15, 23, 42, .05); --vm-sh-v-sm: 0 4px 12px -4px rgba(94, 44, 237, .28); --vm-sh-v-md: 0 12px 32px -8px rgba(94, 44, 237, .38); --vm-sh-v-lg: 0 24px 48px -12px rgba(94, 44, 237, .48); --vm-ease: cubic-bezier(.2, .8, .2, 1); --vm-ease-b: cubic-bezier(.34, 1.56, .64, 1); --vm-dur-1: 120ms; --vm-dur-2: 200ms; --vm-dur-3: 320ms; --vm-dur-4: 480ms; --vm-z-nav: 50; --vm-z-top: 60; --vm-z-drawer: 80; --vm-z-back-btn: 90; --vm-z-modal: 100; --vm-z-toast: 120; } /* ══ 13.1 · LAYOUT SHELL ════════════════════════════════════════════════════ */ body:not(.ws-marcas-active) #dashboard-view { font-family: var(--vm-font-sans); font-feature-settings: "cv11","ss01"; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--vm-n-900); } body:not(.ws-marcas-active) #dashboard-view .app-layout, body:not(.ws-marcas-active) #dashboard-view .main-content { background: var(--vm-n-50); } body:not(.ws-marcas-active) #dashboard-view .sidebar { background: var(--vm-n-0) !important; border-right: 1px solid var(--vm-n-150) !important; } body:not(.ws-marcas-active) #dashboard-view .sidebar-brand { border-bottom: 1px solid var(--vm-n-150) !important; padding: 20px 20px 18px !important; } body:not(.ws-marcas-active) #dashboard-view .sidebar-brand-icon { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border-radius: 12px !important; box-shadow: var(--vm-sh-v-sm); } body:not(.ws-marcas-active) #dashboard-view .sidebar-brand-text { font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-eb) !important; color: var(--vm-n-900) !important; letter-spacing: -0.02em !important; } body:not(.ws-marcas-active) #dashboard-view .sidebar-brand-sub { font-family: var(--vm-font-sans) !important; color: var(--vm-n-400) !important; font-weight: var(--vm-fw-m) !important; font-size: var(--vm-fs-xs) !important; letter-spacing: 0.02em !important; } body:not(.ws-marcas-active) #dashboard-view .workspace-switcher .workspace-switcher-label { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border-radius: var(--vm-r-lg) !important; padding: 12px 14px !important; border: none !important; box-shadow: var(--vm-sh-v-sm) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-b) !important; letter-spacing: 0.06em !important; font-size: var(--vm-fs-sm) !important; } body:not(.ws-marcas-active) #dashboard-view .nav-section-label { color: var(--vm-n-400) !important; font-family: var(--vm-font-sans) !important; letter-spacing: 0.14em !important; font-weight: var(--vm-fw-b) !important; font-size: 10.5px !important; padding: 14px 16px 6px !important; } body:not(.ws-marcas-active) #dashboard-view .nav-item { color: var(--vm-n-600) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-sb) !important; font-size: var(--vm-fs-md) !important; border-radius: var(--vm-r-md) !important; padding: 10px 14px !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; letter-spacing: -0.005em !important; } body:not(.ws-marcas-active) #dashboard-view .nav-item i:first-child { color: var(--vm-n-400) !important; transition: color var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #dashboard-view .nav-item:hover { background: var(--vm-v-08) !important; color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #dashboard-view .nav-item:hover i:first-child { color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #dashboard-view .nav-item.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; box-shadow: var(--vm-sh-v-sm); } body:not(.ws-marcas-active) #dashboard-view .nav-item.active i:first-child { color: var(--vm-n-0) !important; } body:not(.ws-marcas-active) #dashboard-view .nav-badge { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border-radius: var(--vm-r-full) !important; font-weight: var(--vm-fw-eb) !important; min-width: 22px !important; padding: 2px 8px !important; font-size: var(--vm-fs-xs) !important; } body:not(.ws-marcas-active) #dashboard-view .nav-item.active .nav-badge { background: var(--vm-n-0) !important; color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #dashboard-view .nav-badge.neutral { background: var(--vm-c-22) !important; color: var(--vm-cyan-d) !important; } body:not(.ws-marcas-active) #dashboard-view .sidebar-footer { border-top: 1px solid var(--vm-n-150) !important; } body:not(.ws-marcas-active) #dashboard-view .main-content { padding: 24px 32px 40px !important; } body:not(.ws-marcas-active) #dashboard-view .smart-search-bar { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; padding: 8px 14px !important; box-shadow: var(--vm-sh-xs) !important; margin-bottom: 18px !important; } body:not(.ws-marcas-active) #dashboard-view .mobile-toggle { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-md) !important; color: var(--vm-n-700) !important; box-shadow: var(--vm-sh-sm) !important; } /* ══ 13.2 · COMPONENTES ATÓMICOS ═════════════════════════════════════════════ */ .vm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--vm-r-full); font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); font-weight: var(--vm-fw-b); letter-spacing: -0.005em; cursor: pointer; border: 1px solid transparent; transition: all var(--vm-dur-2) var(--vm-ease); white-space: nowrap; line-height: 1; } .vm-btn:active { transform: translateY(1px); } .vm-btn:disabled { opacity: .5; cursor: not-allowed; } .vm-btn.vm-btn-sm { padding: 7px 12px; font-size: var(--vm-fs-sm); gap: 6px; } .vm-btn.vm-btn-lg { padding: 14px 24px; font-size: var(--vm-fs-lg); gap: 10px; } .vm-btn.vm-btn-block { width: 100%; } .vm-btn.vm-btn-primary { background: var(--vm-violet); color: var(--vm-n-0); box-shadow: var(--vm-sh-v-sm), inset 0 1px 0 rgba(255, 255, 255, .18); } .vm-btn.vm-btn-primary:hover { background: var(--vm-violet-h); transform: translateY(-1px); box-shadow: var(--vm-sh-v-md), inset 0 1px 0 rgba(255, 255, 255, .22); } .vm-btn.vm-btn-secondary { background: var(--vm-n-0); color: var(--vm-n-900); border-color: var(--vm-n-200); box-shadow: var(--vm-sh-xs); } .vm-btn.vm-btn-secondary:hover { border-color: var(--vm-v-24); color: var(--vm-violet); } .vm-btn.vm-btn-ghost { background: transparent; color: var(--vm-n-600); } .vm-btn.vm-btn-ghost:hover { background: var(--vm-v-08); color: var(--vm-violet); } .vm-btn.vm-btn-danger { background: var(--vm-danger); color: var(--vm-n-0); box-shadow: 0 4px 12px -4px rgba(239, 68, 68, .35); } .vm-btn.vm-btn-danger:hover { background: #dc2626; transform: translateY(-1px); } .vm-btn.vm-btn-cyan { background: var(--vm-cyan); color: #063e33; box-shadow: 0 4px 12px -4px rgba(117, 206, 187, .45); } .vm-btn.vm-btn-cyan:hover { background: var(--vm-cyan-h); transform: translateY(-1px); } .vm-btn-icon { width: 38px; height: 38px; border-radius: var(--vm-r-md); background: var(--vm-n-0); border: 1px solid var(--vm-n-150); color: var(--vm-n-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); padding: 0; } .vm-btn-icon:hover { border-color: var(--vm-violet); color: var(--vm-violet); transform: translateY(-1px); } .vm-input { width: 100%; padding: 10px 14px; border-radius: var(--vm-r-md); border: 1px solid var(--vm-n-200); background: var(--vm-n-0); color: var(--vm-n-900); font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); letter-spacing: -0.005em; transition: border-color var(--vm-dur-2) var(--vm-ease), box-shadow var(--vm-dur-2) var(--vm-ease); outline: none; } .vm-input:focus { border-color: var(--vm-violet); box-shadow: 0 0 0 4px var(--vm-v-08); } .vm-input::placeholder { color: var(--vm-n-400); } .vm-textarea { min-height: 100px; resize: vertical; line-height: 1.5; } .vm-label { display: block; font-family: var(--vm-font-sans); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-sb); color: var(--vm-n-700); margin-bottom: 6px; letter-spacing: -0.005em; } .vm-card { background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-xl); padding: 18px 20px; box-shadow: var(--vm-sh-xs); transition: all var(--vm-dur-3) var(--vm-ease); } .vm-card.vm-card-hover:hover { transform: translateY(-2px); border-color: var(--vm-v-18); box-shadow: var(--vm-sh-md); } .vm-card.vm-card-elevated { box-shadow: var(--vm-sh-md); } .vm-card.vm-card-flat { box-shadow: none; } .vm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--vm-r-full); background: var(--vm-n-0); border: 1px solid var(--vm-n-200); color: var(--vm-n-600); font-family: var(--vm-font-sans); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); white-space: nowrap; letter-spacing: -0.005em; } .vm-chip:hover { border-color: var(--vm-cyan); color: var(--vm-n-900); background: var(--vm-c-14); } .vm-chip.vm-chip-active { background: var(--vm-violet); color: var(--vm-n-0); border-color: var(--vm-violet); box-shadow: var(--vm-sh-v-sm); } .vm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 7px; border-radius: var(--vm-r-full); background: var(--vm-violet); color: var(--vm-n-0); font-family: var(--vm-font-sans); font-size: 11px; font-weight: var(--vm-fw-eb); line-height: 1; } .vm-badge.vm-badge-cyan { background: var(--vm-cyan); color: #063e33; } .vm-badge.vm-badge-outline { background: transparent; color: var(--vm-violet); border: 1px solid var(--vm-v-24); } .vm-badge.vm-badge-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; } .vm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--vm-r-full); background: var(--vm-violet); color: var(--vm-n-0); font-family: var(--vm-font-sans); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); border: 2px solid var(--vm-n-0); box-shadow: var(--vm-sh-xs); } .vm-avatar.vm-avatar-sm { width: 28px; height: 28px; font-size: 11px; } .vm-avatar.vm-avatar-lg { width: 42px; height: 42px; font-size: var(--vm-fs-md); } .vm-divider { height: 1px; background: var(--vm-n-150); margin: 20px 0; border: none; } .vm-divider-v { width: 1px; height: 24px; background: var(--vm-n-200); margin: 0 10px; display: inline-block; vertical-align: middle; } /* ══ 13.3 · PATRONES COMPUESTOS ═════════════════════════════════════════════ */ .vm-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--vm-n-150); } .vm-page-header .vm-ph-text h1 { font-family: var(--vm-font-sans); font-size: 24px; font-weight: var(--vm-fw-bl); letter-spacing: -0.03em; color: var(--vm-n-900); line-height: 1.15; margin: 0 0 6px; } .vm-page-header .vm-ph-text p { font-size: var(--vm-fs-md); color: var(--vm-n-500); font-weight: var(--vm-fw-m); letter-spacing: -0.005em; margin: 0; } .vm-page-header .vm-ph-actions { display: flex; align-items: center; gap: 10px; } .vm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .vm-toolbar-spacer { flex: 1; } .vm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; color: var(--vm-n-500); } .vm-empty-icon { width: 64px; height: 64px; border-radius: var(--vm-r-full); background: var(--vm-v-08); color: var(--vm-violet); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; } .vm-empty h3 { font-family: var(--vm-font-sans); font-size: var(--vm-fs-xl); font-weight: var(--vm-fw-eb); color: var(--vm-n-900); letter-spacing: -0.02em; margin: 0 0 6px; } .vm-empty p { font-size: var(--vm-fs-md); color: var(--vm-n-500); margin: 0 0 16px; max-width: 360px; line-height: 1.5; } .vm-loading { display: inline-block; width: 22px; height: 22px; border: 2.5px solid var(--vm-v-18); border-top-color: var(--vm-violet); border-radius: 50%; animation: vmSpin .7s linear infinite; } .vm-loading-lg { width: 32px; height: 32px; border-width: 3px; } @keyframes vmSpin { to { transform: rotate(360deg); } } .vm-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--vm-z-toast); display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: calc(100vw - 48px); } .vm-toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; background: var(--vm-n-900); color: var(--vm-n-0); padding: 14px 18px; border-radius: var(--vm-r-lg); box-shadow: var(--vm-sh-lg); font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); font-weight: var(--vm-fw-sb); letter-spacing: -0.005em; min-width: 260px; animation: vmToastIn .35s var(--vm-ease-b) both; } .vm-toast .vm-toast-icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .vm-toast.vm-toast-success .vm-toast-icon { background: var(--vm-success); color: #fff; } .vm-toast.vm-toast-error .vm-toast-icon { background: var(--vm-danger); color: #fff; } .vm-toast.vm-toast-info .vm-toast-icon { background: var(--vm-violet); color: #fff; } .vm-toast.vm-toast-warn .vm-toast-icon { background: var(--vm-warning); color: #fff; } .vm-toast.vm-toast-leaving { animation: vmToastOut .3s var(--vm-ease) forwards; } @keyframes vmToastIn { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes vmToastOut { to { opacity: 0; transform: translateY(20px) scale(.95); } } /* ══ 13.4 · ESCRITORIO BENTO ═══════════════════════════════════════════════ */ #section-home .desk-hero { padding: 8px 0 22px; animation: vmFadeUp .5s var(--vm-ease) both; } #section-home .desk-hero-eyebrow { font-family: var(--vm-font-sans); font-size: var(--vm-fs-xs); font-weight: var(--vm-fw-b); color: var(--vm-violet); letter-spacing: .18em; text-transform: none; margin-bottom: 8px; } #section-home .desk-hero-title { font-family: var(--vm-font-sans); font-size: clamp(28px, 3.6vw, 40px); font-weight: var(--vm-fw-bl); color: var(--vm-n-900); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 6px; } #section-home .desk-hero-subtitle { font-size: var(--vm-fs-lg); color: var(--vm-n-500); font-weight: var(--vm-fw-m); margin: 0; letter-spacing: -0.005em; } #section-home .desk-alert { border-radius: var(--vm-r-lg); background: var(--vm-v-08); border: 1px solid var(--vm-v-18); margin-bottom: 20px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; color: var(--vm-n-900); } #section-home .desk-alert .alert-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vm-violet); animation: vmPulse 1.5s ease-in-out infinite; } #section-home .desk-alert .alert-banner-text { font-weight: var(--vm-fw-sb); font-size: var(--vm-fs-md); } #section-home .desk-alert .alert-banner-count { margin-left: auto; background: var(--vm-violet); color: var(--vm-n-0); font-weight: var(--vm-fw-eb); min-width: 28px; padding: 3px 10px; border-radius: var(--vm-r-full); text-align: center; font-size: var(--vm-fs-sm); } @keyframes vmPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.15); } } .desk-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-bottom: 32px; } .desk-tile, .desk-chip { border: none; cursor: pointer; font-family: inherit; text-align: left; padding: 0; transition: transform var(--vm-dur-3) var(--vm-ease), box-shadow var(--vm-dur-3) var(--vm-ease), border-color var(--vm-dur-3) var(--vm-ease), background var(--vm-dur-3) var(--vm-ease); position: relative; overflow: hidden; opacity: 0; animation: vmFadeUp .55s var(--vm-ease) both; } .desk-tile:active, .desk-chip:active { transform: translateY(0) scale(.98); } .desk-tile-lg { grid-column: span 6; min-height: 168px; border-radius: var(--vm-r-2xl); padding: 22px 24px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; grid-template-areas: "icon lead arrow" "icon lead ." "icon caption ."; gap: 4px 16px; align-items: start; } .desk-tile-lg .desk-tile-icon { grid-area: icon; width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .desk-tile-lg .desk-tile-lead { grid-area: lead; align-self: end; display: flex; flex-direction: column; gap: 2px; } .desk-tile-lg .desk-tile-value { font-size: 44px; font-weight: var(--vm-fw-bl); line-height: 1; letter-spacing: -0.03em; font-family: var(--vm-font-sans); } .desk-tile-lg .desk-tile-title { font-size: var(--vm-fs-lg); font-weight: var(--vm-fw-b); letter-spacing: -0.01em; } .desk-tile-lg .desk-tile-title-cta { font-size: var(--vm-fs-2xl); font-weight: var(--vm-fw-bl); letter-spacing: -0.02em; line-height: 1.15; font-family: var(--vm-font-sans); } .desk-tile-lg .desk-tile-caption, .desk-tile-lg .desk-tile-caption-cta { grid-area: caption; font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-m); align-self: end; } .desk-tile-lg .desk-tile-arrow { grid-area: arrow; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--vm-fs-md); transition: transform var(--vm-dur-3) var(--vm-ease); } .desk-tile-lg:hover .desk-tile-arrow { transform: translateX(4px); } .desk-tile-primary { background: var(--vm-violet); color: var(--vm-n-0); box-shadow: var(--vm-sh-v-md), inset 0 1px 0 rgba(255, 255, 255, .22); } .desk-tile-primary:hover { transform: translateY(-4px); box-shadow: var(--vm-sh-v-lg), inset 0 1px 0 rgba(255, 255, 255, .28); } .desk-tile-primary .desk-tile-icon { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: var(--vm-n-0); } .desk-tile-primary .desk-tile-caption-cta { color: rgba(255, 255, 255, .82); } .desk-tile-primary .desk-tile-arrow { background: var(--vm-n-0); color: var(--vm-violet); } .desk-tile-alt { background: var(--vm-n-0); border: 1px solid var(--vm-n-150); color: var(--vm-n-900); box-shadow: var(--vm-sh-xs); } .desk-tile-alt:hover { transform: translateY(-4px); border-color: var(--vm-cyan); box-shadow: var(--vm-sh-xs), 0 20px 40px -12px rgba(117, 206, 187, .42); } .desk-tile-alt .desk-tile-icon { background: var(--vm-c-14); color: var(--vm-cyan-d); } .desk-tile-alt .desk-tile-value { color: var(--vm-violet); } .desk-tile-alt .desk-tile-title { color: var(--vm-n-900); } .desk-tile-alt .desk-tile-caption { color: var(--vm-n-500); } .desk-tile-alt .desk-tile-arrow { background: var(--vm-v-08); color: var(--vm-violet); } .desk-tile-alt:hover .desk-tile-arrow { background: var(--vm-violet); color: var(--vm-n-0); } .desk-tile-md { grid-column: span 4; min-height: 132px; border-radius: var(--vm-r-xl); padding: 18px 20px; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); display: flex; flex-direction: column; gap: 6px; color: var(--vm-n-900); box-shadow: var(--vm-sh-xs); } .desk-tile-md:hover { transform: translateY(-3px); border-color: var(--vm-v-18); box-shadow: var(--vm-sh-md); } .desk-tile-md .desk-tile-icon-sm { width: 40px; height: 40px; border-radius: 12px; background: var(--vm-v-08); color: var(--vm-violet); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 4px; } .desk-tile-md .desk-tile-label { font-size: var(--vm-fs-lg); font-weight: var(--vm-fw-eb); letter-spacing: -0.02em; color: var(--vm-n-900); font-family: var(--vm-font-sans); } .desk-tile-md .desk-tile-meta { font-size: var(--vm-fs-sm); color: var(--vm-n-500); margin-top: auto; } .desk-tile-md .desk-tile-meta span { color: var(--vm-violet); font-weight: var(--vm-fw-b); } .desk-chip { grid-column: span 2; min-height: 92px; border-radius: var(--vm-r-xl); padding: 14px; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--vm-n-900); box-shadow: var(--vm-sh-xs); } .desk-chip:hover { transform: translateY(-3px); border-color: var(--vm-cyan); box-shadow: 0 10px 24px -10px rgba(117, 206, 187, .38); } .desk-chip .desk-chip-icon { width: 36px; height: 36px; border-radius: 11px; background: var(--vm-c-14); color: var(--vm-cyan-d); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .desk-chip .desk-chip-label { font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); letter-spacing: -0.005em; color: var(--vm-n-900); } .desk-tile:nth-of-type(1) { animation-delay: .05s; } .desk-tile:nth-of-type(2) { animation-delay: .10s; } .desk-tile:nth-of-type(3) { animation-delay: .15s; } .desk-tile:nth-of-type(4) { animation-delay: .20s; } .desk-tile:nth-of-type(5) { animation-delay: .25s; } .desk-chip:nth-of-type(1) { animation-delay: .30s; } .desk-chip:nth-of-type(2) { animation-delay: .35s; } .desk-chip:nth-of-type(3) { animation-delay: .40s; } .desk-chip:nth-of-type(4) { animation-delay: .45s; } .desk-chip:nth-of-type(5) { animation-delay: .50s; } @keyframes vmFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } #section-home .kpi-grid { margin-top: 8px; } #section-home .kpi-grid:empty { display: none; } #section-home #centro-summary { margin-top: 8px; } #section-home #centro-summary:empty { display: none; } #section-home #f30-mi-dia { display: none !important; } .desk-back-btn { position: fixed; top: 16px; left: 50%; transform: translate(-50%, -80px); z-index: var(--vm-z-back-btn); display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--vm-r-full); background: var(--vm-n-0); color: var(--vm-n-900); font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); font-weight: var(--vm-fw-b); letter-spacing: -0.005em; border: 1px solid var(--vm-n-150); cursor: pointer; box-shadow: var(--vm-sh-md); transition: all var(--vm-dur-3) var(--vm-ease); pointer-events: none; opacity: 0; } .desk-back-btn.visible { transform: translate(-50%, 0); pointer-events: auto; opacity: 1; } .desk-back-btn:hover { background: var(--vm-violet); color: var(--vm-n-0); border-color: var(--vm-violet); transform: translate(-50%, -2px); } .desk-back-btn i { font-size: var(--vm-fs-xs); color: var(--vm-violet); transition: color var(--vm-dur-3) var(--vm-ease); } .desk-back-btn:hover i { color: var(--vm-n-0); } /* ══ 13.5 · OVERRIDES LEGACY ══════════════════════════════════════════════ */ body:not(.ws-marcas-active) #dashboard-view .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--vm-n-150); } body:not(.ws-marcas-active) #dashboard-view .page-header .page-title { font-family: var(--vm-font-sans) !important; font-size: 24px !important; font-weight: var(--vm-fw-bl) !important; letter-spacing: -0.03em !important; color: var(--vm-n-900) !important; line-height: 1.15 !important; margin: 0 !important; } body:not(.ws-marcas-active) #dashboard-view .page-header .page-subtitle { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-md) !important; color: var(--vm-n-500) !important; font-weight: var(--vm-fw-m) !important; letter-spacing: -0.005em !important; margin-top: 4px !important; } body:not(.ws-marcas-active) #dashboard-view .sol-card { border-radius: var(--vm-r-xl) !important; border: 1px solid var(--vm-n-150) !important; background: var(--vm-n-0) !important; box-shadow: var(--vm-sh-xs) !important; transition: transform var(--vm-dur-3) var(--vm-ease), box-shadow var(--vm-dur-3) var(--vm-ease), border-color var(--vm-dur-3) var(--vm-ease) !important; } body:not(.ws-marcas-active) #dashboard-view .sol-card:hover { transform: translateY(-3px); border-color: var(--vm-v-18); box-shadow: var(--vm-sh-md) !important; } body:not(.ws-marcas-active) #dashboard-view .chips { gap: 8px; } body:not(.ws-marcas-active) #dashboard-view .chip { border-radius: var(--vm-r-full) !important; border: 1px solid var(--vm-n-200) !important; background: var(--vm-n-0) !important; color: var(--vm-n-600) !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-sm) !important; font-weight: var(--vm-fw-b) !important; padding: 8px 14px !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; letter-spacing: -0.005em !important; } body:not(.ws-marcas-active) #dashboard-view .chip:hover { border-color: var(--vm-cyan) !important; color: var(--vm-n-900) !important; background: var(--vm-c-14) !important; } body:not(.ws-marcas-active) #dashboard-view .chip.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border-color: var(--vm-violet) !important; box-shadow: var(--vm-sh-v-sm); } body:not(.ws-marcas-active) #dashboard-view .btn-primary, body:not(.ws-marcas-active) #dashboard-view .btn.btn-primary { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border: none !important; border-radius: var(--vm-r-full) !important; padding: 10px 20px !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-b) !important; font-size: var(--vm-fs-md) !important; letter-spacing: -0.005em !important; box-shadow: var(--vm-sh-v-sm), inset 0 1px 0 rgba(255,255,255,.18) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #dashboard-view .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--vm-sh-v-md), inset 0 1px 0 rgba(255,255,255,.22) !important; } body:not(.ws-marcas-active) #dashboard-view .btn-secondary, body:not(.ws-marcas-active) #dashboard-view .btn-ghost { background: var(--vm-n-0) !important; color: var(--vm-n-900) !important; border: 1px solid var(--vm-n-200) !important; border-radius: var(--vm-r-full) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-b) !important; letter-spacing: -0.005em !important; } body:not(.ws-marcas-active) #dashboard-view .btn-secondary:hover, body:not(.ws-marcas-active) #dashboard-view .btn-ghost:hover { border-color: var(--vm-v-24) !important; color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #dashboard-view .btn-icon { background: var(--vm-n-0) !important; color: var(--vm-n-600) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-md) !important; width: 38px !important; height: 38px !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #dashboard-view .btn-icon:hover { border-color: var(--vm-violet) !important; color: var(--vm-violet) !important; transform: translateY(-1px); } body:not(.ws-marcas-active) #dashboard-view .input, body:not(.ws-marcas-active) #dashboard-view input.input, body:not(.ws-marcas-active) #dashboard-view .textarea, body:not(.ws-marcas-active) #dashboard-view textarea.textarea { border: 1px solid var(--vm-n-200) !important; border-radius: var(--vm-r-md) !important; background: var(--vm-n-0) !important; color: var(--vm-n-900) !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-md) !important; padding: 10px 14px !important; transition: border-color var(--vm-dur-2) var(--vm-ease), box-shadow var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #dashboard-view .input:focus, body:not(.ws-marcas-active) #dashboard-view .textarea:focus { outline: none !important; border-color: var(--vm-violet) !important; box-shadow: 0 0 0 4px var(--vm-v-08) !important; } body:not(.ws-marcas-active) #dashboard-view .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; } body:not(.ws-marcas-active) #dashboard-view .kpi-card, body:not(.ws-marcas-active) #dashboard-view .kpi-item { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; padding: 16px 18px !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; } body:not(.ws-marcas-active) #dashboard-view .kpi-card:hover, body:not(.ws-marcas-active) #dashboard-view .kpi-item:hover { transform: translateY(-2px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-md) !important; } body:not(.ws-marcas-active) #dashboard-view .stat-pills > * { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-full) !important; color: var(--vm-n-600) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-b) !important; } body:not(.ws-marcas-active) #dashboard-view .alert-banner { background: var(--vm-v-08) !important; border: 1px solid var(--vm-v-18) !important; border-radius: var(--vm-r-lg) !important; color: var(--vm-n-900) !important; } body:not(.ws-marcas-active) #dashboard-view .toolbar { background: transparent; padding: 0; margin-bottom: 14px; } body:not(.ws-marcas-active) #dashboard-view .catalogo-centro-tabs { gap: 8px; } body:not(.ws-marcas-active) #dashboard-view .catalogo-tab-btn { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-200) !important; border-radius: var(--vm-r-md) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-b) !important; color: var(--vm-n-600) !important; } body:not(.ws-marcas-active) #dashboard-view .catalogo-tab-btn.active { border-color: var(--vm-violet) !important; color: var(--vm-violet) !important; box-shadow: var(--vm-sh-v-sm); } body:not(.ws-marcas-active) #dashboard-view .area-grid { gap: 14px; } body:not(.ws-marcas-active) #dashboard-view .area-card, body:not(.ws-marcas-active) #dashboard-view .catalogo-courses-grid > * { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; } body:not(.ws-marcas-active) #dashboard-view .area-card:hover, body:not(.ws-marcas-active) #dashboard-view .catalogo-courses-grid > *:hover { transform: translateY(-3px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-md) !important; } /* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .desk-bento { grid-template-columns: repeat(6, 1fr); gap: 12px; } .desk-tile-lg { grid-column: span 6; min-height: 148px; padding: 20px; } .desk-tile-md { grid-column: span 2; min-height: 118px; padding: 16px; } .desk-chip { grid-column: span 2; min-height: 84px; padding: 12px; } .desk-tile-lg .desk-tile-value { font-size: 34px; } .desk-tile-lg .desk-tile-title-cta { font-size: var(--vm-fs-xl); } #section-home .desk-hero-title { font-size: clamp(22px, 5vw, 30px); } body:not(.ws-marcas-active) #dashboard-view .main-content { padding: 16px 20px 32px !important; } } @media (max-width: 520px) { .desk-tile-md { grid-column: span 3; } .desk-chip { grid-column: span 3; } } @media (prefers-reduced-motion: reduce) { .desk-tile, .desk-chip, .desk-hero, .desk-back-btn, .vm-btn, .vm-input, .vm-card, .vm-chip, .vm-toast, .vm-loading { animation: none !important; transition: none !important; } .desk-tile, .desk-chip { opacity: 1; } } /* ══ 13.6 · F112 · Utilidades + FAB "+" wizard tipo ═══════════════════════════ */ /* Helper universal para ocultar elementos preservando el DOM */ .vm-hidden { display: none !important; } /* FAB flotante circular abajo-derecha */ .vm-fab { position: fixed; right: 24px; bottom: 24px; z-index: 700; width: 60px; height: 60px; border-radius: var(--vm-r-full); background: var(--vm-violet); color: var(--vm-n-0); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: var(--vm-sh-v-md), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform var(--vm-dur-3) var(--vm-ease), box-shadow var(--vm-dur-3) var(--vm-ease); } .vm-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--vm-sh-v-lg), inset 0 1px 0 rgba(255, 255, 255, .32); } .vm-fab:active { transform: translateY(0) scale(.96); } body.vm-fab-open .vm-fab { transform: rotate(45deg); } /* Sheet (bottom sheet en mobile, modal centrado en desktop) */ .vm-fab-sheet { position: fixed; inset: 0; z-index: 720; display: none; align-items: flex-end; justify-content: center; padding: 0; } .vm-fab-sheet.vm-fab-sheet-open { display: flex; } .vm-fab-sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: vmFabBackdropIn .28s var(--vm-ease) both; } @keyframes vmFabBackdropIn { from { opacity: 0; } to { opacity: 1; } } .vm-fab-sheet-card { position: relative; background: var(--vm-n-0); border-radius: 24px 24px 0 0; padding: 22px 22px 26px; width: 100%; max-width: 480px; box-shadow: 0 -24px 60px -16px rgba(15, 23, 42, .25), var(--vm-sh-lg); animation: vmFabSheetIn .38s var(--vm-ease-b) both; padding-bottom: calc(26px + env(safe-area-inset-bottom)); } @keyframes vmFabSheetIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .vm-fab-sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .vm-fab-sheet-title { font-family: var(--vm-font-sans); font-size: var(--vm-fs-xl); font-weight: var(--vm-fw-bl); letter-spacing: -0.03em; color: var(--vm-n-900); line-height: 1.2; margin-bottom: 4px; } .vm-fab-sheet-subtitle { font-size: var(--vm-fs-sm); color: var(--vm-n-500); font-weight: var(--vm-fw-m); letter-spacing: -0.005em; } .vm-fab-options { display: flex; flex-direction: column; gap: 10px; } .vm-fab-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-lg); cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); font-family: var(--vm-font-sans); text-align: left; color: var(--vm-n-900); } .vm-fab-option:hover { transform: translateY(-1px); border-color: var(--vm-violet); background: var(--vm-v-04); box-shadow: var(--vm-sh-sm); } .vm-fab-option:active { transform: translateY(0); } .vm-fab-option-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--vm-v-08); color: var(--vm-violet); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .vm-fab-option-icon-cyan { background: var(--vm-c-14); color: var(--vm-cyan-d); } .vm-fab-option-text { flex: 1; min-width: 0; } .vm-fab-option-title { font-size: var(--vm-fs-md); font-weight: var(--vm-fw-b); color: var(--vm-n-900); letter-spacing: -0.005em; margin-bottom: 2px; } .vm-fab-option-desc { font-size: var(--vm-fs-sm); color: var(--vm-n-500); font-weight: var(--vm-fw-m); } .vm-fab-option-arrow { color: var(--vm-n-400); font-size: 12px; transition: transform var(--vm-dur-2) var(--vm-ease), color var(--vm-dur-2) var(--vm-ease); } .vm-fab-option:hover .vm-fab-option-arrow { transform: translateX(3px); color: var(--vm-violet); } /* Desktop: sheet como modal centrado con radius completo */ @media (min-width: 768px) { .vm-fab-sheet { align-items: center; padding: 24px; } .vm-fab-sheet-card { border-radius: var(--vm-r-2xl); padding-bottom: 26px; max-width: 460px; } } /* Mobile ajustes del FAB */ @media (max-width: 600px) { .vm-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .vm-fab, .vm-fab-sheet-card, .vm-fab-sheet-backdrop, .vm-fab-option { animation: none !important; transition: none !important; } } /* ══ 13.7 · F113 · Workspace solicitud (modal principal) ═══════════════════ Rediseño visual del #solicitud-modal para verse como workspace pro. Tabs con indicator móvil animado. Header limpio. Body scrolleable. Sin tocar HTML: mismos IDs, tabs, contenedores. Scope: `body:not(.ws-marcas-active)` para no afectar MARCAS. */ body:not(.ws-marcas-active) #solicitud-modal.modal.show { padding: 0; align-items: stretch; justify-content: stretch; } body:not(.ws-marcas-active) #solicitud-modal .modal-content { max-width: 1180px !important; width: 96vw !important; max-height: 92vh !important; height: 92vh !important; border-radius: var(--vm-r-2xl) !important; overflow: hidden !important; background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; box-shadow: var(--vm-sh-lg) !important; display: flex !important; flex-direction: column !important; padding: 0 !important; animation: vmSolIn .4s var(--vm-ease-b) both; } @keyframes vmSolIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Header del modal solicitud (workspace) */ body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header { padding: 20px 28px 16px !important; border-bottom: 1px solid var(--vm-n-150) !important; background: var(--vm-n-0) !important; display: flex !important; align-items: center !important; gap: 14px !important; flex-shrink: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-title { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-xl) !important; font-weight: var(--vm-fw-bl) !important; letter-spacing: -0.025em !important; color: var(--vm-n-900) !important; line-height: 1.15 !important; flex: 1 !important; margin: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-title i { color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 12px !important; border-radius: var(--vm-r-full) !important; background: var(--vm-v-08) !important; color: var(--vm-violet) !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-xs) !important; font-weight: var(--vm-fw-b) !important; letter-spacing: 0.5px !important; text-transform: none !important; border: 1px solid var(--vm-v-18) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header .modal-close, body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header button[onclick*="closeSolicitud"] { width: 36px !important; height: 36px !important; border-radius: var(--vm-r-md) !important; background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; color: var(--vm-n-600) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header .modal-close:hover, body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header button[onclick*="closeSolicitud"]:hover { border-color: var(--vm-danger) !important; color: var(--vm-danger) !important; transform: none !important; } /* Tabs del modal como pill container con indicator */ body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tabs { position: relative !important; display: flex !important; align-items: center !important; gap: 4px !important; padding: 12px 28px 0 !important; border-bottom: 1px solid var(--vm-n-150) !important; background: var(--vm-n-50) !important; overflow-x: auto !important; scrollbar-width: none !important; flex-shrink: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tabs::-webkit-scrollbar { display: none; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab { position: relative !important; background: transparent !important; border: none !important; padding: 10px 16px 12px !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-md) !important; font-weight: var(--vm-fw-sb) !important; color: var(--vm-n-500) !important; cursor: pointer !important; transition: color var(--vm-dur-2) var(--vm-ease) !important; letter-spacing: -0.005em !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab i { font-size: var(--vm-fs-sm) !important; color: var(--vm-n-400) !important; transition: color var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab:hover { color: var(--vm-n-900) !important; background: var(--vm-v-04) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab:hover i { color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab.active { color: var(--vm-violet) !important; border-bottom-color: var(--vm-violet) !important; background: transparent !important; font-weight: var(--vm-fw-b) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab.active i { color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; height: 20px !important; padding: 0 6px !important; border-radius: var(--vm-r-full) !important; background: var(--vm-v-14) !important; color: var(--vm-violet) !important; font-size: 10px !important; font-weight: var(--vm-fw-eb) !important; letter-spacing: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab.active .sol-modal-tab-count { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; } /* Body scrolleable */ body:not(.ws-marcas-active) #solicitud-modal .sol-modal-body { flex: 1 !important; overflow-y: auto !important; padding: 24px 28px !important; background: var(--vm-n-0) !important; scrollbar-width: thin !important; scrollbar-color: var(--vm-n-200) transparent !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-body::-webkit-scrollbar { width: 6px; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-body::-webkit-scrollbar-thumb { background: var(--vm-n-200); border-radius: 3px; } /* Hint de shortcuts en el header (agregado por JS) */ .sol-shortcut-hint { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--vm-r-md); background: var(--vm-n-100); border: 1px solid var(--vm-n-150); color: var(--vm-n-500); font-family: var(--vm-font-sans); font-size: 11px; font-weight: var(--vm-fw-sb); letter-spacing: -0.005em; } .sol-shortcut-hint kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; background: var(--vm-n-0); border: 1px solid var(--vm-n-200); color: var(--vm-n-700); font-family: var(--vm-font-mono); font-size: 10px; font-weight: var(--vm-fw-sb); box-shadow: 0 1px 0 var(--vm-n-200); } /* Mobile: modal fullscreen, tabs con scroll horizontal */ @media (max-width: 768px) { body:not(.ws-marcas-active) #solicitud-modal .modal-content { max-width: 100vw !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header { padding: 14px 18px 12px !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-title { font-size: var(--vm-fs-lg) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tabs { padding: 8px 14px 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab { padding: 8px 12px 10px !important; font-size: var(--vm-fs-sm) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-body { padding: 16px 18px !important; } .sol-shortcut-hint { display: none !important; } } @media (prefers-reduced-motion: reduce) { body:not(.ws-marcas-active) #solicitud-modal .modal-content { animation: none !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab { transition: none !important; } } /* ══ 13.8 · F114 · Form Nueva Solicitud (workspace look) ═════════════════════ Rediseño visual del form-view fullscreen. Sin tocar la lógica de submit ni la estructura HTML/IDs — solo estilos aplicados por selector. */ body:not(.ws-marcas-active) #form-view .app-layout { background: var(--vm-n-50); } body:not(.ws-marcas-active) #form-view .main-content { padding: 32px 40px !important; background: var(--vm-n-50); } body:not(.ws-marcas-active) #form-view .page-header { border-bottom: 1px solid var(--vm-n-150) !important; padding-bottom: 18px !important; margin-bottom: 28px !important; } body:not(.ws-marcas-active) #form-view .page-title, body:not(.ws-marcas-active) #form-view #form-title { font-family: var(--vm-font-sans) !important; font-size: 26px !important; font-weight: var(--vm-fw-bl) !important; letter-spacing: -0.03em !important; color: var(--vm-n-900) !important; line-height: 1.15 !important; } body:not(.ws-marcas-active) #form-view form { max-width: 680px !important; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-2xl); padding: 32px 32px 28px; box-shadow: var(--vm-sh-sm); } body:not(.ws-marcas-active) #form-view .form-group { margin-bottom: 22px; } body:not(.ws-marcas-active) #form-view .form-label { display: block !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-sm) !important; font-weight: var(--vm-fw-b) !important; color: var(--vm-n-700) !important; margin-bottom: 8px !important; letter-spacing: -0.005em !important; text-transform: none !important; } body:not(.ws-marcas-active) #form-view .helper-text { font-size: var(--vm-fs-sm) !important; color: var(--vm-n-500) !important; margin-top: 6px !important; font-weight: var(--vm-fw-m) !important; letter-spacing: -0.005em !important; } body:not(.ws-marcas-active) #form-view select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2371717a' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 38px !important; } body:not(.ws-marcas-active) #form-view .btn-row { display: flex; gap: 10px; justify-content: flex-end; padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--vm-n-150); } /* Header specific de form-view (con sidebar simplificada) */ body:not(.ws-marcas-active) #form-view .sidebar { background: var(--vm-n-0) !important; border-right: 1px solid var(--vm-n-150) !important; } body:not(.ws-marcas-active) #form-view #btn-back { color: var(--vm-n-600) !important; background: var(--vm-n-100) !important; border-radius: var(--vm-r-md) !important; } body:not(.ws-marcas-active) #form-view #btn-back:hover { background: var(--vm-v-08) !important; color: var(--vm-violet) !important; } /* Contact chips (empleados usan esto en Nueva Solicitud) */ body:not(.ws-marcas-active) #form-view .contact-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } body:not(.ws-marcas-active) #form-view .contact-chips .chip, body:not(.ws-marcas-active) #form-view .contact-chips button { padding: 6px 12px !important; border-radius: var(--vm-r-full) !important; border: 1px solid var(--vm-n-200) !important; background: var(--vm-n-0) !important; color: var(--vm-n-700) !important; font-size: var(--vm-fs-sm) !important; font-weight: var(--vm-fw-sb) !important; cursor: pointer !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #form-view .contact-chips .chip:hover, body:not(.ws-marcas-active) #form-view .contact-chips button:hover { border-color: var(--vm-cyan) !important; color: var(--vm-cyan-d) !important; background: var(--vm-c-14) !important; } /* Feedback ortografía / verificar */ body:not(.ws-marcas-active) #form-view #btn-spell-curso { padding: 3px 10px !important; border-radius: var(--vm-r-full) !important; background: var(--vm-c-14) !important; color: var(--vm-cyan-d) !important; border: 1px solid var(--vm-c-22) !important; font-size: var(--vm-fs-xs) !important; font-weight: var(--vm-fw-b) !important; letter-spacing: -0.005em !important; } @media (max-width: 768px) { body:not(.ws-marcas-active) #form-view .main-content { padding: 20px 18px !important; } body:not(.ws-marcas-active) #form-view form { padding: 20px 18px 18px; border-radius: var(--vm-r-xl); } body:not(.ws-marcas-active) #form-view .btn-row { flex-direction: column-reverse; } body:not(.ws-marcas-active) #form-view .btn-row .btn { width: 100%; justify-content: center; } } /* ══ 13.9 · F115 · Publicadas + Galerías ══════════════════════════════════ Grid pro con cards uniformes. Filtros pill. Lazy loading (F50) preservado. */ body:not(.ws-marcas-active) #section-publicadas .sol-grid, body:not(.ws-marcas-active) #section-solicitudes .sol-grid, body:not(.ws-marcas-active) #section-pedidos .sol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 4px 0; } body:not(.ws-marcas-active) #section-publicadas .sol-card, body:not(.ws-marcas-active) #section-pedidos .sol-card { overflow: hidden !important; aspect-ratio: 4 / 5; } /* Chips de centro (publicadas / bandeja) con dot color */ body:not(.ws-marcas-active) #dashboard-view .chips .chip .centro-dot, body:not(.ws-marcas-active) #dashboard-view .chips .chip [style*="border-radius:50%"] { box-shadow: 0 0 0 2px currentColor; opacity: .9; } /* Sección Galerías (empleados-only) */ body:not(.ws-marcas-active) #section-galerias .gal-tabs, body:not(.ws-marcas-active) #section-galerias .galeria-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; padding: 6px; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-lg); box-shadow: var(--vm-sh-xs); width: fit-content; } body:not(.ws-marcas-active) #section-galerias button[data-tab], body:not(.ws-marcas-active) #section-galerias .gal-tab { padding: 8px 16px !important; border-radius: var(--vm-r-md) !important; border: none !important; background: transparent !important; color: var(--vm-n-600) !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-md) !important; font-weight: var(--vm-fw-b) !important; cursor: pointer !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; letter-spacing: -0.005em !important; } body:not(.ws-marcas-active) #section-galerias button[data-tab]:hover, body:not(.ws-marcas-active) #section-galerias .gal-tab:hover { background: var(--vm-v-08) !important; color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #section-galerias button[data-tab].active, body:not(.ws-marcas-active) #section-galerias .gal-tab.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; box-shadow: var(--vm-sh-v-sm); } /* Grid thumbnails galería */ body:not(.ws-marcas-active) #section-galerias .gal-grid, body:not(.ws-marcas-active) #section-galerias .galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } body:not(.ws-marcas-active) #section-galerias .gal-item, body:not(.ws-marcas-active) #section-galerias .galeria-item { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; overflow: hidden !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-galerias .gal-item:hover, body:not(.ws-marcas-active) #section-galerias .galeria-item:hover { transform: translateY(-3px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-md) !important; } /* Panel de Salud del Sistema (F45) */ body:not(.ws-marcas-active) #section-galerias .health-card, body:not(.ws-marcas-active) #section-galerias .limpieza-card { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-xl) !important; padding: 20px 22px !important; margin-bottom: 16px !important; box-shadow: var(--vm-sh-xs) !important; } body:not(.ws-marcas-active) #section-galerias .health-card h3, body:not(.ws-marcas-active) #section-galerias .limpieza-card h3 { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-lg) !important; font-weight: var(--vm-fw-eb) !important; color: var(--vm-n-900) !important; letter-spacing: -0.02em !important; margin-bottom: 10px !important; } /* ══ 13.10 · F116 · Catálogo (áreas + cursos) ══════════════════════════════ */ body:not(.ws-marcas-active) #section-catalogo .catalogo-centro-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; padding: 6px; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-lg); box-shadow: var(--vm-sh-xs); width: fit-content; } body:not(.ws-marcas-active) #section-catalogo .catalogo-tab-btn { padding: 9px 18px !important; border-radius: var(--vm-r-md) !important; border: none !important; background: transparent !important; color: var(--vm-n-600) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-b) !important; font-size: var(--vm-fs-md) !important; cursor: pointer !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; letter-spacing: -0.005em !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: none !important; } body:not(.ws-marcas-active) #section-catalogo .catalogo-tab-btn:hover { background: var(--vm-n-100) !important; color: var(--vm-n-900) !important; } body:not(.ws-marcas-active) #section-catalogo .catalogo-tab-btn.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border: none !important; box-shadow: var(--vm-sh-v-sm) !important; } body:not(.ws-marcas-active) #section-catalogo .catalogo-tab-btn .tab-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); } /* Área grid — cards limpias */ body:not(.ws-marcas-active) #section-catalogo .area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 4px 0; } body:not(.ws-marcas-active) #section-catalogo .area-card, body:not(.ws-marcas-active) #section-catalogo #catalogo-areas-grid > * { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-xl) !important; padding: 20px !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } body:not(.ws-marcas-active) #section-catalogo .area-card:hover, body:not(.ws-marcas-active) #section-catalogo #catalogo-areas-grid > *:hover { transform: translateY(-3px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-md) !important; } /* Cursos grid — más denso */ body:not(.ws-marcas-active) #section-catalogo .catalogo-courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } body:not(.ws-marcas-active) #section-catalogo .catalogo-courses-grid > * { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; padding: 16px 18px !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-catalogo .catalogo-courses-grid > *:hover { transform: translateY(-2px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-sm) !important; } /* Botón volver a áreas */ body:not(.ws-marcas-active) #section-catalogo #btn-back-catalogo { padding: 8px 14px !important; border-radius: var(--vm-r-md) !important; background: var(--vm-n-100) !important; border: 1px solid var(--vm-n-150) !important; color: var(--vm-n-700) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-sb) !important; font-size: var(--vm-fs-sm) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-catalogo #btn-back-catalogo:hover { background: var(--vm-v-08) !important; color: var(--vm-violet) !important; border-color: var(--vm-v-24) !important; } /* Botón eliminar área */ body:not(.ws-marcas-active) #section-catalogo #btn-delete-area { padding: 8px 14px !important; border-radius: var(--vm-r-md) !important; background: var(--vm-n-0) !important; border: 1px solid rgba(239, 68, 68, .25) !important; color: var(--vm-danger) !important; font-weight: var(--vm-fw-sb) !important; font-size: var(--vm-fs-sm) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-catalogo #btn-delete-area:hover { background: rgba(239, 68, 68, .08) !important; border-color: var(--vm-danger) !important; } /* Búsqueda catálogo */ body:not(.ws-marcas-active) #section-catalogo #catalogo-search { width: 260px !important; } /* ══ 13.11 · F117 · Republicar + Registro + Calendario ═══════════════════ */ /* Republicar (aunque escondimos el nav-item, la sección sigue accesible) */ body:not(.ws-marcas-active) #section-republicar .republicar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } body:not(.ws-marcas-active) #section-republicar .republicar-card { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-xl) !important; overflow: hidden !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; cursor: pointer !important; } body:not(.ws-marcas-active) #section-republicar .republicar-card:hover { transform: translateY(-3px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-md) !important; } /* Registro — timeline visual */ body:not(.ws-marcas-active) #section-registro .registro-item, body:not(.ws-marcas-active) #section-registro .reg-item { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; padding: 14px 18px !important; margin-bottom: 10px !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; display: flex !important; align-items: center !important; gap: 14px !important; } body:not(.ws-marcas-active) #section-registro .registro-item:hover, body:not(.ws-marcas-active) #section-registro .reg-item:hover { border-color: var(--vm-v-18) !important; transform: translateX(2px); } /* Calendario */ body:not(.ws-marcas-active) #section-calendario .cal-grid, body:not(.ws-marcas-active) #section-calendario .calendario-grid { background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-xl); overflow: hidden; box-shadow: var(--vm-sh-xs); } body:not(.ws-marcas-active) #section-calendario .cal-day, body:not(.ws-marcas-active) #section-calendario .calendario-day { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-100) !important; padding: 10px !important; transition: background var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-calendario .cal-day:hover, body:not(.ws-marcas-active) #section-calendario .calendario-day:hover { background: var(--vm-v-04) !important; } body:not(.ws-marcas-active) #section-calendario .cal-day.today, body:not(.ws-marcas-active) #section-calendario .cal-day.hoy { background: var(--vm-v-08) !important; border-color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #section-calendario .cal-day-num, body:not(.ws-marcas-active) #section-calendario .calendario-day-num { font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-eb) !important; color: var(--vm-n-900) !important; letter-spacing: -0.02em !important; } /* ══ 13.12 · F118 · Configuración (cards categorizadas) ═══════════════════ */ body:not(.ws-marcas-active) #section-config .config-card, body:not(.ws-marcas-active) #section-config .cfg-card { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-xl) !important; padding: 20px 22px !important; margin-bottom: 16px !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-config .config-card:hover, body:not(.ws-marcas-active) #section-config .cfg-card:hover { border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-sm) !important; } body:not(.ws-marcas-active) #section-config .config-card h3, body:not(.ws-marcas-active) #section-config .cfg-card h3, body:not(.ws-marcas-active) #section-config .config-card-title { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-lg) !important; font-weight: var(--vm-fw-eb) !important; color: var(--vm-n-900) !important; letter-spacing: -0.025em !important; margin-bottom: 8px !important; line-height: 1.2 !important; } body:not(.ws-marcas-active) #section-config .config-card-desc, body:not(.ws-marcas-active) #section-config .config-card p:not(strong) { font-size: var(--vm-fs-md); color: var(--vm-n-500); line-height: 1.5; margin-bottom: 12px; letter-spacing: -0.005em; } /* Suspensión de servicio (F108) */ body:not(.ws-marcas-active) #section-config .susp-row { padding: 14px 16px !important; background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; margin-bottom: 8px !important; } body:not(.ws-marcas-active) #section-config .susp-badge.active, body:not(.ws-marcas-active) #section-config .susp-badge-verde { background: rgba(16, 185, 129, .12) !important; color: #059669 !important; border: 1px solid rgba(16, 185, 129, .28) !important; border-radius: var(--vm-r-full) !important; padding: 4px 10px !important; font-weight: var(--vm-fw-b) !important; font-size: var(--vm-fs-xs) !important; } body:not(.ws-marcas-active) #section-config .susp-badge.suspended, body:not(.ws-marcas-active) #section-config .susp-badge-rojo { background: rgba(239, 68, 68, .12) !important; color: #dc2626 !important; border: 1px solid rgba(239, 68, 68, .28) !important; border-radius: var(--vm-r-full) !important; padding: 4px 10px !important; font-weight: var(--vm-fw-b) !important; font-size: var(--vm-fs-xs) !important; } /* IA prompts (F26) */ body:not(.ws-marcas-active) #section-config .prompt-card, body:not(.ws-marcas-active) #section-config .ia-prompt-card { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; padding: 14px 16px !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-config .prompt-card:hover, body:not(.ws-marcas-active) #section-config .ia-prompt-card:hover { border-color: var(--vm-v-18) !important; } /* Áreas manage modal */ body:not(.ws-marcas-active) #areas-manage-modal .area-row, body:not(.ws-marcas-active) #areas-manage-modal .area-manage-row { padding: 12px 14px !important; background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-md) !important; margin-bottom: 6px !important; display: flex !important; align-items: center !important; gap: 10px !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #areas-manage-modal .area-row:hover, body:not(.ws-marcas-active) #areas-manage-modal .area-manage-row:hover { border-color: var(--vm-v-24) !important; background: var(--vm-v-04) !important; } /* ══ 13.13 · F119 · Polish + Mobile refinements + Modales globales ═══════ */ /* Modal wrapper — todos los modales heredan look consistente */ body:not(.ws-marcas-active) .modal.show { background: rgba(15, 23, 42, .45) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } body:not(.ws-marcas-active) .modal .modal-content { border-radius: var(--vm-r-2xl) !important; border: 1px solid var(--vm-n-150) !important; box-shadow: var(--vm-sh-lg) !important; overflow: hidden !important; } body:not(.ws-marcas-active) .modal .modal-header { padding: 20px 24px 16px !important; border-bottom: 1px solid var(--vm-n-150) !important; background: var(--vm-n-0) !important; } body:not(.ws-marcas-active) .modal .modal-title { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-lg) !important; font-weight: var(--vm-fw-eb) !important; color: var(--vm-n-900) !important; letter-spacing: -0.025em !important; } body:not(.ws-marcas-active) .modal .modal-title i { color: var(--vm-violet) !important; } body:not(.ws-marcas-active) .modal .modal-body { padding: 20px 24px !important; } body:not(.ws-marcas-active) .modal .modal-footer { padding: 16px 24px !important; border-top: 1px solid var(--vm-n-150) !important; background: var(--vm-n-50) !important; display: flex !important; gap: 10px !important; justify-content: flex-end !important; } /* Emoji bar (F18/F38) — más pulida */ body:not(.ws-marcas-active) .emoji-bar { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; padding: 8px !important; background: var(--vm-n-50) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-md) !important; margin-bottom: 8px !important; } body:not(.ws-marcas-active) .emoji-btn { width: 28px !important; height: 28px !important; border-radius: var(--vm-r-sm) !important; background: transparent !important; border: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; transition: all var(--vm-dur-1) var(--vm-ease) !important; } body:not(.ws-marcas-active) .emoji-btn:hover { background: var(--vm-v-08) !important; transform: scale(1.15); } /* Empty state legacy */ body:not(.ws-marcas-active) #dashboard-view .empty-state { text-align: center; padding: 60px 24px; color: var(--vm-n-500); font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); background: var(--vm-n-0); border: 1px solid var(--vm-n-200); border-radius: var(--vm-r-xl); } /* Search dropdown (buscador global) */ body:not(.ws-marcas-active) #dashboard-view .search-dropdown { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; box-shadow: var(--vm-sh-md) !important; padding: 6px !important; margin-top: 6px !important; } body:not(.ws-marcas-active) #dashboard-view .search-dropdown > *, body:not(.ws-marcas-active) #dashboard-view .search-result-item { padding: 10px 12px !important; border-radius: var(--vm-r-md) !important; transition: background var(--vm-dur-1) var(--vm-ease) !important; } body:not(.ws-marcas-active) #dashboard-view .search-dropdown > *:hover, body:not(.ws-marcas-active) #dashboard-view .search-result-item:hover { background: var(--vm-v-08) !important; } /* Refinamientos mobile globales */ @media (max-width: 768px) { body:not(.ws-marcas-active) #dashboard-view .main-content { padding: 16px 16px 100px !important; } body:not(.ws-marcas-active) #dashboard-view .page-header { flex-direction: column !important; align-items: flex-start !important; padding-bottom: 12px !important; margin-bottom: 14px !important; } body:not(.ws-marcas-active) #dashboard-view .page-header .page-title { font-size: 20px !important; } .desk-bento { gap: 10px !important; } #section-home .desk-hero { padding: 4px 0 14px !important; } .vm-page-header { padding-bottom: 12px !important; margin-bottom: 14px !important; } body:not(.ws-marcas-active) .modal .modal-content { max-width: 96vw !important; width: 96vw !important; max-height: 88vh !important; border-radius: var(--vm-r-xl) !important; } body:not(.ws-marcas-active) .modal .modal-header { padding: 14px 18px !important; } body:not(.ws-marcas-active) .modal .modal-body { padding: 16px 18px !important; } body:not(.ws-marcas-active) .modal .modal-footer { padding: 12px 18px !important; } } /* Refinamientos ULTRA mobile (iPhone SE / mini) */ @media (max-width: 380px) { body:not(.ws-marcas-active) #dashboard-view .main-content { padding: 12px 12px 100px !important; } body:not(.ws-marcas-active) #dashboard-view .page-header .page-title { font-size: 18px !important; } .vm-fab { right: 12px; bottom: 12px; width: 52px; height: 52px; font-size: 18px; } } /* Dark mode del panel INTECAP (via data-theme) — respeta paleta obligatoria */ html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view { color: var(--vm-n-0); } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .app-layout, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .main-content { background: #0a0616 !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .sidebar, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .modal .modal-content, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .vm-card, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .sol-card, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-tile-md, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-tile-alt, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-chip { background: #12082e !important; border-color: rgba(196, 181, 253, .15) !important; color: var(--vm-n-0) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .page-title, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-hero-title, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .sol-modal-title { color: var(--vm-n-0) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .page-subtitle, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-hero-subtitle { color: rgba(196, 181, 253, .7) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .nav-item { color: rgba(196, 181, 253, .78) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .nav-item:hover { background: rgba(94, 44, 237, .22) !important; color: var(--vm-n-0) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .input, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .textarea { background: rgba(255, 255, 255, .04) !important; border-color: rgba(196, 181, 253, .18) !important; color: var(--vm-n-0) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .chip { background: rgba(255, 255, 255, .04) !important; border-color: rgba(196, 181, 253, .18) !important; color: rgba(196, 181, 253, .78) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .chip.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border-color: var(--vm-violet) !important; } html[data-theme="dark"] .vm-toast-container .vm-toast { background: #1a103d !important; border: 1px solid rgba(196, 181, 253, .18); } /* ══════════════════════════════════════════════════════════════════════════ ═════════ PARTE 1 · BANDEJA — REDISEÑO INTEGRAL (F120) ═════════════════ Tabla densa + toggle Cards · Bulk selection · Drawer preview lateral Imágenes con aspect-ratio controlado. Layout compacto sin scroll infinito. ══════════════════════════════════════════════════════════════════════════ */ /* Container principal de la sección */ body:not(.ws-marcas-active) #section-pedidos { max-width: 1400px; margin: 0 auto; } /* Hero minimal — 1 título + acciones. Sin eyebrow, sin subtítulo redundante. */ .vm-bandeja-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--vm-n-150); margin-bottom: 14px; } .vm-bandeja-title { font-family: var(--vm-font-sans); font-size: 22px; font-weight: var(--vm-fw-bl); letter-spacing: -0.03em; color: var(--vm-n-900); line-height: 1.1; margin: 0; display: inline-flex; align-items: baseline; gap: 10px; } .vm-bandeja-count-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--vm-r-full); background: var(--vm-v-08); color: var(--vm-violet); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); letter-spacing: -0.005em; line-height: 1.4; } .vm-bandeja-actions { display: flex; align-items: center; gap: 8px; } /* View toggle (Tabla / Cards) */ .vm-view-toggle { display: inline-flex; padding: 4px; border-radius: var(--vm-r-md); background: var(--vm-n-100); border: 1px solid var(--vm-n-150); } .vm-view-btn { width: 32px; height: 30px; border-radius: var(--vm-r-sm); background: transparent; border: none; color: var(--vm-n-500); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: var(--vm-fs-md); transition: all var(--vm-dur-2) var(--vm-ease); } .vm-view-btn:hover { color: var(--vm-n-900); } .vm-view-btn.active { background: var(--vm-n-0); color: var(--vm-violet); box-shadow: var(--vm-sh-xs); } /* Filtros — 1 sola fila unificada con separador entre grupos */ .vm-bandeja-filters { margin-bottom: 14px; } .vm-chips-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .vm-chips-sep { display: inline-block; width: 1px; height: 20px; background: var(--vm-n-200); margin: 0 4px; flex-shrink: 0; } .vm-centro-dot, .vm-estado-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } body:not(.ws-marcas-active) #section-pedidos .chip { padding: 5px 11px !important; font-size: var(--vm-fs-sm) !important; } /* Bulk action bar */ .vm-bulk-bar { display: none; align-items: center; gap: 10px; padding: 10px 16px; background: var(--vm-violet); color: var(--vm-n-0); border-radius: var(--vm-r-lg); margin-bottom: 14px; box-shadow: var(--vm-sh-v-sm); animation: vmBulkIn .3s var(--vm-ease-b); } .vm-bulk-bar.active { display: flex; } @keyframes vmBulkIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .vm-bulk-count { font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); font-weight: var(--vm-fw-m); letter-spacing: -0.005em; } .vm-bulk-count strong { font-weight: var(--vm-fw-eb); } .vm-bulk-btn { padding: 6px 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--vm-r-full); color: var(--vm-n-0); font-family: var(--vm-font-sans); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); cursor: pointer; transition: background var(--vm-dur-1) var(--vm-ease); display: inline-flex; align-items: center; gap: 6px; letter-spacing: -0.005em; } .vm-bulk-btn:hover { background: rgba(255, 255, 255, .22); } .vm-bulk-btn i { font-size: 11px; } .vm-bulk-close { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: none; color: var(--vm-n-0); cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; transition: background var(--vm-dur-1) var(--vm-ease); } .vm-bulk-close:hover { background: rgba(255, 255, 255, .28); } /* ═══ TABLA densa (vista por defecto) ═══ */ .vm-bandeja-content.vm-view-table { background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-xl); overflow: hidden; box-shadow: var(--vm-sh-xs); } .vm-table { width: 100%; border-collapse: collapse; font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); } .vm-table thead th { background: var(--vm-n-50); padding: 10px 14px; text-align: left; font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); letter-spacing: .1em; text-transform: none; border-bottom: 1px solid var(--vm-n-150); white-space: nowrap; } .vm-table thead th:first-child { padding-left: 18px; width: 44px; } .vm-table thead th:last-child { padding-right: 18px; } .vm-table tbody tr { border-bottom: 1px solid var(--vm-n-100); transition: background var(--vm-dur-1) var(--vm-ease); cursor: pointer; } .vm-table tbody tr:last-child { border-bottom: none; } .vm-table tbody tr:hover { background: var(--vm-v-04); } .vm-table tbody tr.vm-row-selected { background: var(--vm-v-08) !important; } .vm-table tbody td { padding: 12px 14px; color: var(--vm-n-900); vertical-align: middle; letter-spacing: -0.005em; } .vm-table tbody td:first-child { padding-left: 18px; } .vm-table tbody td:last-child { padding-right: 18px; } /* Checkbox custom */ .vm-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: var(--vm-n-0); border: 1.5px solid var(--vm-n-300); cursor: pointer; transition: all var(--vm-dur-1) var(--vm-ease); vertical-align: middle; } .vm-check:hover { border-color: var(--vm-violet); } .vm-check.vm-check-on { background: var(--vm-violet); border-color: var(--vm-violet); color: var(--vm-n-0); } .vm-check.vm-check-on::after { content: '✓'; font-size: 11px; font-weight: var(--vm-fw-eb); line-height: 1; } /* Centro cell (dot + label) */ .vm-td-centro { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--vm-fw-m); } .vm-td-centro .vm-centro-dot { margin: 0; box-shadow: 0 0 0 2px var(--vm-n-0); } .vm-td-curso { font-weight: var(--vm-fw-b); color: var(--vm-n-900); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vm-td-id { font-family: var(--vm-font-mono); font-size: 11px; color: var(--vm-n-500); } .vm-td-time { color: var(--vm-n-500); font-size: var(--vm-fs-sm); white-space: nowrap; } /* Estado badge en tabla */ .vm-badge-estado { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--vm-r-full); font-size: 10.5px; font-weight: var(--vm-fw-b); letter-spacing: -0.005em; white-space: nowrap; } .vm-badge-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Empty state de tabla */ .vm-empty-inline { padding: 60px 24px; text-align: center; color: var(--vm-n-500); } .vm-empty-inline .vm-empty-icon { margin: 0 auto 14px; } /* ═══ CARDS (toggle a vista tarjetas) ═══ */ .vm-bandeja-content.vm-view-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 14px !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Cards con aspect-ratio fijo para que las imágenes no queden gigantes */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card { aspect-ratio: 3 / 4 !important; height: auto !important; min-height: 0 !important; border-radius: var(--vm-r-xl) !important; overflow: hidden !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card-bg-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } /* ═══ DRAWER preview lateral ═══ */ .vm-drawer { position: fixed; inset: 0; z-index: 850; pointer-events: none; visibility: hidden; } .vm-drawer.vm-drawer-open { pointer-events: auto; visibility: visible; } .vm-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--vm-dur-3) var(--vm-ease); } .vm-drawer.vm-drawer-open .vm-drawer-backdrop { opacity: 1; } .vm-drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--vm-n-0); border-left: 1px solid var(--vm-n-150); box-shadow: -20px 0 40px -12px rgba(15, 23, 42, .15); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--vm-dur-3) var(--vm-ease); } .vm-drawer.vm-drawer-open .vm-drawer-panel { transform: translateX(0); } .vm-drawer-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--vm-n-150); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; background: var(--vm-n-50); flex-shrink: 0; } .vm-drawer-eyebrow { font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-violet); letter-spacing: .18em; text-transform: none; margin-bottom: 4px; } .vm-drawer-title { font-family: var(--vm-font-sans); font-size: var(--vm-fs-xl); font-weight: var(--vm-fw-bl); letter-spacing: -0.025em; color: var(--vm-n-900); line-height: 1.15; } .vm-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px 28px; scrollbar-width: thin; scrollbar-color: var(--vm-n-200) transparent; } .vm-drawer-body::-webkit-scrollbar { width: 5px; } .vm-drawer-body::-webkit-scrollbar-thumb { background: var(--vm-n-200); border-radius: 3px; } /* Preview imagen en drawer — controlada */ .vm-drawer-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--vm-r-lg); overflow: hidden; background: var(--vm-n-100); margin-bottom: 16px; } .vm-drawer-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .vm-drawer-preview .vm-drawer-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--vm-n-400); font-size: var(--vm-fs-sm); } .vm-drawer-meta { display: flex; align-items: center; gap: 8px; color: var(--vm-n-500); font-size: var(--vm-fs-sm); margin-bottom: 20px; } .vm-drawer-meta .vm-centro-dot { margin: 0; box-shadow: none; } .vm-drawer-section { margin-bottom: 20px; } .vm-drawer-section-label { font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); letter-spacing: .12em; text-transform: none; margin-bottom: 10px; } .vm-drawer-ficha-row { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0; font-size: var(--vm-fs-md); border-bottom: 1px solid var(--vm-n-100); gap: 12px; } .vm-drawer-ficha-row:last-child { border-bottom: none; } .vm-drawer-ficha-row .k { color: var(--vm-n-500); font-weight: var(--vm-fw-m); } .vm-drawer-ficha-row .v { color: var(--vm-n-900); font-weight: var(--vm-fw-b); text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vm-drawer-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .vm-drawer-actions .vm-btn { width: auto; justify-content: center; } .vm-drawer-actions-row { display: flex; flex-wrap: wrap; gap: 8px; } /* ═══ MOBILE ═══ */ @media (max-width: 900px) { .vm-bandeja-hero { flex-direction: column; align-items: stretch; gap: 12px; } .vm-bandeja-actions { justify-content: flex-end; } .vm-table thead { display: none; } .vm-table tbody tr { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; padding: 12px 14px; align-items: center; } .vm-table tbody td { padding: 0; border: none; } .vm-table tbody td.vm-td-check { grid-row: 1 / span 2; } .vm-table tbody td.vm-td-curso { grid-column: 2; grid-row: 1; font-size: var(--vm-fs-md); } .vm-table tbody td.vm-td-centro { grid-column: 2; grid-row: 2; font-size: var(--vm-fs-sm); color: var(--vm-n-500); } .vm-table tbody td.vm-td-estado { grid-column: 3; grid-row: 1 / span 2; } .vm-table tbody td.vm-td-time, .vm-table tbody td.vm-td-id { display: none; } .vm-drawer-panel { max-width: 100%; border-left: none; } } @media (max-width: 520px) { .vm-bandeja-title { font-size: 22px !important; } .vm-view-toggle { padding: 3px; } .vm-view-btn { width: 30px; height: 28px; font-size: var(--vm-fs-sm); } } /* ══════════════════════════════════════════════════════════════════════════ ═════════ PARTE 2 · WORKSPACE SOLICITUD MODAL — REDISEÑO (F120c) ═══════ Header limpio con X icon-only · Tabs pill segmentadas · Body scroll interno Imagen izquierda con aspect-ratio fijo · Sin gaps gigantes · Modal contenido Preserva IDs: solicitud-modal, sol-modal-title, sol-modal-badge, sol-tab-*, sol-panel-*, sol-media-main, btn-close-solicitud. Aditivo sobre inline styles. ══════════════════════════════════════════════════════════════════════════ */ /* ═══ MODAL CENTRADO KONTAGO (F122 · reemplaza drawer F120d) ═══ Modal centrado 1280×880 · sidebar interno 200px con rail iconos + acciones · backdrop blur 14px fuerte para foco al modal. */ body #solicitud-modal.modal.show.vm-ws-modal-centered { place-items: center !important; padding: 24px !important; background: rgba(15, 23, 42, .42) !important; backdrop-filter: blur(14px) saturate(120%) !important; -webkit-backdrop-filter: blur(14px) saturate(120%) !important; } @media (max-width: 700px) { body #solicitud-modal.modal.show.vm-ws-modal-centered { place-items: stretch !important; padding: 0 !important; } } /* Container: modal grande centrado con sidebar interno + panel principal */ body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { max-width: 1280px !important; width: 100% !important; height: 100% !important; max-height: 90vh !important; padding: 0 !important; border-radius: 20px !important; background: var(--gk-sur, #ffffff) !important; border: 1px solid var(--gk-ln, #e4e4e7) !important; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .28), 0 4px 16px -4px rgba(0, 0, 0, .14) !important; display: grid !important; grid-template-columns: 200px minmax(0, 1fr) !important; grid-template-rows: 76px minmax(0, 1fr) !important; grid-template-areas: "sidebar header" "sidebar body" !important; overflow: hidden !important; justify-self: center !important; animation: vmWsScaleIn .24s cubic-bezier(.22, 1, .36, 1); } @keyframes vmWsScaleIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Mobile: full-screen sin border */ @media (max-width: 900px) { body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { max-width: 100vw !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; /* (SUPERADO por ESTUDIO DE FICHA · el apilado móvil lo define el @media 980 del bloque final) grid-template-columns: 160px minmax(0, 1fr) !important; grid-template-rows: 60px minmax(0, 1fr) !important; */ } } /* (SUPERADO por ESTUDIO DE FICHA) @media (max-width: 640px) { body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { grid-template-columns: 76px minmax(0, 1fr) !important; } } */ /* Header — grid area · panel derecho: barra violeta + h1 + subtítulo + X */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-header { grid-area: header !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 20px 28px !important; border-bottom: 1px solid var(--gk-ln, #e4e4e7) !important; background: var(--gk-sur, #ffffff) !important; margin: 0 !important; text-align: left !important; position: relative !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-header::before { content: ''; position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 3px; height: 32px; background: var(--gk-a, #5e2ced); border-radius: 2px; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-head-content { padding-left: 16px; flex: 1; min-width: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-title { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 900; letter-spacing: -0.025em; color: var(--gk-ink, #0a0a0b); line-height: 1.2; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-sub { font-size: 12.5px; color: var(--gk-ink3, #71717a); margin-top: 3px; font-weight: 500; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-close { width: 34px; height: 34px; border-radius: 999px; background: var(--gk-sur2, #f1f1f4); border: none; color: var(--gk-ink3, #71717a); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: all var(--gk-t-fast, 150ms) var(--gk-ease); flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-close:hover { background: var(--gk-red-s, rgba(220,38,38,.08)); color: var(--gk-red, #dc2626); } /* ═══ SIDEBAR INTERNO (200px izquierda) ═══ */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sidebar { grid-area: sidebar !important; background: var(--gk-sur2, #f1f1f4) !important; border-right: 1px solid var(--gk-ln, #e4e4e7) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* Header del sidebar: avatar + curso + centro + estado */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-head { padding: 20px 16px 18px !important; border-bottom: 1px solid var(--gk-ln, #e4e4e7) !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 6px !important; flex-shrink: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-avatar { width: 44px !important; height: 44px !important; border-radius: 11px !important; background: color-mix(in srgb, var(--gk-a, #5e2ced) 15%, white) !important; color: var(--gk-a, #5e2ced) !important; font-family: 'Geist', 'Inter', system-ui, sans-serif !important; font-size: 15px !important; font-weight: 900 !important; display: grid !important; place-items: center !important; margin-bottom: 4px !important; letter-spacing: -0.02em !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-title { font-family: 'Geist', 'Inter', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 800 !important; color: var(--gk-ink, #0a0a0b) !important; letter-spacing: -0.015em !important; line-height: 1.25 !important; max-width: 100% !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; padding: 0 !important; background: none !important; border: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-meta { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 10px !important; color: var(--gk-ink4, #a1a1aa) !important; letter-spacing: 0.03em !important; margin-top: 2px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-badge { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: none !important; margin-top: 6px !important; background: color-mix(in srgb, var(--gk-a, #5e2ced) 10%, white) !important; color: var(--gk-a, #5e2ced) !important; border: 1px solid color-mix(in srgb, var(--gk-a, #5e2ced) 22%, white) !important; } /* Section labels del sidebar */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { font-size: 9.5px; font-weight: 800; text-transform: none; letter-spacing: 0.1em; color: var(--gk-ink4, #a1a1aa); padding: 14px 20px 6px; flex-shrink: 0; } /* Rail vertical de tabs — reusa clases sol-modal-tabs pero re-styled aquí */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 3px !important; padding: 4px 10px !important; border: none !important; background: transparent !important; overflow-y: auto; overflow-x: hidden !important; scrollbar-width: none; flex: 1 !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail::-webkit-scrollbar { display: none; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; min-height: 62px !important; padding: 10px 6px !important; border-radius: 10px !important; background: transparent !important; border: 1px solid transparent !important; font-family: 'Geist', 'Inter', system-ui, sans-serif !important; color: var(--gk-ink3, #71717a) !important; cursor: pointer !important; transition: all var(--gk-t-fast, 150ms) var(--gk-ease) !important; flex-shrink: 0 !important; margin: 0 !important; text-align: center !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab:hover:not(.active) { background: var(--gk-sur, #ffffff) !important; color: var(--gk-ink, #0a0a0b) !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab.active { background: var(--gk-sur, #ffffff) !important; color: var(--gk-a, #5e2ced) !important; border-color: color-mix(in srgb, var(--gk-a, #5e2ced) 20%, white) !important; box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--gk-a, #5e2ced) 20%, transparent) !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab i { font-size: 18px !important; margin: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-rail-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: -0.005em !important; line-height: 1 !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab-count { position: absolute !important; top: 8px !important; right: 10px !important; display: inline-flex !important; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab.active .sol-modal-tab-count { background: var(--gk-a, #5e2ced); } /* Footer del sidebar: botón WhatsApp */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-footer { padding: 12px 12px 14px; border-top: 1px solid var(--gk-ln, #e4e4e7); flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px; background: #fff; color: var(--gk-ink, #18181b); border: 1px solid var(--gk-ln, #e4e4e7); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter var(--gk-t-fast) var(--gk-ease); letter-spacing: -0.005em; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp:hover { background: var(--gk-bg, #f7f7f8); border-color: #22c55e; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp i { font-size: 15px; color: #22c55e; } /* Mobile: sidebar más compacto */ @media (max-width: 640px) { body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-head { padding: 12px 8px 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-title { font-size: 11px !important; -webkit-line-clamp: 3 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-meta, body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-badge, body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab i { font-size: 16px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-rail-label { font-size: 9.5px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp span { display: none !important; } } .vm-ws-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .vm-ws-eyebrow { font-family: var(--vm-font-sans); font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-violet); letter-spacing: .15em; text-transform: none; } .vm-ws-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .vm-ws-heading { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .vm-ws-content .sol-modal-title { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-xl) !important; font-weight: var(--vm-fw-bl) !important; letter-spacing: -0.025em !important; color: var(--vm-n-900) !important; line-height: 1.2 !important; padding: 0 !important; border: none !important; background: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vm-ws-content .sol-modal-title i { display: none; } .vm-ws-badge { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; border-radius: var(--vm-r-full) !important; font-size: 10.5px !important; font-weight: var(--vm-fw-b) !important; letter-spacing: -0.005em !important; background: var(--vm-v-08) !important; color: var(--vm-violet) !important; border: none !important; white-space: nowrap; flex-shrink: 0; } .vm-ws-close { width: 34px; height: 34px; border-radius: var(--vm-r-md); background: var(--vm-n-0); border: 1px solid var(--vm-n-150); color: var(--vm-n-500); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: var(--vm-fs-md); transition: all var(--vm-dur-2) var(--vm-ease); flex-shrink: 0; } .vm-ws-close:hover { background: var(--vm-n-100); color: var(--vm-n-900); border-color: var(--vm-n-200); } /* Rail vertical de tabs (F120d obsoleto — reemplazado por F122 arriba, dejo por compat) */ body #solicitud-modal.vm-ws-split-mode.legacy-only .sol-modal-tabs.vm-ws-rail { grid-area: rail !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; padding: 14px 6px !important; border-right: 1px solid var(--vm-n-150) !important; border-bottom: none !important; background: var(--vm-n-50) !important; overflow-y: auto; overflow-x: hidden !important; scrollbar-width: none; height: auto !important; width: 68px !important; text-align: center !important; } body #solicitud-modal.vm-ws-split-mode .sol-modal-tabs.vm-ws-rail::-webkit-scrollbar { display: none; } body #solicitud-modal.vm-ws-split-mode .sol-modal-tab { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; width: 56px !important; height: 60px !important; padding: 6px 4px !important; border-radius: var(--vm-r-md) !important; background: transparent !important; border: 1px solid transparent !important; font-family: var(--vm-font-sans) !important; color: var(--vm-n-500) !important; cursor: pointer !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; flex-shrink: 0 !important; margin: 0 !important; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab:hover:not(.active) { background: var(--vm-n-100) !important; color: var(--vm-n-900) !important; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border-color: var(--vm-violet) !important; box-shadow: var(--vm-sh-v-sm) !important; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab i { font-size: 16px !important; margin: 0 !important; } .vm-ws-rail-label { font-size: 9.5px; font-weight: var(--vm-fw-b); letter-spacing: -0.005em; line-height: 1; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab-count { position: absolute !important; top: 4px !important; right: 4px !important; display: inline-flex !important; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--vm-r-full); background: #ef4444; color: var(--vm-n-0); font-size: 9px; font-weight: var(--vm-fw-eb); } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab.active .sol-modal-tab-count { background: rgba(255, 255, 255, .28); color: var(--vm-n-0); } /* Body — scroll interno · Modal centrado F122 usa grid area body */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-body { grid-area: body !important; padding: 24px 32px 28px !important; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; min-width: 0 !important; background: var(--gk-sur, #ffffff) !important; scrollbar-width: thin; scrollbar-color: var(--gk-ln2, #d4d4d8) transparent; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-body::-webkit-scrollbar { width: 6px; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-body::-webkit-scrollbar-thumb { background: var(--gk-ln2, #d4d4d8); border-radius: 3px; } @media (max-width: 640px) { body #solicitud-modal.vm-ws-modal-centered .sol-modal-body { padding: 16px 14px 20px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-header { padding: 12px 16px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-header::before { left: 16px; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-head-content { padding-left: 10px; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-title { font-size: 16px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-sub { font-size: 11px !important; } } /* Grid ficha — 2 columnas: media izquierda + editor derecha */ .vm-ws-content .ficha-grid { display: grid !important; grid-template-columns: minmax(0, 340px) minmax(0, 1fr) !important; gap: 20px !important; align-items: start !important; } /* Media frame izquierdo — imagen con aspect-ratio 4/5 FIJO (no gigante) */ .vm-ws-content .media-frame { width: 100% !important; aspect-ratio: 4 / 5 !important; max-height: 460px !important; min-height: 260px !important; border-radius: var(--vm-r-lg) !important; overflow: hidden !important; background: var(--vm-n-100) !important; border: 1px solid var(--vm-n-150) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .vm-ws-content .media-frame img, .vm-ws-content .media-frame video { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } .vm-ws-content .media-frame .empty-state { color: var(--vm-n-400) !important; font-size: var(--vm-fs-sm) !important; text-align: center; padding: 20px !important; } /* Preview grid debajo — thumbnails cuadrados pequeños */ .vm-ws-content .preview-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important; gap: 6px !important; margin-top: 10px !important; } .vm-ws-content .preview-grid img, .vm-ws-content .preview-grid video { width: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: var(--vm-r-sm) !important; cursor: pointer !important; border: 1.5px solid transparent !important; transition: border-color var(--vm-dur-1) var(--vm-ease) !important; } .vm-ws-content .preview-grid img:hover, .vm-ws-content .preview-grid video:hover { border-color: var(--vm-violet) !important; } /* Botones dentro del modal — override .btn a estética consistente */ .vm-ws-content .btn { border-radius: var(--vm-r-md) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-b) !important; letter-spacing: -0.005em !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } .vm-ws-content .btn.btn-primary { background: var(--vm-violet) !important; border-color: var(--vm-violet) !important; box-shadow: var(--vm-sh-v-sm) !important; } .vm-ws-content .btn.btn-primary:hover { background: var(--vm-v-700) !important; border-color: var(--vm-v-700) !important; } .vm-ws-content .btn.btn-ghost { background: transparent !important; border: 1px solid var(--vm-n-150) !important; color: var(--vm-n-700) !important; } .vm-ws-content .btn.btn-ghost:hover { background: var(--vm-n-100) !important; color: var(--vm-n-900) !important; } .vm-ws-content .btn.btn-secondary { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; } .vm-ws-content .btn.btn-secondary:hover { background: var(--vm-n-50) !important; border-color: var(--vm-n-300) !important; } .vm-ws-content .btn.btn-warning { background: #fbbf24 !important; border: none !important; color: #78350f !important; } /* Textarea y select — consistencia */ .vm-ws-content .textarea, .vm-ws-content .input, .vm-ws-content .select { border-radius: var(--vm-r-md) !important; border: 1px solid var(--vm-n-200) !important; font-family: var(--vm-font-sans) !important; transition: border-color var(--vm-dur-1) var(--vm-ease), box-shadow var(--vm-dur-1) var(--vm-ease) !important; } .vm-ws-content .textarea:focus, .vm-ws-content .input:focus, .vm-ws-content .select:focus { border-color: var(--vm-violet) !important; outline: none !important; box-shadow: 0 0 0 3px var(--vm-v-08) !important; } /* Panels dentro de tabs — respirar sin gaps gigantes */ .vm-ws-content .sol-tab-panel { min-height: 0; } .vm-ws-content .sol-tab-panel .btn-row { gap: 6px !important; flex-wrap: wrap !important; margin-top: 10px !important; } /* Modo subir (paso 0) — cards centrados sin whitespace gigante */ .vm-ws-content #subir-paso0 { padding-top: 8px !important; } .vm-ws-content #subir-paso0 > p { margin: 0 0 12px !important; color: var(--vm-n-500) !important; font-size: var(--vm-fs-md) !important; } /* Emoji bar — más compacta */ .vm-ws-content .emoji-bar { border-radius: var(--vm-r-md) var(--vm-r-md) 0 0 !important; border-color: var(--vm-n-150) !important; background: var(--vm-n-50) !important; padding: 6px !important; gap: 2px !important; } .vm-ws-content .emoji-btn { width: 26px !important; height: 26px !important; border-radius: 6px !important; border: none !important; background: transparent !important; cursor: pointer !important; transition: background var(--vm-dur-1) var(--vm-ease) !important; font-size: 14px !important; padding: 0 !important; } .vm-ws-content .emoji-btn:hover { background: var(--vm-n-100) !important; } /* ═══ MOBILE ═══ */ @media (max-width: 820px) { .vm-ws-content .ficha-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .vm-ws-content .media-frame { max-height: 320px !important; aspect-ratio: 4 / 3 !important; } .vm-ws-content .sol-modal-tabs { padding: 8px 14px !important; } .vm-ws-content .sol-modal-body { padding: 14px 14px 18px !important; } .vm-ws-header { padding: 12px 14px !important; } } @media (max-width: 520px) { .vm-ws-content .sol-modal-tab { padding: 6px 10px !important; font-size: 12px !important; } .vm-ws-content .sol-modal-tab i { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ PARTE 2b · Design system del workspace modal — átomos compactos Toda clase `.vm-ws-*` reemplaza los inline styles gigantes anteriores. ══════════════════════════════════════════════════════════════════════════ */ /* Panel base — sin gaps innecesarios */ .vm-ws-panel { display: flex; flex-direction: column; gap: 12px; } .vm-ws-panel > *:last-child { margin-bottom: 0; } /* Labels de campo — eyebrow discreto no gigante */ .vm-ws-label { display: flex; align-items: center; gap: 6px; font-family: var(--vm-font-sans); font-size: 11px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); letter-spacing: .06em; text-transform: none; margin-bottom: 6px; } .vm-ws-label i { font-size: 10px; color: var(--vm-violet); } /* Field wrapper */ .vm-ws-field { display: flex; flex-direction: column; } .vm-ws-field-inline { flex-direction: row; align-items: center; gap: 8px; } .vm-ws-hint { font-size: 11px; color: var(--vm-n-500); margin-top: 5px; line-height: 1.4; } .vm-ws-hint-success { background: rgba(34, 197, 94, .10); color: #15803d; padding: 6px 10px; border-radius: var(--vm-r-sm); font-weight: var(--vm-fw-m); margin: 0 0 10px; } /* Inputs — altura 34px consistente, no 40+ */ .vm-ws-input, .vm-ws-textarea { width: 100%; padding: 8px 12px; background: var(--vm-n-0); border: 1px solid var(--vm-n-200); border-radius: var(--vm-r-md); font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); color: var(--vm-n-900); line-height: 1.4; transition: border-color var(--vm-dur-1) var(--vm-ease), box-shadow var(--vm-dur-1) var(--vm-ease); box-sizing: border-box; } .vm-ws-input { height: 34px; } .vm-ws-input-sm { height: 30px; padding: 6px 10px; font-size: var(--vm-fs-sm); } .vm-ws-textarea { min-height: 68px; resize: vertical; padding: 8px 12px; } .vm-ws-textarea-sm { min-height: 52px; } .vm-ws-input:focus, .vm-ws-textarea:focus { outline: none; border-color: var(--vm-violet); box-shadow: 0 0 0 3px var(--vm-v-08); } .vm-ws-input-mono { font-family: var(--vm-font-mono); font-size: 11px; color: var(--vm-n-700); } select.vm-ws-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; } /* Row input + botón(es) */ .vm-ws-input-row { display: flex; gap: 6px; align-items: center; } .vm-ws-input-row .vm-ws-input { flex: 1; min-width: 0; } /* Botones — sistema unificado dentro del modal */ .vm-ws-content .vm-btn, .vm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; min-height: 34px; border-radius: var(--vm-r-md); border: 1px solid transparent; background: transparent; font-family: var(--vm-font-sans); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); letter-spacing: -0.005em; color: var(--vm-n-900); cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); white-space: nowrap; line-height: 1; } .vm-btn:hover { transform: translateY(-1px); } .vm-btn:active { transform: translateY(0); } .vm-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } .vm-btn i { font-size: 11px; } .vm-btn-sm { padding: 6px 11px; min-height: 30px; font-size: var(--vm-fs-sm); } .vm-btn-block { width: 100%; } .vm-btn-primary { background: var(--vm-violet); border-color: var(--vm-violet); color: var(--vm-n-0); box-shadow: var(--vm-sh-v-sm); } .vm-btn-primary:hover { background: var(--vm-v-700, #4c1d95); border-color: var(--vm-v-700, #4c1d95); } .vm-btn-secondary { background: var(--vm-n-0); border-color: var(--vm-n-200); color: var(--vm-n-900); } .vm-btn-secondary:hover { background: var(--vm-n-50); border-color: var(--vm-n-300); } .vm-btn-ghost { background: transparent; border-color: var(--vm-n-200); color: var(--vm-n-700); } .vm-btn-ghost:hover { background: var(--vm-n-100); color: var(--vm-n-900); } .vm-btn-warning { background: #f59e0b; border-color: #f59e0b; color: #fff; } .vm-btn-warning:hover { background: #d97706; border-color: #d97706; } .vm-btn-wsp { background: #fff; border-color: var(--vm-n-200); color: #fff; } .vm-btn-wsp:hover { background: var(--vm-n-50); border-color: #25D366; } .vm-btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--vm-r-md); background: transparent; border: 1px solid var(--vm-n-200); color: var(--vm-n-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); } .vm-btn-icon:hover { background: var(--vm-n-100); color: var(--vm-n-900); } /* Row de botones */ .vm-ws-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .vm-ws-btn-row-wrap { display: flex; flex-wrap: wrap; gap: 6px; } .vm-ws-btn-tag { font-size: 10px; font-weight: var(--vm-fw-m); opacity: .7; margin-left: 2px; } /* Acciones primarias del tab (fila) */ .vm-ws-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--vm-n-100); margin-top: 4px; } /* Alert delgada (banner) */ .vm-ws-alert { padding: 10px 12px; border-radius: var(--vm-r-md); border: 1px solid transparent; font-size: var(--vm-fs-sm); line-height: 1.5; } .vm-ws-alert-head { font-weight: var(--vm-fw-eb); font-size: var(--vm-fs-sm); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .vm-ws-alert-body { font-size: 12px; } .vm-ws-alert-plain { font-size: 12px; } .vm-ws-alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .vm-ws-alert-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; } /* Details colapsable */ .vm-ws-details { border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-md); background: var(--vm-n-0); overflow: hidden; } .vm-ws-details-warn { border-color: #fde68a; background: #fffbeb; } .vm-ws-details-links { border-color: var(--vm-n-150); } .vm-ws-details summary { cursor: pointer; padding: 10px 12px; font-family: var(--vm-font-sans); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); color: var(--vm-n-900); display: flex; align-items: center; gap: 8px; list-style: none; user-select: none; } .vm-ws-details summary::-webkit-details-marker { display: none; } .vm-ws-details summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: 10px; color: var(--vm-n-400); transition: transform var(--vm-dur-2) var(--vm-ease); } .vm-ws-details[open] summary::after { transform: rotate(180deg); } .vm-ws-details-body { padding: 10px 12px 12px; border-top: 1px solid var(--vm-n-150); display: flex; flex-direction: column; gap: 8px; } .vm-ws-details-warn .vm-ws-details-body { border-top-color: #fde68a; } .vm-ws-tag { font-size: 9px; font-weight: var(--vm-fw-eb); padding: 2px 6px; border-radius: var(--vm-r-full); background: var(--vm-n-100); color: var(--vm-n-500); letter-spacing: .04em; text-transform: none; } /* Link block dentro de details (para links de aprobación) */ .vm-ws-link-block { padding: 10px; border-radius: var(--vm-r-md); border: 1px solid transparent; display: flex; flex-direction: column; gap: 6px; } .vm-ws-link-block-green { background: #fff; border-color: var(--vm-n-150); } .vm-ws-link-block-amber { background: #fff; border-color: var(--vm-n-150); } .vm-ws-link-label { font-size: 10px; font-weight: var(--vm-fw-b); letter-spacing: .08em; text-transform: none; display: flex; align-items: center; gap: 5px; } .vm-ws-link-block-green .vm-ws-link-label { color: #166534; } .vm-ws-link-block-amber .vm-ws-link-label { color: #92400e; } /* Metaline (contexto compacto) */ .vm-ws-metaline { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--vm-n-50); border-radius: var(--vm-r-sm); font-size: var(--vm-fs-sm); } .vm-ws-metaline-key { font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); text-transform: none; letter-spacing: .1em; } .vm-ws-metaline-val { color: var(--vm-n-700); font-weight: var(--vm-fw-m); } /* IA grid 2 columnas */ .vm-ws-ia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .vm-ws-ia-col { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--vm-n-50); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-md); } .vm-ws-col-title { font-size: 11px; font-weight: var(--vm-fw-b); color: var(--vm-n-900); letter-spacing: -0.005em; display: flex; align-items: center; gap: 5px; padding-bottom: 4px; border-bottom: 1px solid var(--vm-n-150); } .vm-ws-col-title i { color: var(--vm-violet); font-size: 11px; } /* IA preview + color panel */ .vm-ws-ia-preview { width: 100%; aspect-ratio: 4 / 5; max-height: 380px; border-radius: var(--vm-r-lg); overflow: hidden; background: var(--vm-n-100); border: 1px solid var(--vm-n-150); margin-bottom: 10px; } .vm-ws-ia-preview img { width: 100%; height: 100%; object-fit: contain; display: block; } .vm-ws-color-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--vm-n-50); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-md); flex-wrap: wrap; } .vm-ws-color-label { font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); letter-spacing: .08em; text-transform: none; display: flex; align-items: center; gap: 4px; } .vm-ws-color-picker { width: 36px; height: 28px; padding: 2px; border: 1px solid var(--vm-n-200); border-radius: var(--vm-r-sm); cursor: pointer; background: transparent; } .vm-ws-color-caption { font-size: 11px; color: var(--vm-n-500); flex: 1; min-width: 60px; } /* Loading */ .vm-ws-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; color: var(--vm-n-500); font-size: var(--vm-fs-sm); } .vm-ws-loading i { color: var(--vm-violet); font-size: 16px; } /* Choice buttons (Subir paso 0) */ .vm-ws-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .vm-ws-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--vm-n-0); border: 1px solid var(--vm-n-200); border-radius: var(--vm-r-md); text-align: left; cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); font-family: var(--vm-font-sans); } .vm-ws-choice:hover { border-color: var(--vm-violet); background: var(--vm-v-04); transform: translateY(-1px); } .vm-ws-choice > i { font-size: 20px; color: var(--vm-violet); flex-shrink: 0; } .vm-ws-choice > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vm-ws-choice strong { font-size: var(--vm-fs-md); font-weight: var(--vm-fw-b); color: var(--vm-n-900); letter-spacing: -0.005em; } .vm-ws-choice span { font-size: 11px; color: var(--vm-n-500); font-weight: var(--vm-fw-m); } .vm-ws-choice-primary { background: var(--vm-violet); border-color: var(--vm-violet); box-shadow: var(--vm-sh-v-sm); } .vm-ws-choice-primary:hover { background: var(--vm-v-700, #4c1d95); border-color: var(--vm-v-700, #4c1d95); } .vm-ws-choice-primary > i { color: var(--vm-n-0); } .vm-ws-choice-primary strong { color: var(--vm-n-0); } .vm-ws-choice-primary span { color: rgba(255,255,255,.8); } /* Mobile: 1 columna IA grid + choice */ @media (max-width: 640px) { .vm-ws-ia-grid, .vm-ws-choice-row, .vm-ws-btn-row { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════ PARTE 2c · CORRECCIÓN — botones con TEXTO, cards con carácter (F120c3) User: "temas viejos simples y dañes la info, no están todos los botones, se ve todo blanco feo viejo". Fix: fondos violeta/ámbar suaves, botones con presencia (44px), texto siempre visible, sin details escondiendo info. ══════════════════════════════════════════════════════════════════════════ */ /* Cards contenedoras con acento sutil — no puro blanco */ .vm-ws-card { padding: 14px 16px; border-radius: var(--vm-r-lg); border: 1px solid transparent; display: flex; flex-direction: column; gap: 8px; } .vm-ws-card-violet { background: rgba(94, 44, 237, .04); border-color: rgba(94, 44, 237, .14); } .vm-ws-card-amber { background: #fffbeb; border-color: #fcd34d; } .vm-ws-card-hint { font-size: 11.5px; color: var(--vm-n-700); line-height: 1.4; margin: 0; } .vm-ws-card-amber .vm-ws-card-hint { color: #78350f; } /* Labels con variantes de color según contexto */ .vm-ws-label-amber { color: #92400e; } .vm-ws-label-amber i { color: #d97706; } .vm-ws-label-success { color: #15803d; } .vm-ws-label-success i { color: #22c55e; } /* Botones — nivel default 40px (con presencia), sm 32px, no icon-only */ .vm-btn { padding: 10px 18px !important; min-height: 40px !important; font-size: var(--vm-fs-md) !important; gap: 7px !important; } .vm-btn i { font-size: 12px !important; } .vm-btn-sm { padding: 6px 12px !important; min-height: 32px !important; font-size: var(--vm-fs-sm) !important; } .vm-btn-primary { background: #6d3fee !important; border-color: #5e2ced !important; color: #fff !important; box-shadow: 0 4px 12px -4px rgba(94, 44, 237, .45), inset 0 1px 0 rgba(255,255,255,.15) !important; } .vm-btn-primary:hover { background: #5e2ced !important; box-shadow: 0 6px 16px -4px rgba(94, 44, 237, .55), inset 0 1px 0 rgba(255,255,255,.15) !important; } .vm-btn-warning { background: #fff !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; box-shadow: none !important; } .vm-btn-warning:hover { background: var(--vm-n-50) !important; border-color: #d97706 !important; } .vm-btn-warning i, .vm-btn-warning svg { color: #d97706; } .vm-btn-success { background: var(--vm-violet) !important; border-color: var(--vm-violet) !important; color: #fff !important; box-shadow: none !important; } .vm-btn-success:hover { background: var(--vm-violet) !important; filter: brightness(1.08); } .vm-btn-mercadeo { background: #fff !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; box-shadow: none !important; } .vm-btn-mercadeo:hover { background: var(--vm-n-50) !important; border-color: var(--vm-violet) !important; } .vm-btn-mercadeo i, .vm-btn-mercadeo svg { color: var(--vm-violet); } .vm-btn-secondary { background: #fff !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; box-shadow: var(--vm-sh-xs), inset 0 1px 0 rgba(255,255,255,.5) !important; } .vm-btn-secondary:hover { background: var(--vm-n-50) !important; border-color: var(--vm-violet) !important; color: var(--vm-violet) !important; } .vm-btn-wsp { background: #fff !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; box-shadow: none !important; } .vm-btn-wsp:hover { background: var(--vm-n-50) !important; border-color: #22c55e !important; } .vm-btn-wsp i, .vm-btn-wsp svg { color: #22c55e; } /* Barra de acciones primarias — botones grandes con TEXTO completo, no full-width monstruoso */ .vm-ws-actionbar { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0 0; background: transparent; border: none; border-top: 1px solid var(--vm-n-150); border-radius: 0; margin-top: 6px; } .vm-ws-actionbar .vm-btn { flex: 1 1 auto; min-width: 140px; } .vm-ws-actionbar .vm-btn.hidden { display: none !important; } /* Links wrap — sección compartir con label + cards de link */ .vm-ws-links-wrap { padding: 12px 14px; border-radius: var(--vm-r-lg); background: transparent; border: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .vm-ws-link-block { padding: 12px 14px; border-radius: var(--vm-r-md); border: 1px solid transparent; display: flex; flex-direction: column; gap: 8px; } .vm-ws-link-block-green { background: #fff; border-color: var(--vm-n-150); } .vm-ws-link-block-amber { background: #fff; border-color: var(--vm-n-150); } .vm-ws-link-label { font-size: 11px; font-weight: var(--vm-fw-eb); letter-spacing: .06em; text-transform: none; display: flex; align-items: center; gap: 6px; } .vm-ws-link-block-green .vm-ws-link-label { color: #166534; } .vm-ws-link-block-amber .vm-ws-link-label { color: #92400e; } /* Mobile: acciones apiladas */ @media (max-width: 640px) { .vm-ws-actionbar .vm-btn { flex: 1 1 100%; } } /* ═══════════════════════════════════════════════════════════════════════ F120d · SPLIT PANEL — ajustes finales Título con eyebrow · rail vertical · body con menos padding lateral en mobile ═══════════════════════════════════════════════════════════════════════ */ .vm-ws-modal.vm-ws-split-mode .vm-ws-content .sol-modal-title { font-size: var(--vm-fs-lg) !important; font-weight: var(--vm-fw-bl) !important; letter-spacing: -0.03em !important; line-height: 1.15 !important; color: var(--vm-n-900) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Grid ficha en Split Panel: 1 columna (más ancho para editor) */ .vm-ws-modal.vm-ws-split-mode .vm-ws-content .ficha-grid { display: grid !important; grid-template-columns: 260px 1fr !important; gap: 20px !important; align-items: start !important; } @media (max-width: 1100px) { .vm-ws-modal.vm-ws-split-mode .vm-ws-content .ficha-grid { grid-template-columns: 1fr !important; } } /* Media frame más chico en split mode */ .vm-ws-modal.vm-ws-split-mode .vm-ws-content .media-frame { width: 100% !important; aspect-ratio: 4 / 5 !important; max-height: 340px !important; min-height: 220px !important; border-radius: var(--vm-r-lg) !important; overflow: hidden !important; background: var(--vm-n-100) !important; border: 1px solid var(--vm-n-150) !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Mobile: rail más compacto + labels ocultas */ @media (max-width: 640px) { .vm-ws-modal.vm-ws-split-mode .sol-modal-tab { width: 44px !important; height: 48px !important; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab i { font-size: 15px !important; } .vm-ws-rail-label { display: none; } .vm-ws-modal.vm-ws-split-mode .sol-modal-body { padding: 14px 14px 18px !important; } .vm-ws-header { padding: 12px 14px !important; } } /* ══════════════════════════════════════════════════════════════════════════ ═════════ F121 · FOUNDATION GOKONTA (aditivo · aprobado 09/07/26) ══════ Tokens + átomos importados del proyecto ROYSA/gokonta. Prefijo --gk-* para no chocar con --vm-*. Los componentes atómicos (.btn/.kpi-chip/ .dense-table/.pill/.badge/.panel) están disponibles para módulos nuevos (Wizard, Nota, Publicadas, Galerías, Catálogo, Registro, Cal, Config). ══════════════════════════════════════════════════════════════════════════ */ :root { /* Ink escala fría (gris zinc) */ --gk-ink: #0A0A0B; --gk-ink2: #3F3F46; --gk-ink3: #71717A; --gk-ink4: #A1A1AA; /* Superficies */ --gk-bg: #F7F7FA; --gk-sur: #FFFFFF; --gk-sur2: #F1F1F4; /* Bordes */ --gk-ln: #E4E4E7; --gk-ln2: #D4D4D8; /* Accent = paleta obligatoria INTECAP (#5e2ced) con variantes color-mix */ --gk-a: #5e2ced; --gk-a-soft: color-mix(in srgb, #5e2ced 8%, white); --gk-a-mid: color-mix(in srgb, #5e2ced 18%, white); --gk-a-glow: color-mix(in srgb, #5e2ced 35%, transparent); /* Segundo accent = cyan #75cebb */ --gk-a2: #75cebb; --gk-a2-soft: color-mix(in srgb, #75cebb 12%, white); /* Semánticos */ --gk-red: #DC2626; --gk-red-s: rgba(220, 38, 38, .08); --gk-amb: #D97706; --gk-amb-s: rgba(217, 119, 6, .08); --gk-grn: #16A34A; --gk-grn-s: rgba(22, 163, 74, .08); /* Radius */ --gk-r-xs: 5px; --gk-r-sm: 8px; --gk-r-md: 11px; --gk-r-lg: 14px; --gk-r-xl: 18px; --gk-r-full: 999px; /* Sombras sutiles */ --gk-sh-xs: 0 1px 2px rgba(15, 23, 42, .04); --gk-sh-sm: 0 2px 8px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --gk-sh-md: 0 8px 24px -8px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04); /* Timing / easing */ --gk-t-fast: 150ms; --gk-t-base: 250ms; --gk-ease: cubic-bezier(.2, .8, .2, 1); /* Fuente mono para números */ --gk-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; } /* ─── BOTONES ─── */ .gk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--gk-r-md); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--gk-ln); background: var(--gk-sur); color: var(--gk-ink2); text-decoration: none; box-shadow: var(--gk-sh-xs); transition: border-color var(--gk-t-base) var(--gk-ease), color var(--gk-t-base) var(--gk-ease), transform var(--gk-t-fast), box-shadow var(--gk-t-base) var(--gk-ease); white-space: nowrap; line-height: 1; } .gk-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; flex-shrink: 0; } .gk-btn:hover { border-color: var(--gk-ln2); color: var(--gk-ink); transform: translateY(-1px); box-shadow: var(--gk-sh-sm); } .gk-btn:active { transform: translateY(0) scale(.98); box-shadow: var(--gk-sh-xs); } .gk-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } .gk-btn-primary { background: var(--gk-a); border-color: var(--gk-a); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 3px 10px -2px var(--gk-a-glow); } .gk-btn-primary:hover { background: color-mix(in srgb, var(--gk-a) 88%, #000); border-color: color-mix(in srgb, var(--gk-a) 88%, #000); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 6px 16px -3px var(--gk-a-glow); color: #fff; } .gk-btn-ghost { background: transparent; border-color: var(--gk-ln); color: var(--gk-ink3); box-shadow: none; } .gk-btn-ghost:hover { border-color: var(--gk-ln2); color: var(--gk-ink); box-shadow: none; } .gk-btn-danger { border-color: rgba(220, 38, 38, .3); color: var(--gk-red); } .gk-btn-danger:hover { background: var(--gk-red-s); border-color: var(--gk-red); } .gk-btn-success { background: var(--gk-grn); border-color: var(--gk-grn); color: #fff; } .gk-btn-success:hover { filter: brightness(1.05); color: #fff; } .gk-btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; } .gk-btn-block { width: 100%; } /* Botón icon-only chico (para tabla row-actions) */ .gk-ra-btn { width: 28px; height: 28px; border-radius: var(--gk-r-sm); background: var(--gk-sur); border: 1px solid var(--gk-ln); color: var(--gk-ink3); cursor: pointer; display: grid; place-items: center; box-shadow: var(--gk-sh-xs); transition: all var(--gk-t-fast); } .gk-ra-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; } .gk-ra-btn:hover { color: var(--gk-a); border-color: color-mix(in srgb, var(--gk-a) 30%, white); background: var(--gk-a-soft); } .gk-ra-btn.gk-danger:hover { color: var(--gk-red); border-color: rgba(220, 38, 38, .3); background: var(--gk-red-s); } /* ─── KPI CHIPS ─── */ .gk-kpi-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .gk-kpi-chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--gk-r-lg); background: var(--gk-sur); border: 1px solid var(--gk-ln); box-shadow: var(--gk-sh-sm); cursor: default; transition: border-color var(--gk-t-base) var(--gk-ease), transform var(--gk-t-base) var(--gk-ease), box-shadow var(--gk-t-base) var(--gk-ease); } .gk-kpi-chip:hover { border-color: var(--gk-ln2); transform: translateY(-2px); box-shadow: var(--gk-sh-md); } .gk-kpi-chip.gk-active { border-color: var(--gk-a); box-shadow: 0 0 0 3px var(--gk-a-soft), var(--gk-sh-sm); } .gk-kc-ico { width: 34px; height: 34px; border-radius: var(--gk-r-sm); display: grid; place-items: center; flex-shrink: 0; } .gk-kc-ico svg { width: 16px; height: 16px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .gk-kc-num { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--gk-ink); font-family: var(--gk-mono); line-height: 1; } .gk-kc-label { font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0.06em; color: var(--gk-ink4); margin-top: 3px; } /* ─── PANEL (contenedor de sección) ─── */ .gk-panel { background: var(--gk-sur); border: 1px solid var(--gk-ln); border-radius: var(--gk-r-lg); overflow: hidden; box-shadow: var(--gk-sh-sm); } .gk-ph-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--gk-ln); background: var(--gk-sur2); } .gk-ph-title { font-size: 13px; font-weight: 700; color: var(--gk-ink); letter-spacing: -0.015em; } .gk-ph-sub { font-size: 11px; color: var(--gk-ink4); margin-top: 2px; } .gk-ph-link { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--gk-a); text-decoration: none; flex-shrink: 0; transition: opacity var(--gk-t-fast); } .gk-ph-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; } .gk-ph-link:hover { opacity: .72; } .gk-panel-empty { padding: 32px; text-align: center; color: var(--gk-ink4); font-size: 12.5px; font-weight: 500; } /* ─── TABLA DENSA ─── */ .gk-dense-table { width: 100%; border-collapse: collapse; } .gk-dense-table thead th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gk-ink4); padding: 10px 16px; background: var(--gk-sur2); border-bottom: 1px solid var(--gk-ln); text-align: left; white-space: nowrap; } .gk-dense-table tbody td { font-size: 12.5px; color: var(--gk-ink); padding: 12px 16px; border-bottom: 1px solid var(--gk-ln); vertical-align: middle; } .gk-dense-table tbody tr:last-child td { border-bottom: none; } .gk-dense-table tbody tr { transition: background var(--gk-t-fast); cursor: pointer; } .gk-dense-table tbody tr:hover td { background: var(--gk-sur2); } .gk-dense-table tbody tr.gk-selected td { background: var(--gk-a-soft); } .gk-dense-table tbody tr.gk-selected:hover td { background: color-mix(in srgb, var(--gk-a) 10%, transparent); } .gk-row-acts { opacity: 0; transition: opacity var(--gk-t-base); display: flex; gap: 4px; justify-content: flex-end; } .gk-dense-table tbody tr:hover .gk-row-acts { opacity: 1; } /* ─── PILLS / BADGES ─── */ .gk-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--gk-r-full); font-size: 11px; font-weight: 700; border: 1px solid; white-space: nowrap; } .gk-pill svg { flex-shrink: 0; } .gk-pill-red { color: var(--gk-red); border-color: rgba(220, 38, 38, .25); background: var(--gk-red-s); } .gk-pill-amb { color: var(--gk-amb); border-color: rgba(217, 119, 6, .25); background: var(--gk-amb-s); } .gk-pill-grn { color: var(--gk-grn); border-color: rgba(22, 163, 74, .25); background: var(--gk-grn-s); } .gk-pill-neu { color: var(--gk-ink3); border-color: var(--gk-ln2); background: var(--gk-sur2); } .gk-pill-acc { color: var(--gk-a); border-color: color-mix(in srgb, var(--gk-a) 30%, white); background: var(--gk-a-soft); } .gk-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--gk-r-xs); font-size: 10.5px; font-weight: 700; } .gk-badge-red { color: var(--gk-red); background: var(--gk-red-s); } .gk-badge-amb { color: var(--gk-amb); background: var(--gk-amb-s); } .gk-badge-grn { color: var(--gk-grn); background: var(--gk-grn-s); } .gk-badge-neu { color: var(--gk-ink3); background: var(--gk-sur2); border: 1px solid var(--gk-ln); } .gk-badge-acc { color: var(--gk-a); background: var(--gk-a-soft); } /* ─── AVATARES ─── */ .gk-av-sq { width: 32px; height: 32px; border-radius: var(--gk-r-sm); background: var(--gk-a-mid); border: 1px solid color-mix(in srgb, var(--gk-a) 28%, white); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--gk-a); flex-shrink: 0; } .gk-av-circle { border-radius: 50%; } /* ─── SEPARADOR DE SECCIÓN ─── */ .gk-section-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--gk-ink4); font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0.08em; } .gk-section-divider::before, .gk-section-divider::after { content: ""; flex: 1; height: 1px; background: var(--gk-ln); } /* ─── HERO / H1 GoKonta ─── */ .gk-h1 { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; color: var(--gk-ink); line-height: 1.1; margin: 0; } .gk-hero-sub { font-size: 13.5px; color: var(--gk-ink3); margin-top: 4px; font-weight: 500; } .gk-readonly { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--gk-ink4); background: var(--gk-sur2); border: 1px solid var(--gk-ln); border-radius: var(--gk-r-full); padding: 4px 12px; } .gk-readonly svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; } /* ─── FIELD (form input estilo GoKonta) ─── */ .gk-field { display: flex; flex-direction: column; gap: 5px; } .gk-field-label { font-size: 11px; font-weight: 600; color: var(--gk-ink3); text-transform: none; letter-spacing: 0.04em; } .gk-field-input, .gk-field-select, .gk-field-textarea { height: 34px; padding: 0 11px; border: 1px solid var(--gk-ln); border-radius: var(--gk-r-sm); background: var(--gk-sur); font-size: 13px; color: var(--gk-ink); font-family: 'Geist', 'Inter', system-ui, sans-serif; outline: none; width: 100%; transition: border-color var(--gk-t-fast), box-shadow var(--gk-t-fast); box-sizing: border-box; } .gk-field-textarea { height: auto; padding: 9px 11px; resize: vertical; min-height: 68px; } .gk-field-input:focus, .gk-field-select:focus, .gk-field-textarea:focus { border-color: var(--gk-a); box-shadow: 0 0 0 3px var(--gk-a-soft); } /* ═══════════════════════════════════════════════════════════════════════ F123 · Escritorio home rediseñado (Kontago sin duplicaciones) ═══════════════════════════════════════════════════════════════════════ */ body:not(.ws-marcas-active) #section-home { max-width: 1200px; margin: 0 auto; } /* Hero */ body:not(.ws-marcas-active) #section-home .gk-hero-block { margin-bottom: 22px; } body:not(.ws-marcas-active) #section-home .gk-hero-eyebrow { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: none; color: var(--gk-a, #5e2ced); margin-bottom: 8px; } body:not(.ws-marcas-active) #section-home .gk-h1 { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 32px; font-weight: 900; letter-spacing: -0.03em; color: var(--gk-ink, #0a0a0b); line-height: 1.1; margin: 0 0 4px; } body:not(.ws-marcas-active) #section-home .gk-hero-sub { font-size: 14px; color: var(--gk-ink3, #71717a); font-weight: 500; margin: 0; } /* Alert banner minimal (F123) */ body:not(.ws-marcas-active) #section-home .gk-alert-banner { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: var(--gk-r-lg, 14px); background: color-mix(in srgb, var(--gk-a, #5e2ced) 6%, white); border: 1px solid color-mix(in srgb, var(--gk-a, #5e2ced) 20%, white); color: var(--gk-ink, #0a0a0b); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 20px; text-align: left; transition: transform var(--gk-t-fast) var(--gk-ease), box-shadow var(--gk-t-fast) var(--gk-ease); } body:not(.ws-marcas-active) #section-home .gk-alert-banner:hover { transform: translateY(-1px); box-shadow: var(--gk-sh-sm); } body:not(.ws-marcas-active) #section-home .gk-alert-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: gkPulseDot 2s infinite; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home .gk-alert-text { flex: 1; } body:not(.ws-marcas-active) #section-home .gk-alert-arrow { font-size: 14px; color: var(--gk-a, #5e2ced); font-weight: 700; flex-shrink: 0; } @keyframes gkPulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } } /* KPI chips (F123 sobreescriben .kpi-grid antiguo) */ body:not(.ws-marcas-active) #section-home #home-kpis.gk-kpi-chips { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; margin-bottom: 24px !important; } body:not(.ws-marcas-active) #section-home .gk-kpi-chip { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--gk-r-lg, 14px); background: var(--gk-sur, #ffffff); border: 1px solid var(--gk-ln, #e4e4e7); box-shadow: var(--gk-sh-sm); cursor: pointer; font-family: 'Geist', 'Inter', system-ui, sans-serif; text-align: left; transition: transform var(--gk-t-base) var(--gk-ease), border-color var(--gk-t-base) var(--gk-ease), box-shadow var(--gk-t-base) var(--gk-ease); } body:not(.ws-marcas-active) #section-home .gk-kpi-chip:hover { transform: translateY(-2px); border-color: var(--gk-ln2, #d4d4d8); box-shadow: var(--gk-sh-md); } body:not(.ws-marcas-active) #section-home .gk-kc-ico { width: 38px; height: 38px; border-radius: var(--gk-r-sm, 8px); display: grid; place-items: center; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home .gk-kc-ico svg { width: 18px; height: 18px; } body:not(.ws-marcas-active) #section-home .gk-kc-body { min-width: 0; flex: 1; } body:not(.ws-marcas-active) #section-home .gk-kc-num { font-family: var(--gk-mono, 'JetBrains Mono', monospace); font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--gk-ink, #0a0a0b); line-height: 1; } body:not(.ws-marcas-active) #section-home .gk-kc-label { font-size: 11px; font-weight: 700; color: var(--gk-ink3, #71717a); margin-top: 4px; letter-spacing: -0.005em; } /* Grid 2 columnas */ body:not(.ws-marcas-active) #section-home .gk-two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; margin-bottom: 20px; } /* Panel Kontago dentro del home */ body:not(.ws-marcas-active) #section-home .gk-panel { background: var(--gk-sur, #ffffff); border: 1px solid var(--gk-ln, #e4e4e7); border-radius: var(--gk-r-lg, 14px); overflow: hidden; box-shadow: var(--gk-sh-sm); } body:not(.ws-marcas-active) #section-home .gk-ph-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--gk-ln, #e4e4e7); background: var(--gk-sur2, #f1f1f4); gap: 12px; } body:not(.ws-marcas-active) #section-home .gk-ph-title { font-size: 13px; font-weight: 800; color: var(--gk-ink, #0a0a0b); letter-spacing: -0.015em; } body:not(.ws-marcas-active) #section-home .gk-ph-sub { font-size: 11px; color: var(--gk-ink4, #a1a1aa); margin-top: 2px; font-weight: 500; } body:not(.ws-marcas-active) #section-home .gk-ph-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--gk-a, #5e2ced); text-decoration: none; flex-shrink: 0; transition: opacity var(--gk-t-fast); white-space: nowrap; } body:not(.ws-marcas-active) #section-home .gk-ph-link:hover { opacity: .72; } body:not(.ws-marcas-active) #section-home .gk-ph-link svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } body:not(.ws-marcas-active) #section-home .gk-panel-empty { padding: 28px 20px; text-align: center; color: var(--gk-ink4, #a1a1aa); font-size: 12.5px; font-weight: 500; } /* Tabla densa dentro del home */ body:not(.ws-marcas-active) #section-home .gk-dense-table { width: 100%; border-collapse: collapse; font-family: 'Geist', 'Inter', system-ui, sans-serif; } body:not(.ws-marcas-active) #section-home .gk-dense-table tbody td { font-size: 12.5px; color: var(--gk-ink, #0a0a0b); padding: 12px 16px; border-bottom: 1px solid var(--gk-ln, #e4e4e7); vertical-align: middle; } body:not(.ws-marcas-active) #section-home .gk-dense-table tbody tr:last-child td { border-bottom: none; } body:not(.ws-marcas-active) #section-home .gk-dense-table tbody tr { transition: background var(--gk-t-fast); cursor: pointer; } body:not(.ws-marcas-active) #section-home .gk-dense-table tbody tr:hover td { background: var(--gk-sur2, #f1f1f4); } /* Centros como rows compactas dentro del panel Actividad */ body:not(.ws-marcas-active) #section-home .gk-centros-list { padding: 6px 0; } .gk-centro-row { padding: 14px 18px; border-bottom: 1px solid var(--gk-ln, #e4e4e7); cursor: pointer; transition: background var(--gk-t-fast); } .gk-centro-row:last-child { border-bottom: none; } .gk-centro-row:hover { background: var(--gk-sur2, #f1f1f4); } .gk-centro-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .gk-centro-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .gk-centro-row-name { font-size: 13px; font-weight: 800; color: var(--gk-ink, #0a0a0b); letter-spacing: -0.015em; } .gk-centro-row-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--gk-ink4, #a1a1aa); font-family: var(--gk-mono, monospace); } .gk-centro-row-bar { padding-left: 16px; } .gk-centro-row-bar-track { height: 6px; background: var(--gk-sur2, #f1f1f4); border-radius: 999px; overflow: hidden; margin-bottom: 6px; } .gk-centro-row-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s var(--gk-ease); } .gk-centro-row-bar-meta { display: flex; align-items: baseline; gap: 4px; font-size: 11px; color: var(--gk-ink3, #71717a); } .gk-centro-row-bar-meta > span:first-child { font-size: 15px; } .gk-centro-row-bar-sub { margin-left: auto; font-size: 10.5px; color: var(--gk-ink4, #a1a1aa); text-transform: none; letter-spacing: 0.05em; font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════ F125 · LAUNCHER GRID + RAIL SIDEBAR + MÓDULOS MODALES Escritorio como launcher fullscreen · sidebar aparece como rail 88px cuando abre un módulo · cada sección como modal centrado con blur detrás. ═══════════════════════════════════════════════════════════════════════ */ /* Body state: cuando estamos en el launcher (section-home visible) */ body:not(.ws-marcas-active).gk-launcher-mode .app-layout { display: block !important; padding: 0 !important; max-width: none !important; margin: 0 !important; } body:not(.ws-marcas-active).gk-launcher-mode .sidebar { display: none !important; } body:not(.ws-marcas-active).gk-launcher-mode .main-content { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; background: var(--gk-bg, #f7f7fa); min-height: 100vh; } body:not(.ws-marcas-active).gk-launcher-mode .f30-topbar { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ F125d · HUB (Bienvenido a VIMEDIA) modernizado + fondo violeta consistente con login. FAB solo visible en dashboard-view (escritorio launcher). ═══════════════════════════════════════════════════════════════════════ */ /* Ocultar FAB fuera del escritorio — controlado por JS via body.gk-no-fab */ body.gk-no-fab .vm-fab, body.gk-no-fab .vm-fab-sheet { display: none !important; } /* F125L · Botón "Cerrar sesión" fijo arriba a la derecha */ .gk-logout-btn { position: fixed; top: 20px; right: 20px; z-index: 900; display: none; /* JS lo muestra en dashboard/launcher */ align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff; font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; letter-spacing: -0.005em; transition: background var(--gk-t-fast, 150ms) var(--gk-ease, cubic-bezier(.2,.8,.2,1)), transform var(--gk-t-fast) var(--gk-ease), border-color var(--gk-t-fast) var(--gk-ease); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } body.gk-logout-visible .gk-logout-btn { display: inline-flex; } .gk-logout-btn:hover { background: rgba(220, 38, 38, 0.85); border-color: rgba(220, 38, 38, 0.9); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35); } .gk-logout-btn:active { transform: translateY(0); } .gk-logout-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 640px) { .gk-logout-btn { top: 12px; right: 12px; padding: 8px 12px; font-size: 11.5px; } .gk-logout-btn span { display: none; } } /* F125h · Failsafe: TODOS los elementos del login SIEMPRE visibles y clickeables */ .login-screen-v2 .login-logo-btn, .login-screen-v2 .login-wordmark, .login-screen-v2 .login-wordmark .wm-l, .login-screen-v2 .login-hint, .login-screen-v2 .login-form-wrap, .login-screen-v2 .pin-shell, .login-screen-v2 .pin-input-single, .login-screen-v2 .login-submit, .login-screen-v2 .login-back, .login-screen-v2 .login-accent-line { opacity: 1 !important; transform: none !important; filter: none !important; } /* El input pill del PIN necesita poder recibir focus y no estar tapado */ .login-screen-v2 .pin-input-single { pointer-events: auto !important; cursor: text !important; position: relative; z-index: 3; } /* Placeholder shimmer no debe tapar el input */ .login-screen-v2 .pin-placeholder-shimmer { pointer-events: none !important; z-index: 1; } /* Respetar prefers-reduced-motion — quitar animaciones costosas */ @media (prefers-reduced-motion: reduce) { .login-screen-v2 .login-logo-btn, .login-screen-v2 .login-wordmark .wm-l, .login-orb { animation: none !important; } } /* F125k · Fondo plano #5e2ced en los 3 portales (login / hub / escritorio launcher) */ .gk-hub, body:not(.ws-marcas-active).gk-launcher-mode .main-content, body:not(.ws-marcas-active) #section-home.gk-launcher { background: #5e2ced !important; } /* También el login usa el mismo violeta plano (override del radial gradient viejo) */ body #login-view.login-screen-v2 { background: #5e2ced !important; } /* Escurecer los orbes del login para que no chocen con el fondo plano */ body #login-view.login-screen-v2 .login-orb-1 { opacity: .18; } body #login-view.login-screen-v2 .login-orb-2 { opacity: .12; } body:not(.ws-marcas-active) #section-home.gk-launcher { color: #ffffff; } /* Ajustar textos del launcher para fondo oscuro */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title, body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { color: #ffffff !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-sub { color: rgba(255, 255, 255, 0.75) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-footer, body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-item strong { color: rgba(255, 255, 255, 0.9) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-footer { color: rgba(255, 255, 255, 0.6) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-item strong { color: #ffffff !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-sep { color: rgba(255, 255, 255, 0.3) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-ok { color: #86efac !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-logout { color: #fca5a5 !important; } /* Inbox recent en fondo violeta: card blanca destacada */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { background: rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.18) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title { color: #ffffff !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title strong { color: #ffffff !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto { background: rgba(255, 255, 255, 0.9) !important; color: var(--gk-a, #5e2ced) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto:hover { background: #ffffff !important; } /* ── HUB (Bienvenido a VIMEDIA) — pantalla completa violeta ── */ .gk-hub { position: fixed; inset: 0; display: grid; place-items: center; padding: 40px 24px; overflow-y: auto; z-index: 100; font-family: 'Geist', 'Inter', system-ui, sans-serif; } .gk-hub.hidden { display: none !important; } .gk-hub-inner { width: 100%; max-width: 960px; display: flex; flex-direction: column; align-items: stretch; gap: 32px; } .gk-hub-hero { text-align: center; color: #ffffff; } .gk-hub-title { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 32px; font-weight: 900; letter-spacing: -0.03em; color: #ffffff; margin: 0 0 8px; } .gk-hub-sub { font-size: 14px; color: rgba(255, 255, 255, 0.75); margin: 0; font-weight: 500; } /* Grid de tiles: 2 columnas */ .gk-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 720px) { .gk-hub-grid { grid-template-columns: 1fr; } } /* F125k · Tile launcher compacto — icono centrado + título + subtítulo minimal */ .gk-hub-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 32px 24px 28px; background: rgba(255, 255, 255, 0.98); border: none; border-radius: 24px; cursor: pointer; font-family: 'Geist', 'Inter', system-ui, sans-serif; box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.35); transition: transform var(--gk-t-base, 250ms) var(--gk-ease), box-shadow var(--gk-t-base) var(--gk-ease); position: relative; overflow: hidden; } .gk-hub-tile:hover { transform: translateY(-4px); box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.45); } .gk-hub-tile:hover .gk-hub-tile-icon { transform: scale(1.06); } .gk-hub-tile:active { transform: translateY(-1px); } .gk-hub-tile-icon { width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center; margin: 0 auto 4px; box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.28); transition: transform var(--gk-t-base, 250ms) var(--gk-ease); } .gk-hub-tile-icon svg { width: 44px; height: 44px; stroke: #17123a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* KIT 28/07: un-acento — tiles blancas, ícono tinta (nada multicolor) */ .gk-hub-intecap .gk-hub-tile-icon { background: #ffffff; } .gk-hub-marcas .gk-hub-tile-icon { background: #ffffff; } .gk-hub-tile-title { font-size: 20px; font-weight: 900; letter-spacing: -0.025em; color: #0a0a0b; line-height: 1.1; } .gk-hub-tile-sub { font-size: 12.5px; line-height: 1.4; color: #71717a; font-weight: 600; letter-spacing: -0.005em; } /* Footer del hub: botones ghost */ .gk-hub-footer { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .gk-hub-footer-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff; font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: background var(--gk-t-fast) var(--gk-ease), transform var(--gk-t-fast) var(--gk-ease); letter-spacing: -0.005em; } .gk-hub-footer-btn:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .gk-hub-footer-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gk-hub-footer-danger { background: rgba(220, 38, 38, 0.2); border-color: rgba(252, 165, 165, 0.4); } .gk-hub-footer-danger:hover { background: rgba(220, 38, 38, 0.35); } /* F125c: garantizar que el banner viejo NUNCA aparece — reemplazado por gk-inbox-recent */ .gk-forever-hidden, body #alert-banner.gk-forever-hidden { position: absolute !important; left: -9999px !important; top: -9999px !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; opacity: 0 !important; } /* F125c · INBOX RECIENTE widget arriba del launcher hero */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { max-width: 1080px; margin: 8px auto 0; padding: 12px 16px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(94, 44, 237, 0.06), rgba(117, 206, 187, 0.05)); border: 1px solid rgba(94, 44, 237, 0.12); animation: gkInboxIn .4s cubic-bezier(.22, 1, .36, 1); } @keyframes gkInboxIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: 'Geist', 'Inter', system-ui, sans-serif; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: gkPulseDot 2s infinite; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title { font-size: 12.5px; font-weight: 700; color: var(--gk-ink, #0a0a0b); letter-spacing: -0.005em; flex: 1; display: flex; align-items: baseline; gap: 4px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title strong { font-family: var(--gk-mono, 'JetBrains Mono', monospace); font-weight: 900; color: var(--gk-a, #5e2ced); font-size: 14px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(94, 44, 237, 0.1); border: none; color: var(--gk-a, #5e2ced); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 800; cursor: pointer; letter-spacing: -0.005em; transition: background var(--gk-t-fast) var(--gk-ease); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto:hover { background: rgba(94, 44, 237, 0.18); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* Lista de chips scrolleable horizontal */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-list { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scroll-snap-type: x mandatory; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-list::-webkit-scrollbar { display: none; } /* Chip individual — pill compacta moderna */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--gk-sur, #ffffff); border: 1px solid var(--gk-ln, #e4e4e7); color: var(--gk-ink, #0a0a0b); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; scroll-snap-align: start; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform var(--gk-t-fast) var(--gk-ease), box-shadow var(--gk-t-fast) var(--gk-ease), border-color var(--gk-t-fast) var(--gk-ease); max-width: 320px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip:hover { transform: translateY(-1px); border-color: var(--gk-a, #5e2ced); box-shadow: 0 4px 12px -2px rgba(94, 44, 237, 0.2); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-centro { font-size: 10.5px; font-weight: 800; color: var(--gk-ink3, #71717a); letter-spacing: 0.03em; text-transform: none; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-curso { font-weight: 700; color: var(--gk-ink, #0a0a0b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-ago { font-family: var(--gk-mono, monospace); font-size: 10.5px; font-weight: 700; color: var(--gk-ink4, #a1a1aa); padding: 2px 6px; border-radius: 6px; background: var(--gk-sur2, #f1f1f4); } @media (max-width: 700px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { margin: 4px 8px 0; padding: 10px 12px 12px; border-radius: 14px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-curso { max-width: 140px; } } /* ── LAUNCHER (#section-home rediseñado) ── */ body:not(.ws-marcas-active) #section-home.gk-launcher { display: flex; flex-direction: column; min-height: 100vh; padding: 40px 40px 24px; background: var(--gk-bg, #f7f7fa); max-width: none; margin: 0; animation: gkLauncherIn .4s cubic-bezier(.22, 1, .36, 1); } @keyframes gkLauncherIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } /* Hero del launcher */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-hero { text-align: center; margin: 40px auto 40px; max-width: 640px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 36px; font-weight: 900; letter-spacing: -0.03em; color: var(--gk-ink, #0a0a0b); line-height: 1.1; margin: 0 0 8px; background: none; padding: 0; border: none; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-sub { font-size: 15px; color: var(--gk-ink3, #71717a); font-weight: 500; margin: 0; } /* Grid 6 columnas × 2 filas */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { display: grid; grid-template-columns: repeat(6, 140px); gap: 30px; justify-content: center; margin: 0 auto; max-width: 1200px; } /* Tile individual */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt { display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; font-family: 'Geist', 'Inter', system-ui, sans-serif; transition: transform var(--gk-t-base, 250ms) var(--gk-ease); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:hover { transform: translateY(-4px); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:hover .gk-lt-tile { box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.24), 0 4px 12px rgba(15, 23, 42, 0.08); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:active .gk-lt-tile { transform: scale(0.96); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { position: relative; width: 140px; height: 140px; border-radius: 24px; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04); transition: box-shadow var(--gk-t-base) var(--gk-ease), transform var(--gk-t-fast) var(--gk-ease); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 46px; height: 46px; stroke: #ffffff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile .gk-lt-ext { position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; stroke-width: 2.4; opacity: 0.85; } /* Label */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { font-size: 12.5px; font-weight: 800; color: var(--gk-ink, #0a0a0b); letter-spacing: -0.01em; text-align: center; line-height: 1.2; } /* Badge (contador) */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge { position: absolute; top: -6px; right: -6px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: #ef4444; color: #ffffff; font-family: var(--gk-mono, monospace); font-size: 12px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.5); border: 3px solid var(--gk-bg, #f7f7fa); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge:empty, body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge[data-empty="1"] { display: none; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge-count { background: rgba(255, 255, 255, 0.35); color: #ffffff; border-color: transparent; box-shadow: none; top: 12px; right: 12px; padding: 0 6px; min-width: 22px; height: 22px; font-size: 11px; } /* Gradientes por tile (paleta obligatoria + acentos por categoría) */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-bandeja .gk-lt-tile { background: #7c3aed; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-publicadas .gk-lt-tile { background: #10b981; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-calendario .gk-lt-tile { background: #3b82f6; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-catalogo .gk-lt-tile { background: #f59e0b; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-registro .gk-lt-tile { background: #0ea5e9; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-galerias .gk-lt-tile { background: #ec4899; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-nueva .gk-lt-tile { background: #a78bfa; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-nota .gk-lt-tile { background: #f472b6; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-republicar .gk-lt-tile { background: #75cebb; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-config .gk-lt-tile { background: #3f3f46; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-marcas .gk-lt-tile { background: #818cf8; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-catalogo-pub .gk-lt-tile { background: #a1a1aa; } /* Footer del launcher */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-footer { margin-top: auto; padding: 24px 0 8px; text-align: center; font-size: 12px; color: var(--gk-ink3, #71717a); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-item strong { font-family: var(--gk-mono, monospace); font-weight: 800; color: var(--gk-ink, #0a0a0b); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-sep { color: var(--gk-ln2, #d4d4d8); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-ok { color: #16a34a; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-ok svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-logout { color: #dc2626; font-weight: 700; text-decoration: none; cursor: pointer; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-logout:hover { text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════ MODO MÓDULO ABIERTO — sidebar rail 88px + módulo centrado con backdrop ═══════════════════════════════════════════════════════════════════════ */ /* Cuando NO estamos en launcher (algún section abierto) */ body:not(.ws-marcas-active).gk-module-mode { overflow: hidden; } body:not(.ws-marcas-active).gk-module-mode #section-home { filter: blur(6px); pointer-events: none; user-select: none; } body:not(.ws-marcas-active).gk-module-mode .app-layout { position: relative; } /* Sidebar convertido a RAIL 88px cuando módulo abierto */ body:not(.ws-marcas-active).gk-module-mode .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 88px !important; min-width: 88px !important; max-width: 88px !important; padding: 16px 8px !important; background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-right: 1px solid var(--gk-ln, #e4e4e7) !important; z-index: 800 !important; overflow-y: auto; overflow-x: hidden; display: flex !important; flex-direction: column !important; gap: 8px; align-items: center !important; } /* Ocultamos la sidebar-nav completa en modo rail — el rail usa su propio nav */ body:not(.ws-marcas-active).gk-module-mode .sidebar > *:not(.gk-rail), body:not(.ws-marcas-active).gk-module-mode .sidebar .sidebar-brand, body:not(.ws-marcas-active).gk-module-mode .sidebar .sidebar-nav-intecap, body:not(.ws-marcas-active).gk-module-mode .sidebar .sidebar-footer, body:not(.ws-marcas-active).gk-module-mode .sidebar .workspace-switcher { display: none !important; } /* Rail nav (contenido nuevo dentro del sidebar) */ .gk-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .gk-rail-back { width: 60px; height: 60px; border-radius: 16px; background: var(--gk-sur2, #f1f1f4); border: none; cursor: pointer; display: grid; place-items: center; color: var(--gk-ink2, #3f3f46); transition: background var(--gk-t-fast) var(--gk-ease), color var(--gk-t-fast) var(--gk-ease); margin-bottom: 4px; } .gk-rail-back svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .gk-rail-back:hover { background: var(--gk-a-soft, #eee8fd); color: var(--gk-a, #5e2ced); } .gk-rail-back-label { font-size: 9px; font-weight: 800; color: var(--gk-ink4, #a1a1aa); letter-spacing: 0.08em; text-transform: none; margin-bottom: 8px; margin-top: -4px; } .gk-rail-divider { width: 40px; height: 1px; background: var(--gk-ln, #e4e4e7); margin: 4px 0; } .gk-rail-item { position: relative; width: 60px; height: 60px; border-radius: 16px; border: none; cursor: pointer; display: grid; place-items: center; background: transparent; transition: background var(--gk-t-fast) var(--gk-ease), transform var(--gk-t-fast) var(--gk-ease), box-shadow var(--gk-t-fast) var(--gk-ease); } .gk-rail-item svg { width: 24px; height: 24px; stroke: #6a6c72; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--gk-t-fast) var(--gk-ease); } .gk-rail-item:hover { background: #efeff1; } .gk-rail-item:hover svg { stroke: #111214; } .gk-rail-item:active { transform: scale(.94); } .gk-rail-item.gk-active { background: var(--gk-a, #5e2ced); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--gk-a, #5e2ced) 60%, transparent); } .gk-rail-item.gk-active svg { stroke: #ffffff; } .gk-rail-item .gk-rail-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #ffffff; font-family: var(--gk-mono, monospace); font-size: 10px; font-weight: 900; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.96); } /* KIT 28/07 · un-acento: riel neutro, la ACTIVA lleva el acento (los 10 colores por módulo quedaron atrás — mismo criterio que el launcher blanco) */ /* Main content en modo módulo: fondo con backdrop blur */ body:not(.ws-marcas-active).gk-module-mode .main-content { position: fixed !important; top: 0 !important; left: 88px !important; right: 0 !important; bottom: 0 !important; padding: 40px !important; overflow-y: auto; z-index: 700 !important; background: rgba(10, 10, 15, 0.35); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); max-width: none !important; margin: 0 !important; } @media (max-width: 700px) { body:not(.ws-marcas-active).gk-module-mode .main-content { left: 0 !important; padding: 0 !important; } body:not(.ws-marcas-active).gk-module-mode .sidebar { display: none !important; } } /* F125 FIX: ocultar F30 widgets en modo módulo (topbar, notif, cmd) */ body:not(.ws-marcas-active).gk-module-mode .f30-topbar, body:not(.ws-marcas-active).gk-module-mode .f30-notif-panel, body:not(.ws-marcas-active).gk-module-mode .f30-cmd, body:not(.ws-marcas-active).gk-module-mode .f30-mobile-bottom { display: none !important; } /* F125 FIX: Solo las SECTIONS (id^=section-) como modal centrado — NO afecta .f30-topbar u otros divs sueltos */ body:not(.ws-marcas-active).gk-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) { background: var(--gk-sur, #ffffff) !important; border-radius: 20px !important; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.32), 0 4px 16px -4px rgba(0, 0, 0, 0.16) !important; padding: 32px 36px !important; /* F132: fluido — 1280 de piso, crece con el monitor hasta 2000 */ max-width: clamp(1280px, calc(100vw - 260px), 2000px) !important; width: 100% !important; margin: 0 auto !important; min-height: calc(100vh - 80px); animation: gkModalIn .28s cubic-bezier(.22, 1, .36, 1); position: relative; z-index: 1; } @keyframes gkModalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* F125 FIX: neutralizar max-width viejo de section-pedidos (F120 puso 1400 con margin auto) */ body:not(.ws-marcas-active).gk-module-mode #section-pedidos.gk-in-module, body:not(.ws-marcas-active).gk-module-mode #section-pedidos:not(.hidden) { max-width: clamp(1280px, calc(100vw - 260px), 2000px) !important; /* F132 */ } @media (max-width: 700px) { body:not(.ws-marcas-active).gk-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) { border-radius: 0 !important; padding: 16px !important; min-height: 100vh; } } /* Botón cerrar del módulo (aparece arriba derecha del modal) */ .gk-module-close { position: fixed; top: 24px; right: 24px; z-index: 750; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border: none; color: var(--gk-ink2, #3f3f46); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transition: background var(--gk-t-fast) var(--gk-ease), color var(--gk-t-fast) var(--gk-ease), transform var(--gk-t-fast) var(--gk-ease); } .gk-module-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; } .gk-module-close:hover { background: #dc2626; color: #ffffff; transform: scale(1.06); } /* Responsive del launcher */ @media (max-width: 1000px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { grid-template-columns: repeat(4, 140px); gap: 24px; } } @media (max-width: 700px) { body:not(.ws-marcas-active) #section-home.gk-launcher { padding: 24px 16px 16px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-hero { margin: 16px auto 24px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title { font-size: 28px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { grid-template-columns: repeat(3, 108px); gap: 18px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { width: 108px; height: 108px; border-radius: 20px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 38px; height: 38px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { font-size: 11.5px; } } /* ============================================================ F127g · MOBILE COMPACTO TIPO APP (07/09/26) ============================================================ Fix pedido por usuario: en mobile todo se veía muy grande, con espacios grises, buscador cuadrado, chips grandes, cards con mucho vacío. Objetivo: super ajustado tipo app nativa. Aplica a portal empleados (gk-module-mode) + centros (gk-centro-module-mode). ============================================================ */ @media (max-width: 640px) { /* (Las reglas de layout sidebar/main-content viven en F127i — bottom bar. Acá solo quedan los compactos de tipografía, inputs, chips y cards.) */ /* Hero Bandeja/Publicadas/Catálogo/etc compacto */ .vm-bandeja-hero, .vm-catalogo-hero, .vm-publicadas-hero, .vm-registro-hero, .vm-galerias-hero { padding-bottom: 10px !important; margin-bottom: 10px !important; gap: 8px !important; } .vm-bandeja-title, .vm-catalogo-title, .vm-publicadas-title, .vm-registro-title, .vm-galerias-title { font-size: 18px !important; gap: 6px !important; letter-spacing: -0.02em !important; } .vm-bandeja-count-chip { font-size: 11px !important; padding: 1px 7px !important; } .vm-bandeja-actions, .vm-catalogo-actions { gap: 6px !important; } /* View toggle mini (lista/grid) */ .vm-view-toggle { padding: 3px !important; } .vm-view-btn { width: 28px !important; height: 26px !important; font-size: 12px !important; } .vm-btn-icon { width: 32px !important; height: 32px !important; font-size: 13px !important; padding: 0 !important; } /* Inputs búsqueda compactos + redondeados como pill (no cuadrado) */ #section-pedidos .input, #section-solicitudes .input, #section-catalogo .input, #section-publicadas .input, #section-galerias .input, #section-registro .input, #section-republicar .input, .vm-bandeja-search .input, .vm-search-input, #search-input, #catalogo-search, #publicadas-search, #galeria-search, #catalog-search, #republicar-search, #galeria-inline-search { height: 38px !important; min-height: 38px !important; padding: 8px 14px 8px 36px !important; border-radius: 12px !important; font-size: 13.5px !important; box-shadow: none !important; } /* Chips filtros mucho más compactos */ body:not(.ws-marcas-active) #section-pedidos .chip, body:not(.ws-marcas-active) #section-catalogo .chip, body:not(.ws-marcas-active) #section-publicadas .chip, body:not(.ws-marcas-active) .vm-chips-row .chip, body:not(.ws-marcas-active) .chips .chip { padding: 4px 10px !important; font-size: 11.5px !important; height: 26px !important; min-height: 26px !important; line-height: 1.2 !important; border-radius: 999px !important; font-weight: var(--vm-fw-sb, 600) !important; } .vm-chips-row { gap: 5px !important; row-gap: 6px !important; } .vm-chips-sep { height: 16px !important; margin: 0 2px !important; } /* (Cards y grids: ver F127i — altura fija 168px, sin aspect-ratio) */ /* FAB (+ Nueva) más pequeño y arriba del bottom-nav si existe */ #vm-fab-new-centro, #vm-fab-new, .vm-fab { width: 52px !important; height: 52px !important; bottom: 18px !important; right: 18px !important; font-size: 18px !important; } } /* Extra compact para pantallas muy chicas (iPhone SE / mini) */ @media (max-width: 380px) { #section-publicadas .sol-grid, #section-registro .grid, #section-galerias .grid { grid-template-columns: 1fr !important; } .vm-bandeja-title { font-size: 17px !important; } } /* ============================================================ F127i · MOBILE = APP REAL (bottom bar + un solo botón X) ============================================================ Reemplaza el intento F127h. Diseño coherente en mobile: - Launcher: pantalla de inicio con tiles (ya funciona). - Módulo abierto: BOTTOM BAR con el rail de iconos (tipo app iOS), contenido full-width arriba, X para volver al escritorio. - Cerrar sesión SOLO en el launcher (nunca choca con la X). ============================================================ */ /* Logout nunca en modo módulo (desktop e móvil): la X es el único botón flotante */ body:not(.ws-marcas-active).gk-module-mode .gk-logout-btn { display: none !important; } @media (max-width: 700px) { /* ─── 1 · BOTTOM BAR: el rail pasa abajo, horizontal, scrolleable ─── */ body:not(.ws-marcas-active).gk-module-mode .sidebar { display: flex !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 60px !important; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important; flex-direction: row !important; align-items: center !important; gap: 0 !important; transform: none !important; border-right: none !important; border-top: 1px solid var(--gk-ln, #e4e4e7) !important; box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10) !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; -ms-overflow-style: none; } body:not(.ws-marcas-active).gk-module-mode .sidebar::-webkit-scrollbar { display: none; } /* Rail en fila — margin auto: centrado si cabe, scroll desde el inicio si no (justify-content center con overflow recortaba el primer ícono — F129.2) */ body:not(.ws-marcas-active).gk-module-mode .gk-rail { flex-direction: row !important; align-items: center !important; width: max-content !important; margin: 0 auto !important; gap: 8px !important; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-back { width: 46px !important; height: 46px !important; border-radius: 14px !important; margin: 0 !important; flex: 0 0 auto; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-back svg { width: 19px !important; height: 19px !important; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-back-label { display: none !important; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-divider { width: 1px !important; height: 28px !important; margin: 0 2px !important; flex: 0 0 auto; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-item { width: 46px !important; height: 46px !important; border-radius: 14px !important; flex: 0 0 auto; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-item svg { width: 20px !important; height: 20px !important; } /* ─── 2 · Contenido full-width con aire para el bottom bar ─── */ body:not(.ws-marcas-active).gk-module-mode .main-content { left: 0 !important; padding: 0 !important; } body:not(.ws-marcas-active).gk-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) { border-radius: 0 !important; padding: 14px 12px 96px !important; /* 96px de aire para el bottom bar */ min-height: 100vh !important; max-width: 100% !important; box-shadow: none !important; } /* X compacta */ .gk-module-close { top: 10px !important; right: 10px !important; width: 36px !important; height: 36px !important; } /* ─── 3 · Sin buscador global ni hamburger (cada sección tiene el suyo) ─── */ body:not(.ws-marcas-active) .smart-search-bar, body:not(.ws-marcas-active) #mobile-toggle, body:not(.ws-marcas-active) .mobile-toggle, body:not(.ws-marcas-active) .sidebar-overlay { display: none !important; } /* ─── 4 · BANDEJA en mobile: SIEMPRE cuadrícula de cards ─── El grid solo aplica a la vista cards — aplicarlo a la vista tabla partía la tabla a la mitad y dejaba un cuadro blanco (F129.2). El JS fuerza la vista cards al iniciar en mobile. */ .vm-view-toggle { display: none !important; } /* sin toggle en mobile: una sola vista */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Fallback si quedara en vista tabla: full-width con scroll propio, sin partirse */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-table { display: block !important; width: 100% !important; overflow-x: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* FAB + oculto dentro de módulos en mobile (chocaba con el bottom bar) — en el escritorio/launcher sigue visible como siempre */ body:not(.ws-marcas-active).gk-module-mode #vm-fab-new, body:not(.ws-marcas-active).gk-module-mode .vm-fab { display: none !important; } /* Cards de altura FIJA compacta — nunca gigantes, nunca cortadas */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card { aspect-ratio: auto !important; height: 168px !important; min-height: 168px !important; max-height: 168px !important; border-radius: 14px !important; overflow: hidden !important; cursor: pointer; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card:not(.sol-card-has-bg) { background: #fbfaff !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-title { font-size: 12px !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-id, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-meta { font-size: 10px !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-badge { font-size: 9px !important; padding: 2px 7px !important; } /* Fuera los botones CTA dentro de la card (quedaban cortados) — tap en la card abre */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-actions, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-cta, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-btn-row { display: none !important; } /* Hero de sección en una sola línea compacta */ .vm-bandeja-hero { border-bottom: none !important; padding-bottom: 4px !important; margin-bottom: 8px !important; gap: 8px !important; flex-wrap: nowrap !important; } .vm-bandeja-filters { margin-bottom: 8px !important; } .vm-chips-row { overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 2px !important; scrollbar-width: none; -ms-overflow-style: none; } .vm-chips-row::-webkit-scrollbar { display: none; } .vm-chips-row .chip { flex-shrink: 0 !important; } /* Grids de otras secciones: 2 cols compactas con altura fluida */ #section-publicadas .sol-grid, #section-registro .grid, #section-galerias .grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } #section-publicadas .sol-card { aspect-ratio: auto !important; height: 168px !important; border-radius: 14px !important; } } /* Pantallas muy chicas: 1 columna, cards un poco más altas */ @media (max-width: 380px) { body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards { grid-template-columns: 1fr !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card { height: 150px !important; min-height: 150px !important; max-height: 150px !important; } } /* ============================================================ F128 · CONFIGURACIÓN EN 3 TABS (Generales / IA / Centros) HTML reorganizado en sidebar.php — IDs y JS de guardado intactos. Los sub-tabs de centro filtran con data-centro-activo + :has(). ============================================================ */ /* Tabs principales pill */ .cfg-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .cfg-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--vm-n-200, #e4e4e7); background: var(--vm-n-0, #fff); color: var(--vm-n-600, #52525b); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .16s ease; letter-spacing: -0.01em; } .cfg-tab i { font-size: 13px; } .cfg-tab:hover { border-color: var(--vm-violet, #5e2ced); color: var(--vm-violet, #5e2ced); background: var(--vm-v-08, rgba(94, 44, 237, 0.06)); } .cfg-tab.active { background: #5e2ced; border-color: transparent; color: #ffffff; box-shadow: 0 6px 16px -6px rgba(94, 44, 237, 0.5); } /* Sub-tabs de centro */ .cfg-centro-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .cfg-centro-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--vm-n-200, #e4e4e7); background: var(--vm-n-0, #fff); color: var(--vm-n-600, #52525b); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .16s ease; } .cfg-ct-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .cfg-centro-tab:hover { border-color: var(--vm-n-400, #a1a1aa); color: var(--vm-n-900, #18181b); } .cfg-centro-tab.active { border-width: 2px; color: var(--vm-n-900, #18181b); background: var(--vm-n-50, #fafafa); } .cfg-centro-tab.active[data-cfg-centro-tab="coban"] { border-color: #14b8a6; background: #f0fdfa; } .cfg-centro-tab.active[data-cfg-centro-tab="salama"] { border-color: #6366f1; background: #eef2ff; } .cfg-centro-tab.active[data-cfg-centro-tab="peten"] { border-color: #f97316; background: #fff7ed; } /* Filtro por centro activo: elementos data-cfg-centro que NO son del activo se ocultan */ #cfg-tab-centros[data-centro-activo="coban"] [data-cfg-centro]:not([data-cfg-centro="coban"]), #cfg-tab-centros[data-centro-activo="salama"] [data-cfg-centro]:not([data-cfg-centro="salama"]), #cfg-tab-centros[data-centro-activo="peten"] [data-cfg-centro]:not([data-cfg-centro="peten"]) { display: none !important; } /* Suspensión: solo la fila del centro activo (las filas llevan button[data-susp-id]) */ #cfg-tab-centros[data-centro-activo="coban"] #susp-list > div:has([data-susp-id]):not(:has([data-susp-id="coban"])), #cfg-tab-centros[data-centro-activo="salama"] #susp-list > div:has([data-susp-id]):not(:has([data-susp-id="salama"])), #cfg-tab-centros[data-centro-activo="peten"] #susp-list > div:has([data-susp-id]):not(:has([data-susp-id="peten"])) { display: none !important; } /* Marcos: el select interno de centro se oculta (los sub-tabs lo manejan) */ #cfg-tab-centros #cfg-marcos-card .form-group:has(#cfg-marcos-centro) { display: none !important; } /* Registro: la fila interna de tabs se oculta (los sub-tabs hacen click programático) */ #cfg-tab-centros #cfg-registro-card > div:has(.registro-pub-tab) { display: none !important; } /* Compactar cards de config */ #section-config .config-card { padding: 18px 20px !important; margin-bottom: 14px !important; border-radius: 14px !important; } #section-config .config-card-title { font-size: 14px !important; margin-bottom: 10px !important; } #section-config .config-card p, #section-config .config-card > div[style*="font-size:12px"] { line-height: 1.45 !important; } /* ============================================================ F129.4 · BUSCADOR INTELIGENTE EN EL ESCRITORIO (09/07/26) El buscador global (#global-search: busca cursos, fichas, diseños y NAVEGA al lugar — F22) quedó huérfano: F30 lo ocultó a favor del topbar y F125 ocultó el topbar en el launcher. Se restaura como pill glass centrado arriba del escritorio. Desktop only — en mobile cada sección tiene su buscador. ============================================================ */ @media (min-width: 701px) { body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar { display: flex !important; position: fixed !important; top: 18px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 850 !important; width: min(600px, 62vw) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar > div { flex: 1 !important; max-width: none !important; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar #global-search { height: 46px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); color: #ffffff !important; font-size: 14px !important; padding: 0 18px 0 44px !important; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25) !important; transition: background .18s ease, border-color .18s ease; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar #global-search::placeholder { color: rgba(255, 255, 255, 0.65) !important; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar #global-search:focus { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.5) !important; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35) !important; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar .fa-magnifying-glass { color: rgba(255, 255, 255, 0.8) !important; left: 18px !important; } body:not(.ws-marcas-active).gk-launcher-mode #global-search-results { border-radius: 16px !important; box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45) !important; margin-top: 8px !important; overflow: hidden; } } /* ============================================================ F130 · BANDEJA UNIFICADA — RAIL DE GRUPOS (09/07/26) Una sola vista: rail lateral [En proceso | Publicadas]. Publicadas agrupa por familia (patrón F59A) — nunca fichas repetidas. Los chips de estado solo aplican a "En proceso". ============================================================ */ .vm-bandeja-body { display: block; } /* F130c · Segmented control de grupos en el hero (reemplaza el rail lateral) */ .vm-grupo-segment { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--vm-n-100, #f4f4f5); border: 1px solid var(--vm-n-150, #e5e5eb); } .vm-side-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: none; border-radius: 999px; background: transparent; color: var(--vm-n-600, #52525b); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; transition: all .15s ease; } .vm-side-btn i { font-size: 13px; width: 16px; text-align: center; } .vm-side-btn:hover { background: var(--vm-v-08, rgba(94,44,237,.06)); color: var(--vm-violet, #5e2ced); } .vm-side-btn.active { background: var(--vm-violet, #5e2ced); color: #ffffff; box-shadow: 0 6px 16px -6px rgba(94, 44, 237, 0.5); } .vm-side-count { margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--vm-n-100, #f4f4f5); color: var(--vm-n-600, #52525b); } .vm-side-btn.active .vm-side-count { background: rgba(255, 255, 255, 0.22); color: #ffffff; } /* Chips de estado ocultos cuando el grupo es Publicadas (no aplican) */ #section-pedidos[data-grupo="publicadas"] #pedidos-estado-chips, #section-pedidos[data-grupo="publicadas"] .vm-chips-sep { display: none !important; } /* Mobile: segmented ocupa su fila completa bajo el título */ @media (max-width: 700px) { .vm-grupo-segment { width: 100%; } .vm-side-btn { flex: 1; justify-content: center; padding: 9px 10px; font-size: 12px; } } /* ============================================================ F130b · FILTROS CON JERARQUÍA Y LÓGICA (09/07/26) Grupo CENTRO: activo = color sólido del centro. Grupo ETAPA: activo = tinte suave del color de la etapa. Orden de etapas = flujo real del sistema. ============================================================ */ .vm-bandeja-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .vm-filter-group { display: flex; align-items: center; gap: 10px; } .vm-filter-label { flex-shrink: 0; width: 46px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: none; color: var(--vm-n-400, #a1a1aa); } .vm-filter-group .vm-chips-row { flex: 1; } /* Etapas: chips un paso más discretos que los centros */ #section-pedidos #pedidos-estado-chips .chip { font-size: 12px !important; padding: 4px 11px !important; border-style: solid !important; } #section-pedidos #pedidos-estado-chips .chip.active { border-style: solid !important; } /* CENTRO activo → color sólido del centro (identidad) */ #section-pedidos #bandeja-centro-chips .chip.active[data-centro="todos"] { background: var(--vm-violet, #5e2ced) !important; border-color: var(--vm-violet, #5e2ced) !important; color: #ffffff !important; } #section-pedidos #bandeja-centro-chips .chip.active[data-centro="coban"] { background: #14b8a6 !important; border-color: #14b8a6 !important; color: #ffffff !important; } #section-pedidos #bandeja-centro-chips .chip.active[data-centro="salama"] { background: #6366f1 !important; border-color: #6366f1 !important; color: #ffffff !important; } #section-pedidos #bandeja-centro-chips .chip.active[data-centro="peten"] { background: #f97316 !important; border-color: #f97316 !important; color: #ffffff !important; } #section-pedidos #bandeja-centro-chips .chip.active .vm-centro-dot { background: #ffffff !important; } /* ETAPA activa → tinte suave del color de la etapa (se distingue del centro) */ #section-pedidos #pedidos-estado-chips .chip.active[data-estado="todos"] { background: var(--vm-n-900, #18181b) !important; border-color: var(--vm-n-900, #18181b) !important; color: #ffffff !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="recibido"] { background: #fee2e2 !important; border-color: #ef4444 !important; color: #991b1b !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="en_diseno"] { background: #fef9c3 !important; border-color: #eab308 !important; color: #854d0e !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="en_revision"] { background: #dbeafe !important; border-color: #3b82f6 !important; color: #1e40af !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="revision_mercadeo"] { background: #ede9fe !important; border-color: #8b5cf6 !important; color: #5b21b6 !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="cambios_mercadeo"] { background: #ffedd5 !important; border-color: #f97316 !important; color: #9a3412 !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="aprobado"] { background: #dcfce7 !important; border-color: #22c55e !important; color: #166534 !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="rechazado"] { background: #f4f4f5 !important; border-color: #71717a !important; color: #3f3f46 !important; } /* Mobile: labels arriba de cada fila (no al lado) */ @media (max-width: 700px) { .vm-filter-group { flex-direction: column; align-items: flex-start; gap: 4px; } .vm-filter-label { width: auto; } } /* ============================================================ F130d · CENTROS CENTRADOS CON SU COLOR (09/07/26) Fila de centros centrada bajo el segmented; cada botón lleva la identidad de su centro también en reposo. Etapas quedan abajo como están. ============================================================ */ .vm-filter-group-centros { justify-content: center; } .vm-filter-group-centros .vm-chips-row { flex: 0 1 auto; justify-content: center; } #section-pedidos #bandeja-centro-chips .chip { font-weight: 800 !important; padding: 7px 18px !important; border-width: 1.5px !important; } /* Identidad de color en reposo */ #section-pedidos #bandeja-centro-chips .chip[data-centro="todos"] { border-color: rgba(94, 44, 237, 0.4) !important; color: var(--vm-violet, #5e2ced) !important; } #section-pedidos #bandeja-centro-chips .chip[data-centro="coban"] { border-color: rgba(20, 184, 166, 0.5) !important; color: #0f766e !important; } #section-pedidos #bandeja-centro-chips .chip[data-centro="salama"] { border-color: rgba(99, 102, 241, 0.5) !important; color: #4338ca !important; } #section-pedidos #bandeja-centro-chips .chip[data-centro="peten"] { border-color: rgba(249, 115, 22, 0.5) !important; color: #c2410c !important; } /* Activo: color sólido (las reglas F130b siguen mandando el fondo); este bloque solo asegura texto blanco encima */ #section-pedidos #bandeja-centro-chips .chip.active { color: #ffffff !important; } /* ============================================================ F133 · RAIL AJUSTADO A LA PANTALLA (10/07/26) Los íconos del rail se centran verticalmente cuando sobra altura (margin:auto — con poca altura vuelve al inicio y scrollea, sin recortes) y escalan en monitores grandes. ============================================================ */ body:not(.ws-marcas-active).gk-module-mode .gk-rail { margin-top: auto; margin-bottom: auto; } @media (min-width: 1600px) and (min-height: 860px) { body:not(.ws-marcas-active).gk-module-mode .sidebar { width: 96px !important; min-width: 96px !important; max-width: 96px !important; } body:not(.ws-marcas-active).gk-module-mode .main-content { left: 96px !important; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-back, body:not(.ws-marcas-active).gk-module-mode .gk-rail-item { width: 64px; height: 64px; border-radius: 18px; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-item svg { width: 26px; height: 26px; } } /* ============================================================ F134 · ESCRITORIO EMPLEADOS AJUSTADO A PANTALLAS GRANDES (10/07/26) El launcher quedaba chico y arriba, con la última fila de tiles descentrada y vacío abajo. Conjunto centrado verticalmente, filas de tiles siempre centradas (flex) y escala por tamaño. ============================================================ */ /* El conjunto (inbox + hero + tiles + footer) se centra en la altura */ body:not(.ws-marcas-active) #section-home.gk-launcher { justify-content: center; } /* Tiles como flex centrado: la fila incompleta (4 de 10) queda CENTRADA, no colgando a la izquierda como con grid de 6 columnas */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1200px; } /* ≥1200px: un paso más grande */ @media (min-width: 1200px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-hero { margin-bottom: 44px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title { font-size: 42px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { gap: 36px 44px; max-width: 1280px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { width: 158px; height: 158px; border-radius: 28px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 52px; height: 52px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { font-size: 14px; } } /* ≥1600px: escala completa — 6 tiles por fila bien anchos, hero grande */ @media (min-width: 1600px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title { font-size: 46px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-sub { font-size: 16px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { gap: 44px 56px; max-width: 1560px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { width: 176px; height: 176px; border-radius: 32px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 58px; height: 58px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { font-size: 15px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { max-width: 1100px; margin-left: auto; margin-right: auto; } } /* Módulos: llenar más el ancho en monitores grandes (afina F132) */ body:not(.ws-marcas-active).gk-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) { max-width: clamp(1280px, calc(100vw - 200px), 2200px) !important; } body:not(.ws-marcas-active).gk-module-mode #section-pedidos.gk-in-module, body:not(.ws-marcas-active).gk-module-mode #section-pedidos:not(.hidden) { max-width: clamp(1280px, calc(100vw - 200px), 2200px) !important; } /* ══════════════════════════════════════════════════════════════════════════ HEADER B · backport del SaaS (22/07/26) — iconos sin texto, fecha compacta, lupa colapsable con overlay, grillas centradas (gated), tiles -20% + hover. ══════════════════════════════════════════════════════════════════════════ */ .gk-logout-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; } .gk-logout-btn span { display: none; } .gk-logout-btn svg { width: 18px; height: 18px; } .gk-topbar-date { position: fixed; top: 20px; right: 74px; z-index: 900; display: none; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); pointer-events: none; white-space: nowrap; } body.gk-logout-visible .gk-topbar-date { display: inline-flex; } @media (max-width: 560px) { .gk-topbar-date { display: none !important; } } /* Lupa: el buscador del launcher colapsa a icono (arriba-izquierda; INTECAP no tiene botón Menú) */ .gk-lupa-btn { position: fixed; top: 20px; left: 20px; z-index: 900; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); transition: background .2s; } .gk-lupa-btn:hover { background: rgba(255,255,255,.24); } .gk-lupa-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; } body:not(.ws-marcas-active).gk-launcher-mode.gk-logout-visible .gk-lupa-btn { display: inline-flex; } body:not(.ws-marcas-active).gk-launcher-mode:not(.gk-search-open) #smart-search-bar { display: none !important; } /* Al abrir: buscador AL CENTRO y lo de atrás desenfocado */ body.gk-search-open::before { content: ''; position: fixed; inset: 0; z-index: 845; background: rgba(23, 18, 58, 0.38); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body:not(.ws-marcas-active).gk-launcher-mode.gk-search-open #smart-search-bar { top: 26vh !important; width: min(640px, 92vw) !important; z-index: 850 !important; } body:not(.ws-marcas-active).gk-launcher-mode.gk-search-open #smart-search-bar #global-search { height: 54px !important; font-size: 15px !important; } /* Tira de nuevas COMPACTA (una línea, sin caja grande) */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { max-width: 640px; margin: 4px auto 26px; padding: 8px 14px !important; border-radius: 999px; border: none !important; background: rgba(255,255,255,.10) !important; display: flex; align-items: center; gap: 10px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-head { margin: 0 !important; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title { font-size: 12px !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-list { margin: 0 !important; } /* Grilla del launcher CENTRADA verticalmente — SOLO en modo launcher (en module-mode el launcher es fondo borroso y NO debe medir 100dvh: empujaba el módulo fuera). */ body:not(.ws-marcas-active).gk-launcher-mode #section-home.gk-launcher { display: flex !important; flex-direction: column; min-height: 100dvh; box-sizing: border-box; } body:not(.ws-marcas-active).gk-launcher-mode #section-home.gk-launcher .gk-launcher-grid { margin: auto !important; } body:not(.ws-marcas-active).gk-launcher-mode #section-home.gk-launcher .gk-launcher-footer { margin-top: auto !important; } body:not(.ws-marcas-active).gk-module-mode #section-home.gk-launcher { min-height: 0 !important; height: auto !important; } @media (max-width: 900px) { body:not(.ws-marcas-active).gk-launcher-mode #section-home.gk-launcher { padding-bottom: 92px !important; } } body:not(.ws-marcas-active).gk-launcher-mode .mobile-toggle { display: none !important; } /* Hub centrado */ #hub-view:not(.hidden) { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; box-sizing: border-box; } /* Tiles 20% más chicos + hover "me elevo" (este quiero abrir) — solo desktop/cursor */ @media (min-width: 901px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { width: 112px !important; height: 112px !important; border-radius: 19px !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 37px !important; height: 37px !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge { transform: scale(.9); } } @media (hover: hover) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:hover, body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:focus-visible { transform: translateY(-12px) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:hover .gk-lt-tile { box-shadow: 0 26px 48px -14px rgba(15, 23, 42, 0.34), 0 6px 14px rgba(15, 23, 42, 0.10) !important; } .gk-hub-tile { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .28s ease !important; } .gk-hub-tile:hover { transform: translateY(-10px) !important; } } /* ══════════════════════════════════════════════════════════════════════════ BRICK 4 · BACKPORT SaaS 22/07/26 — Ficha Diseño (subset seguro) a) Preview-cards del carrusel: tarjeta con imagen a PROPORCIÓN REAL (sin recortar) + botón eliminar decente. Pisa el bloque viejo de miniaturas 56px cuadradas (cascada: mismo peso, gana el último). b) Ficha móvil ≤640px: el rail lateral pasa a BOTTOM BAR tipo app (patrón F127i aprobado). Pisa el bloque viejo de rail 76px. Solo CSS — el markup .preview-card ya venía en la copia de julio. ══════════════════════════════════════════════════════════════════════════ */ .vm-ws-content .preview-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: 10px !important; margin-top: 8px !important; } .vm-ws-content .preview-card { border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-md) !important; background: #fff !important; padding: 6px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; overflow: hidden !important; } .vm-ws-content .preview-thumb { width: 100% !important; height: 96px !important; border-radius: var(--vm-r-sm) !important; background: var(--vm-n-100) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; cursor: pointer !important; border: 1.5px solid transparent !important; transition: border-color var(--vm-dur-1) var(--vm-ease) !important; } .vm-ws-content .preview-card:hover .preview-thumb { border-color: var(--vm-violet) !important; } .vm-ws-content .preview-thumb img, .vm-ws-content .preview-thumb video { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: contain !important; /* respeta el tamaño real: no recorta ni deforma */ border: none !important; border-radius: 0 !important; } .vm-ws-content .preview-meta { font-size: 10.5px !important; color: var(--vm-n-600) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; } .btn-delete-photo { border: 1px solid #fecaca !important; background: #fef2f2 !important; color: #dc2626 !important; border-radius: 8px !important; width: 30px !important; height: 26px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; flex: 0 0 auto !important; transition: background .15s, border-color .15s, color .15s !important; } .btn-delete-photo:hover { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; } /* ── b) Ficha móvil: sidebar → BOTTOM BAR (se apila header/body/barra) ── */ @media (max-width: 640px) { body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { grid-template-columns: 1fr !important; grid-template-rows: 56px minmax(0, 1fr) auto !important; grid-template-areas: "header" "body" "sidebar" !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sidebar { flex-direction: row !important; align-items: stretch !important; border-right: none !important; border-top: 1px solid var(--gk-ln, #e4e4e7) !important; background: var(--gk-sur, #fff) !important; overflow: visible !important; } /* La cabecera del sidebar (avatar/título) NO va en la barra — el título ya está en el header del modal. */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-head, body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { display: none !important; } /* Rail → fila; cada tab reparte el ancho por igual */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { flex-direction: row !important; flex: 1 !important; gap: 0 !important; padding: 0 !important; overflow: visible !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab { flex: 1 !important; width: auto !important; min-height: 0 !important; min-width: 0 !important; padding: 8px 2px calc(8px + env(safe-area-inset-bottom, 0px)) !important; gap: 3px !important; border-radius: 0 !important; border: none !important; } /* Activo en la barra: tinte violeta + línea superior (sin card ni sombra) */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab.active { background: color-mix(in srgb, var(--gk-a, #5e2ced) 8%, white) !important; box-shadow: inset 0 3px 0 var(--gk-a, #5e2ced) !important; border: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab i { font-size: 18px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-rail-label { font-size: 10px !important; display: block !important; } /* Badge de conteo (Diseños) recolocado sobre el ícono para la barra */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab-count { top: 3px !important; right: 50% !important; margin-right: -20px !important; } /* Footer WhatsApp = último ítem de la barra */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-footer { padding: 0 !important; border-top: none !important; display: flex !important; align-items: stretch !important; flex-shrink: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp { flex-direction: column !important; gap: 3px !important; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 0 !important; height: 100% !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp span { display: block !important; font-size: 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp i { font-size: 18px !important; } } /* ══════════════════════════════════════════════════════════════════════════ BRICK 4b · BACKPORT SaaS 22/07/26 — Ficha unificada (paridad producción) Layouts por pestaña vía data-active-tab (lo setea solSwitchTab): · Ficha / Historial → SIN columna de diseño, editor a TODO el ancho (la tira de emojis se aplana sola y el textarea respira). · Diseño IA → también a todo el ancho (antes quedaba una columna vacía). · Diseños → TEXTO del post (izq) | DISEÑO (der) arriba + TODAS las acciones INTECAP (Recomponer/Restaurar/Retro/Aprobar/links) abajo. · Subir → diseño a la DERECHA sticky (como el SaaS). Pisa por cascada la base vieja 340px|1fr y el media-frame 4/5 fijo. ══════════════════════════════════════════════════════════════════════════ */ .vm-ws-content .ficha-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 360px) !important; gap: 20px !important; align-items: start !important; } /* La columna del diseño va a la derecha (order) y queda pegada arriba mientras el centro scrollea */ .vm-ws-content .ficha-grid .sol-media-col { order: 2 !important; position: sticky !important; top: 0 !important; align-self: start !important; } /* (SUPERADO 05/08/26 por ESTUDIO DE FICHA — el diseño NUNCA se oculta, se ve en las 5 pestañas) #solicitud-modal[data-active-tab="ficha"] .vm-ws-content .sol-media-col, #solicitud-modal[data-active-tab="historial"] .vm-ws-content .sol-media-col, #solicitud-modal[data-active-tab="diseno_ia"] .vm-ws-content .sol-media-col { display: none !important; } #solicitud-modal[data-active-tab="ficha"] .vm-ws-content .ficha-grid, #solicitud-modal[data-active-tab="historial"] .vm-ws-content .ficha-grid, #solicitud-modal[data-active-tab="diseno_ia"] .vm-ws-content .ficha-grid { grid-template-columns: minmax(0, 1fr) !important; } */ /* Diseño = pantalla final de revisión: TEXTO del post (izq) | DISEÑO (der) arriba, y las acciones (Recomponer + Restaurar + retro + Aprobar + links) a TODO el ancho abajo. */ /* (SUPERADO por ESTUDIO DE FICHA) .vm-ws-content .sol-disenos-texto { display: none; } */ #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .ficha-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; grid-template-areas: "media texto" "acciones acciones" !important; } #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .sol-disenos-texto { display: block !important; grid-area: texto !important; align-self: start !important; border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-lg); padding: 14px 16px; background: #fff; } #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .sol-media-col { grid-area: media !important; position: static !important; } /* (SUPERADO por ESTUDIO DE FICHA — el panel vive en el inspector, columna 2) #solicitud-modal[data-active-tab="disenos"] .vm-ws-content #sol-panel-disenos { grid-area: acciones !important; } */ /* Diseño no gigante: se acota para que no empuje todo hacia abajo ni deje hueco al lado. */ #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .media-frame { max-height: 62vh !important; min-height: 260px !important; } /* La columna del texto (con sus miniaturas debajo) puede crecer; sin scroll interno raro. */ #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .sol-disenos-texto .sdt-body { max-height: none !important; } .sol-previews-label { font-size: 11.5px; font-weight: 700; color: var(--vm-n-500); margin: 12px 0 6px; display: flex; align-items: center; gap: 6px; } .sol-previews-label.hidden { display: none !important; } .sol-disenos-texto .sdt-label { font-size: 12px; font-weight: 700; color: var(--vm-n-500); text-transform: none; letter-spacing: 0; margin-bottom: 8px; } .sol-disenos-texto .sdt-body { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--vm-n-800); max-height: 60vh; overflow: auto; } /* Media frame — cada diseño a SU medida real (imagen o video), sin recortar ni deformar */ .vm-ws-content .media-frame { width: 100% !important; aspect-ratio: auto !important; min-height: 240px !important; max-height: 66vh !important; border-radius: var(--vm-r-lg) !important; overflow: hidden !important; background: var(--vm-n-100) !important; border: 1px solid var(--vm-n-150) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .vm-ws-content .media-frame img, .vm-ws-content .media-frame video { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 66vh !important; object-fit: contain !important; object-position: center !important; display: block !important; } /* Móvil: apilar diseño → texto → acciones (1 columna), sin comprimir el texto */ @media (max-width: 820px) { .vm-ws-content .ficha-grid { grid-template-columns: 1fr !important; gap: 14px !important; } #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .ficha-grid { grid-template-columns: 1fr !important; grid-template-areas: "media" "texto" "acciones" !important; } .vm-ws-content .media-frame { max-height: 320px !important; aspect-ratio: 4 / 3 !important; } } /* ══════════════════════════════════════════════════════════════════════════ BRICK 4c · BACKPORT SaaS 22/07/26 — remates de la ficha + Vista en redes a) FIX diseño cortado en Diseños: el marco mide 46vh pero la imagen permitía 66vh → se recortaba arriba/abajo. Ahora la imagen se ajusta COMPLETA al marco (sin recorte). b) Vista en redes (.vrr-*): overlay centrado que muestra el post como se verá en FB/IG — diseño arriba + texto abajo, avatar del centro. ══════════════════════════════════════════════════════════════════════════ */ #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .media-frame img, #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .media-frame video { max-height: calc(62vh - 2px) !important; } .vrr-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .vrr-overlay.hidden { display: none !important; } .vrr-card { width: 100%; max-width: 420px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); position: relative; } .vrr-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #444; cursor: pointer; display: grid; place-items: center; font-size: 15px; } .vrr-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .vrr-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--vm-violet, #5e2ced); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex-shrink: 0; } .vrr-name { font-size: 14px; font-weight: 700; color: #17123a; } .vrr-sub { font-size: 11px; color: #8a83a6; } .vrr-media { background: #0b0b12; display: flex; align-items: center; justify-content: center; min-height: 120px; } .vrr-media img, .vrr-media video { width: 100%; display: block; max-height: 62vh; object-fit: contain; } .vrr-media .vrr-empty { padding: 60px 20px; color: #9aa; font-size: 13px; text-align: center; } .vrr-text { padding: 12px 14px 16px; font-size: 13px; line-height: 1.6; color: #1c1533; white-space: pre-wrap; word-break: break-word; } /* BRICK 4c · botón teal "Enviar a aprobación" en la barra de acciones (paridad SaaS) */ .vm-btn-teal { background: var(--accent-2, #75cebb) !important; border-color: #4fb9a3 !important; color: #0b3b32 !important; box-shadow: 0 4px 12px -4px rgba(117, 206, 187, .5), inset 0 1px 0 rgba(255,255,255,.35) !important; } .vm-btn-teal:hover { background: #4fb9a3 !important; color: #fff !important; } /* ══════════════════════════════════════════════════════════════════════════ LOGIN UNIVERSAL · backport 22/07/26 — la "puerta" de la marca nueva. Video de portada a pantalla completa + aura de blobs, marca grande al costado (isotipo + VIMEDIA) y tarjeta blanca flotante con el PIN. Scoped a .login-screen-v2.vm-door — pisa el login v2 viejo por cascada. Paleta: #5e2ced (violeta) · #75cebb (teal) · blanco. ══════════════════════════════════════════════════════════════════════════ */ .login-screen-v2.vm-door { position: fixed !important; inset: 0 !important; z-index: 900 !important; display: block !important; padding: 0 !important; overflow: auto !important; background: #140c2e !important; font-family: 'Geist', 'Geist', 'Inter', system-ui, sans-serif !important; } .login-screen-v2.vm-door.hidden { display: none !important; } /* fondo: video + velo + aura */ .vm-door-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #140c2e; } .vm-door-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; } .vm-door-veil { position: absolute; inset: 0; background: rgba(18,10,42,.62); } .vm-door-blob { position: absolute; border-radius: 50%; filter: blur(80px); } .vm-door-blob-v { width: 420px; height: 420px; background: #5e2ced; opacity: .55; top: -120px; left: -90px; animation: vmDoorFloat1 15s ease-in-out infinite; } .vm-door-blob-r { width: 300px; height: 300px; background: #75cebb; opacity: .14; top: -40px; left: 12%; animation: vmDoorFloat2 18s ease-in-out infinite; } .vm-door-blob-c { width: 340px; height: 340px; background: #75cebb; opacity: .16; bottom: -130px; right: -70px; animation: vmDoorFloat2 20s ease-in-out infinite; } @keyframes vmDoorFloat1 { 50% { transform: translate(34px,26px); } } @keyframes vmDoorFloat2 { 50% { transform: translate(-26px,20px); } } /* escenario: marca izquierda + tarjeta derecha */ .vm-door-stage { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; gap: clamp(44px, 9vw, 130px); padding: 40px; } /* marca grande (logo configurable + wordmark VIMEDIA) */ .vm-door-brand { display: flex; flex-direction: column; align-items: center; gap: 20px; background: none; border: none; cursor: default; padding: 0; opacity: 0; transform: translateY(12px); animation: vmDoorRise .8s cubic-bezier(.22,1,.36,1) .05s forwards; } .vm-door-brand img { width: 120px; height: 120px; object-fit: cover; border-radius: 28px; box-shadow: 0 24px 56px -12px rgba(0,0,0,.6); } .vm-door-wm { font-family: 'Geist', 'Geist', 'Inter', system-ui, sans-serif; font-size: clamp(38px, 4.6vw, 56px); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #fff; } .vm-door-accent { width: 58px; height: 4px; border-radius: 999px; background: #75cebb; } /* tarjeta flotante */ .vm-door-card { width: min(430px, 100%); background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.6); border-radius: 28px; padding: 38px clamp(24px, 5vw, 36px) 34px; box-shadow: 0 50px 110px -34px rgba(0,0,0,.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(16px); animation: vmDoorRise .8s cubic-bezier(.22,1,.36,1) .18s forwards; } @keyframes vmDoorRise { to { opacity: 1; transform: none; } } .vm-door-avatar { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, #5e2ced 12%, #fff); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .vm-door-avatar svg { width: 29px; height: 29px; stroke: #5e2ced; fill: none; stroke-width: 2; } /* Identidad (29/07): con logo subido, el círculo del login lo muestra — el fondo lo pone el JS según su luminancia */ .vm-door-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: transparent; } .vm-door-avatar:has(img) { overflow: hidden; } .vm-door-hello { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #17123a; } .vm-door-divi { display: flex; align-items: center; gap: 12px; margin: 17px 0 0; } .vm-door-divi span { flex: 1; height: 1px; background: rgba(23,18,58,.12); } .vm-door-divi em { font-style: normal; font-size: 12.5px; color: rgba(23,18,58,.42); } /* form: el wrap viejo pierde su layout — acá es solo contenedor plano */ .vm-door .login-form-wrap { display: block !important; margin-top: 14px; } .vm-door-inp { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid rgba(23,18,58,.12); border-radius: 14px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 18px; letter-spacing: .34em; text-align: center; color: #17123a; background: #f7f7fb; transition: .2s; } .vm-door-inp:focus { outline: none; border-color: #75cebb; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, #75cebb 18%, transparent); } .vm-door-inp::placeholder { color: rgba(23,18,58,.32); letter-spacing: .2em; } .vm-door-go { width: 100%; height: 52px; margin-top: 11px; border: none; border-radius: 14px; background: #5e2ced; color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .2s, transform .2s; } .vm-door-go:hover { filter: brightness(1.08); transform: translateY(-1px); } .vm-door-go:disabled { opacity: .6; transform: none; } .vm-door-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; } .vm-door-back { display: block; text-align: center; margin-top: 18px; color: rgba(23,18,58,.42); font-size: 12.5px; font-weight: 600; text-decoration: none; } .vm-door-back:hover { color: #5e2ced; } @media (max-width: 860px) { .vm-door-stage { flex-direction: column; gap: 26px; padding: 32px 22px; } .vm-door-brand { gap: 12px; } .vm-door-brand img { width: 76px; height: 76px; border-radius: 20px; } .vm-door-wm { font-size: 32px; } } @media (max-width: 480px) { .vm-door-card { padding: 30px 22px 28px; border-radius: 24px; } } @media (prefers-reduced-motion: reduce) { .vm-door-blob { animation: none; } .vm-door-brand, .vm-door-card { animation: none; opacity: 1; transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ BRICK 4d · backport 22/07/26 — ficha modal FLUIDA en monitores grandes. Estaba clavada en 1280px (se veía angosta y perdida al centro en monitores anchos); el SaaS la deja crecer: piso 1280, techo 1600 o 96vw del monitor. Los módulos ya eran fluidos (F132) — esto empareja la ficha. ══════════════════════════════════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { max-width: min(1600px, 96vw) !important; max-height: 94vh !important; } /* ══════════════════════════════════════════════════════════════════════════ HUB MODERNO · backport 22/07/26 — paridad con el launcher y la puerta. Las 2 tarjetas blancas pasan al lenguaje del launcher: el CUADRO de color es el tile (hover -12px resorte) y título/subtítulo van en BLANCO sobre el violeta. Aura sutil de fondo como el login nuevo. Lupa fuera del hub (OLA31: lupa solo en escritorio) y power de abajo fuera (duplicaba el power global de arriba-derecha — sin duplicaciones). Solo CSS — mismo markup, mismos IDs, mismos textos. ══════════════════════════════════════════════════════════════════════════ */ /* aura sutil tipo puerta */ .gk-hub { position: relative; overflow: hidden; } .gk-hub::before, .gk-hub::after { content: ''; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .gk-hub::before { width: 440px; height: 440px; background: #3b1fae; opacity: .55; top: -140px; left: -110px; } .gk-hub::after { width: 360px; height: 360px; background: #75cebb; opacity: .13; bottom: -140px; right: -90px; } .gk-hub-inner { position: relative; z-index: 1; } /* tile = el cuadro de color, textos blancos debajo */ .gk-hub-grid { gap: clamp(40px, 6vw, 72px) !important; } .gk-hub-tile { background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; gap: 0 !important; transition: transform .28s cubic-bezier(.34, 1.56, .64, 1) !important; } .gk-hub-tile:hover { transform: translateY(-12px) !important; box-shadow: none !important; } .gk-hub-tile:active { transform: translateY(-4px) !important; } .gk-hub-tile:hover .gk-hub-tile-icon { transform: none !important; box-shadow: 0 34px 68px -14px rgba(0, 0, 0, .6) !important; } .gk-hub-tile-icon { width: 176px !important; height: 176px !important; border-radius: 36px !important; margin: 0 auto 20px !important; box-shadow: 0 26px 56px -14px rgba(0, 0, 0, .5) !important; transition: box-shadow .28s ease !important; } .gk-hub-tile-icon svg { width: 70px !important; height: 70px !important; } .gk-hub-tile-title { color: #ffffff !important; font-size: 24px !important; letter-spacing: -.03em !important; } .gk-hub-tile-sub { color: rgba(255, 255, 255, .78) !important; font-size: 13px !important; margin-top: 7px !important; } /* móvil: tiles más compactos apilados */ @media (max-width: 640px) { .gk-hub-tile-icon { width: 128px !important; height: 128px !important; border-radius: 28px !important; margin-bottom: 14px !important; } .gk-hub-tile-icon svg { width: 52px !important; height: 52px !important; } .gk-hub-tile-title { font-size: 20px !important; } .gk-hub-grid { gap: 36px !important; } } /* lupa NO va en el hub (solo en el escritorio) */ body:has(#hub-view:not(.hidden)) .gk-lupa-btn { display: none !important; } /* power de abajo fuera — el global de arriba-derecha ya cierra sesión */ .gk-hub-footer .gk-hub-footer-danger { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════ BARRIDO 27/07 · kit diseno-vimedia — tooltips con nombre, movimiento suave en TODO lo que aparece (nada en seco), redondez en solo-ícono. Solo CSS aditivo — ninguna función tocada. ══════════════════════════════════════════════════════════════════════════ */ :where([data-tip]) { position: relative; } /* :where = no pisa position:fixed/absolute */ [data-tip]::after { content: attr(data-tip); --tipx: -50%; position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(var(--tipx)) translateY(3px); background: #2a2b2f; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; padding: 7px 11px; border-radius: 8px; opacity: 0; pointer-events: none; z-index: 1200; transition: opacity .18s ease, transform .18s ease; } [data-tip]::before { content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #2a2b2f; border-bottom: none; opacity: 0; pointer-events: none; z-index: 1200; transition: opacity .18s ease; } [data-tip]:hover::after { opacity: 1; transform: translateX(var(--tipx)) translateY(0); } /* POSICIÓN INTELIGENTE (29/07): el JS marca data-tip-pos / data-tip-alin según el borde de pantalla — el globo se lanza hacia donde SÍ hay espacio, nunca cortado */ [data-tip][data-tip-pos="abajo"]::after { bottom: auto; top: calc(100% + 9px); transform: translateX(var(--tipx, -50%)) translateY(-3px); } [data-tip][data-tip-pos="abajo"]::before { bottom: auto; top: calc(100% + 4px); border-top: none; border-bottom: 5px solid #2a2b2f; } [data-tip][data-tip-pos="abajo"]:hover::after { transform: translateX(var(--tipx, -50%)) translateY(0); } [data-tip][data-tip-alin="izq"]::after { --tipx: 0%; left: -4px; } [data-tip][data-tip-alin="der"]::after { --tipx: 0%; left: auto; right: -4px; } [data-tip]:hover::before { opacity: 1; } .gk-logout-btn[data-tip]::after, .gk-lupa-btn[data-tip]::after, .gk-hub-back-btn[data-tip]::after { bottom: auto; top: calc(100% + 9px); transform: translateX(var(--tipx, -50%)) translateY(-3px); } .gk-logout-btn[data-tip]::before, .gk-lupa-btn[data-tip]::before, .gk-hub-back-btn[data-tip]::before { bottom: auto; top: calc(100% + 4px); border-top: none; border-bottom: 5px solid #2a2b2f; } .gk-logout-btn[data-tip]:hover::after, .gk-lupa-btn[data-tip]:hover::after, .gk-hub-back-btn[data-tip]:hover::after { transform: translateX(var(--tipx, -50%)) translateY(0); } @keyframes kBarridoFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes kBarridoFadeO { from { opacity: 0; } to { opacity: 1; } } .vm-fab-sheet.vm-fab-sheet-open .vm-fab-sheet-card { animation: kBarridoFade .22s ease both; } .vm-fab-sheet.vm-fab-sheet-open .vm-fab-sheet-backdrop { animation: kBarridoFadeO .18s ease both; } #dashboard-view .search-dropdown { animation: kBarridoFade .2s ease both; } #dashboard-view section[id^="section-"] { animation: kBarridoFade .2s ease both; } .vm-drawer { animation: kBarridoFade .22s ease both; } .vm-ws-modal, .vm-ws-modal-centered { animation: kBarridoFade .24s ease both; } .gk-logout-btn:active, .gk-lupa-btn:active, .gk-hub-back-btn:active, .vm-btn-icon:active, .gk-module-close:active { transform: scale(.94); } .vm-btn-icon { border-radius: 50% !important; transition: background .18s ease, color .18s ease, transform .18s ease; } /* ══════════════════════════════════════════════════════════════════════════ KIT SKIN (28/07/26) · el lenguaje del mockup aplicado a los componentes reales: botones a su medida con borde fino, pestañas pastilla, inputs limpios con foco del acento. Solo piel — clases e IDs intactos. ══════════════════════════════════════════════════════════════════════════ */ /* ── Inputs del área de trabajo: 38px, blancos, borde fino, foco acento ── */ .main-content input[type="text"], .main-content input[type="search"], .main-content input[type="number"], .main-content input[type="date"], .main-content input[type="datetime-local"], .main-content input[type="tel"], .main-content select, .main-content textarea, .modal-content input[type="text"], .modal-content input[type="search"], .modal-content input[type="number"], .modal-content input[type="date"], .modal-content input[type="datetime-local"], .modal-content input[type="tel"], .modal-content select, .modal-content textarea { border: 1px solid #e3e4e7 !important; border-radius: 9px !important; background: #fff !important; min-height: 38px; font-size: 13.5px !important; transition: border-color .18s ease, box-shadow .18s ease !important; box-shadow: none; } .main-content textarea, .modal-content textarea { min-height: 86px; line-height: 1.55; } .main-content input:focus, .main-content select:focus, .main-content textarea:focus, .modal-content input:focus, .modal-content select:focus, .modal-content textarea:focus { outline: none !important; border-color: var(--ct-a, var(--gk-a, #5e2ced)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-a, var(--gk-a, #5e2ced)) 14%, transparent) !important; } /* ── Chips de etapa = pestañas del kit: texto firme, pastilla suave la activa ── */ #pedidos-estado-chips .chip { background: transparent; border: 1px solid transparent !important; border-radius: 999px !important; font-weight: 700 !important; color: #3f3f46; transition: background .18s ease, color .18s ease; } #pedidos-estado-chips .chip:hover { background: #f7f7f8; } #pedidos-estado-chips .chip.active { background: #efeff1 !important; border-color: #efeff1 !important; color: #111214 !important; } /* ── Botones secundarios = blancos con borde fino, a su medida ── */ .main-content .btn:not(.btn-primary):not(.gal-card-republicar):not([class*="danger"]), .modal-content .btn:not(.btn-primary):not([class*="danger"]) { background: #fff; border: 1px solid #e3e4e7; border-radius: 9px; color: #111214; font-weight: 600; transition: background .18s ease, border-color .18s ease; } .main-content .btn:not(.btn-primary):not(.gal-card-republicar):not([class*="danger"]):hover, .modal-content .btn:not(.btn-primary):not([class*="danger"]):hover { background: #f7f7f8; border-color: #a2a4aa; } /* KIT SKIN · refuerzo de especificidad: chips de ETAPA = pestañas pastilla (los chips de CENTRO conservan su color de identidad — F130d intacto) */ body:not(.ws-marcas-active) #dashboard-view #pedidos-estado-chips .chip { background: transparent !important; border-color: transparent !important; color: #3f3f46 !important; font-weight: 700 !important; box-shadow: none !important; } body:not(.ws-marcas-active) #dashboard-view #pedidos-estado-chips .chip:hover { background: #f7f7f8 !important; border-color: transparent !important; } body:not(.ws-marcas-active) #dashboard-view #pedidos-estado-chips .chip.active { background: #efeff1 !important; border-color: #efeff1 !important; color: #111214 !important; box-shadow: none !important; } /* (28/07 · composer de ficha — SUPERADO por "ESTUDIO DE FICHA" al final del archivo) */ /* ══════════════════════════════════════════════════════════════════════════ ORDEN 29/07 · FONDO BLANCO — no se usan fondos de color en el sistema. Hub y launcher de empleados sobre blanco; tiles con hairline; chrome legible en tinta; contadores del pie y "Cambiar logo" fuera del hub (el logo ahora vive en Configuración). Funciones intactas. ══════════════════════════════════════════════════════════════════════════ */ .gk-hub, body:not(.ws-marcas-active).gk-launcher-mode .main-content, body:not(.ws-marcas-active) #section-home.gk-launcher { background: #ffffff !important; } body #login-view.login-screen-v2 { background: #5e2ced !important; } /* login queda igual hasta nueva orden */ .gk-hub::before, .gk-hub::after { display: none !important; } /* textos sobre blanco */ #section-home.gk-launcher .gk-lt-label { color: #111214 !important; } #section-home.gk-launcher .gk-lt-sub, #section-home.gk-launcher .gk-launcher-eyebrow { color: #6a6c72 !important; } .gk-hub-tile-title { color: #111214 !important; } .gk-hub-tile-sub, .gk-hub-tile-desc { color: #6a6c72 !important; } /* tiles se separan del blanco con hairline (la sombra suave queda) */ #section-home.gk-launcher .gk-lt-tile, .gk-hub-tile-icon { border: 1px solid #e8e8ec; } /* chrome sobre blanco: power, lupa, menú, botones del hub */ .gk-logout-btn, .gk-lupa-btn, .gk-hub-back-btn, .gk-hub-footer-btn { background: #ffffff !important; color: #111214 !important; border: 1px solid #e3e4e7 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .gk-logout-btn:hover, .gk-lupa-btn:hover, .gk-hub-back-btn:hover, .gk-hub-footer-btn:hover { background: #f7f7f8 !important; border-color: #a2a4aa !important; } /* fuera de la vista: contadores del pie y botón de logo del hub */ .gk-launcher-footer { display: none !important; } #hub-btn-logo { display: none !important; } /* pastilla de fecha sobre blanco */ #gk-topbar-date, .gk-topbar-date { background: #ffffff !important; color: #6a6c72 !important; border: 1px solid #e3e4e7 !important; } /* ══════════════════════════════════════════════════════════════════════════ PANTALLA UNIFICADA (orden 29/07) — una sola pantalla tras el login: buscador al centro · puntos (apps Intecap/Marcas) izquierda · config + Cerrar sesión derecha. Todo reubicado, nada eliminado. Responsive 3 escalas. ══════════════════════════════════════════════════════════════════════════ */ /* solo visible en el escritorio (launcher-mode), nunca dentro de módulos */ .gk-uni-dots, .gk-uni-cfg-btn, .gk-uni-search, .gk-uni-panel { display: none; } body:not(.ws-marcas-active).gk-launcher-mode .gk-uni-dots, body:not(.ws-marcas-active).gk-launcher-mode .gk-uni-cfg-btn, body:not(.ws-marcas-active).gk-launcher-mode .gk-uni-search { display: inline-flex; } body:not(.ws-marcas-active).gk-launcher-mode .gk-uni-panel { display: block; } /* el hub viejo y el power/lupa del launcher quedan fuera de vista (funciones reubicadas) */ .gk-hub { display: none !important; } body:not(.ws-marcas-active).gk-launcher-mode .gk-logout-btn, body:not(.ws-marcas-active).gk-launcher-mode .gk-lupa-btn { display: none !important; } /* el grid ya no vive en el centro del launcher (se mueve al panel por JS) */ /* puntos-cuadrado (izquierda) y config (derecha) */ .gk-uni-dots, .gk-uni-cfg-btn { position: fixed; top: 20px; z-index: 960; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #e3e4e7; color: #111214; cursor: pointer; align-items: center; justify-content: center; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .gk-uni-dots { left: 20px; } .gk-uni-cfg-btn { right: 76px; } .gk-uni-dots:hover, .gk-uni-cfg-btn:hover { background: #f7f7f8; border-color: #a2a4aa; } .gk-uni-dots:active, .gk-uni-cfg-btn:active { transform: scale(.94); } .gk-uni-cfg-btn svg { width: 19px; height: 19px; } .gk-uni-dots-grid { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; } .gk-uni-dots-grid i { width: 4px; height: 4px; border-radius: 50%; background: #111214; } /* fecha se corre junto al engranaje */ body:not(.ws-marcas-active).gk-launcher-mode #gk-topbar-date { right: 132px !important; } /* barra central estilo buscador */ .gk-uni-search { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 940; width: min(680px, calc(100vw - 48px)); height: 54px; padding: 0 22px; gap: 12px; background: #fff; border: 1px solid #e3e4e7; border-radius: 999px; color: #a2a4aa; font-family: inherit; font-size: 15px; font-weight: 500; cursor: text; align-items: center; box-shadow: 0 10px 30px -18px rgba(17, 18, 20, .25); transition: border-color .18s ease, box-shadow .18s ease; } .gk-uni-search:hover { border-color: #a2a4aa; box-shadow: 0 14px 34px -18px rgba(17, 18, 20, .32); } .gk-uni-search svg { width: 19px; height: 19px; color: #6a6c72; flex-shrink: 0; } /* con el buscador real abierto, la barra falsa se esconde para no duplicar */ body.gk-search-open .gk-uni-search { opacity: 0; pointer-events: none; } /* paneles (apps y config): blancos, sombra suave, aparecen con fade */ .gk-uni-panel { position: fixed; top: 76px; z-index: 955; background: #fff; border: 1px solid #e3e4e7; border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(17, 18, 20, .3); padding: 14px; opacity: 0; transform: translateY(-6px) scale(.99); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .gk-uni-panel.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .gk-uni-apps { left: 20px; width: min(560px, calc(100vw - 40px)); } .gk-uni-cfg { right: 20px; width: 280px; padding: 8px; } /* pestañas Intecap | Marcas (pastilla) */ .gk-uni-tabs { display: flex; gap: 4px; margin-bottom: 12px; } .gk-uni-tab { border: none; background: transparent; height: 34px; padding: 0 15px; border-radius: 999px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #111214; cursor: pointer; transition: background .18s ease; } .gk-uni-tab:hover { background: #f7f7f8; } .gk-uni-tab.on { background: #efeff1; } /* el grid movido adentro: tiles más compactas */ .gk-uni-pane .gk-launcher-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; max-width: none !important; margin: 0 !important; } .gk-uni-pane .gk-lt-tile { width: 92px !important; height: 92px !important; border-radius: 20px !important; margin: 0 auto; } .gk-uni-pane .gk-lt-tile svg { width: 32px !important; height: 32px !important; } .gk-uni-pane .gk-lt-label { color: #111214 !important; font-size: 11.5px !important; } .gk-uni-pane .gk-lt-sub { display: none; } /* el detalle vive en el módulo; aquí solo nombre */ /* pestaña Marcas */ .gk-uni-marca-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 22px 16px; border: 1px solid #e8e8ec; border-radius: 16px; background: #fff; cursor: pointer; font-family: inherit; transition: background .18s ease, border-color .18s ease; } .gk-uni-marca-tile:hover { background: #f7f7f8; border-color: #a2a4aa; } .gk-uni-marca-ico { width: 64px; height: 64px; border-radius: 16px; border: 1px solid #e8e8ec; display: grid; place-items: center; color: #17123a; } .gk-uni-marca-ico svg { width: 28px; height: 28px; } .gk-uni-marca-lbl { font-size: 14px; font-weight: 800; color: #111214; } .gk-uni-marca-sub { font-size: 11.5px; color: #6a6c72; } /* menú de config estilo lista (referencia Metricool) */ .gk-uni-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border: none; border-radius: 10px; background: transparent; color: #111214; font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background .18s ease; } .gk-uni-item:hover { background: #f7f7f8; } .gk-uni-item svg { width: 18px; height: 18px; color: #6a6c72; flex-shrink: 0; } .gk-uni-divider { height: 1px; background: #efeff1; margin: 6px 4px; } .gk-uni-salir { color: #a32323; } .gk-uni-salir svg { color: #a32323; } .gk-uni-salir:hover { background: #fbecec; } /* ── responsive: portátil ya cubierto · celular ── */ @media (max-width: 640px) { .gk-uni-dots { left: 12px; top: 12px; } .gk-uni-cfg-btn { right: 64px; top: 12px; } /* regla de oro: la fecha NO desaparece — se reubica abajo del chrome, más chica */ body:not(.ws-marcas-active).gk-launcher-mode #gk-topbar-date { right: 12px !important; top: 64px !important; font-size: 11px !important; padding: 4px 10px !important; } .gk-uni-search { height: 48px; font-size: 14px; } .gk-uni-apps { left: 12px; right: 12px; width: auto; top: 66px; max-height: 74vh; overflow-y: auto; } .gk-uni-cfg { right: 12px; top: 66px; } .gk-uni-pane .gk-launcher-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ── monitores grandes: la barra respira más ── */ @media (min-width: 1800px) { .gk-uni-search { width: 760px; height: 58px; } .gk-uni-apps { width: 620px; } } /* el body también blanco en el escritorio unificado */ body:not(.ws-marcas-active).gk-launcher-mode { background: #ffffff !important; } /* PANTALLA UNIFICADA · fix: el grid movido pierde los selectores del launcher — estilos completos de las tiles DENTRO del panel */ .gk-uni-pane .gk-lt { display: flex !important; flex-direction: column; align-items: center; gap: 8px; background: none !important; border: none !important; padding: 0 !important; cursor: pointer; font-family: inherit; opacity: 1 !important; transition: transform .18s ease; } .gk-uni-pane .gk-lt:hover { transform: translateY(-2px); } .gk-uni-pane .gk-lt-tile { position: relative; width: 92px !important; height: 92px !important; border-radius: 20px !important; background: #ffffff !important; border: 1px solid #e8e8ec !important; box-shadow: 0 6px 16px -8px rgba(17, 18, 20, .14) !important; display: grid !important; place-items: center !important; margin: 0 !important; } .gk-uni-pane .gk-lt-tile svg { width: 32px !important; height: 32px !important; stroke: #17123a !important; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gk-uni-pane .gk-lt-label { color: #111214 !important; font-size: 11.5px !important; font-weight: 700 !important; text-align: center; } .gk-uni-pane .gk-lt-sub { display: none !important; } .gk-uni-pane .gk-lt .nav-badge, .gk-uni-pane .gk-lt [class*="badge"] { position: absolute; top: -5px; right: -5px; } /* con un panel abierto, la barra central se aparta (vuelve al cerrar) */ /* orden 31/07: con panel abierto el buscador QUEDA visible (antes se desvanecía) */ /* badge de la Bandeja pegado a la esquina de su tile dentro del panel */ .gk-uni-pane .gk-lt { position: relative; } .gk-uni-pane .gk-lt .gk-lt-badge { position: absolute; top: -6px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; } /* PANTALLA UNIFICADA · el LOGIN queda limpio: nada del escritorio encima */ body:has(#login-view:not(.hidden)) .gk-uni-dots, body:has(#login-view:not(.hidden)) .gk-uni-cfg-btn, body:has(#login-view:not(.hidden)) .gk-uni-search, body:has(#login-view:not(.hidden)) .gk-uni-panel, body:not(.gk-uni-ready) .gk-uni-dots, body:not(.gk-uni-ready) .gk-uni-cfg-btn, body:not(.gk-uni-ready) .gk-uni-search, body:not(.gk-uni-ready) .gk-uni-panel { display: none !important; } /* ══ IDENTIDAD DE MARCA (orden 29/07): avatar + nombre arriba del buscador ══ */ .gk-uni-avatar { display: none; } body:not(.ws-marcas-active).gk-launcher-mode.gk-uni-ready .gk-uni-avatar { display: inline-flex; } .gk-uni-avatar { position: fixed; top: 20px; right: 76px; z-index: 960; width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1px solid #e3e4e7; color: #6a6c72; cursor: pointer; align-items: center; justify-content: center; overflow: hidden; padding: 0; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .gk-uni-avatar:hover { background: #f7f7f8; border-color: #a2a4aa; } .gk-uni-avatar:active { transform: scale(.94); } .gk-uni-avatar svg { width: 20px; height: 20px; } .gk-uni-avatar img { width: 100%; height: 100%; object-fit: cover; } /* la config se corre al borde y la fecha un paso más allá */ .gk-uni-cfg-btn { right: 20px !important; } body:not(.ws-marcas-active).gk-launcher-mode #gk-topbar-date { right: 132px !important; } /* nombre de la marca arriba del buscador */ .gk-uni-brand { display: none; } body:not(.ws-marcas-active).gk-launcher-mode.gk-uni-ready .gk-uni-brand { display: block; } .gk-uni-brand { position: fixed; top: calc(50% - 96px); left: 50%; transform: translateX(-50%); z-index: 940; font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: #111214; pointer-events: none; } body.gk-search-open .gk-uni-brand { opacity: 0; } /* orden 31/07: solo el overlay de búsqueda lo tapa; los paneles ya no */ .gk-uni-brand { transition: opacity .18s ease; } /* menú de identidad */ .gk-uni-brandmenu { right: 76px; width: 280px; padding: 8px; } .gk-uni-brand-head { display: flex; align-items: center; gap: 11px; padding: 10px 12px 8px; } .gk-uni-brand-ava { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #f7f7f8; border: 1px solid #e8e8ec; color: #6a6c72; display: grid; place-items: center; } .gk-uni-brand-ava svg { width: 18px; height: 18px; } .gk-uni-brand-ava img { width: 100%; height: 100%; object-fit: cover; } .gk-uni-brand-nom { font-size: 14px; font-weight: 800; color: #111214; } @media (max-width: 640px) { .gk-uni-avatar { right: 64px; top: 12px; } .gk-uni-cfg-btn { right: 12px !important; } .gk-uni-brandmenu { right: 12px; top: 66px; } .gk-uni-brand { font-size: 26px; top: calc(50% - 84px); } } /* logos blancos visibles: el contenedor del logo lleva base gris suave */ .gk-uni-avatar img, .gk-uni-brand-ava img { background: transparent; } /* el fondo lo pone el JS según la luminancia del logo */ .gk-uni-avatar:has(img) { background: #e9e9ee; } .gk-uni-brand-ava:has(img) { background: #e9e9ee; border-color: #dcdce2; } /* ══ BUSCADOR EN VIVO (orden 29/07) ══ */ .gk-uni-search { cursor: text; } .gk-uni-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 15px; color: #111214; } .gk-uni-search input::placeholder { color: #a2a4aa; } .gk-uni-search:focus-within { border-color: #a2a4aa; box-shadow: 0 14px 34px -18px rgba(17,18,20,.32); } .gk-uni-results { display: none; } body:not(.ws-marcas-active).gk-launcher-mode.gk-uni-ready .gk-uni-results { display: block; } .gk-uni-results { position: fixed; top: calc(50% + 34px); left: 50%; transform: translateX(-50%) translateY(-4px); width: min(680px, calc(100vw - 48px)); z-index: 945; background: #fff; border: 1px solid #e3e4e7; border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(17, 18, 20, .3); padding: 10px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .gk-uni-results.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .gk-uni-res-filtros { display: flex; gap: 4px; padding: 2px 4px 8px; } .gk-uni-resf { border: none; background: transparent; height: 30px; padding: 0 13px; border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #111214; cursor: pointer; transition: background .18s ease; } .gk-uni-resf:hover { background: #f7f7f8; } .gk-uni-resf.on { background: #efeff1; } #gk-uni-res-list { max-height: 44vh; overflow-y: auto; } .gk-uni-res-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: background .18s ease; } .gk-uni-res-row:hover { background: #f7f7f8; } .gk-uni-res-mini { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; border: 1px solid #efeff1; } .gk-uni-res-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .gk-uni-res-txt b { font-size: 13.5px; font-weight: 700; color: #111214; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gk-uni-res-txt small { font-size: 11.5px; color: #6a6c72; } .gk-uni-res-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #efeff1; color: #6a6c72; } .gk-uni-res-tag-m { background: color-mix(in srgb, #5e2ced 10%, #fff); color: #5e2ced; } .gk-uni-res-vacio { padding: 18px; text-align: center; font-size: 12.5px; color: #a2a4aa; } @media (max-width: 640px) { .gk-uni-results { top: calc(50% + 28px); } } /* ══════════════════════════════════════════════════════════════════════════ BANDEJA · ORDEN 31/07 (NORTE) — tres ajustes de orden, sin quitar nada: 1) el nombre de los íconos del rail sale a la DERECHA y al frente, 2) fichas más pequeñas manteniendo su proporción 3/4, 3) fichas limpias: estado y centro en la misma fila; los botones aparecen al pasar el cursor (en pantallas táctiles siguen siempre visibles). ══════════════════════════════════════════════════════════════════════════ */ /* 1 · TOOLTIP DEL RAIL A LA DERECHA — el rail vive dentro de .sidebar, que tiene overflow:hidden y recortaba el globo. Con position:fixed el globo se sale del recorte (ningún ancestro crea contexto fijo) y el JS le pasa las coordenadas. */ /* El rail vive dentro de .sidebar (z-index propio + overflow oculto): un globo dibujado como pseudo-elemento SIEMPRE queda por debajo del panel del módulo. Por eso el rail usa un globo FLOTANTE a nivel de (.gk-tip-float), que no pertenece a ningún apilamiento interno y sale al frente de todo. */ [data-tip][data-tip-pos="derecha"]::after, [data-tip][data-tip-pos="derecha"]::before { content: none !important; } .gk-tip-float { position: fixed; z-index: 99999; background: #2a2b2f; color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; padding: 7px 11px; border-radius: 8px; pointer-events: none; opacity: 0; transform: translateY(-50%) translateX(-3px); transition: opacity .18s ease, transform .18s ease; } .gk-tip-float.on { opacity: 1; transform: translateY(-50%) translateX(0); } .gk-tip-float::before { content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: #2a2b2f; border-left: none; } /* 2 · FICHAS MÁS PEQUEÑAS (misma proporción 3/4 — ni más angostas ni más anchas): con columnas de 180px entran ~4 por fila en portátil (2 filas a la vista) y ~8 en monitor grande (3 filas). El aspect-ratio 3/4 ya existente las escala. */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 12px !important; } /* tipografía proporcional al nuevo tamaño (mismo texto, sin recortes) */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-title { font-size: 12.5px !important; line-height: 1.25 !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-meta { font-size: 10.5px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-glass { padding: 10px !important; } /* 3a · ESTADO Y CENTRO EN LA MISMA FILA (el centro va después del estado) */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-top { flex-direction: row !important; /* ARRIBA, no al centro: la caja crece (flex:1) y con align-items:center los chips se iban al medio de la ficha. flex-start los ancla al borde superior. */ align-items: flex-start !important; align-content: flex-start !important; flex-wrap: wrap !important; gap: 5px !important; } /* 3b · FICHA LIMPIA: los botones aparecen al pasar el cursor. Siguen existiendo siempre (nada se quita) y en pantallas táctiles —donde no hay cursor— quedan visibles como hasta ahora. Sin salto: crecen con la transición del kit en vez de aparecer en seco. */ @media (hover: hover) and (pointer: fine) { body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-actions { opacity: 0; max-height: 0; overflow: hidden; margin-top: 0 !important; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, max-height .22s ease, transform .18s ease, margin-top .18s ease; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card:hover .sol-card-actions, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card:focus-within .sol-card-actions { opacity: 1; max-height: 76px; transform: none; margin-top: 4px !important; pointer-events: auto; } } /* botones de la ficha a la medida del nuevo tamaño (mismos botones, más compactos) */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-actions { gap: 4px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-btn { height: 28px !important; padding: 0 9px !important; font-size: 10.5px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-btn-icon { width: 28px !important; height: 28px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-btn-icon i, body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-btn i { font-size: 11px !important; } /* ══════════════════════════════════════════════════════════════════════════ ORDEN 31/07 · esquina del módulo (NORTE) — dos correcciones de orden: A) fecha + refrescar + cerrar estaban amontonados (el refrescar caía justo debajo de la pastilla de fecha): ahora son UNA fila alineada, mismo alto, mismos espacios → [ fecha ] ( refrescar ) ( X ). B) el botón flotante "+" dentro de un módulo duplicaba "Nueva solicitud", que ya vive en el rail izquierdo: descansa mientras el módulo está abierto y vuelve solo en el escritorio. Nada se quita: la acción sigue a un clic en el rail (y en móvil el flotante se conserva igual). ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 901px) { /* A · la fila: la X manda el borde (right 24) y los demás se alinean a su izquierda */ body.gk-module-mode #gk-topbar-date { right: 124px !important; top: 24px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; } body.gk-module-mode #btn-refresh-pedidos { position: fixed !important; top: 24px !important; right: 74px !important; z-index: 760 !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #ffffff !important; border: 1px solid #e3e4e7 !important; color: #111214 !important; box-shadow: 0 2px 10px rgba(17, 18, 20, .06) !important; display: grid !important; place-items: center !important; } body.gk-module-mode #btn-refresh-pedidos:hover { background: #f7f7f8 !important; border-color: #a2a4aa !important; } /* B · el flotante descansa con el módulo abierto (la acción vive en el rail) */ body.gk-module-mode .vm-fab, body.gk-module-mode #vm-fab-new { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ ORDEN 31/07 · DIÁLOGO ABIERTO (NORTE) — cuando se abre un diálogo desde el escritorio (Nueva publicación, ficha, catálogo…), el nombre y el buscador del centro NO deben flotar encima: descansan mientras dure el diálogo y vuelven solos al cerrarlo. Los puntos/engranaje/identidad quedan a la vista pero inertes, para que no se pueda abrir un panel encima del diálogo. (Con los paneles del propio escritorio abiertos, nombre y buscador SIGUEN visibles — esa orden del 31/07 no cambia.) ══════════════════════════════════════════════════════════════════════════ */ body.vm-fab-open .gk-uni-brand, body.vm-fab-open .gk-uni-search, body.vm-fab-open .gk-uni-results, body.vm-fab-open .gk-uni-panel, body:has(.modal.show) .gk-uni-brand, body:has(.modal.show) .gk-uni-search, body:has(.modal.show) .gk-uni-results, body:has(.modal.show) .gk-uni-panel, body:has(.modal[style*="flex"]) .gk-uni-brand, body:has(.modal[style*="flex"]) .gk-uni-search, body:has(.modal[style*="flex"]) .gk-uni-results, body:has(.modal[style*="flex"]) .gk-uni-panel { opacity: 0 !important; pointer-events: none !important; } body.vm-fab-open .gk-uni-dots, body.vm-fab-open .gk-uni-cfg-btn, body.vm-fab-open .gk-uni-avatar, body:has(.modal.show) .gk-uni-dots, body:has(.modal.show) .gk-uni-cfg-btn, body:has(.modal.show) .gk-uni-avatar, body:has(.modal[style*="flex"]) .gk-uni-dots, body:has(.modal[style*="flex"]) .gk-uni-cfg-btn, body:has(.modal[style*="flex"]) .gk-uni-avatar { pointer-events: none !important; } /* ══════════════════════════════════════════════════════════════════════════ ESTUDIO DE FICHA (04/08/26) — la ficha de la Bandeja trabaja como un estudio de publicación, con la receta EXACTA del mockup aprobado por el usuario (`index_redisenado_invertido.html`): · HERRAMIENTAS a la IZQUIERDA (inspector fijo de 430px, fondo blanco) · VISTA a la DERECHA (lienzo gris, tarjeta de publicación centrada) · El diseño NUNCA se oculta: se ve siempre, con su texto, en la tarjeta. · Un conmutador cambia la misma vista: Diseño / Instagram / Facebook. · Controles del mockup: botones 38/r9, entradas 40/r9, pestañas en riel gris con la activa blanca, menús de 220px, UN solo sólido por pantalla. Se arma con `display: contents`: los hijos reales (cabecera, rail, paneles, columna de medios) se colocan en la retícula del estudio sin mover un solo nodo del DOM — mismos ids, mismos manejadores, mismas funciones. ══════════════════════════════════════════════════════════════════════════ */ /* tokens del mockup, acotados al modal para no tocar el resto del sistema */ body #solicitud-modal.vm-ws-modal-centered { --e-bg: #f5f6f8; --e-surface: #ffffff; --e-surface-2: #f9fafb; --e-text: #17191f; --e-muted: #697180; --e-line: #e4e7ec; --e-line-strong: #d6dae2; --e-acento: var(--accent, #6238e5); --e-acento-soft: color-mix(in srgb, var(--accent, #6238e5) 8%, #ffffff); --e-sombra: 0 18px 50px rgba(18, 24, 40, .08); --e-sombra-suave: 0 8px 24px rgba(18, 24, 40, .06); --e-insp: 430px; } /* ── la retícula: herramientas | vista ── */ body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { display: grid !important; grid-template-columns: var(--e-insp) minmax(0, 1fr) !important; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto !important; gap: 0 !important; background: var(--e-surface) !important; border-radius: 16px !important; overflow: hidden !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sidebar, body #solicitud-modal.vm-ws-modal-centered .sol-modal-header, body #solicitud-modal.vm-ws-modal-centered .sol-modal-body, body #solicitud-modal.vm-ws-modal-centered .vm-ws-content .ficha-grid { display: contents !important; } /* ── 1 · BARRA SUPERIOR ── */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-head { grid-column: 1 / -1 !important; grid-row: 1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; height: 64px !important; padding: 0 62px 0 20px !important; border-bottom: 1px solid var(--e-line) !important; background: var(--e-surface) !important; text-align: left !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-avatar { width: 36px !important; height: 36px !important; margin: 0 !important; border-radius: 10px !important; font-size: 12px !important; flex-shrink: 0; display: grid !important; place-items: center !important; background: var(--e-acento) !important; color: #fff !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-title { font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; color: var(--e-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; text-align: left !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-meta { margin: 3px 0 0 !important; font-size: 12px !important; color: var(--e-muted) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-badge { margin: 0 0 0 4px !important; flex-shrink: 0; height: 25px !important; padding: 0 9px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; border: 1px solid var(--e-line) !important; background: var(--e-surface-2) !important; color: #505866 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-close { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; position: relative !important; top: auto !important; right: 18px !important; width: 34px !important; height: 34px !important; border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; color: #4d5564 !important; display: grid !important; place-items: center !important; transition: background .18s ease, border-color .18s ease; z-index: 2; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-close:hover { background: var(--e-surface-2) !important; border-color: var(--e-line) !important; } /* ══ HERRAMIENTAS (columna 1) ══════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-head-content { grid-column: 1 !important; grid-row: 2 !important; padding: 20px 22px 0 !important; background: var(--e-surface) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-title { font-size: 15px !important; font-weight: 750 !important; color: var(--e-text) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-sub { font-size: 11px !important; color: var(--e-muted) !important; margin-top: 3px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { grid-column: 1 !important; grid-row: 3 !important; padding: 14px 22px 0 !important; margin: 0 !important; background: var(--e-surface) !important; font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--e-muted) !important; font-weight: 600 !important; } /* pestañas = riel gris con la activa en blanco (platform-switch del mockup) */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { grid-column: 1 !important; grid-row: 4 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 10px 22px 14px !important; padding: 4px !important; background: #ebeef2 !important; border: 1px solid #e1e4e9 !important; border-radius: 10px !important; overflow-x: auto !important; scrollbar-width: none; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail::-webkit-scrollbar { display: none; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab { flex: 1 1 auto !important; flex-direction: row !important; width: auto !important; height: 30px !important; min-height: 0 !important; max-height: 30px !important; min-width: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; color: #5e6675 !important; font-size: 12px !important; font-weight: 650 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; white-space: nowrap; transition: background .18s ease, color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab::before, body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab::after { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab i { font-size: 13px !important; margin: 0 !important; color: inherit !important; background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab .vm-ws-rail-label { display: inline !important; font-size: 12px !important; margin: 0 !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab:hover { background: rgba(255,255,255,.55) !important; color: #3f4653 !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab.active { background: #ffffff !important; color: var(--e-acento) !important; box-shadow: 0 1px 3px rgba(18, 24, 40, .08) !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab-count { position: static !important; margin: 0 0 0 2px !important; min-width: 17px; height: 17px; padding: 0 5px !important; font-size: 10px !important; font-weight: 800 !important; background: var(--e-acento-soft) !important; color: var(--e-acento) !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* el panel activo = el scroll de herramientas */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-content .sol-tab-panel { grid-column: 1 !important; grid-row: 5 !important; min-height: 0; overflow-y: auto; padding: 0 22px 20px !important; margin: 0 !important; background: var(--e-surface) !important; } /* texto del post (lectura) bajo las herramientas */ body #solicitud-modal.vm-ws-modal-centered[data-active-tab] .vm-ws-content #sol-disenos-texto, body #solicitud-modal.vm-ws-modal-centered #sol-disenos-texto { grid-column: 1 !important; grid-row: 6 !important; margin: 0 !important; padding: 14px 22px !important; background: var(--e-surface) !important; border: none !important; border-top: 1px solid var(--e-line) !important; max-height: 24vh; overflow-y: auto; } /* el bloque del texto del post solo aparece cuando TIENE texto (en Ficha ya está el editor) */ body #solicitud-modal.vm-ws-modal-centered #sol-disenos-texto:has(.sdt-body:empty) { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .sdt-label { font-size: 12px !important; font-weight: 700 !important; color: #353c48 !important; margin-bottom: 6px !important; } body #solicitud-modal.vm-ws-modal-centered .sdt-body { font-size: 13px !important; line-height: 1.5 !important; color: #242832 !important; } /* pie de las herramientas */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-footer { grid-column: 1 !important; grid-row: 7 !important; padding: 12px 22px !important; margin: 0 !important; border-top: 1px solid var(--e-line) !important; background: var(--e-surface) !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp { width: fit-content !important; height: 34px !important; padding: 0 14px !important; border-radius: 9px !important; gap: 8px !important; background: #fff !important; color: #353c48 !important; border: 1px solid var(--e-line-strong) !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp:hover { background: var(--e-surface-2) !important; border-color: #c8cdd6 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp i { color: #25D366 !important; font-size: 14px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp span { display: inline !important; font-size: 12px !important; } /* ══ VISTA (columna 2) ═════════════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered[data-active-tab] .vm-ws-content .sol-media-col, body #solicitud-modal.vm-ws-modal-centered .sol-media-col { grid-column: 2 !important; grid-row: 2 / -1 !important; display: block !important; align-self: stretch !important; position: static !important; min-height: 0; overflow-y: auto; padding: 22px 28px 32px !important; background: var(--e-bg) !important; border-left: 1px solid var(--e-line) !important; border-right: none !important; } /* cabecera de la vista: rótulo + formato + conmutador de redes */ body #solicitud-modal.vm-ws-modal-centered .vm-est-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; margin: 0 auto 18px !important; max-width: 980px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-head-izq { display: flex; align-items: center; gap: 9px; min-width: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-head-t { font-size: 14px !important; font-weight: 700 !important; color: var(--e-text) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-chip { height: 25px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--e-line); background: var(--e-surface-2); color: #505866; } body #solicitud-modal.vm-ws-modal-centered .vm-est-chip:empty { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-switch { display: flex; align-items: center; gap: 4px; padding: 4px; background: #ebeef2; border: 1px solid #e1e4e9; border-radius: 10px; flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-sw { border: 0; background: transparent; color: #5e6675; height: 30px; padding: 0 14px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; cursor: pointer; transition: background .18s ease, color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-sw:hover { background: rgba(255,255,255,.55); } body #solicitud-modal.vm-ws-modal-centered .vm-est-sw.on { background: #fff; color: var(--e-acento); box-shadow: 0 1px 3px rgba(18, 24, 40, .08); } body #solicitud-modal.vm-ws-modal-centered .vm-est-sw i { font-size: 13px; } /* el lienzo y la tarjeta de publicación */ body #solicitud-modal.vm-ws-modal-centered .vm-est-shell { max-width: 980px; margin: 0 auto; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 16px; padding: 24px; box-shadow: var(--e-sombra-suave); display: flex; justify-content: center; align-items: flex-start; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card { width: min(100%, 510px); background: #fff; border: 1px solid var(--e-line); border-radius: 13px; overflow: hidden; box-shadow: var(--e-sombra); } body #solicitud-modal.vm-ws-modal-centered .vm-est-post-head { height: 62px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } body #solicitud-modal.vm-ws-modal-centered .vm-est-autor { display: flex; align-items: center; gap: 10px; min-width: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-av { width: 36px; height: 36px; border-radius: 50%; background: var(--e-acento); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-nombre { font-size: 13px; font-weight: 750; color: var(--e-text); } body #solicitud-modal.vm-ws-modal-centered .vm-est-meta { font-size: 11px; color: var(--e-muted); margin-top: 3px; } body #solicitud-modal.vm-ws-modal-centered .vm-est-ico { width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #4d5564; display: grid; place-items: center; padding: 0; cursor: pointer; transition: background .18s ease, border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-ico:hover { background: var(--e-surface-2); border-color: var(--e-line); } /* la pieza: a su medida, sin recortes, dentro de la tarjeta */ body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main { position: relative; background: #eceff3; width: 100% !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; max-height: none !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main img, body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main video { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 62vh !important; object-fit: contain !important; display: block !important; border-radius: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main:empty { min-height: 320px !important; background: #fff !important; border-top: 1px solid var(--e-line) !important; border-bottom: 1px solid var(--e-line) !important; display: grid !important; place-items: center !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main:empty::before { content: 'Todavía no hay diseño'; font-size: 12px; color: var(--e-muted); font-weight: 600; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .empty-state { padding: 40px 20px !important; font-size: 12px; color: var(--e-muted); } /* tira de miniaturas, dentro de la tarjeta */ body #solicitud-modal.vm-ws-modal-centered .vm-est-card .sol-previews-label { padding: 10px 12px 0 !important; margin: 0 !important; font-size: 11px !important; color: var(--e-muted) !important; font-weight: 600 !important; border-top: 1px solid var(--e-line) !important; display: flex !important; align-items: center !important; gap: 6px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .sol-previews-label.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews { display: flex !important; gap: 8px !important; padding: 10px 12px !important; margin: 0 !important; background: #fff !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews:empty { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews > * { position: relative; flex: 1 1 0; min-width: 0; margin: 0 !important; aspect-ratio: 4 / 3; border: 1px solid var(--e-line) !important; border-radius: 8px !important; overflow: hidden !important; background: #eceff3 !important; padding: 0 !important; cursor: pointer; transition: border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews > *:hover { border-color: #b8aecf !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews img, body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* el texto del post, siempre con el diseño */ body #solicitud-modal.vm-ws-modal-centered .vm-est-copy { padding: 14px 16px 16px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: #242832; border-top: 1px solid var(--e-line); } body #solicitud-modal.vm-ws-modal-centered .vm-est-copy.vacio { color: #a2a6ae; font-style: italic; } body #solicitud-modal.vm-ws-modal-centered .vm-est-social { border-top: 1px solid var(--e-line); height: 48px; display: flex; align-items: center; justify-content: space-around; color: #667080; font-size: 12px; } body #solicitud-modal.vm-ws-modal-centered .vm-est-sa { display: inline-flex; align-items: center; gap: 7px; } /* vista "Diseño": solo la pieza (igual que el mockup) */ body #solicitud-modal.vm-ws-modal-centered .vm-est-card.vista-diseno .vm-est-post-head, body #solicitud-modal.vm-ws-modal-centered .vm-est-card.vista-diseno .vm-est-copy, body #solicitud-modal.vm-ws-modal-centered .vm-est-card.vista-diseno .vm-est-social { display: none !important; } /* ══ CONTROLES (receta del mockup, para TODO el modal) ═════════════════════ */ body #solicitud-modal.vm-ws-modal-centered .btn, body #solicitud-modal.vm-ws-modal-centered .vm-btn { height: 38px !important; min-height: 0 !important; padding: 0 14px !important; border-radius: 9px !important; border: 1px solid var(--e-line-strong) !important; background: #fff !important; color: #353c48 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 12px !important; font-weight: 700 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; width: auto !important; transition: background .18s ease, border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .btn:hover, body #solicitud-modal.vm-ws-modal-centered .vm-btn:hover { background: var(--e-surface-2) !important; border-color: #c8cdd6 !important; } body #solicitud-modal.vm-ws-modal-centered .btn-sm { height: 34px !important; padding: 0 12px !important; } body #solicitud-modal.vm-ws-modal-centered .btn i, body #solicitud-modal.vm-ws-modal-centered .vm-btn i { font-size: 13px !important; } /* el ÚNICO sólido: la acción principal */ body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .vm-btn { background: var(--e-acento) !important; color: #fff !important; border-color: var(--e-acento) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .btn i, body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .vm-btn i { color: #fff !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .btn:hover, body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .vm-btn:hover { filter: brightness(.94); } /* entradas */ body #solicitud-modal.vm-ws-modal-centered .input, body #solicitud-modal.vm-ws-modal-centered select.input, body #solicitud-modal.vm-ws-modal-centered .vm-ws-input, body #solicitud-modal.vm-ws-modal-centered input[type="text"], body #solicitud-modal.vm-ws-modal-centered input[type="url"], body #solicitud-modal.vm-ws-modal-centered select { height: 40px !important; padding: 0 12px !important; border: 1px solid var(--e-line-strong) !important; border-radius: 9px !important; background: #fff !important; color: var(--e-text) !important; font-size: 13px !important; box-shadow: none !important; transition: border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .textarea, body #solicitud-modal.vm-ws-modal-centered .vm-ws-textarea, body #solicitud-modal.vm-ws-modal-centered textarea { border: 1px solid var(--e-line-strong) !important; border-radius: 9px !important; background: #fff !important; padding: 12px 13px !important; font-size: 13px !important; line-height: 1.5 !important; box-shadow: none !important; } body #solicitud-modal.vm-ws-modal-centered .input:hover, body #solicitud-modal.vm-ws-modal-centered textarea:hover, body #solicitud-modal.vm-ws-modal-centered select:hover { border-color: #c9ced7 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-label, body #solicitud-modal.vm-ws-modal-centered .form-label { font-size: 12px !important; font-weight: 700 !important; color: #353c48 !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 8px !important; } /* bloques del inspector: separados por línea, sin cajas dentro de cajas */ body #solicitud-modal.vm-ws-modal-centered #sol-area-row { background: transparent !important; border: none !important; border-bottom: 1px solid var(--e-line) !important; border-radius: 0 !important; padding: 0 0 18px !important; margin: 0 0 18px !important; gap: 8px !important; } body #solicitud-modal.vm-ws-modal-centered #sol-area-row .input { flex: 1 1 140px !important; } body #solicitud-modal.vm-ws-modal-centered #link-shortener-panel { background: transparent !important; border: none !important; border-bottom: 1px solid var(--e-line) !important; border-radius: 0 !important; padding: 0 0 18px !important; margin: 0 0 18px !important; } body #solicitud-modal.vm-ws-modal-centered #link-shortener-panel summary { padding: 0 !important; font-size: 12px !important; font-weight: 700 !important; color: #353c48 !important; } body #solicitud-modal.vm-ws-modal-centered #link-shortener-panel > div { padding: 12px 0 0 !important; } /* la tira de emojis: mismos emojis, integrada al editor */ body #solicitud-modal.vm-ws-modal-centered #ficha-emoji-bar { background: var(--e-surface-2) !important; border: 1px solid var(--e-line-strong) !important; border-bottom: none !important; border-radius: 9px 9px 0 0 !important; padding: 7px 9px !important; gap: 2px !important; } body #solicitud-modal.vm-ws-modal-centered #ficha-emoji-bar .emoji-btn { width: 24px !important; height: 24px !important; font-size: 13px !important; border-radius: 7px !important; padding: 0 !important; background: transparent !important; border: none !important; } body #solicitud-modal.vm-ws-modal-centered #ficha-emoji-bar .emoji-btn:hover { background: #eceff3 !important; } body #solicitud-modal.vm-ws-modal-centered #ficha-text { border-radius: 0 0 9px 9px !important; border: 1px solid var(--e-line-strong) !important; min-height: 190px !important; } /* avisos y links: planos, sin tarjetones */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-alert { border-radius: 10px !important; border: 1px solid var(--e-line) !important; background: var(--e-surface-2) !important; padding: 11px 12px !important; box-shadow: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-alert-head { font-size: 12px !important; font-weight: 750 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-alert-body { font-size: 11px !important; color: var(--e-muted) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-link-block { border-radius: 10px !important; border: 1px solid var(--e-line) !important; background: #fff !important; padding: 11px 12px !important; } /* ══ BARRA DE ACCIONES: [Compartir ⌃] [principal] [ … ] ════════════════════ */ /* las filas de acciones originales quedan vacías (sus botones viven en el pie) */ body #solicitud-modal.vm-ws-modal-centered .sol-tab-panel > .btn-row:empty, body #solicitud-modal.vm-ws-modal-centered .sol-tab-panel .vm-ws-actionbar:empty { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-bar { display: contents !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-pri { flex: 1 1 170px; display: flex; order: 3; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap-comp { order: 2; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap-mas { order: 4; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp { order: 1; } body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .vm-btn { flex: 1 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap { position: relative; flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 38px !important; padding: 0 14px !important; border: 1px solid var(--e-line-strong) !important; border-radius: 9px !important; background: #fff !important; color: #353c48 !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer; transition: background .18s ease, border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-btn:hover { background: var(--e-surface-2) !important; border-color: #c8cdd6 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-mas { padding: 0 12px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-chev { font-size: 10px !important; color: var(--e-muted) !important; transition: transform .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap.abierto .vm-est-chev { transform: rotate(180deg); } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu { position: fixed; z-index: 4000; width: 220px; background: #fff; border: 1px solid var(--e-line); border-radius: 11px; box-shadow: var(--e-sombra); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap.abierto .vm-est-menu { opacity: 1; visibility: visible; transform: translateY(0); } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .vm-btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .btn-row > .btn { width: 100% !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 0 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #343b47 !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 8px !important; margin: 0 !important; text-align: left !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .btn:hover, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .vm-btn:hover, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .btn-row > .btn:hover { background: var(--e-surface-2) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu #sol-media-actions { display: flex !important; flex-direction: column !important; gap: 2px !important; margin: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > * i { color: var(--e-muted) !important; font-size: 13px !important; width: 16px; text-align: center; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > #btn-wsp i { color: #25D366 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .vm-ws-btn-tag { margin-left: auto; font-size: 10px !important; color: var(--e-muted) !important; background: var(--e-surface-2) !important; border-radius: 999px; padding: 2px 7px; } /* ══ PESTAÑA SUBIR / IA: filas del mockup, no tarjetones ═══════════════════ */ /* elegir cómo subir: dos filas del mockup, no dos tarjetones de color */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; text-align: left !important; border: 1px solid var(--e-line) !important; border-radius: 10px !important; padding: 11px 12px !important; background: var(--e-surface-2) !important; color: var(--e-text) !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; width: 100% !important; transition: background .18s ease, border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice:hover { background: #f2f4f7 !important; border-color: var(--e-line-strong) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice > i { width: 34px !important; height: 34px !important; border-radius: 9px !important; background: var(--e-acento-soft) !important; color: var(--e-acento) !important; display: grid !important; place-items: center !important; font-size: 15px !important; flex-shrink: 0; margin: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice strong { display: block !important; font-size: 12px !important; font-weight: 750 !important; color: var(--e-text) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice span { display: block !important; font-size: 11px !important; color: var(--e-muted) !important; margin-top: 3px !important; } /* el "primario" ya no es un bloque morado: se distingue con el ícono */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice-primary { background: var(--e-surface-2) !important; color: var(--e-text) !important; border-color: var(--e-line) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice-primary > i { background: var(--e-acento) !important; color: #fff !important; } /* el selector de archivos, con la misma piel */ body #solicitud-modal.vm-ws-modal-centered input[type="file"] { width: 100% !important; font-size: 12px !important; color: var(--e-muted) !important; border: 1px dashed var(--e-line-strong) !important; border-radius: 10px !important; background: var(--e-surface-2) !important; padding: 12px !important; } body #solicitud-modal.vm-ws-modal-centered input[type="file"]::file-selector-button { height: 32px; padding: 0 12px; margin-right: 10px; border: 1px solid var(--e-line-strong); border-radius: 8px; background: #fff; color: #353c48; font-size: 12px; font-weight: 700; cursor: pointer; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-ia-grid { grid-template-columns: minmax(0, 1fr) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-ia-col { min-width: 0 !important; background: var(--e-surface-2) !important; border: 1px solid var(--e-line) !important; border-radius: 10px !important; padding: 11px 12px !important; } body #solicitud-modal.vm-ws-modal-centered .dropzone, body #solicitud-modal.vm-ws-modal-centered .vm-ws-dropzone { border: 1px dashed var(--e-line-strong) !important; border-radius: 11px !important; background: var(--e-surface-2) !important; color: var(--e-muted) !important; } /* ── separador del menú (como el mockup: una línea antes de la acción aparte) ── */ body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-sep { height: 1px; background: var(--e-line); margin: 5px 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-sep.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba:empty, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo:empty { display: none; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba > .vm-btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo > .vm-btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba > .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo > .btn { width: 100% !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 0 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #343b47 !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 8px !important; margin: 0 !important; text-align: left !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba > *:hover, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo > *:hover { background: var(--e-surface-2) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba > * i, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo > * i { color: var(--e-muted) !important; font-size: 13px !important; width: 16px; text-align: center; } /* ── AVISOS: campanita en la barra + panel CENTRADO con los cambios ── */ body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap-campana { display: inline-flex; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap-campana.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-campana { position: relative; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid #f3d0d0; border-radius: 9px; background: #fff5f5; color: #c53b3b; cursor: pointer; animation: vmEstCampana 2.6s ease-in-out infinite; transition: background .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-campana:hover { background: #ffecec; } body #solicitud-modal.vm-ws-modal-centered .vm-est-campana i { font-size: 13px; } body #solicitud-modal.vm-ws-modal-centered .vm-est-campana-n { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #c53b3b; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; } body #solicitud-modal.vm-ws-modal-centered .vm-est-campana-n:empty { display: none; } @keyframes vmEstCampana { 0%, 74%, 100% { box-shadow: 0 0 0 0 rgba(197, 59, 59, 0); } 80% { box-shadow: 0 0 0 5px rgba(197, 59, 59, .16); } 88% { box-shadow: 0 0 0 0 rgba(197, 59, 59, 0); } } @media (prefers-reduced-motion: reduce) { body #solicitud-modal.vm-ws-modal-centered .vm-est-campana { animation: none; } } /* el panel de avisos, centrado sobre la ficha */ body .vm-est-ov { position: fixed; inset: 0; z-index: 5000; background: rgba(18, 24, 40, .28); display: grid; place-items: center; padding: 20px; animation: vmEstOvIn .18s ease; } body .vm-est-ov.hidden { display: none !important; } @keyframes vmEstOvIn { from { opacity: 0; } to { opacity: 1; } } body .vm-est-ov-card { width: min(520px, 100%); max-height: 80vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(18, 24, 40, .18); padding: 18px; animation: vmEstCardIn .18s ease; } @keyframes vmEstCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } body .vm-est-ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } body .vm-est-ov-t { font-size: 14px; font-weight: 750; color: #17191f; display: inline-flex; align-items: center; gap: 8px; } body .vm-est-ov-t i { color: #c53b3b; font-size: 13px; } body .vm-est-ov-x { width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #4d5564; display: grid; place-items: center; cursor: pointer; transition: background .18s ease, border-color .18s ease; } body .vm-est-ov-x:hover { background: #f9fafb; border-color: #e4e7ec; } body .vm-est-ov .vm-est-avisos { display: grid; gap: 12px; } body .vm-est-ov .vm-est-avisos > * { margin: 0 !important; } body .vm-est-ov .vm-ws-alert { border-radius: 10px !important; padding: 12px !important; box-shadow: none !important; } body .vm-est-ov .vm-ws-alert-danger { background: #fff5f5 !important; border: 1px solid #f3d0d0 !important; } body .vm-est-ov .vm-ws-alert-danger .vm-ws-alert-head { color: #c53b3b !important; } body .vm-est-ov .vm-ws-alert-warn { background: #fff5e5 !important; border: 1px solid #f0d7a7 !important; } body .vm-est-ov .vm-ws-alert-warn .vm-ws-alert-head { color: #9a5a00 !important; } body .vm-est-ov .vm-ws-alert-head { font-size: 12.5px !important; font-weight: 750 !important; } body .vm-est-ov .vm-ws-alert-body { font-size: 12px !important; line-height: 1.5 !important; margin-top: 6px !important; } body .vm-est-ov .vm-btn, body .vm-est-ov .btn { height: 34px !important; padding: 0 12px !important; border-radius: 9px !important; border: 1px solid #d6dae2 !important; background: #fff !important; color: #353c48 !important; font-size: 12px !important; font-weight: 700 !important; width: auto !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: none !important; margin-top: 10px !important; } body .vm-est-ov .vm-btn:hover, body .vm-est-ov .btn:hover { background: #f9fafb !important; } /* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .desk-bento { grid-template-columns: repeat(6, 1fr); gap: 12px; } .desk-tile-lg { grid-column: span 6; min-height: 148px; padding: 20px; } .desk-tile-md { grid-column: span 2; min-height: 118px; padding: 16px; } .desk-chip { grid-column: span 2; min-height: 84px; padding: 12px; } .desk-tile-lg .desk-tile-value { font-size: 34px; } .desk-tile-lg .desk-tile-title-cta { font-size: var(--vm-fs-xl); } #section-home .desk-hero-title { font-size: clamp(22px, 5vw, 30px); } body:not(.ws-marcas-active) #dashboard-view .main-content { padding: 16px 20px 32px !important; } } @media (max-width: 520px) { .desk-tile-md { grid-column: span 3; } .desk-chip { grid-column: span 3; } } @media (prefers-reduced-motion: reduce) { .desk-tile, .desk-chip, .desk-hero, .desk-back-btn, .vm-btn, .vm-input, .vm-card, .vm-chip, .vm-toast, .vm-loading { animation: none !important; transition: none !important; } .desk-tile, .desk-chip { opacity: 1; } } /* ══ 13.6 · F112 · Utilidades + FAB "+" wizard tipo ═══════════════════════════ */ /* Helper universal para ocultar elementos preservando el DOM */ .vm-hidden { display: none !important; } /* FAB flotante circular abajo-derecha */ .vm-fab { position: fixed; right: 24px; bottom: 24px; z-index: 700; width: 60px; height: 60px; border-radius: var(--vm-r-full); background: var(--vm-violet); color: var(--vm-n-0); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: var(--vm-sh-v-md), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform var(--vm-dur-3) var(--vm-ease), box-shadow var(--vm-dur-3) var(--vm-ease); } .vm-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--vm-sh-v-lg), inset 0 1px 0 rgba(255, 255, 255, .32); } .vm-fab:active { transform: translateY(0) scale(.96); } body.vm-fab-open .vm-fab { transform: rotate(45deg); } /* Sheet (bottom sheet en mobile, modal centrado en desktop) */ .vm-fab-sheet { position: fixed; inset: 0; z-index: 720; display: none; align-items: flex-end; justify-content: center; padding: 0; } .vm-fab-sheet.vm-fab-sheet-open { display: flex; } .vm-fab-sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: vmFabBackdropIn .28s var(--vm-ease) both; } @keyframes vmFabBackdropIn { from { opacity: 0; } to { opacity: 1; } } .vm-fab-sheet-card { position: relative; background: var(--vm-n-0); border-radius: 24px 24px 0 0; padding: 22px 22px 26px; width: 100%; max-width: 480px; box-shadow: 0 -24px 60px -16px rgba(15, 23, 42, .25), var(--vm-sh-lg); animation: vmFabSheetIn .38s var(--vm-ease-b) both; padding-bottom: calc(26px + env(safe-area-inset-bottom)); } @keyframes vmFabSheetIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .vm-fab-sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .vm-fab-sheet-title { font-family: var(--vm-font-sans); font-size: var(--vm-fs-xl); font-weight: var(--vm-fw-bl); letter-spacing: -0.03em; color: var(--vm-n-900); line-height: 1.2; margin-bottom: 4px; } .vm-fab-sheet-subtitle { font-size: var(--vm-fs-sm); color: var(--vm-n-500); font-weight: var(--vm-fw-m); letter-spacing: -0.005em; } .vm-fab-options { display: flex; flex-direction: column; gap: 10px; } .vm-fab-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-lg); cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); font-family: var(--vm-font-sans); text-align: left; color: var(--vm-n-900); } .vm-fab-option:hover { transform: translateY(-1px); border-color: var(--vm-violet); background: var(--vm-v-04); box-shadow: var(--vm-sh-sm); } .vm-fab-option:active { transform: translateY(0); } .vm-fab-option-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--vm-v-08); color: var(--vm-violet); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .vm-fab-option-icon-cyan { background: var(--vm-c-14); color: var(--vm-cyan-d); } .vm-fab-option-text { flex: 1; min-width: 0; } .vm-fab-option-title { font-size: var(--vm-fs-md); font-weight: var(--vm-fw-b); color: var(--vm-n-900); letter-spacing: -0.005em; margin-bottom: 2px; } .vm-fab-option-desc { font-size: var(--vm-fs-sm); color: var(--vm-n-500); font-weight: var(--vm-fw-m); } .vm-fab-option-arrow { color: var(--vm-n-400); font-size: 12px; transition: transform var(--vm-dur-2) var(--vm-ease), color var(--vm-dur-2) var(--vm-ease); } .vm-fab-option:hover .vm-fab-option-arrow { transform: translateX(3px); color: var(--vm-violet); } /* Desktop: sheet como modal centrado con radius completo */ @media (min-width: 768px) { .vm-fab-sheet { align-items: center; padding: 24px; } .vm-fab-sheet-card { border-radius: var(--vm-r-2xl); padding-bottom: 26px; max-width: 460px; } } /* Mobile ajustes del FAB */ @media (max-width: 600px) { .vm-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .vm-fab, .vm-fab-sheet-card, .vm-fab-sheet-backdrop, .vm-fab-option { animation: none !important; transition: none !important; } } /* ══ 13.7 · F113 · Workspace solicitud (modal principal) ═══════════════════ Rediseño visual del #solicitud-modal para verse como workspace pro. Tabs con indicator móvil animado. Header limpio. Body scrolleable. Sin tocar HTML: mismos IDs, tabs, contenedores. Scope: `body:not(.ws-marcas-active)` para no afectar MARCAS. */ body:not(.ws-marcas-active) #solicitud-modal.modal.show { padding: 0; align-items: stretch; justify-content: stretch; } body:not(.ws-marcas-active) #solicitud-modal .modal-content { max-width: 1180px !important; width: 96vw !important; max-height: 92vh !important; height: 92vh !important; border-radius: var(--vm-r-2xl) !important; overflow: hidden !important; background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; box-shadow: var(--vm-sh-lg) !important; display: flex !important; flex-direction: column !important; padding: 0 !important; animation: vmSolIn .4s var(--vm-ease-b) both; } @keyframes vmSolIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Header del modal solicitud (workspace) */ body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header { padding: 20px 28px 16px !important; border-bottom: 1px solid var(--vm-n-150) !important; background: var(--vm-n-0) !important; display: flex !important; align-items: center !important; gap: 14px !important; flex-shrink: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-title { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-xl) !important; font-weight: var(--vm-fw-bl) !important; letter-spacing: -0.025em !important; color: var(--vm-n-900) !important; line-height: 1.15 !important; flex: 1 !important; margin: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-title i { color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 12px !important; border-radius: var(--vm-r-full) !important; background: var(--vm-v-08) !important; color: var(--vm-violet) !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-xs) !important; font-weight: var(--vm-fw-b) !important; letter-spacing: 0.5px !important; text-transform: none !important; border: 1px solid var(--vm-v-18) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header .modal-close, body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header button[onclick*="closeSolicitud"] { width: 36px !important; height: 36px !important; border-radius: var(--vm-r-md) !important; background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; color: var(--vm-n-600) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header .modal-close:hover, body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header button[onclick*="closeSolicitud"]:hover { border-color: var(--vm-danger) !important; color: var(--vm-danger) !important; transform: none !important; } /* Tabs del modal como pill container con indicator */ body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tabs { position: relative !important; display: flex !important; align-items: center !important; gap: 4px !important; padding: 12px 28px 0 !important; border-bottom: 1px solid var(--vm-n-150) !important; background: var(--vm-n-50) !important; overflow-x: auto !important; scrollbar-width: none !important; flex-shrink: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tabs::-webkit-scrollbar { display: none; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab { position: relative !important; background: transparent !important; border: none !important; padding: 10px 16px 12px !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-md) !important; font-weight: var(--vm-fw-sb) !important; color: var(--vm-n-500) !important; cursor: pointer !important; transition: color var(--vm-dur-2) var(--vm-ease) !important; letter-spacing: -0.005em !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab i { font-size: var(--vm-fs-sm) !important; color: var(--vm-n-400) !important; transition: color var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab:hover { color: var(--vm-n-900) !important; background: var(--vm-v-04) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab:hover i { color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab.active { color: var(--vm-violet) !important; border-bottom-color: var(--vm-violet) !important; background: transparent !important; font-weight: var(--vm-fw-b) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab.active i { color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; height: 20px !important; padding: 0 6px !important; border-radius: var(--vm-r-full) !important; background: var(--vm-v-14) !important; color: var(--vm-violet) !important; font-size: 10px !important; font-weight: var(--vm-fw-eb) !important; letter-spacing: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab.active .sol-modal-tab-count { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; } /* Body scrolleable */ body:not(.ws-marcas-active) #solicitud-modal .sol-modal-body { flex: 1 !important; overflow-y: auto !important; padding: 24px 28px !important; background: var(--vm-n-0) !important; scrollbar-width: thin !important; scrollbar-color: var(--vm-n-200) transparent !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-body::-webkit-scrollbar { width: 6px; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-body::-webkit-scrollbar-thumb { background: var(--vm-n-200); border-radius: 3px; } /* Hint de shortcuts en el header (agregado por JS) */ .sol-shortcut-hint { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--vm-r-md); background: var(--vm-n-100); border: 1px solid var(--vm-n-150); color: var(--vm-n-500); font-family: var(--vm-font-sans); font-size: 11px; font-weight: var(--vm-fw-sb); letter-spacing: -0.005em; } .sol-shortcut-hint kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; background: var(--vm-n-0); border: 1px solid var(--vm-n-200); color: var(--vm-n-700); font-family: var(--vm-font-mono); font-size: 10px; font-weight: var(--vm-fw-sb); box-shadow: 0 1px 0 var(--vm-n-200); } /* Mobile: modal fullscreen, tabs con scroll horizontal */ @media (max-width: 768px) { body:not(.ws-marcas-active) #solicitud-modal .modal-content { max-width: 100vw !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-header { padding: 14px 18px 12px !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-title { font-size: var(--vm-fs-lg) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tabs { padding: 8px 14px 0 !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab { padding: 8px 12px 10px !important; font-size: var(--vm-fs-sm) !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-body { padding: 16px 18px !important; } .sol-shortcut-hint { display: none !important; } } @media (prefers-reduced-motion: reduce) { body:not(.ws-marcas-active) #solicitud-modal .modal-content { animation: none !important; } body:not(.ws-marcas-active) #solicitud-modal .sol-modal-tab { transition: none !important; } } /* ══ 13.8 · F114 · Form Nueva Solicitud (workspace look) ═════════════════════ Rediseño visual del form-view fullscreen. Sin tocar la lógica de submit ni la estructura HTML/IDs — solo estilos aplicados por selector. */ body:not(.ws-marcas-active) #form-view .app-layout { background: var(--vm-n-50); } body:not(.ws-marcas-active) #form-view .main-content { padding: 32px 40px !important; background: var(--vm-n-50); } body:not(.ws-marcas-active) #form-view .page-header { border-bottom: 1px solid var(--vm-n-150) !important; padding-bottom: 18px !important; margin-bottom: 28px !important; } body:not(.ws-marcas-active) #form-view .page-title, body:not(.ws-marcas-active) #form-view #form-title { font-family: var(--vm-font-sans) !important; font-size: 26px !important; font-weight: var(--vm-fw-bl) !important; letter-spacing: -0.03em !important; color: var(--vm-n-900) !important; line-height: 1.15 !important; } body:not(.ws-marcas-active) #form-view form { max-width: 680px !important; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-2xl); padding: 32px 32px 28px; box-shadow: var(--vm-sh-sm); } body:not(.ws-marcas-active) #form-view .form-group { margin-bottom: 22px; } body:not(.ws-marcas-active) #form-view .form-label { display: block !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-sm) !important; font-weight: var(--vm-fw-b) !important; color: var(--vm-n-700) !important; margin-bottom: 8px !important; letter-spacing: -0.005em !important; text-transform: none !important; } body:not(.ws-marcas-active) #form-view .helper-text { font-size: var(--vm-fs-sm) !important; color: var(--vm-n-500) !important; margin-top: 6px !important; font-weight: var(--vm-fw-m) !important; letter-spacing: -0.005em !important; } body:not(.ws-marcas-active) #form-view select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2371717a' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 38px !important; } body:not(.ws-marcas-active) #form-view .btn-row { display: flex; gap: 10px; justify-content: flex-end; padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--vm-n-150); } /* Header specific de form-view (con sidebar simplificada) */ body:not(.ws-marcas-active) #form-view .sidebar { background: var(--vm-n-0) !important; border-right: 1px solid var(--vm-n-150) !important; } body:not(.ws-marcas-active) #form-view #btn-back { color: var(--vm-n-600) !important; background: var(--vm-n-100) !important; border-radius: var(--vm-r-md) !important; } body:not(.ws-marcas-active) #form-view #btn-back:hover { background: var(--vm-v-08) !important; color: var(--vm-violet) !important; } /* Contact chips (empleados usan esto en Nueva Solicitud) */ body:not(.ws-marcas-active) #form-view .contact-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } body:not(.ws-marcas-active) #form-view .contact-chips .chip, body:not(.ws-marcas-active) #form-view .contact-chips button { padding: 6px 12px !important; border-radius: var(--vm-r-full) !important; border: 1px solid var(--vm-n-200) !important; background: var(--vm-n-0) !important; color: var(--vm-n-700) !important; font-size: var(--vm-fs-sm) !important; font-weight: var(--vm-fw-sb) !important; cursor: pointer !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #form-view .contact-chips .chip:hover, body:not(.ws-marcas-active) #form-view .contact-chips button:hover { border-color: var(--vm-cyan) !important; color: var(--vm-cyan-d) !important; background: var(--vm-c-14) !important; } /* Feedback ortografía / verificar */ body:not(.ws-marcas-active) #form-view #btn-spell-curso { padding: 3px 10px !important; border-radius: var(--vm-r-full) !important; background: var(--vm-c-14) !important; color: var(--vm-cyan-d) !important; border: 1px solid var(--vm-c-22) !important; font-size: var(--vm-fs-xs) !important; font-weight: var(--vm-fw-b) !important; letter-spacing: -0.005em !important; } @media (max-width: 768px) { body:not(.ws-marcas-active) #form-view .main-content { padding: 20px 18px !important; } body:not(.ws-marcas-active) #form-view form { padding: 20px 18px 18px; border-radius: var(--vm-r-xl); } body:not(.ws-marcas-active) #form-view .btn-row { flex-direction: column-reverse; } body:not(.ws-marcas-active) #form-view .btn-row .btn { width: 100%; justify-content: center; } } /* ══ 13.9 · F115 · Publicadas + Galerías ══════════════════════════════════ Grid pro con cards uniformes. Filtros pill. Lazy loading (F50) preservado. */ body:not(.ws-marcas-active) #section-publicadas .sol-grid, body:not(.ws-marcas-active) #section-solicitudes .sol-grid, body:not(.ws-marcas-active) #section-pedidos .sol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 4px 0; } body:not(.ws-marcas-active) #section-publicadas .sol-card, body:not(.ws-marcas-active) #section-pedidos .sol-card { overflow: hidden !important; aspect-ratio: 4 / 5; } /* Chips de centro (publicadas / bandeja) con dot color */ body:not(.ws-marcas-active) #dashboard-view .chips .chip .centro-dot, body:not(.ws-marcas-active) #dashboard-view .chips .chip [style*="border-radius:50%"] { box-shadow: 0 0 0 2px currentColor; opacity: .9; } /* Sección Galerías (empleados-only) */ body:not(.ws-marcas-active) #section-galerias .gal-tabs, body:not(.ws-marcas-active) #section-galerias .galeria-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; padding: 6px; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-lg); box-shadow: var(--vm-sh-xs); width: fit-content; } body:not(.ws-marcas-active) #section-galerias button[data-tab], body:not(.ws-marcas-active) #section-galerias .gal-tab { padding: 8px 16px !important; border-radius: var(--vm-r-md) !important; border: none !important; background: transparent !important; color: var(--vm-n-600) !important; font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-md) !important; font-weight: var(--vm-fw-b) !important; cursor: pointer !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; letter-spacing: -0.005em !important; } body:not(.ws-marcas-active) #section-galerias button[data-tab]:hover, body:not(.ws-marcas-active) #section-galerias .gal-tab:hover { background: var(--vm-v-08) !important; color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #section-galerias button[data-tab].active, body:not(.ws-marcas-active) #section-galerias .gal-tab.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; box-shadow: var(--vm-sh-v-sm); } /* Grid thumbnails galería */ body:not(.ws-marcas-active) #section-galerias .gal-grid, body:not(.ws-marcas-active) #section-galerias .galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } body:not(.ws-marcas-active) #section-galerias .gal-item, body:not(.ws-marcas-active) #section-galerias .galeria-item { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; overflow: hidden !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-galerias .gal-item:hover, body:not(.ws-marcas-active) #section-galerias .galeria-item:hover { transform: translateY(-3px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-md) !important; } /* Panel de Salud del Sistema (F45) */ body:not(.ws-marcas-active) #section-galerias .health-card, body:not(.ws-marcas-active) #section-galerias .limpieza-card { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-xl) !important; padding: 20px 22px !important; margin-bottom: 16px !important; box-shadow: var(--vm-sh-xs) !important; } body:not(.ws-marcas-active) #section-galerias .health-card h3, body:not(.ws-marcas-active) #section-galerias .limpieza-card h3 { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-lg) !important; font-weight: var(--vm-fw-eb) !important; color: var(--vm-n-900) !important; letter-spacing: -0.02em !important; margin-bottom: 10px !important; } /* ══ 13.10 · F116 · Catálogo (áreas + cursos) ══════════════════════════════ */ body:not(.ws-marcas-active) #section-catalogo .catalogo-centro-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; padding: 6px; background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-lg); box-shadow: var(--vm-sh-xs); width: fit-content; } body:not(.ws-marcas-active) #section-catalogo .catalogo-tab-btn { padding: 9px 18px !important; border-radius: var(--vm-r-md) !important; border: none !important; background: transparent !important; color: var(--vm-n-600) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-b) !important; font-size: var(--vm-fs-md) !important; cursor: pointer !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; letter-spacing: -0.005em !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: none !important; } body:not(.ws-marcas-active) #section-catalogo .catalogo-tab-btn:hover { background: var(--vm-n-100) !important; color: var(--vm-n-900) !important; } body:not(.ws-marcas-active) #section-catalogo .catalogo-tab-btn.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border: none !important; box-shadow: var(--vm-sh-v-sm) !important; } body:not(.ws-marcas-active) #section-catalogo .catalogo-tab-btn .tab-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); } /* Área grid — cards limpias */ body:not(.ws-marcas-active) #section-catalogo .area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 4px 0; } body:not(.ws-marcas-active) #section-catalogo .area-card, body:not(.ws-marcas-active) #section-catalogo #catalogo-areas-grid > * { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-xl) !important; padding: 20px !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } body:not(.ws-marcas-active) #section-catalogo .area-card:hover, body:not(.ws-marcas-active) #section-catalogo #catalogo-areas-grid > *:hover { transform: translateY(-3px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-md) !important; } /* Cursos grid — más denso */ body:not(.ws-marcas-active) #section-catalogo .catalogo-courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } body:not(.ws-marcas-active) #section-catalogo .catalogo-courses-grid > * { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; padding: 16px 18px !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-catalogo .catalogo-courses-grid > *:hover { transform: translateY(-2px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-sm) !important; } /* Botón volver a áreas */ body:not(.ws-marcas-active) #section-catalogo #btn-back-catalogo { padding: 8px 14px !important; border-radius: var(--vm-r-md) !important; background: var(--vm-n-100) !important; border: 1px solid var(--vm-n-150) !important; color: var(--vm-n-700) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-sb) !important; font-size: var(--vm-fs-sm) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-catalogo #btn-back-catalogo:hover { background: var(--vm-v-08) !important; color: var(--vm-violet) !important; border-color: var(--vm-v-24) !important; } /* Botón eliminar área */ body:not(.ws-marcas-active) #section-catalogo #btn-delete-area { padding: 8px 14px !important; border-radius: var(--vm-r-md) !important; background: var(--vm-n-0) !important; border: 1px solid rgba(239, 68, 68, .25) !important; color: var(--vm-danger) !important; font-weight: var(--vm-fw-sb) !important; font-size: var(--vm-fs-sm) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-catalogo #btn-delete-area:hover { background: rgba(239, 68, 68, .08) !important; border-color: var(--vm-danger) !important; } /* Búsqueda catálogo */ body:not(.ws-marcas-active) #section-catalogo #catalogo-search { width: 260px !important; } /* ══ 13.11 · F117 · Republicar + Registro + Calendario ═══════════════════ */ /* Republicar (aunque escondimos el nav-item, la sección sigue accesible) */ body:not(.ws-marcas-active) #section-republicar .republicar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } body:not(.ws-marcas-active) #section-republicar .republicar-card { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-xl) !important; overflow: hidden !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; cursor: pointer !important; } body:not(.ws-marcas-active) #section-republicar .republicar-card:hover { transform: translateY(-3px); border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-md) !important; } /* Registro — timeline visual */ body:not(.ws-marcas-active) #section-registro .registro-item, body:not(.ws-marcas-active) #section-registro .reg-item { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; padding: 14px 18px !important; margin-bottom: 10px !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; display: flex !important; align-items: center !important; gap: 14px !important; } body:not(.ws-marcas-active) #section-registro .registro-item:hover, body:not(.ws-marcas-active) #section-registro .reg-item:hover { border-color: var(--vm-v-18) !important; transform: translateX(2px); } /* Calendario */ body:not(.ws-marcas-active) #section-calendario .cal-grid, body:not(.ws-marcas-active) #section-calendario .calendario-grid { background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-xl); overflow: hidden; box-shadow: var(--vm-sh-xs); } body:not(.ws-marcas-active) #section-calendario .cal-day, body:not(.ws-marcas-active) #section-calendario .calendario-day { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-100) !important; padding: 10px !important; transition: background var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-calendario .cal-day:hover, body:not(.ws-marcas-active) #section-calendario .calendario-day:hover { background: var(--vm-v-04) !important; } body:not(.ws-marcas-active) #section-calendario .cal-day.today, body:not(.ws-marcas-active) #section-calendario .cal-day.hoy { background: var(--vm-v-08) !important; border-color: var(--vm-violet) !important; } body:not(.ws-marcas-active) #section-calendario .cal-day-num, body:not(.ws-marcas-active) #section-calendario .calendario-day-num { font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-eb) !important; color: var(--vm-n-900) !important; letter-spacing: -0.02em !important; } /* ══ 13.12 · F118 · Configuración (cards categorizadas) ═══════════════════ */ body:not(.ws-marcas-active) #section-config .config-card, body:not(.ws-marcas-active) #section-config .cfg-card { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-xl) !important; padding: 20px 22px !important; margin-bottom: 16px !important; box-shadow: var(--vm-sh-xs) !important; transition: all var(--vm-dur-3) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-config .config-card:hover, body:not(.ws-marcas-active) #section-config .cfg-card:hover { border-color: var(--vm-v-18) !important; box-shadow: var(--vm-sh-sm) !important; } body:not(.ws-marcas-active) #section-config .config-card h3, body:not(.ws-marcas-active) #section-config .cfg-card h3, body:not(.ws-marcas-active) #section-config .config-card-title { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-lg) !important; font-weight: var(--vm-fw-eb) !important; color: var(--vm-n-900) !important; letter-spacing: -0.025em !important; margin-bottom: 8px !important; line-height: 1.2 !important; } body:not(.ws-marcas-active) #section-config .config-card-desc, body:not(.ws-marcas-active) #section-config .config-card p:not(strong) { font-size: var(--vm-fs-md); color: var(--vm-n-500); line-height: 1.5; margin-bottom: 12px; letter-spacing: -0.005em; } /* Suspensión de servicio (F108) */ body:not(.ws-marcas-active) #section-config .susp-row { padding: 14px 16px !important; background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; margin-bottom: 8px !important; } body:not(.ws-marcas-active) #section-config .susp-badge.active, body:not(.ws-marcas-active) #section-config .susp-badge-verde { background: rgba(16, 185, 129, .12) !important; color: #059669 !important; border: 1px solid rgba(16, 185, 129, .28) !important; border-radius: var(--vm-r-full) !important; padding: 4px 10px !important; font-weight: var(--vm-fw-b) !important; font-size: var(--vm-fs-xs) !important; } body:not(.ws-marcas-active) #section-config .susp-badge.suspended, body:not(.ws-marcas-active) #section-config .susp-badge-rojo { background: rgba(239, 68, 68, .12) !important; color: #dc2626 !important; border: 1px solid rgba(239, 68, 68, .28) !important; border-radius: var(--vm-r-full) !important; padding: 4px 10px !important; font-weight: var(--vm-fw-b) !important; font-size: var(--vm-fs-xs) !important; } /* IA prompts (F26) */ body:not(.ws-marcas-active) #section-config .prompt-card, body:not(.ws-marcas-active) #section-config .ia-prompt-card { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; padding: 14px 16px !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #section-config .prompt-card:hover, body:not(.ws-marcas-active) #section-config .ia-prompt-card:hover { border-color: var(--vm-v-18) !important; } /* Áreas manage modal */ body:not(.ws-marcas-active) #areas-manage-modal .area-row, body:not(.ws-marcas-active) #areas-manage-modal .area-manage-row { padding: 12px 14px !important; background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-md) !important; margin-bottom: 6px !important; display: flex !important; align-items: center !important; gap: 10px !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } body:not(.ws-marcas-active) #areas-manage-modal .area-row:hover, body:not(.ws-marcas-active) #areas-manage-modal .area-manage-row:hover { border-color: var(--vm-v-24) !important; background: var(--vm-v-04) !important; } /* ══ 13.13 · F119 · Polish + Mobile refinements + Modales globales ═══════ */ /* Modal wrapper — todos los modales heredan look consistente */ body:not(.ws-marcas-active) .modal.show { background: rgba(15, 23, 42, .45) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } body:not(.ws-marcas-active) .modal .modal-content { border-radius: var(--vm-r-2xl) !important; border: 1px solid var(--vm-n-150) !important; box-shadow: var(--vm-sh-lg) !important; overflow: hidden !important; } body:not(.ws-marcas-active) .modal .modal-header { padding: 20px 24px 16px !important; border-bottom: 1px solid var(--vm-n-150) !important; background: var(--vm-n-0) !important; } body:not(.ws-marcas-active) .modal .modal-title { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-lg) !important; font-weight: var(--vm-fw-eb) !important; color: var(--vm-n-900) !important; letter-spacing: -0.025em !important; } body:not(.ws-marcas-active) .modal .modal-title i { color: var(--vm-violet) !important; } body:not(.ws-marcas-active) .modal .modal-body { padding: 20px 24px !important; } body:not(.ws-marcas-active) .modal .modal-footer { padding: 16px 24px !important; border-top: 1px solid var(--vm-n-150) !important; background: var(--vm-n-50) !important; display: flex !important; gap: 10px !important; justify-content: flex-end !important; } /* Emoji bar (F18/F38) — más pulida */ body:not(.ws-marcas-active) .emoji-bar { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; padding: 8px !important; background: var(--vm-n-50) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-md) !important; margin-bottom: 8px !important; } body:not(.ws-marcas-active) .emoji-btn { width: 28px !important; height: 28px !important; border-radius: var(--vm-r-sm) !important; background: transparent !important; border: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; transition: all var(--vm-dur-1) var(--vm-ease) !important; } body:not(.ws-marcas-active) .emoji-btn:hover { background: var(--vm-v-08) !important; transform: scale(1.15); } /* Empty state legacy */ body:not(.ws-marcas-active) #dashboard-view .empty-state { text-align: center; padding: 60px 24px; color: var(--vm-n-500); font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); background: var(--vm-n-0); border: 1px solid var(--vm-n-200); border-radius: var(--vm-r-xl); } /* Search dropdown (buscador global) */ body:not(.ws-marcas-active) #dashboard-view .search-dropdown { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-lg) !important; box-shadow: var(--vm-sh-md) !important; padding: 6px !important; margin-top: 6px !important; } body:not(.ws-marcas-active) #dashboard-view .search-dropdown > *, body:not(.ws-marcas-active) #dashboard-view .search-result-item { padding: 10px 12px !important; border-radius: var(--vm-r-md) !important; transition: background var(--vm-dur-1) var(--vm-ease) !important; } body:not(.ws-marcas-active) #dashboard-view .search-dropdown > *:hover, body:not(.ws-marcas-active) #dashboard-view .search-result-item:hover { background: var(--vm-v-08) !important; } /* Refinamientos mobile globales */ @media (max-width: 768px) { body:not(.ws-marcas-active) #dashboard-view .main-content { padding: 16px 16px 100px !important; } body:not(.ws-marcas-active) #dashboard-view .page-header { flex-direction: column !important; align-items: flex-start !important; padding-bottom: 12px !important; margin-bottom: 14px !important; } body:not(.ws-marcas-active) #dashboard-view .page-header .page-title { font-size: 20px !important; } .desk-bento { gap: 10px !important; } #section-home .desk-hero { padding: 4px 0 14px !important; } .vm-page-header { padding-bottom: 12px !important; margin-bottom: 14px !important; } body:not(.ws-marcas-active) .modal .modal-content { max-width: 96vw !important; width: 96vw !important; max-height: 88vh !important; border-radius: var(--vm-r-xl) !important; } body:not(.ws-marcas-active) .modal .modal-header { padding: 14px 18px !important; } body:not(.ws-marcas-active) .modal .modal-body { padding: 16px 18px !important; } body:not(.ws-marcas-active) .modal .modal-footer { padding: 12px 18px !important; } } /* Refinamientos ULTRA mobile (iPhone SE / mini) */ @media (max-width: 380px) { body:not(.ws-marcas-active) #dashboard-view .main-content { padding: 12px 12px 100px !important; } body:not(.ws-marcas-active) #dashboard-view .page-header .page-title { font-size: 18px !important; } .vm-fab { right: 12px; bottom: 12px; width: 52px; height: 52px; font-size: 18px; } } /* Dark mode del panel INTECAP (via data-theme) — respeta paleta obligatoria */ html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view { color: var(--vm-n-0); } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .app-layout, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .main-content { background: #0a0616 !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .sidebar, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .modal .modal-content, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .vm-card, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .sol-card, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-tile-md, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-tile-alt, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-chip { background: #12082e !important; border-color: rgba(196, 181, 253, .15) !important; color: var(--vm-n-0) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .page-title, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-hero-title, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .sol-modal-title { color: var(--vm-n-0) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .page-subtitle, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .desk-hero-subtitle { color: rgba(196, 181, 253, .7) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .nav-item { color: rgba(196, 181, 253, .78) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .nav-item:hover { background: rgba(94, 44, 237, .22) !important; color: var(--vm-n-0) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .input, html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .textarea { background: rgba(255, 255, 255, .04) !important; border-color: rgba(196, 181, 253, .18) !important; color: var(--vm-n-0) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .chip { background: rgba(255, 255, 255, .04) !important; border-color: rgba(196, 181, 253, .18) !important; color: rgba(196, 181, 253, .78) !important; } html[data-theme="dark"] body:not(.ws-marcas-active) #dashboard-view .chip.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border-color: var(--vm-violet) !important; } html[data-theme="dark"] .vm-toast-container .vm-toast { background: #1a103d !important; border: 1px solid rgba(196, 181, 253, .18); } /* ══════════════════════════════════════════════════════════════════════════ ═════════ PARTE 1 · BANDEJA — REDISEÑO INTEGRAL (F120) ═════════════════ Tabla densa + toggle Cards · Bulk selection · Drawer preview lateral Imágenes con aspect-ratio controlado. Layout compacto sin scroll infinito. ══════════════════════════════════════════════════════════════════════════ */ /* Container principal de la sección */ body:not(.ws-marcas-active) #section-pedidos { max-width: 1400px; margin: 0 auto; } /* Hero minimal — 1 título + acciones. Sin eyebrow, sin subtítulo redundante. */ .vm-bandeja-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--vm-n-150); margin-bottom: 14px; } .vm-bandeja-title { font-family: var(--vm-font-sans); font-size: 22px; font-weight: var(--vm-fw-bl); letter-spacing: -0.03em; color: var(--vm-n-900); line-height: 1.1; margin: 0; display: inline-flex; align-items: baseline; gap: 10px; } .vm-bandeja-count-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--vm-r-full); background: var(--vm-v-08); color: var(--vm-violet); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); letter-spacing: -0.005em; line-height: 1.4; } .vm-bandeja-actions { display: flex; align-items: center; gap: 8px; } /* View toggle (Tabla / Cards) */ .vm-view-toggle { display: inline-flex; padding: 4px; border-radius: var(--vm-r-md); background: var(--vm-n-100); border: 1px solid var(--vm-n-150); } .vm-view-btn { width: 32px; height: 30px; border-radius: var(--vm-r-sm); background: transparent; border: none; color: var(--vm-n-500); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: var(--vm-fs-md); transition: all var(--vm-dur-2) var(--vm-ease); } .vm-view-btn:hover { color: var(--vm-n-900); } .vm-view-btn.active { background: var(--vm-n-0); color: var(--vm-violet); box-shadow: var(--vm-sh-xs); } /* Filtros — 1 sola fila unificada con separador entre grupos */ .vm-bandeja-filters { margin-bottom: 14px; } .vm-chips-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .vm-chips-sep { display: inline-block; width: 1px; height: 20px; background: var(--vm-n-200); margin: 0 4px; flex-shrink: 0; } .vm-centro-dot, .vm-estado-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } body:not(.ws-marcas-active) #section-pedidos .chip { padding: 5px 11px !important; font-size: var(--vm-fs-sm) !important; } /* Bulk action bar */ .vm-bulk-bar { display: none; align-items: center; gap: 10px; padding: 10px 16px; background: var(--vm-violet); color: var(--vm-n-0); border-radius: var(--vm-r-lg); margin-bottom: 14px; box-shadow: var(--vm-sh-v-sm); animation: vmBulkIn .3s var(--vm-ease-b); } .vm-bulk-bar.active { display: flex; } @keyframes vmBulkIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .vm-bulk-count { font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); font-weight: var(--vm-fw-m); letter-spacing: -0.005em; } .vm-bulk-count strong { font-weight: var(--vm-fw-eb); } .vm-bulk-btn { padding: 6px 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--vm-r-full); color: var(--vm-n-0); font-family: var(--vm-font-sans); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); cursor: pointer; transition: background var(--vm-dur-1) var(--vm-ease); display: inline-flex; align-items: center; gap: 6px; letter-spacing: -0.005em; } .vm-bulk-btn:hover { background: rgba(255, 255, 255, .22); } .vm-bulk-btn i { font-size: 11px; } .vm-bulk-close { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: none; color: var(--vm-n-0); cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; transition: background var(--vm-dur-1) var(--vm-ease); } .vm-bulk-close:hover { background: rgba(255, 255, 255, .28); } /* ═══ TABLA densa (vista por defecto) ═══ */ .vm-bandeja-content.vm-view-table { background: var(--vm-n-0); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-xl); overflow: hidden; box-shadow: var(--vm-sh-xs); } .vm-table { width: 100%; border-collapse: collapse; font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); } .vm-table thead th { background: var(--vm-n-50); padding: 10px 14px; text-align: left; font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); letter-spacing: .1em; text-transform: none; border-bottom: 1px solid var(--vm-n-150); white-space: nowrap; } .vm-table thead th:first-child { padding-left: 18px; width: 44px; } .vm-table thead th:last-child { padding-right: 18px; } .vm-table tbody tr { border-bottom: 1px solid var(--vm-n-100); transition: background var(--vm-dur-1) var(--vm-ease); cursor: pointer; } .vm-table tbody tr:last-child { border-bottom: none; } .vm-table tbody tr:hover { background: var(--vm-v-04); } .vm-table tbody tr.vm-row-selected { background: var(--vm-v-08) !important; } .vm-table tbody td { padding: 12px 14px; color: var(--vm-n-900); vertical-align: middle; letter-spacing: -0.005em; } .vm-table tbody td:first-child { padding-left: 18px; } .vm-table tbody td:last-child { padding-right: 18px; } /* Checkbox custom */ .vm-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: var(--vm-n-0); border: 1.5px solid var(--vm-n-300); cursor: pointer; transition: all var(--vm-dur-1) var(--vm-ease); vertical-align: middle; } .vm-check:hover { border-color: var(--vm-violet); } .vm-check.vm-check-on { background: var(--vm-violet); border-color: var(--vm-violet); color: var(--vm-n-0); } .vm-check.vm-check-on::after { content: '✓'; font-size: 11px; font-weight: var(--vm-fw-eb); line-height: 1; } /* Centro cell (dot + label) */ .vm-td-centro { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--vm-fw-m); } .vm-td-centro .vm-centro-dot { margin: 0; box-shadow: 0 0 0 2px var(--vm-n-0); } .vm-td-curso { font-weight: var(--vm-fw-b); color: var(--vm-n-900); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vm-td-id { font-family: var(--vm-font-mono); font-size: 11px; color: var(--vm-n-500); } .vm-td-time { color: var(--vm-n-500); font-size: var(--vm-fs-sm); white-space: nowrap; } /* Estado badge en tabla */ .vm-badge-estado { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--vm-r-full); font-size: 10.5px; font-weight: var(--vm-fw-b); letter-spacing: -0.005em; white-space: nowrap; } .vm-badge-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Empty state de tabla */ .vm-empty-inline { padding: 60px 24px; text-align: center; color: var(--vm-n-500); } .vm-empty-inline .vm-empty-icon { margin: 0 auto 14px; } /* ═══ CARDS (toggle a vista tarjetas) ═══ */ .vm-bandeja-content.vm-view-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 14px !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Cards con aspect-ratio fijo para que las imágenes no queden gigantes */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card { aspect-ratio: 3 / 4 !important; height: auto !important; min-height: 0 !important; border-radius: var(--vm-r-xl) !important; overflow: hidden !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card-bg-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } /* ═══ DRAWER preview lateral ═══ */ .vm-drawer { position: fixed; inset: 0; z-index: 850; pointer-events: none; visibility: hidden; } .vm-drawer.vm-drawer-open { pointer-events: auto; visibility: visible; } .vm-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--vm-dur-3) var(--vm-ease); } .vm-drawer.vm-drawer-open .vm-drawer-backdrop { opacity: 1; } .vm-drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--vm-n-0); border-left: 1px solid var(--vm-n-150); box-shadow: -20px 0 40px -12px rgba(15, 23, 42, .15); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--vm-dur-3) var(--vm-ease); } .vm-drawer.vm-drawer-open .vm-drawer-panel { transform: translateX(0); } .vm-drawer-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--vm-n-150); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; background: var(--vm-n-50); flex-shrink: 0; } .vm-drawer-eyebrow { font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-violet); letter-spacing: .18em; text-transform: none; margin-bottom: 4px; } .vm-drawer-title { font-family: var(--vm-font-sans); font-size: var(--vm-fs-xl); font-weight: var(--vm-fw-bl); letter-spacing: -0.025em; color: var(--vm-n-900); line-height: 1.15; } .vm-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px 28px; scrollbar-width: thin; scrollbar-color: var(--vm-n-200) transparent; } .vm-drawer-body::-webkit-scrollbar { width: 5px; } .vm-drawer-body::-webkit-scrollbar-thumb { background: var(--vm-n-200); border-radius: 3px; } /* Preview imagen en drawer — controlada */ .vm-drawer-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--vm-r-lg); overflow: hidden; background: var(--vm-n-100); margin-bottom: 16px; } .vm-drawer-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .vm-drawer-preview .vm-drawer-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--vm-n-400); font-size: var(--vm-fs-sm); } .vm-drawer-meta { display: flex; align-items: center; gap: 8px; color: var(--vm-n-500); font-size: var(--vm-fs-sm); margin-bottom: 20px; } .vm-drawer-meta .vm-centro-dot { margin: 0; box-shadow: none; } .vm-drawer-section { margin-bottom: 20px; } .vm-drawer-section-label { font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); letter-spacing: .12em; text-transform: none; margin-bottom: 10px; } .vm-drawer-ficha-row { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0; font-size: var(--vm-fs-md); border-bottom: 1px solid var(--vm-n-100); gap: 12px; } .vm-drawer-ficha-row:last-child { border-bottom: none; } .vm-drawer-ficha-row .k { color: var(--vm-n-500); font-weight: var(--vm-fw-m); } .vm-drawer-ficha-row .v { color: var(--vm-n-900); font-weight: var(--vm-fw-b); text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vm-drawer-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .vm-drawer-actions .vm-btn { width: auto; justify-content: center; } .vm-drawer-actions-row { display: flex; flex-wrap: wrap; gap: 8px; } /* ═══ MOBILE ═══ */ @media (max-width: 900px) { .vm-bandeja-hero { flex-direction: column; align-items: stretch; gap: 12px; } .vm-bandeja-actions { justify-content: flex-end; } .vm-table thead { display: none; } .vm-table tbody tr { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; padding: 12px 14px; align-items: center; } .vm-table tbody td { padding: 0; border: none; } .vm-table tbody td.vm-td-check { grid-row: 1 / span 2; } .vm-table tbody td.vm-td-curso { grid-column: 2; grid-row: 1; font-size: var(--vm-fs-md); } .vm-table tbody td.vm-td-centro { grid-column: 2; grid-row: 2; font-size: var(--vm-fs-sm); color: var(--vm-n-500); } .vm-table tbody td.vm-td-estado { grid-column: 3; grid-row: 1 / span 2; } .vm-table tbody td.vm-td-time, .vm-table tbody td.vm-td-id { display: none; } .vm-drawer-panel { max-width: 100%; border-left: none; } } @media (max-width: 520px) { .vm-bandeja-title { font-size: 22px !important; } .vm-view-toggle { padding: 3px; } .vm-view-btn { width: 30px; height: 28px; font-size: var(--vm-fs-sm); } } /* ══════════════════════════════════════════════════════════════════════════ ═════════ PARTE 2 · WORKSPACE SOLICITUD MODAL — REDISEÑO (F120c) ═══════ Header limpio con X icon-only · Tabs pill segmentadas · Body scroll interno Imagen izquierda con aspect-ratio fijo · Sin gaps gigantes · Modal contenido Preserva IDs: solicitud-modal, sol-modal-title, sol-modal-badge, sol-tab-*, sol-panel-*, sol-media-main, btn-close-solicitud. Aditivo sobre inline styles. ══════════════════════════════════════════════════════════════════════════ */ /* ═══ MODAL CENTRADO KONTAGO (F122 · reemplaza drawer F120d) ═══ Modal centrado 1280×880 · sidebar interno 200px con rail iconos + acciones · backdrop blur 14px fuerte para foco al modal. */ body #solicitud-modal.modal.show.vm-ws-modal-centered { place-items: center !important; padding: 24px !important; background: rgba(15, 23, 42, .42) !important; backdrop-filter: blur(14px) saturate(120%) !important; -webkit-backdrop-filter: blur(14px) saturate(120%) !important; } @media (max-width: 700px) { body #solicitud-modal.modal.show.vm-ws-modal-centered { place-items: stretch !important; padding: 0 !important; } } /* Container: modal grande centrado con sidebar interno + panel principal */ body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { max-width: 1280px !important; width: 100% !important; height: 100% !important; max-height: 90vh !important; padding: 0 !important; border-radius: 20px !important; background: var(--gk-sur, #ffffff) !important; border: 1px solid var(--gk-ln, #e4e4e7) !important; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .28), 0 4px 16px -4px rgba(0, 0, 0, .14) !important; display: grid !important; grid-template-columns: 200px minmax(0, 1fr) !important; grid-template-rows: 76px minmax(0, 1fr) !important; grid-template-areas: "sidebar header" "sidebar body" !important; overflow: hidden !important; justify-self: center !important; animation: vmWsScaleIn .24s cubic-bezier(.22, 1, .36, 1); } @keyframes vmWsScaleIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Mobile: full-screen sin border */ @media (max-width: 900px) { body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { max-width: 100vw !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; /* (SUPERADO por ESTUDIO DE FICHA · el apilado móvil lo define el @media 980 del bloque final) grid-template-columns: 160px minmax(0, 1fr) !important; grid-template-rows: 60px minmax(0, 1fr) !important; */ } } /* (SUPERADO por ESTUDIO DE FICHA) @media (max-width: 640px) { body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { grid-template-columns: 76px minmax(0, 1fr) !important; } } */ /* Header — grid area · panel derecho: barra violeta + h1 + subtítulo + X */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-header { grid-area: header !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 20px 28px !important; border-bottom: 1px solid var(--gk-ln, #e4e4e7) !important; background: var(--gk-sur, #ffffff) !important; margin: 0 !important; text-align: left !important; position: relative !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-header::before { content: ''; position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 3px; height: 32px; background: var(--gk-a, #5e2ced); border-radius: 2px; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-head-content { padding-left: 16px; flex: 1; min-width: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-title { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 900; letter-spacing: -0.025em; color: var(--gk-ink, #0a0a0b); line-height: 1.2; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-sub { font-size: 12.5px; color: var(--gk-ink3, #71717a); margin-top: 3px; font-weight: 500; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-close { width: 34px; height: 34px; border-radius: 999px; background: var(--gk-sur2, #f1f1f4); border: none; color: var(--gk-ink3, #71717a); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: all var(--gk-t-fast, 150ms) var(--gk-ease); flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-close:hover { background: var(--gk-red-s, rgba(220,38,38,.08)); color: var(--gk-red, #dc2626); } /* ═══ SIDEBAR INTERNO (200px izquierda) ═══ */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sidebar { grid-area: sidebar !important; background: var(--gk-sur2, #f1f1f4) !important; border-right: 1px solid var(--gk-ln, #e4e4e7) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* Header del sidebar: avatar + curso + centro + estado */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-head { padding: 20px 16px 18px !important; border-bottom: 1px solid var(--gk-ln, #e4e4e7) !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 6px !important; flex-shrink: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-avatar { width: 44px !important; height: 44px !important; border-radius: 11px !important; background: color-mix(in srgb, var(--gk-a, #5e2ced) 15%, white) !important; color: var(--gk-a, #5e2ced) !important; font-family: 'Geist', 'Inter', system-ui, sans-serif !important; font-size: 15px !important; font-weight: 900 !important; display: grid !important; place-items: center !important; margin-bottom: 4px !important; letter-spacing: -0.02em !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-title { font-family: 'Geist', 'Inter', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 800 !important; color: var(--gk-ink, #0a0a0b) !important; letter-spacing: -0.015em !important; line-height: 1.25 !important; max-width: 100% !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; padding: 0 !important; background: none !important; border: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-meta { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 10px !important; color: var(--gk-ink4, #a1a1aa) !important; letter-spacing: 0.03em !important; margin-top: 2px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-badge { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: none !important; margin-top: 6px !important; background: color-mix(in srgb, var(--gk-a, #5e2ced) 10%, white) !important; color: var(--gk-a, #5e2ced) !important; border: 1px solid color-mix(in srgb, var(--gk-a, #5e2ced) 22%, white) !important; } /* Section labels del sidebar */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { font-size: 9.5px; font-weight: 800; text-transform: none; letter-spacing: 0.1em; color: var(--gk-ink4, #a1a1aa); padding: 14px 20px 6px; flex-shrink: 0; } /* Rail vertical de tabs — reusa clases sol-modal-tabs pero re-styled aquí */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 3px !important; padding: 4px 10px !important; border: none !important; background: transparent !important; overflow-y: auto; overflow-x: hidden !important; scrollbar-width: none; flex: 1 !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail::-webkit-scrollbar { display: none; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; min-height: 62px !important; padding: 10px 6px !important; border-radius: 10px !important; background: transparent !important; border: 1px solid transparent !important; font-family: 'Geist', 'Inter', system-ui, sans-serif !important; color: var(--gk-ink3, #71717a) !important; cursor: pointer !important; transition: all var(--gk-t-fast, 150ms) var(--gk-ease) !important; flex-shrink: 0 !important; margin: 0 !important; text-align: center !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab:hover:not(.active) { background: var(--gk-sur, #ffffff) !important; color: var(--gk-ink, #0a0a0b) !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab.active { background: var(--gk-sur, #ffffff) !important; color: var(--gk-a, #5e2ced) !important; border-color: color-mix(in srgb, var(--gk-a, #5e2ced) 20%, white) !important; box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--gk-a, #5e2ced) 20%, transparent) !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab i { font-size: 18px !important; margin: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-rail-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: -0.005em !important; line-height: 1 !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab-count { position: absolute !important; top: 8px !important; right: 10px !important; display: inline-flex !important; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab.active .sol-modal-tab-count { background: var(--gk-a, #5e2ced); } /* Footer del sidebar: botón WhatsApp */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-footer { padding: 12px 12px 14px; border-top: 1px solid var(--gk-ln, #e4e4e7); flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px; background: #fff; color: var(--gk-ink, #18181b); border: 1px solid var(--gk-ln, #e4e4e7); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter var(--gk-t-fast) var(--gk-ease); letter-spacing: -0.005em; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp:hover { background: var(--gk-bg, #f7f7f8); border-color: #22c55e; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp i { font-size: 15px; color: #22c55e; } /* Mobile: sidebar más compacto */ @media (max-width: 640px) { body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-head { padding: 12px 8px 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-title { font-size: 11px !important; -webkit-line-clamp: 3 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-meta, body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-badge, body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab i { font-size: 16px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-rail-label { font-size: 9.5px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp span { display: none !important; } } .vm-ws-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .vm-ws-eyebrow { font-family: var(--vm-font-sans); font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-violet); letter-spacing: .15em; text-transform: none; } .vm-ws-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .vm-ws-heading { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .vm-ws-content .sol-modal-title { font-family: var(--vm-font-sans) !important; font-size: var(--vm-fs-xl) !important; font-weight: var(--vm-fw-bl) !important; letter-spacing: -0.025em !important; color: var(--vm-n-900) !important; line-height: 1.2 !important; padding: 0 !important; border: none !important; background: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vm-ws-content .sol-modal-title i { display: none; } .vm-ws-badge { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; border-radius: var(--vm-r-full) !important; font-size: 10.5px !important; font-weight: var(--vm-fw-b) !important; letter-spacing: -0.005em !important; background: var(--vm-v-08) !important; color: var(--vm-violet) !important; border: none !important; white-space: nowrap; flex-shrink: 0; } .vm-ws-close { width: 34px; height: 34px; border-radius: var(--vm-r-md); background: var(--vm-n-0); border: 1px solid var(--vm-n-150); color: var(--vm-n-500); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: var(--vm-fs-md); transition: all var(--vm-dur-2) var(--vm-ease); flex-shrink: 0; } .vm-ws-close:hover { background: var(--vm-n-100); color: var(--vm-n-900); border-color: var(--vm-n-200); } /* Rail vertical de tabs (F120d obsoleto — reemplazado por F122 arriba, dejo por compat) */ body #solicitud-modal.vm-ws-split-mode.legacy-only .sol-modal-tabs.vm-ws-rail { grid-area: rail !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; padding: 14px 6px !important; border-right: 1px solid var(--vm-n-150) !important; border-bottom: none !important; background: var(--vm-n-50) !important; overflow-y: auto; overflow-x: hidden !important; scrollbar-width: none; height: auto !important; width: 68px !important; text-align: center !important; } body #solicitud-modal.vm-ws-split-mode .sol-modal-tabs.vm-ws-rail::-webkit-scrollbar { display: none; } body #solicitud-modal.vm-ws-split-mode .sol-modal-tab { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; width: 56px !important; height: 60px !important; padding: 6px 4px !important; border-radius: var(--vm-r-md) !important; background: transparent !important; border: 1px solid transparent !important; font-family: var(--vm-font-sans) !important; color: var(--vm-n-500) !important; cursor: pointer !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; flex-shrink: 0 !important; margin: 0 !important; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab:hover:not(.active) { background: var(--vm-n-100) !important; color: var(--vm-n-900) !important; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab.active { background: var(--vm-violet) !important; color: var(--vm-n-0) !important; border-color: var(--vm-violet) !important; box-shadow: var(--vm-sh-v-sm) !important; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab i { font-size: 16px !important; margin: 0 !important; } .vm-ws-rail-label { font-size: 9.5px; font-weight: var(--vm-fw-b); letter-spacing: -0.005em; line-height: 1; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab-count { position: absolute !important; top: 4px !important; right: 4px !important; display: inline-flex !important; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--vm-r-full); background: #ef4444; color: var(--vm-n-0); font-size: 9px; font-weight: var(--vm-fw-eb); } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab.active .sol-modal-tab-count { background: rgba(255, 255, 255, .28); color: var(--vm-n-0); } /* Body — scroll interno · Modal centrado F122 usa grid area body */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-body { grid-area: body !important; padding: 24px 32px 28px !important; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; min-width: 0 !important; background: var(--gk-sur, #ffffff) !important; scrollbar-width: thin; scrollbar-color: var(--gk-ln2, #d4d4d8) transparent; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-body::-webkit-scrollbar { width: 6px; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-body::-webkit-scrollbar-thumb { background: var(--gk-ln2, #d4d4d8); border-radius: 3px; } @media (max-width: 640px) { body #solicitud-modal.vm-ws-modal-centered .sol-modal-body { padding: 16px 14px 20px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-header { padding: 12px 16px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-header::before { left: 16px; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-head-content { padding-left: 10px; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-title { font-size: 16px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-sub { font-size: 11px !important; } } /* Grid ficha — 2 columnas: media izquierda + editor derecha */ .vm-ws-content .ficha-grid { display: grid !important; grid-template-columns: minmax(0, 340px) minmax(0, 1fr) !important; gap: 20px !important; align-items: start !important; } /* Media frame izquierdo — imagen con aspect-ratio 4/5 FIJO (no gigante) */ .vm-ws-content .media-frame { width: 100% !important; aspect-ratio: 4 / 5 !important; max-height: 460px !important; min-height: 260px !important; border-radius: var(--vm-r-lg) !important; overflow: hidden !important; background: var(--vm-n-100) !important; border: 1px solid var(--vm-n-150) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .vm-ws-content .media-frame img, .vm-ws-content .media-frame video { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } .vm-ws-content .media-frame .empty-state { color: var(--vm-n-400) !important; font-size: var(--vm-fs-sm) !important; text-align: center; padding: 20px !important; } /* Preview grid debajo — thumbnails cuadrados pequeños */ .vm-ws-content .preview-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important; gap: 6px !important; margin-top: 10px !important; } .vm-ws-content .preview-grid img, .vm-ws-content .preview-grid video { width: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: var(--vm-r-sm) !important; cursor: pointer !important; border: 1.5px solid transparent !important; transition: border-color var(--vm-dur-1) var(--vm-ease) !important; } .vm-ws-content .preview-grid img:hover, .vm-ws-content .preview-grid video:hover { border-color: var(--vm-violet) !important; } /* Botones dentro del modal — override .btn a estética consistente */ .vm-ws-content .btn { border-radius: var(--vm-r-md) !important; font-family: var(--vm-font-sans) !important; font-weight: var(--vm-fw-b) !important; letter-spacing: -0.005em !important; transition: all var(--vm-dur-2) var(--vm-ease) !important; } .vm-ws-content .btn.btn-primary { background: var(--vm-violet) !important; border-color: var(--vm-violet) !important; box-shadow: var(--vm-sh-v-sm) !important; } .vm-ws-content .btn.btn-primary:hover { background: var(--vm-v-700) !important; border-color: var(--vm-v-700) !important; } .vm-ws-content .btn.btn-ghost { background: transparent !important; border: 1px solid var(--vm-n-150) !important; color: var(--vm-n-700) !important; } .vm-ws-content .btn.btn-ghost:hover { background: var(--vm-n-100) !important; color: var(--vm-n-900) !important; } .vm-ws-content .btn.btn-secondary { background: var(--vm-n-0) !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; } .vm-ws-content .btn.btn-secondary:hover { background: var(--vm-n-50) !important; border-color: var(--vm-n-300) !important; } .vm-ws-content .btn.btn-warning { background: #fbbf24 !important; border: none !important; color: #78350f !important; } /* Textarea y select — consistencia */ .vm-ws-content .textarea, .vm-ws-content .input, .vm-ws-content .select { border-radius: var(--vm-r-md) !important; border: 1px solid var(--vm-n-200) !important; font-family: var(--vm-font-sans) !important; transition: border-color var(--vm-dur-1) var(--vm-ease), box-shadow var(--vm-dur-1) var(--vm-ease) !important; } .vm-ws-content .textarea:focus, .vm-ws-content .input:focus, .vm-ws-content .select:focus { border-color: var(--vm-violet) !important; outline: none !important; box-shadow: 0 0 0 3px var(--vm-v-08) !important; } /* Panels dentro de tabs — respirar sin gaps gigantes */ .vm-ws-content .sol-tab-panel { min-height: 0; } .vm-ws-content .sol-tab-panel .btn-row { gap: 6px !important; flex-wrap: wrap !important; margin-top: 10px !important; } /* Modo subir (paso 0) — cards centrados sin whitespace gigante */ .vm-ws-content #subir-paso0 { padding-top: 8px !important; } .vm-ws-content #subir-paso0 > p { margin: 0 0 12px !important; color: var(--vm-n-500) !important; font-size: var(--vm-fs-md) !important; } /* Emoji bar — más compacta */ .vm-ws-content .emoji-bar { border-radius: var(--vm-r-md) var(--vm-r-md) 0 0 !important; border-color: var(--vm-n-150) !important; background: var(--vm-n-50) !important; padding: 6px !important; gap: 2px !important; } .vm-ws-content .emoji-btn { width: 26px !important; height: 26px !important; border-radius: 6px !important; border: none !important; background: transparent !important; cursor: pointer !important; transition: background var(--vm-dur-1) var(--vm-ease) !important; font-size: 14px !important; padding: 0 !important; } .vm-ws-content .emoji-btn:hover { background: var(--vm-n-100) !important; } /* ═══ MOBILE ═══ */ @media (max-width: 820px) { .vm-ws-content .ficha-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .vm-ws-content .media-frame { max-height: 320px !important; aspect-ratio: 4 / 3 !important; } .vm-ws-content .sol-modal-tabs { padding: 8px 14px !important; } .vm-ws-content .sol-modal-body { padding: 14px 14px 18px !important; } .vm-ws-header { padding: 12px 14px !important; } } @media (max-width: 520px) { .vm-ws-content .sol-modal-tab { padding: 6px 10px !important; font-size: 12px !important; } .vm-ws-content .sol-modal-tab i { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ PARTE 2b · Design system del workspace modal — átomos compactos Toda clase `.vm-ws-*` reemplaza los inline styles gigantes anteriores. ══════════════════════════════════════════════════════════════════════════ */ /* Panel base — sin gaps innecesarios */ .vm-ws-panel { display: flex; flex-direction: column; gap: 12px; } .vm-ws-panel > *:last-child { margin-bottom: 0; } /* Labels de campo — eyebrow discreto no gigante */ .vm-ws-label { display: flex; align-items: center; gap: 6px; font-family: var(--vm-font-sans); font-size: 11px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); letter-spacing: .06em; text-transform: none; margin-bottom: 6px; } .vm-ws-label i { font-size: 10px; color: var(--vm-violet); } /* Field wrapper */ .vm-ws-field { display: flex; flex-direction: column; } .vm-ws-field-inline { flex-direction: row; align-items: center; gap: 8px; } .vm-ws-hint { font-size: 11px; color: var(--vm-n-500); margin-top: 5px; line-height: 1.4; } .vm-ws-hint-success { background: rgba(34, 197, 94, .10); color: #15803d; padding: 6px 10px; border-radius: var(--vm-r-sm); font-weight: var(--vm-fw-m); margin: 0 0 10px; } /* Inputs — altura 34px consistente, no 40+ */ .vm-ws-input, .vm-ws-textarea { width: 100%; padding: 8px 12px; background: var(--vm-n-0); border: 1px solid var(--vm-n-200); border-radius: var(--vm-r-md); font-family: var(--vm-font-sans); font-size: var(--vm-fs-md); color: var(--vm-n-900); line-height: 1.4; transition: border-color var(--vm-dur-1) var(--vm-ease), box-shadow var(--vm-dur-1) var(--vm-ease); box-sizing: border-box; } .vm-ws-input { height: 34px; } .vm-ws-input-sm { height: 30px; padding: 6px 10px; font-size: var(--vm-fs-sm); } .vm-ws-textarea { min-height: 68px; resize: vertical; padding: 8px 12px; } .vm-ws-textarea-sm { min-height: 52px; } .vm-ws-input:focus, .vm-ws-textarea:focus { outline: none; border-color: var(--vm-violet); box-shadow: 0 0 0 3px var(--vm-v-08); } .vm-ws-input-mono { font-family: var(--vm-font-mono); font-size: 11px; color: var(--vm-n-700); } select.vm-ws-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; } /* Row input + botón(es) */ .vm-ws-input-row { display: flex; gap: 6px; align-items: center; } .vm-ws-input-row .vm-ws-input { flex: 1; min-width: 0; } /* Botones — sistema unificado dentro del modal */ .vm-ws-content .vm-btn, .vm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; min-height: 34px; border-radius: var(--vm-r-md); border: 1px solid transparent; background: transparent; font-family: var(--vm-font-sans); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); letter-spacing: -0.005em; color: var(--vm-n-900); cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); white-space: nowrap; line-height: 1; } .vm-btn:hover { transform: translateY(-1px); } .vm-btn:active { transform: translateY(0); } .vm-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } .vm-btn i { font-size: 11px; } .vm-btn-sm { padding: 6px 11px; min-height: 30px; font-size: var(--vm-fs-sm); } .vm-btn-block { width: 100%; } .vm-btn-primary { background: var(--vm-violet); border-color: var(--vm-violet); color: var(--vm-n-0); box-shadow: var(--vm-sh-v-sm); } .vm-btn-primary:hover { background: var(--vm-v-700, #4c1d95); border-color: var(--vm-v-700, #4c1d95); } .vm-btn-secondary { background: var(--vm-n-0); border-color: var(--vm-n-200); color: var(--vm-n-900); } .vm-btn-secondary:hover { background: var(--vm-n-50); border-color: var(--vm-n-300); } .vm-btn-ghost { background: transparent; border-color: var(--vm-n-200); color: var(--vm-n-700); } .vm-btn-ghost:hover { background: var(--vm-n-100); color: var(--vm-n-900); } .vm-btn-warning { background: #f59e0b; border-color: #f59e0b; color: #fff; } .vm-btn-warning:hover { background: #d97706; border-color: #d97706; } .vm-btn-wsp { background: #fff; border-color: var(--vm-n-200); color: #fff; } .vm-btn-wsp:hover { background: var(--vm-n-50); border-color: #25D366; } .vm-btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--vm-r-md); background: transparent; border: 1px solid var(--vm-n-200); color: var(--vm-n-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); } .vm-btn-icon:hover { background: var(--vm-n-100); color: var(--vm-n-900); } /* Row de botones */ .vm-ws-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .vm-ws-btn-row-wrap { display: flex; flex-wrap: wrap; gap: 6px; } .vm-ws-btn-tag { font-size: 10px; font-weight: var(--vm-fw-m); opacity: .7; margin-left: 2px; } /* Acciones primarias del tab (fila) */ .vm-ws-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--vm-n-100); margin-top: 4px; } /* Alert delgada (banner) */ .vm-ws-alert { padding: 10px 12px; border-radius: var(--vm-r-md); border: 1px solid transparent; font-size: var(--vm-fs-sm); line-height: 1.5; } .vm-ws-alert-head { font-weight: var(--vm-fw-eb); font-size: var(--vm-fs-sm); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .vm-ws-alert-body { font-size: 12px; } .vm-ws-alert-plain { font-size: 12px; } .vm-ws-alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .vm-ws-alert-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; } /* Details colapsable */ .vm-ws-details { border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-md); background: var(--vm-n-0); overflow: hidden; } .vm-ws-details-warn { border-color: #fde68a; background: #fffbeb; } .vm-ws-details-links { border-color: var(--vm-n-150); } .vm-ws-details summary { cursor: pointer; padding: 10px 12px; font-family: var(--vm-font-sans); font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-b); color: var(--vm-n-900); display: flex; align-items: center; gap: 8px; list-style: none; user-select: none; } .vm-ws-details summary::-webkit-details-marker { display: none; } .vm-ws-details summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: 10px; color: var(--vm-n-400); transition: transform var(--vm-dur-2) var(--vm-ease); } .vm-ws-details[open] summary::after { transform: rotate(180deg); } .vm-ws-details-body { padding: 10px 12px 12px; border-top: 1px solid var(--vm-n-150); display: flex; flex-direction: column; gap: 8px; } .vm-ws-details-warn .vm-ws-details-body { border-top-color: #fde68a; } .vm-ws-tag { font-size: 9px; font-weight: var(--vm-fw-eb); padding: 2px 6px; border-radius: var(--vm-r-full); background: var(--vm-n-100); color: var(--vm-n-500); letter-spacing: .04em; text-transform: none; } /* Link block dentro de details (para links de aprobación) */ .vm-ws-link-block { padding: 10px; border-radius: var(--vm-r-md); border: 1px solid transparent; display: flex; flex-direction: column; gap: 6px; } .vm-ws-link-block-green { background: #fff; border-color: var(--vm-n-150); } .vm-ws-link-block-amber { background: #fff; border-color: var(--vm-n-150); } .vm-ws-link-label { font-size: 10px; font-weight: var(--vm-fw-b); letter-spacing: .08em; text-transform: none; display: flex; align-items: center; gap: 5px; } .vm-ws-link-block-green .vm-ws-link-label { color: #166534; } .vm-ws-link-block-amber .vm-ws-link-label { color: #92400e; } /* Metaline (contexto compacto) */ .vm-ws-metaline { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--vm-n-50); border-radius: var(--vm-r-sm); font-size: var(--vm-fs-sm); } .vm-ws-metaline-key { font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); text-transform: none; letter-spacing: .1em; } .vm-ws-metaline-val { color: var(--vm-n-700); font-weight: var(--vm-fw-m); } /* IA grid 2 columnas */ .vm-ws-ia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .vm-ws-ia-col { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--vm-n-50); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-md); } .vm-ws-col-title { font-size: 11px; font-weight: var(--vm-fw-b); color: var(--vm-n-900); letter-spacing: -0.005em; display: flex; align-items: center; gap: 5px; padding-bottom: 4px; border-bottom: 1px solid var(--vm-n-150); } .vm-ws-col-title i { color: var(--vm-violet); font-size: 11px; } /* IA preview + color panel */ .vm-ws-ia-preview { width: 100%; aspect-ratio: 4 / 5; max-height: 380px; border-radius: var(--vm-r-lg); overflow: hidden; background: var(--vm-n-100); border: 1px solid var(--vm-n-150); margin-bottom: 10px; } .vm-ws-ia-preview img { width: 100%; height: 100%; object-fit: contain; display: block; } .vm-ws-color-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--vm-n-50); border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-md); flex-wrap: wrap; } .vm-ws-color-label { font-size: 10px; font-weight: var(--vm-fw-b); color: var(--vm-n-500); letter-spacing: .08em; text-transform: none; display: flex; align-items: center; gap: 4px; } .vm-ws-color-picker { width: 36px; height: 28px; padding: 2px; border: 1px solid var(--vm-n-200); border-radius: var(--vm-r-sm); cursor: pointer; background: transparent; } .vm-ws-color-caption { font-size: 11px; color: var(--vm-n-500); flex: 1; min-width: 60px; } /* Loading */ .vm-ws-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; color: var(--vm-n-500); font-size: var(--vm-fs-sm); } .vm-ws-loading i { color: var(--vm-violet); font-size: 16px; } /* Choice buttons (Subir paso 0) */ .vm-ws-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .vm-ws-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--vm-n-0); border: 1px solid var(--vm-n-200); border-radius: var(--vm-r-md); text-align: left; cursor: pointer; transition: all var(--vm-dur-2) var(--vm-ease); font-family: var(--vm-font-sans); } .vm-ws-choice:hover { border-color: var(--vm-violet); background: var(--vm-v-04); transform: translateY(-1px); } .vm-ws-choice > i { font-size: 20px; color: var(--vm-violet); flex-shrink: 0; } .vm-ws-choice > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vm-ws-choice strong { font-size: var(--vm-fs-md); font-weight: var(--vm-fw-b); color: var(--vm-n-900); letter-spacing: -0.005em; } .vm-ws-choice span { font-size: 11px; color: var(--vm-n-500); font-weight: var(--vm-fw-m); } .vm-ws-choice-primary { background: var(--vm-violet); border-color: var(--vm-violet); box-shadow: var(--vm-sh-v-sm); } .vm-ws-choice-primary:hover { background: var(--vm-v-700, #4c1d95); border-color: var(--vm-v-700, #4c1d95); } .vm-ws-choice-primary > i { color: var(--vm-n-0); } .vm-ws-choice-primary strong { color: var(--vm-n-0); } .vm-ws-choice-primary span { color: rgba(255,255,255,.8); } /* Mobile: 1 columna IA grid + choice */ @media (max-width: 640px) { .vm-ws-ia-grid, .vm-ws-choice-row, .vm-ws-btn-row { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════ PARTE 2c · CORRECCIÓN — botones con TEXTO, cards con carácter (F120c3) User: "temas viejos simples y dañes la info, no están todos los botones, se ve todo blanco feo viejo". Fix: fondos violeta/ámbar suaves, botones con presencia (44px), texto siempre visible, sin details escondiendo info. ══════════════════════════════════════════════════════════════════════════ */ /* Cards contenedoras con acento sutil — no puro blanco */ .vm-ws-card { padding: 14px 16px; border-radius: var(--vm-r-lg); border: 1px solid transparent; display: flex; flex-direction: column; gap: 8px; } .vm-ws-card-violet { background: rgba(94, 44, 237, .04); border-color: rgba(94, 44, 237, .14); } .vm-ws-card-amber { background: #fffbeb; border-color: #fcd34d; } .vm-ws-card-hint { font-size: 11.5px; color: var(--vm-n-700); line-height: 1.4; margin: 0; } .vm-ws-card-amber .vm-ws-card-hint { color: #78350f; } /* Labels con variantes de color según contexto */ .vm-ws-label-amber { color: #92400e; } .vm-ws-label-amber i { color: #d97706; } .vm-ws-label-success { color: #15803d; } .vm-ws-label-success i { color: #22c55e; } /* Botones — nivel default 40px (con presencia), sm 32px, no icon-only */ .vm-btn { padding: 10px 18px !important; min-height: 40px !important; font-size: var(--vm-fs-md) !important; gap: 7px !important; } .vm-btn i { font-size: 12px !important; } .vm-btn-sm { padding: 6px 12px !important; min-height: 32px !important; font-size: var(--vm-fs-sm) !important; } .vm-btn-primary { background: #6d3fee !important; border-color: #5e2ced !important; color: #fff !important; box-shadow: 0 4px 12px -4px rgba(94, 44, 237, .45), inset 0 1px 0 rgba(255,255,255,.15) !important; } .vm-btn-primary:hover { background: #5e2ced !important; box-shadow: 0 6px 16px -4px rgba(94, 44, 237, .55), inset 0 1px 0 rgba(255,255,255,.15) !important; } .vm-btn-warning { background: #fff !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; box-shadow: none !important; } .vm-btn-warning:hover { background: var(--vm-n-50) !important; border-color: #d97706 !important; } .vm-btn-warning i, .vm-btn-warning svg { color: #d97706; } .vm-btn-success { background: var(--vm-violet) !important; border-color: var(--vm-violet) !important; color: #fff !important; box-shadow: none !important; } .vm-btn-success:hover { background: var(--vm-violet) !important; filter: brightness(1.08); } .vm-btn-mercadeo { background: #fff !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; box-shadow: none !important; } .vm-btn-mercadeo:hover { background: var(--vm-n-50) !important; border-color: var(--vm-violet) !important; } .vm-btn-mercadeo i, .vm-btn-mercadeo svg { color: var(--vm-violet); } .vm-btn-secondary { background: #fff !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; box-shadow: var(--vm-sh-xs), inset 0 1px 0 rgba(255,255,255,.5) !important; } .vm-btn-secondary:hover { background: var(--vm-n-50) !important; border-color: var(--vm-violet) !important; color: var(--vm-violet) !important; } .vm-btn-wsp { background: #fff !important; border: 1px solid var(--vm-n-200) !important; color: var(--vm-n-900) !important; box-shadow: none !important; } .vm-btn-wsp:hover { background: var(--vm-n-50) !important; border-color: #22c55e !important; } .vm-btn-wsp i, .vm-btn-wsp svg { color: #22c55e; } /* Barra de acciones primarias — botones grandes con TEXTO completo, no full-width monstruoso */ .vm-ws-actionbar { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0 0; background: transparent; border: none; border-top: 1px solid var(--vm-n-150); border-radius: 0; margin-top: 6px; } .vm-ws-actionbar .vm-btn { flex: 1 1 auto; min-width: 140px; } .vm-ws-actionbar .vm-btn.hidden { display: none !important; } /* Links wrap — sección compartir con label + cards de link */ .vm-ws-links-wrap { padding: 12px 14px; border-radius: var(--vm-r-lg); background: transparent; border: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .vm-ws-link-block { padding: 12px 14px; border-radius: var(--vm-r-md); border: 1px solid transparent; display: flex; flex-direction: column; gap: 8px; } .vm-ws-link-block-green { background: #fff; border-color: var(--vm-n-150); } .vm-ws-link-block-amber { background: #fff; border-color: var(--vm-n-150); } .vm-ws-link-label { font-size: 11px; font-weight: var(--vm-fw-eb); letter-spacing: .06em; text-transform: none; display: flex; align-items: center; gap: 6px; } .vm-ws-link-block-green .vm-ws-link-label { color: #166534; } .vm-ws-link-block-amber .vm-ws-link-label { color: #92400e; } /* Mobile: acciones apiladas */ @media (max-width: 640px) { .vm-ws-actionbar .vm-btn { flex: 1 1 100%; } } /* ═══════════════════════════════════════════════════════════════════════ F120d · SPLIT PANEL — ajustes finales Título con eyebrow · rail vertical · body con menos padding lateral en mobile ═══════════════════════════════════════════════════════════════════════ */ .vm-ws-modal.vm-ws-split-mode .vm-ws-content .sol-modal-title { font-size: var(--vm-fs-lg) !important; font-weight: var(--vm-fw-bl) !important; letter-spacing: -0.03em !important; line-height: 1.15 !important; color: var(--vm-n-900) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Grid ficha en Split Panel: 1 columna (más ancho para editor) */ .vm-ws-modal.vm-ws-split-mode .vm-ws-content .ficha-grid { display: grid !important; grid-template-columns: 260px 1fr !important; gap: 20px !important; align-items: start !important; } @media (max-width: 1100px) { .vm-ws-modal.vm-ws-split-mode .vm-ws-content .ficha-grid { grid-template-columns: 1fr !important; } } /* Media frame más chico en split mode */ .vm-ws-modal.vm-ws-split-mode .vm-ws-content .media-frame { width: 100% !important; aspect-ratio: 4 / 5 !important; max-height: 340px !important; min-height: 220px !important; border-radius: var(--vm-r-lg) !important; overflow: hidden !important; background: var(--vm-n-100) !important; border: 1px solid var(--vm-n-150) !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Mobile: rail más compacto + labels ocultas */ @media (max-width: 640px) { .vm-ws-modal.vm-ws-split-mode .sol-modal-tab { width: 44px !important; height: 48px !important; } .vm-ws-modal.vm-ws-split-mode .sol-modal-tab i { font-size: 15px !important; } .vm-ws-rail-label { display: none; } .vm-ws-modal.vm-ws-split-mode .sol-modal-body { padding: 14px 14px 18px !important; } .vm-ws-header { padding: 12px 14px !important; } } /* ══════════════════════════════════════════════════════════════════════════ ═════════ F121 · FOUNDATION GOKONTA (aditivo · aprobado 09/07/26) ══════ Tokens + átomos importados del proyecto ROYSA/gokonta. Prefijo --gk-* para no chocar con --vm-*. Los componentes atómicos (.btn/.kpi-chip/ .dense-table/.pill/.badge/.panel) están disponibles para módulos nuevos (Wizard, Nota, Publicadas, Galerías, Catálogo, Registro, Cal, Config). ══════════════════════════════════════════════════════════════════════════ */ :root { /* Ink escala fría (gris zinc) */ --gk-ink: #0A0A0B; --gk-ink2: #3F3F46; --gk-ink3: #71717A; --gk-ink4: #A1A1AA; /* Superficies */ --gk-bg: #F7F7FA; --gk-sur: #FFFFFF; --gk-sur2: #F1F1F4; /* Bordes */ --gk-ln: #E4E4E7; --gk-ln2: #D4D4D8; /* Accent = paleta obligatoria INTECAP (#5e2ced) con variantes color-mix */ --gk-a: #5e2ced; --gk-a-soft: color-mix(in srgb, #5e2ced 8%, white); --gk-a-mid: color-mix(in srgb, #5e2ced 18%, white); --gk-a-glow: color-mix(in srgb, #5e2ced 35%, transparent); /* Segundo accent = cyan #75cebb */ --gk-a2: #75cebb; --gk-a2-soft: color-mix(in srgb, #75cebb 12%, white); /* Semánticos */ --gk-red: #DC2626; --gk-red-s: rgba(220, 38, 38, .08); --gk-amb: #D97706; --gk-amb-s: rgba(217, 119, 6, .08); --gk-grn: #16A34A; --gk-grn-s: rgba(22, 163, 74, .08); /* Radius */ --gk-r-xs: 5px; --gk-r-sm: 8px; --gk-r-md: 11px; --gk-r-lg: 14px; --gk-r-xl: 18px; --gk-r-full: 999px; /* Sombras sutiles */ --gk-sh-xs: 0 1px 2px rgba(15, 23, 42, .04); --gk-sh-sm: 0 2px 8px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --gk-sh-md: 0 8px 24px -8px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04); /* Timing / easing */ --gk-t-fast: 150ms; --gk-t-base: 250ms; --gk-ease: cubic-bezier(.2, .8, .2, 1); /* Fuente mono para números */ --gk-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; } /* ─── BOTONES ─── */ .gk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--gk-r-md); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--gk-ln); background: var(--gk-sur); color: var(--gk-ink2); text-decoration: none; box-shadow: var(--gk-sh-xs); transition: border-color var(--gk-t-base) var(--gk-ease), color var(--gk-t-base) var(--gk-ease), transform var(--gk-t-fast), box-shadow var(--gk-t-base) var(--gk-ease); white-space: nowrap; line-height: 1; } .gk-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; flex-shrink: 0; } .gk-btn:hover { border-color: var(--gk-ln2); color: var(--gk-ink); transform: translateY(-1px); box-shadow: var(--gk-sh-sm); } .gk-btn:active { transform: translateY(0) scale(.98); box-shadow: var(--gk-sh-xs); } .gk-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } .gk-btn-primary { background: var(--gk-a); border-color: var(--gk-a); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 3px 10px -2px var(--gk-a-glow); } .gk-btn-primary:hover { background: color-mix(in srgb, var(--gk-a) 88%, #000); border-color: color-mix(in srgb, var(--gk-a) 88%, #000); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 6px 16px -3px var(--gk-a-glow); color: #fff; } .gk-btn-ghost { background: transparent; border-color: var(--gk-ln); color: var(--gk-ink3); box-shadow: none; } .gk-btn-ghost:hover { border-color: var(--gk-ln2); color: var(--gk-ink); box-shadow: none; } .gk-btn-danger { border-color: rgba(220, 38, 38, .3); color: var(--gk-red); } .gk-btn-danger:hover { background: var(--gk-red-s); border-color: var(--gk-red); } .gk-btn-success { background: var(--gk-grn); border-color: var(--gk-grn); color: #fff; } .gk-btn-success:hover { filter: brightness(1.05); color: #fff; } .gk-btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; } .gk-btn-block { width: 100%; } /* Botón icon-only chico (para tabla row-actions) */ .gk-ra-btn { width: 28px; height: 28px; border-radius: var(--gk-r-sm); background: var(--gk-sur); border: 1px solid var(--gk-ln); color: var(--gk-ink3); cursor: pointer; display: grid; place-items: center; box-shadow: var(--gk-sh-xs); transition: all var(--gk-t-fast); } .gk-ra-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; } .gk-ra-btn:hover { color: var(--gk-a); border-color: color-mix(in srgb, var(--gk-a) 30%, white); background: var(--gk-a-soft); } .gk-ra-btn.gk-danger:hover { color: var(--gk-red); border-color: rgba(220, 38, 38, .3); background: var(--gk-red-s); } /* ─── KPI CHIPS ─── */ .gk-kpi-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .gk-kpi-chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--gk-r-lg); background: var(--gk-sur); border: 1px solid var(--gk-ln); box-shadow: var(--gk-sh-sm); cursor: default; transition: border-color var(--gk-t-base) var(--gk-ease), transform var(--gk-t-base) var(--gk-ease), box-shadow var(--gk-t-base) var(--gk-ease); } .gk-kpi-chip:hover { border-color: var(--gk-ln2); transform: translateY(-2px); box-shadow: var(--gk-sh-md); } .gk-kpi-chip.gk-active { border-color: var(--gk-a); box-shadow: 0 0 0 3px var(--gk-a-soft), var(--gk-sh-sm); } .gk-kc-ico { width: 34px; height: 34px; border-radius: var(--gk-r-sm); display: grid; place-items: center; flex-shrink: 0; } .gk-kc-ico svg { width: 16px; height: 16px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .gk-kc-num { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--gk-ink); font-family: var(--gk-mono); line-height: 1; } .gk-kc-label { font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0.06em; color: var(--gk-ink4); margin-top: 3px; } /* ─── PANEL (contenedor de sección) ─── */ .gk-panel { background: var(--gk-sur); border: 1px solid var(--gk-ln); border-radius: var(--gk-r-lg); overflow: hidden; box-shadow: var(--gk-sh-sm); } .gk-ph-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--gk-ln); background: var(--gk-sur2); } .gk-ph-title { font-size: 13px; font-weight: 700; color: var(--gk-ink); letter-spacing: -0.015em; } .gk-ph-sub { font-size: 11px; color: var(--gk-ink4); margin-top: 2px; } .gk-ph-link { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--gk-a); text-decoration: none; flex-shrink: 0; transition: opacity var(--gk-t-fast); } .gk-ph-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; } .gk-ph-link:hover { opacity: .72; } .gk-panel-empty { padding: 32px; text-align: center; color: var(--gk-ink4); font-size: 12.5px; font-weight: 500; } /* ─── TABLA DENSA ─── */ .gk-dense-table { width: 100%; border-collapse: collapse; } .gk-dense-table thead th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gk-ink4); padding: 10px 16px; background: var(--gk-sur2); border-bottom: 1px solid var(--gk-ln); text-align: left; white-space: nowrap; } .gk-dense-table tbody td { font-size: 12.5px; color: var(--gk-ink); padding: 12px 16px; border-bottom: 1px solid var(--gk-ln); vertical-align: middle; } .gk-dense-table tbody tr:last-child td { border-bottom: none; } .gk-dense-table tbody tr { transition: background var(--gk-t-fast); cursor: pointer; } .gk-dense-table tbody tr:hover td { background: var(--gk-sur2); } .gk-dense-table tbody tr.gk-selected td { background: var(--gk-a-soft); } .gk-dense-table tbody tr.gk-selected:hover td { background: color-mix(in srgb, var(--gk-a) 10%, transparent); } .gk-row-acts { opacity: 0; transition: opacity var(--gk-t-base); display: flex; gap: 4px; justify-content: flex-end; } .gk-dense-table tbody tr:hover .gk-row-acts { opacity: 1; } /* ─── PILLS / BADGES ─── */ .gk-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--gk-r-full); font-size: 11px; font-weight: 700; border: 1px solid; white-space: nowrap; } .gk-pill svg { flex-shrink: 0; } .gk-pill-red { color: var(--gk-red); border-color: rgba(220, 38, 38, .25); background: var(--gk-red-s); } .gk-pill-amb { color: var(--gk-amb); border-color: rgba(217, 119, 6, .25); background: var(--gk-amb-s); } .gk-pill-grn { color: var(--gk-grn); border-color: rgba(22, 163, 74, .25); background: var(--gk-grn-s); } .gk-pill-neu { color: var(--gk-ink3); border-color: var(--gk-ln2); background: var(--gk-sur2); } .gk-pill-acc { color: var(--gk-a); border-color: color-mix(in srgb, var(--gk-a) 30%, white); background: var(--gk-a-soft); } .gk-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--gk-r-xs); font-size: 10.5px; font-weight: 700; } .gk-badge-red { color: var(--gk-red); background: var(--gk-red-s); } .gk-badge-amb { color: var(--gk-amb); background: var(--gk-amb-s); } .gk-badge-grn { color: var(--gk-grn); background: var(--gk-grn-s); } .gk-badge-neu { color: var(--gk-ink3); background: var(--gk-sur2); border: 1px solid var(--gk-ln); } .gk-badge-acc { color: var(--gk-a); background: var(--gk-a-soft); } /* ─── AVATARES ─── */ .gk-av-sq { width: 32px; height: 32px; border-radius: var(--gk-r-sm); background: var(--gk-a-mid); border: 1px solid color-mix(in srgb, var(--gk-a) 28%, white); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--gk-a); flex-shrink: 0; } .gk-av-circle { border-radius: 50%; } /* ─── SEPARADOR DE SECCIÓN ─── */ .gk-section-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--gk-ink4); font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0.08em; } .gk-section-divider::before, .gk-section-divider::after { content: ""; flex: 1; height: 1px; background: var(--gk-ln); } /* ─── HERO / H1 GoKonta ─── */ .gk-h1 { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; color: var(--gk-ink); line-height: 1.1; margin: 0; } .gk-hero-sub { font-size: 13.5px; color: var(--gk-ink3); margin-top: 4px; font-weight: 500; } .gk-readonly { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--gk-ink4); background: var(--gk-sur2); border: 1px solid var(--gk-ln); border-radius: var(--gk-r-full); padding: 4px 12px; } .gk-readonly svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; } /* ─── FIELD (form input estilo GoKonta) ─── */ .gk-field { display: flex; flex-direction: column; gap: 5px; } .gk-field-label { font-size: 11px; font-weight: 600; color: var(--gk-ink3); text-transform: none; letter-spacing: 0.04em; } .gk-field-input, .gk-field-select, .gk-field-textarea { height: 34px; padding: 0 11px; border: 1px solid var(--gk-ln); border-radius: var(--gk-r-sm); background: var(--gk-sur); font-size: 13px; color: var(--gk-ink); font-family: 'Geist', 'Inter', system-ui, sans-serif; outline: none; width: 100%; transition: border-color var(--gk-t-fast), box-shadow var(--gk-t-fast); box-sizing: border-box; } .gk-field-textarea { height: auto; padding: 9px 11px; resize: vertical; min-height: 68px; } .gk-field-input:focus, .gk-field-select:focus, .gk-field-textarea:focus { border-color: var(--gk-a); box-shadow: 0 0 0 3px var(--gk-a-soft); } /* ═══════════════════════════════════════════════════════════════════════ F123 · Escritorio home rediseñado (Kontago sin duplicaciones) ═══════════════════════════════════════════════════════════════════════ */ body:not(.ws-marcas-active) #section-home { max-width: 1200px; margin: 0 auto; } /* Hero */ body:not(.ws-marcas-active) #section-home .gk-hero-block { margin-bottom: 22px; } body:not(.ws-marcas-active) #section-home .gk-hero-eyebrow { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: none; color: var(--gk-a, #5e2ced); margin-bottom: 8px; } body:not(.ws-marcas-active) #section-home .gk-h1 { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 32px; font-weight: 900; letter-spacing: -0.03em; color: var(--gk-ink, #0a0a0b); line-height: 1.1; margin: 0 0 4px; } body:not(.ws-marcas-active) #section-home .gk-hero-sub { font-size: 14px; color: var(--gk-ink3, #71717a); font-weight: 500; margin: 0; } /* Alert banner minimal (F123) */ body:not(.ws-marcas-active) #section-home .gk-alert-banner { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: var(--gk-r-lg, 14px); background: color-mix(in srgb, var(--gk-a, #5e2ced) 6%, white); border: 1px solid color-mix(in srgb, var(--gk-a, #5e2ced) 20%, white); color: var(--gk-ink, #0a0a0b); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 20px; text-align: left; transition: transform var(--gk-t-fast) var(--gk-ease), box-shadow var(--gk-t-fast) var(--gk-ease); } body:not(.ws-marcas-active) #section-home .gk-alert-banner:hover { transform: translateY(-1px); box-shadow: var(--gk-sh-sm); } body:not(.ws-marcas-active) #section-home .gk-alert-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: gkPulseDot 2s infinite; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home .gk-alert-text { flex: 1; } body:not(.ws-marcas-active) #section-home .gk-alert-arrow { font-size: 14px; color: var(--gk-a, #5e2ced); font-weight: 700; flex-shrink: 0; } @keyframes gkPulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } } /* KPI chips (F123 sobreescriben .kpi-grid antiguo) */ body:not(.ws-marcas-active) #section-home #home-kpis.gk-kpi-chips { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; margin-bottom: 24px !important; } body:not(.ws-marcas-active) #section-home .gk-kpi-chip { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--gk-r-lg, 14px); background: var(--gk-sur, #ffffff); border: 1px solid var(--gk-ln, #e4e4e7); box-shadow: var(--gk-sh-sm); cursor: pointer; font-family: 'Geist', 'Inter', system-ui, sans-serif; text-align: left; transition: transform var(--gk-t-base) var(--gk-ease), border-color var(--gk-t-base) var(--gk-ease), box-shadow var(--gk-t-base) var(--gk-ease); } body:not(.ws-marcas-active) #section-home .gk-kpi-chip:hover { transform: translateY(-2px); border-color: var(--gk-ln2, #d4d4d8); box-shadow: var(--gk-sh-md); } body:not(.ws-marcas-active) #section-home .gk-kc-ico { width: 38px; height: 38px; border-radius: var(--gk-r-sm, 8px); display: grid; place-items: center; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home .gk-kc-ico svg { width: 18px; height: 18px; } body:not(.ws-marcas-active) #section-home .gk-kc-body { min-width: 0; flex: 1; } body:not(.ws-marcas-active) #section-home .gk-kc-num { font-family: var(--gk-mono, 'JetBrains Mono', monospace); font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--gk-ink, #0a0a0b); line-height: 1; } body:not(.ws-marcas-active) #section-home .gk-kc-label { font-size: 11px; font-weight: 700; color: var(--gk-ink3, #71717a); margin-top: 4px; letter-spacing: -0.005em; } /* Grid 2 columnas */ body:not(.ws-marcas-active) #section-home .gk-two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; margin-bottom: 20px; } /* Panel Kontago dentro del home */ body:not(.ws-marcas-active) #section-home .gk-panel { background: var(--gk-sur, #ffffff); border: 1px solid var(--gk-ln, #e4e4e7); border-radius: var(--gk-r-lg, 14px); overflow: hidden; box-shadow: var(--gk-sh-sm); } body:not(.ws-marcas-active) #section-home .gk-ph-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--gk-ln, #e4e4e7); background: var(--gk-sur2, #f1f1f4); gap: 12px; } body:not(.ws-marcas-active) #section-home .gk-ph-title { font-size: 13px; font-weight: 800; color: var(--gk-ink, #0a0a0b); letter-spacing: -0.015em; } body:not(.ws-marcas-active) #section-home .gk-ph-sub { font-size: 11px; color: var(--gk-ink4, #a1a1aa); margin-top: 2px; font-weight: 500; } body:not(.ws-marcas-active) #section-home .gk-ph-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--gk-a, #5e2ced); text-decoration: none; flex-shrink: 0; transition: opacity var(--gk-t-fast); white-space: nowrap; } body:not(.ws-marcas-active) #section-home .gk-ph-link:hover { opacity: .72; } body:not(.ws-marcas-active) #section-home .gk-ph-link svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } body:not(.ws-marcas-active) #section-home .gk-panel-empty { padding: 28px 20px; text-align: center; color: var(--gk-ink4, #a1a1aa); font-size: 12.5px; font-weight: 500; } /* Tabla densa dentro del home */ body:not(.ws-marcas-active) #section-home .gk-dense-table { width: 100%; border-collapse: collapse; font-family: 'Geist', 'Inter', system-ui, sans-serif; } body:not(.ws-marcas-active) #section-home .gk-dense-table tbody td { font-size: 12.5px; color: var(--gk-ink, #0a0a0b); padding: 12px 16px; border-bottom: 1px solid var(--gk-ln, #e4e4e7); vertical-align: middle; } body:not(.ws-marcas-active) #section-home .gk-dense-table tbody tr:last-child td { border-bottom: none; } body:not(.ws-marcas-active) #section-home .gk-dense-table tbody tr { transition: background var(--gk-t-fast); cursor: pointer; } body:not(.ws-marcas-active) #section-home .gk-dense-table tbody tr:hover td { background: var(--gk-sur2, #f1f1f4); } /* Centros como rows compactas dentro del panel Actividad */ body:not(.ws-marcas-active) #section-home .gk-centros-list { padding: 6px 0; } .gk-centro-row { padding: 14px 18px; border-bottom: 1px solid var(--gk-ln, #e4e4e7); cursor: pointer; transition: background var(--gk-t-fast); } .gk-centro-row:last-child { border-bottom: none; } .gk-centro-row:hover { background: var(--gk-sur2, #f1f1f4); } .gk-centro-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .gk-centro-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .gk-centro-row-name { font-size: 13px; font-weight: 800; color: var(--gk-ink, #0a0a0b); letter-spacing: -0.015em; } .gk-centro-row-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--gk-ink4, #a1a1aa); font-family: var(--gk-mono, monospace); } .gk-centro-row-bar { padding-left: 16px; } .gk-centro-row-bar-track { height: 6px; background: var(--gk-sur2, #f1f1f4); border-radius: 999px; overflow: hidden; margin-bottom: 6px; } .gk-centro-row-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s var(--gk-ease); } .gk-centro-row-bar-meta { display: flex; align-items: baseline; gap: 4px; font-size: 11px; color: var(--gk-ink3, #71717a); } .gk-centro-row-bar-meta > span:first-child { font-size: 15px; } .gk-centro-row-bar-sub { margin-left: auto; font-size: 10.5px; color: var(--gk-ink4, #a1a1aa); text-transform: none; letter-spacing: 0.05em; font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════ F125 · LAUNCHER GRID + RAIL SIDEBAR + MÓDULOS MODALES Escritorio como launcher fullscreen · sidebar aparece como rail 88px cuando abre un módulo · cada sección como modal centrado con blur detrás. ═══════════════════════════════════════════════════════════════════════ */ /* Body state: cuando estamos en el launcher (section-home visible) */ body:not(.ws-marcas-active).gk-launcher-mode .app-layout { display: block !important; padding: 0 !important; max-width: none !important; margin: 0 !important; } body:not(.ws-marcas-active).gk-launcher-mode .sidebar { display: none !important; } body:not(.ws-marcas-active).gk-launcher-mode .main-content { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; background: var(--gk-bg, #f7f7fa); min-height: 100vh; } body:not(.ws-marcas-active).gk-launcher-mode .f30-topbar { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ F125d · HUB (Bienvenido a VIMEDIA) modernizado + fondo violeta consistente con login. FAB solo visible en dashboard-view (escritorio launcher). ═══════════════════════════════════════════════════════════════════════ */ /* Ocultar FAB fuera del escritorio — controlado por JS via body.gk-no-fab */ body.gk-no-fab .vm-fab, body.gk-no-fab .vm-fab-sheet { display: none !important; } /* F125L · Botón "Cerrar sesión" fijo arriba a la derecha */ .gk-logout-btn { position: fixed; top: 20px; right: 20px; z-index: 900; display: none; /* JS lo muestra en dashboard/launcher */ align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff; font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; letter-spacing: -0.005em; transition: background var(--gk-t-fast, 150ms) var(--gk-ease, cubic-bezier(.2,.8,.2,1)), transform var(--gk-t-fast) var(--gk-ease), border-color var(--gk-t-fast) var(--gk-ease); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } body.gk-logout-visible .gk-logout-btn { display: inline-flex; } .gk-logout-btn:hover { background: rgba(220, 38, 38, 0.85); border-color: rgba(220, 38, 38, 0.9); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35); } .gk-logout-btn:active { transform: translateY(0); } .gk-logout-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 640px) { .gk-logout-btn { top: 12px; right: 12px; padding: 8px 12px; font-size: 11.5px; } .gk-logout-btn span { display: none; } } /* F125h · Failsafe: TODOS los elementos del login SIEMPRE visibles y clickeables */ .login-screen-v2 .login-logo-btn, .login-screen-v2 .login-wordmark, .login-screen-v2 .login-wordmark .wm-l, .login-screen-v2 .login-hint, .login-screen-v2 .login-form-wrap, .login-screen-v2 .pin-shell, .login-screen-v2 .pin-input-single, .login-screen-v2 .login-submit, .login-screen-v2 .login-back, .login-screen-v2 .login-accent-line { opacity: 1 !important; transform: none !important; filter: none !important; } /* El input pill del PIN necesita poder recibir focus y no estar tapado */ .login-screen-v2 .pin-input-single { pointer-events: auto !important; cursor: text !important; position: relative; z-index: 3; } /* Placeholder shimmer no debe tapar el input */ .login-screen-v2 .pin-placeholder-shimmer { pointer-events: none !important; z-index: 1; } /* Respetar prefers-reduced-motion — quitar animaciones costosas */ @media (prefers-reduced-motion: reduce) { .login-screen-v2 .login-logo-btn, .login-screen-v2 .login-wordmark .wm-l, .login-orb { animation: none !important; } } /* F125k · Fondo plano #5e2ced en los 3 portales (login / hub / escritorio launcher) */ .gk-hub, body:not(.ws-marcas-active).gk-launcher-mode .main-content, body:not(.ws-marcas-active) #section-home.gk-launcher { background: #5e2ced !important; } /* También el login usa el mismo violeta plano (override del radial gradient viejo) */ body #login-view.login-screen-v2 { background: #5e2ced !important; } /* Escurecer los orbes del login para que no chocen con el fondo plano */ body #login-view.login-screen-v2 .login-orb-1 { opacity: .18; } body #login-view.login-screen-v2 .login-orb-2 { opacity: .12; } body:not(.ws-marcas-active) #section-home.gk-launcher { color: #ffffff; } /* Ajustar textos del launcher para fondo oscuro */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title, body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { color: #ffffff !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-sub { color: rgba(255, 255, 255, 0.75) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-footer, body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-item strong { color: rgba(255, 255, 255, 0.9) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-footer { color: rgba(255, 255, 255, 0.6) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-item strong { color: #ffffff !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-sep { color: rgba(255, 255, 255, 0.3) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-ok { color: #86efac !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-logout { color: #fca5a5 !important; } /* Inbox recent en fondo violeta: card blanca destacada */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { background: rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.18) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title { color: #ffffff !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title strong { color: #ffffff !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto { background: rgba(255, 255, 255, 0.9) !important; color: var(--gk-a, #5e2ced) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto:hover { background: #ffffff !important; } /* ── HUB (Bienvenido a VIMEDIA) — pantalla completa violeta ── */ .gk-hub { position: fixed; inset: 0; display: grid; place-items: center; padding: 40px 24px; overflow-y: auto; z-index: 100; font-family: 'Geist', 'Inter', system-ui, sans-serif; } .gk-hub.hidden { display: none !important; } .gk-hub-inner { width: 100%; max-width: 960px; display: flex; flex-direction: column; align-items: stretch; gap: 32px; } .gk-hub-hero { text-align: center; color: #ffffff; } .gk-hub-title { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 32px; font-weight: 900; letter-spacing: -0.03em; color: #ffffff; margin: 0 0 8px; } .gk-hub-sub { font-size: 14px; color: rgba(255, 255, 255, 0.75); margin: 0; font-weight: 500; } /* Grid de tiles: 2 columnas */ .gk-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 720px) { .gk-hub-grid { grid-template-columns: 1fr; } } /* F125k · Tile launcher compacto — icono centrado + título + subtítulo minimal */ .gk-hub-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 32px 24px 28px; background: rgba(255, 255, 255, 0.98); border: none; border-radius: 24px; cursor: pointer; font-family: 'Geist', 'Inter', system-ui, sans-serif; box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.35); transition: transform var(--gk-t-base, 250ms) var(--gk-ease), box-shadow var(--gk-t-base) var(--gk-ease); position: relative; overflow: hidden; } .gk-hub-tile:hover { transform: translateY(-4px); box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.45); } .gk-hub-tile:hover .gk-hub-tile-icon { transform: scale(1.06); } .gk-hub-tile:active { transform: translateY(-1px); } .gk-hub-tile-icon { width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center; margin: 0 auto 4px; box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.28); transition: transform var(--gk-t-base, 250ms) var(--gk-ease); } .gk-hub-tile-icon svg { width: 44px; height: 44px; stroke: #17123a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* KIT 28/07: un-acento — tiles blancas, ícono tinta (nada multicolor) */ .gk-hub-intecap .gk-hub-tile-icon { background: #ffffff; } .gk-hub-marcas .gk-hub-tile-icon { background: #ffffff; } .gk-hub-tile-title { font-size: 20px; font-weight: 900; letter-spacing: -0.025em; color: #0a0a0b; line-height: 1.1; } .gk-hub-tile-sub { font-size: 12.5px; line-height: 1.4; color: #71717a; font-weight: 600; letter-spacing: -0.005em; } /* Footer del hub: botones ghost */ .gk-hub-footer { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .gk-hub-footer-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff; font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: background var(--gk-t-fast) var(--gk-ease), transform var(--gk-t-fast) var(--gk-ease); letter-spacing: -0.005em; } .gk-hub-footer-btn:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .gk-hub-footer-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gk-hub-footer-danger { background: rgba(220, 38, 38, 0.2); border-color: rgba(252, 165, 165, 0.4); } .gk-hub-footer-danger:hover { background: rgba(220, 38, 38, 0.35); } /* F125c: garantizar que el banner viejo NUNCA aparece — reemplazado por gk-inbox-recent */ .gk-forever-hidden, body #alert-banner.gk-forever-hidden { position: absolute !important; left: -9999px !important; top: -9999px !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; opacity: 0 !important; } /* F125c · INBOX RECIENTE widget arriba del launcher hero */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { max-width: 1080px; margin: 8px auto 0; padding: 12px 16px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(94, 44, 237, 0.06), rgba(117, 206, 187, 0.05)); border: 1px solid rgba(94, 44, 237, 0.12); animation: gkInboxIn .4s cubic-bezier(.22, 1, .36, 1); } @keyframes gkInboxIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: 'Geist', 'Inter', system-ui, sans-serif; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: gkPulseDot 2s infinite; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title { font-size: 12.5px; font-weight: 700; color: var(--gk-ink, #0a0a0b); letter-spacing: -0.005em; flex: 1; display: flex; align-items: baseline; gap: 4px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title strong { font-family: var(--gk-mono, 'JetBrains Mono', monospace); font-weight: 900; color: var(--gk-a, #5e2ced); font-size: 14px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(94, 44, 237, 0.1); border: none; color: var(--gk-a, #5e2ced); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 800; cursor: pointer; letter-spacing: -0.005em; transition: background var(--gk-t-fast) var(--gk-ease); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto:hover { background: rgba(94, 44, 237, 0.18); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-goto svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* Lista de chips scrolleable horizontal */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-list { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scroll-snap-type: x mandatory; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-list::-webkit-scrollbar { display: none; } /* Chip individual — pill compacta moderna */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--gk-sur, #ffffff); border: 1px solid var(--gk-ln, #e4e4e7); color: var(--gk-ink, #0a0a0b); font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; scroll-snap-align: start; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform var(--gk-t-fast) var(--gk-ease), box-shadow var(--gk-t-fast) var(--gk-ease), border-color var(--gk-t-fast) var(--gk-ease); max-width: 320px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip:hover { transform: translateY(-1px); border-color: var(--gk-a, #5e2ced); box-shadow: 0 4px 12px -2px rgba(94, 44, 237, 0.2); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-centro { font-size: 10.5px; font-weight: 800; color: var(--gk-ink3, #71717a); letter-spacing: 0.03em; text-transform: none; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-curso { font-weight: 700; color: var(--gk-ink, #0a0a0b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-ago { font-family: var(--gk-mono, monospace); font-size: 10.5px; font-weight: 700; color: var(--gk-ink4, #a1a1aa); padding: 2px 6px; border-radius: 6px; background: var(--gk-sur2, #f1f1f4); } @media (max-width: 700px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { margin: 4px 8px 0; padding: 10px 12px 12px; border-radius: 14px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-chip-curso { max-width: 140px; } } /* ── LAUNCHER (#section-home rediseñado) ── */ body:not(.ws-marcas-active) #section-home.gk-launcher { display: flex; flex-direction: column; min-height: 100vh; padding: 40px 40px 24px; background: var(--gk-bg, #f7f7fa); max-width: none; margin: 0; animation: gkLauncherIn .4s cubic-bezier(.22, 1, .36, 1); } @keyframes gkLauncherIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } /* Hero del launcher */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-hero { text-align: center; margin: 40px auto 40px; max-width: 640px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 36px; font-weight: 900; letter-spacing: -0.03em; color: var(--gk-ink, #0a0a0b); line-height: 1.1; margin: 0 0 8px; background: none; padding: 0; border: none; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-sub { font-size: 15px; color: var(--gk-ink3, #71717a); font-weight: 500; margin: 0; } /* Grid 6 columnas × 2 filas */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { display: grid; grid-template-columns: repeat(6, 140px); gap: 30px; justify-content: center; margin: 0 auto; max-width: 1200px; } /* Tile individual */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt { display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; font-family: 'Geist', 'Inter', system-ui, sans-serif; transition: transform var(--gk-t-base, 250ms) var(--gk-ease); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:hover { transform: translateY(-4px); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:hover .gk-lt-tile { box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.24), 0 4px 12px rgba(15, 23, 42, 0.08); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:active .gk-lt-tile { transform: scale(0.96); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { position: relative; width: 140px; height: 140px; border-radius: 24px; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04); transition: box-shadow var(--gk-t-base) var(--gk-ease), transform var(--gk-t-fast) var(--gk-ease); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 46px; height: 46px; stroke: #ffffff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile .gk-lt-ext { position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; stroke-width: 2.4; opacity: 0.85; } /* Label */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { font-size: 12.5px; font-weight: 800; color: var(--gk-ink, #0a0a0b); letter-spacing: -0.01em; text-align: center; line-height: 1.2; } /* Badge (contador) */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge { position: absolute; top: -6px; right: -6px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: #ef4444; color: #ffffff; font-family: var(--gk-mono, monospace); font-size: 12px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.5); border: 3px solid var(--gk-bg, #f7f7fa); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge:empty, body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge[data-empty="1"] { display: none; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge-count { background: rgba(255, 255, 255, 0.35); color: #ffffff; border-color: transparent; box-shadow: none; top: 12px; right: 12px; padding: 0 6px; min-width: 22px; height: 22px; font-size: 11px; } /* Gradientes por tile (paleta obligatoria + acentos por categoría) */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-bandeja .gk-lt-tile { background: #7c3aed; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-publicadas .gk-lt-tile { background: #10b981; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-calendario .gk-lt-tile { background: #3b82f6; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-catalogo .gk-lt-tile { background: #f59e0b; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-registro .gk-lt-tile { background: #0ea5e9; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-galerias .gk-lt-tile { background: #ec4899; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-nueva .gk-lt-tile { background: #a78bfa; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-nota .gk-lt-tile { background: #f472b6; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-republicar .gk-lt-tile { background: #75cebb; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-config .gk-lt-tile { background: #3f3f46; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-marcas .gk-lt-tile { background: #818cf8; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-catalogo-pub .gk-lt-tile { background: #a1a1aa; } /* Footer del launcher */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-footer { margin-top: auto; padding: 24px 0 8px; text-align: center; font-size: 12px; color: var(--gk-ink3, #71717a); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-item strong { font-family: var(--gk-mono, monospace); font-weight: 800; color: var(--gk-ink, #0a0a0b); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-sep { color: var(--gk-ln2, #d4d4d8); } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-ok { color: #16a34a; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-ok svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-logout { color: #dc2626; font-weight: 700; text-decoration: none; cursor: pointer; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lf-logout:hover { text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════ MODO MÓDULO ABIERTO — sidebar rail 88px + módulo centrado con backdrop ═══════════════════════════════════════════════════════════════════════ */ /* Cuando NO estamos en launcher (algún section abierto) */ body:not(.ws-marcas-active).gk-module-mode { overflow: hidden; } body:not(.ws-marcas-active).gk-module-mode #section-home { filter: blur(6px); pointer-events: none; user-select: none; } body:not(.ws-marcas-active).gk-module-mode .app-layout { position: relative; } /* Sidebar convertido a RAIL 88px cuando módulo abierto */ body:not(.ws-marcas-active).gk-module-mode .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 88px !important; min-width: 88px !important; max-width: 88px !important; padding: 16px 8px !important; background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-right: 1px solid var(--gk-ln, #e4e4e7) !important; z-index: 800 !important; overflow-y: auto; overflow-x: hidden; display: flex !important; flex-direction: column !important; gap: 8px; align-items: center !important; } /* Ocultamos la sidebar-nav completa en modo rail — el rail usa su propio nav */ body:not(.ws-marcas-active).gk-module-mode .sidebar > *:not(.gk-rail), body:not(.ws-marcas-active).gk-module-mode .sidebar .sidebar-brand, body:not(.ws-marcas-active).gk-module-mode .sidebar .sidebar-nav-intecap, body:not(.ws-marcas-active).gk-module-mode .sidebar .sidebar-footer, body:not(.ws-marcas-active).gk-module-mode .sidebar .workspace-switcher { display: none !important; } /* Rail nav (contenido nuevo dentro del sidebar) */ .gk-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .gk-rail-back { width: 60px; height: 60px; border-radius: 16px; background: var(--gk-sur2, #f1f1f4); border: none; cursor: pointer; display: grid; place-items: center; color: var(--gk-ink2, #3f3f46); transition: background var(--gk-t-fast) var(--gk-ease), color var(--gk-t-fast) var(--gk-ease); margin-bottom: 4px; } .gk-rail-back svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .gk-rail-back:hover { background: var(--gk-a-soft, #eee8fd); color: var(--gk-a, #5e2ced); } .gk-rail-back-label { font-size: 9px; font-weight: 800; color: var(--gk-ink4, #a1a1aa); letter-spacing: 0.08em; text-transform: none; margin-bottom: 8px; margin-top: -4px; } .gk-rail-divider { width: 40px; height: 1px; background: var(--gk-ln, #e4e4e7); margin: 4px 0; } .gk-rail-item { position: relative; width: 60px; height: 60px; border-radius: 16px; border: none; cursor: pointer; display: grid; place-items: center; background: transparent; transition: background var(--gk-t-fast) var(--gk-ease), transform var(--gk-t-fast) var(--gk-ease), box-shadow var(--gk-t-fast) var(--gk-ease); } .gk-rail-item svg { width: 24px; height: 24px; stroke: #6a6c72; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--gk-t-fast) var(--gk-ease); } .gk-rail-item:hover { background: #efeff1; } .gk-rail-item:hover svg { stroke: #111214; } .gk-rail-item:active { transform: scale(.94); } .gk-rail-item.gk-active { background: var(--gk-a, #5e2ced); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--gk-a, #5e2ced) 60%, transparent); } .gk-rail-item.gk-active svg { stroke: #ffffff; } .gk-rail-item .gk-rail-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #ffffff; font-family: var(--gk-mono, monospace); font-size: 10px; font-weight: 900; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.96); } /* KIT 28/07 · un-acento: riel neutro, la ACTIVA lleva el acento (los 10 colores por módulo quedaron atrás — mismo criterio que el launcher blanco) */ /* Main content en modo módulo: fondo con backdrop blur */ body:not(.ws-marcas-active).gk-module-mode .main-content { position: fixed !important; top: 0 !important; left: 88px !important; right: 0 !important; bottom: 0 !important; padding: 40px !important; overflow-y: auto; z-index: 700 !important; background: rgba(10, 10, 15, 0.35); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); max-width: none !important; margin: 0 !important; } @media (max-width: 700px) { body:not(.ws-marcas-active).gk-module-mode .main-content { left: 0 !important; padding: 0 !important; } body:not(.ws-marcas-active).gk-module-mode .sidebar { display: none !important; } } /* F125 FIX: ocultar F30 widgets en modo módulo (topbar, notif, cmd) */ body:not(.ws-marcas-active).gk-module-mode .f30-topbar, body:not(.ws-marcas-active).gk-module-mode .f30-notif-panel, body:not(.ws-marcas-active).gk-module-mode .f30-cmd, body:not(.ws-marcas-active).gk-module-mode .f30-mobile-bottom { display: none !important; } /* F125 FIX: Solo las SECTIONS (id^=section-) como modal centrado — NO afecta .f30-topbar u otros divs sueltos */ body:not(.ws-marcas-active).gk-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) { background: var(--gk-sur, #ffffff) !important; border-radius: 20px !important; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.32), 0 4px 16px -4px rgba(0, 0, 0, 0.16) !important; padding: 32px 36px !important; /* F132: fluido — 1280 de piso, crece con el monitor hasta 2000 */ max-width: clamp(1280px, calc(100vw - 260px), 2000px) !important; width: 100% !important; margin: 0 auto !important; min-height: calc(100vh - 80px); animation: gkModalIn .28s cubic-bezier(.22, 1, .36, 1); position: relative; z-index: 1; } @keyframes gkModalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* F125 FIX: neutralizar max-width viejo de section-pedidos (F120 puso 1400 con margin auto) */ body:not(.ws-marcas-active).gk-module-mode #section-pedidos.gk-in-module, body:not(.ws-marcas-active).gk-module-mode #section-pedidos:not(.hidden) { max-width: clamp(1280px, calc(100vw - 260px), 2000px) !important; /* F132 */ } @media (max-width: 700px) { body:not(.ws-marcas-active).gk-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) { border-radius: 0 !important; padding: 16px !important; min-height: 100vh; } } /* Botón cerrar del módulo (aparece arriba derecha del modal) */ .gk-module-close { position: fixed; top: 24px; right: 24px; z-index: 750; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border: none; color: var(--gk-ink2, #3f3f46); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transition: background var(--gk-t-fast) var(--gk-ease), color var(--gk-t-fast) var(--gk-ease), transform var(--gk-t-fast) var(--gk-ease); } .gk-module-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; } .gk-module-close:hover { background: #dc2626; color: #ffffff; transform: scale(1.06); } /* Responsive del launcher */ @media (max-width: 1000px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { grid-template-columns: repeat(4, 140px); gap: 24px; } } @media (max-width: 700px) { body:not(.ws-marcas-active) #section-home.gk-launcher { padding: 24px 16px 16px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-hero { margin: 16px auto 24px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title { font-size: 28px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { grid-template-columns: repeat(3, 108px); gap: 18px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { width: 108px; height: 108px; border-radius: 20px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 38px; height: 38px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { font-size: 11.5px; } } /* ============================================================ F127g · MOBILE COMPACTO TIPO APP (07/09/26) ============================================================ Fix pedido por usuario: en mobile todo se veía muy grande, con espacios grises, buscador cuadrado, chips grandes, cards con mucho vacío. Objetivo: super ajustado tipo app nativa. Aplica a portal empleados (gk-module-mode) + centros (gk-centro-module-mode). ============================================================ */ @media (max-width: 640px) { /* (Las reglas de layout sidebar/main-content viven en F127i — bottom bar. Acá solo quedan los compactos de tipografía, inputs, chips y cards.) */ /* Hero Bandeja/Publicadas/Catálogo/etc compacto */ .vm-bandeja-hero, .vm-catalogo-hero, .vm-publicadas-hero, .vm-registro-hero, .vm-galerias-hero { padding-bottom: 10px !important; margin-bottom: 10px !important; gap: 8px !important; } .vm-bandeja-title, .vm-catalogo-title, .vm-publicadas-title, .vm-registro-title, .vm-galerias-title { font-size: 18px !important; gap: 6px !important; letter-spacing: -0.02em !important; } .vm-bandeja-count-chip { font-size: 11px !important; padding: 1px 7px !important; } .vm-bandeja-actions, .vm-catalogo-actions { gap: 6px !important; } /* View toggle mini (lista/grid) */ .vm-view-toggle { padding: 3px !important; } .vm-view-btn { width: 28px !important; height: 26px !important; font-size: 12px !important; } .vm-btn-icon { width: 32px !important; height: 32px !important; font-size: 13px !important; padding: 0 !important; } /* Inputs búsqueda compactos + redondeados como pill (no cuadrado) */ #section-pedidos .input, #section-solicitudes .input, #section-catalogo .input, #section-publicadas .input, #section-galerias .input, #section-registro .input, #section-republicar .input, .vm-bandeja-search .input, .vm-search-input, #search-input, #catalogo-search, #publicadas-search, #galeria-search, #catalog-search, #republicar-search, #galeria-inline-search { height: 38px !important; min-height: 38px !important; padding: 8px 14px 8px 36px !important; border-radius: 12px !important; font-size: 13.5px !important; box-shadow: none !important; } /* Chips filtros mucho más compactos */ body:not(.ws-marcas-active) #section-pedidos .chip, body:not(.ws-marcas-active) #section-catalogo .chip, body:not(.ws-marcas-active) #section-publicadas .chip, body:not(.ws-marcas-active) .vm-chips-row .chip, body:not(.ws-marcas-active) .chips .chip { padding: 4px 10px !important; font-size: 11.5px !important; height: 26px !important; min-height: 26px !important; line-height: 1.2 !important; border-radius: 999px !important; font-weight: var(--vm-fw-sb, 600) !important; } .vm-chips-row { gap: 5px !important; row-gap: 6px !important; } .vm-chips-sep { height: 16px !important; margin: 0 2px !important; } /* (Cards y grids: ver F127i — altura fija 168px, sin aspect-ratio) */ /* FAB (+ Nueva) más pequeño y arriba del bottom-nav si existe */ #vm-fab-new-centro, #vm-fab-new, .vm-fab { width: 52px !important; height: 52px !important; bottom: 18px !important; right: 18px !important; font-size: 18px !important; } } /* Extra compact para pantallas muy chicas (iPhone SE / mini) */ @media (max-width: 380px) { #section-publicadas .sol-grid, #section-registro .grid, #section-galerias .grid { grid-template-columns: 1fr !important; } .vm-bandeja-title { font-size: 17px !important; } } /* ============================================================ F127i · MOBILE = APP REAL (bottom bar + un solo botón X) ============================================================ Reemplaza el intento F127h. Diseño coherente en mobile: - Launcher: pantalla de inicio con tiles (ya funciona). - Módulo abierto: BOTTOM BAR con el rail de iconos (tipo app iOS), contenido full-width arriba, X para volver al escritorio. - Cerrar sesión SOLO en el launcher (nunca choca con la X). ============================================================ */ /* Logout nunca en modo módulo (desktop e móvil): la X es el único botón flotante */ body:not(.ws-marcas-active).gk-module-mode .gk-logout-btn { display: none !important; } @media (max-width: 700px) { /* ─── 1 · BOTTOM BAR: el rail pasa abajo, horizontal, scrolleable ─── */ body:not(.ws-marcas-active).gk-module-mode .sidebar { display: flex !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 60px !important; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important; flex-direction: row !important; align-items: center !important; gap: 0 !important; transform: none !important; border-right: none !important; border-top: 1px solid var(--gk-ln, #e4e4e7) !important; box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10) !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; -ms-overflow-style: none; } body:not(.ws-marcas-active).gk-module-mode .sidebar::-webkit-scrollbar { display: none; } /* Rail en fila — margin auto: centrado si cabe, scroll desde el inicio si no (justify-content center con overflow recortaba el primer ícono — F129.2) */ body:not(.ws-marcas-active).gk-module-mode .gk-rail { flex-direction: row !important; align-items: center !important; width: max-content !important; margin: 0 auto !important; gap: 8px !important; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-back { width: 46px !important; height: 46px !important; border-radius: 14px !important; margin: 0 !important; flex: 0 0 auto; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-back svg { width: 19px !important; height: 19px !important; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-back-label { display: none !important; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-divider { width: 1px !important; height: 28px !important; margin: 0 2px !important; flex: 0 0 auto; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-item { width: 46px !important; height: 46px !important; border-radius: 14px !important; flex: 0 0 auto; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-item svg { width: 20px !important; height: 20px !important; } /* ─── 2 · Contenido full-width con aire para el bottom bar ─── */ body:not(.ws-marcas-active).gk-module-mode .main-content { left: 0 !important; padding: 0 !important; } body:not(.ws-marcas-active).gk-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) { border-radius: 0 !important; padding: 14px 12px 96px !important; /* 96px de aire para el bottom bar */ min-height: 100vh !important; max-width: 100% !important; box-shadow: none !important; } /* X compacta */ .gk-module-close { top: 10px !important; right: 10px !important; width: 36px !important; height: 36px !important; } /* ─── 3 · Sin buscador global ni hamburger (cada sección tiene el suyo) ─── */ body:not(.ws-marcas-active) .smart-search-bar, body:not(.ws-marcas-active) #mobile-toggle, body:not(.ws-marcas-active) .mobile-toggle, body:not(.ws-marcas-active) .sidebar-overlay { display: none !important; } /* ─── 4 · BANDEJA en mobile: SIEMPRE cuadrícula de cards ─── El grid solo aplica a la vista cards — aplicarlo a la vista tabla partía la tabla a la mitad y dejaba un cuadro blanco (F129.2). El JS fuerza la vista cards al iniciar en mobile. */ .vm-view-toggle { display: none !important; } /* sin toggle en mobile: una sola vista */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Fallback si quedara en vista tabla: full-width con scroll propio, sin partirse */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-table { display: block !important; width: 100% !important; overflow-x: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* FAB + oculto dentro de módulos en mobile (chocaba con el bottom bar) — en el escritorio/launcher sigue visible como siempre */ body:not(.ws-marcas-active).gk-module-mode #vm-fab-new, body:not(.ws-marcas-active).gk-module-mode .vm-fab { display: none !important; } /* Cards de altura FIJA compacta — nunca gigantes, nunca cortadas */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card { aspect-ratio: auto !important; height: 168px !important; min-height: 168px !important; max-height: 168px !important; border-radius: 14px !important; overflow: hidden !important; cursor: pointer; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card:not(.sol-card-has-bg) { background: #fbfaff !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-title { font-size: 12px !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-id, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-meta { font-size: 10px !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-badge { font-size: 9px !important; padding: 2px 7px !important; } /* Fuera los botones CTA dentro de la card (quedaban cortados) — tap en la card abre */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-actions, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-cta, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-btn-row { display: none !important; } /* Hero de sección en una sola línea compacta */ .vm-bandeja-hero { border-bottom: none !important; padding-bottom: 4px !important; margin-bottom: 8px !important; gap: 8px !important; flex-wrap: nowrap !important; } .vm-bandeja-filters { margin-bottom: 8px !important; } .vm-chips-row { overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 2px !important; scrollbar-width: none; -ms-overflow-style: none; } .vm-chips-row::-webkit-scrollbar { display: none; } .vm-chips-row .chip { flex-shrink: 0 !important; } /* Grids de otras secciones: 2 cols compactas con altura fluida */ #section-publicadas .sol-grid, #section-registro .grid, #section-galerias .grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } #section-publicadas .sol-card { aspect-ratio: auto !important; height: 168px !important; border-radius: 14px !important; } } /* Pantallas muy chicas: 1 columna, cards un poco más altas */ @media (max-width: 380px) { body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards { grid-template-columns: 1fr !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card { height: 150px !important; min-height: 150px !important; max-height: 150px !important; } } /* ============================================================ F128 · CONFIGURACIÓN EN 3 TABS (Generales / IA / Centros) HTML reorganizado en sidebar.php — IDs y JS de guardado intactos. Los sub-tabs de centro filtran con data-centro-activo + :has(). ============================================================ */ /* Tabs principales pill */ .cfg-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .cfg-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--vm-n-200, #e4e4e7); background: var(--vm-n-0, #fff); color: var(--vm-n-600, #52525b); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .16s ease; letter-spacing: -0.01em; } .cfg-tab i { font-size: 13px; } .cfg-tab:hover { border-color: var(--vm-violet, #5e2ced); color: var(--vm-violet, #5e2ced); background: var(--vm-v-08, rgba(94, 44, 237, 0.06)); } .cfg-tab.active { background: #5e2ced; border-color: transparent; color: #ffffff; box-shadow: 0 6px 16px -6px rgba(94, 44, 237, 0.5); } /* Sub-tabs de centro */ .cfg-centro-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .cfg-centro-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--vm-n-200, #e4e4e7); background: var(--vm-n-0, #fff); color: var(--vm-n-600, #52525b); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .16s ease; } .cfg-ct-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .cfg-centro-tab:hover { border-color: var(--vm-n-400, #a1a1aa); color: var(--vm-n-900, #18181b); } .cfg-centro-tab.active { border-width: 2px; color: var(--vm-n-900, #18181b); background: var(--vm-n-50, #fafafa); } .cfg-centro-tab.active[data-cfg-centro-tab="coban"] { border-color: #14b8a6; background: #f0fdfa; } .cfg-centro-tab.active[data-cfg-centro-tab="salama"] { border-color: #6366f1; background: #eef2ff; } .cfg-centro-tab.active[data-cfg-centro-tab="peten"] { border-color: #f97316; background: #fff7ed; } /* Filtro por centro activo: elementos data-cfg-centro que NO son del activo se ocultan */ #cfg-tab-centros[data-centro-activo="coban"] [data-cfg-centro]:not([data-cfg-centro="coban"]), #cfg-tab-centros[data-centro-activo="salama"] [data-cfg-centro]:not([data-cfg-centro="salama"]), #cfg-tab-centros[data-centro-activo="peten"] [data-cfg-centro]:not([data-cfg-centro="peten"]) { display: none !important; } /* Suspensión: solo la fila del centro activo (las filas llevan button[data-susp-id]) */ #cfg-tab-centros[data-centro-activo="coban"] #susp-list > div:has([data-susp-id]):not(:has([data-susp-id="coban"])), #cfg-tab-centros[data-centro-activo="salama"] #susp-list > div:has([data-susp-id]):not(:has([data-susp-id="salama"])), #cfg-tab-centros[data-centro-activo="peten"] #susp-list > div:has([data-susp-id]):not(:has([data-susp-id="peten"])) { display: none !important; } /* Marcos: el select interno de centro se oculta (los sub-tabs lo manejan) */ #cfg-tab-centros #cfg-marcos-card .form-group:has(#cfg-marcos-centro) { display: none !important; } /* Registro: la fila interna de tabs se oculta (los sub-tabs hacen click programático) */ #cfg-tab-centros #cfg-registro-card > div:has(.registro-pub-tab) { display: none !important; } /* Compactar cards de config */ #section-config .config-card { padding: 18px 20px !important; margin-bottom: 14px !important; border-radius: 14px !important; } #section-config .config-card-title { font-size: 14px !important; margin-bottom: 10px !important; } #section-config .config-card p, #section-config .config-card > div[style*="font-size:12px"] { line-height: 1.45 !important; } /* ============================================================ F129.4 · BUSCADOR INTELIGENTE EN EL ESCRITORIO (09/07/26) El buscador global (#global-search: busca cursos, fichas, diseños y NAVEGA al lugar — F22) quedó huérfano: F30 lo ocultó a favor del topbar y F125 ocultó el topbar en el launcher. Se restaura como pill glass centrado arriba del escritorio. Desktop only — en mobile cada sección tiene su buscador. ============================================================ */ @media (min-width: 701px) { body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar { display: flex !important; position: fixed !important; top: 18px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 850 !important; width: min(600px, 62vw) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar > div { flex: 1 !important; max-width: none !important; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar #global-search { height: 46px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); color: #ffffff !important; font-size: 14px !important; padding: 0 18px 0 44px !important; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25) !important; transition: background .18s ease, border-color .18s ease; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar #global-search::placeholder { color: rgba(255, 255, 255, 0.65) !important; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar #global-search:focus { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.5) !important; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35) !important; } body:not(.ws-marcas-active).gk-launcher-mode #smart-search-bar .fa-magnifying-glass { color: rgba(255, 255, 255, 0.8) !important; left: 18px !important; } body:not(.ws-marcas-active).gk-launcher-mode #global-search-results { border-radius: 16px !important; box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45) !important; margin-top: 8px !important; overflow: hidden; } } /* ============================================================ F130 · BANDEJA UNIFICADA — RAIL DE GRUPOS (09/07/26) Una sola vista: rail lateral [En proceso | Publicadas]. Publicadas agrupa por familia (patrón F59A) — nunca fichas repetidas. Los chips de estado solo aplican a "En proceso". ============================================================ */ .vm-bandeja-body { display: block; } /* F130c · Segmented control de grupos en el hero (reemplaza el rail lateral) */ .vm-grupo-segment { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--vm-n-100, #f4f4f5); border: 1px solid var(--vm-n-150, #e5e5eb); } .vm-side-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: none; border-radius: 999px; background: transparent; color: var(--vm-n-600, #52525b); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; transition: all .15s ease; } .vm-side-btn i { font-size: 13px; width: 16px; text-align: center; } .vm-side-btn:hover { background: var(--vm-v-08, rgba(94,44,237,.06)); color: var(--vm-violet, #5e2ced); } .vm-side-btn.active { background: var(--vm-violet, #5e2ced); color: #ffffff; box-shadow: 0 6px 16px -6px rgba(94, 44, 237, 0.5); } .vm-side-count { margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--vm-n-100, #f4f4f5); color: var(--vm-n-600, #52525b); } .vm-side-btn.active .vm-side-count { background: rgba(255, 255, 255, 0.22); color: #ffffff; } /* Chips de estado ocultos cuando el grupo es Publicadas (no aplican) */ #section-pedidos[data-grupo="publicadas"] #pedidos-estado-chips, #section-pedidos[data-grupo="publicadas"] .vm-chips-sep { display: none !important; } /* Mobile: segmented ocupa su fila completa bajo el título */ @media (max-width: 700px) { .vm-grupo-segment { width: 100%; } .vm-side-btn { flex: 1; justify-content: center; padding: 9px 10px; font-size: 12px; } } /* ============================================================ F130b · FILTROS CON JERARQUÍA Y LÓGICA (09/07/26) Grupo CENTRO: activo = color sólido del centro. Grupo ETAPA: activo = tinte suave del color de la etapa. Orden de etapas = flujo real del sistema. ============================================================ */ .vm-bandeja-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .vm-filter-group { display: flex; align-items: center; gap: 10px; } .vm-filter-label { flex-shrink: 0; width: 46px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: none; color: var(--vm-n-400, #a1a1aa); } .vm-filter-group .vm-chips-row { flex: 1; } /* Etapas: chips un paso más discretos que los centros */ #section-pedidos #pedidos-estado-chips .chip { font-size: 12px !important; padding: 4px 11px !important; border-style: solid !important; } #section-pedidos #pedidos-estado-chips .chip.active { border-style: solid !important; } /* CENTRO activo → color sólido del centro (identidad) */ #section-pedidos #bandeja-centro-chips .chip.active[data-centro="todos"] { background: var(--vm-violet, #5e2ced) !important; border-color: var(--vm-violet, #5e2ced) !important; color: #ffffff !important; } #section-pedidos #bandeja-centro-chips .chip.active[data-centro="coban"] { background: #14b8a6 !important; border-color: #14b8a6 !important; color: #ffffff !important; } #section-pedidos #bandeja-centro-chips .chip.active[data-centro="salama"] { background: #6366f1 !important; border-color: #6366f1 !important; color: #ffffff !important; } #section-pedidos #bandeja-centro-chips .chip.active[data-centro="peten"] { background: #f97316 !important; border-color: #f97316 !important; color: #ffffff !important; } #section-pedidos #bandeja-centro-chips .chip.active .vm-centro-dot { background: #ffffff !important; } /* ETAPA activa → tinte suave del color de la etapa (se distingue del centro) */ #section-pedidos #pedidos-estado-chips .chip.active[data-estado="todos"] { background: var(--vm-n-900, #18181b) !important; border-color: var(--vm-n-900, #18181b) !important; color: #ffffff !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="recibido"] { background: #fee2e2 !important; border-color: #ef4444 !important; color: #991b1b !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="en_diseno"] { background: #fef9c3 !important; border-color: #eab308 !important; color: #854d0e !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="en_revision"] { background: #dbeafe !important; border-color: #3b82f6 !important; color: #1e40af !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="revision_mercadeo"] { background: #ede9fe !important; border-color: #8b5cf6 !important; color: #5b21b6 !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="cambios_mercadeo"] { background: #ffedd5 !important; border-color: #f97316 !important; color: #9a3412 !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="aprobado"] { background: #dcfce7 !important; border-color: #22c55e !important; color: #166534 !important; } #section-pedidos #pedidos-estado-chips .chip.active[data-estado="rechazado"] { background: #f4f4f5 !important; border-color: #71717a !important; color: #3f3f46 !important; } /* Mobile: labels arriba de cada fila (no al lado) */ @media (max-width: 700px) { .vm-filter-group { flex-direction: column; align-items: flex-start; gap: 4px; } .vm-filter-label { width: auto; } } /* ============================================================ F130d · CENTROS CENTRADOS CON SU COLOR (09/07/26) Fila de centros centrada bajo el segmented; cada botón lleva la identidad de su centro también en reposo. Etapas quedan abajo como están. ============================================================ */ .vm-filter-group-centros { justify-content: center; } .vm-filter-group-centros .vm-chips-row { flex: 0 1 auto; justify-content: center; } #section-pedidos #bandeja-centro-chips .chip { font-weight: 800 !important; padding: 7px 18px !important; border-width: 1.5px !important; } /* Identidad de color en reposo */ #section-pedidos #bandeja-centro-chips .chip[data-centro="todos"] { border-color: rgba(94, 44, 237, 0.4) !important; color: var(--vm-violet, #5e2ced) !important; } #section-pedidos #bandeja-centro-chips .chip[data-centro="coban"] { border-color: rgba(20, 184, 166, 0.5) !important; color: #0f766e !important; } #section-pedidos #bandeja-centro-chips .chip[data-centro="salama"] { border-color: rgba(99, 102, 241, 0.5) !important; color: #4338ca !important; } #section-pedidos #bandeja-centro-chips .chip[data-centro="peten"] { border-color: rgba(249, 115, 22, 0.5) !important; color: #c2410c !important; } /* Activo: color sólido (las reglas F130b siguen mandando el fondo); este bloque solo asegura texto blanco encima */ #section-pedidos #bandeja-centro-chips .chip.active { color: #ffffff !important; } /* ============================================================ F133 · RAIL AJUSTADO A LA PANTALLA (10/07/26) Los íconos del rail se centran verticalmente cuando sobra altura (margin:auto — con poca altura vuelve al inicio y scrollea, sin recortes) y escalan en monitores grandes. ============================================================ */ body:not(.ws-marcas-active).gk-module-mode .gk-rail { margin-top: auto; margin-bottom: auto; } @media (min-width: 1600px) and (min-height: 860px) { body:not(.ws-marcas-active).gk-module-mode .sidebar { width: 96px !important; min-width: 96px !important; max-width: 96px !important; } body:not(.ws-marcas-active).gk-module-mode .main-content { left: 96px !important; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-back, body:not(.ws-marcas-active).gk-module-mode .gk-rail-item { width: 64px; height: 64px; border-radius: 18px; } body:not(.ws-marcas-active).gk-module-mode .gk-rail-item svg { width: 26px; height: 26px; } } /* ============================================================ F134 · ESCRITORIO EMPLEADOS AJUSTADO A PANTALLAS GRANDES (10/07/26) El launcher quedaba chico y arriba, con la última fila de tiles descentrada y vacío abajo. Conjunto centrado verticalmente, filas de tiles siempre centradas (flex) y escala por tamaño. ============================================================ */ /* El conjunto (inbox + hero + tiles + footer) se centra en la altura */ body:not(.ws-marcas-active) #section-home.gk-launcher { justify-content: center; } /* Tiles como flex centrado: la fila incompleta (4 de 10) queda CENTRADA, no colgando a la izquierda como con grid de 6 columnas */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1200px; } /* ≥1200px: un paso más grande */ @media (min-width: 1200px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-hero { margin-bottom: 44px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title { font-size: 42px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { gap: 36px 44px; max-width: 1280px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { width: 158px; height: 158px; border-radius: 28px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 52px; height: 52px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { font-size: 14px; } } /* ≥1600px: escala completa — 6 tiles por fila bien anchos, hero grande */ @media (min-width: 1600px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-title { font-size: 46px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-sub { font-size: 16px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-launcher-grid { gap: 44px 56px; max-width: 1560px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { width: 176px; height: 176px; border-radius: 32px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 58px; height: 58px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-label { font-size: 15px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { max-width: 1100px; margin-left: auto; margin-right: auto; } } /* Módulos: llenar más el ancho en monitores grandes (afina F132) */ body:not(.ws-marcas-active).gk-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) { max-width: clamp(1280px, calc(100vw - 200px), 2200px) !important; } body:not(.ws-marcas-active).gk-module-mode #section-pedidos.gk-in-module, body:not(.ws-marcas-active).gk-module-mode #section-pedidos:not(.hidden) { max-width: clamp(1280px, calc(100vw - 200px), 2200px) !important; } /* ══════════════════════════════════════════════════════════════════════════ HEADER B · backport del SaaS (22/07/26) — iconos sin texto, fecha compacta, lupa colapsable con overlay, grillas centradas (gated), tiles -20% + hover. ══════════════════════════════════════════════════════════════════════════ */ .gk-logout-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; } .gk-logout-btn span { display: none; } .gk-logout-btn svg { width: 18px; height: 18px; } .gk-topbar-date { position: fixed; top: 20px; right: 74px; z-index: 900; display: none; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); pointer-events: none; white-space: nowrap; } body.gk-logout-visible .gk-topbar-date { display: inline-flex; } @media (max-width: 560px) { .gk-topbar-date { display: none !important; } } /* Lupa: el buscador del launcher colapsa a icono (arriba-izquierda; INTECAP no tiene botón Menú) */ .gk-lupa-btn { position: fixed; top: 20px; left: 20px; z-index: 900; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); transition: background .2s; } .gk-lupa-btn:hover { background: rgba(255,255,255,.24); } .gk-lupa-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; } body:not(.ws-marcas-active).gk-launcher-mode.gk-logout-visible .gk-lupa-btn { display: inline-flex; } body:not(.ws-marcas-active).gk-launcher-mode:not(.gk-search-open) #smart-search-bar { display: none !important; } /* Al abrir: buscador AL CENTRO y lo de atrás desenfocado */ body.gk-search-open::before { content: ''; position: fixed; inset: 0; z-index: 845; background: rgba(23, 18, 58, 0.38); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body:not(.ws-marcas-active).gk-launcher-mode.gk-search-open #smart-search-bar { top: 26vh !important; width: min(640px, 92vw) !important; z-index: 850 !important; } body:not(.ws-marcas-active).gk-launcher-mode.gk-search-open #smart-search-bar #global-search { height: 54px !important; font-size: 15px !important; } /* Tira de nuevas COMPACTA (una línea, sin caja grande) */ body:not(.ws-marcas-active) #section-home.gk-launcher .gk-inbox-recent { max-width: 640px; margin: 4px auto 26px; padding: 8px 14px !important; border-radius: 999px; border: none !important; background: rgba(255,255,255,.10) !important; display: flex; align-items: center; gap: 10px; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-head { margin: 0 !important; flex-shrink: 0; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-title { font-size: 12px !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-ir-list { margin: 0 !important; } /* Grilla del launcher CENTRADA verticalmente — SOLO en modo launcher (en module-mode el launcher es fondo borroso y NO debe medir 100dvh: empujaba el módulo fuera). */ body:not(.ws-marcas-active).gk-launcher-mode #section-home.gk-launcher { display: flex !important; flex-direction: column; min-height: 100dvh; box-sizing: border-box; } body:not(.ws-marcas-active).gk-launcher-mode #section-home.gk-launcher .gk-launcher-grid { margin: auto !important; } body:not(.ws-marcas-active).gk-launcher-mode #section-home.gk-launcher .gk-launcher-footer { margin-top: auto !important; } body:not(.ws-marcas-active).gk-module-mode #section-home.gk-launcher { min-height: 0 !important; height: auto !important; } @media (max-width: 900px) { body:not(.ws-marcas-active).gk-launcher-mode #section-home.gk-launcher { padding-bottom: 92px !important; } } body:not(.ws-marcas-active).gk-launcher-mode .mobile-toggle { display: none !important; } /* Hub centrado */ #hub-view:not(.hidden) { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; box-sizing: border-box; } /* Tiles 20% más chicos + hover "me elevo" (este quiero abrir) — solo desktop/cursor */ @media (min-width: 901px) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile { width: 112px !important; height: 112px !important; border-radius: 19px !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-tile svg { width: 37px !important; height: 37px !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt-badge { transform: scale(.9); } } @media (hover: hover) { body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:hover, body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:focus-visible { transform: translateY(-12px) !important; } body:not(.ws-marcas-active) #section-home.gk-launcher .gk-lt:hover .gk-lt-tile { box-shadow: 0 26px 48px -14px rgba(15, 23, 42, 0.34), 0 6px 14px rgba(15, 23, 42, 0.10) !important; } .gk-hub-tile { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .28s ease !important; } .gk-hub-tile:hover { transform: translateY(-10px) !important; } } /* ══════════════════════════════════════════════════════════════════════════ BRICK 4 · BACKPORT SaaS 22/07/26 — Ficha Diseño (subset seguro) a) Preview-cards del carrusel: tarjeta con imagen a PROPORCIÓN REAL (sin recortar) + botón eliminar decente. Pisa el bloque viejo de miniaturas 56px cuadradas (cascada: mismo peso, gana el último). b) Ficha móvil ≤640px: el rail lateral pasa a BOTTOM BAR tipo app (patrón F127i aprobado). Pisa el bloque viejo de rail 76px. Solo CSS — el markup .preview-card ya venía en la copia de julio. ══════════════════════════════════════════════════════════════════════════ */ .vm-ws-content .preview-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: 10px !important; margin-top: 8px !important; } .vm-ws-content .preview-card { border: 1px solid var(--vm-n-150) !important; border-radius: var(--vm-r-md) !important; background: #fff !important; padding: 6px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; overflow: hidden !important; } .vm-ws-content .preview-thumb { width: 100% !important; height: 96px !important; border-radius: var(--vm-r-sm) !important; background: var(--vm-n-100) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; cursor: pointer !important; border: 1.5px solid transparent !important; transition: border-color var(--vm-dur-1) var(--vm-ease) !important; } .vm-ws-content .preview-card:hover .preview-thumb { border-color: var(--vm-violet) !important; } .vm-ws-content .preview-thumb img, .vm-ws-content .preview-thumb video { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: contain !important; /* respeta el tamaño real: no recorta ni deforma */ border: none !important; border-radius: 0 !important; } .vm-ws-content .preview-meta { font-size: 10.5px !important; color: var(--vm-n-600) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; } .btn-delete-photo { border: 1px solid #fecaca !important; background: #fef2f2 !important; color: #dc2626 !important; border-radius: 8px !important; width: 30px !important; height: 26px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; flex: 0 0 auto !important; transition: background .15s, border-color .15s, color .15s !important; } .btn-delete-photo:hover { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; } /* ── b) Ficha móvil: sidebar → BOTTOM BAR (se apila header/body/barra) ── */ @media (max-width: 640px) { body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { grid-template-columns: 1fr !important; grid-template-rows: 56px minmax(0, 1fr) auto !important; grid-template-areas: "header" "body" "sidebar" !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sidebar { flex-direction: row !important; align-items: stretch !important; border-right: none !important; border-top: 1px solid var(--gk-ln, #e4e4e7) !important; background: var(--gk-sur, #fff) !important; overflow: visible !important; } /* La cabecera del sidebar (avatar/título) NO va en la barra — el título ya está en el header del modal. */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-head, body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { display: none !important; } /* Rail → fila; cada tab reparte el ancho por igual */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { flex-direction: row !important; flex: 1 !important; gap: 0 !important; padding: 0 !important; overflow: visible !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab { flex: 1 !important; width: auto !important; min-height: 0 !important; min-width: 0 !important; padding: 8px 2px calc(8px + env(safe-area-inset-bottom, 0px)) !important; gap: 3px !important; border-radius: 0 !important; border: none !important; } /* Activo en la barra: tinte violeta + línea superior (sin card ni sombra) */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab.active { background: color-mix(in srgb, var(--gk-a, #5e2ced) 8%, white) !important; box-shadow: inset 0 3px 0 var(--gk-a, #5e2ced) !important; border: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab i { font-size: 18px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-rail-label { font-size: 10px !important; display: block !important; } /* Badge de conteo (Diseños) recolocado sobre el ícono para la barra */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab-count { top: 3px !important; right: 50% !important; margin-right: -20px !important; } /* Footer WhatsApp = último ítem de la barra */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-footer { padding: 0 !important; border-top: none !important; display: flex !important; align-items: stretch !important; flex-shrink: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp { flex-direction: column !important; gap: 3px !important; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 0 !important; height: 100% !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp span { display: block !important; font-size: 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp i { font-size: 18px !important; } } /* ══════════════════════════════════════════════════════════════════════════ BRICK 4b · BACKPORT SaaS 22/07/26 — Ficha unificada (paridad producción) Layouts por pestaña vía data-active-tab (lo setea solSwitchTab): · Ficha / Historial → SIN columna de diseño, editor a TODO el ancho (la tira de emojis se aplana sola y el textarea respira). · Diseño IA → también a todo el ancho (antes quedaba una columna vacía). · Diseños → TEXTO del post (izq) | DISEÑO (der) arriba + TODAS las acciones INTECAP (Recomponer/Restaurar/Retro/Aprobar/links) abajo. · Subir → diseño a la DERECHA sticky (como el SaaS). Pisa por cascada la base vieja 340px|1fr y el media-frame 4/5 fijo. ══════════════════════════════════════════════════════════════════════════ */ .vm-ws-content .ficha-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 360px) !important; gap: 20px !important; align-items: start !important; } /* La columna del diseño va a la derecha (order) y queda pegada arriba mientras el centro scrollea */ .vm-ws-content .ficha-grid .sol-media-col { order: 2 !important; position: sticky !important; top: 0 !important; align-self: start !important; } /* (SUPERADO 05/08/26 por ESTUDIO DE FICHA — el diseño NUNCA se oculta, se ve en las 5 pestañas) #solicitud-modal[data-active-tab="ficha"] .vm-ws-content .sol-media-col, #solicitud-modal[data-active-tab="historial"] .vm-ws-content .sol-media-col, #solicitud-modal[data-active-tab="diseno_ia"] .vm-ws-content .sol-media-col { display: none !important; } #solicitud-modal[data-active-tab="ficha"] .vm-ws-content .ficha-grid, #solicitud-modal[data-active-tab="historial"] .vm-ws-content .ficha-grid, #solicitud-modal[data-active-tab="diseno_ia"] .vm-ws-content .ficha-grid { grid-template-columns: minmax(0, 1fr) !important; } */ /* Diseño = pantalla final de revisión: TEXTO del post (izq) | DISEÑO (der) arriba, y las acciones (Recomponer + Restaurar + retro + Aprobar + links) a TODO el ancho abajo. */ /* (SUPERADO por ESTUDIO DE FICHA) .vm-ws-content .sol-disenos-texto { display: none; } */ #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .ficha-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; grid-template-areas: "media texto" "acciones acciones" !important; } #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .sol-disenos-texto { display: block !important; grid-area: texto !important; align-self: start !important; border: 1px solid var(--vm-n-150); border-radius: var(--vm-r-lg); padding: 14px 16px; background: #fff; } #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .sol-media-col { grid-area: media !important; position: static !important; } /* (SUPERADO por ESTUDIO DE FICHA — el panel vive en el inspector, columna 2) #solicitud-modal[data-active-tab="disenos"] .vm-ws-content #sol-panel-disenos { grid-area: acciones !important; } */ /* Diseño no gigante: se acota para que no empuje todo hacia abajo ni deje hueco al lado. */ #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .media-frame { max-height: 62vh !important; min-height: 260px !important; } /* La columna del texto (con sus miniaturas debajo) puede crecer; sin scroll interno raro. */ #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .sol-disenos-texto .sdt-body { max-height: none !important; } .sol-previews-label { font-size: 11.5px; font-weight: 700; color: var(--vm-n-500); margin: 12px 0 6px; display: flex; align-items: center; gap: 6px; } .sol-previews-label.hidden { display: none !important; } .sol-disenos-texto .sdt-label { font-size: 12px; font-weight: 700; color: var(--vm-n-500); text-transform: none; letter-spacing: 0; margin-bottom: 8px; } .sol-disenos-texto .sdt-body { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--vm-n-800); max-height: 60vh; overflow: auto; } /* Media frame — cada diseño a SU medida real (imagen o video), sin recortar ni deformar */ .vm-ws-content .media-frame { width: 100% !important; aspect-ratio: auto !important; min-height: 240px !important; max-height: 66vh !important; border-radius: var(--vm-r-lg) !important; overflow: hidden !important; background: var(--vm-n-100) !important; border: 1px solid var(--vm-n-150) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .vm-ws-content .media-frame img, .vm-ws-content .media-frame video { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 66vh !important; object-fit: contain !important; object-position: center !important; display: block !important; } /* Móvil: apilar diseño → texto → acciones (1 columna), sin comprimir el texto */ @media (max-width: 820px) { .vm-ws-content .ficha-grid { grid-template-columns: 1fr !important; gap: 14px !important; } #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .ficha-grid { grid-template-columns: 1fr !important; grid-template-areas: "media" "texto" "acciones" !important; } .vm-ws-content .media-frame { max-height: 320px !important; aspect-ratio: 4 / 3 !important; } } /* ══════════════════════════════════════════════════════════════════════════ BRICK 4c · BACKPORT SaaS 22/07/26 — remates de la ficha + Vista en redes a) FIX diseño cortado en Diseños: el marco mide 46vh pero la imagen permitía 66vh → se recortaba arriba/abajo. Ahora la imagen se ajusta COMPLETA al marco (sin recorte). b) Vista en redes (.vrr-*): overlay centrado que muestra el post como se verá en FB/IG — diseño arriba + texto abajo, avatar del centro. ══════════════════════════════════════════════════════════════════════════ */ #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .media-frame img, #solicitud-modal[data-active-tab="disenos"] .vm-ws-content .media-frame video { max-height: calc(62vh - 2px) !important; } .vrr-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .vrr-overlay.hidden { display: none !important; } .vrr-card { width: 100%; max-width: 420px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); position: relative; } .vrr-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #444; cursor: pointer; display: grid; place-items: center; font-size: 15px; } .vrr-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .vrr-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--vm-violet, #5e2ced); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex-shrink: 0; } .vrr-name { font-size: 14px; font-weight: 700; color: #17123a; } .vrr-sub { font-size: 11px; color: #8a83a6; } .vrr-media { background: #0b0b12; display: flex; align-items: center; justify-content: center; min-height: 120px; } .vrr-media img, .vrr-media video { width: 100%; display: block; max-height: 62vh; object-fit: contain; } .vrr-media .vrr-empty { padding: 60px 20px; color: #9aa; font-size: 13px; text-align: center; } .vrr-text { padding: 12px 14px 16px; font-size: 13px; line-height: 1.6; color: #1c1533; white-space: pre-wrap; word-break: break-word; } /* BRICK 4c · botón teal "Enviar a aprobación" en la barra de acciones (paridad SaaS) */ .vm-btn-teal { background: var(--accent-2, #75cebb) !important; border-color: #4fb9a3 !important; color: #0b3b32 !important; box-shadow: 0 4px 12px -4px rgba(117, 206, 187, .5), inset 0 1px 0 rgba(255,255,255,.35) !important; } .vm-btn-teal:hover { background: #4fb9a3 !important; color: #fff !important; } /* ══════════════════════════════════════════════════════════════════════════ LOGIN UNIVERSAL · backport 22/07/26 — la "puerta" de la marca nueva. Video de portada a pantalla completa + aura de blobs, marca grande al costado (isotipo + VIMEDIA) y tarjeta blanca flotante con el PIN. Scoped a .login-screen-v2.vm-door — pisa el login v2 viejo por cascada. Paleta: #5e2ced (violeta) · #75cebb (teal) · blanco. ══════════════════════════════════════════════════════════════════════════ */ .login-screen-v2.vm-door { position: fixed !important; inset: 0 !important; z-index: 900 !important; display: block !important; padding: 0 !important; overflow: auto !important; background: #140c2e !important; font-family: 'Geist', 'Geist', 'Inter', system-ui, sans-serif !important; } .login-screen-v2.vm-door.hidden { display: none !important; } /* fondo: video + velo + aura */ .vm-door-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #140c2e; } .vm-door-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; } .vm-door-veil { position: absolute; inset: 0; background: rgba(18,10,42,.62); } .vm-door-blob { position: absolute; border-radius: 50%; filter: blur(80px); } .vm-door-blob-v { width: 420px; height: 420px; background: #5e2ced; opacity: .55; top: -120px; left: -90px; animation: vmDoorFloat1 15s ease-in-out infinite; } .vm-door-blob-r { width: 300px; height: 300px; background: #75cebb; opacity: .14; top: -40px; left: 12%; animation: vmDoorFloat2 18s ease-in-out infinite; } .vm-door-blob-c { width: 340px; height: 340px; background: #75cebb; opacity: .16; bottom: -130px; right: -70px; animation: vmDoorFloat2 20s ease-in-out infinite; } @keyframes vmDoorFloat1 { 50% { transform: translate(34px,26px); } } @keyframes vmDoorFloat2 { 50% { transform: translate(-26px,20px); } } /* escenario: marca izquierda + tarjeta derecha */ .vm-door-stage { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; gap: clamp(44px, 9vw, 130px); padding: 40px; } /* marca grande (logo configurable + wordmark VIMEDIA) */ .vm-door-brand { display: flex; flex-direction: column; align-items: center; gap: 20px; background: none; border: none; cursor: default; padding: 0; opacity: 0; transform: translateY(12px); animation: vmDoorRise .8s cubic-bezier(.22,1,.36,1) .05s forwards; } .vm-door-brand img { width: 120px; height: 120px; object-fit: cover; border-radius: 28px; box-shadow: 0 24px 56px -12px rgba(0,0,0,.6); } .vm-door-wm { font-family: 'Geist', 'Geist', 'Inter', system-ui, sans-serif; font-size: clamp(38px, 4.6vw, 56px); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #fff; } .vm-door-accent { width: 58px; height: 4px; border-radius: 999px; background: #75cebb; } /* tarjeta flotante */ .vm-door-card { width: min(430px, 100%); background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.6); border-radius: 28px; padding: 38px clamp(24px, 5vw, 36px) 34px; box-shadow: 0 50px 110px -34px rgba(0,0,0,.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(16px); animation: vmDoorRise .8s cubic-bezier(.22,1,.36,1) .18s forwards; } @keyframes vmDoorRise { to { opacity: 1; transform: none; } } .vm-door-avatar { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, #5e2ced 12%, #fff); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .vm-door-avatar svg { width: 29px; height: 29px; stroke: #5e2ced; fill: none; stroke-width: 2; } /* Identidad (29/07): con logo subido, el círculo del login lo muestra — el fondo lo pone el JS según su luminancia */ .vm-door-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: transparent; } .vm-door-avatar:has(img) { overflow: hidden; } .vm-door-hello { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #17123a; } .vm-door-divi { display: flex; align-items: center; gap: 12px; margin: 17px 0 0; } .vm-door-divi span { flex: 1; height: 1px; background: rgba(23,18,58,.12); } .vm-door-divi em { font-style: normal; font-size: 12.5px; color: rgba(23,18,58,.42); } /* form: el wrap viejo pierde su layout — acá es solo contenedor plano */ .vm-door .login-form-wrap { display: block !important; margin-top: 14px; } .vm-door-inp { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid rgba(23,18,58,.12); border-radius: 14px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 18px; letter-spacing: .34em; text-align: center; color: #17123a; background: #f7f7fb; transition: .2s; } .vm-door-inp:focus { outline: none; border-color: #75cebb; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, #75cebb 18%, transparent); } .vm-door-inp::placeholder { color: rgba(23,18,58,.32); letter-spacing: .2em; } .vm-door-go { width: 100%; height: 52px; margin-top: 11px; border: none; border-radius: 14px; background: #5e2ced; color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .2s, transform .2s; } .vm-door-go:hover { filter: brightness(1.08); transform: translateY(-1px); } .vm-door-go:disabled { opacity: .6; transform: none; } .vm-door-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; } .vm-door-back { display: block; text-align: center; margin-top: 18px; color: rgba(23,18,58,.42); font-size: 12.5px; font-weight: 600; text-decoration: none; } .vm-door-back:hover { color: #5e2ced; } @media (max-width: 860px) { .vm-door-stage { flex-direction: column; gap: 26px; padding: 32px 22px; } .vm-door-brand { gap: 12px; } .vm-door-brand img { width: 76px; height: 76px; border-radius: 20px; } .vm-door-wm { font-size: 32px; } } @media (max-width: 480px) { .vm-door-card { padding: 30px 22px 28px; border-radius: 24px; } } @media (prefers-reduced-motion: reduce) { .vm-door-blob { animation: none; } .vm-door-brand, .vm-door-card { animation: none; opacity: 1; transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ BRICK 4d · backport 22/07/26 — ficha modal FLUIDA en monitores grandes. Estaba clavada en 1280px (se veía angosta y perdida al centro en monitores anchos); el SaaS la deja crecer: piso 1280, techo 1600 o 96vw del monitor. Los módulos ya eran fluidos (F132) — esto empareja la ficha. ══════════════════════════════════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { max-width: min(1600px, 96vw) !important; max-height: 94vh !important; } /* ══════════════════════════════════════════════════════════════════════════ HUB MODERNO · backport 22/07/26 — paridad con el launcher y la puerta. Las 2 tarjetas blancas pasan al lenguaje del launcher: el CUADRO de color es el tile (hover -12px resorte) y título/subtítulo van en BLANCO sobre el violeta. Aura sutil de fondo como el login nuevo. Lupa fuera del hub (OLA31: lupa solo en escritorio) y power de abajo fuera (duplicaba el power global de arriba-derecha — sin duplicaciones). Solo CSS — mismo markup, mismos IDs, mismos textos. ══════════════════════════════════════════════════════════════════════════ */ /* aura sutil tipo puerta */ .gk-hub { position: relative; overflow: hidden; } .gk-hub::before, .gk-hub::after { content: ''; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .gk-hub::before { width: 440px; height: 440px; background: #3b1fae; opacity: .55; top: -140px; left: -110px; } .gk-hub::after { width: 360px; height: 360px; background: #75cebb; opacity: .13; bottom: -140px; right: -90px; } .gk-hub-inner { position: relative; z-index: 1; } /* tile = el cuadro de color, textos blancos debajo */ .gk-hub-grid { gap: clamp(40px, 6vw, 72px) !important; } .gk-hub-tile { background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; gap: 0 !important; transition: transform .28s cubic-bezier(.34, 1.56, .64, 1) !important; } .gk-hub-tile:hover { transform: translateY(-12px) !important; box-shadow: none !important; } .gk-hub-tile:active { transform: translateY(-4px) !important; } .gk-hub-tile:hover .gk-hub-tile-icon { transform: none !important; box-shadow: 0 34px 68px -14px rgba(0, 0, 0, .6) !important; } .gk-hub-tile-icon { width: 176px !important; height: 176px !important; border-radius: 36px !important; margin: 0 auto 20px !important; box-shadow: 0 26px 56px -14px rgba(0, 0, 0, .5) !important; transition: box-shadow .28s ease !important; } .gk-hub-tile-icon svg { width: 70px !important; height: 70px !important; } .gk-hub-tile-title { color: #ffffff !important; font-size: 24px !important; letter-spacing: -.03em !important; } .gk-hub-tile-sub { color: rgba(255, 255, 255, .78) !important; font-size: 13px !important; margin-top: 7px !important; } /* móvil: tiles más compactos apilados */ @media (max-width: 640px) { .gk-hub-tile-icon { width: 128px !important; height: 128px !important; border-radius: 28px !important; margin-bottom: 14px !important; } .gk-hub-tile-icon svg { width: 52px !important; height: 52px !important; } .gk-hub-tile-title { font-size: 20px !important; } .gk-hub-grid { gap: 36px !important; } } /* lupa NO va en el hub (solo en el escritorio) */ body:has(#hub-view:not(.hidden)) .gk-lupa-btn { display: none !important; } /* power de abajo fuera — el global de arriba-derecha ya cierra sesión */ .gk-hub-footer .gk-hub-footer-danger { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════ BARRIDO 27/07 · kit diseno-vimedia — tooltips con nombre, movimiento suave en TODO lo que aparece (nada en seco), redondez en solo-ícono. Solo CSS aditivo — ninguna función tocada. ══════════════════════════════════════════════════════════════════════════ */ :where([data-tip]) { position: relative; } /* :where = no pisa position:fixed/absolute */ [data-tip]::after { content: attr(data-tip); --tipx: -50%; position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(var(--tipx)) translateY(3px); background: #2a2b2f; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; padding: 7px 11px; border-radius: 8px; opacity: 0; pointer-events: none; z-index: 1200; transition: opacity .18s ease, transform .18s ease; } [data-tip]::before { content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #2a2b2f; border-bottom: none; opacity: 0; pointer-events: none; z-index: 1200; transition: opacity .18s ease; } [data-tip]:hover::after { opacity: 1; transform: translateX(var(--tipx)) translateY(0); } /* POSICIÓN INTELIGENTE (29/07): el JS marca data-tip-pos / data-tip-alin según el borde de pantalla — el globo se lanza hacia donde SÍ hay espacio, nunca cortado */ [data-tip][data-tip-pos="abajo"]::after { bottom: auto; top: calc(100% + 9px); transform: translateX(var(--tipx, -50%)) translateY(-3px); } [data-tip][data-tip-pos="abajo"]::before { bottom: auto; top: calc(100% + 4px); border-top: none; border-bottom: 5px solid #2a2b2f; } [data-tip][data-tip-pos="abajo"]:hover::after { transform: translateX(var(--tipx, -50%)) translateY(0); } [data-tip][data-tip-alin="izq"]::after { --tipx: 0%; left: -4px; } [data-tip][data-tip-alin="der"]::after { --tipx: 0%; left: auto; right: -4px; } [data-tip]:hover::before { opacity: 1; } .gk-logout-btn[data-tip]::after, .gk-lupa-btn[data-tip]::after, .gk-hub-back-btn[data-tip]::after { bottom: auto; top: calc(100% + 9px); transform: translateX(var(--tipx, -50%)) translateY(-3px); } .gk-logout-btn[data-tip]::before, .gk-lupa-btn[data-tip]::before, .gk-hub-back-btn[data-tip]::before { bottom: auto; top: calc(100% + 4px); border-top: none; border-bottom: 5px solid #2a2b2f; } .gk-logout-btn[data-tip]:hover::after, .gk-lupa-btn[data-tip]:hover::after, .gk-hub-back-btn[data-tip]:hover::after { transform: translateX(var(--tipx, -50%)) translateY(0); } @keyframes kBarridoFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes kBarridoFadeO { from { opacity: 0; } to { opacity: 1; } } .vm-fab-sheet.vm-fab-sheet-open .vm-fab-sheet-card { animation: kBarridoFade .22s ease both; } .vm-fab-sheet.vm-fab-sheet-open .vm-fab-sheet-backdrop { animation: kBarridoFadeO .18s ease both; } #dashboard-view .search-dropdown { animation: kBarridoFade .2s ease both; } #dashboard-view section[id^="section-"] { animation: kBarridoFade .2s ease both; } .vm-drawer { animation: kBarridoFade .22s ease both; } .vm-ws-modal, .vm-ws-modal-centered { animation: kBarridoFade .24s ease both; } .gk-logout-btn:active, .gk-lupa-btn:active, .gk-hub-back-btn:active, .vm-btn-icon:active, .gk-module-close:active { transform: scale(.94); } .vm-btn-icon { border-radius: 50% !important; transition: background .18s ease, color .18s ease, transform .18s ease; } /* ══════════════════════════════════════════════════════════════════════════ KIT SKIN (28/07/26) · el lenguaje del mockup aplicado a los componentes reales: botones a su medida con borde fino, pestañas pastilla, inputs limpios con foco del acento. Solo piel — clases e IDs intactos. ══════════════════════════════════════════════════════════════════════════ */ /* ── Inputs del área de trabajo: 38px, blancos, borde fino, foco acento ── */ .main-content input[type="text"], .main-content input[type="search"], .main-content input[type="number"], .main-content input[type="date"], .main-content input[type="datetime-local"], .main-content input[type="tel"], .main-content select, .main-content textarea, .modal-content input[type="text"], .modal-content input[type="search"], .modal-content input[type="number"], .modal-content input[type="date"], .modal-content input[type="datetime-local"], .modal-content input[type="tel"], .modal-content select, .modal-content textarea { border: 1px solid #e3e4e7 !important; border-radius: 9px !important; background: #fff !important; min-height: 38px; font-size: 13.5px !important; transition: border-color .18s ease, box-shadow .18s ease !important; box-shadow: none; } .main-content textarea, .modal-content textarea { min-height: 86px; line-height: 1.55; } .main-content input:focus, .main-content select:focus, .main-content textarea:focus, .modal-content input:focus, .modal-content select:focus, .modal-content textarea:focus { outline: none !important; border-color: var(--ct-a, var(--gk-a, #5e2ced)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-a, var(--gk-a, #5e2ced)) 14%, transparent) !important; } /* ── Chips de etapa = pestañas del kit: texto firme, pastilla suave la activa ── */ #pedidos-estado-chips .chip { background: transparent; border: 1px solid transparent !important; border-radius: 999px !important; font-weight: 700 !important; color: #3f3f46; transition: background .18s ease, color .18s ease; } #pedidos-estado-chips .chip:hover { background: #f7f7f8; } #pedidos-estado-chips .chip.active { background: #efeff1 !important; border-color: #efeff1 !important; color: #111214 !important; } /* ── Botones secundarios = blancos con borde fino, a su medida ── */ .main-content .btn:not(.btn-primary):not(.gal-card-republicar):not([class*="danger"]), .modal-content .btn:not(.btn-primary):not([class*="danger"]) { background: #fff; border: 1px solid #e3e4e7; border-radius: 9px; color: #111214; font-weight: 600; transition: background .18s ease, border-color .18s ease; } .main-content .btn:not(.btn-primary):not(.gal-card-republicar):not([class*="danger"]):hover, .modal-content .btn:not(.btn-primary):not([class*="danger"]):hover { background: #f7f7f8; border-color: #a2a4aa; } /* KIT SKIN · refuerzo de especificidad: chips de ETAPA = pestañas pastilla (los chips de CENTRO conservan su color de identidad — F130d intacto) */ body:not(.ws-marcas-active) #dashboard-view #pedidos-estado-chips .chip { background: transparent !important; border-color: transparent !important; color: #3f3f46 !important; font-weight: 700 !important; box-shadow: none !important; } body:not(.ws-marcas-active) #dashboard-view #pedidos-estado-chips .chip:hover { background: #f7f7f8 !important; border-color: transparent !important; } body:not(.ws-marcas-active) #dashboard-view #pedidos-estado-chips .chip.active { background: #efeff1 !important; border-color: #efeff1 !important; color: #111214 !important; box-shadow: none !important; } /* (28/07 · composer de ficha — SUPERADO por "ESTUDIO DE FICHA" al final del archivo) */ /* ══════════════════════════════════════════════════════════════════════════ ORDEN 29/07 · FONDO BLANCO — no se usan fondos de color en el sistema. Hub y launcher de empleados sobre blanco; tiles con hairline; chrome legible en tinta; contadores del pie y "Cambiar logo" fuera del hub (el logo ahora vive en Configuración). Funciones intactas. ══════════════════════════════════════════════════════════════════════════ */ .gk-hub, body:not(.ws-marcas-active).gk-launcher-mode .main-content, body:not(.ws-marcas-active) #section-home.gk-launcher { background: #ffffff !important; } body #login-view.login-screen-v2 { background: #5e2ced !important; } /* login queda igual hasta nueva orden */ .gk-hub::before, .gk-hub::after { display: none !important; } /* textos sobre blanco */ #section-home.gk-launcher .gk-lt-label { color: #111214 !important; } #section-home.gk-launcher .gk-lt-sub, #section-home.gk-launcher .gk-launcher-eyebrow { color: #6a6c72 !important; } .gk-hub-tile-title { color: #111214 !important; } .gk-hub-tile-sub, .gk-hub-tile-desc { color: #6a6c72 !important; } /* tiles se separan del blanco con hairline (la sombra suave queda) */ #section-home.gk-launcher .gk-lt-tile, .gk-hub-tile-icon { border: 1px solid #e8e8ec; } /* chrome sobre blanco: power, lupa, menú, botones del hub */ .gk-logout-btn, .gk-lupa-btn, .gk-hub-back-btn, .gk-hub-footer-btn { background: #ffffff !important; color: #111214 !important; border: 1px solid #e3e4e7 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .gk-logout-btn:hover, .gk-lupa-btn:hover, .gk-hub-back-btn:hover, .gk-hub-footer-btn:hover { background: #f7f7f8 !important; border-color: #a2a4aa !important; } /* fuera de la vista: contadores del pie y botón de logo del hub */ .gk-launcher-footer { display: none !important; } #hub-btn-logo { display: none !important; } /* pastilla de fecha sobre blanco */ #gk-topbar-date, .gk-topbar-date { background: #ffffff !important; color: #6a6c72 !important; border: 1px solid #e3e4e7 !important; } /* ══════════════════════════════════════════════════════════════════════════ PANTALLA UNIFICADA (orden 29/07) — una sola pantalla tras el login: buscador al centro · puntos (apps Intecap/Marcas) izquierda · config + Cerrar sesión derecha. Todo reubicado, nada eliminado. Responsive 3 escalas. ══════════════════════════════════════════════════════════════════════════ */ /* solo visible en el escritorio (launcher-mode), nunca dentro de módulos */ .gk-uni-dots, .gk-uni-cfg-btn, .gk-uni-search, .gk-uni-panel { display: none; } body:not(.ws-marcas-active).gk-launcher-mode .gk-uni-dots, body:not(.ws-marcas-active).gk-launcher-mode .gk-uni-cfg-btn, body:not(.ws-marcas-active).gk-launcher-mode .gk-uni-search { display: inline-flex; } body:not(.ws-marcas-active).gk-launcher-mode .gk-uni-panel { display: block; } /* el hub viejo y el power/lupa del launcher quedan fuera de vista (funciones reubicadas) */ .gk-hub { display: none !important; } body:not(.ws-marcas-active).gk-launcher-mode .gk-logout-btn, body:not(.ws-marcas-active).gk-launcher-mode .gk-lupa-btn { display: none !important; } /* el grid ya no vive en el centro del launcher (se mueve al panel por JS) */ /* puntos-cuadrado (izquierda) y config (derecha) */ .gk-uni-dots, .gk-uni-cfg-btn { position: fixed; top: 20px; z-index: 960; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #e3e4e7; color: #111214; cursor: pointer; align-items: center; justify-content: center; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .gk-uni-dots { left: 20px; } .gk-uni-cfg-btn { right: 76px; } .gk-uni-dots:hover, .gk-uni-cfg-btn:hover { background: #f7f7f8; border-color: #a2a4aa; } .gk-uni-dots:active, .gk-uni-cfg-btn:active { transform: scale(.94); } .gk-uni-cfg-btn svg { width: 19px; height: 19px; } .gk-uni-dots-grid { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; } .gk-uni-dots-grid i { width: 4px; height: 4px; border-radius: 50%; background: #111214; } /* fecha se corre junto al engranaje */ body:not(.ws-marcas-active).gk-launcher-mode #gk-topbar-date { right: 132px !important; } /* barra central estilo buscador */ .gk-uni-search { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 940; width: min(680px, calc(100vw - 48px)); height: 54px; padding: 0 22px; gap: 12px; background: #fff; border: 1px solid #e3e4e7; border-radius: 999px; color: #a2a4aa; font-family: inherit; font-size: 15px; font-weight: 500; cursor: text; align-items: center; box-shadow: 0 10px 30px -18px rgba(17, 18, 20, .25); transition: border-color .18s ease, box-shadow .18s ease; } .gk-uni-search:hover { border-color: #a2a4aa; box-shadow: 0 14px 34px -18px rgba(17, 18, 20, .32); } .gk-uni-search svg { width: 19px; height: 19px; color: #6a6c72; flex-shrink: 0; } /* con el buscador real abierto, la barra falsa se esconde para no duplicar */ body.gk-search-open .gk-uni-search { opacity: 0; pointer-events: none; } /* paneles (apps y config): blancos, sombra suave, aparecen con fade */ .gk-uni-panel { position: fixed; top: 76px; z-index: 955; background: #fff; border: 1px solid #e3e4e7; border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(17, 18, 20, .3); padding: 14px; opacity: 0; transform: translateY(-6px) scale(.99); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .gk-uni-panel.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .gk-uni-apps { left: 20px; width: min(560px, calc(100vw - 40px)); } .gk-uni-cfg { right: 20px; width: 280px; padding: 8px; } /* pestañas Intecap | Marcas (pastilla) */ .gk-uni-tabs { display: flex; gap: 4px; margin-bottom: 12px; } .gk-uni-tab { border: none; background: transparent; height: 34px; padding: 0 15px; border-radius: 999px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #111214; cursor: pointer; transition: background .18s ease; } .gk-uni-tab:hover { background: #f7f7f8; } .gk-uni-tab.on { background: #efeff1; } /* el grid movido adentro: tiles más compactas */ .gk-uni-pane .gk-launcher-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; max-width: none !important; margin: 0 !important; } .gk-uni-pane .gk-lt-tile { width: 92px !important; height: 92px !important; border-radius: 20px !important; margin: 0 auto; } .gk-uni-pane .gk-lt-tile svg { width: 32px !important; height: 32px !important; } .gk-uni-pane .gk-lt-label { color: #111214 !important; font-size: 11.5px !important; } .gk-uni-pane .gk-lt-sub { display: none; } /* el detalle vive en el módulo; aquí solo nombre */ /* pestaña Marcas */ .gk-uni-marca-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 22px 16px; border: 1px solid #e8e8ec; border-radius: 16px; background: #fff; cursor: pointer; font-family: inherit; transition: background .18s ease, border-color .18s ease; } .gk-uni-marca-tile:hover { background: #f7f7f8; border-color: #a2a4aa; } .gk-uni-marca-ico { width: 64px; height: 64px; border-radius: 16px; border: 1px solid #e8e8ec; display: grid; place-items: center; color: #17123a; } .gk-uni-marca-ico svg { width: 28px; height: 28px; } .gk-uni-marca-lbl { font-size: 14px; font-weight: 800; color: #111214; } .gk-uni-marca-sub { font-size: 11.5px; color: #6a6c72; } /* menú de config estilo lista (referencia Metricool) */ .gk-uni-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border: none; border-radius: 10px; background: transparent; color: #111214; font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background .18s ease; } .gk-uni-item:hover { background: #f7f7f8; } .gk-uni-item svg { width: 18px; height: 18px; color: #6a6c72; flex-shrink: 0; } .gk-uni-divider { height: 1px; background: #efeff1; margin: 6px 4px; } .gk-uni-salir { color: #a32323; } .gk-uni-salir svg { color: #a32323; } .gk-uni-salir:hover { background: #fbecec; } /* ── responsive: portátil ya cubierto · celular ── */ @media (max-width: 640px) { .gk-uni-dots { left: 12px; top: 12px; } .gk-uni-cfg-btn { right: 64px; top: 12px; } /* regla de oro: la fecha NO desaparece — se reubica abajo del chrome, más chica */ body:not(.ws-marcas-active).gk-launcher-mode #gk-topbar-date { right: 12px !important; top: 64px !important; font-size: 11px !important; padding: 4px 10px !important; } .gk-uni-search { height: 48px; font-size: 14px; } .gk-uni-apps { left: 12px; right: 12px; width: auto; top: 66px; max-height: 74vh; overflow-y: auto; } .gk-uni-cfg { right: 12px; top: 66px; } .gk-uni-pane .gk-launcher-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ── monitores grandes: la barra respira más ── */ @media (min-width: 1800px) { .gk-uni-search { width: 760px; height: 58px; } .gk-uni-apps { width: 620px; } } /* el body también blanco en el escritorio unificado */ body:not(.ws-marcas-active).gk-launcher-mode { background: #ffffff !important; } /* PANTALLA UNIFICADA · fix: el grid movido pierde los selectores del launcher — estilos completos de las tiles DENTRO del panel */ .gk-uni-pane .gk-lt { display: flex !important; flex-direction: column; align-items: center; gap: 8px; background: none !important; border: none !important; padding: 0 !important; cursor: pointer; font-family: inherit; opacity: 1 !important; transition: transform .18s ease; } .gk-uni-pane .gk-lt:hover { transform: translateY(-2px); } .gk-uni-pane .gk-lt-tile { position: relative; width: 92px !important; height: 92px !important; border-radius: 20px !important; background: #ffffff !important; border: 1px solid #e8e8ec !important; box-shadow: 0 6px 16px -8px rgba(17, 18, 20, .14) !important; display: grid !important; place-items: center !important; margin: 0 !important; } .gk-uni-pane .gk-lt-tile svg { width: 32px !important; height: 32px !important; stroke: #17123a !important; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gk-uni-pane .gk-lt-label { color: #111214 !important; font-size: 11.5px !important; font-weight: 700 !important; text-align: center; } .gk-uni-pane .gk-lt-sub { display: none !important; } .gk-uni-pane .gk-lt .nav-badge, .gk-uni-pane .gk-lt [class*="badge"] { position: absolute; top: -5px; right: -5px; } /* con un panel abierto, la barra central se aparta (vuelve al cerrar) */ /* orden 31/07: con panel abierto el buscador QUEDA visible (antes se desvanecía) */ /* badge de la Bandeja pegado a la esquina de su tile dentro del panel */ .gk-uni-pane .gk-lt { position: relative; } .gk-uni-pane .gk-lt .gk-lt-badge { position: absolute; top: -6px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; } /* PANTALLA UNIFICADA · el LOGIN queda limpio: nada del escritorio encima */ body:has(#login-view:not(.hidden)) .gk-uni-dots, body:has(#login-view:not(.hidden)) .gk-uni-cfg-btn, body:has(#login-view:not(.hidden)) .gk-uni-search, body:has(#login-view:not(.hidden)) .gk-uni-panel, body:not(.gk-uni-ready) .gk-uni-dots, body:not(.gk-uni-ready) .gk-uni-cfg-btn, body:not(.gk-uni-ready) .gk-uni-search, body:not(.gk-uni-ready) .gk-uni-panel { display: none !important; } /* ══ IDENTIDAD DE MARCA (orden 29/07): avatar + nombre arriba del buscador ══ */ .gk-uni-avatar { display: none; } body:not(.ws-marcas-active).gk-launcher-mode.gk-uni-ready .gk-uni-avatar { display: inline-flex; } .gk-uni-avatar { position: fixed; top: 20px; right: 76px; z-index: 960; width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1px solid #e3e4e7; color: #6a6c72; cursor: pointer; align-items: center; justify-content: center; overflow: hidden; padding: 0; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .gk-uni-avatar:hover { background: #f7f7f8; border-color: #a2a4aa; } .gk-uni-avatar:active { transform: scale(.94); } .gk-uni-avatar svg { width: 20px; height: 20px; } .gk-uni-avatar img { width: 100%; height: 100%; object-fit: cover; } /* la config se corre al borde y la fecha un paso más allá */ .gk-uni-cfg-btn { right: 20px !important; } body:not(.ws-marcas-active).gk-launcher-mode #gk-topbar-date { right: 132px !important; } /* nombre de la marca arriba del buscador */ .gk-uni-brand { display: none; } body:not(.ws-marcas-active).gk-launcher-mode.gk-uni-ready .gk-uni-brand { display: block; } .gk-uni-brand { position: fixed; top: calc(50% - 96px); left: 50%; transform: translateX(-50%); z-index: 940; font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: #111214; pointer-events: none; } body.gk-search-open .gk-uni-brand { opacity: 0; } /* orden 31/07: solo el overlay de búsqueda lo tapa; los paneles ya no */ .gk-uni-brand { transition: opacity .18s ease; } /* menú de identidad */ .gk-uni-brandmenu { right: 76px; width: 280px; padding: 8px; } .gk-uni-brand-head { display: flex; align-items: center; gap: 11px; padding: 10px 12px 8px; } .gk-uni-brand-ava { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #f7f7f8; border: 1px solid #e8e8ec; color: #6a6c72; display: grid; place-items: center; } .gk-uni-brand-ava svg { width: 18px; height: 18px; } .gk-uni-brand-ava img { width: 100%; height: 100%; object-fit: cover; } .gk-uni-brand-nom { font-size: 14px; font-weight: 800; color: #111214; } @media (max-width: 640px) { .gk-uni-avatar { right: 64px; top: 12px; } .gk-uni-cfg-btn { right: 12px !important; } .gk-uni-brandmenu { right: 12px; top: 66px; } .gk-uni-brand { font-size: 26px; top: calc(50% - 84px); } } /* logos blancos visibles: el contenedor del logo lleva base gris suave */ .gk-uni-avatar img, .gk-uni-brand-ava img { background: transparent; } /* el fondo lo pone el JS según la luminancia del logo */ .gk-uni-avatar:has(img) { background: #e9e9ee; } .gk-uni-brand-ava:has(img) { background: #e9e9ee; border-color: #dcdce2; } /* ══ BUSCADOR EN VIVO (orden 29/07) ══ */ .gk-uni-search { cursor: text; } .gk-uni-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 15px; color: #111214; } .gk-uni-search input::placeholder { color: #a2a4aa; } .gk-uni-search:focus-within { border-color: #a2a4aa; box-shadow: 0 14px 34px -18px rgba(17,18,20,.32); } .gk-uni-results { display: none; } body:not(.ws-marcas-active).gk-launcher-mode.gk-uni-ready .gk-uni-results { display: block; } .gk-uni-results { position: fixed; top: calc(50% + 34px); left: 50%; transform: translateX(-50%) translateY(-4px); width: min(680px, calc(100vw - 48px)); z-index: 945; background: #fff; border: 1px solid #e3e4e7; border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(17, 18, 20, .3); padding: 10px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .gk-uni-results.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .gk-uni-res-filtros { display: flex; gap: 4px; padding: 2px 4px 8px; } .gk-uni-resf { border: none; background: transparent; height: 30px; padding: 0 13px; border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #111214; cursor: pointer; transition: background .18s ease; } .gk-uni-resf:hover { background: #f7f7f8; } .gk-uni-resf.on { background: #efeff1; } #gk-uni-res-list { max-height: 44vh; overflow-y: auto; } .gk-uni-res-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: background .18s ease; } .gk-uni-res-row:hover { background: #f7f7f8; } .gk-uni-res-mini { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; border: 1px solid #efeff1; } .gk-uni-res-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .gk-uni-res-txt b { font-size: 13.5px; font-weight: 700; color: #111214; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gk-uni-res-txt small { font-size: 11.5px; color: #6a6c72; } .gk-uni-res-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #efeff1; color: #6a6c72; } .gk-uni-res-tag-m { background: color-mix(in srgb, #5e2ced 10%, #fff); color: #5e2ced; } .gk-uni-res-vacio { padding: 18px; text-align: center; font-size: 12.5px; color: #a2a4aa; } @media (max-width: 640px) { .gk-uni-results { top: calc(50% + 28px); } } /* ══════════════════════════════════════════════════════════════════════════ BANDEJA · ORDEN 31/07 (NORTE) — tres ajustes de orden, sin quitar nada: 1) el nombre de los íconos del rail sale a la DERECHA y al frente, 2) fichas más pequeñas manteniendo su proporción 3/4, 3) fichas limpias: estado y centro en la misma fila; los botones aparecen al pasar el cursor (en pantallas táctiles siguen siempre visibles). ══════════════════════════════════════════════════════════════════════════ */ /* 1 · TOOLTIP DEL RAIL A LA DERECHA — el rail vive dentro de .sidebar, que tiene overflow:hidden y recortaba el globo. Con position:fixed el globo se sale del recorte (ningún ancestro crea contexto fijo) y el JS le pasa las coordenadas. */ /* El rail vive dentro de .sidebar (z-index propio + overflow oculto): un globo dibujado como pseudo-elemento SIEMPRE queda por debajo del panel del módulo. Por eso el rail usa un globo FLOTANTE a nivel de (.gk-tip-float), que no pertenece a ningún apilamiento interno y sale al frente de todo. */ [data-tip][data-tip-pos="derecha"]::after, [data-tip][data-tip-pos="derecha"]::before { content: none !important; } .gk-tip-float { position: fixed; z-index: 99999; background: #2a2b2f; color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; padding: 7px 11px; border-radius: 8px; pointer-events: none; opacity: 0; transform: translateY(-50%) translateX(-3px); transition: opacity .18s ease, transform .18s ease; } .gk-tip-float.on { opacity: 1; transform: translateY(-50%) translateX(0); } .gk-tip-float::before { content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: #2a2b2f; border-left: none; } /* 2 · FICHAS MÁS PEQUEÑAS (misma proporción 3/4 — ni más angostas ni más anchas): con columnas de 180px entran ~4 por fila en portátil (2 filas a la vista) y ~8 en monitor grande (3 filas). El aspect-ratio 3/4 ya existente las escala. */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 12px !important; } /* tipografía proporcional al nuevo tamaño (mismo texto, sin recortes) */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-title { font-size: 12.5px !important; line-height: 1.25 !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-meta { font-size: 10.5px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-glass { padding: 10px !important; } /* 3a · ESTADO Y CENTRO EN LA MISMA FILA (el centro va después del estado) */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-top { flex-direction: row !important; /* ARRIBA, no al centro: la caja crece (flex:1) y con align-items:center los chips se iban al medio de la ficha. flex-start los ancla al borde superior. */ align-items: flex-start !important; align-content: flex-start !important; flex-wrap: wrap !important; gap: 5px !important; } /* 3b · FICHA LIMPIA: los botones aparecen al pasar el cursor. Siguen existiendo siempre (nada se quita) y en pantallas táctiles —donde no hay cursor— quedan visibles como hasta ahora. Sin salto: crecen con la transición del kit en vez de aparecer en seco. */ @media (hover: hover) and (pointer: fine) { body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-actions { opacity: 0; max-height: 0; overflow: hidden; margin-top: 0 !important; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, max-height .22s ease, transform .18s ease, margin-top .18s ease; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card:hover .sol-card-actions, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card:focus-within .sol-card-actions { opacity: 1; max-height: 76px; transform: none; margin-top: 4px !important; pointer-events: auto; } } /* botones de la ficha a la medida del nuevo tamaño (mismos botones, más compactos) */ body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-actions { gap: 4px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-btn { height: 28px !important; padding: 0 9px !important; font-size: 10.5px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-btn-icon { width: 28px !important; height: 28px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-btn-icon i, body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card-btn i { font-size: 11px !important; } /* ══════════════════════════════════════════════════════════════════════════ ORDEN 31/07 · esquina del módulo (NORTE) — dos correcciones de orden: A) fecha + refrescar + cerrar estaban amontonados (el refrescar caía justo debajo de la pastilla de fecha): ahora son UNA fila alineada, mismo alto, mismos espacios → [ fecha ] ( refrescar ) ( X ). B) el botón flotante "+" dentro de un módulo duplicaba "Nueva solicitud", que ya vive en el rail izquierdo: descansa mientras el módulo está abierto y vuelve solo en el escritorio. Nada se quita: la acción sigue a un clic en el rail (y en móvil el flotante se conserva igual). ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 901px) { /* A · la fila: la X manda el borde (right 24) y los demás se alinean a su izquierda */ body.gk-module-mode #gk-topbar-date { right: 124px !important; top: 24px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; } body.gk-module-mode #btn-refresh-pedidos { position: fixed !important; top: 24px !important; right: 74px !important; z-index: 760 !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #ffffff !important; border: 1px solid #e3e4e7 !important; color: #111214 !important; box-shadow: 0 2px 10px rgba(17, 18, 20, .06) !important; display: grid !important; place-items: center !important; } body.gk-module-mode #btn-refresh-pedidos:hover { background: #f7f7f8 !important; border-color: #a2a4aa !important; } /* B · el flotante descansa con el módulo abierto (la acción vive en el rail) */ body.gk-module-mode .vm-fab, body.gk-module-mode #vm-fab-new { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ ORDEN 31/07 · DIÁLOGO ABIERTO (NORTE) — cuando se abre un diálogo desde el escritorio (Nueva publicación, ficha, catálogo…), el nombre y el buscador del centro NO deben flotar encima: descansan mientras dure el diálogo y vuelven solos al cerrarlo. Los puntos/engranaje/identidad quedan a la vista pero inertes, para que no se pueda abrir un panel encima del diálogo. (Con los paneles del propio escritorio abiertos, nombre y buscador SIGUEN visibles — esa orden del 31/07 no cambia.) ══════════════════════════════════════════════════════════════════════════ */ body.vm-fab-open .gk-uni-brand, body.vm-fab-open .gk-uni-search, body.vm-fab-open .gk-uni-results, body.vm-fab-open .gk-uni-panel, body:has(.modal.show) .gk-uni-brand, body:has(.modal.show) .gk-uni-search, body:has(.modal.show) .gk-uni-results, body:has(.modal.show) .gk-uni-panel, body:has(.modal[style*="flex"]) .gk-uni-brand, body:has(.modal[style*="flex"]) .gk-uni-search, body:has(.modal[style*="flex"]) .gk-uni-results, body:has(.modal[style*="flex"]) .gk-uni-panel { opacity: 0 !important; pointer-events: none !important; } body.vm-fab-open .gk-uni-dots, body.vm-fab-open .gk-uni-cfg-btn, body.vm-fab-open .gk-uni-avatar, body:has(.modal.show) .gk-uni-dots, body:has(.modal.show) .gk-uni-cfg-btn, body:has(.modal.show) .gk-uni-avatar, body:has(.modal[style*="flex"]) .gk-uni-dots, body:has(.modal[style*="flex"]) .gk-uni-cfg-btn, body:has(.modal[style*="flex"]) .gk-uni-avatar { pointer-events: none !important; } /* ══════════════════════════════════════════════════════════════════════════ ESTUDIO DE FICHA (04/08/26) — la ficha de la Bandeja trabaja como un estudio de publicación, con la receta EXACTA del mockup aprobado por el usuario (`index_redisenado_invertido.html`): · HERRAMIENTAS a la IZQUIERDA (inspector fijo de 430px, fondo blanco) · VISTA a la DERECHA (lienzo gris, tarjeta de publicación centrada) · El diseño NUNCA se oculta: se ve siempre, con su texto, en la tarjeta. · Un conmutador cambia la misma vista: Diseño / Instagram / Facebook. · Controles del mockup: botones 38/r9, entradas 40/r9, pestañas en riel gris con la activa blanca, menús de 220px, UN solo sólido por pantalla. Se arma con `display: contents`: los hijos reales (cabecera, rail, paneles, columna de medios) se colocan en la retícula del estudio sin mover un solo nodo del DOM — mismos ids, mismos manejadores, mismas funciones. ══════════════════════════════════════════════════════════════════════════ */ /* tokens del mockup, acotados al modal para no tocar el resto del sistema */ body #solicitud-modal.vm-ws-modal-centered { --e-bg: #f5f6f8; --e-surface: #ffffff; --e-surface-2: #f9fafb; --e-text: #17191f; --e-muted: #697180; --e-line: #e4e7ec; --e-line-strong: #d6dae2; --e-acento: var(--accent, #6238e5); --e-acento-soft: color-mix(in srgb, var(--accent, #6238e5) 8%, #ffffff); --e-sombra: 0 18px 50px rgba(18, 24, 40, .08); --e-sombra-suave: 0 8px 24px rgba(18, 24, 40, .06); --e-insp: 430px; } /* ── la retícula: herramientas | vista ── */ body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { display: grid !important; grid-template-columns: var(--e-insp) minmax(0, 1fr) !important; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto !important; gap: 0 !important; background: var(--e-surface) !important; border-radius: 16px !important; overflow: hidden !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sidebar, body #solicitud-modal.vm-ws-modal-centered .sol-modal-header, body #solicitud-modal.vm-ws-modal-centered .sol-modal-body, body #solicitud-modal.vm-ws-modal-centered .vm-ws-content .ficha-grid { display: contents !important; } /* ── 1 · BARRA SUPERIOR ── */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-head { grid-column: 1 / -1 !important; grid-row: 1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; height: 64px !important; padding: 0 62px 0 20px !important; border-bottom: 1px solid var(--e-line) !important; background: var(--e-surface) !important; text-align: left !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-avatar { width: 36px !important; height: 36px !important; margin: 0 !important; border-radius: 10px !important; font-size: 12px !important; flex-shrink: 0; display: grid !important; place-items: center !important; background: var(--e-acento) !important; color: #fff !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-title { font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; color: var(--e-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; text-align: left !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-meta { margin: 3px 0 0 !important; font-size: 12px !important; color: var(--e-muted) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-badge { margin: 0 0 0 4px !important; flex-shrink: 0; height: 25px !important; padding: 0 9px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; border: 1px solid var(--e-line) !important; background: var(--e-surface-2) !important; color: #505866 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-close { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; position: relative !important; top: auto !important; right: 18px !important; width: 34px !important; height: 34px !important; border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; color: #4d5564 !important; display: grid !important; place-items: center !important; transition: background .18s ease, border-color .18s ease; z-index: 2; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-close:hover { background: var(--e-surface-2) !important; border-color: var(--e-line) !important; } /* ══ HERRAMIENTAS (columna 1) ══════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-head-content { grid-column: 1 !important; grid-row: 2 !important; padding: 20px 22px 0 !important; background: var(--e-surface) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-title { font-size: 15px !important; font-weight: 750 !important; color: var(--e-text) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-sub { font-size: 11px !important; color: var(--e-muted) !important; margin-top: 3px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { grid-column: 1 !important; grid-row: 3 !important; padding: 14px 22px 0 !important; margin: 0 !important; background: var(--e-surface) !important; font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--e-muted) !important; font-weight: 600 !important; } /* pestañas = riel gris con la activa en blanco (platform-switch del mockup) */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { grid-column: 1 !important; grid-row: 4 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 10px 22px 14px !important; padding: 4px !important; background: #ebeef2 !important; border: 1px solid #e1e4e9 !important; border-radius: 10px !important; overflow-x: auto !important; scrollbar-width: none; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail::-webkit-scrollbar { display: none; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab { flex: 1 1 auto !important; flex-direction: row !important; width: auto !important; height: 30px !important; min-height: 0 !important; max-height: 30px !important; min-width: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; color: #5e6675 !important; font-size: 12px !important; font-weight: 650 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; white-space: nowrap; transition: background .18s ease, color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab::before, body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab::after { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab i { font-size: 13px !important; margin: 0 !important; color: inherit !important; background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab .vm-ws-rail-label { display: inline !important; font-size: 12px !important; margin: 0 !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab:hover { background: rgba(255,255,255,.55) !important; color: #3f4653 !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab.active { background: #ffffff !important; color: var(--e-acento) !important; box-shadow: 0 1px 3px rgba(18, 24, 40, .08) !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab-count { position: static !important; margin: 0 0 0 2px !important; min-width: 17px; height: 17px; padding: 0 5px !important; font-size: 10px !important; font-weight: 800 !important; background: var(--e-acento-soft) !important; color: var(--e-acento) !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* el panel activo = el scroll de herramientas */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-content .sol-tab-panel { grid-column: 1 !important; grid-row: 5 !important; min-height: 0; overflow-y: auto; padding: 0 22px 20px !important; margin: 0 !important; background: var(--e-surface) !important; } /* texto del post (lectura) bajo las herramientas */ body #solicitud-modal.vm-ws-modal-centered[data-active-tab] .vm-ws-content #sol-disenos-texto, body #solicitud-modal.vm-ws-modal-centered #sol-disenos-texto { grid-column: 1 !important; grid-row: 6 !important; margin: 0 !important; padding: 14px 22px !important; background: var(--e-surface) !important; border: none !important; border-top: 1px solid var(--e-line) !important; max-height: 24vh; overflow-y: auto; } /* el bloque del texto del post solo aparece cuando TIENE texto (en Ficha ya está el editor) */ body #solicitud-modal.vm-ws-modal-centered #sol-disenos-texto:has(.sdt-body:empty) { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .sdt-label { font-size: 12px !important; font-weight: 700 !important; color: #353c48 !important; margin-bottom: 6px !important; } body #solicitud-modal.vm-ws-modal-centered .sdt-body { font-size: 13px !important; line-height: 1.5 !important; color: #242832 !important; } /* pie de las herramientas */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-footer { grid-column: 1 !important; grid-row: 7 !important; padding: 12px 22px !important; margin: 0 !important; border-top: 1px solid var(--e-line) !important; background: var(--e-surface) !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp { width: fit-content !important; height: 34px !important; padding: 0 14px !important; border-radius: 9px !important; gap: 8px !important; background: #fff !important; color: #353c48 !important; border: 1px solid var(--e-line-strong) !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp:hover { background: var(--e-surface-2) !important; border-color: #c8cdd6 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp i { color: #25D366 !important; font-size: 14px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp span { display: inline !important; font-size: 12px !important; } /* ══ VISTA (columna 2) ═════════════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered[data-active-tab] .vm-ws-content .sol-media-col, body #solicitud-modal.vm-ws-modal-centered .sol-media-col { grid-column: 2 !important; grid-row: 2 / -1 !important; display: block !important; align-self: stretch !important; position: static !important; min-height: 0; overflow-y: auto; padding: 22px 28px 32px !important; background: var(--e-bg) !important; border-left: 1px solid var(--e-line) !important; border-right: none !important; } /* cabecera de la vista: rótulo + formato + conmutador de redes */ body #solicitud-modal.vm-ws-modal-centered .vm-est-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; margin: 0 auto 18px !important; max-width: 980px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-head-izq { display: flex; align-items: center; gap: 9px; min-width: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-head-t { font-size: 14px !important; font-weight: 700 !important; color: var(--e-text) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-chip { height: 25px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--e-line); background: var(--e-surface-2); color: #505866; } body #solicitud-modal.vm-ws-modal-centered .vm-est-chip:empty { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-switch { display: flex; align-items: center; gap: 4px; padding: 4px; background: #ebeef2; border: 1px solid #e1e4e9; border-radius: 10px; flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-sw { border: 0; background: transparent; color: #5e6675; height: 30px; padding: 0 14px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; cursor: pointer; transition: background .18s ease, color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-sw:hover { background: rgba(255,255,255,.55); } body #solicitud-modal.vm-ws-modal-centered .vm-est-sw.on { background: #fff; color: var(--e-acento); box-shadow: 0 1px 3px rgba(18, 24, 40, .08); } body #solicitud-modal.vm-ws-modal-centered .vm-est-sw i { font-size: 13px; } /* el lienzo y la tarjeta de publicación */ body #solicitud-modal.vm-ws-modal-centered .vm-est-shell { max-width: 980px; margin: 0 auto; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 16px; padding: 24px; box-shadow: var(--e-sombra-suave); display: flex; justify-content: center; align-items: flex-start; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card { width: min(100%, 510px); background: #fff; border: 1px solid var(--e-line); border-radius: 13px; overflow: hidden; box-shadow: var(--e-sombra); } body #solicitud-modal.vm-ws-modal-centered .vm-est-post-head { height: 62px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } body #solicitud-modal.vm-ws-modal-centered .vm-est-autor { display: flex; align-items: center; gap: 10px; min-width: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-av { width: 36px; height: 36px; border-radius: 50%; background: var(--e-acento); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-nombre { font-size: 13px; font-weight: 750; color: var(--e-text); } body #solicitud-modal.vm-ws-modal-centered .vm-est-meta { font-size: 11px; color: var(--e-muted); margin-top: 3px; } body #solicitud-modal.vm-ws-modal-centered .vm-est-ico { width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #4d5564; display: grid; place-items: center; padding: 0; cursor: pointer; transition: background .18s ease, border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-ico:hover { background: var(--e-surface-2); border-color: var(--e-line); } /* la pieza: a su medida, sin recortes, dentro de la tarjeta */ body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main { position: relative; background: #eceff3; width: 100% !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; max-height: none !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main img, body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main video { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 62vh !important; object-fit: contain !important; display: block !important; border-radius: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main:empty { min-height: 320px !important; background: #fff !important; border-top: 1px solid var(--e-line) !important; border-bottom: 1px solid var(--e-line) !important; display: grid !important; place-items: center !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main:empty::before { content: 'Todavía no hay diseño'; font-size: 12px; color: var(--e-muted); font-weight: 600; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .empty-state { padding: 40px 20px !important; font-size: 12px; color: var(--e-muted); } /* tira de miniaturas, dentro de la tarjeta */ body #solicitud-modal.vm-ws-modal-centered .vm-est-card .sol-previews-label { padding: 10px 12px 0 !important; margin: 0 !important; font-size: 11px !important; color: var(--e-muted) !important; font-weight: 600 !important; border-top: 1px solid var(--e-line) !important; display: flex !important; align-items: center !important; gap: 6px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .sol-previews-label.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews { display: flex !important; gap: 8px !important; padding: 10px 12px !important; margin: 0 !important; background: #fff !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews:empty { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews > * { position: relative; flex: 1 1 0; min-width: 0; margin: 0 !important; aspect-ratio: 4 / 3; border: 1px solid var(--e-line) !important; border-radius: 8px !important; overflow: hidden !important; background: #eceff3 !important; padding: 0 !important; cursor: pointer; transition: border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews > *:hover { border-color: #b8aecf !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews img, body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* el texto del post, siempre con el diseño */ body #solicitud-modal.vm-ws-modal-centered .vm-est-copy { padding: 14px 16px 16px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: #242832; border-top: 1px solid var(--e-line); } body #solicitud-modal.vm-ws-modal-centered .vm-est-copy.vacio { color: #a2a6ae; font-style: italic; } body #solicitud-modal.vm-ws-modal-centered .vm-est-social { border-top: 1px solid var(--e-line); height: 48px; display: flex; align-items: center; justify-content: space-around; color: #667080; font-size: 12px; } body #solicitud-modal.vm-ws-modal-centered .vm-est-sa { display: inline-flex; align-items: center; gap: 7px; } /* vista "Diseño": solo la pieza (igual que el mockup) */ body #solicitud-modal.vm-ws-modal-centered .vm-est-card.vista-diseno .vm-est-post-head, body #solicitud-modal.vm-ws-modal-centered .vm-est-card.vista-diseno .vm-est-copy, body #solicitud-modal.vm-ws-modal-centered .vm-est-card.vista-diseno .vm-est-social { display: none !important; } /* ══ CONTROLES (receta del mockup, para TODO el modal) ═════════════════════ */ body #solicitud-modal.vm-ws-modal-centered .btn, body #solicitud-modal.vm-ws-modal-centered .vm-btn { height: 38px !important; min-height: 0 !important; padding: 0 14px !important; border-radius: 9px !important; border: 1px solid var(--e-line-strong) !important; background: #fff !important; color: #353c48 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 12px !important; font-weight: 700 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; width: auto !important; transition: background .18s ease, border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .btn:hover, body #solicitud-modal.vm-ws-modal-centered .vm-btn:hover { background: var(--e-surface-2) !important; border-color: #c8cdd6 !important; } body #solicitud-modal.vm-ws-modal-centered .btn-sm { height: 34px !important; padding: 0 12px !important; } body #solicitud-modal.vm-ws-modal-centered .btn i, body #solicitud-modal.vm-ws-modal-centered .vm-btn i { font-size: 13px !important; } /* el ÚNICO sólido: la acción principal */ body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .vm-btn { background: var(--e-acento) !important; color: #fff !important; border-color: var(--e-acento) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .btn i, body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .vm-btn i { color: #fff !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .btn:hover, body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .vm-btn:hover { filter: brightness(.94); } /* entradas */ body #solicitud-modal.vm-ws-modal-centered .input, body #solicitud-modal.vm-ws-modal-centered select.input, body #solicitud-modal.vm-ws-modal-centered .vm-ws-input, body #solicitud-modal.vm-ws-modal-centered input[type="text"], body #solicitud-modal.vm-ws-modal-centered input[type="url"], body #solicitud-modal.vm-ws-modal-centered select { height: 40px !important; padding: 0 12px !important; border: 1px solid var(--e-line-strong) !important; border-radius: 9px !important; background: #fff !important; color: var(--e-text) !important; font-size: 13px !important; box-shadow: none !important; transition: border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .textarea, body #solicitud-modal.vm-ws-modal-centered .vm-ws-textarea, body #solicitud-modal.vm-ws-modal-centered textarea { border: 1px solid var(--e-line-strong) !important; border-radius: 9px !important; background: #fff !important; padding: 12px 13px !important; font-size: 13px !important; line-height: 1.5 !important; box-shadow: none !important; } body #solicitud-modal.vm-ws-modal-centered .input:hover, body #solicitud-modal.vm-ws-modal-centered textarea:hover, body #solicitud-modal.vm-ws-modal-centered select:hover { border-color: #c9ced7 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-label, body #solicitud-modal.vm-ws-modal-centered .form-label { font-size: 12px !important; font-weight: 700 !important; color: #353c48 !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 8px !important; } /* bloques del inspector: separados por línea, sin cajas dentro de cajas */ body #solicitud-modal.vm-ws-modal-centered #sol-area-row { background: transparent !important; border: none !important; border-bottom: 1px solid var(--e-line) !important; border-radius: 0 !important; padding: 0 0 18px !important; margin: 0 0 18px !important; gap: 8px !important; } body #solicitud-modal.vm-ws-modal-centered #sol-area-row .input { flex: 1 1 140px !important; } body #solicitud-modal.vm-ws-modal-centered #link-shortener-panel { background: transparent !important; border: none !important; border-bottom: 1px solid var(--e-line) !important; border-radius: 0 !important; padding: 0 0 18px !important; margin: 0 0 18px !important; } body #solicitud-modal.vm-ws-modal-centered #link-shortener-panel summary { padding: 0 !important; font-size: 12px !important; font-weight: 700 !important; color: #353c48 !important; } body #solicitud-modal.vm-ws-modal-centered #link-shortener-panel > div { padding: 12px 0 0 !important; } /* la tira de emojis: mismos emojis, integrada al editor */ body #solicitud-modal.vm-ws-modal-centered #ficha-emoji-bar { background: var(--e-surface-2) !important; border: 1px solid var(--e-line-strong) !important; border-bottom: none !important; border-radius: 9px 9px 0 0 !important; padding: 7px 9px !important; gap: 2px !important; } body #solicitud-modal.vm-ws-modal-centered #ficha-emoji-bar .emoji-btn { width: 24px !important; height: 24px !important; font-size: 13px !important; border-radius: 7px !important; padding: 0 !important; background: transparent !important; border: none !important; } body #solicitud-modal.vm-ws-modal-centered #ficha-emoji-bar .emoji-btn:hover { background: #eceff3 !important; } body #solicitud-modal.vm-ws-modal-centered #ficha-text { border-radius: 0 0 9px 9px !important; border: 1px solid var(--e-line-strong) !important; min-height: 190px !important; } /* avisos y links: planos, sin tarjetones */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-alert { border-radius: 10px !important; border: 1px solid var(--e-line) !important; background: var(--e-surface-2) !important; padding: 11px 12px !important; box-shadow: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-alert-head { font-size: 12px !important; font-weight: 750 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-alert-body { font-size: 11px !important; color: var(--e-muted) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-link-block { border-radius: 10px !important; border: 1px solid var(--e-line) !important; background: #fff !important; padding: 11px 12px !important; } /* ══ BARRA DE ACCIONES: [Compartir ⌃] [principal] [ … ] ════════════════════ */ /* las filas de acciones originales quedan vacías (sus botones viven en el pie) */ body #solicitud-modal.vm-ws-modal-centered .sol-tab-panel > .btn-row:empty, body #solicitud-modal.vm-ws-modal-centered .sol-tab-panel .vm-ws-actionbar:empty { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-bar { display: contents !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-pri { flex: 1 1 170px; display: flex; order: 3; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap-comp { order: 2; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap-mas { order: 4; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp { order: 1; } body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-pri > .vm-btn { flex: 1 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap { position: relative; flex-shrink: 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 38px !important; padding: 0 14px !important; border: 1px solid var(--e-line-strong) !important; border-radius: 9px !important; background: #fff !important; color: #353c48 !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer; transition: background .18s ease, border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-btn:hover { background: var(--e-surface-2) !important; border-color: #c8cdd6 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-mas { padding: 0 12px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-chev { font-size: 10px !important; color: var(--e-muted) !important; transition: transform .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap.abierto .vm-est-chev { transform: rotate(180deg); } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu { position: fixed; z-index: 4000; width: 220px; background: #fff; border: 1px solid var(--e-line); border-radius: 11px; box-shadow: var(--e-sombra); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } body #solicitud-modal.vm-ws-modal-centered .vm-est-wrap.abierto .vm-est-menu { opacity: 1; visibility: visible; transform: translateY(0); } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .vm-btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .btn-row > .btn { width: 100% !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 0 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #343b47 !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 8px !important; margin: 0 !important; text-align: left !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .btn:hover, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .vm-btn:hover, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .btn-row > .btn:hover { background: var(--e-surface-2) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu #sol-media-actions { display: flex !important; flex-direction: column !important; gap: 2px !important; margin: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > * i { color: var(--e-muted) !important; font-size: 13px !important; width: 16px; text-align: center; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > #btn-wsp i { color: #25D366 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .vm-ws-btn-tag { margin-left: auto; font-size: 10px !important; color: var(--e-muted) !important; background: var(--e-surface-2) !important; border-radius: 999px; padding: 2px 7px; } /* ══ PESTAÑA SUBIR / IA: filas del mockup, no tarjetones ═══════════════════ */ /* elegir cómo subir: dos filas del mockup, no dos tarjetones de color */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; text-align: left !important; border: 1px solid var(--e-line) !important; border-radius: 10px !important; padding: 11px 12px !important; background: var(--e-surface-2) !important; color: var(--e-text) !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; width: 100% !important; transition: background .18s ease, border-color .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice:hover { background: #f2f4f7 !important; border-color: var(--e-line-strong) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice > i { width: 34px !important; height: 34px !important; border-radius: 9px !important; background: var(--e-acento-soft) !important; color: var(--e-acento) !important; display: grid !important; place-items: center !important; font-size: 15px !important; flex-shrink: 0; margin: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice strong { display: block !important; font-size: 12px !important; font-weight: 750 !important; color: var(--e-text) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice span { display: block !important; font-size: 11px !important; color: var(--e-muted) !important; margin-top: 3px !important; } /* el "primario" ya no es un bloque morado: se distingue con el ícono */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice-primary { background: var(--e-surface-2) !important; color: var(--e-text) !important; border-color: var(--e-line) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice-primary > i { background: var(--e-acento) !important; color: #fff !important; } /* el selector de archivos, con la misma piel */ body #solicitud-modal.vm-ws-modal-centered input[type="file"] { width: 100% !important; font-size: 12px !important; color: var(--e-muted) !important; border: 1px dashed var(--e-line-strong) !important; border-radius: 10px !important; background: var(--e-surface-2) !important; padding: 12px !important; } body #solicitud-modal.vm-ws-modal-centered input[type="file"]::file-selector-button { height: 32px; padding: 0 12px; margin-right: 10px; border: 1px solid var(--e-line-strong); border-radius: 8px; background: #fff; color: #353c48; font-size: 12px; font-weight: 700; cursor: pointer; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-ia-grid { grid-template-columns: minmax(0, 1fr) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-ia-col { min-width: 0 !important; background: var(--e-surface-2) !important; border: 1px solid var(--e-line) !important; border-radius: 10px !important; padding: 11px 12px !important; } body #solicitud-modal.vm-ws-modal-centered .dropzone, body #solicitud-modal.vm-ws-modal-centered .vm-ws-dropzone { border: 1px dashed var(--e-line-strong) !important; border-radius: 11px !important; background: var(--e-surface-2) !important; color: var(--e-muted) !important; } /* ── separador del menú (como el mockup: una línea antes de la acción aparte) ── */ body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-sep { height: 1px; background: var(--e-line); margin: 5px 0; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-sep.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba:empty, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo:empty { display: none; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba > .vm-btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo > .vm-btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba > .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo > .btn { width: 100% !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 0 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #343b47 !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 8px !important; margin: 0 !important; text-align: left !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba > *:hover, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo > *:hover { background: var(--e-surface-2) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-arriba > * i, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu-abajo > * i { color: var(--e-muted) !important; font-size: 13px !important; width: 16px; text-align: center; } /* ── AVISOS: los cambios pedidos se ven en TODAS las pestañas ── */ body #solicitud-modal.vm-ws-modal-centered .vm-est-avisos { margin: 14px 0 0 !important; display: grid !important; gap: 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-avisos.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-avisos > * { margin: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-avisos .vm-ws-alert-danger { background: #fff5f5 !important; border: 1px solid #f3d0d0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-avisos .vm-ws-alert-danger .vm-ws-alert-head { color: #c53b3b !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-avisos .vm-ws-alert-warn { background: #fff5e5 !important; border: 1px solid #f0d7a7 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-avisos .vm-ws-alert-warn .vm-ws-alert-head { color: #9a5a00 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-avisos .vm-ws-alert-body { max-height: 118px; overflow-y: auto; margin-top: 6px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-resalta { animation: vmEstResalta 1.6s ease; } @keyframes vmEstResalta { 0%, 100% { box-shadow: 0 0 0 0 rgba(197, 59, 59, 0); } 20%, 60% { box-shadow: 0 0 0 4px rgba(197, 59, 59, .18); } } /* campanita en la barra superior: late mientras haya cambios sin resolver */ body #solicitud-modal.vm-ws-modal-centered .vm-est-campana { display: inline-flex !important; align-items: center; gap: 7px; height: 30px; padding: 0 11px; margin-left: 2px; border: 1px solid #f3d0d0; border-radius: 999px; background: #fff5f5; color: #c53b3b; font-size: 11.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; animation: vmEstCampana 2.4s ease-in-out infinite; transition: background .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-campana:hover { background: #ffecec; } body #solicitud-modal.vm-ws-modal-centered .vm-est-campana.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-campana i { font-size: 12px; transform-origin: 50% 12%; } @keyframes vmEstCampana { 0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(197, 59, 59, 0); } 78% { box-shadow: 0 0 0 5px rgba(197, 59, 59, .16); } 86% { box-shadow: 0 0 0 0 rgba(197, 59, 59, 0); } } @media (prefers-reduced-motion: reduce) { body #solicitud-modal.vm-ws-modal-centered .vm-est-campana { animation: none; } } @media (max-width: 980px) { body #solicitud-modal.vm-ws-modal-centered .vm-est-campana-txt { display: none; } body #solicitud-modal.vm-ws-modal-centered .vm-est-campana { padding: 0 9px; } } /* ── íconos de TRAZO del kit VIMEDIA (sprite ui-icons.svg) ── */ body #solicitud-modal.vm-ws-modal-centered .vm-ic { width: 1.05em; height: 1.05em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab .vm-ic { width: 14px; height: 14px; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice > .vm-ic { width: 34px !important; height: 34px !important; padding: 9px !important; border-radius: 9px !important; background: var(--e-acento-soft) !important; color: var(--e-acento) !important; box-sizing: border-box; margin: 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice-primary > .vm-ic { background: var(--e-acento) !important; color: #fff !important; } /* ── acomodar los diseños: tocar sube al lienzo · arrastrar cambia el orden ── */ body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-previews > .preview-card { position: relative; cursor: grab; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card.arrastrando { opacity: .45; cursor: grabbing; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card.destino { border-color: var(--e-acento) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card.activa { border-color: var(--e-acento) !important; box-shadow: 0 0 0 2px var(--e-acento) inset; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-num { position: absolute; top: 5px; left: 5px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: rgba(18, 24, 40, .72); color: #fff; font-size: 10px; font-weight: 800; line-height: 20px; text-align: center; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card.portada .preview-num { background: var(--e-acento); } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-thumb, body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-thumb img, body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-thumb video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; border-radius: 0 !important; } /* el nombre y los botones del archivo aparecen encima, solo al pasar el mouse */ body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card .preview-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0 !important; padding: 4px 6px !important; background: linear-gradient(to top, rgba(18,24,40,.78), rgba(18,24,40,0)); color: #fff !important; font-size: 9.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card > div:last-child:not(.preview-meta):not(.preview-thumb) { position: absolute; top: 5px; right: 5px; z-index: 3; margin: 0 !important; display: flex !important; gap: 4px !important; opacity: 0; transition: opacity .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card:hover .preview-meta, body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card:hover > div:last-child { opacity: 1; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card .btn-delete-photo { height: 24px !important; min-height: 0 !important; padding: 0 7px !important; font-size: 10px !important; border-radius: 7px !important; background: rgba(255,255,255,.94) !important; color: #3d4552 !important; border: none !important; box-shadow: 0 2px 8px rgba(18,24,40,.14) !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card .btn-delete-photo { color: #c53b3b !important; width: 24px !important; padding: 0 !important; } @media (hover: none) { body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card .preview-meta, body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card > div:last-child { opacity: 1; } } /* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 1260px) { body #solicitud-modal.vm-ws-modal-centered { --e-insp: 390px; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab { padding: 0 8px !important; gap: 5px !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab i { font-size: 12px !important; } body #solicitud-modal.vm-ws-modal-centered .sol-media-col { padding: 18px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-shell { padding: 18px; } } @media (max-width: 980px) { body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-head { grid-column: 1 !important; grid-row: 1 !important; height: auto !important; padding: 12px 56px 12px 16px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-title { font-size: 15px !important; max-width: 68vw; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-close { grid-column: 1 !important; grid-row: 1 !important; right: 12px !important; } body #solicitud-modal.vm-ws-modal-centered[data-active-tab] .vm-ws-content .sol-media-col, body #solicitud-modal.vm-ws-modal-centered .sol-media-col { grid-column: 1 !important; grid-row: 2 / 3 !important; border-left: none !important; border-bottom: 1px solid var(--e-line) !important; max-height: 42vh; padding: 14px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-head { flex-wrap: wrap !important; row-gap: 8px !important; margin-bottom: 12px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-shell { padding: 12px; border-radius: 12px; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main img, body #solicitud-modal.vm-ws-modal-centered .vm-est-card #sol-media-main video { max-height: 28vh !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-head-content { grid-column: 1 !important; grid-row: 3 !important; padding: 14px 16px 0 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { grid-column: 1 !important; grid-row: 4 !important; padding: 10px 16px 0 !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { grid-column: 1 !important; grid-row: 5 !important; margin: 8px 16px 12px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-content .sol-tab-panel { grid-column: 1 !important; grid-row: 6 !important; padding: 0 16px 16px !important; } body #solicitud-modal.vm-ws-modal-centered[data-active-tab] .vm-ws-content #sol-disenos-texto, body #solicitud-modal.vm-ws-modal-centered #sol-disenos-texto { grid-column: 1 !important; grid-row: 7 !important; padding: 12px 16px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-footer { grid-column: 1 !important; grid-row: 8 !important; padding: 10px 16px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp { flex-direction: row !important; height: 34px !important; gap: 8px !important; padding: 0 14px !important; border-radius: 9px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-wsp span { font-size: 12px !important; } body #solicitud-modal.vm-ws-modal-centered .sol-tab-panel > .btn-row, body #solicitud-modal.vm-ws-modal-centered .sol-tab-panel .vm-ws-actionbar { margin: 14px -16px -16px !important; padding: 12px 16px !important; } } /* ══════════════════════════════════════════════════════════════════════════ 05/08/26 · Los links de aprobación dejan de repetirse arriba: viven en el mismo menú "Compartir" del pie. Va al FINAL del archivo a propósito — modern.css tiene contenido repetido y solo lo último manda. ══════════════════════════════════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered .vm-est-menu.vm-est-menu-ancho { width: 340px; max-height: 62vh; overflow-y: auto; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu #sol-aprobacion-links { margin: 6px 0 0 !important; padding: 8px 4px 2px !important; border-top: 1px solid #e4e7ec !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu #sol-aprobacion-links.hidden { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .vm-ws-label { font-size: 11px !important; margin: 0 6px 8px !important; display: block !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .vm-ws-link-block { margin: 0 0 8px !important; padding: 10px !important; border: 1px solid #e4e7ec !important; border-radius: 10px !important; background: #fff !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .vm-ws-link-label { font-size: 11.5px !important; margin-bottom: 6px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .vm-ws-input { height: 32px !important; font-size: 11px !important; margin-bottom: 6px !important; width: 100% !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .vm-ws-btn-row { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .vm-ws-btn-row .vm-btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .vm-ws-btn-row .btn { width: auto !important; flex: 1 1 auto !important; height: 32px !important; justify-content: center !important; padding: 0 10px !important; border: 1px solid #d6dae2 !important; background: #fff !important; margin: 0 !important; } /* ══════════════════════════════════════════════════════════════════════════ 05/08/26 · El nombre de la ficha sube a la barra superior (junto a la X) y la etiqueta "Trabajar" se pone en línea con las pestañas: se recuperan dos renglones enteros de alto para trabajar. Nada se quita, todo se reubica. Va al FINAL del archivo a propósito (modern.css tiene contenido repetido). ══════════════════════════════════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { grid-template-rows: auto 0 0 auto minmax(0, 1fr) auto auto !important; } /* título de la pestaña: arriba a la derecha, antes de la X */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-head-content { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; margin-right: 62px !important; padding: 0 !important; text-align: right !important; z-index: 3; max-width: 46%; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-title { font-size: 13px !important; font-weight: 750 !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-sub { font-size: 10.5px !important; margin-top: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "Trabajar" en línea con las pestañas, sin gastar renglón */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { grid-column: 1 !important; grid-row: 4 !important; align-self: center !important; justify-self: start !important; padding: 0 0 0 22px !important; margin: 0 !important; z-index: 2; font-size: 10.5px !important; letter-spacing: .04em; text-transform: uppercase !important; color: #a2a4aa !important; pointer-events: none; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { margin: 12px 22px 12px 96px !important; } @media (max-width: 980px) { body #solicitud-modal.vm-ws-modal-centered > .modal-content.vm-ws-content { grid-template-rows: auto auto 0 auto auto minmax(0, 1fr) auto auto !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-panel-head-content { grid-column: 1 !important; grid-row: 1 !important; margin-right: 52px !important; max-width: 44%; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { grid-row: 5 !important; padding-left: 16px !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { margin: 10px 16px 10px 86px !important; } } /* ══════════════════════════════════════════════════════════════════════════ 05/08/26 · SUBIR compacto: las dos tarjetas punteadas y las dos filas de modo dejan de ser cuadrotes. Mismo texto, mismo clic, la mitad de alto. ══════════════════════════════════════════════════════════════════════════ */ /* "Subir foto" y "De galería": fila con el ícono al lado, no cuadro apilado */ body #solicitud-modal.vm-ws-modal-centered .upload-drop { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; text-align: left !important; padding: 9px 11px !important; min-height: 0 !important; border: 1px dashed #d6dae2 !important; border-radius: 10px !important; background: #f9fafb !important; color: #17191f !important; font-weight: 600 !important; line-height: 1.25 !important; } body #solicitud-modal.vm-ws-modal-centered .upload-drop:hover, body #solicitud-modal.vm-ws-modal-centered .upload-drop.drag { border-color: var(--accent, #5e2ced) !important; background: #f4f2ff !important; color: #17191f !important; } body #solicitud-modal.vm-ws-modal-centered .upload-drop i { font-size: 15px !important; margin: 0 !important; flex-shrink: 0; width: 30px !important; height: 30px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--accent, #5e2ced) 8%, #ffffff) !important; color: var(--accent, #5e2ced) !important; display: grid !important; place-items: center !important; } /* el
ya no manda: el texto se apila solo en su columna */ body #solicitud-modal.vm-ws-modal-centered .upload-drop br { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .upload-drop span { display: block !important; font-size: 12px !important; font-weight: 700 !important; } body #solicitud-modal.vm-ws-modal-centered .upload-drop span + span { font-size: 10.5px !important; font-weight: 500 !important; color: #6d7480 !important; margin-top: 2px !important; } /* "Subir normal" / "Subir con marco": filas de 48px */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice { padding: 8px 10px !important; gap: 9px !important; border-radius: 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice > .vm-ic, body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice > i { width: 30px !important; height: 30px !important; padding: 7px !important; border-radius: 8px !important; font-size: 14px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice strong { font-size: 12px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice span { font-size: 10.5px !important; margin-top: 1px !important; } /* ══════════════════════════════════════════════════════════════════════════ 05/08/26 · Remates de SUBIR (hallazgos del inventario): a) las dos formas de subir vuelven a ir LADO A LADO (yo mismo las había forzado a una sola columna, por eso se veían largas); b) los tres botones de envío salían BLANCOS IGUALES: mi regla `.btn` con !important le ganaba a sus colores en línea. Se distinguen otra vez por el ícono (azul = centro, violeta = mercadeo), botón blanco como manda la regla de un solo sólido por pantalla. ══════════════════════════════════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } @media (max-width: 1260px) { body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice-row { grid-template-columns: minmax(0, 1fr) !important; } } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice { flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; padding: 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice strong { margin: 0 !important; } /* los tres destinos del envío: mismo botón, ícono con su color */ body #solicitud-modal.vm-ws-modal-centered #btn-envio-centro i { color: #3b82f6 !important; } body #solicitud-modal.vm-ws-modal-centered #btn-envio-mercadeo i { color: #8b5cf6 !important; } body #solicitud-modal.vm-ws-modal-centered #btn-envio-seguir i { color: #6d7480 !important; } body #solicitud-modal.vm-ws-modal-centered #btn-envio-centro, body #solicitud-modal.vm-ws-modal-centered #btn-envio-mercadeo, body #solicitud-modal.vm-ws-modal-centered #btn-envio-seguir { justify-content: flex-start !important; width: 100% !important; } /* "TRABAJAR" fuera: la fila de pestañas ya dice qué es (orden del usuario 05/08) */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-sb-section-label { display: none !important; } body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { margin: 12px 22px !important; } @media (max-width: 980px) { body #solicitud-modal.vm-ws-modal-centered .sol-modal-tabs.vm-ws-rail { margin: 10px 16px !important; } } /* las dos formas de subir: lado a lado PERO en fila (ícono a la izquierda), que apiladas en columna quedaban cuadrotes de 91px */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice { flex-direction: row !important; align-items: center !important; gap: 9px !important; padding: 9px 10px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice > .vm-ic { width: 28px !important; height: 28px !important; padding: 6px !important; border-radius: 8px !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice strong { font-size: 11.5px !important; line-height: 1.2 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-ws-choice span { font-size: 10px !important; line-height: 1.25 !important; margin-top: 2px !important; } /* el título y su detalle van uno debajo del otro (el
está oculto: se arma con retícula, ícono a la izquierda ocupando las dos filas) */ body #solicitud-modal.vm-ws-modal-centered .upload-drop { display: grid !important; grid-template-columns: 30px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 9px !important; row-gap: 1px !important; align-items: center !important; } body #solicitud-modal.vm-ws-modal-centered .upload-drop i { grid-column: 1 !important; grid-row: 1 / 3 !important; } body #solicitud-modal.vm-ws-modal-centered .upload-drop span { grid-column: 2 !important; } body #solicitud-modal.vm-ws-modal-centered .upload-drop span:nth-of-type(1) { grid-row: 1 !important; align-self: end !important; } body #solicitud-modal.vm-ws-modal-centered .upload-drop span:nth-of-type(2) { grid-row: 2 !important; align-self: start !important; } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · EL BORRAR DE LOS DISEÑOS VUELVE A VERSE --------------------------------------------------------------------------- El usuario reportó que "no permite borrar los diseños subidos". El botón nunca se fue: el CSS del estudio lo dejaba en opacity:0 hasta pasar el cursor JUSTO encima de la miniatura. Sin nada que lo anunciara, nadie lo encuentra — y va contra la regla de que el hover no esconde controles. Ahora la fila de acciones (Abrir + papelera) se ve siempre, discreta, y al pasar el cursor se afirma. La papelera no lleva globo: es universal. Va al FINAL del archivo a propósito: modern.css tiene su contenido duplicado desde la línea 9645 y gana la última copia — añadir al final es la única forma segura de tocarlo. ═══════════════════════════════════════════════════════════════════════════ */ body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card > div:last-child:not(.preview-meta):not(.preview-thumb) { opacity: 1 !important; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card .btn-delete-photo { opacity: .82; transition: opacity .18s ease, box-shadow .18s ease; } body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card:hover .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-card .preview-card:hover .btn-delete-photo { opacity: 1; } /* El nombre del archivo sí puede seguir apareciendo al pasar el cursor: es un dato, no un control. */ /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR: LA TARJETA SE VE Y SE PUEDE TOCAR --------------------------------------------------------------------------- Dos cosas que hacían inutilizable la Bandeja en el teléfono: 1. La tarjeta medía 113px dentro de una columna de 327 — quedaba diminuta y con un hueco enorme al lado. Ahora ocupa el ancho de su columna. 2. Los botones de acción están ocultos bajo 700px (decisión previa: "el tap en la card abre"). Ese tap ya está programado en scripts.php, así que la tarjeta ahora es un objetivo táctil de verdad: se le da altura cómoda y se marca al tocarla, para que se note que responde. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body:not(.ws-marcas-active) .vm-bandeja-content .sol-card { width: 100% !important; max-width: none !important; min-height: 128px !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .14s ease, box-shadow .14s ease; } /* Al tocar, la tarjeta responde: sin esto no se sabe si el toque entró */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card:active { transform: scale(.985); } /* El título tiene sitio para leerse: es lo que se busca al escanear la lista */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-title { font-size: 13px !important; line-height: 1.25 !important; -webkit-line-clamp: 3 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR: EL MENÚ DE ACCIONES DE LA FICHA CABE EN LA PANTALLA --------------------------------------------------------------------------- El menú "…" del estudio es `position:fixed` con 220px de ancho, y su posición la calcula el JS a partir del botón. En el teléfono eso lo mandaba fuera de la pantalla: medido, llegaba hasta x=534 en un ancho de 375 — o sea, las acciones de flujo (enviar al centro, a mercadeo, aprobar) quedaban inalcanzables. Bajo 700px deja de flotar junto al botón y se ancla abajo, ocupando el ancho: es el patrón de hoja inferior que ya usamos en el resto del móvil. El `!important` es necesario porque el JS escribe left/top en línea. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body #solicitud-modal.vm-ws-modal-centered .vm-est-menu { left: 10px !important; right: 10px !important; top: auto !important; bottom: 12px !important; width: auto !important; max-height: 62vh; overflow-y: auto; border-radius: 14px; padding: 8px; } /* Objetivo táctil cómodo: 38px se queda corto para el dedo */ body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu > .vm-btn, body #solicitud-modal.vm-ws-modal-centered .vm-est-menu .btn-row > .btn { height: 46px !important; font-size: 13px !important; } /* La etiqueta del botón no empuja el ancho */ body #solicitud-modal.vm-ws-modal-centered .vm-ws-btn-tag { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Pestañas de la ficha: 30px era poco para tocar */ body #solicitud-modal.vm-ws-modal-centered .sol-modal-tab { min-height: 40px !important; max-height: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR · LA BANDEJA ES UNA LISTA, NO UN MOSAICO --------------------------------------------------------------------------- Lo que estaba pasando, medido: la tarjeta tenía la altura CLAVADA en 150px con `height/min-height/max-height` y adentro había 240px de contenido. El sobrante se recortaba, y lo recortado era justo lo que sirve: el TÍTULO y el ID. En pantalla quedaban cajas grises enormes con solo el estado y el centro — imposible saber qué solicitud era cada una, y solo entraban tres. En un teléfono esto tiene que ser una lista que se escanea: miniatura a la izquierda, título y datos a la derecha, y tocar abre. Entran 8-9 en vez de 3. El mosaico con foto grande se queda en el escritorio, donde sí luce. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body:not(.ws-marcas-active) .vm-bandeja-content .sol-card { display: flex !important; flex-direction: row !important; align-items: stretch !important; width: 100% !important; height: auto !important; min-height: 76px !important; max-height: none !important; aspect-ratio: auto !important; padding: 0 !important; overflow: hidden !important; gap: 0 !important; } /* La foto pasa de fondo a miniatura cuadrada */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-bg { position: relative !important; inset: auto !important; width: 76px !important; min-width: 76px !important; height: auto !important; align-self: stretch !important; background-size: cover !important; background-position: center !important; border-radius: 0 !important; filter: none !important; opacity: 1 !important; } /* Sin foto, un bloque neutro para que la fila no se descuadre */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card:not(.sol-card-has-bg) .sol-card-bg { background: var(--vm-n-100, #eef0f4) !important; } /* El texto ocupa el resto y se centra */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-glass { position: relative !important; inset: auto !important; flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 3px !important; padding: 9px 11px !important; background: transparent !important; backdrop-filter: none !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-top { order: 1 !important; display: flex !important; gap: 5px !important; flex-wrap: wrap !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-bottom { order: 2 !important; display: block !important; min-width: 0 !important; } /* EL TÍTULO VUELVE A VERSE — era lo que se recortaba */ body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 13px !important; line-height: 1.3 !important; color: var(--vm-n-900, #17123a) !important; text-shadow: none !important; margin: 0 !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-meta { font-size: 10.5px !important; color: var(--vm-n-500, #6a6c72) !important; text-shadow: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-badge, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-centro { font-size: 9.5px !important; padding: 2px 7px !important; text-shadow: none !important; } /* La retícula pasa a una sola columna con separación corta */ body:not(.ws-marcas-active) .vm-bandeja-content .vm-bandeja-grid, body:not(.ws-marcas-active) .vm-bandeja-content .sol-cards-grid, body:not(.ws-marcas-active) .vm-bandeja-content #list-container, body:not(.ws-marcas-active) .vm-bandeja-content #pedidos-list, body:not(.ws-marcas-active) .vm-bandeja-content #publicadas-list { grid-template-columns: 1fr !important; gap: 8px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR · LA BARRA INFERIOR, SOBRIA --------------------------------------------------------------------------- Estaba con `.f30-mobile-btn.fab`: un cuadro morado sólido de 56px, elevado con `margin:-18px`, sombra fuerte e ícono de 22px. Se comía la barra y gritaba más que el contenido — justo el anti-patrón de tile gigante. Ahora todos los accesos miden lo mismo; el activo se marca con el acento y una pastilla apenas teñida, sin levantarse ni proyectar sombra. El ícono baja a 20px, que es lo que pide el estándar para íconos al servicio del texto. La cuenta roja se queda: es información, no adorno. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body:not(.ws-marcas-active) .f30-mobile-btn, body:not(.ws-marcas-active) .f30-mobile-btn.fab { background: transparent !important; color: #64748b !important; border-radius: 12px !important; margin: 0 !important; min-width: 0 !important; box-shadow: none !important; padding: 7px 2px !important; transition: background .16s ease, color .16s ease !important; } body:not(.ws-marcas-active) .f30-mobile-btn i, body:not(.ws-marcas-active) .f30-mobile-btn.fab i { font-size: 20px !important; } /* El activo: acento y una pastilla teñida, nada de bloque sólido */ body:not(.ws-marcas-active) .f30-mobile-btn.active, body:not(.ws-marcas-active) .f30-mobile-btn.fab.active { color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 11%, transparent) !important; } body:not(.ws-marcas-active) .f30-mobile-btn:active { transform: scale(.94); } /* La barra respira sin ocupar de más */ body:not(.ws-marcas-active) .f30-mobile-nav { padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) !important; gap: 2px !important; } } /* 06/08/26 · Remate de la lista en celular. Faltaban dos cosas medidas en vivo: · la tarjeta traía `aspect-ratio: 3/4`, que con 322px de ancho la estiraba a 429px de alto por más que se pusiera `height:auto`; · `.sol-card-top` se estiraba a 360px al ser hijo flex sin `flex:0 0 auto`. Con esto la fila queda en ~78px y entran 8-9 en pantalla. */ @media (max-width: 700px) { body:not(.ws-marcas-active) .vm-bandeja-content .sol-card { aspect-ratio: auto !important; } body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-top, body:not(.ws-marcas-active) .vm-bandeja-content .sol-card .sol-card-bottom { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; } } /* 06/08/26 · La misma trampa de siempre: entre dos !important gana la MÁS ESPECÍFICA, no la última. La regla que fija `aspect-ratio: 3/4` usa `.vm-bandeja-content.vm-view-cards .sol-card` (dos clases en el contenedor) y le ganaba a la mía. Acá se repite la clase de la tarjeta para subir por encima sin tocar la regla original, que sigue mandando en el escritorio. */ @media (max-width: 700px) { body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card.sol-card { aspect-ratio: auto !important; height: auto !important; min-height: 76px !important; max-height: none !important; display: flex !important; flex-direction: row !important; padding: 0 !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card.sol-card .sol-card-bg { position: relative !important; inset: auto !important; width: 76px !important; min-width: 76px !important; height: auto !important; align-self: stretch !important; flex: 0 0 76px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card.sol-card .sol-card-glass { position: relative !important; inset: auto !important; flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 3px !important; padding: 9px 11px !important; } body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card.sol-card .sol-card-top, body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card.sol-card .sol-card-bottom { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; position: static !important; margin: 0 !important; } } /* 06/08/26 · Lo último que estiraba la fila: `.sol-card-glass` traía `min-height: 240px` (pensado para el mosaico del escritorio, donde la foto manda). Su contenido real en la lista mide 81px. */ @media (max-width: 700px) { body:not(.ws-marcas-active) .vm-bandeja-content.vm-view-cards .sol-card.sol-card .sol-card-glass { min-height: 0 !important; height: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR · LA BARRA INFERIOR CABE Y SE ALCANZA COMPLETA --------------------------------------------------------------------------- Medido en vivo: `.gk-rail` ocupaba 504px en una pantalla de 375, empezando en x=10. Se salía 139px, así que los tres últimos accesos —Nueva solicitud, Nota y Configuración— quedaban FUERA de la pantalla, sin forma de llegar a ellos. Eso era la sensación de "cosas atrapadas". No se quita ninguno: la barra se desliza a lo ancho y el activo se trae solo a la vista. Cada acceso conserva sus 46px, que es un objetivo táctil cómodo. Y el activo deja de ser un bloque morado sólido —el tile gigante que gritaba más que el contenido— para marcarse con el acento sobre una pastilla apenas teñida, como el resto del sistema. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body .gk-rail { max-width: calc(100vw - 20px) !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: 12px; } body .gk-rail::-webkit-scrollbar { display: none; } body .gk-rail .gk-rail-item, body .gk-rail .gk-rail-back { flex: 0 0 auto !important; scroll-snap-align: center; } /* El activo: acento y pastilla teñida, no un bloque sólido */ body .gk-rail .gk-rail-item.gk-active { background: color-mix(in srgb, var(--accent) 13%, transparent) !important; box-shadow: none !important; } body .gk-rail .gk-rail-item.gk-active svg { stroke: var(--accent) !important; fill: none !important; } body .gk-rail .gk-rail-item.gk-active i { color: var(--accent) !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR · BARRA INFERIOR EN CÁPSULA FLOTANTE --------------------------------------------------------------------------- Estilo pedido por el usuario (referencia: la barra flotante oscura de las apps de video). Cambia la piel, NO los accesos: siguen siendo los mismos nueve y ninguno se quita. · Cápsula BLANCA con hairline, despegada de los bordes, flotando sobre el contenido en vez de pegada abajo. Se toma la FORMA de la referencia, no su color: la paleta sigue siendo la tuya (chrome blanco sobre el lienzo). · Íconos en tinta; el activo se marca con una pastilla teñida con TU acento ADENTRO de la cápsula — nada de bloque morado sólido. · Los nueve no caben a lo ancho de un teléfono (9 × 46px = 504 en 375px), así que la cápsula se desliza. Antes se salían de la pantalla y tres accesos eran inalcanzables; ahora se llega a todos. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body .gk-rail { position: fixed !important; left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important; width: auto !important; max-width: none !important; height: auto !important; display: flex !important; align-items: center !important; gap: 2px !important; padding: 6px !important; background: rgba(255, 255, 255, .94) !important; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(23,18,58,.10) !important; border-radius: 999px !important; box-shadow: 0 10px 28px -10px rgba(23,18,58,.30) !important; z-index: 900 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; } body .gk-rail::-webkit-scrollbar { display: none; } body .gk-rail .gk-rail-item, body .gk-rail .gk-rail-back { flex: 0 0 auto !important; width: 46px !important; height: 46px !important; border-radius: 999px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #111214 !important; transition: background .16s ease, color .16s ease !important; } body .gk-rail .gk-rail-item svg, body .gk-rail .gk-rail-back svg { stroke: #111214 !important; fill: none !important; width: 21px !important; height: 21px !important; } body .gk-rail .gk-rail-item i, body .gk-rail .gk-rail-back i { color: #111214 !important; font-size: 19px !important; } /* El activo: pastilla clara adentro de la cápsula, como en la referencia */ body .gk-rail .gk-rail-item.gk-active { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; width: 62px !important; } body .gk-rail .gk-rail-item.gk-active svg { stroke: var(--accent) !important; } body .gk-rail .gk-rail-item.gk-active i { color: var(--accent) !important; } body .gk-rail .gk-rail-item:active { background: rgba(23,18,58,.07) !important; } /* La cápsula flota encima: el contenido necesita sitio para no quedar debajo */ body:not(.ws-marcas-active) .main-content, body:not(.ws-marcas-active) .vm-bandeja-content { padding-bottom: 84px !important; } } /* 06/08/26 · La cápsula seguía midiendo 534px en una pantalla de 375: con `left`, `right` y un `width` heredado, el navegador ignora el `right` y manda el ancho. En vez de pelear con la especificidad se le da el ancho explícito, que no depende de nadie. Los nueve accesos siguen ahí: la cápsula se desliza y se llega a todos. */ @media (max-width: 700px) { body .gk-rail { width: calc(100vw - 24px) !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; right: auto !important; justify-content: flex-start !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR · LAS FILAS QUE SE DESLIZAN AVISAN QUE HAY MÁS --------------------------------------------------------------------------- Los filtros (Todos · Cobán · Salamá · Petén…) y la barra ya se deslizan, pero nada lo anunciaba: el último quedaba partido contra el borde y se leía como "cortado", no como "hay más". Un desvanecido al final lo dice sin ocupar sitio ni agregar un control. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body:not(.ws-marcas-active) .vm-bandeja-content .chip-row, body:not(.ws-marcas-active) .vm-bandeja-content .vm-chips, body:not(.ws-marcas-active) #bandeja-centro-chips, body:not(.ws-marcas-active) .vm-filtros-row { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%); scroll-padding-inline-end: 26px; } /* Que el último quepa entero al deslizar hasta el final */ body:not(.ws-marcas-active) .vm-bandeja-content .chip-row > :last-child, body:not(.ws-marcas-active) #bandeja-centro-chips > :last-child { margin-right: 26px !important; } } /* 06/08/26 · Dos remates de la cápsula: 1. La cuenta roja se salía por arriba y el `overflow` de la cápsula la recortaba a la mitad. Se le da sitio adentro en vez de dejarla asomar. 2. El último acceso se veía partido contra el borde sin nada que dijera que hay más. El mismo desvanecido de los filtros lo anuncia. */ @media (max-width: 700px) { body .gk-rail { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%); } /* La cuenta vive DENTRO del acceso, pegada arriba a la derecha */ body .gk-rail .gk-rail-item .gk-rail-badge { position: absolute !important; top: 3px !important; right: 3px !important; transform: none !important; min-width: 15px !important; height: 15px !important; padding: 0 3px !important; font-size: 9px !important; line-height: 15px !important; border: 0 !important; } body .gk-rail .gk-rail-item { position: relative !important; overflow: visible !important; } } /* 06/08/26 · El primer filtro salía en x=-1 con el contenedor empezando en x=24: un margen negativo lo sacaba fuera y el recorte se lo comía por la izquierda. Se ve como "Todos" partido. Acá se le devuelve su sitio. */ @media (max-width: 700px) { body:not(.ws-marcas-active) .vm-bandeja-content .chip-row > :first-child, body:not(.ws-marcas-active) #bandeja-centro-chips > :first-child, body:not(.ws-marcas-active) .vm-bandeja-content .chip:first-child { margin-left: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR · LOS DOS REMATES QUE FALTABAN --------------------------------------------------------------------------- 1. LOS FILTROS SE SALÍAN POR LA IZQUIERDA La fila centra su contenido, pero el contenido mide 351px en un contenedor de 327. Cuando un flex centrado desborda, el primer elemento se va HACIA AFUERA por la izquierda y ya no se puede alcanzar ni deslizando — es el desbordamiento clásico de `justify-content:center`. Medido: el primer chip quedaba en x=-1 con el contenedor empezando en 24. Con `flex-start` el desborde se va todo a la derecha, que es donde el deslizamiento sí llega. 2. LA CÁPSULA TENÍA UNA BARRA BLANCA DETRÁS Su contenedor `

` seguía pintado como barra: 375x60, fondo blanco y sombra. Se veía un recuadro raro alrededor de la cápsula. La cápsula ya aporta todo el chrome, así que el contenedor se vuelve transparente. NO se oculta: sigue siendo quien la posiciona. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body:not(.ws-marcas-active) #bandeja-centro-chips, body:not(.ws-marcas-active) .vm-bandeja-content .chips, body:not(.ws-marcas-active) .vm-bandeja-content .vm-chips-row, body:not(.ws-marcas-active) .vm-bandeja-content .chip-row { justify-content: flex-start !important; scroll-snap-type: x proximity; } body:not(.ws-marcas-active) #bandeja-centro-chips > *, body:not(.ws-marcas-active) .vm-bandeja-content .chips > * { scroll-snap-align: start; } /* El contenedor de la cápsula deja de pintar barra */ body .app-layout > aside.sidebar, body aside.sidebar:has(.gk-rail) { background: transparent !important; box-shadow: none !important; border: 0 !important; backdrop-filter: none !important; } } /* 06/08/26 · La barra blanca detrás de la cápsula la pintaba `body:not(.ws-marcas-active).gk-module-mode .sidebar` (0,3,1) con !important: fondo, borde superior y sombra. Mi regla anterior tenía menos peso y perdía. Con `aside.sidebar` sumo un elemento más (0,3,2) y gana sin tocar la original, que sigue mandando en el escritorio. El contenedor NO se oculta: sigue siendo quien posiciona la cápsula. Solo deja de pintarse, porque el chrome ya lo pone la cápsula. */ @media (max-width: 700px) { body:not(.ws-marcas-active) aside.sidebar, body:not(.ws-marcas-active).gk-module-mode aside.sidebar { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border-top: 0 !important; border-right: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; min-height: 0 !important; pointer-events: none !important; /* el hueco no roba toques */ } /* La cápsula sí recibe toques */ body:not(.ws-marcas-active) aside.sidebar .gk-rail { pointer-events: auto !important; } } /* 06/08/26 · El fondo blanco venía de `#dashboard-view .sidebar` — con un ID, que le gana a cualquier cantidad de clases por más !important que lleven. Por eso mis intentos anteriores no pegaban. Acá se usa el MISMO id y se suma un elemento (`aside`) para pasarlo por un punto, sin tocar la regla original que sigue mandando en el escritorio. */ @media (max-width: 700px) { body:not(.ws-marcas-active) #dashboard-view aside.sidebar, body:not(.ws-marcas-active) #form-view aside.sidebar { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR · EL "+" FLOTANTE DEJA DE TAPAR LA BARRA --------------------------------------------------------------------------- Medido: el botón flotante (#vm-fab-new, "Nueva publicación") caía en x=305→357, y=742→794, justo ENCIMA del acceso "Más" de la barra (x=299, ancho 74). Por eso "Más" no se podía tocar y el "+" se veía metido dentro del menú. NO se quita: ojo, no es un duplicado. El "+" de la barra es "Nueva SOLICITUD" y el flotante es "Nueva PUBLICACIÓN" — dos acciones distintas que por casualidad comparten el ícono. Se sube por encima de la barra, que es donde va un botón flotante. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body #vm-fab-new, body .vm-fab { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; z-index: 950 !important; } /* Con el flotante arriba, el contenido necesita sitio para el último elemento */ body:not(.ws-marcas-active) .main-content { padding-bottom: 92px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 06/08/26 · CELULAR · "NUEVA PUBLICACIÓN" AL CENTRO Y SIN NADA ENCIMA --------------------------------------------------------------------------- Dos cosas medidas al abrirla: · La hoja salía pegada abajo (y=461→812, ocupando el borde inferior). El usuario la quiere al centro, que además es como se abren el resto de los paneles del sistema — la regla del proyecto es modal centrado, no drawer. · El botón flotante (z-index 950) quedaba ENCIMA de la hoja, tapando la opción "Nota multi-foto". Y además sobraba: la hoja ya trae su propia X arriba a la derecha, así que se esconde mientras está abierta y vuelve al cerrar. No se pierde nada. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body .vm-fab-sheet.vm-fab-sheet-open { display: flex !important; align-items: center !important; justify-content: center !important; padding: 18px !important; } body .vm-fab-sheet .vm-fab-sheet-card { width: 100% !important; max-width: 420px !important; margin: 0 !important; border-radius: 18px !important; max-height: calc(100dvh - 36px) !important; overflow-y: auto !important; } /* Con la hoja abierta, el flotante estorba: la hoja ya tiene su X */ body:has(.vm-fab-sheet-open) #vm-fab-new, body:has(.vm-fab-sheet-open) .vm-fab { display: none !important; } }