/* sofia-widget.css — Widget de chat "Sofía", extraído VERBATIM de
   respaldos/index-v3-pre-rebuild.html (estilos con id="nodo-chat-styles").
   Cero rediseño, cero copy edits en las reglas del widget.

   Se excluyó a propósito: .whatsapp-fab y .tweaks-toggle (posicionamiento de otros
   botones flotantes del sitio viejo que no viajan aquí — spec: el botón de WhatsApp
   duplicaría al launcher de Sofía) y la regla `body.chat-open .whatsapp-fab` (queda
   muerta sin ese botón).

   ADAPTACIÓN NECESARIA (no rediseño): home.css usa otros nombres de variables que
   styles.css (--crema/--tinta/--azul... vs --cream/--ink/--blue...). El widget viejo
   depende de los tokens de styles.css, que este rebuild ya no carga. Este :root
   puentea esos tokens con los MISMOS valores hex que tenían en styles.css, para que
   el widget se vea pixel-idéntico sin tocar una sola regla suya. */
:root {
  --blue: #2C5FFF;
  --blue-dark: #1240D4;
  --blue-vivid: #4A7BFF;
  --blue-light: #D9E3FF;
  --blue-tint: #EEF2FF;
  --ink: #0A0A0F;
  --cream: #F5F3EE;
  --paper: #FAF8F4;
  --white: #FFFFFF;
  --gray-5: #8E8E9A;
  --gray-4: #B8B8C2;
  --r-xl: 28px;
}

/* Variables que el widget necesita y no están en styles.css */
:root { --violet-mid: #9B6DFF; --rose-mid: #EC4899; }

.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
}
@keyframes chatRingPulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes chatBtnEntrance {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  60%  { transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes chatBtnWiggle {
  0%,100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(-8deg) scale(1.05); }
  40%      { transform: rotate(8deg) scale(1.05); }
  60%      { transform: rotate(-4deg) scale(1.02); }
  80%      { transform: rotate(4deg) scale(1.02); }
}
@keyframes chatStatusPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.chat-bubble-btn {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--blue); border: 2px solid #fff; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(44,95,255,.40), 0 2px 8px rgba(10,10,15,.18);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, opacity .2s;
  position: relative;
  animation: chatBtnEntrance .7s cubic-bezier(.16,1,.3,1) 1.4s both;
}
.chat-bubble-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.chat-bubble-btn:hover { transform: scale(1.08); box-shadow: 0 12px 34px rgba(44,95,255,.5); }
.chat-widget:not(.open) .chat-bubble-btn.wiggle { animation: chatBtnWiggle .6s ease-in-out; }
.chat-bubble-btn::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: var(--blue); animation: chatRingPulse 2.4s ease-out 2.2s infinite; z-index: -1;
}
/* Punto verde "en línea" sobre el avatar del launcher */
.chat-launcher-dot {
  position: absolute; bottom: 1px; right: 1px; width: 14px; height: 14px;
  border-radius: 50%; background: #22c55e; border: 2px solid #fff;
}
/* Al abrir el chat: el launcher desaparece (se cierra desde el encabezado del panel) */
.chat-widget.open .chat-bubble-btn { opacity: 0; transform: scale(0); pointer-events: none; }
.chat-widget.open .chat-bubble-btn::before { animation: none; }

