/* RestoTicketGo — el chat de la web.
   Hoja PROPIA y sin depender de ninguna otra: este widget sale en la landing
   (clara), en las legales (claras) y en /prueba y /únete (oscuras). Colgarlo de
   las variables de una de ellas es que se vea mal en las otras dos. */

.cv-boton, .cv-panel, .cv-guino {
  --cv-naranja:#E65B25;
  --cv-naranja-osc:#C9490F;
  --cv-tinta:#191210;
  --cv-gris:#6E625B;
  --cv-borde:#EFE2D9;
  --cv-crema:#FFF3EC;
  --cv-salida:cubic-bezier(.23,1,.32,1);
  font-family:inherit;
}

/* ── el botón ── */
.cv-boton{
  position:fixed;right:20px;bottom:20px;z-index:9000;
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:var(--cv-naranja);color:#fff;
  box-shadow:0 14px 34px -10px rgba(230,91,37,.75), 0 2px 8px rgba(0,0,0,.18);
  transition:transform .16s var(--cv-salida), background-color .15s ease;
}
@media (hover:hover){ .cv-boton:hover{background:var(--cv-naranja-osc);transform:translateY(-2px)} }
.cv-boton:active{transform:scale(.94)}
.cv-boton.cv-abierto svg{transform:rotate(-8deg) scale(.9);opacity:.85}
.cv-boton svg{transition:transform .18s var(--cv-salida), opacity .18s ease}

/* El punto rojo del botón. Se apaga al ABRIR, no al recibir: si llegó algo
   mientras la persona leía los precios, tiene que seguir encendido. */
.cv-punto{
  position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;
  background:#E5484D;box-shadow:0 0 0 3px #fff;
}
.cv-boton.cv-tiene{animation:cv-salta 1.6s ease-in-out 3}
@keyframes cv-salta{0%,84%,100%{transform:translateY(0)}90%{transform:translateY(-5px)}}

/* ── el panel ──
   Sale DESDE el botón (transform-origin abajo a la derecha) y vuelve por el
   mismo sitio. Si apareciera desde el centro, la relación entre el botón que
   tocaste y lo que se abrió deja de leerse. */
