/* ============================================================
   LiZ Soporte -- Widget de chat para ilccampus.com
   Paleta y tipografia identicas a LiZ en pay.ilcacademy.com
   (ciruela ILC Academy + acento teal), diseno aprobado en el
   mockup de Fase 3 (2026-07-30).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Poppins:wght@400;500;600&display=swap');

#ilc-liz-widget-root{
  --plum-900:#2E1530;
  --plum-800:#3D1B3D;
  --plum-600:#6B3868;
  --plum-500:#8B4C87;
  --plum-300:#B47FAE;
  --teal:#2FA79B;
  --teal-light:#5CC4B9;
  --cream:#FDFBFA;
  --fire:#FF7A3D;
  --bg-sunken:#F7F3F6;
  --panel-bg:#FFFFFF;
  --ink:#2E1530;
  --ink-soft:#6B5A69;
  --border:#E3D2E1;
  --bubble-bot-bg:#FFFFFF;
  --bubble-bot-border:#EAD9E8;
  --chip-border:var(--plum-500);
  --chip-ink:var(--plum-600);
}
/* A diferencia de pay.ilcacademy.com (que tiene su propio toggle de tema),
   ilccampus.com no tiene modo oscuro -- el widget se queda siempre en el
   tema claro aprobado, sin reaccionar a las preferencias del sistema del
   visitante (decision explicita, 2026-07-31). */

#ilc-liz-widget-root{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99990;
  font-family: 'Poppins', sans-serif;
}
#ilc-liz-widget-root *{ box-sizing:border-box; }

/* ---------- Boton flotante (FAB), con el fuego animado ---------- */
/* !important en fondo/borde/sombra: el tema de ilccampus.com (WPLMS +
   Elementor) trae sus propios estilos globales de <button> con fondo
   solido -- sin esto, se veia un recuadro morado detras de LiZ en vez de
   quedar transparente (bug real, 2026-07-31). */
.ilc-liz-fab{
  width:96px; height:120px;
  border:none !important; background:transparent !important; background-color:transparent !important;
  box-shadow:none !important; border-radius:0 !important;
  -webkit-appearance:none; appearance:none;
  padding:0; margin:0; cursor:pointer;
  position:relative;
  opacity:1; transform:scale(1);
  transition:transform .2s ease, opacity .18s ease;
}
.ilc-liz-fab:hover, .ilc-liz-fab:focus, .ilc-liz-fab:active{
  background:transparent !important; background-color:transparent !important; box-shadow:none !important;
  transform:scale(1.05);
}
.ilc-liz-fab.is-hidden{ opacity:0; transform:scale(.85); pointer-events:none; }
.ilc-liz-fab img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block; pointer-events:none;
  background:none !important;
}
.ilc-liz-fab-body{ z-index:3; filter:drop-shadow(0 10px 18px rgba(0,0,0,0.4)); }

.ilc-liz-fab-flame{
  z-index:2;
  transform-origin:50% 55%;
  animation:ilc-liz-flame-flicker 1.8s ease-in-out infinite;
}
@keyframes ilc-liz-flame-flicker{
  0%,100%{ transform:scaleY(1) scaleX(1) rotate(0deg); filter:brightness(1) saturate(1) hue-rotate(0deg); }
  25%{ transform:scaleY(1.06) scaleX(0.97) rotate(-1.2deg); filter:brightness(1.14) saturate(1.15) hue-rotate(-3deg); }
  50%{ transform:scaleY(0.95) scaleX(1.02) rotate(0.4deg); filter:brightness(0.94) saturate(1) hue-rotate(2deg); }
  75%{ transform:scaleY(1.09) scaleX(0.98) rotate(1.1deg); filter:brightness(1.2) saturate(1.2) hue-rotate(-2deg); }
}

.ilc-liz-fab-glow{
  position:absolute; left:50%; bottom:8px;
  width:72px; height:72px; margin-left:-36px;
  background:radial-gradient(circle, rgba(255,140,60,0.55) 0%, rgba(255,90,30,0.28) 45%, transparent 72%);
  filter:blur(7px);
  z-index:1; pointer-events:none;
  animation:ilc-liz-glow-pulse 1.8s ease-in-out infinite;
}
@keyframes ilc-liz-glow-pulse{
  0%,100%{ opacity:.6; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.16); }
}

