/* ============================================================
   CHAT CONCRETA · hoja universal — NO contiene datos de marca.
   La paleta se hereda del :root del sitio (contrato de tokens).
   Reglas del canon aplicadas:
   · NO sombras (box-shadow/drop-shadow) — se separa con borde y fondo sólido
   · Agarres >= 44px · input >= 16px (evita el zoom automatico de iOS)
   · No intercepta el pellizco (touch-action)
   · prefers-reduced-motion respetado
   ============================================================ */

.cc{
  /* Tokens del widget. Los respaldos son NEUTROS a proposito: un color de
     marca como respaldo se cuela en el sitio siguiente y nadie lo nota
     (paso aqui: el verde de Baala salia identico en Villaggio).
     CADA SITIO mapea los suyos en 5 lineas — ver el bloque de instalacion.
     Los sitios MDP no comparten nombres de token (Baala usa --terra,
     Villaggio --terracota), por eso el mapeo es explicito y no adivinado. */
  --cc-paper:   #ffffff;
  --cc-surface: #f6f5f3;
  --cc-ink:     #23201c;
  --cc-ink-2:   #57524a;
  --cc-accent:  #2f2c27;
  --cc-line:    rgba(0,0,0,.14);
  --cc-font:    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --cc-r: 14px;
  /* El widget NO va arriba de todo: tiene que respetar la escala del sitio que
     lo hospeda. En los sitios MDP: lightbox 9600, galeria 9500, loader 9000.
     Con 9990 la burbuja aparecia FLOTANDO SOBRE LA PANTALLA DE CARGA y habria
     quedado encima de una foto abierta a pantalla completa. 8000 la deja sobre
     el contenido y el nav, y debajo de esas tres. */
  --cc-z: 8000;
  --cc-ease: cubic-bezier(.16,1,.3,1);

  /* Si el sitio ya tiene algo fijo en esa esquina (Baalá tiene su boton
     flotante de WhatsApp, .wafloat 54px), el sitio declara --cc-gap-abajo
     y la burbuja se sube. Sin esto se encimaban. */
  --cc-gap-abajo: 0px;   /* el boton del sitio se oculta: la esquina queda libre */
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--cc-gap-abajo));
  z-index: var(--cc-z);
  font-family: var(--cc-font);
  line-height: 1.5;
  letter-spacing: -.003em;
}
.cc *, .cc *::before, .cc *::after{ box-sizing: border-box; min-width:0; min-height:0; }

/* ---------- Lanzador ---------- */
.cc-launch{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 20px 0 16px;
  background: var(--cc-accent); color: #fff;
  border: 1px solid var(--cc-accent); border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  cursor: pointer;
  transition: opacity .2s var(--cc-ease), transform .2s var(--cc-ease);
}
.cc-launch:hover{ opacity: .88; }
.cc-launch:active{ transform: scale(.97); }
.cc-launch svg{ width: 20px; height: 20px; flex: none; }
.cc[data-open="true"] .cc-launch{ display: none; }

