/* * 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; grid-template-columns: 160px minmax(0, 1fr) !important; grid-template-rows: 60px minmax(0, 1fr) !important; } } @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: #ffffff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gk-hub-intecap .gk-hub-tile-icon { background: #3b82f6; } .gk-hub-marcas .gk-hub-tile-icon { background: #ec4899; } .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; transition: transform var(--gk-t-fast) var(--gk-ease), box-shadow var(--gk-t-fast) var(--gk-ease); opacity: 0.72; } .gk-rail-item svg { width: 24px; height: 24px; stroke: #ffffff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .gk-rail-item:hover { opacity: 1; transform: scale(1.06); } .gk-rail-item.gk-active { opacity: 1; box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.24); transform: scale(1.06); } .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); } /* Gradientes iguales al launcher */ .gk-rail-item.gk-r-bandeja { background: #7c3aed; } .gk-rail-item.gk-r-publicadas { background: #10b981; } .gk-rail-item.gk-r-calendario { background: #3b82f6; } .gk-rail-item.gk-r-catalogo { background: linear-gradient(135deg, #f59e0b, #d97706); } .gk-rail-item.gk-r-registro { background: linear-gradient(135deg, #0ea5e9, #0284c7); } .gk-rail-item.gk-r-galerias { background: #ec4899; } .gk-rail-item.gk-r-nueva { background: linear-gradient(135deg, #a78bfa, #7c3aed); } .gk-rail-item.gk-r-nota { background: linear-gradient(135deg, #f472b6, #db2777); } .gk-rail-item.gk-r-republicar { background: #75cebb; } .gk-rail-item.gk-r-config { background: linear-gradient(135deg, #3f3f46, #0a0a0b); } /* 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; } /* En Ficha (texto), Historial y Diseño IA NO se muestra el diseño — contenido a todo el ancho. */ #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. */ .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; } #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; } .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. ══════════════════════════════════════════════════════════════════════════ */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) 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(-50%) translateY(0); } [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(-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(-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; }