/* Burbuja de asistentes - ExpobikeS */
.ebca {
  --ebca-x: 20px;
  --ebca-y: 20px;
  --ebca-bg: #ffdb00;
  --ebca-on: #202020;
  --ebca-gap: 12px;
  --ebca-radius: 10px;
  position: fixed;
  z-index: 2147483000;
  font-family: inherit;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.ebca *, .ebca *::before, .ebca *::after { box-sizing: border-box; }

/* Temas */
.ebca--theme-yellow   { --ebca-bg: #ffdb00; --ebca-on: #202020; }
.ebca--theme-dark     { --ebca-bg: #202020; --ebca-on: #ffffff; }
.ebca--theme-gradient { --ebca-bg: linear-gradient(90deg, #f9a52b 0%, #f14624 48%, #af118c 100%); --ebca-on: #ffffff; }

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

/* Botón */
.ebca-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(--ebca-bg);
  color: var(--ebca-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;
}
.ebca-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .12); }
.ebca-toggle:focus-visible, .ebca-close:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.ebca--icon-only .ebca-toggle { width: 56px; height: 56px; padding: 0; justify-content: center; }
.ebca--icon-only .ebca-icon svg, .ebca--icon-only .ebca-icon img { width: 28px; height: 28px; }
.ebca-icon { display: inline-flex; line-height: 0; }
.ebca-icon img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }
.ebca-label { white-space: nowrap; }
.ebca--theme-gradient .ebca-toggle { text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }

/* Panel */
.ebca-panel {
  position: absolute;
  width: min(320px, calc(100vw - 2 * var(--ebca-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;
}
.ebca.is-open .ebca-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

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

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

.ebca-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: #fff;
  color: #555;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.ebca--top-left .ebca-close, .ebca--bottom-left .ebca-close, .ebca--middle-left .ebca-close { right: auto; left: -11px; }
.ebca-close:hover { color: #000; }

/* ---------- Tarjetas de asistente (slider) ---------- */
.ebca-panel {
  padding: 26px 20px 14px;
  background: linear-gradient(180deg, #271c18 0%, #1d1919 45%, #14171b 100%);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .25);
}
.ebca--theme-yellow   { --ebca-glow: 255, 219, 0; }
.ebca--theme-dark     { --ebca-glow: 255, 255, 255; }
.ebca--theme-gradient { --ebca-glow: 241, 110, 60; }

.ebca-slider { position: relative; }
.ebca-viewport { overflow: hidden; }
.ebca-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .5s cubic-bezier(.22, .7, .2, 1);
  will-change: transform;
}
.ebca-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;
}
.ebca-slide.is-active { opacity: 1; }
.ebca-slide p { margin: 0; }

.ebca-ring {
  width: 206px;
  height: 206px;
  padding: 9px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ebca-glow), .16);
  box-shadow: 0 0 46px rgba(var(--ebca-glow), .08), inset 0 0 24px rgba(var(--ebca-glow), .05);
}
.ebca-ring-inner {
  width: 100%;
  height: 100%;
  padding: 6px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--ebca-glow), .26);
}
.ebca-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a2a;
}
.ebca-initials {
  display: grid;
  place-items: center;
  background: var(--ebca-bg);
  color: var(--ebca-on);
  font-size: 52px;
  font-weight: 700;
}

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

.ebca-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px !important;
  font-size: 14px;
  color: #a7abb0;
}
.ebca-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18), 0 0 8px rgba(34, 197, 94, .6);
  animation: ebca-pulse 2.4s ease-in-out infinite;
}
.ebca-status.is-off .ebca-dot { background: #6b7076; box-shadow: none; animation: none; }
@keyframes ebca-pulse { 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, .08), 0 0 10px rgba(34, 197, 94, .5); } }

.ebca-desc {
  margin-top: 12px !important;
  font-size: 14px;
  line-height: 1.55;
  color: #c8c9cc;
}

.ebca-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(--ebca-btn-bg, #ffdb00);
  color: var(--ebca-btn-fg, #202020) !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, .08);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.ebca-desc + .ebca-cta, .ebca-status + .ebca-cta { margin-top: 18px; }
.ebca-cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); color: var(--ebca-btn-fg, #202020) !important; }
.ebca-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ebca-cta-icon { display: inline-flex; line-height: 0; }
.ebca-cta-icon svg { width: 20px; height: 20px; }

.ebca-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: #e6e6e6;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ebca-arrow:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ebca-arrow:focus-visible, .ebca-dotbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ebca-arrow--prev { left: -6px; }
.ebca-arrow--next { right: -6px; }

.ebca-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.ebca-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;
}
.ebca-dotbtn.is-active { width: 22px; background: var(--ebca-bg); }
.ebca--theme-dark .ebca-dotbtn.is-active { background: #fff; }

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

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

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

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