/* ═══════════════════════════════════════════════════════════
   CL FISIO — Chatbot styles
   Versión: 1.0
   Todos los selectores están scopeados con #chat-toggle y
   #chat-container para evitar colisiones con estilos del tema.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700&family=Playfair+Display:wght@400;500;600&display=swap');

:root {
  --clfisio-bg: #f5f0e8;
  --clfisio-surface: #ffffff;
  --clfisio-primary: #2c3e5a;
  --clfisio-primary-light: #e8ecf2;
  --clfisio-primary-dark: #1e2d42;
  --clfisio-accent: #c9a96e;
  --clfisio-text: #2d2d2d;
  --clfisio-text-soft: #6b6b6b;
  --clfisio-border: #ddd8cf;
  --clfisio-user-bubble: #3d5275;
  --clfisio-shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

/* Reset SOLO para elementos del chatbot — no afecta al resto de la web */
#chat-toggle, #chat-container, #chat-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
}

/* ── Anulación agresiva de estilos heredados del tema WordPress ── */
#chat-toggle,
#chat-container button,
#chat-container .suggestion-chip,
#chat-container .send-btn,
#chat-container .booking-btn {
  background-image: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  border-image: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: normal !important;
  text-decoration: none !important;
  font-weight: inherit !important;
}
#chat-container input,
#chat-container textarea,
#chat-container button,
#chat-container a {
  font-family: 'DM Sans', sans-serif !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#chat-container a {
  background-image: none !important;
  text-decoration: none !important;
  border: none !important;
}
#chat-container .bubble,
#chat-container .cta-block,
#chat-container .disclaimer {
  background-image: none !important;
}

/* ── Botón flotante (toggle) ── */
#chat-toggle {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #2c3e5a !important;
  border: none !important;
  cursor: pointer;
  box-shadow: var(--clfisio-shadow-lg), 0 0 0 0 rgba(44,62,90,0.3);
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
  animation: clfisio-pulse-ring 2.5s ease-out infinite;
  padding: 0 !important;
}
#chat-toggle:hover { transform: scale(1.1); }
#chat-toggle svg { width: 28px; height: 28px; fill: white; transition: transform 0.3s ease; }
#chat-toggle.open svg { transform: rotate(90deg); }

@keyframes clfisio-pulse-ring {
  0%   { box-shadow: var(--clfisio-shadow-lg), 0 0 0 0 rgba(44,62,90,0.35); }
  70%  { box-shadow: var(--clfisio-shadow-lg), 0 0 0 14px rgba(44,62,90,0); }
  100% { box-shadow: var(--clfisio-shadow-lg), 0 0 0 0 rgba(44,62,90,0); }
}

/* ── Contenedor principal del chat ── */
#chat-container {
  position: fixed;
  bottom: 104px;
  right: 28px;
  width: 400px;
  max-width: calc(100vw - 40px);
  height: 580px;
  max-height: calc(100vh - 140px);
  background: #f5f0e8 !important;
  font-family: 'DM Sans', sans-serif;
  color: var(--clfisio-text);
  border-radius: 20px;
  box-shadow: var(--clfisio-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.22,1,0.36,1),
              transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
#chat-container.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ── Cabecera ── */
#chat-container .chat-header {
  background: #2c3e5a !important;
  padding: 22px 24px 18px !important;
  position: relative;
  overflow: hidden;
}
#chat-container .chat-header::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
#chat-container .chat-header::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 30%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
}
#chat-container .header-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: white !important;
  letter-spacing: 0.02em !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}
#chat-container .header-subtitle {
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.65) !important;
  margin-top: 3px !important;
  font-weight: 400 !important;
  position: relative;
  padding: 0 !important;
}
#chat-container .header-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #6ee7a8;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  animation: clfisio-blink-dot 2s ease infinite;
}
@keyframes clfisio-blink-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Zona de mensajes ── */
#chat-container .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  scroll-behavior: smooth;
}
#chat-container .chat-messages::-webkit-scrollbar { width: 5px; }
#chat-container .chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-container .chat-messages::-webkit-scrollbar-thumb { background: #ddd8cf; border-radius: 10px; }

