/* ============================================================ LiZ Tech - Soporte Técnico · Widget de chat Paleta: ciruela ILC Academy + acento teal (mascota LiZ Tech) Tipografía: Oswald (encabezados) + Poppins (cuerpo) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Poppins:wght@400;500;600&display=swap'); :root{ --lt-plum-900:#2E1530; --lt-plum-800:#3D1B3D; --lt-plum-600:#6B3868; --lt-plum-500:#8B4C87; --lt-plum-300:#B47FAE; --lt-teal:#2FA79B; --lt-teal-light:#5CC4B9; --lt-cream:#FDFBFA; --lt-bg-light:#F7F3F6; --lt-bg-dark:#1E1220; --lt-panel-light:#FFFFFF; --lt-panel-dark:#2A1A2C; --lt-text-dark:#2E1530; --lt-text-light:#FDFBFA; } #liztech-widget-root{ position: fixed; bottom: 24px; right: 24px; z-index: 999999; font-family: 'Poppins', sans-serif; } /* ---------- Botón flotante (FAB) ---------- */ .liztech-fab{ width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; background: transparent; border: none; padding: 0; } .liztech-fab img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(61,27,61,0.5)); transition: transform 0.2s ease; } .liztech-fab:hover img{ transform: scale(1.06); } .liztech-fab::after{ content: ''; position: absolute; top: 0px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--lt-teal); border: 2px solid var(--lt-bg-light); box-shadow: 0 0 0 0 rgba(47,167,155,0.6); animation: liztech-pulse 2.4s infinite; z-index: 2; } @keyframes liztech-pulse{ 0%{ box-shadow: 0 0 0 0 rgba(47,167,155,0.55); } 70%{ box-shadow: 0 0 0 10px rgba(47,167,155,0); } 100%{ box-shadow: 0 0 0 0 rgba(47,167,155,0); } } /* ---------- Panel del chat ---------- */ .liztech-panel{ width: 340px; max-width: calc(100vw - 32px); height: 500px; max-height: calc(100vh - 120px); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(46,21,48,0.35); display: flex; flex-direction: column; background: var(--lt-panel-light); position: absolute; bottom: 90px; right: 0; opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .liztech-panel.is-open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* Modo oscuro: el portal real (portal.css/portal.js) lo activa con el atributo data-theme="dark" en (document.documentElement), guardado en localStorage -- no una clase en . Confirmado contra assets/portal.css real de pay.ilcacademy.com (2026-07-22). */ :root[data-theme="dark"] .liztech-panel{ background: var(--lt-panel-dark); } .liztech-header{ background: linear-gradient(120deg, var(--lt-plum-800), var(--lt-plum-600)); padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .liztech-avatar{ width: 46px; height: 46px; flex-shrink: 0; } .liztech-avatar img{ width: 100%; height: 100%; object-fit: contain; } .liztech-header-text{ flex: 1; min-width: 0; } .liztech-header-text .liztech-name{ font-family: 'Oswald', sans-serif; color: var(--lt-cream); font-size: 16px; font-weight: 600; letter-spacing: 0.3px; line-height: 1.2; } .liztech-header-text .liztech-status{ display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lt-teal-light); margin-top: 2px; } .liztech-status .liztech-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--lt-teal-light); flex-shrink: 0; } .liztech-close{ color: rgba(255,255,255,0.75); font-size: 20px; cursor: pointer; padding: 4px 6px; line-height: 1; background: none; border: none; } .liztech-close:hover{ color: #fff; } .liztech-messages{ flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; background: var(--lt-bg-light); } :root[data-theme="dark"] .liztech-messages{ background: var(--lt-bg-dark); } .liztech-bubble{ max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; word-wrap: break-word; } .liztech-bubble.liztech-bot{ background: var(--lt-panel-light); color: var(--lt-text-dark); align-self: flex-start; border: 1px solid #EAD9E8; border-bottom-left-radius: 4px; } :root[data-theme="dark"] .liztech-bubble.liztech-bot{ background: #3A2440; color: var(--lt-text-light); border-color: #4A3050; } .liztech-bubble.liztech-user{ background: linear-gradient(120deg, var(--lt-plum-600), var(--lt-plum-500)); color: var(--lt-cream); align-self: flex-end; border-bottom-right-radius: 4px; } .liztech-typing{ align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: var(--lt-panel-light); border-radius: 14px; border-bottom-left-radius: 4px; border: 1px solid #EAD9E8; } :root[data-theme="dark"] .liztech-typing{ background: #3A2440; border-color: #4A3050; } .liztech-typing span{ width: 6px; height: 6px; border-radius: 50%; background: var(--lt-plum-300); animation: liztech-blink 1.2s infinite; } .liztech-typing span:nth-child(2){ animation-delay: 0.2s; } .liztech-typing span:nth-child(3){ animation-delay: 0.4s; } @keyframes liztech-blink{ 0%,100%{opacity:0.3;} 50%{opacity:1;} } .liztech-quick-replies{ display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; background: var(--lt-bg-light); flex-shrink: 0; } :root[data-theme="dark"] .liztech-quick-replies{ background: var(--lt-bg-dark); } .liztech-quick-replies button{ font-family: 'Poppins', sans-serif; font-size: 12.5px; padding: 7px 12px; border-radius: 16px; border: 1.5px solid var(--lt-plum-500); background: transparent; color: var(--lt-plum-600); cursor: pointer; } :root[data-theme="dark"] .liztech-quick-replies button{ color: var(--lt-teal-light); border-color: var(--lt-teal); } .liztech-input-row{ display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--lt-panel-light); border-top: 1px solid #EAD9E8; flex-shrink: 0; } :root[data-theme="dark"] .liztech-input-row{ background: var(--lt-panel-dark); border-color: #4A3050; } .liztech-input-row input{ flex: 1; border: 1.5px solid #E3D2E1; border-radius: 24px; padding: 11px 16px; font-family: 'Poppins', sans-serif; font-size: 14px; outline: none; background: var(--lt-bg-light); color: var(--lt-text-dark); min-width: 0; } :root[data-theme="dark"] .liztech-input-row input{ background: #3A2440; border-color: #4A3050; color: var(--lt-text-light); } .liztech-input-row input::placeholder{ color: #A88CA5; } .liztech-send{ width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, var(--lt-teal), #227E75); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 10px rgba(47,167,155,0.35); border: none; } .liztech-send:disabled{ opacity: 0.5; cursor: default; } .liztech-send svg{ width: 18px; height: 18px; } /* Accesibilidad: foco visible para navegación por teclado */ .liztech-fab:focus-visible, .liztech-close:focus-visible, .liztech-send:focus-visible, .liztech-quick-replies button:focus-visible, .liztech-input-row input:focus-visible{ outline: 2px solid var(--lt-teal); outline-offset: 2px; } /* Mobile: panel a ancho completo con margen */ @media (max-width: 420px){ #liztech-widget-root{ bottom: 16px; right: 16px; } .liztech-panel{ width: calc(100vw - 32px); bottom: 88px; } } /* Respeta "reduce motion" del sistema operativo */ @media (prefers-reduced-motion: reduce){ .liztech-fab::after{ animation: none; } .liztech-typing span{ animation: none; opacity: 0.7; } .liztech-panel{ transition: none; } }