/* ==========================================================================
   Sonar WhatsApp Widget — estilos
   Sin fuentes externas: hereda tipografia del tema (font-family: inherit)
   ========================================================================== */

:root {
  --sww-green: #27d974;
  --sww-green-dark: #1fb75f;
  --sww-text: #1f2937;
  --sww-text-light: #6b7280;
  --sww-border: #e5e7eb;
  --sww-bg: #ffffff;
  --sww-radius: 12px;
  --sww-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
  --sww-z: 999999;
}

#sww-root {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sww-text);
  -webkit-text-size-adjust: 100%;
}

#sww-root * ,
#sww-root *::before,
#sww-root *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Boton flotante
   -------------------------------------------------------------------------- */

.sww-launcher-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--sww-z);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.sww-button {
  width: 58px;
  height: 58px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: var(--sww-green);
  border: none;
  box-shadow: var(--sww-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  animation: sww-bounce 3.2s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sww-button:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), 0 3px 10px rgba(0, 0, 0, 0.1);
}

.sww-button:focus-visible {
  outline: 3px solid #0a7d3f;
  outline-offset: 2px;
}

.sww-button svg {
  width: 42px;
  height: 42px;
  fill: #ffffff;
  display: block;
}

@keyframes sww-bounce {
  0%, 55%, 100% { transform: translateY(0); }
  62% { transform: translateY(-8px); }
  69% { transform: translateY(0); }
  76% { transform: translateY(-4px); }
  83% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sww-button {
    animation: none;
  }
}

/* Globo de saludo */

.sww-greeting {
  position: relative;
  max-width: 200px;
  background: var(--sww-bg);
  color: var(--sww-text);
  padding: 10px 32px 10px 14px;
  border-radius: var(--sww-radius);
  box-shadow: var(--sww-shadow);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 6px;
  animation: sww-fade-in 0.35s ease both;
  animation-delay: 0.6s;
  opacity: 0;
}

@keyframes sww-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.sww-greeting-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border: none;
  background: transparent;
  color: var(--sww-text-light);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sww-greeting-close:hover {
  background: #f3f4f6;
}

.sww-greeting[hidden],
.sww-launcher-wrap.sww-hide-greeting .sww-greeting {
  display: none;
}

/* --------------------------------------------------------------------------
   Overlay (mobile)
   -------------------------------------------------------------------------- */

