/* ===== CIRCULO HISTORIA FLOTANTE ===== */
.historias-wrapper {
  position: fixed;       /* Fijo en la pantalla */
  bottom: 240px;        /* lo subimos para no tapar WhatsApp */
  left: 5px;         /* pegado al borde derecho */
  z-index: 99999;        /* Más alto que la mayoría, pero debajo del modal */
  display: flex;         /* Para alinear los círculos */
  flex-direction: column; /* Apilados verticalmente (cambia a row si quieres fila) */
  gap: 10px;             /* Espacio entre cada historia */
  margin: 0;             /* Quitamos el margin anterior */
}

.historia-item {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.historia-item img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  position: relative;
  z-index: 1;
}

/* ===== MODAL HISTORIAS ===== */
.modal-historias {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999 !important; /* MÁS ALTO QUE TODO */
}

body.modal-open {
  overflow: hidden;
}

/* CONTENEDOR */
/* MÓVIL */
.story-container {
  width: 95vw;
  max-width: 380px;
  aspect-ratio: 9/16;
  background: black;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

/* PC */
@media (min-width: 768px) {
  .story-container {
    max-width: 500px; /* más grande en PC */
  }
}
/* SLIDES */
.story-slide {
  width: 100%;
  height: 100%;
  display: none;
}

.story-slide img,
.story-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: none;
  border: none;
  box-shadow: none;
}

/* CERRAR */
.cerrar-historia {
  position: absolute;
  top: 15px;
  right: 15px;
  color: white;
  font-size: 28px;
  cursor: pointer;
  z-index: 10001;
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  display: flex;
  gap: 4px;
  z-index: 10000;
}

.progress-segment {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.3); /* gris claro */
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: white; /* SOLO blanco */
}

/* Quitar efectos raros */
* {
  -webkit-tap-highlight-color: transparent;
}

.progress-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.progress-segment {
  background: rgba(255,255,255,0.3) !important;
  border: none !important;
  box-shadow: none !important;
}

.progress-fill {
  background: white !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== ARO VIP FUCSIA (DELGADO) ===== */
.historia-item {
  position: relative;
  overflow: visible;
}

/* ARO GIRATORIO FUCSIA */
.historia-item::before {
  content: "";
  position: absolute;
  inset: -2px;                 /* grosor del aro */
  border-radius: 50%;
  border: 2px solid #ff007f;   /* fucsia base */
  z-index: 1;
}

.historia-item::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 0, 127, 0.0) 60deg,
    rgba(255, 0, 127, 0.9) 90deg,
    rgba(255, 0, 127, 0.0) 130deg,
    transparent 360deg
  );
  animation: destello 2.8s linear infinite;
  z-index: 0;
  filter: blur(1px);
}

/* Animación */
@keyframes destello {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== HEADER HISTORIA SIMPLE ===== */
.story-header {
  position: absolute;
  top: 25px; /* debajo de la barra */
  left: 12px;
  z-index: 10002;
  color: #fff;
  font-family: Arial, sans-serif;
}

.story-user {
  display: flex;
  align-items: center;
  gap: 6px;
}

.story-name {
  font-size: 20px;
  font-weight: 600;
}

.story-time {
  font-size: 16px;
  opacity: 1.00;
}