#chat-container .message {
  max-width: 85% !important;
  animation: clfisio-msg-in 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes clfisio-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#chat-container .message.user { align-self: flex-end !important; }
#chat-container .message.bot  { align-self: flex-start !important; }
#chat-container .message .bubble {
  padding: 12px 16px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
#chat-container .message.user .bubble {
  background: #3d5275 !important;
  color: white !important;
  border-bottom-right-radius: 4px !important;
}
#chat-container .message.bot .bubble {
  background: #ffffff !important;
  color: #2d2d2d !important;
  border-bottom-left-radius: 4px !important;
  border: 1px solid #ddd8cf !important;
}

/* ── Disclaimer médico ── */
#chat-container .disclaimer {
  background: #fdf6e3 !important;
  border-left: 3px solid #c9a96e !important;
  padding: 10px 13px !important;
  border-radius: 0 10px 10px 0 !important;
  font-size: 12px !important;
  color: #8a7445 !important;
  line-height: 1.5 !important;
  margin-top: 2px !important;
  display: block !important;
}

/* ── Bloque de contacto (CTA) ── */
#chat-container .cta-block {
  background: #e8ecf2 !important;
  border: 1px solid rgba(44,62,90,0.12) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-top: 8px !important;
  display: block !important;
}
#chat-container .cta-block .cta-title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: #1e2d42 !important;
  margin-bottom: 8px !important;
  display: block !important;
}
#chat-container .cta-block a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #2c3e5a !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 5px 0 !important;
  transition: color 0.2s ease;
  background: transparent !important;
  border: none !important;
}
#chat-container .cta-block a:hover { color: #1e2d42 !important; }
#chat-container .cta-block a svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
  margin-right: 4px !important;
}

/* ── Botón de reserva ── */
#chat-container .booking-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #2c3e5a !important;
  color: white !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 11px 20px !important;
  border-radius: 10px !important;
  margin-top: 10px !important;
  transition: background 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  border: none !important;
}
#chat-container .booking-btn:hover { background: #1e2d42 !important; transform: translateY(-1px); }
#chat-container .booking-btn svg { width: 18px; height: 18px; fill: white; flex-shrink: 0; }

/* ── Chips de sugerencias ── */
#chat-container .suggestions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  padding: 0 18px 6px !important;
}
#chat-container .suggestion-chip {
  background: #ffffff !important;
  border: 1px solid #ddd8cf !important;
  border-radius: 20px !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #2c3e5a !important;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center;
}
#chat-container .suggestion-chip:hover {
  background: #e8ecf2 !important;
  border-color: #2c3e5a !important;
  transform: translateY(-1px);
}

/* ── Zona de entrada ── */
#chat-container .chat-input-area {
  padding: 14px 18px 18px !important;
  border-top: 1px solid #ddd8cf !important;
  background: #ffffff !important;
  display: flex !important;
  gap: 10px;
  align-items: flex-end;
}
#chat-container .chat-input-area textarea {
  flex: 1;
  border: 1.5px solid #ddd8cf !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #2d2d2d !important;
  background: #f5f0e8 !important;
  resize: none;
  outline: none;
  min-height: 44px !important;
  max-height: 100px;
  line-height: 1.4 !important;
  transition: border-color 0.25s ease;
}
#chat-container .chat-input-area textarea:focus { border-color: #2c3e5a !important; }
#chat-container .chat-input-area textarea::placeholder { color: #6b6b6b !important; }

#chat-container .send-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #2c3e5a !important;
  border: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
  padding: 0 !important;
}
#chat-container .send-btn:hover  { background: #1e2d42 !important; transform: scale(1.05); }
#chat-container .send-btn:active { transform: scale(0.97); }
#chat-container .send-btn svg    { width: 20px; height: 20px; fill: white; }