.chat-label-hint {
  position: absolute; right: calc(100% + 10px); bottom: 12px;
  background: var(--ink); color: var(--white);
  font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 100px;
  white-space: nowrap; box-shadow: 0 4px 16px rgba(10,10,15,.2);
  opacity: 0; transform: translateX(8px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events: none; border: 1px solid rgba(255,255,255,.08);
}
.chat-label-hint::after {
  content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 6px solid var(--ink);
}
.chat-widget:not(.open) .chat-bubble-btn:hover + .chat-label-hint,
.chat-widget:not(.open) .chat-label-hint.show { opacity: 1; transform: translateX(0); }

.chat-unread-dot {
  position: absolute; top: -2px; right: -2px; width: 13px; height: 13px;
  background: var(--rose-mid); border-radius: 50%; border: 2px solid var(--paper);
  display: none; animation: chatRingPulse 2s ease-out infinite;
}
.chat-unread-dot.show { display: block; }

.chat-panel {
  position: fixed; bottom: 24px; right: 24px; width: 348px;
  height: min(62vh, 468px);
  background: var(--white); border: 1px solid rgba(10,10,15,.1);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 70px rgba(10,10,15,.22), 0 6px 20px rgba(10,10,15,.10);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.97); pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1);
  transform-origin: bottom right; z-index: 10000;
}
.chat-widget.open .chat-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-header { padding: 14px 14px 14px 16px; background: var(--ink); display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.chat-header-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue) 0%, var(--violet-mid) 100%);
}
.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-name { font-size: 14.5px; font-weight: 600; color: var(--white); line-height: 1.2; }
.chat-header-status { font-size: 11px; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.chat-close-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s;
}
.chat-close-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.chat-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: chatStatusPulse 2s ease-in-out infinite; }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: rgba(44,95,255,.2) transparent;
}
.chat-msg { max-width: 85%; font-size: 13.5px; line-height: 1.55; }
.chat-msg.bot  { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }
.chat-msg-bubble { padding: 10px 14px; border-radius: 16px; display: inline-block; max-width: 100%; }
.chat-msg.bot  .chat-msg-bubble { background: var(--cream); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg.user .chat-msg-bubble { background: var(--blue); color: var(--white); border-bottom-right-radius: 4px; }
.chat-msg-time { font-size: 10px; color: var(--gray-5); margin-top: 3px; padding: 0 2px; }
.chat-msg.user .chat-msg-time { text-align: right; }
.chat-typing { align-self: flex-start; padding: 10px 14px; background: var(--cream); border-radius: 16px; border-bottom-left-radius: 4px; display: none; margin: 0 16px; }
.chat-typing.show { display: flex; gap: 4px; align-items: center; }
.chat-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-5); animation: typingBounce 1.2s ease-in-out infinite; }
.chat-typing-dot:nth-child(2) { animation-delay: .2s; }
.chat-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-input-row { padding: 12px 14px; border-top: 1px solid rgba(10,10,15,.07); display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; background: var(--paper); }
.chat-input {
  flex: 1; border: 1px solid rgba(10,10,15,.12); border-radius: 20px; padding: 9px 14px;
  font-family: inherit; font-size: 13.5px; color: var(--ink); background: var(--white);
  outline: none; resize: none; max-height: 100px; line-height: 1.4; transition: border-color .2s;
}
.chat-input:focus { border-color: rgba(44,95,255,.4); }
.chat-input::placeholder { color: var(--gray-5); }
.chat-send-btn {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blue); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, transform .2s;
}
.chat-send-btn:hover { background: var(--blue-dark); transform: scale(1.08); }
.chat-send-btn:disabled { background: var(--gray-4); cursor: not-allowed; transform: none; }
.chat-suggestions { padding: 0 14px 12px; display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.chat-chip {
  font-size: 11.5px; padding: 5px 11px; border-radius: 100px;
  border: 1px solid rgba(44,95,255,.2); background: var(--blue-tint); color: var(--blue-vivid);
  cursor: pointer; font-family: inherit; font-weight: 500; transition: background .2s, border-color .2s; white-space: nowrap;
}
.chat-chip:hover { background: var(--blue-light); border-color: rgba(44,95,255,.4); }

/* CTA persistente "Quiero que me contacten" */
.chat-lead-cta {
  margin: 0 14px 10px; padding: 9px 12px; border: none; cursor: pointer;
  border-radius: 12px; background: var(--blue); color: #fff; flex-shrink: 0;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 14px rgba(44,95,255,.30); transition: background .2s, transform .15s;
}
.chat-lead-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }
.chat-lead-cta svg { width: 15px; height: 15px; }
/* Tarjeta de formulario dentro del chat */
.chat-lead-card {
  align-self: stretch; position: relative; background: var(--white);
  border: 1px solid rgba(44,95,255,.20); border-radius: 14px; padding: 13px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 20px rgba(10,10,15,.06);
}
.chat-lead-card .lead-title { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.chat-lead-card input, .chat-lead-card textarea {
  width: 100%; border: 1px solid rgba(10,10,15,.14); border-radius: 9px; padding: 8px 11px;
  font-family: inherit; font-size: 13px; color: var(--ink); background: var(--paper);
  outline: none; resize: none; transition: border-color .2s; box-sizing: border-box;
}
.chat-lead-card input:focus, .chat-lead-card textarea:focus { border-color: rgba(44,95,255,.5); }
.chat-lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.chat-lead-card .lead-submit {
  border: none; cursor: pointer; border-radius: 10px; background: var(--blue); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px; transition: background .2s;
}
.chat-lead-card .lead-submit:hover { background: var(--blue-dark); }
.chat-lead-card .lead-submit:disabled { background: var(--gray-4); cursor: not-allowed; }
.chat-lead-card .lead-privacy { font-size: 10px; color: var(--gray-5); text-align: center; line-height: 1.4; }
.chat-lead-card .lead-privacy a { color: var(--blue-vivid); text-decoration: underline; }
.chat-lead-card .lead-error { font-size: 11px; color: #dc2626; min-height: 0; }

@media (max-width: 600px) {
  .chat-widget   { bottom: 16px; right: 16px; }
  /* En móvil el panel ocupa casi toda la pantalla (como cualquier chat): el área de
     mensajes necesita espacio de verdad. Antes era min(34vh,300px) y quedaba inservible. */
  .chat-panel    { top: 14px; left: 12px; right: 12px; bottom: 14px; width: auto; height: auto; }
}