/* ---------- Panel ---------- */
.cc-panel{
  display: none; flex-direction: column;
  width: min(384px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 120px));
  background: var(--cc-paper);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r);
  overflow: hidden;
}
.cc[data-open="true"] .cc-panel{ display: flex; animation: cc-in .26s var(--cc-ease); }
@keyframes cc-in{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

/* ---------- Encabezado ---------- */
.cc-head{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px 14px 18px;
  border-bottom: 1px solid var(--cc-line);
  background: var(--cc-surface);
  flex: none;
}
.cc-head-txt{ flex: 1; min-width: 0; }
.cc-title{ font-size: 15px; font-weight: 600; color: var(--cc-ink); letter-spacing: -.01em; }
.cc-sub{ font-size: 12.5px; color: var(--cc-ink-2); margin-top: 1px; }
.cc-x{
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: none; border: none; border-radius: 10px;
  color: var(--cc-ink-2); cursor: pointer;
  transition: background .2s var(--cc-ease), color .2s var(--cc-ease);
}
.cc-x:hover{ background: rgba(0,0,0,.06); color: var(--cc-ink); }
.cc-x svg{ width: 20px; height: 20px; }

/* ---------- Mensajes ---------- */
.cc-log{
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 10px;
  display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch;
}
/* flex:0 0 auto es OBLIGATORIO aqui: el log es flex column con alto acotado,
   y el reset del sitio pone min-height:0 a todo. Sin esto los hijos se
   ENCOGEN y el texto se sale de su burbuja — se vio con la conversacion
   larga: el segundo parrafo por fuera del recuadro y los chips encimados. */
.cc-msg{ flex: 0 0 auto; max-width: 88%; font-size: 14.5px; white-space: pre-line; line-height: 1.62; }
.cc-msg strong{ font-weight: 600; color: var(--cc-ink); }
.cc-msg.me strong{ color: inherit; }
.cc-msg.bot{
  align-self: flex-start;
  background: var(--cc-surface); color: var(--cc-ink);
  border: 1px solid var(--cc-line);
  border-radius: 4px 14px 14px 14px;
  padding: 11px 14px;
}
.cc-msg.me{
  align-self: flex-end;
  background: var(--cc-ink); color: var(--cc-paper);
  border: 1px solid var(--cc-ink);
  border-radius: 14px 4px 14px 14px;
  padding: 11px 14px;
}
/* Enlace "ver en el sitio" — display:flex (no inline-flex) para que caiga en
   SU PROPIO renglon: en linea se leia pegado al final de la frase. */
.cc-jump{
  display: flex; width: fit-content; align-items: center; gap: 6px;
  margin-top: 11px; padding: 0; background: none; border: none;
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--cc-accent); cursor: pointer;
  border-bottom: 1px solid currentColor; line-height: 1.35;
}
.cc-jump svg{ width: 13px; height: 13px; }

/* Escribiendo… */
.cc-dots{ display: inline-flex; gap: 4px; padding: 3px 2px; }
.cc-dots i{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cc-ink-2); opacity: .45;
  animation: cc-blink 1.1s infinite;
}
.cc-dots i:nth-child(2){ animation-delay: .18s; }
.cc-dots i:nth-child(3){ animation-delay: .36s; }
@keyframes cc-blink{ 0%,60%,100%{opacity:.25} 30%{opacity:.9} }

/* ---------- Chips de sugerencia ----------
   Viven DENTRO del log, pegados al ultimo mensaje: si van clavados al
   pie del panel abren un hueco muerto en el centro cuando hay poca
   conversacion (se vio en la primera pasada del gate, 4 viewports). */
