/* ============================================================================= IPV6 Informática — Widget del Agente IA Estilos autocontenidos y "scoped" bajo .ipv6chat para no chocar con la web. Soporta modo claro/oscuro vía: - atributo [data-ipv6-theme="dark"|"light"] en o en el contenedor - o, si no se fuerza, el ajuste del sistema (prefers-color-scheme) ========================================================================== */ .ipv6chat { /* ---- Paleta (modo claro por defecto) ---- */ --c-brand-1: #0b67ff; /* azul IPv6 */ --c-brand-2: #00c2d1; /* cian de acento */ --c-grad: linear-gradient(135deg, var(--c-brand-1), var(--c-brand-2)); --c-bg: #ffffff; --c-bg-soft: #f4f7fb; --c-surface: #ffffff; --c-text: #0d1b2a; --c-text-soft: #5b6b7d; --c-border: #e4eaf2; --c-bot-bubble: #f1f5fb; --c-bot-text: #0d1b2a; --c-user-text: #ffffff; --c-shadow: 0 18px 50px -12px rgba(11, 31, 51, 0.28); --c-ring: rgba(11, 103, 255, 0.35); position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 2147483000; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--c-text); -webkit-font-smoothing: antialiased; } /* ---- Modo oscuro (forzado por atributo) ---- */ .ipv6chat[data-ipv6-theme='dark'] { --c-bg: #0c1626; --c-bg-soft: #0f1d31; --c-surface: #101f35; --c-text: #eaf1fb; --c-text-soft: #93a6bf; --c-border: #1d3149; --c-bot-bubble: #16263e; --c-bot-text: #eaf1fb; --c-shadow: 0 22px 60px -14px rgba(0, 0, 0, 0.6); --c-ring: rgba(0, 194, 209, 0.4); } /* ---- Modo oscuro automático (sistema) cuando no se fuerza tema ---- */ @media (prefers-color-scheme: dark) { .ipv6chat:not([data-ipv6-theme='light']) { --c-bg: #0c1626; --c-bg-soft: #0f1d31; --c-surface: #101f35; --c-text: #eaf1fb; --c-text-soft: #93a6bf; --c-border: #1d3149; --c-bot-bubble: #16263e; --c-bot-text: #eaf1fb; --c-shadow: 0 22px 60px -14px rgba(0, 0, 0, 0.6); --c-ring: rgba(0, 194, 209, 0.4); } } .ipv6chat *, .ipv6chat *::before, .ipv6chat *::after { box-sizing: border-box; } /* ========================= LANZADOR (botón flotante) ===================== */ .ipv6chat__launcher { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; } .ipv6chat__fab { height: 56px; min-width: 56px; border: none; border-radius: 999px; cursor: pointer; background: var(--c-grad); color: #fff; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 20px 0 16px; box-shadow: var(--c-shadow); position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease, padding 0.25s ease; } .ipv6chat__fab:hover { transform: translateY(-2px) scale(1.03); } .ipv6chat__fab:active { transform: scale(0.97); } .ipv6chat__fab svg { width: 26px; height: 26px; flex: none; } .ipv6chat__fab .ico-close { display: none; } /* Etiqueta de la píldora ("¿Te ayudo?") */ .ipv6chat__fab-label { font-size: 15px; font-weight: 700; white-space: nowrap; max-width: 160px; opacity: 1; overflow: hidden; transition: max-width 0.25s ease, opacity 0.18s ease; } /* Estado compacto: al hacer scroll o con el chat abierto, la píldora se contrae a un círculo de solo icono. */ .ipv6chat.is-compact .ipv6chat__fab, .ipv6chat.is-open .ipv6chat__fab { padding: 0; width: 56px; gap: 0; } .ipv6chat.is-compact .ipv6chat__fab-label, .ipv6chat.is-open .ipv6chat__fab-label { max-width: 0; opacity: 0; } /* Anillo de pulso para llamar la atención */ .ipv6chat__fab::after { content: ''; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 var(--c-ring); animation: ipv6-pulse 2.4s ease-out infinite; } @keyframes ipv6-pulse { 0% { box-shadow: 0 0 0 0 var(--c-ring); } 70% { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } /* Globo "teaser" que invita a hablar (se oculta al abrir el chat) */ .ipv6chat__teaser { max-width: 220px; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 16px 16px 4px 16px; padding: 12px 14px; font-size: 14px; line-height: 1.35; box-shadow: var(--c-shadow); animation: ipv6-rise 0.4s ease both; position: relative; } .ipv6chat__teaser b { color: var(--c-brand-1); } .ipv6chat[data-ipv6-theme='dark'] .ipv6chat__teaser b { color: var(--c-brand-2); } .ipv6chat__teaser-close { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-soft); cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center; } /* ========================= PANEL DEL CHAT =============================== */ .ipv6chat__panel { position: absolute; right: 0; bottom: 78px; width: min(380px, calc(100vw - 28px)); height: min(620px, calc(100vh - 120px)); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 20px; box-shadow: var(--c-shadow); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } .ipv6chat.is-open .ipv6chat__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .ipv6chat.is-open .ipv6chat__fab .ico-chat { display: none; } .ipv6chat.is-open .ipv6chat__fab .ico-close { display: block; } .ipv6chat.is-open .ipv6chat__fab::after { animation: none; } .ipv6chat.is-open .ipv6chat__teaser { display: none; } /* ---- Cabecera ---- */ .ipv6chat__header { background: var(--c-grad); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; } .ipv6chat__avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: grid; place-items: center; flex: none; backdrop-filter: blur(4px); } .ipv6chat__avatar svg { width: 24px; height: 24px; } .ipv6chat__avatar { overflow: hidden; } .ipv6chat__avatar img, .ipv6chat__mini-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Con imagen de avatar: formato cuadrado, sin redondear */ .ipv6chat__avatar:has(img), .ipv6chat__mini-avatar:has(img) { border-radius: 0; background: none; } .ipv6chat__title { font-weight: 700; font-size: 15px; line-height: 1.1; } .ipv6chat__status { font-size: 12px; opacity: 0.92; display: flex; align-items: center; gap: 6px; margin-top: 3px; } .ipv6chat__dot { width: 8px; height: 8px; border-radius: 50%; background: #38e08a; box-shadow: 0 0 0 0 rgba(56, 224, 138, 0.7); animation: ipv6-onlinepulse 2s infinite; } @keyframes ipv6-onlinepulse { 0% { box-shadow: 0 0 0 0 rgba(56, 224, 138, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(56, 224, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(56, 224, 138, 0); } } .ipv6chat__hdr-actions { margin-left: auto; display: flex; gap: 4px; } .ipv6chat__icon-btn { width: 32px; height: 32px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease; } .ipv6chat__icon-btn:hover { background: rgba(255, 255, 255, 0.25); } .ipv6chat__icon-btn svg { width: 18px; height: 18px; } /* ---- Zona de mensajes ---- */ .ipv6chat__messages { flex: 1; overflow-y: auto; padding: 18px 16px 8px; background: var(--c-bg-soft); display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; } .ipv6chat__messages::-webkit-scrollbar { width: 8px; } .ipv6chat__messages::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 8px; } .ipv6chat__msg { display: flex; gap: 8px; max-width: 88%; animation: ipv6-rise 0.32s ease both; } .ipv6chat__msg--bot { align-self: flex-start; } .ipv6chat__msg--user { align-self: flex-end; flex-direction: row-reverse; } .ipv6chat__bubble { padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .ipv6chat__msg--bot .ipv6chat__bubble { background: var(--c-bot-bubble); color: var(--c-bot-text); border-bottom-left-radius: 5px; } .ipv6chat__msg--user .ipv6chat__bubble { background: var(--c-grad); color: var(--c-user-text); border-bottom-right-radius: 5px; } .ipv6chat__bubble a { color: inherit; text-decoration: underline; } .ipv6chat__bubble ul, .ipv6chat__bubble ol { margin: 6px 0; padding-left: 20px; } .ipv6chat__bubble li { margin: 3px 0; } .ipv6chat__bubble code { background: rgba(127, 127, 127, 0.18); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 0.9em; } .ipv6chat__bubble .md-h { display: inline-block; margin-top: 4px; } .ipv6chat__working { font-style: italic; color: var(--c-text-soft); font-size: 13px; } .ipv6chat__mini-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--c-grad); color: #fff; display: grid; place-items: center; flex: none; align-self: flex-end; } .ipv6chat__mini-avatar svg { width: 16px; height: 16px; } .ipv6chat__msg--user .ipv6chat__mini-avatar { display: none; } /* Indicador "escribiendo…" */ .ipv6chat__typing { display: flex; gap: 4px; align-items: center; padding: 4px 2px; } .ipv6chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-text-soft); animation: ipv6-blink 1.3s infinite both; } .ipv6chat__typing span:nth-child(2) { animation-delay: 0.2s; } .ipv6chat__typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes ipv6-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } /* Sugerencias rápidas */ .ipv6chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; background: var(--c-bg-soft); } .ipv6chat__chip { border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); border-radius: 999px; padding: 7px 13px; font-size: 13px; cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; } .ipv6chat__chip:hover { border-color: var(--c-brand-1); transform: translateY(-1px); } /* ---- Barra de entrada ---- */ .ipv6chat__inputbar { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--c-border); background: var(--c-bg); } .ipv6chat__textarea { flex: 1; resize: none; border: 1px solid var(--c-border); background: var(--c-bg-soft); color: var(--c-text); border-radius: 14px; padding: 11px 14px; font: inherit; font-size: 14.5px; line-height: 1.4; max-height: 120px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ipv6chat__textarea::placeholder { color: var(--c-text-soft); } .ipv6chat__textarea:focus { border-color: var(--c-brand-1); box-shadow: 0 0 0 3px var(--c-ring); } .ipv6chat__send { width: 44px; height: 44px; flex: none; border: none; border-radius: 12px; background: var(--c-grad); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform 0.12s ease, opacity 0.15s ease; } .ipv6chat__send:hover { transform: scale(1.06); } .ipv6chat__send:disabled { opacity: 0.45; cursor: default; transform: none; } .ipv6chat__send svg { width: 20px; height: 20px; } .ipv6chat__footer { text-align: center; font-size: 11px; color: var(--c-text-soft); padding: 0 0 10px; background: var(--c-bg); } .ipv6chat__footer b { color: var(--c-brand-1); } .ipv6chat[data-ipv6-theme='dark'] .ipv6chat__footer b { color: var(--c-brand-2); } @keyframes ipv6-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Contador de mensajes no leídos en el botón flotante */ .ipv6chat__badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ff3b5c; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--c-bg); } /* Móvil: panel a pantalla completa con safe-areas */ @media (max-width: 640px) { .ipv6chat.is-open .ipv6chat__panel { position: fixed; inset: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; border-radius: 0; border: none; bottom: 0; } .ipv6chat__header { padding-top: calc(16px + env(safe-area-inset-top, 0px)); } .ipv6chat__inputbar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .ipv6chat.is-open .ipv6chat__launcher { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 1; } /* El botón flotante queda oculto tras el panel a pantalla completa: la ✕ de la cabecera es el cierre en móvil. */ .ipv6chat.is-open .ipv6chat__fab { display: none; } } /* Bloqueo del scroll de fondo cuando el chat está abierto en móvil */ html.ipv6chat-lock, html.ipv6chat-lock body { overflow: hidden; overscroll-behavior: none; } @media (prefers-reduced-motion: reduce) { .ipv6chat *, .ipv6chat *::before, .ipv6chat *::after { animation: none !important; transition: none !important; } }