/* Chatbot FAB v1.0 – cbf.css | by Comunicaalcalá */
:root {
  --cbf-ink:    #111827;
  --cbf-muted:  #6B7280;
  --cbf-surface:#FFFFFF;
  --cbf-bg:     #F3F4F6;
  --cbf-border: #E5E7EB;
  --cbf-ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* Backdrop */
.cbf-backdrop { display:none; position:fixed; inset:0; z-index:2147483644; background:rgba(0,0,0,0); backdrop-filter:blur(0); transition:background .3s,backdrop-filter .3s; }
.cbf-backdrop.cbf-open { display:block; background:rgba(0,0,0,.35); backdrop-filter:blur(3px); }

/* FAB — <button> nativo. Mismo problema recurrente hoy (.cbf-tab, .cbf-budget-btn,
   .cbf-lead-btn): un tema con reset agresivo de <button> puede pisar position/display/
   width sin !important. Confirmado en producción en misterwils.com vía getComputedStyle():
   position pasaba de fixed a relative, display de flex a inline-flex, width de 56px a
   60px — el botón dejaba de ser un FAB fijo en la esquina y quedaba perdido en el flujo
   normal del documento, invisible en pantalla. Blindado con !important en todo lo que
   afecta a layout/posición; bottom/left/right (que dependen del ajuste de márgenes del
   admin) se blindan en su propio <style> inline, ver más abajo en chatbot-fab.php. */
.cbf-fab {
  position:fixed !important;
  z-index:2147483647 !important;
  width:56px !important; height:56px !important;
  min-width:0 !important; min-height:0 !important; max-width:56px !important; max-height:56px !important;
  border-radius:50% !important;
  border:none !important; margin:0 !important; padding:0 !important;
  box-sizing:border-box !important;
  cursor:pointer !important;
  background:var(--cbf-brand) !important; color:#fff !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  box-shadow:0 4px 20px var(--cbf-rgba),0 1px 6px rgba(0,0,0,.12) !important;
  transition:transform .2s var(--cbf-ease), background .15s, opacity .3s !important;
}
.cbf-fab:hover { background:var(--cbf-dark) !important; transform:scale(1.08) !important; }
.cbf-fab:active { transform:scale(.94) !important; }
.cbf-fab.cbf-open { border-radius:50% !important; }
.cbf-fab.cbf-hidden { opacity:0 !important; pointer-events:none !important; }
/* pulse */
.cbf-fab::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--cbf-brand); opacity:0; animation:cbf-pulse 3s ease-out infinite; }
@keyframes cbf-pulse { 0%{transform:scale(1);opacity:.5} 70%{transform:scale(1.6);opacity:0} 100%{transform:scale(1.6);opacity:0} }

/* Panel — visto en misterwils.com que el tema pisaba background/border-radius/box-shadow
   incluso en <div> (no solo en <button>/<input> como en los casos anteriores). Blindado
   con !important en las propiedades visuales de .cbf-panel y .cbf-panel-header, mismo
   criterio que el resto de componentes nativos ya corregidos. */
.cbf-panel {
  position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:2147483646 !important;
  background:var(--cbf-surface) !important;
  border-radius:20px 20px 0 0 !important;
  box-shadow:0 -2px 24px rgba(0,0,0,.1),0 0 0 1px var(--cbf-border) !important;
  display:flex !important; flex-direction:column !important;
  height:520px; max-height:88vh;
  transform:translateY(100%);
  visibility:hidden;
  transition:transform .45s var(--cbf-ease), visibility 0s linear .45s;
  pointer-events:none;
  margin:0 !important; padding:0 !important;
}
.cbf-panel.cbf-open { transform:translateY(0); visibility:visible; transition:transform .45s var(--cbf-ease); pointer-events:auto; }

/* Móvil: pantalla completa por defecto (activable/desactivable vía ajuste "mobile_fullscreen") */
@media(max-width:599px) {
  .cbf-panel.cbf-mobile-fullscreen {
    position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; max-height:100% !important; border-radius:0 !important;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  }
  .cbf-panel.cbf-mobile-fullscreen .cbf-panel-header { border-radius:0 !important; padding-top:calc(14px + env(safe-area-inset-top)) !important; }
}

