/* ═══ Asistente de chat (zia-chat.js) ═══
   Botón flotante encima del de WhatsApp (.whatsapp-sticky: bottom 18px, right 18px, 48px)
   y panel de conversación. Todo con prefijo .zchat- para no chocar con el template.
   Animaciones solo con transform/opacity; se apagan con prefers-reduced-motion. */
.zchat-fab, .zchat-panel, .zchat-invite {
  --zc-ink: var(--zia-ink, #0c1e21);
  --zc-teal: var(--zia-teal, #1e8a8a);
  --zc-red: var(--zia-red, #EC3237);
  --zc-ease: cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}

/* ── Botón flotante ── */
.zchat-fab {
  position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 89;
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22);
  background: var(--zc-ink); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 4px 20px rgba(12,30,33,.35); transition: transform .18s var(--zc-ease), background .2s;
  animation: zchat-fab-in .3s var(--zc-ease) backwards;
  touch-action: manipulation;
}
.zchat-fab:hover { background: var(--zc-teal); transform: translateY(-2px); }
.zchat-fab:active { transform: scale(.92); transition-duration: .08s; }
.zchat-fab:focus-visible { outline: 3px solid var(--zc-teal); outline-offset: 3px; }
.zchat-fab svg { width: 24px; height: 24px; fill: currentColor; }
.zchat-fab[aria-expanded="true"] { background: var(--zc-teal); }
/* Atención al mostrar la invitación: anillo que se expande y desvanece (3 veces) */
.zchat-fab::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--zc-teal); opacity: 0; pointer-events: none;
}
.zchat-fab--attn::after { animation: zchat-ring 1.6s ease-out .2s 3; }
.zchat-fab--attn svg { animation: zchat-nudge 1.6s ease-in-out .2s 3; }