.cc-chips{
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 2px 0 8px;
}
.cc-chips:empty{ display: none; }
.cc-chip{
  min-height: 36px; padding: 7px 13px;
  background: var(--cc-paper); color: var(--cc-ink);
  border: 1px solid var(--cc-line); border-radius: 999px;
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: border-color .2s var(--cc-ease), color .2s var(--cc-ease);
}
.cc-chip:hover{ border-color: var(--cc-accent); color: var(--cc-accent); }
/* el chip que lleva al asesor pesa mas que los demas: es a donde va la conversacion */
.cc-chip--wa{ background: var(--cc-accent); border-color: var(--cc-accent); color: #fff; font-weight: 500; }
.cc-chip--wa:hover{ opacity: .88; color: #fff; border-color: var(--cc-accent); }

/* ---------- Barra inferior ---------- */
.cc-foot{ flex: none; border-top: 1px solid var(--cc-line); background: var(--cc-paper); }
.cc-form{ display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; }
.cc-in{
  flex: 1; min-width: 0; border: none; background: none;
  font: inherit; font-size: 16px; /* 16px o iOS hace zoom al enfocar */
  color: var(--cc-ink); padding: 8px 0;
}
.cc-in::placeholder{ color: var(--cc-ink-2); opacity: .75; }
.cc-in:focus{ outline: none; }
.cc-send{
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--cc-ink); color: var(--cc-paper);
  border: none; border-radius: 50%; cursor: pointer;
  transition: opacity .2s var(--cc-ease);
}
.cc-send:disabled{ opacity: .3; cursor: default; }
.cc-send svg{ width: 17px; height: 17px; }

/* CTA a WhatsApp — el destino del embudo */
.cc-wa{
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: calc(100% - 24px); margin: 0 12px 12px; min-height: 46px;
  background: var(--cc-accent); color: #fff;
  border: 1px solid var(--cc-accent); border-radius: 10px;
  font: inherit; font-size: 14.5px; font-weight: 500; text-decoration: none;
  cursor: pointer; transition: opacity .2s var(--cc-ease);
}
.cc-wa:hover{ opacity: .88; }
.cc-wa svg{ width: 18px; height: 18px; }

/* Nota legal: los datos son informativos y los confirma un asesor */
.cc-legal{
  flex: 0 0 auto; align-self: stretch;
  font-size: 11.5px; line-height: 1.5; color: var(--cc-ink-2);
  padding: 2px 2px 4px;
}
.cc-legal a{ color: var(--cc-ink-2); border-bottom: 1px solid var(--cc-line); }
.cc-legal a:hover{ color: var(--cc-accent); }
.cc-pie-legal{
  flex: none; padding: 0 clamp(12px,4vw,16px) 8px;
  font-size: 10.5px; line-height: 1.5; color: var(--cc-ink-2); opacity: .8; text-align: center;
}
/* cada frase entera o nada: sin esto quedaba "contacta." sola en el renglon */
.cc-pie-legal span{ display: inline-block; }
.cc-pie-legal span + span{ margin-left: .32em; }

/* ---------- Foco visible (teclado) ---------- */
.cc :focus-visible{ outline: 2px solid var(--cc-accent); outline-offset: 2px; }

/* ---------- Movil ---------- */
@media (max-width: 560px){
  .cc{ right: 0; bottom: 0; left: 0; }
  .cc-launch{ position: fixed; right: 14px;
              bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--cc-gap-abajo)); }
  .cc-panel{
    width: 100vw; height: 100dvh; max-height: 100dvh;
    border: none; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .cc-msg{ max-width: 92%; }
}

/* No interceptar el pellizco en tactil (regla dura: el zoom lo maneja el navegador) */
@media (pointer: coarse){
  .cc, .cc-panel, .cc-log{ touch-action: pan-x pan-y pinch-zoom; }
}

@media (prefers-reduced-motion: reduce){
  .cc *, .cc *::before, .cc *::after{ animation: none !important; transition: none !important; }
}

/* ============================================================
   SECCION EMBEBIDA — el mismo chat, dentro del flujo de la pagina.
   No es una copia: comparte motor y corpus con la burbuja flotante,
   asi no hay dos verdades que mantener.
   ============================================================ */
.cc.cc-emb{
  position: static; right: auto; bottom: auto; left: auto;
  z-index: auto; display: block; width: 100%;
}
.cc-emb .cc-panel{
  display: flex;
  width: 100%; max-width: 760px; margin: 0 auto;
  /* alto AUTOMATICO: crece con la conversacion hasta un tope. Con alto fijo
     quedaba un vacio enorme entre los chips y el input al abrir la pagina. */
  height: auto; min-height: 300px; max-height: min(70vh, 620px);
  border-radius: var(--cc-r);
  animation: none;
}
.cc-emb .cc-head{ padding-right: 18px; }
.cc-emb .cc-log{ padding-top: 20px; }
.cc-emb .cc-msg{ max-width: 78%; }

@media (max-width: 560px){
  .cc.cc-emb{ right: auto; bottom: auto; left: auto; }
  .cc-emb .cc-panel{
    width: 100%; height: auto; min-height: 280px; max-height: min(74vh, 560px);
    border: 1px solid var(--cc-line); border-radius: var(--cc-r);
    padding-bottom: 0;
  }
  .cc-emb .cc-msg{ max-width: 88%; }
}

