/* ========================================================================= Off-Canvas - Buscador de Conferencistas - Divulga Trigger · Backdrop · Panel (right slide-in) · Buscador dark overrides Encapsulado: todos los selectores usan prefijos .dvg-trigger / .dvg-oc-* / .dvg-offcanvas para no colisionar con Elementor ni el tema padre. ========================================================================= */ /* ========================================================================= TRIGGER BUTTON ========================================================================= */ .dvg-trigger { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; min-height: 48px; padding: 0; border: none; border-radius: 50%; background: rgba(1, 56, 87, 0.92); color: #ffffff; cursor: pointer; font-family: 'Raleway', sans-serif; -webkit-tap-highlight-color: transparent; transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .dvg-trigger:hover { background: #013857; box-shadow: 0 8px 28px rgba(1, 56, 87, 0.45); transform: scale(1.06); } .dvg-trigger:active { transform: scale(0.95); } .dvg-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(18, 209, 53, 0.45); } .dvg-trigger__icon { width: 24px; height: 24px; flex-shrink: 0; pointer-events: none; } /* ========================================================================= BACKDROP Estado oculto puro en el selector base: sin transición para no animar la carga inicial de la página (FOUC). La transición se activa cuando JS agrega .dvg-oc-ready al (después del primer paint). ========================================================================= */ .dvg-oc-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; pointer-events: none; -webkit-tap-highlight-color: transparent; /* Sin transition aquí: evita que el browser anime el estado inicial */ } /* Transición habilitada tras el primer paint (cierre: visibility se retrasa hasta que termina la animación de opacidad) */ body.dvg-oc-ready .dvg-oc-backdrop { transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.4s; } /* Estado visible: backdrop activo */ .dvg-oc-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } /* Apertura: visibility se aplica inmediatamente (sin delay) */ body.dvg-oc-ready .dvg-oc-backdrop.is-visible { transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s; } /* ========================================================================= OFF-CANVAS PANEL Estado oculto puro en el selector base: sin transición para no animar la carga inicial de la página (FOUC). La transición se activa cuando JS agrega .dvg-oc-ready al (después del primer paint). ========================================================================= */ .dvg-offcanvas { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999; width: var(--dvg-oc-width, 300px); max-width: 100vw; display: flex; flex-direction: column; background: rgba(1, 56, 87, 0.89); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); font-family: 'Raleway', sans-serif; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* Estado oculto garantizado por CSS puro, sin depender de JS */ visibility: hidden; opacity: 0; transform: translateX(100%); pointer-events: none; /* Sin transition aquí: evita que el browser anime el estado inicial */ } /* Transición habilitada tras el primer paint (cierre: visibility se retrasa hasta que terminan transform y opacity) */ body.dvg-oc-ready .dvg-offcanvas { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.4s; } /* Estado abierto: panel completamente visible e interactivo */ .dvg-offcanvas.is-open { visibility: visible; opacity: 1; transform: translateX(0); pointer-events: auto; } /* Apertura: visibility se aplica inmediatamente (sin delay) */ body.dvg-oc-ready .dvg-offcanvas.is-open { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s; } /* Bloquea el scroll del body mientras el panel está abierto */ body.dvg-oc-lock { overflow: hidden; } /* ========================================================================= HEADER ========================================================================= */ .dvg-offcanvas__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .dvg-offcanvas__title { color: #ffffff; font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; } /* ========================================================================= BOTÓN CERRAR (X) ========================================================================= */ .dvg-offcanvas__close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; min-height: 42px; padding: 0; border: none; border-radius: 50%; background: transparent; color: #12D135; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .dvg-offcanvas__close:hover { background: rgba(18, 209, 53, 0.12); transform: rotate(90deg); } .dvg-offcanvas__close:active { transform: rotate(90deg) scale(0.9); } .dvg-offcanvas__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(18, 209, 53, 0.4); } .dvg-offcanvas__close svg { width: 22px; height: 22px; pointer-events: none; } /* ========================================================================= CUERPO DEL PANEL ========================================================================= */ .dvg-offcanvas__body { flex: 1; padding: 28px 20px 36px; display: flex; flex-direction: column; min-height: 0; } /* ========================================================================= BUSCADOR — OVERRIDES PARA TEMA OSCURO Mayor especificidad (.dvg-offcanvas .dvg-buscador = 0,2,0) que el selector base (.dvg-buscador = 0,1,0), sin !important. ========================================================================= */ .dvg-offcanvas .dvg-buscador { /* Redefinición de tokens: cascadan a todos los hijos que usan var(--dvg-*) */ --dvg-bg: rgba(1, 30, 50, 0.98); /* fondo de dropdowns de sugerencias */ --dvg-field-bg: rgba(255, 255, 255, 0.09); --dvg-border: rgba(255, 255, 255, 0.16); --dvg-border-hover: rgba(255, 255, 255, 0.34); --dvg-text: #ffffff; --dvg-muted: rgba(255, 255, 255, 0.48); --dvg-accent: #12D135; --dvg-accent-soft: rgba(18, 209, 53, 0.16); --dvg-cta-bg: #12D135; --dvg-cta-bg-hover: #0fb82e; --dvg-cta-text: #012f47; --dvg-shadow: none; --dvg-shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.4); --dvg-ring: 0 0 0 3px rgba(18, 209, 53, 0.3); /* Override directo del contenedor (no usa var() para estas propiedades) */ background: transparent; border: none; box-shadow: none; padding: 0; max-width: 100%; margin: 0; } /* Inputs y selects: color de texto y fondo en tema oscuro */ .dvg-offcanvas .dvg-input, .dvg-offcanvas .dvg-select { color: #ffffff; background: rgba(255, 255, 255, 0.09); } /* Las