/* 2. Tooltips y Toasts */ .kumulos-tooltip-parent .kumulos-tooltip { display: none; } .kumulos-tooltip-parent:hover .kumulos-tooltip { display: block; } .kumulos-tooltip { background: #222; position: absolute; top: 50%; padding: 8px 12px; font: 14px helvetica, sans-serif; color: #eee; border-radius: 6px; white-space: nowrap; z-index: 1100; pointer-events: none; transform: translateY(-50%); will-change: opacity, transform; } .kumulos-tooltip:after { content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 100%; border: solid rgba(0, 0, 0, 0); border-width: 8px; margin-top: -8px; } .kumulos-tooltip-right { left: calc(100% + 12px); animation: kumulos-reveal-right 0.2s cubic-bezier(0.23, 1, 0.32, 1); } .kumulos-tooltip-right:after { border-right-color: #222; right: 100%; } .kumulos-tooltip-left { right: calc(100% + 12px); animation: kumulos-reveal-left 0.2s cubic-bezier(0.23, 1, 0.32, 1); } .kumulos-tooltip-left:after { border-left-color: #222; left: 100%; } .kumulos-toast { display: inline-block; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); background: #222; z-index: 1100; padding: 12px; font-size: 16px; font-family: helvetica, sans-serif; color: #eee; border-radius: 8px 8px 0 0; animation: kumulos-toast-in-out 0.25s cubic-bezier(0.23, 1, 0.32, 1); } /* 3. Estructura General */ .kumulos-prompt { box-sizing: border-box; z-index: 1000; } .kumulos-prompt *, .kumulos-prompt *:before, .kumulos-prompt *:after { box-sizing: inherit; } /* 4. Contenedor Píldora (Desktop & Base) */ .kumulos-prompt.kumulos-prompt-ready.kumulos-banner-container { position: fixed !important; bottom: 50px !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; max-width: fit-content !important; min-height: unset !important; height: auto !important; display: flex !important; align-items: center !important; flex-direction: row !important; flex-wrap: nowrap !important; border: 1px solid rgba(243, 244, 246, 0.8) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important; border-radius: 9999px !important; padding: 10px 16px 10px 12px !important; z-index: 10000 !important; animation: kumulos-slide-up-custom 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* 5. Icono */ .kumulos-banner-icon { width: 36px !important; height: 36px !important; background-color: #2b0456 !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-right: 14px !important; background-size: 18px !important; background-position: center !important; background-repeat: no-repeat !important; } /* 6. Contenido */ .kumulos-banner-content { display: flex !important; flex-direction: column !important; margin-right: 18px !important; flex: initial !important; width: auto !important; } .kumulos-banner-header h1 { font-size: 14px !important; color: #111827 !important; margin: 0 !important; line-height: 1.2 !important; } .kumulos-banner-body { font-size: 10px !important; font-weight: 600 !important; color: #9ca3af !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-top: 2px !important; line-height: 1 !important; } /* 7. Acciones y Botones */ .kumulos-banner-actions { display: flex !important; align-items: center !important; flex-direction: row !important; gap: 12px !important; border-left: 1px solid #cdcdcd !important; padding-left: 16px !important; width: auto !important; margin-top: 0 !important; } .kumulos-action-button { background: none !important; border: none !important; padding: 0 !important; cursor: pointer !important; font-family: inherit !important; transition: all 0.2s ease !important; min-width: 0px !important; } /* Botón "X" */ .kumulos-action-button-cancel { width: 24px !important; height: 24px !important; border-radius: 50% !important; position: relative !important; font-size: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .kumulos-action-button-cancel:before, .kumulos-action-button-cancel:after { content: "" !important; position: absolute !important; width: 12px !important; height: 2px !important; background-color: #7a7b7c !important; border-radius: 1px !important; } .kumulos-action-button-cancel:before { transform: rotate(45deg) !important; } .kumulos-action-button-cancel:after { transform: rotate(-45deg) !important; } .kumulos-action-button-cancel:hover { background-color: #f3f4f6 !important; } /* Botón Confirmar */ .kumulos-action-button-confirm { color: #ffffff !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; border-radius: 6px !important; background-color: #2b0456 !important; padding: 6px 14px !important; box-shadow: none !important; } /* 📱 VERSIÓN MÓVIL */ @media (max-width: 480px) { .kumulos-prompt.kumulos-prompt-ready.kumulos-banner-container { width: 90% !important; max-width: 400px !important; padding: 8px 12px !important; justify-content: space-between !important; } .kumulos-banner-icon { width: 32px !important; height: 32px !important; margin-right: 10px !important; } .kumulos-banner-content { margin-right: 10px !important; flex: 1 !important; /* El texto ocupa el espacio central */ } .kumulos-banner-header h1 { font-size: 13px !important; } .kumulos-banner-body { display: none !important; } .kumulos-banner-actions { padding-left: 10px !important; gap: 8px !important; } .kumulos-action-button-confirm { padding: 6px 10px !important; font-size: 11px !important; } } /* 8 y 9. Compatibilidad (Resto de estilos sin cambios) */ .kumulos-checkbox-container { display: block; position: relative; padding-left: 30px; margin-bottom: 12px; cursor: pointer; user-select: none; line-height: 20px; font-size: 0.9em; font-weight: bold; } .kumulos-checkbox-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .kumulos-checkbox { box-sizing: border-box; position: absolute; top: 0; left: 0; height: 20px; width: 20px; border-radius: 3px; border: 1px solid #ddd; } .kumulos-checkbox-container:hover input ~ .kumulos-checkbox { border-color: #aaa; display: block; } .kumulos-checkbox:after { content: ""; position: absolute; display: none; } .kumulos-checkbox-container input:checked ~ .kumulos-checkbox:after { display: block; border-color: #222; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3); } .kumulos-bell-container { position: fixed; } .kumulos-bell-container-bottom-right { bottom: 15px; right: 15px; } .kumulos-bell { transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1); border-radius: 100%; border-color: #fff; background: #4c88e0; box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.54); width: 60px; height: 60px; padding: 10px; transform: scale(0.9); cursor: pointer; animation: kumulos-anim-fade-in 0.2s ease-in; backface-visibility: hidden; } .kumulos-bell svg { fill: #fff; animation: kumulos-anim-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; animation-delay: 0.3s; } .kumulos-channel-dialog-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: row; flex-wrap: wrap; font-family: helvetica, sans-serif; animation: kumulos-anim-fade-in 0.2s ease-in; backface-visibility: hidden; } :root { /* Fuente y General */ --optimove_inbox_font_family: "Roboto", "Inter", sans-serif; --optimove_inbox_width: 350px; --optimove_inbox_background_color: #0f0913; --optimove_inbox_z_index: 2000; --optimove_inbox_margin_horizontal: 20px; /* Ajustado: 300px podría sacar el inbox de la pantalla */ --optimove_inbox_height: 500px; /* Header */ --optimove_inbox_header_background_color: #0f0913; --optimove_inbox_header_text_color: #ffffff; --optimove_inbox_header_text_font_size: 16px; --optimove_inbox_header_bell_fill: #ffffff; --optimove_inbox_header_close_button_fill: #ffffff; /* Mensajes (Cards) */ --optimove_inbox_message_bottom_margin: 12px; --optimove_inbox_message_border_radius: 12px; --optimove_inbox_message_background_read: #252029; --optimove_inbox_message_background_unread: #1c1221; /* Imágenes de los mensajes */ --optimove_inbox_message_images_small_width: 48px; --optimove_inbox_message_images_small_height: 48px; --optimove_inbox_message_images_small_border_radius: 8px; /* Texto de Mensajes */ --optimove_inbox_message_title_font_color: #ffffff; --optimove_inbox_message_title_font_weight: 600; --optimove_inbox_message_font_color: #9ca3af; --optimove_inbox_message_content_font_size: 13px; /* Botones de Acción e Interacción */ --optimove_inbox_message_action_button_color: #eb7a00; --optimove_inbox_action_menu_background_color: #1c1221; --optimove_inbox_action_menu_color: #ffffff; --optimove_inbox_action_menu_hover_color: #eb7a00; } /* Selectores de Clase para detalles que las variables no cubren */ #optimobile-inbox-ui-root-inbox--right .optimobile-inbox-inner-wrapper { border: 1px solid #2d1b38; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); border-radius: 12px; } #optimobile-inbox-ui-root-inbox--right { top: 65px; } .optimobile-inbox-message--unread { border-left: 3px solid #a855f7 !important; } .optimobile-message-inbox-state { color: #e0d9e7 !important; }