/* Chat de ayuda: el mismo en el panel (tokens del hub) y en el sitio comercial
   (data-tema="sitio", tokens del sitio). Los nombres de los tokens chocan entre
   los dos (en el sitio, --texto es la tipografía y --suave un color de texto),
   así que cada uno se mapea aparte; los dos responden al tema claro u oscuro. */
[data-chat]{
  --ch-fondo: var(--superficie, #ffffff);
  --ch-fondo-2: var(--superficie-2, #f4f3f8);
  --ch-texto: var(--texto, #1d1a2b);
  --ch-tenue: var(--texto-2, #5d5873);
  --ch-borde: var(--borde, #dcd8e6);
  --ch-primario: var(--primario, #2b0f3a);
  --ch-sobre: var(--sobre-primario, #ffffff);
  --ch-enlace: var(--enlace, #2b0f3a);
  --ch-sombra: var(--sombra-alta, 0 12px 32px rgba(20, 10, 40, .22));
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  font-size: 15px; line-height: 1.45;
}
[data-chat][data-tema="sitio"]{
  --ch-fondo: var(--papel); --ch-fondo-2: var(--fondo); --ch-texto: var(--tinta); --ch-tenue: var(--tenue);
  --ch-borde: var(--linea); --ch-primario: var(--acento); --ch-sobre: var(--sobre-acento); --ch-enlace: var(--acento);
  --ch-sombra: var(--sombra-alta);
}
.chat-boton{
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--ch-primario); color: var(--ch-sobre);
  font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--ch-sombra);
}
.chat-boton:focus-visible, .chat-opcion:focus-visible, .chat-enviar:focus-visible, .chat-cerrar:focus-visible{ outline: 3px solid var(--foco, var(--ch-primario)); outline-offset: 2px; }
.chat-boton-ico{ width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.chat-boton-ico::after{ content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.chat-abierto .chat-boton{ display: none; }
.chat-avatar{ width: 32px; height: 32px; border-radius: 50%; flex: none; }
.chat-avatar-boton{ width: 36px; height: 36px; margin-left: -10px; box-shadow: 0 0 0 2px var(--ch-sobre); }
.chat-avatar-cab{ width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--ch-sobre); }
.chat-fila{ display: flex; align-items: flex-end; gap: 8px; max-width: 94%; }
.chat-fila .chat-msg{ max-width: none; }
.chat-panel{
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 40px));
  display: flex; flex-direction: column; background: var(--ch-fondo); color: var(--ch-texto);
  border: 1px solid var(--ch-borde); border-radius: 16px; box-shadow: var(--ch-sombra); overflow: hidden;
}
.chat-panel[hidden]{ display: none; }
.chat-cab{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ch-primario); color: var(--ch-sobre); }
.chat-cab-texto{ display: flex; flex-direction: column; flex: 1; }
.chat-sub{ font-size: 13px; opacity: .9; }
.chat-cerrar{ min-width: 40px; min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.chat-mensajes{ flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg{ max-width: 88%; padding: 10px 12px; border-radius: 14px; }
.chat-msg p{ margin: 0 0 6px; }
.chat-msg p:last-child{ margin-bottom: 0; }
.chat-bot{ align-self: flex-start; background: var(--ch-fondo-2); border-bottom-left-radius: 4px; }
.chat-yo{ align-self: flex-end; background: var(--ch-primario); color: var(--ch-sobre); border-bottom-right-radius: 4px; }
.chat-lista{ margin: 4px 0 6px; padding-left: 20px; }
.chat-lista li{ margin: 3px 0; }
.chat-fuentes{ font-size: 13px; color: var(--ch-tenue); }
.chat-fuentes a{ color: var(--ch-enlace); }
.chat-enlaces{ display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.chat-enlaces a{ display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--ch-primario); color: var(--ch-sobre); text-decoration: none; font-weight: 600; font-size: 14px; }
.chat-pensando span{ color: var(--ch-tenue); font-style: italic; }
.chat-pensando span::after{ content: "…"; }
.chat-opciones{ display: flex; flex-wrap: wrap; gap: 6px; }
.chat-opcion{
  min-height: 40px; padding: 6px 12px; border: 1px solid var(--ch-primario); border-radius: 999px;
  background: var(--ch-fondo); color: var(--ch-enlace); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.chat-opcion:hover{ background: var(--ch-fondo-2); }
.chat-formulario{ display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--ch-borde); border-radius: 12px; background: var(--ch-fondo-2); }
.chat-formulario label{ font-size: 13px; color: var(--ch-tenue); }
.chat-formulario input, .chat-formulario textarea, .chat-entrada{
  font: inherit; color: var(--ch-texto); background: var(--ch-fondo); border: 1px solid var(--ch-borde); border-radius: 10px; padding: 8px 10px; min-height: 40px;
}
.chat-form{ display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--ch-borde); }
.chat-entrada{ flex: 1; resize: none; max-height: 120px; }
.chat-enviar{ min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--ch-primario); color: var(--ch-sobre); font: inherit; font-weight: 600; cursor: pointer; }
.chat-enviar:disabled{ opacity: .6; cursor: wait; }
.chat-aviso{ margin: 0; padding: 0 12px 10px; font-size: 12px; color: var(--ch-tenue); }
.chat-oculto{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px){
  [data-chat]{ right: 12px; bottom: 12px; }
  .chat-abierto{ inset: 0; right: 0; bottom: 0; }
  .chat-abierto .chat-panel{ width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
@media print{ [data-chat]{ display: none; } }