/* ============================================================
   Asistente del club. Patron tomado del concierge de
   legendpco.linextravel.com, medido en pantalla: superficie
   centrada de 920x648 sobre la pagina atenuada y desenfocada,
   filete dorado fino, riel de conversaciones a la izquierda, y
   las propuestas como TARJETAS DENTRO de la respuesta con su
   accion y una fila de total.

   Lo que NO se copia: el radio de 24 px. Este sitio es de
   esquina viva (--r: 4px). Se traduce el patron, no se calca.
   ============================================================ */
.cz-open{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:80;
  display:inline-flex;align-items:center;gap:14px;
  background:rgba(0,27,56,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(180,151,89,.4);color:#fff;cursor:pointer;
  padding:13px 22px;min-height:52px;text-align:left;
  box-shadow:0 14px 40px rgba(0,20,42,.4);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.cz-open:hover{border-color:var(--gold);transform:translateX(-50%) translateY(-2px)}
.cz-open b{display:block;font-family:var(--head);font-weight:500;text-transform:uppercase;
  font-size:13.5px;letter-spacing:var(--tr-s)}
.cz-open span{display:block;font-size:12px;color:var(--sky);margin-top:2px}
.cz-open em{font-style:normal;margin-left:auto;font-size:11px;color:var(--gold);
  border:1px solid rgba(180,151,89,.4);padding:3px 8px;white-space:nowrap}
body.cz-on .cz-open{opacity:0;pointer-events:none}
/* El boton flotante se retira al llegar al pie. Medido: tapaba el enlace de
   preferencias de cookies y el credito, que son los dos unicos controles de
   esa zona. Ademas el pie ya tiene sus propias llamadas a la accion. */
body.cz-pie .cz-open{transform:translate(-50%,150%);opacity:0;pointer-events:none}
@media(max-width:560px){.cz-open{left:16px;right:16px;transform:none;width:auto}
  .cz-open:hover{transform:translateY(-2px)}
  body.cz-pie .cz-open{transform:translateY(150%)}}

.cz-sheet{position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  background:rgba(0,20,42,.97);backdrop-filter:blur(18px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
body.cz-on .cz-sheet{opacity:1;pointer-events:auto}

.cz-surf{width:min(1040px,calc(100vw - 48px));height:min(680px,calc(100vh - 72px));
  background:var(--navy-deep);border:1px solid rgba(180,151,89,.32);border-radius:var(--r);
  display:grid;grid-template-columns:200px 1fr;overflow:hidden;
  transform:translateY(14px) scale(.985);transition:transform .34s cubic-bezier(.22,.61,.36,1)}
body.cz-on .cz-surf{transform:none}

/* ---------- riel de conversaciones ---------- */
.cz-rail{border-right:1px solid rgba(153,202,234,.16);padding:22px 18px;
  display:flex;flex-direction:column;gap:18px;overflow-y:auto}
.cz-id{display:flex;gap:11px;align-items:flex-start}
.cz-id .cz-av{width:34px;height:34px;flex:0 0 auto;border:1px solid rgba(180,151,89,.5);
  display:grid;place-items:center;font-family:var(--head);font-weight:500;font-size:14px;
  color:var(--gold)}
.cz-id b{display:block;font-family:var(--head);font-weight:500;text-transform:uppercase;
  font-size:13px;letter-spacing:var(--tr-s);color:#fff;line-height:1.25}
.cz-id span{display:block;font-size:11.5px;color:var(--sky);margin-top:4px;line-height:1.4}
.cz-live{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--sky)}
.cz-live i{width:7px;height:7px;border-radius:50%;background:#5FB37E}
.cz-new{background:none;border:1px solid rgba(153,202,234,.3);color:#fff;cursor:pointer;
  padding:10px;min-height:46px;font-family:var(--head);text-transform:uppercase;
  font-size:11.5px;letter-spacing:var(--tr-xs)}
.cz-new:hover{border-color:var(--sky)}
.cz-rail h5{font-family:var(--head);text-transform:uppercase;font-size:10.5px;
  letter-spacing:var(--tr-xs);color:rgba(153,202,234,.7);margin:0}
.cz-thread{background:none;border:0;border-left:2px solid rgba(180,151,89,.45);
  text-align:left;color:#fff;cursor:pointer;padding:8px 0 8px 10px;font-size:12.5px;
  line-height:1.4;width:100%}
.cz-thread small{display:block;color:var(--sky);font-size:11px;margin-top:3px}
.cz-thread:hover{border-left-color:var(--gold)}

/* ---------- panel de conversacion ---------- */
.cz-main{display:flex;flex-direction:column;min-width:0}
.cz-top{display:flex;align-items:center;padding:16px 22px;
  border-bottom:1px solid rgba(153,202,234,.14)}
.cz-top b{font-family:var(--head);text-transform:uppercase;font-size:11px;
  letter-spacing:var(--tr-xs);color:var(--gold)}
.cz-x{margin-left:auto;background:none;border:0;color:var(--sky);cursor:pointer;
  font-size:20px;line-height:1;padding:13px;margin:-13px -13px -13px 0;min-height:46px;min-width:46px}
.cz-x:hover{color:#fff}

.cz-log{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:20px}
.cz-m{font-size:15px;line-height:26px;max-width:92%}
.cz-m.a{align-self:flex-start;color:#fff}
.cz-m.u{align-self:flex-end;background:rgba(153,202,234,.13);
  border:1px solid rgba(153,202,234,.2);padding:10px 14px;color:#fff;max-width:78%}
.cz-m.a .who{display:block;font-family:var(--head);text-transform:uppercase;font-size:10.5px;
  letter-spacing:var(--tr-xs);color:var(--gold);margin-bottom:7px}
.cz-m a{color:var(--sky)}
.cz-dots{align-self:flex-start;display:flex;gap:5px;padding:8px 0}
.cz-dots i{width:6px;height:6px;border-radius:50%;background:var(--sky);opacity:.35;
  animation:czd 1.1s infinite}
.cz-dots i:nth-child(2){animation-delay:.16s}.cz-dots i:nth-child(3){animation-delay:.32s}
@keyframes czd{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* La propuesta va DENTRO de la respuesta, con su accion. Sin miniatura:
   la foto servia en el concierge de viajes porque un hotel se ve. Aqui lo
   que se propone son cosas y fechas, y la fila replica la lista de
   necesidades que ya existe en el sitio. */
.cz-cards{margin-top:14px;border-top:1px solid rgba(153,202,234,.16)}
.cz-card{display:flex;align-items:center;gap:14px;padding:13px 0;
  border-bottom:1px solid rgba(153,202,234,.12)}
.cz-card .n{width:26px;flex:0 0 auto;font-family:var(--head);font-weight:300;
  font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
.cz-card .t{flex:1;min-width:0}
.cz-card .t b{display:block;font-size:14.5px;color:#fff;font-weight:600;line-height:1.3}
.cz-card .t span{display:block;font-size:12.5px;color:var(--sky);margin-top:3px}
.cz-card .t em{font-style:normal;display:block;font-size:13px;color:#fff;margin-top:5px;
  font-variant-numeric:tabular-nums}
.cz-act{background:none;border:0;color:var(--gold);cursor:pointer;flex:0 0 auto;
  font-family:var(--head);text-transform:uppercase;font-size:11.5px;letter-spacing:var(--tr-xs);
  padding:13px 4px;min-height:46px;white-space:nowrap}
.cz-act:hover{color:var(--gold-hi)}
.cz-act[disabled]{color:rgba(153,202,234,.5);cursor:default}
.cz-total{display:flex;align-items:baseline;gap:10px;padding:13px 0 0;font-size:13px;
  color:var(--sky);flex-wrap:wrap}
.cz-total b{color:#fff;font-size:15px;font-variant-numeric:tabular-nums}

.cz-sug{display:flex;gap:8px;padding:0 22px 14px;overflow-x:auto;scrollbar-width:none}
.cz-sug::-webkit-scrollbar{display:none}
.cz-sug button{flex:0 0 auto;background:rgba(153,202,234,.09);
  border:1px solid rgba(153,202,234,.24);color:var(--sky);cursor:pointer;
  padding:9px 14px;min-height:40px;font-size:12.5px;white-space:nowrap}
.cz-sug button:hover{background:var(--sky);color:var(--navy-deep)}

.cz-comp{border-top:1px solid rgba(153,202,234,.16);padding:14px 22px 16px}
.cz-files{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.cz-files span{font-size:11.5px;color:var(--sky);border:1px solid rgba(153,202,234,.28);padding:4px 8px}
.cz-row{display:flex;align-items:flex-end;gap:8px}
.cz-row textarea{flex:1;background:rgba(0,0,0,.25);border:1px solid rgba(153,202,234,.24);
  color:#fff;font-family:var(--body);font-size:15px;line-height:22px;padding:11px 13px;
  resize:none;max-height:110px;min-height:44px;border-radius:var(--r)}
.cz-row textarea::placeholder{color:rgba(153,202,234,.55)}
.cz-row textarea:focus{outline:2px solid var(--sky);outline-offset:1px}
.cz-b{background:none;border:1px solid rgba(153,202,234,.24);color:var(--sky);cursor:pointer;
  width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;font-size:15px;
  border-radius:var(--r)}
.cz-b:hover{border-color:var(--sky);color:#fff}
.cz-b.on{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.cz-send{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);
  width:auto;padding:0 20px;font-family:var(--head);text-transform:uppercase;
  font-size:12px;letter-spacing:var(--tr-xs);font-weight:500}
.cz-send:hover{background:var(--gold-hi);color:var(--navy-deep)}
.cz-legal{font-size:11px;color:rgba(153,202,234,.7);line-height:17px;margin-top:9px}

@media(max-width:820px){
  .cz-surf{width:100vw;height:100dvh;border:0;border-radius:0;grid-template-columns:1fr;
    grid-template-rows:auto 1fr}
  /* Una sola cabecera. El riel y la barra de JUNE apilados gastaban 132 px de
     cromo antes de la primera palabra en una pantalla de 844. */
  .cz-top{display:none}
  .cz-rail{flex-direction:row;align-items:center;gap:12px;overflow:visible;
    border-right:0;border-bottom:1px solid rgba(153,202,234,.16);
    padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
  .cz-rail h5,.cz-thread,.cz-live{display:none}
  .cz-id{align-items:center;min-width:0}
  .cz-id span span{display:none}        /* el rol vuelve mas abajo, en la linea legal */
  .cz-new{margin-left:auto;flex:0 0 auto;font-size:11px;padding:10px 12px}
  .cz-rail .cz-x-m{display:grid}   /* con el riel delante: la regla base vive mas abajo en el archivo y ganaba por orden */
  .cz-log,.cz-comp,.cz-sug{padding-left:16px;padding-right:16px}
  .cz-m{max-width:100%}
  /* area segura: la linea legal quedaba a 16 px del borde y la barra de gestos
     del telefono se la comia */
  .cz-comp{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .cz-sheet,.cz-surf,.cz-open{transition:none}.cz-dots i{animation:none}
}


/* ---------------- movil: el corte de los chips se anuncia ----------------
   Medido a 390 px: la fila de chips esconde 160 px de scroll y el ultimo
   quedaba cortado a ras, sin senal de que hubiera mas. La mascara se retira
   sola al llegar al final para que el ultimo chip no quede desvanecido. */
.cz-sug{scroll-padding-right:16px}
.cz-sug.mas{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}

/* el cierre en la cabecera unica de movil */
.cz-x-m{display:none;background:none;border:1px solid rgba(153,202,234,.26);
  color:var(--sky);cursor:pointer;width:46px;height:46px;min-height:46px;
  padding:0;flex:0 0 auto;place-items:center;font-size:20px;line-height:1;
  border-radius:var(--r)}
.cz-x-m:hover{border-color:var(--sky);color:#fff}

/* ---------------- movil: los chips se envuelven, no se desplazan ---------
   Medido a 390 px: los cuatro chips suman 534 px, asi que dos quedaban
   fuera de pantalla detras de un scroll horizontal. Un menu de primera
   respuesta que hay que descubrir arrastrando no es un menu. En movil se
   envuelven en dos filas y se ven los cuatro; la mascara sobra y se apaga.
   En escritorio la fila sigue siendo una sola, que ahi si caben. */
@media(max-width:820px){
  .cz-sug{flex-wrap:wrap;overflow-x:visible;row-gap:8px}
  /* 44 px de alto en tactil. Los chips median 40 y la auditoria no los veia
     porque nunca abria el panel: ahora se miden con el panel abierto. */
  .cz-sug button{max-width:100%;min-height:44px}
  .cz-sug.mas{-webkit-mask-image:none;mask-image:none}
}