/* Burbuja de asistentes - JotaBytes */
.jbca {
  --jbca-x: 20px;
  --jbca-y: 20px;
  --jbca-bg: #009348;
  --jbca-on: #ffffff;
  --jbca-rgb: 0, 147, 72;
  --jbca-gap: 12px;
  --jbca-radius: 10px;
  position: fixed;
  z-index: 2147483000;
  font-family: inherit;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.jbca *, .jbca *::before, .jbca *::after { box-sizing: border-box; }

/* Temas: #009348, #2d266c, #890914, #000000 */
.jbca--theme-green  { --jbca-bg: #009348; --jbca-on: #ffffff; --jbca-rgb: 0, 147, 72; }
.jbca--theme-indigo { --jbca-bg: #2d266c; --jbca-on: #ffffff; --jbca-rgb: 45, 38, 108; }
.jbca--theme-garnet { --jbca-bg: #890914; --jbca-on: #ffffff; --jbca-rgb: 137, 9, 20; }
.jbca--theme-black  { --jbca-bg: #000000; --jbca-on: #ffffff; --jbca-rgb: 0, 0, 0; }

/* Acento claro derivado del color del tema (anillos, categoría, punto activo) */
.jbca { --jbca-accent: rgba(255, 255, 255, .7); }
@supports (color: color-mix(in srgb, #000000 50%, #ffffff)) {
  .jbca { --jbca-accent: color-mix(in srgb, var(--jbca-bg) 50%, #ffffff); }
}
.jbca--theme-black { --jbca-accent: rgba(255, 255, 255, .75); }

/* Posiciones */
.jbca--bottom-right { right: var(--jbca-x); bottom: var(--jbca-y); }
.jbca--bottom-left  { left: var(--jbca-x);  bottom: var(--jbca-y); }
.jbca--top-right    { right: var(--jbca-x); top: var(--jbca-y); }
.jbca--top-left     { left: var(--jbca-x);  top: var(--jbca-y); }
.jbca--middle-right { right: var(--jbca-x); top: 50%; transform: translateY(-50%); }
.jbca--middle-left  { left: var(--jbca-x);  top: 50%; transform: translateY(-50%); }

/* Botón */
.jbca-toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 10px 18px 10px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--jbca-bg);
  color: var(--jbca-on);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.jbca-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .12); }
.jbca-toggle:focus-visible, .jbca-close:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 5px #000000; }
.jbca--icon-only .jbca-toggle { width: 56px; height: 56px; padding: 0; justify-content: center; }
.jbca--icon-only .jbca-icon svg, .jbca--icon-only .jbca-icon img { width: 28px; height: 28px; }
.jbca-icon { display: inline-flex; line-height: 0; }
.jbca-icon img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }
.jbca-label { white-space: nowrap; }

/* Panel */
.jbca-panel {
  position: absolute;
  width: min(320px, calc(100vw - 2 * var(--jbca-x)));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22), 0 4px 12px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.jbca.is-open .jbca-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.jbca--bottom-right .jbca-panel { right: 0; bottom: calc(100% + var(--jbca-gap)); transform-origin: bottom right; }
.jbca--bottom-left  .jbca-panel { left: 0;  bottom: calc(100% + var(--jbca-gap)); transform-origin: bottom left; }
.jbca--top-right    .jbca-panel { right: 0; top: calc(100% + var(--jbca-gap)); transform-origin: top right; }
.jbca--top-left     .jbca-panel { left: 0;  top: calc(100% + var(--jbca-gap)); transform-origin: top left; }
.jbca--middle-right .jbca-panel { right: calc(100% + var(--jbca-gap)); top: 50%; transform-origin: center right; }
.jbca--middle-left  .jbca-panel { left: calc(100% + var(--jbca-gap));  top: 50%; transform-origin: center left; }

.jbca--bottom-right .jbca-panel, .jbca--bottom-left .jbca-panel { transform: translateY(8px) scale(.98); }
.jbca--top-right .jbca-panel, .jbca--top-left .jbca-panel { transform: translateY(-8px) scale(.98); }
.jbca--middle-right .jbca-panel { transform: translate(8px, -50%) scale(.98); }
.jbca--middle-left  .jbca-panel { transform: translate(-8px, -50%) scale(.98); }
.jbca.is-open .jbca-panel { transform: none; }
.jbca--middle-right.is-open .jbca-panel, .jbca--middle-left.is-open .jbca-panel { transform: translateY(-50%); }

.jbca-close {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.jbca--top-left .jbca-close, .jbca--bottom-left .jbca-close, .jbca--middle-left .jbca-close { right: auto; left: -11px; }
.jbca-close:hover { opacity: .75; }

/* ---------- Tarjetas de asistente (slider) ---------- */
.jbca-panel {
  padding: 26px 20px 14px;
  background:
    radial-gradient(130% 75% at 50% 0%, rgba(var(--jbca-rgb), .55) 0%, rgba(var(--jbca-rgb), .14) 55%, rgba(var(--jbca-rgb), 0) 85%),
    #000000;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .25);
}
.jbca--theme-black .jbca-panel {
  background: radial-gradient(130% 75% at 50% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, 0) 85%), #000000;
}

.jbca-slider { position: relative; }
.jbca-viewport { overflow: hidden; }
.jbca-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .5s cubic-bezier(.22, .7, .2, 1);
  will-change: transform;
}
.jbca-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0 2px 14px;
  text-align: center;
  opacity: .35;
  transition: opacity .5s ease;
}
.jbca-slide.is-active { opacity: 1; }
.jbca-slide p { margin: 0; }

.jbca-ring {
  width: 206px;
  height: 206px;
  padding: 9px;
  border-radius: 50%;
  border: 1px solid var(--jbca-accent);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 0 46px rgba(var(--jbca-rgb), .45), inset 0 0 24px rgba(var(--jbca-rgb), .25);
}
.jbca-ring-inner {
  width: 100%;
  height: 100%;
  padding: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--jbca-accent);
}
.jbca-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, .1);
}
.jbca-initials {
  display: grid;
  place-items: center;
  background: var(--jbca-bg);
  color: var(--jbca-on);
  font-size: 52px;
  font-weight: 700;
}
.jbca--theme-black .jbca-initials { background: #ffffff; color: #000000; }
.jbca--theme-black .jbca-ring { box-shadow: 0 0 46px rgba(255, 255, 255, .08); }

.jbca-cat {
  margin-top: 16px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jbca-accent);
}
.jbca-name {
  margin-top: 4px !important;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jbca-slide .jbca-cat + .jbca-name { margin-top: 2px !important; }
.jbca-slide .jbca-ring + .jbca-name { margin-top: 16px !important; }

.jbca-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px !important;
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
}
.jbca-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #009348;
  box-shadow: 0 0 0 3px rgba(0, 147, 72, .25), 0 0 8px rgba(0, 147, 72, .7);
  animation: jbca-pulse 2.4s ease-in-out infinite;
}
.jbca-status.is-off .jbca-dot { background: rgba(255, 255, 255, .35); box-shadow: none; animation: none; }
@keyframes jbca-pulse { 50% { box-shadow: 0 0 0 5px rgba(0, 147, 72, .1), 0 0 10px rgba(0, 147, 72, .55); } }

