/* ========================================================= DESCOAPP — CORPORATE SHOWCASE ========================================================= MÓDULO VISUAL INDEPENDIENTE SOLO PC / ESCRITORIO NO MODIFICA: - carrito - checkout - WhatsApp - backend - server.js - lógica mobile ESTRUCTURA VISUAL: [ PANEL IZQUIERDO ] | [ APP DESCOAPP ] | [ PANEL DERECHO ] El posicionamiento de los paneles se calcula respecto al .app-shell real. ========================================================= */ /* ========================================================= 1. VARIABLES BASE ========================================================= */ :root { --desco-corporate-panel-width: 300px; --desco-corporate-gap: 28px; --desco-corporate-top: 18px; } /* ========================================================= 2. FONDO CORPORATIVO SOLO PC ========================================================= */ @media (min-width: 1100px) { html { min-height: 100%; background-color: #dcecf3; background-image: url("/img/plataforma/TIENDATENDEROS2.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; } body { min-height: 100vh; background: transparent !important; } /* * El .app-shell queda visualmente por encima * del fondo y por encima de los paneles. * * No modificamos su tamaño ni su layout. */ .app-shell { position: relative; z-index: 100; } } /* ========================================================= 3. PANEL IZQUIERDO ========================================================= */ #descoapp-corporate-showcase { display: none; } @media (min-width: 1100px) { #descoapp-corporate-showcase { position: fixed !important; top: var(--desco-corporate-top) !important; bottom: var(--desco-corporate-top) !important; left: var(--desco-corporate-left, 20px) !important; width: var(--desco-corporate-panel-width) !important; max-width: var(--desco-corporate-panel-width) !important; height: calc( 100vh - (var(--desco-corporate-top) * 2) ) !important; box-sizing: border-box !important; display: block !important; /* * IMPORTANTE: * * Antes estaba en 9000 y podía quedar * por encima de la plataforma. * * Ahora la plataforma conserva prioridad. */ z-index: 20 !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,0.94) !important; border-radius: 28px !important; background: linear-gradient( 180deg, rgba(255,255,255,0.96), rgba(241,249,253,0.94) ) !important; box-shadow: 0 24px 70px rgba(22,62,84,0.20), 0 8px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.96) !important; color: #183047 !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; -webkit-font-smoothing: antialiased !important; } /* ===================================================== CONTENEDOR INTERNO ===================================================== */ #descoapp-corporate-showcase .desco-corporate-inner { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ===================================================== CABECERA ===================================================== */ #descoapp-corporate-showcase .desco-corporate-brand { flex: 0 0 auto !important; width: 100% !important; box-sizing: border-box !important; padding: 26px 22px 20px !important; text-align: center !important; border-bottom: 1px solid rgba(53,110,138,0.12) !important; } /* ===================================================== LOGO REAL ===================================================== */ #descoapp-corporate-showcase .desco-corporate-logo-image { display: block !important; width: 170px !important; max-width: 170px !important; height: auto !important; max-height: 95px !important; object-fit: contain !important; margin: 0 auto 14px auto !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== LINEA CORPORATIVA ===================================================== */ #descoapp-corporate-showcase .desco-corporate-line { width: 76px !important; height: 4px !important; margin: 0 auto 12px auto !important; border-radius: 999px !important; background: linear-gradient( 90deg, #00c9e8, #4365f5 ) !important; } /* ===================================================== TITULO ===================================================== */ #descoapp-corporate-showcase .desco-corporate-kicker { margin: 0 0 7px 0 !important; color: #008dca !important; font-size: 0.68rem !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; } #descoapp-corporate-showcase .desco-corporate-title { margin: 0 !important; color: #19334a !important; font-size: 1.18rem !important; line-height: 1.15 !important; font-weight: 900 !important; } #descoapp-corporate-showcase .desco-corporate-description { margin: 9px auto 14px auto !important; max-width: 245px !important; color: #687d8b !important; font-size: 0.73rem !important; line-height: 1.45 !important; } /* ===================================================== ESTADO ===================================================== */ #descoapp-corporate-showcase .desco-platform-status { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 7px 13px !important; border-radius: 999px !important; color: #008bc7 !important; background: rgba(0,196,226,0.10) !important; font-size: 0.62rem !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } #descoapp-corporate-showcase .desco-status-dot { width: 7px !important; height: 7px !important; min-width: 7px !important; border-radius: 50% !important; background: #19d5dd !important; box-shadow: 0 0 0 4px rgba(25,213,221,0.10) !important; } /* ===================================================== SCROLL IZQUIERDO ===================================================== */ #descoapp-corporate-showcase .desco-corporate-scroll { flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 18px 16px 18px !important; scrollbar-width: thin !important; scrollbar-color: rgba(32,180,226,0.55) transparent !important; } #descoapp-corporate-showcase .desco-corporate-scroll::-webkit-scrollbar { width: 7px !important; } #descoapp-corporate-showcase .desco-corporate-scroll::-webkit-scrollbar-track { background: transparent !important; } #descoapp-corporate-showcase .desco-corporate-scroll::-webkit-scrollbar-thumb { border-radius: 999px !important; background: linear-gradient( 180deg, #1ed4e6, #55aaf4 ) !important; } /* ===================================================== SECCIONES ===================================================== */ #descoapp-corporate-showcase .desco-corporate-section { width: 100% !important; box-sizing: border-box !important; margin: 0 0 20px 0 !important; padding: 0 !important; } #descoapp-corporate-showcase .desco-section-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 0 0 10px 0 !important; padding: 0 2px !important; box-sizing: border-box !important; } #descoapp-corporate-showcase .desco-section-heading-text { min-width: 0 !important; } #descoapp-corporate-showcase .desco-section-kicker { display: block !important; margin: 0 0 4px 0 !important; color: #0098d4 !important; font-size: 0.55rem !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; } #descoapp-corporate-showcase .desco-section-title { display: block !important; color: #1c354b !important; font-size: 0.88rem !important; line-height: 1.2 !important; font-weight: 900 !important; } #descoapp-corporate-showcase .desco-section-description { display: block !important; margin: 5px 0 0 0 !important; color: #78909d !important; font-size: 0.60rem !important; line-height: 1.35 !important; } #descoapp-corporate-showcase .desco-section-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 38px !important; width: 38px !important; height: 38px !important; border-radius: 12px !important; color: #079bd6 !important; background: rgba(24,190,231,0.10) !important; font-size: 0.95rem !important; font-weight: 900 !important; } /* ===================================================== CARDS ===================================================== */ #descoapp-corporate-showcase .desco-corporate-cards { display: flex !important; flex-direction: column !important; gap: 9px !important; width: 100% !important; } #descoapp-corporate-showcase .desco-corporate-card { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 72px !important; box-sizing: border-box !important; padding: 10px 10px 10px 12px !important; border: 1px solid rgba(255,255,255,0.95) !important; border-radius: 17px !important; background: linear-gradient( 135deg, rgba(255,255,255,0.96), rgba(244,250,253,0.94) ) !important; box-shadow: 0 8px 20px rgba(25,76,98,0.08) !important; overflow: hidden !important; transition: transform 180ms ease, box-shadow 180ms ease !important; animation: descoCorporateCardIn 420ms cubic-bezier(.22,.8,.25,1) both !important; animation-delay: var(--desco-delay,0ms) !important; } #descoapp-corporate-showcase .desco-corporate-card::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 3px !important; background: #15c9e5 !important; } #descoapp-corporate-showcase .desco-oferta-card::before { background: #9a78ef !important; } #descoapp-corporate-showcase .desco-corporate-card:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(25,76,98,0.13) !important; } /* ===================================================== IMAGEN CARD ===================================================== */ #descoapp-corporate-showcase .desco-card-image { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin: 0 11px 0 0 !important; padding: 5px !important; box-sizing: border-box !important; border-radius: 13px !important; overflow: hidden !important; background: rgba(255,255,255,0.78) !important; } #descoapp-corporate-showcase .desco-card-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } /* ===================================================== TEXTO ===================================================== */ #descoapp-corporate-showcase .desco-card-content { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; } #descoapp-corporate-showcase .desco-card-name { display: block !important; width: 100% !important; color: #1c2d3e !important; font-size: 0.68rem !important; line-height: 1.25 !important; font-weight: 900 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #descoapp-corporate-showcase .desco-card-subtitle { display: block !important; margin: 5px 0 0 0 !important; color: #81919c !important; font-size: 0.54rem !important; line-height: 1.2 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ===================================================== TAG ===================================================== */ #descoapp-corporate-showcase .desco-card-tag { flex: 0 0 auto !important; margin: 0 0 0 7px !important; padding: 5px 7px !important; border-radius: 999px !important; color: #058fca !important; background: rgba(0,173,235,0.09) !important; font-size: 0.45rem !important; line-height: 1 !important; font-weight: 900 !important; white-space: nowrap !important; } #descoapp-corporate-showcase .desco-card-tag.oferta { color: #7657d9 !important; background: rgba(118,87,217,0.09) !important; } /* ===================================================== PLACEHOLDER ===================================================== */ #descoapp-corporate-showcase .desco-card-placeholder { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; color: #159bd3 !important; font-size: 1rem !important; font-weight: 900 !important; } /* ===================================================== EMPTY ===================================================== */ #descoapp-corporate-showcase .desco-empty-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 100px !important; padding: 18px !important; box-sizing: border-box !important; border-radius: 17px !important; background: rgba(255,255,255,0.60) !important; border: 1px dashed rgba(60,130,160,0.18) !important; text-align: center !important; } #descoapp-corporate-showcase .desco-empty-icon { margin-bottom: 7px !important; color: #11b8dc !important; font-size: 1.1rem !important; } #descoapp-corporate-showcase .desco-empty-card strong { color: #294256 !important; font-size: 0.68rem !important; } #descoapp-corporate-showcase .desco-empty-card small { margin-top: 5px !important; color: #82939d !important; font-size: 0.54rem !important; } /* ===================================================== FOOTER IZQUIERDO ===================================================== */ #descoapp-corporate-showcase .desco-corporate-footer { flex: 0 0 auto !important; width: 100% !important; box-sizing: border-box !important; padding: 14px 16px 16px !important; text-align: center !important; border-top: 1px solid rgba(53,110,138,0.11) !important; background: rgba(242,249,252,0.70) !important; } #descoapp-corporate-showcase .desco-footer-line { width: 62px !important; height: 3px !important; margin: 0 auto 8px auto !important; border-radius: 999px !important; background: linear-gradient( 90deg, #11c7df, #6571ec ) !important; } #descoapp-corporate-showcase .desco-corporate-footer span { display: block !important; color: #008fc9 !important; font-size: 0.57rem !important; font-weight: 900 !important; letter-spacing: 0.16em !important; } #descoapp-corporate-showcase .desco-corporate-footer small { display: block !important; margin-top: 5px !important; color: #7b8d98 !important; font-size: 0.48rem !important; } } /* ========================================================= 4. PANEL DERECHO ========================================================= */ @media (min-width: 1100px) { #descoapp-corporate-showcase-right { all: initial; position: fixed !important; top: var(--desco-corporate-top) !important; bottom: var(--desco-corporate-top) !important; right: var(--desco-corporate-right,20px) !important; width: var(--desco-corporate-panel-width) !important; max-width: var(--desco-corporate-panel-width) !important; height: calc( 100vh - (var(--desco-corporate-top) * 2) ) !important; box-sizing: border-box !important; display: block !important; /* * Debe quedar debajo de la aplicación. * El carrito será superior. */ z-index: 20 !important; overflow: hidden !important; border-radius: 28px !important; border: 1px solid rgba(255,255,255,0.92) !important; background: linear-gradient( 180deg, rgba(255,255,255,0.96), rgba(241,249,253,0.94) ) !important; box-shadow: 0 24px 70px rgba(22,62,84,0.20), 0 8px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important; color: #183047 !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; -webkit-font-smoothing: antialiased !important; } #descoapp-corporate-showcase-right .desco-right-inner { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ===================================================== CABECERA DERECHA ===================================================== */ #descoapp-corporate-showcase-right .desco-right-header { flex: 0 0 auto !important; padding: 26px 22px 21px !important; text-align: center !important; border-bottom: 1px solid rgba(53,110,138,0.12) !important; } #descoapp-corporate-showcase-right .desco-right-logo { display: block !important; width: 170px !important; max-width: 170px !important; height: auto !important; max-height: 95px !important; object-fit: contain !important; margin: 0 auto 17px auto !important; padding: 0 !important; } #descoapp-corporate-showcase-right .desco-right-kicker { margin: 0 0 7px 0 !important; color: #008fc9 !important; font-size: 0.62rem !important; font-weight: 900 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; } #descoapp-corporate-showcase-right .desco-right-title { margin: 0 !important; color: #19334a !important; font-size: 1.15rem !important; line-height: 1.15 !important; font-weight: 900 !important; } #descoapp-corporate-showcase-right .desco-right-subtitle { margin: 8px 0 14px 0 !important; color: #748996 !important; font-size: 0.70rem !important; line-height: 1.4 !important; } #descoapp-corporate-showcase-right .desco-right-status { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 7px 13px !important; border-radius: 999px !important; color: #008fc9 !important; background: rgba(0,196,226,0.10) !important; font-size: 0.59rem !important; font-weight: 900 !important; text-transform: uppercase !important; } /* ===================================================== SCROLL DERECHO ===================================================== */ #descoapp-corporate-showcase-right .desco-right-scroll { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 20px 18px !important; box-sizing: border-box !important; scrollbar-width: thin !important; scrollbar-color: rgba(32,180,226,0.55) transparent !important; } #descoapp-corporate-showcase-right .desco-right-scroll::-webkit-scrollbar { width: 7px !important; } #descoapp-corporate-showcase-right .desco-right-scroll::-webkit-scrollbar-thumb { border-radius: 999px !important; background: linear-gradient( 180deg, #1ed4e6, #55aaf4 ) !important; } /* ===================================================== INTRO ===================================================== */ #descoapp-corporate-showcase-right .desco-right-intro { padding: 0 2px 18px !important; text-align: center !important; border-bottom: 1px solid rgba(53,110,138,0.10) !important; } #descoapp-corporate-showcase-right .desco-right-line { width: 70px !important; height: 3px !important; margin: 0 auto 13px auto !important; border-radius: 999px !important; background: linear-gradient( 90deg, #12c7df, #6672ec ) !important; } #descoapp-corporate-showcase-right .desco-right-section-kicker { margin: 0 0 8px 0 !important; color: #008fc9 !important; font-size: 0.55rem !important; font-weight: 900 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; } #descoapp-corporate-showcase-right .desco-right-intro h3 { margin: 0 !important; color: #1c354b !important; font-size: 0.90rem !important; line-height: 1.35 !important; font-weight: 900 !important; } #descoapp-corporate-showcase-right .desco-right-intro p { margin: 8px 0 0 0 !important; color: #718591 !important; font-size: 0.60rem !important; line-height: 1.45 !important; } /* ===================================================== ESTADÍSTICAS ===================================================== */ #descoapp-corporate-showcase-right .desco-right-stats { display: grid !important; grid-template-columns: repeat(3,1fr) !important; width: 100% !important; margin: 18px 0 !important; padding: 0 0 17px !important; border-bottom: 1px solid rgba(53,110,138,0.10) !important; } #descoapp-corporate-showcase-right .desco-stat { text-align: center !important; border-right: 1px solid rgba(53,110,138,0.10) !important; } #descoapp-corporate-showcase-right .desco-stat:last-child { border-right: 0 !important; } #descoapp-corporate-showcase-right .desco-stat strong { display: block !important; color: #1e3a51 !important; font-size: 1.05rem !important; line-height: 1 !important; font-weight: 900 !important; } #descoapp-corporate-showcase-right .desco-stat span { display: block !important; margin-top: 5px !important; color: #81929d !important; font-size: 0.48rem !important; } /* ===================================================== ROADMAP ===================================================== */ #descoapp-corporate-showcase-right .desco-right-roadmap-title { margin: 0 0 10px 2px !important; color: #008fc9 !important; font-size: 0.55rem !important; font-weight: 900 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; } #descoapp-corporate-showcase-right .desco-roadmap { position: relative !important; display: flex !important; flex-direction: column !important; gap: 9px !important; width: 100% !important; } #descoapp-corporate-showcase-right .desco-roadmap::before { content: "" !important; position: absolute !important; top: 27px !important; bottom: 27px !important; left: 22px !important; width: 1px !important; background: linear-gradient( 180deg, rgba(29,195,229,0.35), rgba(101,113,236,0.30) ) !important; } #descoapp-corporate-showcase-right .desco-roadmap-item { position: relative !important; display: flex !important; align-items: center !important; min-height: 68px !important; box-sizing: border-box !important; padding: 9px 10px !important; border: 1px solid rgba(255,255,255,0.95) !important; border-radius: 17px !important; background: linear-gradient( 135deg, rgba(255,255,255,0.93), rgba(244,250,253,0.90) ) !important; box-shadow: 0 7px 18px rgba(25,76,98,0.06) !important; } #descoapp-corporate-showcase-right .desco-roadmap-number { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; border-radius: 14px !important; color: #0799d3 !important; background: linear-gradient( 135deg, #effbff, #e5f1ff ) !important; font-size: 0.58rem !important; font-weight: 900 !important; } #descoapp-corporate-showcase-right .desco-roadmap-content { min-width: 0 !important; margin-left: 11px !important; } #descoapp-corporate-showcase-right .desco-roadmap-content strong { display: block !important; color: #243b4e !important; font-size: 0.65rem !important; line-height: 1.2 !important; font-weight: 900 !important; } #descoapp-corporate-showcase-right .desco-roadmap-content span { display: block !important; margin-top: 5px !important; color: #81919c !important; font-size: 0.49rem !important; line-height: 1.25 !important; } /* ===================================================== MENSAJE COMERCIAL ===================================================== */ #descoapp-corporate-showcase-right .desco-commercial-message { position: relative !important; margin: 18px 0 16px !important; padding: 19px 18px !important; border-radius: 19px !important; overflow: hidden !important; color: white !important; background: linear-gradient( 135deg, #138dd7, #536be8 ) !important; box-shadow: 0 12px 25px rgba(55,101,210,0.18) !important; } #descoapp-corporate-showcase-right .desco-commercial-message::after { content: "" !important; position: absolute !important; width: 100px !important; height: 100px !important; top: -55px !important; right: -35px !important; border-radius: 50% !important; background: rgba(255,255,255,0.11) !important; } #descoapp-corporate-showcase-right .desco-commercial-message small { display: block !important; margin-bottom: 9px !important; color: rgba(255,255,255,0.82) !important; font-size: 0.50rem !important; font-weight: 900 !important; letter-spacing: 0.13em !important; } #descoapp-corporate-showcase-right .desco-commercial-message strong { display: block !important; max-width: 220px !important; color: white !important; font-size: 0.83rem !important; line-height: 1.35 !important; font-weight: 900 !important; } /* ===================================================== FOOTER DERECHO ===================================================== */ #descoapp-corporate-showcase-right .desco-right-footer { flex: 0 0 auto !important; padding: 14px 16px 16px !important; text-align: center !important; border-top: 1px solid rgba(53,110,138,0.10) !important; background: rgba(242,249,252,0.70) !important; } #descoapp-corporate-showcase-right .desco-right-footer-line { width: 62px !important; height: 3px !important; margin: 0 auto 8px auto !important; border-radius: 999px !important; background: linear-gradient( 90deg, #11c7df, #6571ec ) !important; } #descoapp-corporate-showcase-right .desco-right-footer strong { display: block !important; color: #008fc9 !important; font-size: 0.56rem !important; font-weight: 900 !important; letter-spacing: 0.15em !important; } #descoapp-corporate-showcase-right .desco-right-footer small { display: block !important; margin-top: 5px !important; color: #7c8e99 !important; font-size: 0.47rem !important; } } /* ========================================================= 5. CARRITO — SIEMPRE POR ENCIMA ========================================================= Esto NO modifica la lógica del carrito. Solo garantiza su prioridad visual. ========================================================= */ @media (min-width: 1100px) { #carritoPanel, .carrito-panel, #carritoHeader { z-index: 100000 !important; } /* * Si el carrito está dentro de la plataforma, * aseguramos que el contenedor principal también * tenga una capa superior a los paneles. */ .app-shell { z-index: 100 !important; } /* * Los overlays de compra siguen siendo superiores * al carrito y a los paneles. */ .compra-overlay { z-index: 999999 !important; } } /* ========================================================= 6. TABLET / MOBILE NO MOSTRAR CORPORATE SHOWCASE ========================================================= */ @media (max-width: 1099px) { #descoapp-corporate-showcase, #descoapp-corporate-showcase-right { display: none !important; } } /* ========================================================= 7. ANIMACIONES ========================================================= */ @keyframes descoCorporateCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= 8. REDUCIR MOVIMIENTO ========================================================= */ @media (prefers-reduced-motion: reduce) { #descoapp-corporate-showcase *, #descoapp-corporate-showcase *::before, #descoapp-corporate-showcase *::after, #descoapp-corporate-showcase-right *, #descoapp-corporate-showcase-right *::before, #descoapp-corporate-showcase-right *::after { animation: none !important; transition: none !important; } } /* ========================================================= FIN CORPORATE SHOWCASE ========================================================= */