/* === Quetzal flotante (canvas) ======================================== */
:root { --qz-size: 240px; } /* súbelo a 260–300 si lo quieres XL */

.qz-fab{
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: .45rem;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transition: transform .18s ease;
}
.qz-fab--free{ width: var(--qz-size); }
.qz-fab--free::after{ display:none; }
.qz-fab:hover{ transform: translateY(-2px); }
.qz-fab:focus{ outline: none; }
.qz-fab:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(252,1,114,.35);
  border-radius: 18px;
}

/* Canvas 3D — SIEMPRE encima y transparente */
.qz-fab__canvas{
  position: relative;
  z-index: 2;                    /* por encima de cualquier pseudo del botón */
  width: var(--qz-size);
  height: var(--qz-size);
  display: block;
  background: transparent !important;
  border-radius: 16px;           /* mejora el hit-area */
  pointer-events: none;          /* todo el bloque es clic; evita “comerse” el click */
}
.qz-fab--free .qz-fab__canvas::after{
  content:"";
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:70%; height:14px; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.35), transparent 70%);
  filter: blur(6px);
  z-index:1; pointer-events:none;
}

/* Etiqueta “Chat bot” */
.qz-fab__label{
  z-index: 2;
  user-select: none;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: .95rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  color: #0b0f14;
  background: linear-gradient(180deg, var(--gold), #e7178b);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 20px rgba(18,32,44,.40), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.qz-fab__label:hover{ filter:saturate(1.06) brightness(1.02); }

/* === Backdrop y Panel del chat ======================================= */
.qz-backdrop{
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(10,16,22,.35);
  backdrop-filter: blur(2px);
}

.qz-chat{
  position: fixed; right: 22px; bottom: 100px; z-index: 9999;
  width: min(460px, 92vw);
  height: min(70vh, 640px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px;

  /* glass con scrim para legibilidad */
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(24,40,51,.30), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 24px 60px rgba(18,32,44,.42);
  backdrop-filter: blur(10px) saturate(125%);

  transform: translateY(12px) scale(.98);
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
  transition: transform .18s ease, opacity .18s ease;
}
.qz-chat.is-open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }

/* Header */
.qz-chat__hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(24,40,51,.55), rgba(24,40,51,.25)),
    radial-gradient(600px 300px at 10% 0%, rgba(252,1,114,.18), transparent 60%);
  color:#f4fffe; font-weight:800;
}
.qz-iconbtn{
  background:transparent; border:0; color:#fff; cursor:pointer;
  font-size:1.15rem; line-height:1; padding:.25rem .4rem; border-radius:8px;
}
.qz-iconbtn:hover{ background:rgba(255,255,255,.12); }