.sww-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.35);
  z-index: calc(var(--sww-z) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sww-overlay.sww-visible {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Panel del formulario
   -------------------------------------------------------------------------- */

.sww-panel {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: var(--sww-z);
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: min(600px, calc(100vh - 110px));
  max-height: min(600px, calc(100dvh - 110px));
  background: var(--sww-bg);
  border-radius: var(--sww-radius);
  box-shadow: var(--sww-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.sww-panel.sww-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.sww-panel-header {
  background: var(--sww-green);
  color: #ffffff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.sww-panel-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sww-panel-logo {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background-color: #231F20; /* negro del manual de marca */
  flex-shrink: 0;
  background-image: url('sonar-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.sww-panel-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sww-panel-title {
  font-weight: 700;
  font-size: 16px;
  margin: 0;
}

.sww-panel-subtitle {
  font-size: 13px;
  opacity: 0.92;
  margin: 0;
}

.sww-panel-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* SVG en vez del glifo "x": un caracter de texto no queda perfectamente
   centrado dentro de un circulo flex (metricas de fuente asimetricas segun
   el font-family heredado del tema); un path dibujado a mano si se centra
   siempre igual, sin importar la tipografia del sitio. */
.sww-panel-close svg {
  width: 16px;
  height: 16px;
  display: block;
}

.sww-panel-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sww-panel-body {
  padding: 10px 16px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

.sww-field {
  margin-bottom: 6px;
}

.sww-field:last-of-type {
  margin-bottom: 0;
}

.sww-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sww-text);
  margin-bottom: 2px;
}

.sww-label .sww-optional {
  font-weight: 400;
  color: var(--sww-text-light);
}

.sww-input,
.sww-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--sww-text);
  background: #f9fafb;
  border: 1px solid var(--sww-border);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 44px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sww-textarea {
  /* height explicito (no min-height): CF7 renderiza <textarea rows="10"> por
     defecto, y el alto natural de esas 10 filas es mayor que cualquier
     min-height que pongamos aca, asi que min-height quedaria sin efecto.
     height fuerza el tamaño real sin importar el atributo rows. */
  height: 84px;
  min-height: 44px;
  resize: vertical;
  line-height: 1.4;
}

.sww-input:focus,
.sww-textarea:focus {
  outline: none;
  border-color: var(--sww-green-dark);
  background: #ffffff;
}

.sww-input.sww-invalid,
.sww-textarea.sww-invalid {
  border-color: #e11d48;
  background: #fef2f2;
}

.sww-error {
  display: none;
  font-size: 12.5px;
  color: #e11d48;
  margin-top: 4px;
}

.sww-error.sww-visible {
  display: block;
}

/* #sww-root + !important en las propiedades criticas: el tema del sitio suele
   tener sus propios estilos globales para input[type=submit]/button (ancho
   fijo, MAYUSCULAS, padding propio) que de otra forma pisan a los nuestros
   por especificidad o por cargarse despues, cortando el texto del boton. */
#sww-root .sww-submit {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 48px;
  /* padding simetrico (no solo derecho): input[type=submit] centra su texto
     dentro de su content-box nativamente, asi que el padding-left tiene que
     igualar al padding-right o el texto se ve desplazado hacia la izquierda.
     El icono vive en la franja derecha reservada por ese padding. */
  padding: 0 40px !important;
  background-color: var(--sww-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M16.04 4C9.4 4 4 9.4 4 16.04c0 2.1.55 4.15 1.6 5.96L4 28l6.14-1.58c1.74.95 3.7 1.45 5.9 1.45 6.64 0 12.04-5.4 12.04-12.03C28.08 9.4 22.68 4 16.04 4zm0 22.02c-1.9 0-3.75-.5-5.36-1.46l-.38-.22-3.65.94.98-3.56-.25-.4a9.94 9.94 0 0 1-1.53-5.28c0-5.53 4.5-10.02 10.03-10.02 5.54 0 10.03 4.5 10.03 10.02 0 5.53-4.5 10.02-10.03 10.02zm5.5-7.5c-.3-.15-1.77-.87-2.05-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.65-2.05-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.63-.92-2.23-.24-.58-.49-.5-.67-.5h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.5 0 1.47 1.07 2.9 1.22 3.1.15.2 2.1 3.2 5.1 4.5.7.3 1.27.48 1.7.62.72.23 1.37.2 1.88.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.08-.13-.27-.2-.57-.35z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 28px 28px !important;
  color: #ffffff;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700;
  text-transform: none !important;
  white-space: normal !important;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

#sww-root .sww-submit:hover {
  background-color: var(--sww-green-dark);
}

.sww-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sww-submit svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.sww-status {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
  display: none;
}

.sww-status.sww-visible {
  display: block;
}

.sww-status.sww-status-error {
  color: #e11d48;
}

.sww-status.sww-status-sending {
  color: var(--sww-text-light);
}

.sww-status.sww-status-success {
  color: var(--sww-green-dark);
}

/* --------------------------------------------------------------------------
   Vista de exito (post wpcf7mailsent)
   -------------------------------------------------------------------------- */

.sww-success-view[hidden] {
  display: none;
}

.sww-success-view {
  text-align: center;
  padding: 8px 4px;
}

.sww-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eafff3;
  color: var(--sww-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.sww-success-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.sww-success-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--sww-text);
}

.sww-success-text {
  font-size: 14px;
  color: var(--sww-text-light);
  margin: 0 0 18px;
}

#sww-root .sww-whatsapp-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 52px;
  background: var(--sww-green);
  color: #ffffff;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700;
  text-transform: none !important;
  white-space: normal !important;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}

#sww-root .sww-whatsapp-cta:hover {
  background: var(--sww-green-dark);
}

.sww-whatsapp-cta svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Integracion con el markup real de Contact Form 7
   -------------------------------------------------------------------------- */

/* Respaldo defensivo: si wpautop igual inserta <p>/<br> entre campos (WP los
   agrega automaticamente a la plantilla del formulario cuando detecta lineas
   en blanco), que no aporten el margen por defecto del navegador. La fuente
   del problema ya se corrigio quitando esas lineas en blanco en el PHP, esto
   es solo una segunda capa de seguridad. */
#sww-root .wpcf7-form p {
  margin: 0;
}

#sww-root .wpcf7-form br {
  display: none;
}

#sww-root .wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

#sww-root .wpcf7-form-control.wpcf7-not-valid {
  border-color: #e11d48;
  background: #fef2f2;
}

#sww-root .wpcf7-not-valid-tip {
  display: block;
  font-size: 12.5px;
  color: #e11d48;
  margin-top: 4px;
}

/* Usamos nuestro propio .sww-status, ocultamos la caja nativa de CF7 */
#sww-root .wpcf7-response-output {
  display: none;
}

#sww-root .wpcf7-spinner {
  margin: 8px auto 0;
}

/* --------------------------------------------------------------------------
   Mobile-first tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .sww-launcher-wrap {
    right: 14px;
    bottom: 14px;
  }

  .sww-panel {
    right: 12px;
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    max-height: none; /* alto fijado por top+bottom, no por calculos de vh */
  }

  .sww-textarea {
    height: 72px;
  }

  .sww-greeting {
    max-width: 160px;
    font-size: 13px;
  }
}