:root {
  /* 2026-09-25 · El acento del chat de Ensutex deja el cian. Es el último
     "azulito" de la conversación —justo donde el dueño dijo que el ruido visual
     no sirve de nada— y además venía partido en dos valores (#e20613 fuera del
     panel, #e20613 dentro, más #e20613 en el hover): esa deriva es la que este
     cambio cierra. El token es POR MARCA, y solo Ensutex seguía en el azul
     heredado; ModoFan (#87ceeb) y REBXN (#e20613) conservan el suyo.
     El blando es #ff3b47 y no #E20613 porque va sobre el panel oscuro
     (#0a0a09): ahí el rojo de marca da 4,0:1 y no alcanza. Es el mismo valor y
     el mismo motivo que camino-vivo.css ya eligió para el contador. */
  --asu-sky: #E20613;
  --asu-sky-soft: #ff3b47;
  --asu-ink: #0a0a09;
  --asu-muted: #78726d;
  --asu-line: rgba(10, 10, 9, .12);
}

.ens-chat-widgets.floating-widgets {
  position: fixed !important;
  z-index: 990 !important;
  right: clamp(14px, 2vw, 28px) !important;
  bottom: calc(clamp(14px, 2vw, 28px) + var(--ensutex-consent-offset, 0px)) !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
}

/* El HTML heredado contiene un botón anterior a Asu. Se mantiene invisible
   hasta que el widget nuevo reemplaza ese marcado, evitando el salto inicial. */
html:not(.ens-chat-ready) :is(#chatbot-trigger, #chatbot-cta, #chatbot-panel) {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.ens-chat-consent-pending .ens-chat-widgets,
html.ens-chat-consent-pending .ens-chat-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

.ens-chat-trigger {
  position: relative !important;
  display: grid !important;
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  padding: 7px !important;
  overflow: visible !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  background: #0d0c0b !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: transform 180ms ease, border-color 180ms ease !important;
}

.ens-chat-trigger:hover { transform: translateY(-2px) !important; border-color: var(--asu-sky) !important; }
.ens-chat-trigger:focus-visible { outline: 3px solid var(--asu-sky-soft) !important; outline-offset: 4px !important; }
.ens-chat-trigger img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  clip-path: circle(50%) !important;
  object-fit: cover !important;
  transform: scale(1.08) !important;
}
.ens-chat-trigger > svg { display:block!important;width:100%!important;height:100%!important;border-radius:999px!important;overflow:visible!important; }
#chatbot-notif { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border: 2px solid #0d0c0b; border-radius: 999px; background: var(--asu-sky); }

.ens-chat-prompt.chatbot-cta-fixed {
  position: absolute !important;
  right: 78px !important;
  bottom: 9px !important;
  display: inline-flex !important;
  min-height: 48px !important;
  max-width: min(25rem, calc(100vw - 112px)) !important;
  align-items: center !important;
  padding: 0 1.1rem !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 999px !important;
  background: #0e0e0d !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22) !important;
  font: 800 .78rem/1.3 var(--ens-font-body-family) !important;
  text-align: left !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: normal !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: transform 180ms ease, border-color 180ms ease !important;
}
.ens-chat-prompt.chatbot-cta-fixed:hover { transform: translateY(-2px) !important; border-color: var(--asu-sky) !important; }
.ens-chat-prompt.chatbot-cta-fixed:focus-visible { outline: 3px solid var(--asu-sky-soft) !important; outline-offset: 3px !important; }

/* Las hojas viejas del sitio esconden #chatbot-cta en celular. En escritorio la
   píldora se muestra después del consentimiento (el panel sigue cerrado); en
   celular manda la decisión que el sitio ya tiene escrita en cinco hojas
   (tokens.css, site-enhancements.css, mobile-ux.css, catalogo.css y
   ux-refresh.css, esta última con el motivo: "el globo proactivo cubría H2 y
   CTA; el botón circular se conserva"). Medido el 25-09 a 390 y 360px: la
   píldora se posaba sobre la lista de promesas de la marca ("Boceto antes de
   pagar", "Desde 1 prenda", "Hecho en Chile por Ensutex"). Se unifica abajo
   para las tres marcas: en celular queda el botón redondo de Asu, que es el
   que acompaña al CTA (assets/js/asu-acompana.js). */
