/* Botón composer */
.se-btn-plus{border:2px dashed #bbb;border-radius:14px;padding:.4rem .7rem;font-weight:700;background:#fff}




/* ====== Scrollbar estilizada (no rompe mobile) ====== */
.se-stories-rail::-webkit-scrollbar{ height:6px }
.se-stories-rail::-webkit-scrollbar-track{ background:transparent }
.se-stories-rail::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:6px }

/* ====== Reduce motion ====== */
@media (prefers-reduced-motion: reduce){
  .se-stories-rail{ scroll-snap-type: x proximity; }
  .se-card-bg.is-loaded{ transition:none; }
}


/* ====== Card responsive + densidad ====== */
.se-story-card{
  position:relative;
  flex:0 0 auto;
  /*width:clamp(86px, 9vw, 120px);*/
  /*aspect-ratio: 2 / 3;            /* mantiene proporción */
  color:#fff;
  cursor:pointer;
  content-visibility:auto;        /* PERF: skip layout si fuera de viewport */
  /*contain-intrinsic-size: 160px 108px; /* tamaño estimado cuando está fuera de view */
  will-change: transform;         /* suaviza desplazamiento */
  scroll-snap-align: start;
  box-sizing: border-box;
  width: 100px !important;
  height: 100px !important;
  aspect-ratio: auto !important;   /* anula 2/3 */
  overflow: hidden;
  background: transparent;      
}
@media (max-width: 767.98px){
  .se-stories-wrap{
    height: 110px !important;
  }
  .se-story-card{
    width:100px; height:100px;       /* fijo 100x100 */
    aspect-ratio: auto;               /* forzamos cuadrado */
    border-radius:14px;
  }
  .se-card-txt{ display:none; }
}

/* Ocultamos texto dentro de la card para estilo “red social” */
.se-stories-rail .se-card-txt{ display: none !important; }

/* Texto dentro de la card: que no empuje el ancho */
.se-card-txt{
  position:absolute;left:12px;bottom:10px;
  font-size:.95rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.35);
  max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Ring visto (opcional, activalo por JS agregando .is-seen) */
.se-story-card .se-ring{
  position:absolute; inset:0; border-radius:inherit;
  box-shadow: 0 0 0 3px rgba(248, 22, 150, 0.809) inset;
  pointer-events:none; z-index: 1;
  border-radius: 50% !important;
}
.se-story-card.is-seen .se-ring{
  box-shadow: 0 0 0 3px rgba(120,120,120,.35) inset;
}

/* BG lazy: inicialmente sin imagen */
.se-card-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:saturate(1.05); opacity:.95;
}
.se-card-bg.is-loaded{ transition: opacity .25s ease; }
.se-card-txt{position:absolute;left:12px;bottom:10px;font-size:.95rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.35)}
/* Badge cantidad */
.se-badge {
  top: 2px;
  right: 4px;
  width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 16px;
  background: #111;
  box-shadow: 0 0 0 1px #7d1a5b;
  z-index: 2;
  position: absolute;
  border: 1px solid rgb(239, 50, 150);
  backdrop-filter: saturate(120%) blur(4px);
  font-weight: 600;
  text-align: center;
  user-select: none;
}
.se-badge .fa-solid.fa-copy {
  position: absolute;
  z-index: 1;
  font-size: 18px;
  top: 3px;
  right: 5px;
  transform: rotate(180deg);
}
.se-badge .n-count {
  position: absolute;
  top: 6px;
  right: 13px;
  color: #aa2471;
  z-index: 2;
  font-size: 12px;
}
/* ====== Accesibilidad teclado ====== */
.se-story-card:focus-visible{
  outline: 2px solid #fff; outline-offset: 2px;
}

/* ====== Modal: alturas, z-index y safe areas iOS ====== */
#seStoriesViewer.modal{ position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:9999; display:none }
#seStoriesViewer.se-open{ display:block }
.se-viewer{ background:transparent; border:none; box-shadow:none; height:100dvh; padding-bottom: env(safe-area-inset-bottom); }
.se-viewer .se-viewer-body{ min-height:60vh; height:100%; padding:16px; display:flex; align-items:center; justify-content:center }

