/* ============================================================
   LFIM — Asistente FAQ (chatbot guiado, sin IA)
   Usa los tokens de color de styles.css (:root).
   ============================================================ */

.lfim-chat-launcher{
  position:fixed; right:22px; bottom:22px; z-index:200;
  display:flex; align-items:center; gap:10px;
  height:54px; padding:0 18px 0 8px; border:none; border-radius:999px; cursor:pointer;
  background:var(--accent); color:#fff; font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:600; font-size:13.5px; box-shadow:0 12px 30px rgba(22,48,74,.28);
  transition:transform .15s, background .15s, opacity .2s;
}
.lfim-chat-launcher:hover{ transform:translateY(-2px); background:var(--accent-d); }
.lfim-chat-launcher__owl{ width:40px; height:40px; border-radius:50%; background:#fff; overflow:hidden; flex:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
.lfim-chat-launcher__owl img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; }
.lfim-chat-launcher.is-hidden{ opacity:0; pointer-events:none; transform:translateY(10px) scale(.9); }

/* Saludo: el búho hace un pequeño «wiggle» cuando aparece el globo. Se
   anima el círculo interior (no el botón) para no chocar con el :hover. */
@keyframes lfim-wiggle{ 0%,100%{transform:none;} 18%{transform:rotate(-7deg) scale(1.05);} 38%{transform:rotate(6deg);} 58%{transform:rotate(-4deg);} 78%{transform:rotate(2deg);} }
.lfim-chat-launcher.is-attention .lfim-chat-launcher__owl{ animation:lfim-wiggle 1.1s ease 1; transform-origin:50% 60%; }

/* Globo de saludo: aparece sobre el lanzador y, al pulsarlo, abre el chat. */
@keyframes lfim-bubble-in{ 0%{opacity:0; transform:translateY(10px) scale(.92);} 60%{transform:translateY(-2px) scale(1.02);} 100%{opacity:1; transform:none;} }
.lfim-chat-bubble{
  position:fixed; right:22px; bottom:94px; z-index:200; max-width:236px;
  background:var(--white); color:var(--ink); border:1px solid var(--line);
  border-radius:16px; border-bottom-right-radius:5px; padding:12px 34px 12px 15px;
  font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:13.5px; font-weight:600; line-height:1.4;
  box-shadow:0 16px 38px rgba(22,48,74,.26); cursor:pointer;
  opacity:0; transform:translateY(10px) scale(.92); pointer-events:none; transition:opacity .25s, transform .25s;
}
.lfim-chat-bubble.is-show{ opacity:1; transform:none; pointer-events:auto; animation:lfim-bubble-in .4s ease both; }
.lfim-chat-bubble::after{ content:""; position:absolute; right:24px; bottom:-7px; width:14px; height:14px; background:var(--white); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }
.lfim-chat-bubble__close{ position:absolute; top:2px; right:2px; border:none; background:none; color:var(--ink-2); font-size:17px; line-height:1; cursor:pointer; min-width:30px; min-height:30px; display:flex; align-items:center; justify-content:center; border-radius:6px; }
.lfim-chat-bubble__close:hover{ color:var(--ink); background:var(--cream); }

.lfim-chat-panel{
  position:fixed; right:22px; bottom:22px; z-index:201;
  width:374px; max-width:calc(100vw - 28px);
  height:564px; max-height:calc(100vh - 96px);
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 26px 64px rgba(22,48,74,.30);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:'Hanken Grotesk',system-ui,sans-serif; color:var(--ink);
  opacity:0; transform:translateY(14px) scale(.97); pointer-events:none; visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.lfim-chat-panel.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .2s ease, transform .2s ease, visibility 0s; }

/* header */
.lfim-chat-head{ background:var(--accent); color:#fff; padding:15px 16px; display:flex; align-items:center; gap:12px; }
.lfim-chat-head__owl{ width:44px; height:44px; border-radius:50%; background:#fff; overflow:hidden; flex:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.lfim-chat-head__owl img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; }
.lfim-chat-head__t{ display:flex; flex-direction:column; line-height:1.2; flex:1; }
.lfim-chat-head__title{ font-family:'Cinzel',serif; font-weight:700; font-size:16px; letter-spacing:.03em; }
.lfim-chat-head__sub{ font-size:11.5px; opacity:.9; }
.lfim-chat-head__close{ background:none; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; min-width:36px; min-height:36px; display:flex; align-items:center; justify-content:center; border-radius:6px; opacity:.85; }
.lfim-chat-head__close:hover{ opacity:1; background:rgba(255,255,255,.14); }

/* messages */
.lfim-chat-body{ flex:1; overflow-y:auto; padding:16px; background:var(--cream); display:flex; flex-direction:column; gap:10px; }
.lfim-msg{ max-width:84%; font-size:14px; line-height:1.5; padding:10px 13px; border-radius:14px; word-wrap:break-word; }
.lfim-msg a{ color:inherit; font-weight:700; }
.lfim-msg--bot{ align-self:flex-start; background:var(--white); border:1px solid var(--line); border-bottom-left-radius:4px; color:var(--ink); }
.lfim-msg--user{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.lfim-msg--bot a{ color:var(--accent); }

/* suggestion chips */
.lfim-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:2px 16px 12px; background:var(--cream); }
.lfim-chip{ cursor:pointer; background:var(--accent-soft); color:var(--accent); border:1px solid var(--line); font:inherit; font-weight:600; font-size:12.5px; padding:7px 12px; border-radius:999px; transition:background .15s, color .15s, border-color .15s; }
.lfim-chip:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* input */
.lfim-chat-foot{ border-top:1px solid var(--line); background:var(--white); padding:10px 12px; }
.lfim-chat-inputrow{ display:flex; gap:8px; align-items:flex-end; }
.lfim-chat-input{ flex:1; resize:none; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; color:var(--ink); background:var(--white); max-height:96px; }
.lfim-chat-input:focus{ outline:none; border-color:var(--accent); }
.lfim-chat-send{ flex:none; width:42px; height:42px; border:none; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.lfim-chat-send:hover{ background:var(--accent-d); }
.lfim-chat-disclaimer{ font-size:10.5px; color:var(--ink-2); text-align:center; margin-top:8px; line-height:1.4; }

/* On small screens the pill collapses to a compact owl circle so it
   never covers page content; the label is conveyed by aria-label. */
@media (max-width:600px){
  .lfim-chat-launcher{ padding:0; width:52px; height:52px; justify-content:center; gap:0; }
  .lfim-chat-launcher__lbl{ display:none; }
  .lfim-chat-bubble{ bottom:88px; }
}
@media (max-width:480px){
  .lfim-chat-panel{ right:14px; left:14px; bottom:14px; width:auto; height:auto; top:64px; max-height:none; }
  .lfim-chat-launcher{ right:14px; bottom:14px; }
  .lfim-chat-bubble{ right:14px; bottom:80px; }
}
@media (prefers-reduced-motion:reduce){
  .lfim-chat-panel, .lfim-chat-launcher, .lfim-chat-bubble{ transition:none; }
  .lfim-chat-bubble.is-show{ animation:none; }
  .lfim-chat-launcher.is-attention .lfim-chat-launcher__owl{ animation:none; }
}