#chatbot-cta.ens-chat-prompt.chatbot-cta-fixed {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: min(22rem, calc(100vw - 124px)) !important;
  min-width: min(16rem, calc(100vw - 124px)) !important;
  max-width: min(22rem, calc(100vw - 124px)) !important;
  white-space: normal !important;
}

@media (max-width: 767px) {
  /* Misma decisión que las cinco hojas viejas, ahora también donde ellas no se
     cargan (las páginas de marca): sin píldora, sólo el botón redondo. */
  #chatbot-cta.ens-chat-prompt.chatbot-cta-fixed {
    display: none !important;
  }
}

#chatbot-cta.ens-chat-prompt .chatbot-cta-full { display: inline !important; }
#chatbot-cta.ens-chat-prompt .chatbot-cta-short { display: none !important; }

#chatbot-cta.ens-chat-prompt.chatbot-cta-fixed[hidden],
.ens-chat-widgets.is-awaiting-consent,
.ens-chat-widgets.is-chat-open {
  display: none !important;
}

.chatbot-cta-short { display: none; }

.ens-chat-panel#chatbot-panel {
  position: fixed !important;
  z-index: 995 !important;
  right: clamp(14px, 2vw, 28px) !important;
  bottom: calc(102px + var(--ensutex-consent-offset, 0px)) !important;
  display: flex !important;
  width: min(430px, calc(100vw - 28px)) !important;
  height: auto !important;
  max-height: min(560px, calc(100dvh - 130px - var(--ensutex-consent-offset, 0px))) !important;
  overflow: hidden !important;
  flex-direction: column !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 24px !important;
  background: #f9f8f8 !important;
  color: var(--asu-ink) !important;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .36) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(16px) scale(.985) !important;
  transform-origin: bottom right !important;
  transition: opacity 190ms ease, transform 190ms ease, visibility 0s linear 190ms !important;
}

.ens-chat-panel#chatbot-panel.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  transition-delay: 0s !important;
}

.ens-chat-panel#chatbot-panel.is-action-minimized,
.ens-chat-panel#chatbot-panel.is-open.is-action-minimized {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) scale(.985) !important;
}

.ens-chat-header {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: #0a0a09;
  color: #fff;
}