.jbca-desc {
  margin-top: 12px !important;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
}

.jbca-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--jbca-btn-bg, #009348);
  color: var(--jbca-btn-fg, #ffffff) !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.jbca-desc + .jbca-cta, .jbca-status + .jbca-cta { margin-top: 18px; }
.jbca-cta:hover { transform: translateY(-1px); filter: brightness(1.15); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); color: var(--jbca-btn-fg, #ffffff) !important; }
.jbca-cta:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.jbca-cta-icon { display: inline-flex; line-height: 0; }
.jbca-cta-icon svg { width: 20px; height: 20px; }

.jbca-arrow {
  position: absolute;
  top: 85px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.jbca-arrow:hover { background: rgba(255, 255, 255, .16); color: #ffffff; }
.jbca-arrow:focus-visible, .jbca-dotbtn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.jbca-arrow--prev { left: -6px; }
.jbca-arrow--next { right: -6px; }

.jbca-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.jbca-dotbtn {
  width: 7px;
  height: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}
.jbca-dotbtn.is-active { width: 22px; background: var(--jbca-accent); }

/* Móvil */
@media (max-width: 600px) {
  .jbca { --jbca-x: 12px !important; --jbca-y: 12px !important; }
  .jbca--hide-mobile { display: none !important; }
  .jbca-toggle { font-size: 15px; min-height: 46px; }
  /* En móvil las posiciones centradas abren el panel hacia arriba */
  .jbca--middle-right .jbca-panel, .jbca--middle-left .jbca-panel { top: auto; bottom: calc(100% + var(--jbca-gap)); transform: translateY(8px); }
  .jbca--middle-right.is-open .jbca-panel, .jbca--middle-left.is-open .jbca-panel { transform: none; }
  .jbca--middle-right .jbca-panel { right: 0; }
  .jbca--middle-left .jbca-panel { left: 0; }
}

@media (max-height: 640px) {
  .jbca-ring { width: 150px; height: 150px; padding: 7px; }
  .jbca-arrow { top: 58px; }
  .jbca-name { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .jbca-toggle, .jbca-panel, .jbca-track, .jbca-slide, .jbca-cta, .jbca-dotbtn { transition: none !important; }
  .jbca-dot { animation: none; }
}

@media print { .jbca { display: none !important; } }