/* Con la seccion a la vista, la burbuja flotante sobra: dos veces el mismo
   CTA en pantalla es ruido. La ocultamos mientras la seccion se ve. */
.cc:not(.cc-emb).cc-oculta .cc-launch{ opacity: 0; pointer-events: none; transform: translateY(8px); }

/* UN SOLO BOTON FLOTANTE (Samuel 2026-09-04: «unificalos en uno»).
   El chat ya termina en WhatsApp, asi que el boton suelto del sitio sobra
   y ademas se encimaba. Se oculta desde aqui para no tocar el sitio. */
.wafloat{ display: none !important; }

/* ── MODO PANTALLA COMPLETA (data-cc-embed="full") ────────────────
   Samuel 2026-09-04: «¿por que haces ese mini recuadro y no utilizas
   la pantalla completa como chat?». Aqui el chat NO es un widget
   dentro de una pagina: ES la pagina. Sin marco, sin esquinas, sin
   ancho maximo — de borde a borde. */
.cc-emb.cc-full{ height: 100%; }
.cc-emb.cc-full .cc-panel{
  animation: none;   /* nada se mueve solo en la landing */
  /* flex:1 1 auto es lo que lo hace LLENAR: con el 0 1 auto heredado se
     encogia al ancho de su contenido y en pantalla ancha dejaba media
     pantalla vacia a la derecha. */
  flex: 1 1 auto;
  width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0;
  border: 0; border-radius: 0; margin: 0;
}
/* la pagina ya trae su barra de marca: el encabezado del chat sobraba */
.cc-emb.cc-full .cc-head{ display: none; }
/* la conversacion se APOYA ABAJO, como cualquier chat: asi el aire queda
   arriba (donde crecera) y no como un hueco entre el texto y el teclado */
.cc-emb.cc-full .cc-log{
  padding: 22px clamp(16px, 5vw, 26px) 12px;
}
/* La conversacion se apoya abajo con margin-top:auto en el PRIMER bloque.
   Con justify-content:flex-end se ve igual... hasta que el contenido pasa
   del alto: ahi el navegador deja los mensajes de arriba FUERA DE ALCANCE
   y no se puede subir a leerlos. Samuel lo cazo. */
.cc-emb.cc-full .cc-log > *:first-child{ margin-top: auto; }
.cc-emb.cc-full .cc-chips{ padding-bottom: 10px; }
.cc-emb.cc-full .cc-form{ padding: 12px clamp(10px, 4vw, 18px) 12px clamp(16px, 5vw, 26px); }
.cc-emb.cc-full .cc-wa{ width: calc(100% - clamp(24px, 9vw, 44px)); margin-inline: auto; }
.cc-emb.cc-full .cc-msg{ max-width: min(88%, 620px); }
@media (min-width: 860px){
  /* En pantalla ancha el PANEL llena (es el fondo) y la COLUMNA de conversacion
     se centra con padding lateral — no forzando el ancho de cada burbuja, que
     estiraba el mensaje del visitante de lado a lado. */
  .cc-emb.cc-full .cc-panel{
  animation: none;   /* nada se mueve solo en la landing */ width: 100%; max-width: none; }
  .cc-emb.cc-full .cc-log,
  .cc-emb.cc-full .cc-form,
  .cc-emb.cc-full .cc-wa-wrap{ padding-inline: max(24px, calc((100% - 880px) / 2)); }
  /* el padding va en el CONTENEDOR: puesto en el boton mismo lo empujaba
     fuera de la pantalla, porque ya traia su propio ancho calculado */
  .cc-emb.cc-full .cc-wa{ width: 100%; margin-inline: 0; }
  .cc-emb.cc-full .cc-msg{ max-width: min(72%, 620px); }
}
}
}