.ens-chat-avatar { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; overflow: hidden; border: 1px solid rgba(226, 6, 19,.72); border-radius: 999px; background: #121110; padding: 3px; }
.ens-chat-avatar img { width: 100%; height: 100%; border-radius: 999px; clip-path: circle(50%); object-fit: cover; transform: scale(1.08); }
.ens-chat-avatar svg { display:block;width:100%;height:100%;overflow:visible }
.ens-chat-heading { display: grid; min-width: 0; flex: 1; gap: 4px; }
/* 2026-09-25 · Entrega plana también en el encabezado: sin tracking. */
.ens-chat-heading strong { font: 800 .83rem/1.2 var(--ens-font-body-family); }
.ens-chat-heading span { overflow: hidden; color: #c9c6c4; font: 500 .72rem/1.25 var(--ens-font-body-family); text-overflow: ellipsis; white-space: nowrap; }
.ens-chat-heading span[data-online="true"] { color: var(--asu-sky-soft); }
.ens-chat-close { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; background: transparent; color: #fff; cursor: pointer; }
.ens-chat-close:hover { border-color: var(--asu-sky); color: var(--asu-sky-soft); }
.ens-chat-close:focus-visible { outline: 3px solid var(--asu-sky-soft); outline-offset: 2px; }

/* 2026-09-25 · Sin línea bajo el rótulo: la separación la hace el fondo. */
.ens-chat-route {
  min-height: 34px;
  padding: 9px 15px 8px;
  background: #fff;
  color: #716c67;
  font: 750 .67rem/1.2 var(--ens-font-body-family);
}

#chatbot-panel.ens-chat-panel > .ens-chat-route {
  position: static !important;
  display: block !important;
  min-height: 34px !important;
  flex: 0 0 auto !important;
}

/* 2026-09-25 · Entrega plana: sin línea bajo el rótulo y sin celeste de fondo.
   El mismo gris de la conversación, el rótulo en tinta. */
.ens-chat-understood {
  display: flex;
  min-height: 58px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: #f9f8f8;
  color: #1a1817;
}

.ens-chat-understood[hidden] { display: none !important; }
.ens-chat-understood > div { display: grid; min-width: 0; gap: 2px; }
.ens-chat-understood span { color: #e20613; font: 800 .62rem/1.2 var(--ens-font-body-family); }
.ens-chat-understood strong {
  display: -webkit-box;
  overflow: hidden;
  font: 750 .72rem/1.35 var(--ens-font-body-family);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ens-chat-understood button {
  min-width: 68px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(10, 10, 9, .2);
  border-radius: 999px;
  background: #fff;
  color: #1a1817;
  font: 800 .68rem/1.2 var(--ens-font-body-family);
  cursor: pointer;
}
.ens-chat-understood button:hover { border-color: var(--asu-sky); }
.ens-chat-understood button:focus-visible { outline: 3px solid var(--asu-sky); outline-offset: 2px; }

.ens-chat-conversation { min-height: 128px; max-height: 260px; flex: 1; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, #f9f8f8 0%, #f5f4f3 100%); }
#chatbot-panel #chat-messages { display: flex !important; min-height: 0 !important; flex-direction: column !important; justify-content: flex-start !important; gap: 9px !important; padding: 15px !important; }

/* 2026-09-25 · Sin sombra ni contorno alrededor del texto. Medido antes:
   box-shadow rgba(23, 22, 21,.05) 0 8px 24px 0 y borde 1px al 12 %. La burbuja
   se separa por superficie (blanco sobre el gris de la conversación), no por
   línea: el fondo hace el trabajo y la letra queda limpia. */
.ens-chat-message {
  width: fit-content;
  max-width: 88%;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px 16px 16px 5px;
  background: #fff;
  color: #272422;
  box-shadow: none;
  font: 500 .84rem/1.48 var(--ens-font-body-family);
  white-space: pre-wrap;
}

.ens-chat-message--user { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: #0a0a09; color: #fff; }
.ens-chat-typing { display: inline-flex; width: fit-content; align-items: center; gap: 4px; padding: 12px 14px; border: 0; border-radius: 16px 16px 16px 5px; background: #fff; }
.ens-chat-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--asu-sky); animation: asuTyping 1s ease-in-out infinite; }
.ens-chat-typing span:nth-child(2) { animation-delay: 120ms; }
.ens-chat-typing span:nth-child(3) { animation-delay: 240ms; }
@keyframes asuTyping { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-4px); opacity: 1; } }

/* 2026-09-25 · Fuera las tres divisorias de 1px al 12 % que se leían como
   subrayado bajo el rótulo (opciones, formulario y pie). El corte entre la
   conversación gris y la zona blanca de controles ya lo hace el fondo. */
#chatbot-panel.ens-chat-panel #chat-options-wrap { flex: 0 0 auto !important; max-height: 150px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; box-shadow: none !important; }
#chatbot-panel.ens-chat-panel #chat-options { display: flex !important; max-height: 150px !important; overflow-y: auto !important; flex-wrap: wrap !important; gap: 7px !important; margin: 0 !important; padding: 10px 12px !important; border: 0 !important; background: #fff !important; box-shadow: none !important; }
.ens-chat-option { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 9px 13px; border: 1px solid rgba(10, 10, 9, .18); border-radius: 999px; background: #fff; color: #171615; font: 750 .75rem/1.2 var(--ens-font-body-family); text-align: center; text-decoration: none; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.ens-chat-option:hover { border-color: var(--asu-sky); background: #f6f4f3; }
.ens-chat-option--primary { border-color: #0a0a09; background: #0a0a09; color: #fff; }
#chatbot-panel #chat-options .ens-chat-option:not(.ens-chat-option--primary) { color: #171615 !important; }
#chatbot-panel #chat-options .ens-chat-option--primary { color: #fff !important; }
/* Sobre el rojo de marca la tinta es blanca: medida, la tinta oscura que
   servía sobre el cian da 3,92:1 sobre #E20613 (bajo el 4,5:1 de AA) y la
   blanca da 4,92:1. El cian que se va tampoco pasaba: 2,38:1 como texto
   sobre el pie blanco. El cambio sube el contraste, no solo el color. */
.ens-chat-option--primary:hover { border-color: var(--asu-sky); background: var(--asu-sky); color: #ffffff; }
.ens-chat-option:focus-visible { outline: 3px solid var(--asu-sky-soft); outline-offset: 2px; }

.ens-chat-form { display: grid !important; min-height: 62px; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 9px 11px; border: 0; background: #fff; }
.ens-chat-form > .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.ens-chat-form input { width: 100%; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid rgba(10, 10, 9, .16); border-radius: 999px; background: #f7f6f5; color: #171615; font: 500 .82rem/1 var(--ens-font-body-family); }
.ens-chat-form input:focus { border-color: var(--asu-sky); outline: 3px solid rgba(226, 6, 19, .18); }
.ens-chat-form input:disabled { opacity: .58; cursor: wait; }
.ens-chat-form button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 999px; background: var(--asu-sky); color: #ffffff; cursor: pointer; }
.ens-chat-form button:hover { background: #c50511; }
.ens-chat-form button:focus-visible { outline: 3px solid var(--asu-sky-soft); outline-offset: 2px; }

.ens-chat-footer { display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px 9px; border: 0; background: #fff; color: #67625e; font: 600 .66rem/1.2 var(--ens-font-body-family); }
/* Enlace evidente por tinta y peso, no por línea (25-09 §2.3). */
.ens-chat-footer a { color: #0a0a09; font-weight: 900; text-decoration: none; }
.ens-chat-footer a:hover { text-decoration: none; color: var(--asu-sky); }

@media (max-width: 640px) {
  .ens-chat-widgets.floating-widgets { right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom) + var(--ensutex-consent-offset, 0px)) !important; }
  .ens-chat-widgets.floating-widgets.is-action-peek {
    top: calc(78px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    bottom: auto !important;
  }
  .ens-chat-widgets.is-action-peek .ens-chat-trigger {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
  }
  .ens-chat-widgets.is-action-peek .ens-chat-prompt.chatbot-cta-fixed {
    right: 62px !important;
    bottom: 4px !important;
    min-height: 44px !important;
  }
  .ens-chat-trigger { width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; }
  #chatbot-cta.ens-chat-prompt.chatbot-cta-fixed { right: 68px !important; bottom: 4px !important; width: min(15rem, calc(100vw - 112px)) !important; min-width: min(12rem, calc(100vw - 112px)) !important; min-height: 48px !important; max-width: min(15rem, calc(100vw - 112px)) !important; box-sizing: border-box !important; padding: .65rem .9rem !important; font-size: .7rem !important; line-height: 1.3 !important; }
  .ens-chat-panel#chatbot-panel {
    right: 8px !important;
    bottom: calc(82px + env(safe-area-inset-bottom) + var(--ensutex-consent-offset, 0px)) !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    max-height: min(520px, calc(100dvh - 94px - env(safe-area-inset-bottom) - var(--ensutex-consent-offset, 0px))) !important;
    border-radius: 20px !important;
    transform-origin: bottom center !important;
  }
  .ens-chat-header { min-height: 70px; padding: 10px 11px; }
  #chatbot-panel #chat-messages { padding: 12px !important; }
  .ens-chat-message { max-width: 92%; font-size: .81rem; }
  #chat-options { max-height: 136px; padding: 9px 10px; }
  .ens-chat-option { min-height: 44px; }
}

@media (max-width: 390px) {
  .chatbot-cta-full { display: inline; }
  .chatbot-cta-short { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ens-chat-panel#chatbot-panel,
  .ens-chat-trigger,
  .ens-chat-option { transition: none !important; }
  .ens-chat-typing span { animation: none; }
}

/* El guard de inbound-flow retira momentaneamente a Asu solo cuando su globo
   pisaria un control. Al seguir navegando reaparece con el mensaje vigente. */
body.lead-form-in-view #chatbot-panel.ens-chat-panel:not(.is-open),
body.contact-step-active #chatbot-panel.ens-chat-panel:not(.is-open),
body.quote-total-in-view #chatbot-panel.ens-chat-panel:not(.is-open),
body.floating-control-overlap #chatbot-panel.ens-chat-panel:not(.is-open) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(120%) !important;
}

.ens-chat-message strong {
  color: #0a0a09;
  font-weight: 900;
}

.ens-chat-message--user strong { color: #fff; }

body.quote-drawer-open .ens-chat-widgets,
body.quote-drawer-open .ens-chat-panel,
.ens-chat-widgets.is-layer-suspended,
.ens-chat-panel.is-layer-suspended {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2026-07-18 · El globo pertenece visualmente a Asu. Sin ondas ni reclamo:
   el asistente no persigue al cliente (decisión 25-09, §2.1). */
.ens-chat-trigger {
  z-index: 3 !important;
  border-color: rgba(226, 6, 19, .72) !important;
  background: #0d0c0b !important;
}

.ens-chat-prompt.chatbot-cta-fixed {
  z-index: 2 !important;
  right: 58px !important;
  border-color: rgba(226, 6, 19, .48) !important;
  border-radius: 999px 14px 14px 999px !important;
  background: #0e0e0d !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28) !important;
}

.ens-chat-prompt.chatbot-cta-fixed::after {
  position: absolute;
  right: -15px;
  bottom: 10px;
  width: 22px;
  height: 24px;
  background: #0e0e0d;
  clip-path: polygon(0 0, 100% 55%, 0 100%);
  content: '';
  pointer-events: none;
}

.ens-chat-panel#chatbot-panel,
.ens-chat-panel#chatbot-panel * {
  --asu-sky: var(--ens-red, #E20613);
  --asu-sky-soft: #ff3b47;
}

#chatbot-panel .ens-chat-header {
  background: #0a0a09 !important;
}

#chatbot-panel .ens-chat-option--primary,
#chatbot-panel .ens-chat-form button {
  /* Una sola fuente: el relleno del CTA del chat sale del token, no de un
     hexadecimal repetido. Antes había tres cianes distintos para el mismo
     acento y el del panel no era ninguno de los dos del :root. */
  border-color: var(--asu-sky) !important;
  background: var(--asu-sky) !important;
  color: #ffffff !important;
}

@media (max-width: 640px) {
  #chatbot-cta.ens-chat-prompt.chatbot-cta-fixed {
    right: 50px !important;
    bottom: 4px !important;
    width: min(15.5rem, calc(100vw - 100px)) !important;
    min-width: min(12.5rem, calc(100vw - 100px)) !important;
    max-width: min(15.5rem, calc(100vw - 100px)) !important;
    min-height: 51px !important;
    padding: .7rem 1.35rem .7rem .95rem !important;
    font-size: .72rem !important;
  }
}

/* Sin animación de atención en el lanzador: no hay rama de reduced-motion que
   guardar acá (las ondas asuAttractWave se retiraron el 25-09). */

/* ---------------------------------------------------------------------
   2026-09-25 · Entrega plana (decisión 25-09 §2.3).
   La capa legacy fuerza mayúsculas y tracking sobre el texto del asistente:
     · mobile-ux.css y su copia minificada site-enhancements.css:
       .chatbot-cta-fixed { letter-spacing: .04em; text-transform: uppercase }
       .chat-options-title { letter-spacing: .12em; text-transform: uppercase }
     · web-integrations.css: mismo .chatbot-cta-fixed
     · animations.css y site-enhancements.css: #chatbot-cta { letter-spacing: .02em }
     · guide-premium.css: .chat-options-title { letter-spacing: .08em; uppercase }
   No se editan esos archivos (uno es generado por scripts/build-css-bundle.js);
   se neutralizan acá, que es la hoja que chat-widget.js inyecta al final del
   <head> y por lo tanto la última en hablar.
   --------------------------------------------------------------------- */
.ens-chat-prompt.chatbot-cta-fixed,
#chatbot-cta.ens-chat-prompt.chatbot-cta-fixed,
#chatbot-panel.ens-chat-panel .chat-options-title,
#chatbot-panel.ens-chat-panel #chat-options .chat-options-title,
#chatbot-panel.ens-chat-panel .ens-chat-route,
#chatbot-panel.ens-chat-panel .ens-chat-understood span,
#chatbot-panel.ens-chat-panel #chat-options,
#chatbot-panel.ens-chat-panel #chat-options *:not(input):not(textarea) {
  letter-spacing: normal !important;
  text-transform: none !important;
}