/* chatbot.css — asistente de la web (skill chatbot-web). Todo sale de tokens.css (colores y letras de la web);
   aquí solo medidas. Accesible: contraste de los tokens, foco visible, objetivos de 44 px, sin animaciones
   si el visitante las ha quitado. No tapa el WhatsApp flotante ni la barra del móvil (--cb-abajo lo calcula chatbot.js). */
:root {
  --cb-acento: var(--color-acento, #1f6f5c);
  --cb-sobre-acento: var(--color-sobre-acento, #fff);
  --cb-texto: var(--color-texto, #161616);
  --cb-suave: var(--color-texto-suave, #555);
  --cb-fondo: var(--color-fondo, #fafafa);
  --cb-superficie: var(--color-superficie, #fff);
  --cb-borde: var(--color-borde, #ddd);
  --cb-oscuro: var(--color-oscuro, #1d1d1d);
  --cb-sobre-oscuro: var(--color-sobre-oscuro, #fff);
  --cb-titulos: var(--fuente-titulos, Georgia, serif);
  --cb-letra: var(--fuente-texto, system-ui, sans-serif);
  --cb-abajo: 0px;
  --cb-sombra: 0 24px 60px -18px rgba(20, 12, 16, .45), 0 2px 6px rgba(20, 12, 16, .12);
}
.cb-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── botón para abrir ── */
.cb-lanzador {
  position: fixed; z-index: 58;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--cb-abajo));
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 52px; padding: 7px 18px 7px 8px; border: 0; border-radius: 999px;
  background: var(--cb-oscuro); color: var(--cb-sobre-oscuro);
  font: 600 15px/1.1 var(--cb-letra); cursor: pointer; box-shadow: var(--cb-sombra);
  transition: transform .2s ease, bottom .25s ease;
}
.cb-lanzador[hidden] { display: none; }
/* compacto: solo la burbuja (al bajar por la página), con el texto disponible para lectores de pantalla */
.cb-lanzador.cb-compacto { padding: 7px; gap: 0; }
.cb-lanzador.cb-compacto .cb-lanzador-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb-lanzador:hover { transform: translateY(-2px); }
.cb-lanzador:focus-visible { outline: 3px solid var(--cb-acento); outline-offset: 3px; }
.cb-lanzador .cb-burbuja { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--cb-acento); color: var(--cb-sobre-acento); flex: none; }
.cb-lanzador svg { width: 20px; height: 20px; fill: currentColor; }
.cb-lanzador small { display: block; font-weight: 400; font-size: 12px; opacity: .78; margin-top: 2px; }
html.cb-abierto .cb-lanzador { transform: scale(.92); opacity: 0; pointer-events: none; }

/* ── panel ── */
.cb-panel {
  position: fixed; z-index: 90;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--cb-abajo));
  width: min(392px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 32px - var(--cb-abajo)));
  display: grid; grid-template-rows: auto auto 1fr auto auto auto; grid-template-columns: minmax(0, 1fr);
  background: var(--cb-fondo); color: var(--cb-texto);
  border: 1px solid var(--cb-borde); border-radius: 22px; overflow: hidden;
  box-shadow: var(--cb-sombra); font: 15px/1.5 var(--cb-letra);
  opacity: 0; transform: translateY(14px) scale(.98); transform-origin: bottom right;
}
.cb-panel.is-visible { opacity: 1; transform: none; }
.cb-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .cb-panel { transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1); } }

.cb-cabeza { display: flex; align-items: center; gap: 12px; padding: 14px 10px 12px 16px; background: var(--cb-oscuro); color: var(--cb-sobre-oscuro); }
.cb-avatar { position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cb-acento); color: var(--cb-sobre-acento); font: 700 19px/1 var(--cb-titulos); }
.cb-ia { position: absolute; right: -5px; bottom: -3px; font: 700 10px/1 var(--cb-letra); letter-spacing: .04em; padding: 3px 5px; border-radius: 999px; background: var(--cb-sobre-oscuro); color: var(--cb-oscuro); }
.cb-quien { flex: 1; min-width: 0; }
.cb-quien h2 { margin: 0; font: 700 17px/1.2 var(--cb-titulos); color: inherit; }
.cb-quien p { margin: 2px 0 0; font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-icono { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.cb-icono svg { width: 22px; height: 22px; fill: currentColor; }
.cb-icono:hover { background: color-mix(in srgb, var(--cb-sobre-oscuro) 14%, transparent); }
.cb-icono:focus-visible, .cb-chip:focus-visible, .cb-btn:focus-visible, .cb-enviar:focus-visible, .cb-aviso a:focus-visible { outline: 3px solid var(--cb-acento); outline-offset: 2px; }
.cb-cabeza .cb-icono:focus-visible { outline-color: var(--cb-sobre-oscuro); }

.cb-aviso { margin: 0; padding: 10px 16px; font-size: 12.5px; line-height: 1.45; background: color-mix(in srgb, var(--cb-acento) 9%, var(--cb-fondo)); border-bottom: 1px solid var(--cb-borde); color: var(--cb-texto); }
.cb-aviso strong { font-weight: 600; }
.cb-aviso a { color: var(--cb-texto); text-underline-offset: 2px; }

.cb-log { overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.cb-log:focus-visible { outline: 2px solid var(--cb-acento); outline-offset: -4px; }
.cb-msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; word-wrap: break-word; }
.cb-asistente { align-self: flex-start; background: var(--cb-superficie); border: 1px solid var(--cb-borde); border-bottom-left-radius: 6px; }
.cb-usuario { align-self: flex-end; background: var(--cb-acento); color: var(--cb-sobre-acento); border-bottom-right-radius: 6px; }
.cb-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cb-puntos { display: inline-flex; gap: 4px; padding: 4px 0; }
.cb-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--cb-suave); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .cb-puntos i { animation: cb-salto 1s infinite ease-in-out; }
  .cb-puntos i:nth-child(2) { animation-delay: .15s; } .cb-puntos i:nth-child(3) { animation-delay: .3s; }
  @keyframes cb-salto { 0%, 80%, 100% { transform: none; opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
}

.cb-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 10px; }
.cb-sugerencias:empty { display: none; }
.cb-chip { min-height: 44px; padding: 8px 14px; border: 1.5px solid color-mix(in srgb, var(--cb-acento) 45%, var(--cb-borde)); border-radius: 999px; background: var(--cb-superficie); color: var(--cb-texto); font: 500 14px/1.2 var(--cb-letra); cursor: pointer; text-align: left; }
.cb-chip:hover { background: color-mix(in srgb, var(--cb-acento) 8%, var(--cb-superficie)); }

.cb-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--cb-borde); background: var(--cb-superficie); }
.cb-form textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 11px 14px; border: 1.5px solid var(--cb-borde); border-radius: 22px; background: var(--cb-fondo); color: var(--cb-texto); font: 16px/1.35 var(--cb-letra); }
.cb-form textarea:focus { outline: none; border-color: var(--cb-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-acento) 22%, transparent); }
.cb-form textarea::placeholder { color: var(--cb-suave); opacity: 1; }
.cb-enviar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--cb-acento); color: var(--cb-sobre-acento); cursor: pointer; }
.cb-enviar svg { width: 20px; height: 20px; fill: currentColor; }
.cb-enviar:disabled { opacity: .5; cursor: wait; }

.cb-persona { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cb-borde); font-size: 13px; color: var(--cb-suave); }
.cb-persona span { flex: 1 1 100%; }
.cb-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--cb-texto); color: var(--cb-texto); background: transparent; font: 600 14px/1 var(--cb-letra); text-decoration: none; }
.cb-btn svg { width: 18px; height: 18px; fill: currentColor; }
.cb-btn.cb-wa { background: var(--cb-oscuro); border-color: var(--cb-oscuro); color: var(--cb-sobre-oscuro); }

/* ── móvil: botón redondo encima del WhatsApp; panel a pantalla completa ── */
@media (max-width: 640px) {
  .cb-lanzador { padding: 7px; min-height: 0; }
  .cb-lanzador .cb-lanzador-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cb-lanzador .cb-burbuja { width: 44px; height: 44px; }
  .cb-panel { inset: 0; width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); }
  html.cb-abierto, html.cb-abierto body { overflow: hidden; }
}
@media print { .cb-lanzador, .cb-panel { display: none !important; } }