/* ── Indicador de escritura ── */
#chat-container .typing-indicator {
  display: flex;
  gap: 4px;
  padding: 14px 18px;
  align-self: flex-start;
}
#chat-container .typing-indicator span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clfisio-text-soft);
  animation: clfisio-typing-bounce 1.2s ease infinite;
}
#chat-container .typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
#chat-container .typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes clfisio-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   ADAPTACIÓN A MÓVIL — v2 · versión definitiva
   Reescrita el 7 de agosto de 2026
   ═══════════════════════════════════════════════════════════

   ORIGEN DE ESTE FICHERO
   Las 393 primeras líneas son chatbot.css v1.0 sin tocar. Lo
   único reescrito es el bloque @media de aquí abajo, que
   sustituye al antiguo @media (max-width: 480px).

   El chatbot.css original sigue en esta misma carpeta. Para
   volver atrás basta con apuntar el <link> de WPCode allí otra
   vez; no hay nada más que revertir.

   QUÉ FALLABA EN LA v1

   1 · PANEL DESCENTRADO, SIN AIRE POR LA DERECHA
       `right: 0` pegaba el panel al borde derecho. Y el bloque
       móvil cambiaba `width` a 100vw pero NO tocaba el
       `max-width: calc(100vw - 40px)` heredado del escritorio,
       que seguía vivo y recortaba el ancho a 350px. Resultado:
       panel de 350px pegado a la derecha, con los 40px de hueco
       acumulados todos a la izquierda.

   2 · EL BOTÓN DE CERRAR, TAPADO
       `height: 100vh` con `bottom: 0` cubría la pantalla entera,
       incluido el botón flotante — que es la ÚNICA forma de
       cerrar el chat, porque la cabecera no tiene X. En un móvil
       se abría el chat y no había salida evidente.
       Además `vh` mide la pantalla con la barra del navegador
       retraída, así que mientras la barra estuviera visible la
       zona de escribir quedaba por debajo del área útil.

   3 · EL SCROLL SE ESCAPABA A LA PÁGINA
       `overscroll-behavior: auto` en la lista de mensajes deja
       que el gesto se encadene al documento de detrás al llegar
       al tope — o directamente siempre, mientras la conversación
       no desborde. Arrastrabas dentro del chat y lo que se movía
       era la web.

   CÓMO SE ARREGLA

   · Caja anclada por sus cuatro lados (top/right/bottom/left) y
     `width`, `max-width`, `height` y `max-height` neutralizados a
     auto/none. Con los cuatro anclajes el tamaño queda
     determinado y los márgenes salen simétricos por
     construcción, no por resta.
   · `bottom: 96px` reserva el carril del botón flotante:
     18px de separación + 58px de botón + 20px de aire.
   · `overscroll-behavior: contain` corta la cadena del scroll.
   · `html:has(#chat-container.visible) { overflow: hidden }`
     bloquea la página mientras el chat esté abierto, sin tocar
     el JavaScript. Al usar `overflow` y no `position: fixed`, la
     posición de scroll se conserva: comprobado, se vuelve al
     mismo píxel al cerrar.

   COMPATIBILIDAD
   `:has()` necesita un navegador de 2022 en adelante. El CSS
   adicional del sitio ya lo usaba antes que nosotros (en la
   regla del carrusel de ATM), así que esto no sube el listón.
   En un navegador antiguo el chat se ve igual de bien y solo se
   pierde el bloqueo de la página: degrada suave, no rompe.

   PUNTO DE CORTE
   767px, no los 480px de la v1, para ir a la par con el resto
   del CSS de móvil del sitio.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Caja anclada por los cuatro lados, márgenes simétricos ── */
  #chat-container {
    top: 14px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 96px !important;      /* carril del botón flotante */

    width: auto !important;
    max-width: none !important;   /* mata el calc(100vw - 40px) */
    height: auto !important;
    max-height: none !important;

    border-radius: 18px !important;
    overscroll-behavior: contain !important;
  }

  /* ── El scroll se queda dentro de la conversación ── */
  #chat-container .chat-messages {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* ── La página no se mueve mientras el chat está abierto ── */
  html:has(#chat-container.visible) {
    overflow: hidden !important;
  }

  /* ── Botón flotante algo más contenido ── */
  #chat-toggle {
    bottom: 18px !important;
    right: 18px !important;
    width: 58px !important;
    height: 58px !important;
  }
}