/* Capa a pantalla completa que bloquea clics del fondo durante la visita. El oscurecimiento visual lo pinta el spotlight (ver más abajo), así que aquí dejamos un tinte muy suave para que no haya "doble oscurecido" en la zona del elemento resaltado, que se recorta sobre el spotlight. */ .manager-onboarding-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.15); z-index: 9998; animation: manager-onboarding-fade-in 0.25s ease; } /* Spotlight: div posicionado sobre el elemento resaltado (en JS). Su `box-shadow` gigante pinta un velo oscuro que cubre TODA la ventana salvo el recuadro del elemento, produciendo el efecto de foco. Como usa `position: fixed` y se adjunta al , su sombra no se recorta por stacking contexts del resto de la página (p. ej. hero del panel, tarjetas, menús, modales Radzen…). */ .manager-onboarding-spotlight { position: fixed; z-index: 99998; pointer-events: none; border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.7); animation: manager-onboarding-fade-in 0.25s ease; transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease; /* Evita que un navegador intente recortar la sombra por el contenido del body cuando hay `overflow-x: hidden` en el root. */ contain: layout; } @keyframes manager-onboarding-fade-in { from { opacity: 0; } to { opacity: 1; } } /* --- Highlight del elemento enfocado en la visita guiada --- Se eleva con un z-index por encima del spotlight (99998) para quedar visible mientras el resto de la página queda tras el velo oscuro. El pulso es sutil (grosor y offset del outline) para llamar la atención sin añadir ruido visual alrededor. */ /* `position: relative` rompe widgets del chat (p. ej. Druid) que van en fixed: si el elemento ya está posicionado (no static), solo resaltamos sin tocar position. */ .manager-onboarding-highlight { z-index: 99999 !important; outline: 4px solid var(--accent-color, #ff6a00); outline-offset: 4px; border-radius: 10px; background-color: inherit; animation: manager-onboarding-pulse 1.6s ease-in-out infinite; transition: outline-color 0.2s ease; } .manager-onboarding-highlight:not(.manager-onboarding-highlight--preserve-position) { position: relative; } @keyframes manager-onboarding-pulse { 0%, 100% { outline-width: 4px; outline-offset: 4px; outline-color: var(--accent-color, #ff6a00); } 50% { outline-width: 5px; outline-offset: 7px; outline-color: #ffa24a; } } /* ------------------------------------------------------------------ */ /* Diálogos Radzen abiertos durante la visita. Queremos que el contenido del diálogo quede POR ENCIMA del spotlight (99998) para que se vea nítido, pero el velo gris del propio Radzen (.rz-dialog-mask) NO debe elevarse ni pintar: si se eleva, tiñe de gris el modal (paso 10) y tapa el outline (paso 6). Por eso solo subimos el wrapper y el dialog, y anulamos el mask (el oscurecimiento ya lo hace nuestro spotlight). */ body.manager-onboarding-has-overlay .rz-dialog-wrapper, body.manager-onboarding-has-overlay .rz-dialog { z-index: 99999 !important; } body.manager-onboarding-has-overlay .rz-dialog-mask, body.manager-onboarding-has-overlay .rz-overlay, body.manager-onboarding-has-overlay .rz-dialog-mask-modal { background: transparent !important; /* Lo dejamos por debajo incluso del backdrop del tour para que no se superponga a nada visible. */ z-index: 9996 !important; } /* Durante el paso del asistente, elevar el contenedor y el widget Druid por encima del spotlight para que el icono inicial del chat se vea claramente aunque esté cerrado. */ body.manager-onboarding-chatbot-tour #chatbot-container, body.manager-onboarding-chatbot-tour #chatbot-container *, body.manager-onboarding-chatbot-tour .druid-webchat, body.manager-onboarding-chatbot-tour #druid-webchat, body.manager-onboarding-chatbot-tour .druidWebchatRoot_v2, body.manager-onboarding-chatbot-tour [class*="druid__minimizable_web-chat"], body.manager-onboarding-chatbot-tour [class*="druidWebchat"], body.manager-onboarding-chatbot-tour [id*="druid"], body.manager-onboarding-chatbot-tour [class*="druid"] { z-index: 99999 !important; } /* El contenedor del chatbot ya está posicionado con position: fixed (ver chatbot-hide.css). Si el highlight se aplica sobre él, mantenemos el position fixed para no romper la ubicación. */ #chatbot-container.manager-onboarding-highlight { position: fixed !important; } .manager-onboarding-panel { position: fixed; z-index: 100000; max-width: 440px; width: calc(100% - 2.5rem); box-sizing: border-box; background: #fff; color: #1f2937; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); border: 1px solid rgba(0, 0, 0, 0.06); overflow: hidden; transition: top 0.28s ease, bottom 0.28s ease, left 0.28s ease, right 0.28s ease, transform 0.28s ease, margin 0.28s ease; } .manager-onboarding-panel--bottom-end { bottom: 1.25rem; top: auto; right: 1.25rem; left: 1.25rem; margin-left: auto; margin-right: 0; transform: none; } .manager-onboarding-panel--bottom-start { bottom: 1.25rem; top: auto; left: 1.25rem; right: auto; margin-left: 0; transform: none; } .manager-onboarding-panel--top-end { top: 1.25rem; bottom: auto; right: 1.25rem; left: 1.25rem; margin-left: auto; margin-right: 0; transform: none; } .manager-onboarding-panel--top-start { top: 1.25rem; bottom: auto; left: 1.25rem; right: auto; margin-left: 0; transform: none; } .manager-onboarding-panel--top-center { top: 1.25rem; bottom: auto; left: 50%; right: auto; margin-left: 0; transform: translateX(-50%); } .manager-onboarding-panel-inner { padding: 1.1rem 1.25rem 1rem; } .manager-onboarding-panel h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; color: #111827; } .manager-onboarding-panel p { font-size: 0.92rem; line-height: 1.5; margin: 0 0 0.75rem; color: #4b5563; white-space: pre-line; } .manager-onboarding-progress { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin-bottom: 0.65rem; } .manager-onboarding-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; align-items: center; margin-top: 0.5rem; padding-top: 0.65rem; border-top: 1px solid #e5e7eb; } .manager-onboarding-actions .btn-link { font-size: 0.85rem; margin-right: auto; padding-left: 0; } @media (max-width: 576px) { .manager-onboarding-panel { width: calc(100% - 1.5rem); max-width: none; } .manager-onboarding-panel--bottom-end, .manager-onboarding-panel--bottom-start { right: 0.75rem; left: 0.75rem; bottom: 0.75rem; top: auto; margin-left: 0; transform: none; } .manager-onboarding-panel--top-end, .manager-onboarding-panel--top-start, .manager-onboarding-panel--top-center { top: 0.75rem; left: 0.75rem; right: 0.75rem; bottom: auto; transform: none; margin-left: 0; } }