/* ============================================================
   LEFEUR — chat embebido. Aislado de styles.css: todo lleva prefijo .lc-
   y reutiliza las variables del sistema (cacao oscuro).
   ============================================================ */

/* --- Lanzador: reutiliza la burbuja flotante existente (.wa-flot) --- */
.chat-flot{
  width:auto; height:52px; min-width:52px; padding:0 1.15rem 0 1rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; background:var(--dulce); color:#1C1208;
  font-family:var(--sans); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(0,0,0,.4), 0 14px 32px rgba(226,167,86,.22);
}
.chat-flot:hover{ background:#EDB868; color:#1C1208; }
.chat-flot svg{ width:22px; height:22px; flex:none; }
.chat-flot.lc-oculto{ opacity:0; pointer-events:none; transform:scale(.9); visibility:hidden; }
.chat-flot .lc-punto{
  position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px;
  border-radius:11px; background:var(--pedido-2); color:#fff; font-size:.75rem; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--bg); line-height:1;
}
.chat-flot .lc-punto[hidden]{ display:none; }

/* --- Panel --- */
.lc-panel{
  --lc-h: 100dvh;
  position:fixed; z-index:120; left:0; top:0; width:100%; height:var(--lc-h);
  transform:translateY(var(--lc-top, 0px));
  display:flex; flex-direction:column; min-width:0;
  background:var(--bg-2); color:var(--cream); font-family:var(--sans);
  overscroll-behavior:contain;
}
.lc-panel[hidden]{ display:none; }
.lc-panel *{ box-sizing:border-box; }
.lc-panel:focus{ outline:none; }

@media (min-width:641px){
  .lc-panel{
    left:auto; top:auto; right:20px; bottom:20px; width:400px;
    height:min(660px, calc(100dvh - 40px)); transform:none;
    border:1px solid var(--line-2); border-radius:var(--radio);
    box-shadow:var(--sombra-lg); overflow:hidden;
    animation:lc-entra .28s var(--ease);
  }
}
@media (max-width:640px){
  .lc-panel{ animation:lc-entra-m .26s var(--ease); }
  html.lc-abierto, html.lc-abierto body{ overflow:hidden; }
}
@keyframes lc-entra{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes lc-entra-m{ from{ opacity:0; } to{ opacity:1; } }

/* --- Header --- */
.lc-head{
  display:flex; align-items:center; gap:.5rem; flex:none;
  padding:.7rem .6rem .7rem 1rem; padding-top:max(.7rem, env(safe-area-inset-top));
  background:var(--panel); border-bottom:1px solid var(--line);
  position:relative;
}
.lc-head-txt{ flex:1; min-width:0; }
.lc-titulo{ font-family:var(--serif); font-weight:600; font-size:1.25rem; line-height:1.15; margin:0; }
.lc-estado{ margin:0; font-size:.8rem; color:var(--cream-2); display:flex; align-items:center; gap:.4rem; }
.lc-estado::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--pistacho); flex:none; }
.lc-icono{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:50%; color:var(--cream-2); cursor:pointer;
}
.lc-icono:hover{ background:var(--panel-3); color:var(--cream); }
.lc-icono svg{ width:22px; height:22px; }
.lc-panel button:focus-visible, .lc-panel a:focus-visible, .lc-panel textarea:focus-visible{
  outline:2px solid var(--dulce); outline-offset:2px;
}
.lc-menu{
  position:absolute; right:.6rem; top:calc(100% - 4px); z-index:3; min-width:230px;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--radio-sm);
  box-shadow:var(--sombra); padding:.35rem;
}
.lc-menu[hidden]{ display:none; }
.lc-menu button{
  display:block; width:100%; min-height:44px; text-align:left; padding:.6rem .8rem;
  background:transparent; border:0; border-radius:8px; color:var(--cream); font:inherit; font-size:.92rem; cursor:pointer;
}
.lc-menu button:hover{ background:var(--panel-3); }
.lc-menu-conf{ padding:.5rem .8rem .3rem; font-size:.88rem; color:var(--cream-2); }
.lc-menu-conf p{ margin:0 0 .5rem; }
.lc-menu-conf div{ display:flex; gap:.4rem; }
.lc-menu-conf button{ text-align:center; border:1px solid var(--line-2); }
.lc-menu-conf .lc-peligro{ background:var(--pedido); border-color:var(--pedido); }
.lc-menu-conf .lc-peligro:hover{ background:var(--pedido-2); }

/* --- Banner --- */
.lc-banner{
  flex:none; margin:0; padding:.45rem 1rem; font-size:.82rem; text-align:center;
  background:var(--dulce-3); color:var(--cream);
}
.lc-banner[hidden]{ display:none; }