/* ── Invitación ── */
.zchat-invite {
  position: fixed; right: calc(78px + env(safe-area-inset-right, 0px)); bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 89; max-width: 250px;
  background: #fff; color: var(--zc-ink); border-radius: 12px 12px 2px 12px;
  padding: 12px 40px 12px 14px; font-size: 14px; font-weight: 700; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(12,30,33,.22); cursor: pointer;
  transform-origin: 100% 100%;
  animation: zchat-pop .28s var(--zc-ease) both;
}
.zchat-invite__close {
  position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: #6b7f82; font-size: 20px; line-height: 1; cursor: pointer;
}
.zchat-invite__close:hover { background: #eef3f3; }

/* ── Panel (escritorio: tarjeta flotante) ── */
.zchat-panel {
  position: fixed; right: 18px; bottom: 138px; z-index: 1010; /* encima del encabezado fijo (.zia-lp-header: 1003) */
  width: min(380px, calc(100vw - 36px)); height: min(580px, calc(100vh - 160px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: var(--zc-ink); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(12,30,33,.35); font-size: 14.5px; line-height: 1.5;
  transform-origin: calc(100% - 24px) calc(100% + 36px);
  animation: zchat-panel-in .2s var(--zc-ease) both;
  outline: none;
}
.zchat-panel.is-closing { animation: zchat-panel-out .16s ease-in both; pointer-events: none; }
.zchat-panel[hidden] { display: none; }

.zchat-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; min-height: 60px;
  background: var(--zc-ink); color: #fff; flex: none;
}
.zchat-head__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #3ccf8e; flex: none; }
.zchat-head__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3ccf8e; animation: zchat-live 2.4s ease-out infinite; }
.zchat-head__title { margin: 0; font-size: 15px; font-weight: 800; color: #fff; flex: 1; min-width: 0; line-height: 1.3; }
.zchat-head__title small { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zchat-head__close {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer; touch-action: manipulation;
  transition: background .15s, transform .15s var(--zc-ease);
}
.zchat-head__close:hover { background: rgba(255,255,255,.2); }
.zchat-head__close:active { transform: scale(.9); }
.zchat-head__close:focus-visible { outline: 3px solid #5fd3d3; outline-offset: 2px; }

/* ── Conversación ── */
.zchat-log {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 16px 14px; background: #f4f7f7; display: flex; flex-direction: column; gap: 10px;
}
.zchat-msg {
  max-width: 88%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere;
  animation: zchat-msg-in .22s var(--zc-ease) backwards;
}
.zchat-msg--bot { align-self: flex-start; background: #fff; border: 1px solid #e1eaea; border-bottom-left-radius: 4px; transform-origin: 0 100%; }
.zchat-msg--user { align-self: flex-end; background: var(--zc-teal); color: #fff; border-bottom-right-radius: 4px; transform-origin: 100% 100%; }
.zchat-msg--error { align-self: stretch; max-width: none; background: #fdecec; color: #8a1c1f; font-size: 13.5px; }
.zchat-msg a { color: var(--zc-teal); font-weight: 700; text-decoration: underline; }
.zchat-msg--error a { color: #8a1c1f; }
.zchat-quieto { animation: none; }

/* Indicador «escribiendo»: tres puntos */
.zchat-msg--typing { padding: 13px 15px; }
.zchat-dots { display: inline-flex; gap: 5px; align-items: center; height: 14px; vertical-align: middle; }
.zchat-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8fa5a7; animation: zchat-dot 1s ease-in-out infinite; }
.zchat-dots i:nth-child(2) { animation-delay: .15s; }
.zchat-dots i:nth-child(3) { animation-delay: .3s; }

/* ── Botones de opción ── */
.zchat-actions { align-self: stretch; display: flex; flex-wrap: wrap; gap: 8px; }
.zchat-chip {
  position: relative; border: 1.5px solid var(--zc-teal); background: #fff; color: var(--zc-teal);
  border-radius: 999px; padding: 8px 14px; min-height: 38px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; line-height: 1.25;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: left;
  touch-action: manipulation; transition: background .15s, color .15s, border-color .15s, transform .15s var(--zc-ease), opacity .15s;
}
.zchat-actions > .zchat-chip { animation: zchat-chip-in .22s var(--zc-ease) backwards; }
.zchat-actions > :nth-child(2) { animation-delay: .04s; }
.zchat-actions > :nth-child(3) { animation-delay: .08s; }
.zchat-actions > :nth-child(4) { animation-delay: .12s; }
.zchat-actions > :nth-child(5) { animation-delay: .16s; }
.zchat-actions > :nth-child(6) { animation-delay: .2s; }
.zchat-actions > :nth-child(n+7) { animation-delay: .24s; }
.zchat-chip:hover, .zchat-chip[aria-pressed="true"] { background: var(--zc-teal); color: #fff; }
.zchat-chip:active:not(:disabled) { transform: scale(.95); transition-duration: .06s; }
.zchat-chip:focus-visible { outline: 3px solid var(--zc-teal); outline-offset: 2px; }
.zchat-chip:disabled { opacity: .5; cursor: default; }
.zchat-chip[aria-pressed="true"]::before { content: "✓"; font-weight: 900; }
.zchat-chip--solid { background: var(--zc-teal); color: #fff; }
.zchat-chip--urgent { border-color: var(--zc-red); background: var(--zc-red); color: #fff; }
.zchat-chip--urgent:hover { background: #c4262b; border-color: #c4262b; color: #fff; }
/* Pulso suave del botón urgente: anillo con transform/opacity */
.zchat-chip--urgent::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border: 2px solid var(--zc-red);
  opacity: 0; pointer-events: none; animation: zchat-urgent 1.8s ease-out .4s 4;
}
.zchat-chip--wa { border-color: #25a366; background: #25a366; color: #fff; }
.zchat-chip--wa:hover { background: #1d8752; border-color: #1d8752; color: #fff; }

/* ── Formulario de contacto ── */
.zchat-form {
  align-self: stretch; background: #fff; border: 1px solid #e1eaea; border-radius: 14px; padding: 14px; display: grid; gap: 10px;
  animation: zchat-msg-in .22s var(--zc-ease) backwards;
}
.zchat-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: #4d6366; }
.zchat-form input[type="text"], .zchat-form input[type="tel"], .zchat-form input[type="email"], .zchat-form select, .zchat-form textarea {
  width: 100%; min-height: 42px; border: 1px solid #cfdcdc; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14.5px; color: var(--zc-ink); background: #fff;
}
.zchat-form textarea { min-height: 64px; resize: vertical; }
.zchat-form .zchat-consent { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.zchat-form .zchat-consent span:not(.zchat-form__err) { flex: 1; min-width: 0; padding-top: 1px; }
.zchat-form .zchat-consent .zchat-form__err { flex-basis: 100%; }
.zchat-form .zchat-consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--zc-teal); }
.zchat-form a { color: var(--zc-teal); text-decoration: underline; }
.zchat-form .is-invalid input, .zchat-form .is-invalid select { border-color: var(--zc-red); }
.zchat-form__err { color: #b3262a; font-size: 12px; font-weight: 600; }
.zchat-form__err:empty { display: none; }
.zchat-form button[type="submit"] { min-height: 46px; justify-self: stretch; font-size: 15px; }

/* ── Caja de texto ── */
.zchat-compose { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid #e1eaea; background: #fff; }
.zchat-compose textarea {
  flex: 1; min-width: 0; resize: none; border: 1px solid #cfdcdc; border-radius: 12px; padding: 9px 12px;
  font: inherit; font-size: 14.5px; line-height: 1.4; max-height: 110px; min-height: 42px; color: var(--zc-ink); background: #fff;
}
.zchat-compose textarea:focus, .zchat-form :is(input, select, textarea):focus { outline: 2px solid var(--zc-teal); outline-offset: 0; border-color: transparent; }
.zchat-send {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--zc-teal); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
  transition: transform .15s var(--zc-ease), opacity .15s, background .15s;
}
.zchat-send:hover:not(:disabled) { background: #187474; }
.zchat-send:active:not(:disabled) { transform: scale(.9); transition-duration: .06s; }
.zchat-send:focus-visible { outline: 3px solid var(--zc-teal); outline-offset: 2px; }
.zchat-send:disabled { opacity: .5; cursor: default; }
.zchat-send svg { width: 20px; height: 20px; fill: currentColor; }
.zchat-foot { flex: none; padding: 0 12px 10px; background: #fff; font-size: 11.5px; color: #6b7f82; text-align: center; }
.zchat-foot a { color: inherit; text-decoration: underline; }

/* ── Teléfono: el panel ocupa toda la pantalla ── */
@media (max-width: 575px) {
  .zchat-panel {
    inset: 0 auto auto 0; right: auto; bottom: auto; /* top/height los ajusta el JS con visualViewport (teclado) */
    width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none;
    font-size: 15px; line-height: 1.55;
    animation: zchat-sheet-in .26s var(--zc-ease) both;
  }
  .zchat-panel.is-closing { animation: zchat-sheet-out .22s ease-in both; }
  .zchat-head { padding: calc(8px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 8px calc(16px + env(safe-area-inset-left, 0px)); }
  .zchat-log { padding: 14px calc(12px + env(safe-area-inset-right, 0px)) 18px calc(12px + env(safe-area-inset-left, 0px)); gap: 12px; }
  .zchat-msg { max-width: 86%; }
  .zchat-msg--bot { max-width: 92%; }
  .zchat-chip { min-height: 44px; padding: 10px 16px; font-size: 14.5px; }
  .zchat-actions { gap: 8px 8px; }
  /* 16px: iOS no hace zoom al enfocar */
  .zchat-compose { padding: 8px calc(10px + env(safe-area-inset-right, 0px)) 8px calc(10px + env(safe-area-inset-left, 0px)); }
  .zchat-compose textarea { font-size: 16px; min-height: 46px; padding: 11px 14px; border-radius: 23px; }
  .zchat-send { width: 46px; height: 46px; border-radius: 50%; }
  .zchat-form input[type="text"], .zchat-form input[type="tel"], .zchat-form input[type="email"], .zchat-form select, .zchat-form textarea { font-size: 16px; min-height: 46px; }
  .zchat-form .zchat-consent input { width: 24px; height: 24px; }
  .zchat-foot { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .zchat-invite { max-width: calc(100vw - 110px); }
}
/* Teléfono horizontal muy bajo: se compacta el encabezado */
@media (max-width: 900px) and (max-height: 480px) {
  .zchat-head { min-height: 48px; }
  .zchat-head__title small { display: none; }
  .zchat-foot { display: none; }
}
/* Con el panel a pantalla completa la página de fondo no se desplaza */
@media (max-width: 575px) {
  html.zchat-abierto, html.zchat-abierto body { overflow: hidden; }
}

@keyframes zchat-fab-in { from { opacity: 0; transform: translateY(12px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes zchat-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes zchat-nudge { 0%, 40%, 100% { transform: none; } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-6deg); } }
@keyframes zchat-pop { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes zchat-panel-in { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes zchat-panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.94); } }
@keyframes zchat-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes zchat-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes zchat-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes zchat-chip-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes zchat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes zchat-urgent { 0% { opacity: .65; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.45); } }
@keyframes zchat-live { 0% { opacity: .6; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.4); } }

@media (prefers-reduced-motion: reduce) {
  .zchat-fab, .zchat-fab svg, .zchat-fab::after, .zchat-invite, .zchat-panel, .zchat-panel.is-closing,
  .zchat-msg, .zchat-form, .zchat-actions > .zchat-chip, .zchat-chip--urgent::after, .zchat-head__dot::after { animation: none !important; }
  .zchat-fab, .zchat-chip, .zchat-send, .zchat-head__close { transition: none !important; }
  .zchat-fab:hover, .zchat-fab:active, .zchat-chip:active, .zchat-send:active, .zchat-head__close:active { transform: none; }
  .zchat-dots i { animation: none; opacity: .7; }
}