/* ==========================================================================
   Widget de atencion comercial.

   Usa los mismos tokens que la landing (colores, radios, sombras, escala de
   espaciado y de capas), asi que no parece un plugin pegado encima. El verde
   aparece solo en el boton que lleva a WhatsApp: el canal es de ellos, la
   identidad es nuestra.
   ========================================================================== */

.cw {
  position: fixed;
  right: max(var(--s-5), env(safe-area-inset-right));
  bottom: max(var(--s-5), env(safe-area-inset-bottom));
  z-index: var(--z-widget);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3);
}

/* ---------- Boton flotante ---------- */
.cw-launcher {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 12px 18px;
  font: inherit; font-size: 14.5px; font-weight: 600;
  color: #fff; background: var(--primary);
  border: 1px solid var(--primary); border-radius: 999px;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.cw-launcher:active { transform: scale(.97); }

.cw-launcher .cw-ico-close { display: none; }
.cw[data-open="true"] .cw-launcher .cw-ico-chat { display: none; }
.cw[data-open="true"] .cw-launcher .cw-ico-close { display: block; }
/* Abierto, el boton se reduce a un cierre: el titulo ya esta en el panel. */
.cw[data-open="true"] .cw-launcher-text { display: none; }
.cw[data-open="true"] .cw-launcher { padding: 12px; }

/* ---------- Panel ---------- */
.cw-panel {
  width: 336px; max-width: calc(100vw - var(--s-5) * 2);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  /* El orden visual es panel arriba, boton abajo. */
  order: -1;

  /* Sale de su propio boton, no del centro de la nada. */
  transform-origin: bottom right;
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(.97);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility 0s linear var(--t-base);
}
.cw[data-open="true"] .cw-panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility 0s;
}

/* Cada paso entra con un desplazamiento minimo para que el contenido no
   aparezca de golpe. Se dispara solo al dejar de estar oculto. */
.cw-step:not([hidden]) { animation: cw-paso var(--t-fast) var(--ease-out) both; }
@keyframes cw-paso {
  from { opacity: 0; transform: translateY(4px); }
}

.cw-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  /* Cabecera oscura, cuerpo claro: le da caracter sin sacrificar la
     legibilidad de la conversacion. Mismo navy que la seccion de API. */
  background: var(--ink); border-bottom: 1px solid var(--ink-border-soft);
}
.cw-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--ink-text); }
.cw-sub { margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); }

.cw-x {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  color: var(--ink-mute); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.cw-x:active { transform: scale(.94); }

.cw-head :focus-visible { outline-color: var(--ink-primary); }

.cw-body { padding: var(--s-5); }

/* ---------- Mensajes ---------- */
.cw-msg {
  padding: 10px 13px; font-size: 13.5px; line-height: 1.55;
  color: var(--text-soft);
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); border-bottom-left-radius: 3px;
}
.cw-msg + .cw-msg { margin-top: var(--s-2); }
/* Lo que elige la persona se alinea al otro lado, como en cualquier chat. */
.cw-msg-own {
  margin-left: auto; max-width: 85%;
  color: var(--primary); background: var(--primary-soft); border-color: transparent;
  border-radius: var(--radius-sm); border-bottom-right-radius: 3px;
  border-bottom-left-radius: var(--radius-sm);
}

/* ---------- Opciones ---------- */
.cw-options { margin-top: var(--s-4); display: grid; gap: 7px; }
.cw-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; min-height: 40px; padding: 9px 13px;
  font: inherit; font-size: 13.5px; font-weight: 500; text-align: left;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.cw-option svg { flex: 0 0 auto; color: var(--text-mute); transition: transform var(--t-base) var(--ease-out), color var(--t-fast) var(--ease-out); }
.cw-option:active { transform: scale(.985); }

/* ---------- Continuar por WhatsApp ---------- */
.cw-wa {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  margin-top: var(--s-4); min-height: 44px; padding: 11px 16px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: #fff; background: #1d9e58;
  border: 1px solid #1d9e58; border-radius: var(--radius-sm);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.cw-wa:active { transform: scale(.985); }

.cw-back {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: var(--s-3); padding: 6px 2px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--text-mute); background: none; border: 0; cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.cw-back svg { transition: transform var(--t-base) var(--ease-out); }

.cw-foot {
  padding: 10px var(--s-5) var(--s-4);
  font-size: 11.5px; color: var(--text-mute);
  border-top: 1px solid var(--border);
}

/* ---------- Movil ---------- */
/* ==========================================================================
   Espacio reservado para el lanzador

   El boton flota sobre la esquina inferior derecha, asi que cuando la tarjeta
   de la demo queda alineada con el fondo de la pantalla su ultima linea cae
   debajo. Medido en el navegador, tapaba el enlace "Ver la API" (interactivo)
   y la ultima linea del mensaje de "no encontrado".

   La tarjeta reserva la altura del lanzador y el CTA deja de alinearse a la
   derecha. Estas dos reglas viven aqui y no en landing.css a proposito: esta
   hoja solo se carga cuando el widget existe, asi que sin widget no se
   reserva un hueco que nadie va a ocupar.
   ========================================================================== */
@media (max-width: 960px) {
  /* Pastilla completa: 24px de separacion + 48px de alto. */
  .mock-body { padding-bottom: 80px; }
  .demo-cta { justify-content: flex-start; }
}

@media (max-width: 560px) {
  /* Solo icono: 16px de separacion + 46px de alto. */
  .mock-body { padding-bottom: 70px; }
}

/* Hover solo con puntero fino; en tactil se quedaria pegado tras el toque. */
@media (hover: hover) and (pointer: fine) {
  .cw-launcher:hover { background: var(--primary-dark); }
  .cw-x:hover { color: var(--ink-text); background: var(--ink-raised); border-color: var(--ink-border); }
  .cw-option:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
  .cw-option:hover svg { color: var(--primary); transform: translateX(2px); }
  .cw-wa:hover { background: #17864a; border-color: #17864a; }
  .cw-back:hover { color: var(--primary); }
  .cw-back:hover svg { transform: translateX(-2px); }
}

@media (max-width: 560px) {
  .cw {
    right: max(var(--s-4), env(safe-area-inset-right));
    left: max(var(--s-4), env(safe-area-inset-left));
    bottom: max(var(--s-4), env(safe-area-inset-bottom));
    align-items: flex-end;
  }
  .cw-panel {
    width: 100%; max-width: none;
    /* Nunca mas alto que la pantalla disponible, con su propio scroll. */
    max-height: min(74dvh, 560px);
    display: flex; flex-direction: column;
  }
  .cw-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* En movil el lanzador se reduce a icono. La etiqueta ocupaba casi medio
     ancho de pantalla y era lo que tapaba el formulario del hero; el circulo
     deja una esquina de 46px y el widget sigue igual de alcanzable. */
  .cw-launcher { min-height: 46px; padding: 13px; }
  .cw-launcher-text { display: none; }
}