.ilc-liz-fab-embers{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.ilc-liz-fab-embers span{
  position:absolute; bottom:22px; width:4px; height:4px; border-radius:50%;
  background:var(--fire);
  box-shadow:0 0 6px 1px rgba(255,140,60,0.8);
  opacity:0;
  animation:ilc-liz-ember-rise 2.2s ease-in infinite;
}
.ilc-liz-fab-embers span:nth-child(1){ left:36%; animation-delay:0s; }
.ilc-liz-fab-embers span:nth-child(2){ left:53%; width:3px; height:3px; animation-delay:.6s; }
.ilc-liz-fab-embers span:nth-child(3){ left:45%; animation-delay:1.2s; }
.ilc-liz-fab-embers span:nth-child(4){ left:60%; width:3px; height:3px; animation-delay:1.7s; }
@keyframes ilc-liz-ember-rise{
  0%{ opacity:0; transform:translateY(0) scale(1); }
  15%{ opacity:.9; }
  80%{ opacity:.5; }
  100%{ opacity:0; transform:translateY(-40px) scale(0.4); }
}

@media (prefers-reduced-motion:reduce){
  .ilc-liz-fab-flame, .ilc-liz-fab-glow, .ilc-liz-fab-embers span{ animation:none; }
}

/* ---------- Panel del chat ---------- */
.ilc-liz-panel{
  position:absolute;
  bottom:132px; right:0;
  width:380px; max-width:calc(100vw - 40px);
  height:560px; max-height:calc(100vh - 140px);
  background:var(--panel-bg);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(46,21,48,0.28);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.ilc-liz-panel.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.ilc-liz-header{
  background:linear-gradient(120deg, var(--plum-800), var(--plum-600));
  padding:18px 20px;
  display:flex; align-items:center; gap:12px;
  flex-shrink:0;
}
.ilc-liz-avatar{ width:56px; height:56px; flex-shrink:0; }
.ilc-liz-avatar img{ width:100%; height:100%; object-fit:contain; display:block; }
.ilc-liz-header-text{ flex:1; min-width:0; }
.ilc-liz-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:18px; color:var(--cream); }
.ilc-liz-status{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--teal-light); margin-top:3px; }
.ilc-liz-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal-light); }
.ilc-liz-close{ background:none; border:none; color:rgba(255,255,255,.8); font-size:20px; cursor:pointer; padding:6px; line-height:1; }
.ilc-liz-close:hover{ color:#fff; }

.ilc-liz-body{ flex:1; min-height:0; position:relative; display:flex; flex-direction:column; }

.ilc-liz-messages{
  flex:1; padding:20px 18px; display:flex; flex-direction:column; gap:14px;
  overflow-y:auto; background:var(--bg-sunken);
  scroll-behavior:smooth;
}
.ilc-liz-bubble{
  max-width:86%; padding:13px 16px; border-radius:16px;
  font-size:16.5px; line-height:1.6; word-wrap:break-word;
}
.ilc-liz-bubble.bot{
  background:var(--bubble-bot-bg); color:var(--ink); align-self:flex-start;
  border:1px solid var(--bubble-bot-border); border-bottom-left-radius:5px;
}
.ilc-liz-bubble.user{
  background:linear-gradient(120deg, var(--plum-600), var(--plum-500));
  color:var(--cream); align-self:flex-end; border-bottom-right-radius:5px;
}
.ilc-liz-typing{
  align-self:flex-start; display:flex; gap:5px; padding:14px 16px;
  background:var(--bubble-bot-bg); border:1px solid var(--bubble-bot-border);
  border-radius:16px; border-bottom-left-radius:5px;
}
.ilc-liz-typing span{ width:7px; height:7px; border-radius:50%; background:var(--plum-300); animation:ilc-liz-blink 1.2s infinite; }
.ilc-liz-typing span:nth-child(2){ animation-delay:.2s; }
.ilc-liz-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes ilc-liz-blink{ 0%,100%{opacity:.3;} 50%{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .ilc-liz-typing span{ animation:none; opacity:.7; } }

/* ---------- Boton "Preguntas frecuentes" + "Hablar con una persona" ---------- */
.ilc-liz-faq-bar{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:14px 16px; background:var(--bg-sunken); flex-shrink:0;
  border-top:1px solid var(--bubble-bot-border);
}
.ilc-liz-faq-btn, .ilc-liz-escalate-btn{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:'Poppins',sans-serif; font-size:16px; font-weight:600;
  line-height:1.3; white-space:nowrap;
  padding:14px 20px; border-radius:14px; border:none;
  color:#fff; cursor:pointer;
}
.ilc-liz-faq-btn svg, .ilc-liz-escalate-btn svg{ flex-shrink:0; }
.ilc-liz-faq-btn{ background:var(--teal); box-shadow:0 4px 10px rgba(47,167,155,0.3); }
.ilc-liz-faq-btn:hover{ background:#25897f; }
.ilc-liz-escalate-btn{
  background:linear-gradient(120deg, var(--plum-600), var(--plum-500));
  box-shadow:0 4px 10px rgba(107,56,104,0.35);
}
.ilc-liz-escalate-btn:hover{ background:linear-gradient(120deg, var(--plum-800), var(--plum-600)); }

.ilc-liz-input-row{
  display:flex; align-items:center; gap:10px; padding:14px;
  background:var(--panel-bg); border-top:1px solid var(--bubble-bot-border); flex-shrink:0;
}
.ilc-liz-input-row input{
  flex:1; border:1.5px solid var(--border); border-radius:26px;
  padding:14px 18px; font-family:'Poppins',sans-serif; font-size:16px;
  outline:none; background:var(--bg-sunken); color:var(--ink); min-width:0;
}
.ilc-liz-input-row input::placeholder{ color:var(--ink-soft); opacity:.8; }
.ilc-liz-send{
  width:50px; height:50px; border-radius:50%; border:none; flex-shrink:0; cursor:pointer;
  background:linear-gradient(145deg, var(--teal), #227E75);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(47,167,155,0.35);
}
.ilc-liz-send:disabled{ opacity:.5; cursor:default; }
.ilc-liz-send svg{ width:19px; height:19px; }

/* ---------- Hoja de "Preguntas frecuentes" ---------- */
.ilc-liz-faq-sheet{
  position:absolute; inset:0;
  background:var(--panel-bg);
  display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform .22s ease;
  z-index:4;
}
.ilc-liz-faq-sheet.is-open{ transform:translateY(0); }
.ilc-liz-faq-sheet-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--bubble-bot-border); flex-shrink:0;
}
.ilc-liz-faq-sheet-header h3{ font-family:'Oswald',sans-serif; font-weight:600; font-size:16.5px; margin:0; color:var(--ink); }
.ilc-liz-faq-close{ background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink-soft); padding:6px; line-height:1; }
.ilc-liz-faq-close:hover{ color:var(--ink); }
.ilc-liz-faq-list{ overflow-y:auto; padding:12px 16px 18px; display:flex; flex-direction:column; gap:10px; }
.ilc-liz-faq-item{
  text-align:left; width:100%; padding:15px 18px; border-radius:14px;
  border:1.5px solid var(--chip-border); background:transparent; color:var(--chip-ink);
  font-family:'Poppins',sans-serif; font-size:15.5px; font-weight:500; line-height:1.4;
  cursor:pointer; display:flex; align-items:center; gap:12px;
  transition:background .15s ease, color .15s ease;
}
.ilc-liz-faq-item:hover{ background:var(--chip-border); color:#fff; }

.ilc-liz-fab:focus-visible, .ilc-liz-close:focus-visible, .ilc-liz-send:focus-visible,
.ilc-liz-faq-btn:focus-visible, .ilc-liz-faq-close:focus-visible, .ilc-liz-faq-item:focus-visible,
.ilc-liz-escalate-btn:focus-visible, .ilc-liz-input-row input:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}

@media (max-width:420px){
  #ilc-liz-widget-root{ bottom:16px; right:16px; }
  .ilc-liz-panel{ width:calc(100vw - 32px); bottom:118px; }
}