.cv-panel{
  position:fixed;right:20px;bottom:88px;z-index:9001;
  width:min(370px, calc(100vw - 40px));height:min(540px, calc(100dvh - 130px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;color:var(--cv-tinta);
  border-radius:20px;border:1px solid var(--cv-borde);
  box-shadow:0 30px 70px -20px rgba(25,18,16,.45), 0 4px 14px rgba(0,0,0,.12);
  transform-origin:100% 100%;
  animation:cv-entra .26s var(--cv-salida) both;
}
@keyframes cv-entra{ from{opacity:0;transform:scale(.92) translateY(10px)} }
@media (prefers-reduced-motion:reduce){
  .cv-panel{animation:cv-aparece .2s ease both}
  .cv-boton.cv-tiene{animation:none}
  @keyframes cv-aparece{from{opacity:0}}
}
@media (max-width:520px){
  .cv-panel{right:10px;left:10px;bottom:84px;width:auto;height:min(66dvh, 520px)}
}

.cv-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:15px 16px;background:var(--cv-naranja);color:#fff;
}
.cv-cab b{display:block;font-size:15.5px;letter-spacing:-.01em}
.cv-cab span{display:block;font-size:12.5px;opacity:.9;margin-top:2px}
.cv-x{
  width:30px;height:30px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:14px;line-height:1;
}
@media (hover:hover){ .cv-x:hover{background:rgba(255,255,255,.3)} }

.cv-ms{
  flex:1;min-height:0;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:8px;background:var(--cv-crema);
}
.cvb{
  max-width:86%;padding:9px 13px;border-radius:16px;
  font-size:14px;line-height:1.45;word-break:break-word;
}
.cvb-otro{align-self:flex-start;background:#fff;border:1px solid var(--cv-borde);border-bottom-left-radius:6px}
.cvb-mio{align-self:flex-end;background:var(--cv-naranja);color:#fff;border-bottom-right-radius:6px}
.cvb-hola{max-width:100%}
.cvb-h{display:block;font-size:10.5px;opacity:.65;margin-top:3px;text-align:right}
.cvb-yendo{opacity:.6}

/* Los puntitos. No es adorno: es lo que hace que la despedida se lea como
   alguien escribiendo y no como un correo automático. */
.cv-puntos{display:flex;gap:4px;align-items:center;padding:12px 14px}
.cv-puntos span{
  width:7px;height:7px;border-radius:50%;background:#C6B5AA;
  animation:cv-pt 1.2s ease-in-out infinite;
}
.cv-puntos span:nth-child(2){animation-delay:.15s}
.cv-puntos span:nth-child(3){animation-delay:.3s}
@keyframes cv-pt{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){ .cv-puntos span{animation:none;opacity:.55} }
.cvb-falla{background:#B4231E}

.cv-pie{position:relative;padding:10px 12px 12px;background:#fff;border-top:1px solid var(--cv-borde)}
.cv-pie textarea{
  width:100%;max-height:120px;padding:9px 12px;resize:none;
  border-radius:14px;border:1px solid var(--cv-borde);background:#fff;color:var(--cv-tinta);
  font:inherit;font-size:14px;line-height:1.4;
}
.cv-pie textarea:focus{outline:none;border-color:var(--cv-naranja)}
.cv-barra{position:relative;display:flex;align-items:center;gap:8px;margin-top:8px}
.cv-nota{flex:1;min-width:0;font-size:11px;color:var(--cv-gris)}
.cv-enviar{
  width:38px;height:38px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--cv-naranja);color:#fff;font-size:15px;line-height:1;
  transition:transform .14s var(--cv-salida);
}
.cv-enviar:active{transform:scale(.94)}

/* El clip vive en style.css, que aquí NO está cargada: se define entero. */
.cv-pie .sop-clip{
  position:relative;width:38px;height:38px;flex:none;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;overflow:hidden;
  background:#fff;border:1px solid var(--cv-borde);color:var(--cv-gris);font-size:16px;
}
.cv-pie .sop-clip input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.cv-pie .sop-clip.con-archivos{border-color:var(--cv-naranja);color:var(--cv-naranja)}
.cv-pie .sop-clip-n{
  position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--cv-naranja);color:#fff;
  font-size:10px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 0 0 2px #fff;
}

/* El audio del visitante. Sin ancho fijo se sale del panel en un teléfono. */
.cvb .sop-adj{margin-top:6px}
.cvb .na{min-width:190px;max-width:240px}
.cvb-mio .na{--na-hueco:var(--cv-naranja)}
.cvb-otro .na{--na-hueco:#fff}
.cvb .sop-adj-img{display:block;max-width:200px;border-radius:10px;overflow:hidden}
.cvb .sop-adj-img img{display:block;width:100%;height:auto}
.cvb .sop-adj-arch{
  display:flex;align-items:center;gap:8px;margin-top:4px;
  color:inherit;text-decoration:underline;font-size:12.5px;
}

/* Los botones que mete entrada_chat.js (emojis y micrófono) se visten a
   juego: la hoja del panel oscuro no está cargada en la landing. */
.cv-pie .ec-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--cv-borde);
  background:#fff;color:var(--cv-gris);font-size:16px;cursor:pointer;
  display:grid;place-items:center;
}
.cv-pie .ec-emoji[aria-expanded="true"]{border-color:var(--cv-naranja);color:var(--cv-naranja)}

/* Grabando: la barra entera se sustituye, igual que en el panel. */
.cv-pie .ec-grabando{display:flex;align-items:center;gap:9px;margin-top:8px}
.cv-pie .ec-punto{
  width:10px;height:10px;border-radius:50%;background:#E5484D;flex:none;
  animation:cv-late 1s ease-in-out infinite;
}
@keyframes cv-late{50%{opacity:.25}}
.cv-pie .ec-reloj{font-size:13px;font-variant-numeric:tabular-nums;color:var(--cv-tinta)}
.cv-pie .ec-txt{font-size:11.5px;color:var(--cv-gris)}
.cv-pie .ec-grabando .ec-si{margin-left:auto;background:var(--cv-naranja);border-color:var(--cv-naranja);color:#fff}
@media (prefers-reduced-motion:reduce){ .cv-pie .ec-punto{animation:none;opacity:.85} }
.cv-pie .ec-emojis{
  position:absolute;bottom:calc(100% + 8px);left:0;z-index:5;
  display:grid;grid-template-columns:repeat(8,32px);gap:2px;padding:6px;
  background:#fff;border:1px solid var(--cv-borde);border-radius:14px;
  box-shadow:0 14px 34px -12px rgba(25,18,16,.4);
}
.cv-pie .ec-emojis button{
  width:32px;height:32px;border:0;border-radius:8px;background:transparent;
  cursor:pointer;font-size:18px;line-height:1;
}
@media (hover:hover){ .cv-pie .ec-emojis button:hover{background:var(--cv-crema)} }

/* El contacto se pide DESPUÉS de haber ayudado, y se puede ignorar sin más:
   no bloquea el chat ni vuelve a salir. */
.cv-contacto{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:11px 12px;background:var(--cv-crema);border-top:1px solid var(--cv-borde);
}
.cv-contacto b{flex-basis:100%;font-size:12.5px;font-weight:650;color:var(--cv-gris)}
.cv-contacto input{
  flex:1;min-width:0;min-height:38px;padding:0 12px;border-radius:999px;
  border:1px solid var(--cv-borde);background:#fff;color:var(--cv-tinta);font:inherit;font-size:13.5px;
}
.cv-contacto input:focus{outline:none;border-color:var(--cv-naranja)}
.cv-contacto button{
  min-height:38px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;
  background:var(--cv-tinta);color:#fff;font:inherit;font-size:13px;font-weight:650;
}

/* ── el guiño ── */
.cv-guino{
  position:fixed;right:88px;bottom:30px;z-index:9000;max-width:min(260px,calc(100vw - 110px));
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:16px;border:1px solid var(--cv-borde);
  background:#fff;color:var(--cv-tinta);font-size:13.5px;line-height:1.35;cursor:pointer;
  box-shadow:0 18px 40px -16px rgba(25,18,16,.45);
  animation:cv-guino .3s var(--cv-salida) both;
}
@keyframes cv-guino{ from{opacity:0;transform:translateX(12px) scale(.96)} }
.cv-guino button{
  width:22px;height:22px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--cv-crema);color:var(--cv-gris);font-size:11px;line-height:1;
}
@media (max-width:520px){ .cv-guino{right:14px;bottom:88px;max-width:calc(100vw - 28px)} }
@media (prefers-reduced-motion:reduce){ .cv-guino{animation:none} }

/* La valoración vive en style.css (la comparten los dos buzones) y aquí solo se
   le cambian los colores: en el chat de la web el fondo es claro. */
.cv-val{padding:12px}
.cv-val .val-caja{
  --val-fondo:#fff;
  --val-borde:var(--cv-borde);
  --val-texto:var(--cv-tinta);
  --val-campo:#fff;
  --val-apagada:#DED2C9;
  --val-acento:var(--cv-naranja);
}