/* Body */
.qz-chat__body{ flex:1; overflow:auto; padding:1rem; color:#eafcfa; }
.qz-chat__placeholder{
  display:grid; place-items:center; height:100%;
  color: color-mix(in oklab, var(--sand) 70%, white 15%);
}

/* Footer (input + send) */
.qz-chat__ftr{
  display:grid; grid-template-columns: 1fr auto; gap:.5rem;
  padding:.75rem; border-top:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
}
.qz-input{
  width:100%; border-radius:12px; padding:.8rem .9rem;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color:#fff;
  outline: none;
}
.qz-input::placeholder{ color: color-mix(in oklab, #ffffff 70%, var(--sand) 30%); }
.qz-input:focus{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sand) 50%, white 10%);
  border-color: color-mix(in oklab, var(--sand) 60%, white 10%);
}

.qz-send{
  border:1px solid rgba(255,255,255,.25); border-radius:12px;
  padding:.8rem 1rem; cursor:pointer; font-weight:800;
  color:#0b0f14;
  background: linear-gradient(180deg, var(--gold), #e7178b);
  box-shadow: 0 10px 20px rgba(252,1,114,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.qz-send:hover{ filter:saturate(1.06) brightness(1.02); }

/* Responsive */
@media (max-width: 960px){
  .qz-chat{ right:12px; left:12px; width:auto; }
}
@media (max-width: 480px){
  :root { --qz-size: 180px; }          /* ajusta tamaño del quetzal en móviles */
}
@media (prefers-reduced-motion: reduce){
  .qz-fab{ transition:none; }
  .qz-chat{ transition:none; }
}


/* ===== Chat base ====================================================== */
.qz-msg{
  display:flex;
  gap:.6rem;
  margin:.6rem 0;
  align-items:flex-end;
  font-family:"Segoe UI", Roboto, sans-serif;
  animation:qz-fadeIn .25s ease;
}

/* === FAB Quetzal Chat mejorado ============================= */
.qz-fab{
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #0077ff, #00c6ff);
  color: #fff;
  font-size: 24px;
  font-weight: 600;

  box-shadow: 0 8px 25px rgba(0, 120, 255, .45),
              0 0 0 3px rgba(255,255,255,.25) inset;
  backdrop-filter: blur(8px);

  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover con glow */
.qz-fab:hover{
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 120, 255, .65),
              0 0 12px rgba(0, 200, 255, .85);
}

/* Label opcional (cuando quieras mostrar texto) */
.qz-fab__label{
  position: absolute;
  right: 70px;
  white-space: nowrap;

  background: rgba(0,0,0,.75);
  color: #fff;
  padding: .4rem .8rem;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;

  opacity: 0;
  transform: translateX(10px);
  transition: all .25s ease;
  pointer-events: none;
}

/* Mostrar label en hover */
.qz-fab:hover .qz-fab__label{
  opacity: 1;
  transform: translateX(0);
}

/* Fallback emoji */
.qz-fab__fallback{
  font-size: 1.4rem;
  line-height: 1;
}


/* Burbujas */
.qz-bubble{
  max-width:78ch;
  padding:.7rem 1rem;
  border-radius:18px;
  line-height:1.45;
  font-size:15px;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  white-space:pre-wrap;           /* respeta \n del mensaje */
  box-shadow:0 3px 12px rgba(0,0,0,.15);
  transition:transform .18s ease;
}
.qz-bubble:hover{ transform:scale(1.01); }

/* Bot (izquierda) */
.qz-msg--assistant{ justify-content:flex-start; }
.qz-msg--assistant::before{
  content:"🪶";
  font-size:18px; line-height:1;
  margin-right:.3rem;
}
.qz-msg--assistant .qz-bubble{
  color:#eaf2f9;
  background:linear-gradient(180deg,#0f1321,#0b1020);
  border:1px solid rgba(120,170,255,.25);
  border-bottom-left-radius:4px;
}

/* Usuario (derecha) */
.qz-msg--user{ justify-content:flex-end; }
.qz-msg--user::before{ content:""; }
.qz-msg--user .qz-bubble{
  color:#0b1a26;
  background:#e9f5ff;
  border:1px solid rgba(0,80,150,.18);
  box-shadow:0 3px 10px rgba(0,90,150,.14);
  border-bottom-right-radius:4px;
}

/* “Escribiendo…” */
.qz-typing{
  display:flex; gap:.32rem; margin:.5rem .2rem; align-items:center;
}
.qz-typing .dot{
  width:6px; height:6px; border-radius:50%;
  background:#9ec6ff; opacity:.7; animation:qz-blink 1.2s infinite ease-in-out both;
}
.qz-typing .dot:nth-child(2){ animation-delay:.2s; }
.qz-typing .dot:nth-child(3){ animation-delay:.4s; }

/* Placeholder */
.qz-chat__placeholder{
  display:grid; place-items:center; height:100%;
  text-align:center; gap:.4rem;
  color:rgba(200,200,200,.65);
  font-size:14px; font-style:italic;
}
.qz-chat__placeholder p{ margin:.1rem 0; }

/* Animaciones */
@keyframes qz-blink{ 0%,80%,100%{opacity:.2;} 40%{opacity:1;} }
@keyframes qz-fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* Sin backdrop (no oscurece) */
.qz-backdrop{
  background:transparent !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
}


/* ===== Texto dentro del chat (mejor contraste) ======================= */
.qz-chat__body p {
  margin: .5rem 0;
  line-height: 1.55;
  font-size: 15px;
  color: rgba(255,255,255,.92);   /* más legible en fondos oscuros */
}

.qz-chat__body p:first-child { margin-top: 0; }
.qz-chat__body p:last-child  { margin-bottom: 0; }

/* strong más marcado */
.qz-chat__body strong {
  font-weight: 700;
  color: #ffd34d;                 /* dorado brillante */
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* opcional: resaltar subtítulos o frases motivadoras */
.qz-chat__body em {
  font-style: normal;
  color: #6cd4ff;
  font-weight: 500;
}