/* Contenido del visor */
.se-viewer-inner{position:relative;max-width:min(92vw,920px);width:100%;height:min(86vh,760px);background:#000;border-radius:16px;overflow:hidden}
.se-media{position:absolute;inset:0;background-size:cover;background-position:center}
.se-media video,.se-viewer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.se-media.se-media-empty{background:linear-gradient(145deg,#222,#111)}

/* Barras de progreso */
.se-progress{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:6px;z-index:3}
.se-bar{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:4px;overflow:hidden}
.se-bar .se-bar-fill{height:100%;width:0;background:#fff}
.se-bar.active .se-bar-fill{ /* la transición se setea desde JS */ }

/* Header superior (título + ago + zona placeholder) */
.se-topline{position:absolute;left:12px;right:12px;top:18px;display:flex;align-items:flex-start;justify-content:space-between;z-index:3}
.se-head-left{display:flex;flex-direction:column;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.se-title{font-weight:700;line-height:1.2}
.se-ago{font-size:.85rem;opacity:.9}
.se-viewer-location{margin-left:auto;margin-top:2px;color:#fff;opacity:.95}

/* Mensaje inferior */
.se-message{position:absolute;left:12px;right:12px;bottom:12px;background:linear-gradient(transparent, rgba(0,0,0,.6));color:#fff;padding:12px 14px;border-radius:12px;font-size:1rem;z-index:3}

/* Tap zones para avanzar/retroceder */
.se-tap{ position:absolute; left:0; right:0; background:transparent; border:0; z-index:4; }
.se-tap.se-left{   top:56px; bottom:72px; width:50%; left:0;  right:auto; }
.se-tap.se-right{  top:56px; bottom:72px; width:50%; right:0; left:auto; }
.se-tap.se-center{ top:56px; bottom:72px; left:33%; right:33%; } /* zona central para pausa */


/* Botón cerrar */
.se-viewer-close{position:absolute;top:16px;right:12px;background:#fff;border:none;border-radius:999px;width:32px;height:32px;font-size:18px;line-height:30px;text-align:center;cursor:pointer;z-index:20 !important}

/* Scroll lock */
body.se-scroll-lock{overflow:hidden}

/* Cards de selección de pub en el composer */
.card.se-pub-card{cursor:pointer;border-radius:14px;overflow:hidden}
.card.se-pub-card.active{outline:3px solid #0d6efd}

/* --- Forzar visibilidad del modal con Bootstrap en uso --- */
#seStoriesViewer.se-open { display:block !important; opacity:1 !important; }
#seStoriesViewer.se-open .modal-dialog {
  margin:0 !important;
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;   /* neutraliza .fade */
  opacity:1 !important;
}
#seStoriesViewer.se-open .modal-content.se-viewer {
  height:100% !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#seStoriesViewer.se-open .se-viewer-body { height:100% !important; }

/* Capa overlay del propio contenedor (por si el tema redefine .modal) */
#seStoriesViewer.modal {
  position:fixed !important;
  inset:0 !important;
  z-index: 10990 !important; /* por encima de bs modal (1055) */
  background: rgba(0,0,0,.82);
}

/* --- Animaciones slide vertical entre publicaciones --- */
@keyframes outUp   { from {opacity:1; transform:translateY(0)}   to {opacity:0; transform:translateY(-40px)} }
@keyframes inUp    { from {opacity:0; transform:translateY(40px)} to {opacity:1; transform:translateY(0)} }
@keyframes outDown { from {opacity:1; transform:translateY(0)}   to {opacity:0; transform:translateY(40px)} }
@keyframes inDown  { from {opacity:0; transform:translateY(-40px)} to {opacity:1; transform:translateY(0)} }

.se-viewer-inner.anim-out-up   { animation: outUp .28s ease forwards; }
.se-viewer-inner.anim-in-up    { animation: inUp  .28s ease forwards; }
.se-viewer-inner.anim-out-down { animation: outDown .28s ease forwards; }
.se-viewer-inner.anim-in-down  { animation: inDown  .28s ease forwards; }

/* --- Onboarding hint --- */
.se-hint{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:72px; z-index:5; color:#fff;
  background:rgba(0,0,0,.45); padding:8px 12px; border-radius:12px;
  font-size:.92rem; display:flex; align-items:center; gap:8px;
  pointer-events:none;
}
.se-hint .arrow{
  display:inline-block; font-weight:700; font-size:1.1rem; line-height:1;
  animation:bounceUp 1.2s infinite;
}
@keyframes bounceUp { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }

/* La X del visor por encima de todo */
.se-viewer-close{
  z-index: 20 !important;       /* más alto que .se-tap */
}


/* Header y barras no interceptan gestos (pero la zona sí puede hacerlo) */
.se-progress{ pointer-events:none; }
.se-topline{ pointer-events:none; }
.se-viewer-location{ pointer-events:auto; } /* por si querés meter links allí */

/* Animaciones slide (como ya tenías) — ok */


/* Video dentro de la card (SÓLO hover/viewport, no autoplay global) */
.se-card-video{position:absolute; inset:0; overflow:hidden}
.se-card-video video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(1.05);
}

/* Chip “VIDEO” (opcional) */
.se-card-video-flag{
  position:absolute; top:8px; left:8px;
  background:rgba(0,0,0,.6); color:#fff;
  font-size:.72rem; padding:2px 6px; border-radius:10px;
}

.se-viewer-tapzone{ position:absolute; inset:0; z-index:5; background:transparent; }
#se-viewer.is-paused { cursor: pointer; }


/* --- FIX overflow horizontal --- */
.se-stories-wrap{
isolation: isolate;
  display: block;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  min-height: 130px; 
}

.se-stories-rail {
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
  padding-inline: 8px;
  touch-action: auto;
  scroll-snap-type: x proximity;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  position: absolute;
  scrollbar-width: none;
}

/* Grid en columnas (no fuerza ancho global) */
.se-stories-grid{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  padding: 8px 4px;
  margin: 0;
  min-width: max-content;    /* hace que el contenido defina el ancho scrolleable */
}

.se-stories-grid .se-row {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
}

/* --- SKELETON cards mientras carga --- */
.se-skel-row{ display:inline-flex; gap:12px; padding:8px 4px; min-width:max-content; }
.se-skel-card{
  flex:0 0 auto;
  width:100px; height:100px;
  border-radius:50%;
  background: #1a1a1a;
  position:relative; overflow:hidden;
}

.se-skel-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: se-skel 1.2s infinite;
}
@keyframes se-skel { to { transform: translateX(100%); } }



/* Viewer */
.se-viewer { position: relative; background:#000; }
.se-viewer-loading { color:#fff; text-align:center; padding:40px 0; opacity:.8; }

#se-viewer-body { position:relative; width:100%; height:100%; overflow:hidden; }
#se-viewer-body .se-slide{ position:absolute; inset:0; }
#se-viewer-body .se-slide-img{ position:absolute; inset:0; background-size:cover; background-position:center; }

.se-viewer-tapzone{ position:absolute; inset:0; z-index:5; background:transparent; }
.se-zone-left{ left:0; right:65%; }
.se-zone-center{ left:35%; right:35%; }
.se-zone-right{ left:65%; right:0; }

/* animación horizontal sencilla */
#se-viewer-body.slide-left .se-slide{ animation: se-slide-left .24s ease; }
#se-viewer-body.slide-right .se-slide{ animation: se-slide-right .24s ease; }
@keyframes se-slide-left  { from { transform:translateX(12%); opacity:.3; } to { transform:none; opacity:1; } }
@keyframes se-slide-right { from { transform:translateX(-12%); opacity:.3; } to { transform:none; opacity:1; } }

.se-viewer.is-paused { cursor: pointer; }

.se-card-media{ 
  position:relative; 
  inset:0; 
  width:100%; 
  height:100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.se-card-media img,
.se-card-media video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  border-radius: 50%;
}


.se-viewer-subtitle{
  font-size:.95rem; opacity:.9; line-height:1.2; margin-top:2px;
}
.se-link-sticker{
  position:absolute; top:16px; right:50px;
  padding:8px 12px; border-radius:16px;
  background:rgba(255,255,255,.92);
  font-weight:600; text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.se-link-sticker:active{ transform:scale(.98); }

#seStoriesViewer.se-open .se-viewer-body .se-viewer-inner .reacciones-box.responsive {
  bottom: 0;
  height: 30px;
  margin-right: 12px;
  z-index: 10;
}