@media(min-width:600px) {
  .cbf-panel { left:auto !important; right:auto !important; width:var(--cbf-panel-w, 380px) !important; border-radius:16px !important; height:var(--cbf-panel-h, 540px); max-height:90vh; transform:translateY(20px) scale(.97); opacity:0; visibility:hidden; transition:transform .4s var(--cbf-ease),opacity .3s ease,visibility 0s linear .4s; }
  .cbf-panel.cbf-open { transform:translateY(0) scale(1); opacity:1; visibility:visible; transition:transform .4s var(--cbf-ease),opacity .3s ease; }
}

/* Header */
.cbf-panel-header {
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:9px 14px !important; flex-shrink:0 !important;
  background:var(--cbf-brand) !important;
  border-radius:20px 20px 0 0 !important;
  color:#fff !important;
  margin:0 !important; border:none !important; box-shadow:none !important;
}
@media(min-width:600px){ .cbf-panel-header { border-radius:16px 16px 0 0 !important; } }
.cbf-bot-avatar {
  position:relative !important;
  width:32px !important; height:32px !important; border-radius:50% !important; flex-shrink:0 !important;
  background:rgba(255,255,255,.2) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  margin:0 !important;
}
.cbf-bot-name { font-size:13.6px !important; font-weight:700 !important; color:#fff !important; line-height:1.25 !important; margin:0 !important; }
/* Punto "en línea" superpuesto sobre el avatar (esquina inferior derecha), en vez de una
   línea de texto propia — el borde usa el color de fondo de la cabecera para simular el
   recorte visual típico de este tipo de indicador (WhatsApp, HubSpot, etc). */
.cbf-status-dot { position:absolute; bottom:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background:#4ade80; border:2px solid var(--cbf-brand); display:block; }
.cbf-ai-disclosure { font-size:9.6px !important; color:rgba(255,255,255,.6) !important; margin-top:1px !important; line-height:1.2 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
/* Confirmado en misterwils.com vía getComputedStyle(): el tema fuerza min-height:42px en
   TODOS los <button> (probablemente por accesibilidad táctil), y min-height gana sobre
   height aunque este tenga !important — son propiedades distintas, no una anula a la otra.
   Resultado: botones de 28-36px de alto quedaban estirados a 42px, más altos que anchos.
   Blindado con min-height/min-width/max-height/max-width a 0/valor fijo en todos los
   <button> nativos del widget (cierre, expandir, enviar, micrófono, FAB). */
.cbf-panel-close { width:28px !important; height:28px !important; min-width:0 !important; min-height:0 !important; max-width:28px !important; max-height:28px !important; border-radius:8px !important; border:none !important; background:rgba(255,255,255,.15) !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; flex-shrink:0 !important; transition:background .15s !important; padding:0 !important; box-shadow:none !important; line-height:1 !important; }
.cbf-panel-close:hover { background:rgba(255,255,255,.25) !important; }
.cbf-panel-close svg, .cbf-panel-expand svg { display:block !important; visibility:visible !important; opacity:1 !important; stroke:#fff !important; fill:none !important; pointer-events:none !important; }

/* Tabs */
.cbf-tabs { display:flex; flex-shrink:0; border-bottom:1px solid var(--cbf-border); background:var(--cbf-surface); }
/* .cbf-tab es un <button> nativo — mismo problema que .cbf-budget-btn/.cbf-lead-btn (ver
   ATTR-001 y el fix del botón de presupuesto): el tema del cliente puede traer su propio
   reset de <button> (relleno sólido en hover/estado, radio, padding...) con especificidad
   suficiente para pisarlo. Comprobado en producción en mimoondo.com. Blindado con
   !important en todas las propiedades visuales, igual que los demás botones nativos. */
.cbf-tab {
  flex:1 !important;
  border:none !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  padding:9px 8px !important;
  margin:0 !important;
  font-size:12.48px !important;
  font-weight:600 !important;
  font-family:inherit !important;
  line-height:normal !important;
  color:var(--cbf-muted) !important;
  transition:color .15s,border-color .15s !important;
}
.cbf-tab:hover { background:none !important; color:var(--cbf-ink) !important; }
.cbf-tab-active, .cbf-tab-active:hover { color:var(--cbf-brand) !important; border-bottom-color:var(--cbf-brand) !important; }
.cbf-tab-badge { display:inline-flex; align-items:center; justify-content:center; min-width:15px; height:15px; padding:0 4px; margin-left:5px; border-radius:8px; background:var(--cbf-brand); color:#fff; font-size:9.92px; font-weight:700; line-height:1; vertical-align:middle; }

/* Historial de productos vistos */
.cbf-viewed-panel, .cbf-lead-panel { flex:1; overflow-y:auto; padding:14px; scrollbar-width:thin; }
.cbf-viewed-empty { font-size:12.8px; color:var(--cbf-muted); text-align:center; padding:30px 10px; line-height:1.5; }
/* Pie fijo de la pestaña "Historial" — mismo hueco que ocupa .cbf-input-bar en "Chat". */
.cbf-viewed-footer { padding:10px 12px; flex-shrink:0; border-top:1px solid var(--cbf-border); }
/* "Descargar presupuesto" es un <button>, a diferencia de los CTAs (.cbf-qa-btn), que son
   <a>. Se comprobó en producción (mueblam.com, WoodMart) que el tema trae su propio reset
   global para el elemento <button> (border-radius:0, padding:12px…) con especificidad
   suficiente para pisar .cbf-qa-btn — los CTAs en <a> nunca lo sufrieron porque el reset
   del tema no los toca. Por eso aquí se repiten TODAS las propiedades visuales con
   !important, en vez de confiar en heredar de .cbf-qa-btn como si fuera un <a> más. */
.cbf-budget-btn {
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  text-align:center !important;
  padding:9px 12px !important;
  border-radius:999px !important;
  border:1.5px solid var(--cbf-brand) !important;
  background:transparent !important;
  color:var(--cbf-brand) !important;
  font-size:12px !important;
  font-weight:600 !important;
  font-family:inherit !important;
  line-height:normal !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background .15s, color .15s !important;
}
.cbf-budget-btn:hover { background:var(--cbf-brand) !important; color:#fff !important; }

/* Messages */
.cbf-messages { flex:1; overflow-y:auto; padding:14px 14px 8px; scrollbar-width:thin; display:flex; flex-direction:column; gap:10px; }
.cbf-msg { display:flex; align-items:flex-end; gap:7px; animation:cbf-msg-in .3s var(--cbf-ease); }
@keyframes cbf-msg-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.cbf-msg-bot { justify-content:flex-start; }
.cbf-msg-user { justify-content:flex-end; }
.cbf-msg-avatar { width:26px; height:26px; border-radius:50%; background:var(--cbf-light); color:var(--cbf-brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cbf-bubble {
  max-width:80%; padding:9px 13px; border-radius:14px;
  font-size:13.12px; line-height:1.5; color:var(--cbf-ink);
}
.cbf-bubble-bot { background:var(--cbf-bg); border-radius:4px 14px 14px 14px; }
.cbf-bubble-user { background:var(--cbf-brand); color:#fff; border-radius:14px 4px 14px 14px; }
/* Neutralizar estilos del theme dentro de las burbujas */
.cbf-bubble-bot strong, .cbf-bubble-bot b { font-weight:700 !important; background:none !important; color:inherit !important; padding:0 !important; border:none !important; }
/* PROD-040e (2026-09-10, mueblesamat.com): excluye .cbf-qa-btn — el botón "Finalizar compra"
   del aviso de carrito abandonado también es un <a> dentro de .cbf-bubble-bot, y esta regla (con
   !important) lo dejaba como un enlace subrayado normal en vez del botón con borde. */
.cbf-bubble-bot a:not(.cbf-qa-btn) { color:var(--cbf-brand) !important; text-decoration:underline !important; background:none !important; padding:0 !important; font-weight:normal !important; }
.cbf-bubble-bot a:not(.cbf-qa-btn):hover { opacity:.8 !important; }
.cbf-bubble-bot .cbf-qa-btn { font-family:inherit !important; display:inline-flex !important; align-items:center !important; gap:5px !important; padding:5px 12px !important; border-radius:20px !important; border:1.5px solid var(--cbf-brand) !important; color:var(--cbf-brand) !important; background:transparent !important; text-decoration:none !important; font-weight:600 !important; margin-top:4px; }
.cbf-bubble-bot .cbf-qa-btn:hover { background:var(--cbf-brand) !important; color:#fff !important; font-family:inherit !important; }
/* UX-003: bloque de contacto (Llamar / WhatsApp / Email / Te llamamos) bajo la respuesta. Mismo
   aspecto que los CTA de la barra (.cbf-qa-btn: 12px, sin partir el texto), pero envolviendo en
   varias filas en vez de scroll horizontal — en móvil quedan 2×2. */
.cbf-contact-block { display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-top:10px !important; }
.cbf-contact-block .cbf-qa-btn { margin-top:0 !important; font-size:12px !important; white-space:nowrap !important; cursor:pointer !important; }
.cbf-bubble-bot br { display:block; content:''; margin-top:4px; }
/* Typing indicator */
.cbf-typing { display:flex; align-items:center; gap:4px; padding:10px 13px; }
.cbf-typing span { width:7px; height:7px; border-radius:50%; background:#9ca3af; animation:cbf-bounce .9s ease-in-out infinite; }
.cbf-typing span:nth-child(2) { animation-delay:.15s; }
.cbf-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes cbf-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* Quick actions */
/* Slider horizontal en vez de envolver en 2+ líneas cuando hay muchos CTAs (pedido por el
   usuario, visto en misterwils.com con 5 botones). overflow-x:auto + flex-shrink:0 en cada
   botón evita que se compriman o pasen a una segunda fila; scrollbar-width:none/::-webkit-
   scrollbar oculta la barra de scroll mientras se mantiene el gesto de deslizar. */
.cbf-qa-outer { display:flex; align-items:center; flex-shrink:0; border-top:1px solid var(--cbf-border); }
.cbf-quick-actions { padding:8px 14px; display:flex; gap:6px; flex-wrap:nowrap; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.cbf-quick-actions::-webkit-scrollbar { display:none; }
/* Flechas del slider de CTAs (pedido por el usuario, 2026-09-02): en desktop no había ninguna
   pista visual de que la fila se pudiera desplazar (barra de scroll oculta a propósito, sin
   gesto táctil). Solo se muestran con puntero de precisión (ratón) vía JS — en touch el gesto
   de deslizar ya es la pista natural — y solo cuando de verdad hay contenido oculto a ese lado
   (cbf.js decide mostrar/ocultar con la clase .cbf-qa-show). Botón nativo, mismo blindaje con
   !important que el resto de controles nativos del widget (ver gotcha de temas de cliente). */
.cbf-qa-arrow { display:none !important; width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; max-width:20px !important; max-height:20px !important; flex-shrink:0 !important; align-items:center !important; justify-content:center !important; border:none !important; border-radius:50% !important; background:var(--cbf-bg) !important; color:var(--cbf-brand) !important; cursor:pointer !important; padding:0 !important; box-shadow:0 1px 3px rgba(0,0,0,.15) !important; transition:background .15s !important; }
.cbf-qa-arrow.cbf-qa-show { display:flex !important; }
.cbf-qa-arrow:hover { background:var(--cbf-brand) !important; color:#fff !important; }
.cbf-qa-arrow svg { display:block !important; pointer-events:none !important; }
.cbf-qa-arrow-prev { margin:0 4px 0 8px !important; }
.cbf-qa-arrow-next { margin:0 8px 0 4px !important; }
/* Color, fondo, borde y fuente con !important: Elementor aplica ".elementor-kit-XXX a" y
   ".elementor-kit-XXX a:hover { color: var(--e-global-color-primary); font-family: … }", que gana
   en especificidad a .cbf-qa-btn. Visto en extensiones-meghan.com (2026-10-03): en hover el texto
   pasaba al color primario del tema — el mismo morado que el fondo del botón — y cambiaba de fuente. */
.cbf-qa-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:20px;
  border:1.5px solid var(--cbf-brand) !important; color:var(--cbf-brand) !important;
  background:transparent !important; cursor:pointer; font-size:12px; font-weight:600;
  font-family:inherit !important; text-decoration:none !important; white-space:nowrap;
  flex-shrink:0;
  transition:background .15s, color .15s;
}
.cbf-qa-btn:hover, .cbf-qa-btn:focus-visible { background:var(--cbf-brand) !important; color:#fff !important; font-family:inherit !important; text-decoration:none !important; }

/* Input bar — .cbf-input es un <textarea> nativo, mismo riesgo que los demás controles
   nativos del widget (ver misterwils.com: se veía con el borde/fondo por defecto del
   navegador, sin redondeo). Blindado con !important. */
.cbf-input-bar { display:flex !important; align-items:flex-end !important; gap:8px !important; padding:10px 12px !important; flex-shrink:0 !important; border-top:1px solid var(--cbf-border) !important; margin:0 !important; background:none !important; }
/* Con display:flex !important arriba, ocultarla desde JS con style.display='none' (sin
   !important) nunca gana — mismo problema ya visto con el FAB (ver cbf.js). Se oculta con
   esta clase en vez de tocar el estilo inline. */
.cbf-input-bar.cbf-hidden { display:none !important; }
.cbf-input-disclaimer { text-align:center; font-size:9.92px; color:var(--cbf-muted); padding:0 12px 4px; line-height:1.3; }
.cbf-input { flex:1 !important; box-sizing:border-box !important; padding:9px 13px !important; border:1.5px solid var(--cbf-border) !important; border-radius:18px !important; font-size:13.6px !important; color:var(--cbf-ink) !important; outline:none !important; background:var(--cbf-bg) !important; box-shadow:none !important; transition:border-color .15s !important; resize:none !important; overflow:hidden !important; min-height:38px !important; max-height:120px !important; line-height:1.4 !important; font-family:inherit !important; display:block !important; margin:0 !important; }
.cbf-input:focus { border-color:var(--cbf-brand) !important; background:#fff !important; box-shadow:none !important; }
.cbf-send { width:36px !important; height:36px !important; min-width:0 !important; min-height:0 !important; max-width:36px !important; max-height:36px !important; border-radius:50% !important; border:none !important; background:var(--cbf-brand) !important; color:#fff !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; transition:background .15s,transform .15s !important; margin-bottom:1px !important; padding:0 !important; box-shadow:none !important; }
.cbf-send:hover { background:var(--cbf-dark) !important; transform:scale(1.06) !important; }
.cbf-send:disabled { opacity:.45 !important; cursor:not-allowed !important; transform:none !important; }
.cbf-send svg { display:block !important; visibility:visible !important; opacity:1 !important; fill:#fff !important; color:#fff !important; pointer-events:none !important; }

/* Tablas en el chat */
.cbf-table { width:100%; border-collapse:collapse; font-size:12.48px; margin:6px 0; }
.cbf-table th { background:var(--cbf-brand); color:#fff; padding:5px 8px; text-align:left; font-weight:600; }
.cbf-table td { padding:5px 8px; border-bottom:1px solid var(--cbf-border); }
.cbf-table tr:last-child td { border-bottom:none; }
.cbf-bubble-bot ul { margin:4px 0; padding-left:16px; }
.cbf-bubble-bot li { margin:2px 0; }

/* Punto verde en el FAB */
.cbf-fab-dot { position:absolute; top:2px; right:2px; width:11px; height:11px; background:#22c55e; border-radius:50%; border:2px solid #fff; z-index:2; }

/* Micrófono — <button> nativo, mismo blindaje que el resto */
.cbf-mic { width:34px !important; height:34px !important; min-width:0 !important; min-height:0 !important; max-width:34px !important; max-height:34px !important; border-radius:50% !important; border:none !important; background:transparent !important; color:var(--cbf-muted,#9ca3af) !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; transition:color .15s,background .15s !important; padding:0 !important; margin:0 !important; box-shadow:none !important; }
.cbf-mic:hover { color:var(--cbf-brand) !important; background:transparent !important; }
.cbf-mic.cbf-mic-active { color:#fff; background:#ef4444; animation:cbf-mic-pulse 1s ease-in-out infinite; }
@keyframes cbf-mic-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* ── Apertura proactiva: animación de atención más notoria (compensa ausencia de sonido) ── */
@keyframes cbf-proactive-shake {
  0%, 100% { transform: translateX(0) scale(1); }
  10% { transform: translateX(-6px) scale(1.02); }
  20% { transform: translateX(6px) scale(1.02); }
  30% { transform: translateX(-5px) scale(1.01); }
  40% { transform: translateX(5px) scale(1.01); }
  50% { transform: translateX(-3px) scale(1); }
  60% { transform: translateX(3px) scale(1); }
  70%, 100% { transform: translateX(0) scale(1); }
}
.cbf-panel.cbf-proactive-attention {
  animation: cbf-proactive-shake 0.6s ease-in-out;
}
@keyframes cbf-proactive-glow {
  0%, 100% { box-shadow: 0 8px 30px rgba(0,0,0,.12); }
  50% { box-shadow: 0 8px 40px var(--cbf-rgba), 0 0 0 6px var(--cbf-ring); }
}
.cbf-panel.cbf-proactive-attention .cbf-panel-header {
  animation: cbf-proactive-glow 1.2s ease-in-out 2;
}

/* Powered by */
#cbf-panel .cbf-powered { text-align:center; font-size:8.8px; color:#c8c8c8 !important; padding:3px 12px 5px; letter-spacing:.02em; }
#cbf-panel .cbf-powered a { color:#c8c8c8 !important; text-decoration:none !important; font-weight:400 !important; }
#cbf-panel .cbf-powered a:hover { color:#888 !important; }

/* Botón expandir */
.cbf-panel-expand { width:28px !important; height:28px !important; min-width:0 !important; min-height:0 !important; max-width:28px !important; max-height:28px !important; border-radius:8px !important; border:none !important; background:rgba(255,255,255,.15) !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; flex-shrink:0 !important; transition:background .15s !important; padding:0 !important; box-shadow:none !important; line-height:1 !important; }
.cbf-panel-expand:hover { background:rgba(255,255,255,.25) !important; }

/* Modo pantalla completa */
.cbf-panel.cbf-fullscreen { position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; border-radius:0 !important; left:0 !important; right:0 !important; bottom:0 !important; top:0 !important; transform:none !important; z-index:2147483647 !important; }
/* En fullscreen el backdrop no tiene función (el panel cubre toda la pantalla) y no debe interceptar clics */
body:has(.cbf-panel.cbf-fullscreen) .cbf-backdrop { display:none !important; pointer-events:none !important; }

/* Captación de leads */
.cbf-lead-form { background:var(--cbf-light); border:1px solid var(--cbf-ring); border-radius:14px; padding:18px 18px 14px; margin:0 0 6px; box-shadow:0 2px 8px var(--cbf-ring); }
.cbf-lead-title { font-size:13.6px; font-weight:700; color:var(--cbf-brand); margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.cbf-lead-subtitle { font-size:12.16px; color:#6b7280; line-height:1.4; margin-bottom:14px; }
.cbf-lead-privacy { display:flex !important; align-items:flex-start; gap:7px; margin:2px 0 12px; cursor:pointer; }
.cbf-lead-privacy input[type="checkbox"] { flex-shrink:0 !important; width:15px !important; height:15px !important; margin:2px 0 0 !important; accent-color:var(--cbf-brand) !important; }
.cbf-lead-privacy span { font-size:11.52px; color:#6b7280; line-height:1.4; }
.cbf-lead-privacy a { color:var(--cbf-brand) !important; text-decoration:underline !important; }
/* .cbf-lead-input/.cbf-lead-btn son <input>/<button> nativos, igual que .cbf-budget-btn
   más arriba — mismo riesgo de que un reset global del tema (ej. WoodMart) los pise.
   Reforzados con !important tras confirmarlo en producción con el botón del presupuesto. */
.cbf-lead-input { display:block !important; width:100% !important; box-sizing:border-box !important; border:1.5px solid var(--cbf-ring) !important; border-radius:10px !important; padding:10px 14px !important; font-size:13.28px !important; margin:0 0 10px !important; background:#fff !important; color:#111 !important; outline:none !important; font-family:inherit !important; box-shadow:none !important; transition:border-color .15s !important; }
.cbf-lead-input:focus { border-color:var(--cbf-brand) !important; box-shadow:0 0 0 3px var(--cbf-ring) !important; }
.cbf-lead-textarea { min-height:52px !important; resize:vertical !important; }
.cbf-lead-btn { display:block !important; width:100% !important; box-sizing:border-box !important; background:var(--cbf-brand) !important; color:#fff !important; border:none !important; border-radius:10px !important; padding:11px !important; font-size:13.6px !important; font-weight:700 !important; cursor:pointer !important; box-shadow:none !important; transition:opacity .15s !important; font-family:inherit !important; margin-top:2px !important; }
.cbf-lead-btn:hover { opacity:.9 !important; }
.cbf-lead-btn:disabled { opacity:.5 !important; cursor:default !important; }
.cbf-lead-msg { font-size:11.52px; color:#dc2626; margin-top:8px; min-height:16px; }
.cbf-lead-ok { font-size:13.6px; color:#059669; font-weight:700; text-align:center; padding:10px 0; }

/* ── Tarjetas de producto ──
   La tarjeta pasó de ser un único <a> a un <div> con dos <a> dentro (enlace principal +
   botón de carrito aparte a la derecha) — un <a> no puede anidar otro <a> válidamente, y
   desde que hay un botón de carrito discreto (pedido por el usuario, chat + Historial) hacen
   falta dos destinos clicables independientes en la misma tarjeta. */
.cbf-products { display:flex; flex-direction:column; gap:8px; margin:4px 0; }
.cbf-prod-card { display:flex; align-items:center; gap:6px; background:var(--cbf-bg,#f9fafb); border:1px solid var(--cbf-border,#e5e7eb); border-radius:10px; padding:8px 10px; transition:box-shadow .15s,border-color .15s; }
.cbf-prod-card:hover { border-color:var(--cbf-brand) !important; box-shadow:0 2px 8px rgba(0,0,0,.08) !important; }
.cbf-prod-link { display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-decoration:none !important; color:inherit !important; cursor:pointer; }
/* Botón de carrito discreto — paso intermedio: hoy lleva a la ficha del producto, igual que
   la tarjeta; el día que se monte el añadido al carrito real, solo cambia su comportamiento. */
.cbf-prod-cart-btn { display:flex !important; align-items:center !important; justify-content:center !important; width:30px !important; height:30px !important; min-width:30px !important; min-height:30px !important; max-width:30px !important; max-height:30px !important; border-radius:50% !important; flex-shrink:0 !important; background:var(--cbf-surface,#fff) !important; border:1px solid var(--cbf-border,#e5e7eb) !important; color:var(--cbf-muted,#6b7280) !important; text-decoration:none !important; cursor:pointer !important; transition:background .15s,color .15s,border-color .15s !important; }
.cbf-prod-cart-btn:hover { background:var(--cbf-brand) !important; color:#fff !important; border-color:var(--cbf-brand) !important; }
.cbf-prod-img-wrap { width:56px; height:56px; flex-shrink:0; border-radius:7px; overflow:hidden; background:#f3f4f6; display:flex; align-items:center; justify-content:center; }
.cbf-prod-img { width:100%; height:100%; object-fit:cover; display:block !important; }
.cbf-prod-info { flex:1; min-width:0; }
.cbf-prod-name { font-size:12.48px; font-weight:600; color:var(--cbf-ink,#111); line-height:1.3; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cbf-prod-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cbf-prod-price { font-size:12.8px !important; font-weight:700 !important; color:var(--cbf-brand) !important; text-decoration:none !important; }
.cbf-prod-sale { font-size:12.8px !important; font-weight:700 !important; color:#dc2626 !important; text-decoration:none !important; }
/* PROD-039e (2026-09-09, mimoondo.com): sin !important, el tema del sitio ganaba text-decoration
   y el precio anterior dejaba de verse tachado — mismo patrón de siempre con temas pisando
   estilos del plugin (ver gotchas #2/#5 de despliegue), endurecido aquí de paso en las 5 reglas
   de precio/stock de la tarjeta de producto, no solo la que se reportó, ya que ninguna tenía
   !important y cualquier tema podría pisar cualquiera de ellas. */
.cbf-prod-regular { font-size:11.52px !important; color:#9ca3af !important; text-decoration:line-through !important; }
.cbf-prod-stock { font-size:10.88px !important; color:#059669 !important; font-weight:600 !important; text-decoration:none !important; }
.cbf-prod-nostock { font-size:10.88px !important; color:#9ca3af !important; font-weight:600 !important; text-decoration:none !important; }

/* ── Fix z-index: bajar store locator y otros plugins cuando el chat está abierto ── */
/* WoodMart store locator y botones flotantes de terceros */
.cbf-panel.cbf-open ~ * [class*="store-locator"],
.cbf-panel.cbf-open ~ * [class*="wl-btn"],
.cbf-panel.cbf-open ~ * [class*="click-to-call"],
.cbf-panel.cbf-open ~ * [class*="floating"],
.cbf-panel.cbf-open ~ * [class*="tooltip"],
body.cbf-chat-open [class*="store-locator"],
body.cbf-chat-open [class*="wl-btn"],
body.cbf-chat-open [id*="store-locator"],
body.cbf-chat-open [class*="tooltip"],
body.cbf-chat-open [class*="click-to-call"],
body.cbf-chat-open .pafe-floating-effects,
body.cbf-chat-open .woodmart-store-switcher {
    z-index:1 !important;
    pointer-events:none !important;
}

/* Refuerzo: la barra de compartir/descargar del chat siempre por encima y siempre clicable */
#cbf-share-bar { position:relative; z-index:2147483647; pointer-events:auto !important; }
#cbf-share-bar button, #cbf-share-bar a { pointer-events:auto !important; position:relative; z-index:2147483647; }

/* UX-004 (2026-10-04, extensiones-meghan.com en iPhone): Safari iOS hace zoom automático al
   enfocar cualquier campo con font-size < 16px. El zoom "ensanchaba" la pantalla y dejaba fuera
   de la vista el botón de enviar y la cabecera del chat (visto en vídeo: el textarea a 13.6px
   ocupaba todo el ancho). 16px en móvil lo evita sin bloquear el zoom del usuario (no se toca el
   meta viewport, que pertenece al tema). Va al final del archivo para ganar a .cbf-input/.cbf-lead-input. */
@media (max-width: 599px) {
  .cbf-input, .cbf-lead-input { font-size:16px !important; }
}

/* UX-CHAT-ICONS (2026-10-07): iconos de línea en los botones de contacto (antes emojis) y punto de
   color en el stock (antes ✓ / ✗). */
.cbf-contact-block .cbf-qa-btn { display:inline-flex !important; align-items:center !important; gap:6px !important; }
.cbf-contact-block .cbf-qa-btn .cbf-ico { flex-shrink:0; width:15px; height:15px; }
.cbf-prod-stock::before, .cbf-prod-nostock::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:5px; vertical-align:1px; }