/* Asistente con IA del sitio. Usa las variables de color de index.html. */
.sb-boton {
  position: fixed; right: 20px; bottom: 20px; z-index: 1050;
  width: 60px; height: 60px; border-radius: 50%; border: none;
  background: var(--pink, #e8305a); color: #fff; font-size: 1.5rem;
  box-shadow: 0 6px 28px rgba(232,48,90,.45); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.sb-boton:hover { background: var(--pink-l, #f06080); transform: translateY(-2px); box-shadow: 0 8px 36px rgba(232,48,90,.6); }
.sb-boton:focus-visible { outline: 3px solid rgba(232,48,90,.4); outline-offset: 3px; }
.sb-boton .sb-cerrar-ico { display: none; }
.sb-abierto .sb-boton .sb-abrir-ico { display: none; }
.sb-abierto .sb-boton .sb-cerrar-ico { display: inline; }

.sb-globo {
  position: fixed; right: 92px; bottom: 30px; z-index: 1049;
  background: #fff; color: var(--text, #1e2235); font-size: .85rem;
  padding: .55rem .9rem; border-radius: 10px 10px 2px 10px;
  box-shadow: 0 4px 20px rgba(30,34,53,.15); cursor: pointer;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; pointer-events: none;
}
.sb-globo.sb-visible { opacity: 1; transform: none; pointer-events: auto; }
.sb-abierto .sb-globo { display: none; }

.sb-panel {
  position: fixed; right: 20px; bottom: 92px; z-index: 1050;
  width: 370px; max-width: calc(100vw - 32px); height: min(580px, calc(100vh - 120px));
  background: #f7f8fc; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(30,34,53,.28);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none; visibility: hidden;
  transition: opacity .25s, transform .25s, visibility 0s .25s;
}
.sb-abierto .sb-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .25s, transform .25s; }

.sb-cab {
  background: linear-gradient(135deg,#1e2235 0%,#2c3150 60%,#3a2440 100%); color: #fff;
  padding: .9rem 1rem; display: flex; align-items: center; gap: .75rem;
}
.sb-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(232,48,90,.3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sb-titulo { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: .98rem; line-height: 1.2; }
.sb-sub { font-size: .72rem; color: rgba(255,255,255,.65); }
.sb-sub::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ecf8e; margin-right: .35rem; }
.sb-acciones { margin-left: auto; display: flex; gap: .25rem; }
.sb-acciones a, .sb-acciones button {
  background: none; border: none; color: rgba(255,255,255,.75); font-size: .95rem;
  width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
}
.sb-acciones a:hover, .sb-acciones button:hover { background: rgba(255,255,255,.12); color: #fff; }

.sb-msjs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.sb-msj { max-width: 85%; padding: .6rem .85rem; border-radius: 12px; font-size: .88rem; line-height: 1.5; word-wrap: break-word; }
.sb-msj p { margin: 0 0 .4rem; }
.sb-msj p:last-child, .sb-msj ul:last-child { margin-bottom: 0; }
.sb-msj ul { margin: 0 0 .4rem; padding-left: 1.1rem; }
.sb-msj a { color: var(--pink, #e8305a); }
.sb-asistente { align-self: flex-start; background: #fff; color: var(--text, #1e2235); border-bottom-left-radius: 3px; box-shadow: 0 1px 4px rgba(30,34,53,.07); }
.sb-usuario { align-self: flex-end; background: var(--pink, #e8305a); color: #fff; border-bottom-right-radius: 3px; white-space: pre-wrap; }
.sb-error { align-self: center; background: rgba(232,48,90,.08); color: #b0203f; font-size: .8rem; text-align: center; }
.sb-error a { color: #b0203f; font-weight: 600; }

.sb-escribiendo { display: inline-flex; gap: 4px; padding: .3rem 0; }
.sb-escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: #b0b5cc; animation: sb-punto 1.2s infinite; }
.sb-escribiendo span:nth-child(2) { animation-delay: .15s; }
.sb-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes sb-punto { 0%,60%,100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.sb-sugerencias { display: flex; flex-wrap: wrap; gap: .4rem; }
.sb-sugerencias button {
  background: #fff; border: 1px solid rgba(232,48,90,.35); color: var(--pink, #e8305a);
  border-radius: 16px; padding: .3rem .75rem; font-size: .78rem; cursor: pointer; transition: background .2s, color .2s;
}
.sb-sugerencias button:hover { background: var(--pink, #e8305a); color: #fff; }

.sb-form { display: flex; gap: .5rem; padding: .7rem; background: #fff; border-top: 1px solid rgba(74,80,112,.1); }
.sb-form textarea {
  flex: 1; resize: none; border: 1px solid rgba(74,80,112,.2); border-radius: 8px;
  padding: .55rem .7rem; font: inherit; font-size: .88rem; max-height: 110px; overflow-y: hidden; outline: none; color: var(--text, #1e2235);
}
.sb-form textarea:focus { border-color: var(--pink, #e8305a); box-shadow: 0 0 0 3px rgba(232,48,90,.12); }
.sb-form button {
  width: 42px; border: none; border-radius: 8px; background: var(--pink, #e8305a); color: #fff; cursor: pointer; flex-shrink: 0;
}
.sb-form button:disabled { opacity: .5; cursor: default; }
.sb-form .sb-adjuntar { width: 38px; background: #fff; color: var(--slate, #4a5070); border: 1px solid rgba(74,80,112,.2); }
.sb-form .sb-adjuntar:hover { color: var(--pink, #e8305a); border-color: var(--pink, #e8305a); }
.sb-form .sb-adjuntar[hidden] { display: none; }
.sb-captura { padding: .35rem; }
.sb-captura img { display: block; max-width: 190px; max-height: 160px; border-radius: 8px; }
.sb-aviso { font-size: .68rem; color: var(--slate-m, #7a80a0); text-align: center; padding: 0 .7rem .55rem; background: #fff; }

@media (max-width: 480px) {
  .sb-panel { right: 0; bottom: 0; width: 100%; max-width: 100%; height: 100%; border-radius: 0; }
  .sb-abierto .sb-boton { display: none; }
  .sb-globo { right: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-panel, .sb-globo, .sb-boton { transition: none; }
  .sb-escribiendo span { animation: none; }
}