/* Fase 6 — Widget de chat del agente de IA "JuanDi". Rediseño 2026-07-16
   (skill ui-ux-pro-max): logo real del cliente, sin círculos de color sólido
   "de juguete" (ni naranja ni de otro tipo), esquinas tipo "squircle" en vez
   de cuadradas o perfectamente circulares, tipografía Ubuntu, paleta propia
   de JuanDi (índigo/morado, tomada del logo) separada del naranja/azul del
   resto del sitio — es la identidad del asistente, no del sitio.
   Vive abajo a la DERECHA (ahí vivía antes el plugin de WhatsApp, ya
   eliminado — ver CLAUDE.md Fase 6). */

.nt-chat-launcher,
.nt-chat-panel,
.nt-chat-teaser {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* El launcher va sobre un fondo claro tintado (2026-07-16: no totalmente
   blanco, a pedido del cliente) — el logo de JuanDi ya trae su propio
   degradado morado y se lee mejor sobre un fondo suave que compitiendo con
   un relleno de marca sólido detrás. El color NO cambia en hover/focus —
   solo aparece el tooltip de abajo, sin transform ni sombra distinta.
   2026-07-17: el cliente reportó que "casi no se ve" — el fondo casi blanco
   (#F5F3FB) con borde de 1px casi del mismo tono (#E6E1F5) se perdía contra
   el fondo blanco de la página. Se agranda el botón y se sube el contraste
   con un borde más grueso y saturado (índigo de marca) y una sombra más
   presente, sin volver a un relleno de color sólido (decisión ya tomada). */
/* !important en width/height/padding/border-radius: Astra le pone su propio
   padding ("16px 32px") y border-radius (50px) a CUALQUIER <button> del
   sitio a través de su CSS dinámico del Customizer — sin esto el launcher
   sale deformado (óvalo en vez de squircle), el mismo problema de fondo que
   ya se documentó para el color de hover más abajo. */
.nt-chat-launcher {
  position: fixed !important; right: 20px !important; bottom: 20px !important; z-index: 999 !important;
  width: 68px !important; height: 68px !important; border-radius: 22px !important; /* squircle, no círculo ni cuadrado */
  background: #F5F3FB; border: 2px solid #423E93 !important; cursor: pointer; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(66,62,147,.45);
}
/* !important: ver nota de Astra arriba de .nt-chat-panel__close — sin esto
   el botón se pone rojo en hover pese a no tener ninguna regla nuestra que
   lo pinte así. */
.nt-chat-launcher:hover,
.nt-chat-launcher:focus,
.nt-chat-launcher:focus-visible,
.nt-chat-launcher:active {
  background: #F5F3FB !important;
  border-color: #423E93 !important; /* Astra también pone borde rojo en focus/active de cualquier <button> */
}
.nt-chat-launcher img.nt-chat-icon-open { width: 46px; height: 46px; display: block; }
.nt-chat-icon-close { width: 26px; height: 26px; }
.nt-chat-launcher.is-open .nt-chat-icon-open { display: none; }
.nt-chat-launcher:not(.is-open) .nt-chat-icon-close { display: none; }

/* Tooltip corto al pasar el mouse/foco: "Estoy disponible 24/7 para tí" —
   el único cambio en hover es que este mensaje aparece, sin tocar el color
   ni la forma del botón. */
.nt-chat-launcher__tooltip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: #1C1C1C; color: #fff; text-transform: none;
  font-size: 12.5px; font-weight: 500; padding: 8px 12px; border-radius: 10px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.nt-chat-launcher__tooltip::after {
  content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-left-color: #1C1C1C;
}
.nt-chat-launcher:hover .nt-chat-launcher__tooltip,
.nt-chat-launcher:focus-visible .nt-chat-launcher__tooltip {
  opacity: 1;
}
.nt-chat-launcher.is-open .nt-chat-launcher__tooltip { display: none; }
@media (max-width: 480px) {
  .nt-chat-launcher__tooltip { display: none; } /* sin hover real en táctil */
}

/* Globo de bienvenida ("No busques en toda la página..."), aparece una vez
   por sesión al cruzar el umbral de scroll (ver numartech-chat.js). */
.nt-chat-teaser {
  position: fixed; right: 20px; bottom: 96px; z-index: 998;
  max-width: 250px; background: #fff; color: #1C1C1C;
  border-radius: 18px; border-bottom-right-radius: 6px;
  padding: 13px 32px 13px 14px; font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(66,62,147,.2);
  opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.nt-chat-teaser.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.nt-chat-teaser__title { font-weight: 700; margin: 0; }
.nt-chat-teaser__subtitle { font-size: 12px; color: #6B7B89; margin: 5px 0 0; }
.nt-chat-teaser__close {
  position: absolute; top: 6px; right: 6px;
  width: 22px !important; height: 22px !important; padding: 0 !important;
  border-radius: 8px !important; border: none !important; background: transparent;
  color: #8A97A3; font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.nt-chat-teaser__close:hover,
.nt-chat-teaser__close:focus-visible { background: #F3F1FB !important; color: #1C1C1C; }

.nt-chat-panel {
  position: fixed; right: 20px; bottom: 96px; z-index: 999;
  width: 320px; max-width: calc(100vw - 40px);
  height: 420px; max-height: calc(100vh - 112px);
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 20px 52px rgba(66,62,147,.26);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.nt-chat-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.nt-chat-panel__header {
  background: #423E93; color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.nt-chat-panel__header-text { flex: 1 1 auto; }
.nt-chat-panel__title { font-weight: 700; font-size: 15px; margin: 0; }
.nt-chat-panel__subtitle { font-size: 11.5px; color: #D7D3F2; margin: 2px 0 0; }
.nt-chat-panel__close {
  background: transparent; border: none !important; color: #D7D3F2; cursor: pointer;
  width: 44px !important; height: 44px !important; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  margin: -8px -10px -8px 0; /* toque de 44px sin ensanchar el header visualmente */
  border-radius: 12px !important; transition: background .15s ease, color .15s ease;
}
/* !important: Astra aplica un fondo rojo (--ast-global-color-1) a CUALQUIER
   <button> del sitio en hover a nivel de tema — hay que ganarle explícito en
   cada botón del chat, igual que ya se hace con el naranja de marca en
   numartech-ux.css para los botones normales del sitio. */
.nt-chat-panel__close:hover,
.nt-chat-panel__close:focus-visible { background: rgba(255,255,255,.14) !important; color: #fff; }

.nt-chat-panel__messages {
  flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  background: #FAF9FE;
}
.nt-chat-msg { max-width: 84%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.nt-chat-msg--bot {
  align-self: flex-start; background: #fff; color: #1C1C1C;
  border: 1px solid #ECE9F8; border-bottom-left-radius: 6px;
}
.nt-chat-msg--user {
  align-self: flex-end; background: #423E93; color: #fff; border-bottom-right-radius: 6px;
}
.nt-chat-msg--typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 16px; }
.nt-chat-msg--typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #C7C2E8;
  animation: nt-chat-bounce 1.2s infinite ease-in-out;
}
.nt-chat-msg--typing span:nth-child(2) { animation-delay: .15s; }
.nt-chat-msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes nt-chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Escalamiento a WhatsApp: se mantiene el verde de marca de WhatsApp a
   propósito (excepción documentada) — es un reconocimiento de marca útil
   justo cuando se deriva a ese canal, no un color decorativo suelto. */
.nt-chat-msg__escalate {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  background: #25D366; color: #fff !important; text-decoration: none !important;
  font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 14px;
  transition: background .15s ease;
}
.nt-chat-msg__escalate:hover { background: #1EBE59; }

/* Barra de escritura estilo WhatsApp: bandeja gris clara, input blanco tipo
   "pill" bien redondeado dentro de ella, sin borde visible — igual que el
   compositor de WhatsApp Web/Móvil. */
.nt-chat-panel__form {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #F0F2F5; flex-shrink: 0;
}
/* !important: Astra le pone su propio borde ("1px solid", radio 2px) a
   input[type="text"] con más especificidad que nuestra clase (selector con
   atributo + elemento vs. solo clase) — sin esto el input sale con bordes
   casi rectos en vez del "pill" redondeado tipo WhatsApp. */
.nt-chat-panel__input {
  flex: 1 1 auto; border: none !important; border-radius: 22px !important; padding: 10px 16px !important;
  font-size: 13.5px; font-family: inherit; outline: none !important; background: #fff !important;
  color: #1C1C1C; box-shadow: 0 1px 1px rgba(11,27,41,.06);
}
.nt-chat-panel__input::placeholder { color: #8A97A3; }
/* El color del botón de enviar NO cambia en hover/press (pedido explícito) —
   la única señal de interacción es un ligero cambio de escala. */
/* !important en width/height/padding/border-radius: mismo problema de Astra
   documentado en .nt-chat-launcher — sin esto este botón sale ovalado
   (64x44px) en vez de un círculo de 44x44px. */
.nt-chat-panel__send {
  width: 44px !important; height: 44px !important; padding: 0 !important;
  border-radius: 50% !important; background: #423E93; color: #fff; border: none !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: transform .12s ease;
}
.nt-chat-panel__send:hover,
.nt-chat-panel__send:focus-visible { transform: scale(1.07); background: #423E93 !important; }
.nt-chat-panel__send:active { transform: scale(.96); background: #423E93 !important; }
.nt-chat-panel__send:disabled { opacity: .5; cursor: default; transform: none; }
.nt-chat-panel__send svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .nt-chat-panel { right: 10px; left: 10px; width: auto; bottom: 90px; }
  .nt-chat-teaser { right: 10px; max-width: calc(100vw - 20px); bottom: 90px; }
  .nt-chat-launcher { right: 14px; bottom: 14px; }
}