/* --- Mensajes --- */
.lc-lista{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding:1rem .9rem .5rem; display:flex; flex-direction:column; gap:.55rem; list-style:none; margin:0;
  scroll-behavior:auto;
}
.lc-vacio{
  margin:auto 0; padding:.5rem .25rem; text-align:center; color:var(--cream-2); font-size:.95rem;
}
.lc-vacio b{ display:block; font-family:var(--serif); font-weight:500; font-size:1.35rem; color:var(--cream); margin-bottom:.35rem; }
.lc-msg{ display:flex; flex-direction:column; max-width:86%; min-width:0; animation:lc-msg .22s var(--ease); }
.lc-msg.lc-c{ align-self:flex-end; align-items:flex-end; }
.lc-msg.lc-b{ align-self:flex-start; align-items:flex-start; }
.lc-msg.lc-s{ align-self:center; max-width:94%; align-items:center; }
@keyframes lc-msg{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.lc-burbuja{
  margin:0; padding:.6rem .85rem; border-radius:16px; font-size:.95rem; line-height:1.45;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; min-width:0;
}
.lc-c .lc-burbuja{ background:var(--dulce); color:#1C1208; border-bottom-right-radius:5px; }
.lc-b .lc-burbuja{ background:var(--panel-3); color:var(--cream); border-bottom-left-radius:5px; }
.lc-s .lc-burbuja{
  background:transparent; border:1px dashed var(--line-2); color:var(--cream-2);
  font-size:.86rem; text-align:center; border-radius:12px;
}
.lc-s .lc-burbuja a, .lc-pie a{ color:var(--dulce); text-underline-offset:2px; }
.lc-hora{ font-size:.72rem; color:var(--cream-3); margin:.15rem .3rem 0; }
.lc-img{ display:block; max-width:100%; max-height:200px; border-radius:10px; margin-bottom:.4rem; }
.lc-error{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.2rem .2rem 0; font-size:.82rem; color:#F0A0AC; justify-content:flex-end; }
.lc-reintentar{
  min-height:44px; padding:0 .9rem; border-radius:999px; background:transparent; color:var(--cream);
  border:1px solid var(--line-2); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
}
.lc-reintentar:hover{ background:var(--panel-3); }
.lc-c.lc-enviando .lc-burbuja{ opacity:.7; }
.lc-c.lc-fallo .lc-burbuja{ box-shadow:0 0 0 2px var(--pedido-2); }

/* escribiendo… */
.lc-escribiendo{ align-self:flex-start; padding:.7rem .9rem; border-radius:16px; border-bottom-left-radius:5px; background:var(--panel-3); display:flex; gap:4px; }
.lc-escribiendo[hidden]{ display:none; }
.lc-escribiendo i{ width:7px; height:7px; border-radius:50%; background:var(--cream-2); animation:lc-punto 1.1s infinite ease-in-out; }
.lc-escribiendo i:nth-child(2){ animation-delay:.16s; }
.lc-escribiendo i:nth-child(3){ animation-delay:.32s; }
@keyframes lc-punto{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* --- Chips --- */
.lc-chips{ flex:none; display:flex; flex-wrap:wrap; gap:.45rem; padding:.4rem .9rem .6rem; }
.lc-chips[hidden]{ display:none; }
.lc-chip{
  min-height:44px; padding:0 1rem; border-radius:999px; background:var(--panel-2); color:var(--cream);
  border:1px solid var(--line-2); font:inherit; font-size:.9rem; cursor:pointer;
}
.lc-chip:hover{ border-color:var(--dulce); color:var(--dulce); }

/* --- Compositor --- */
.lc-comp{ flex:none; padding:.5rem .7rem .4rem; background:var(--panel); border-top:1px solid var(--line); }
.lc-prev{ display:flex; align-items:center; gap:.6rem; padding:.2rem .1rem .55rem; }
.lc-prev[hidden]{ display:none; }
.lc-prev img{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line-2); flex:none; }
.lc-prev span{ flex:1; min-width:0; font-size:.82rem; color:var(--cream-2); overflow-wrap:anywhere; }
.lc-fila{ display:flex; align-items:flex-end; gap:.35rem; }
.lc-texto{
  flex:1; min-width:0; resize:none; max-height:120px; min-height:44px; padding:.65rem .9rem;
  background:var(--bg); color:var(--cream); border:1px solid var(--line-2); border-radius:22px;
  font:inherit; font-size:16px; /* 16px evita el zoom de iOS al enfocar */ line-height:1.35;
}
.lc-texto::placeholder{ color:var(--cream-3); }
.lc-enviar{
  flex:none; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:var(--dulce); color:#1C1208; display:grid; place-items:center;
}
.lc-enviar:hover:not(:disabled){ background:#EDB868; }
.lc-enviar:disabled{ background:var(--panel-3); color:var(--cream-3); cursor:not-allowed; }
.lc-enviar svg{ width:20px; height:20px; }
.lc-pie{ margin:.35rem 0 0; padding-bottom:max(.2rem, env(safe-area-inset-bottom)); font-size:.78rem; color:var(--cream-3); text-align:center; }
.lc-pie a{ display:inline-block; padding:.3rem .2rem; }

.lc-solo-lector{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  .lc-panel, .lc-msg{ animation:none; }
  .lc-escribiendo i{ animation:none; opacity:.7; }
  .chat-flot{ transition:opacity .2s var(--ease); }
  .lc-lista{ scroll-behavior:auto; }
}

/* --- pedido de teléfono inline --- */
.lc-tel{ flex:none; padding:.7rem .8rem; background:var(--panel-2); border-top:1px solid var(--line-2); }
.lc-tel[hidden]{ display:none; }
.lc-tel label{ display:block; font-size:.88rem; color:var(--cream); margin-bottom:.45rem; }
.lc-tel .lc-tel-input{ border-radius:12px; }
.lc-tel-err{ margin:.4rem 0 0; font-size:.82rem; color:#F0A0AC; }
.lc-tel-err[hidden]{ display:none; }

/* --- Puntos de entrada visibles al chat (barra, hero, globo del flotante) --- */
.barra-chat{
  display:inline-flex; align-items:center; gap:.45rem; min-height:42px; padding:0 .95rem;
  border-radius:999px; border:1.5px solid var(--dulce); background:rgba(226,167,86,.12);
  color:var(--dulce); font:inherit; font-size:.9rem; font-weight:700; cursor:pointer;
  transition:background-color .28s var(--ease), color .28s var(--ease);
}
.barra-chat:hover{ background:var(--dulce); color:#1C1208; }
.barra-chat svg{ width:18px; height:18px; flex:none; }
.barra-chat, .carrito-btn{ white-space:nowrap; }

.hero-chat{
  display:flex; align-items:center; gap:.9rem; width:100%; max-width:520px; margin-top:1.1rem;
  padding:.85rem 1rem; text-align:left; cursor:pointer; font:inherit; color:var(--cream);
  background:linear-gradient(135deg, rgba(226,167,86,.14), rgba(226,167,86,.05));
  border:1.5px solid rgba(226,167,86,.45); border-radius:var(--radio);
  transition:border-color .28s var(--ease), transform .18s var(--ease), box-shadow .28s var(--ease);
}
.hero-chat:hover{ border-color:var(--dulce); box-shadow:0 10px 30px rgba(226,167,86,.18); }
.hero-chat:active{ transform:translateY(1px); }
.hero-chat:focus-visible{ outline:2px solid var(--dulce); outline-offset:3px; }
.hero-chat-ico{
  flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:var(--dulce); color:#1C1208;
}
.hero-chat-ico svg{ width:22px; height:22px; }
.hero-chat-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.hero-chat-txt b{ font-family:var(--serif); font-weight:600; font-size:1.1rem; line-height:1.2; }
.hero-chat-txt span{ font-size:.85rem; line-height:1.35; color:var(--cream-2); }
.hero-chat-go{ flex:none; font-size:.85rem; font-weight:700; color:var(--dulce); white-space:nowrap; }
@media (max-width:420px){ .hero-chat-go{ display:none; } }

/* Globo que acompaña al flotante: aparece una vez por sesión (lo crea chat.js) */
.chat-tip{
  position:fixed; z-index:54; right:max(16px, env(safe-area-inset-right));
  bottom:calc(max(16px, env(safe-area-inset-bottom)) + 64px);
  display:flex; align-items:stretch; max-width:min(260px, calc(100vw - 32px));
  background:var(--panel-2); color:var(--cream); border:1px solid var(--dulce); border-radius:16px;
  border-bottom-right-radius:5px; box-shadow:var(--sombra); animation:lc-msg .3s var(--ease);
}
.chat-tip[hidden]{ display:none; }
body.con-flotante .chat-tip{ bottom:150px; }
.chat-tip-abrir{
  flex:1; min-width:0; padding:.7rem .3rem .7rem .95rem; background:transparent; border:0; color:inherit;
  font:inherit; font-size:.9rem; line-height:1.35; text-align:left; cursor:pointer;
}
.chat-tip-abrir b{ display:block; color:var(--dulce); }
.chat-tip-x{
  flex:none; width:36px; align-self:flex-start; height:36px; background:transparent; border:0;
  color:var(--cream-3); font-size:1.2rem; line-height:1; cursor:pointer;
}
.chat-tip-x:hover{ color:var(--cream); }
.chat-tip button:focus-visible{ outline:2px solid var(--dulce); outline-offset:-2px; border-radius:12px; }
.wa-flot.se-esconde + .chat-tip, .chat-flot.lc-oculto + .chat-tip{ display:none; }

/* pulso suave del flotante (solo hasta que el visitante interactúa) */
.chat-flot.lc-llama{ animation:lc-pulso 2.2s ease-out 3; }
@keyframes lc-pulso{
  0%{ box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 0 0 rgba(226,167,86,.55); }
  70%{ box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 0 16px rgba(226,167,86,0); }
  100%{ box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 0 0 rgba(226,167,86,0); }
}
@media (prefers-reduced-motion:reduce){ .chat-flot.lc-llama, .chat-tip{ animation:none; } }