/* Uploads Library Preview SSR (Compat Single) - minimal styling
   Objetivo: verse limpio en Astra/otros temas, similar a un 'visor + carrusel'. */

.ulssr{
  --ulssr-gap: 14px;
  width: 100%;
}

.ulssr__pagebar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  margin: 10px 0;
}
.ulssr__pBtn,.ulssr__pNum{
  text-decoration:none;
  border:1px solid rgba(0,0,0,.15);
  padding:6px 10px;
  border-radius:8px;
  font-size:14px;
  line-height:1;
  background:#fff;
}
.ulssr__pNum.is-active{font-weight:700;}
.ulssr__pBtn.is-disabled{opacity:.5; pointer-events:none;}
.ulssr__pInfo{font-size:13px; opacity:.85;}
.ulssr__pDots{opacity:.6;}

.ulssr__layout{
  display:flex;
  flex-direction:column;
  gap: var(--ulssr-gap);
}
.ulssr__layout--center{
  align-items:center;
}

.ulssr__viewer{
  width:100%;
  min-width:0;
}
.ulssr__viewerTitle{
  font-weight:600;
  margin: 0 0 10px 0;
}

.ulssr__frame{
  width:100%;
  height: var(--ulssr-height);
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
}

.ulssr__img{
  width:100%;
  height: var(--ulssr-height);
  object-fit: contain;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
}

.ulssr__empty{
  border:1px dashed rgba(0,0,0,.25);
  border-radius:10px;
  padding:18px;
  background: rgba(0,0,0,.02);
}
.ulssr__emptySmall{font-size:13px; opacity:.8; margin-top:6px;}

/* Lista / miniaturas */
.ulssr__list{
  width:100%;
}

/* Carousel: horizontal */
.ulssr__list--carousel{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 6px 2px 10px 2px;
  scroll-snap-type: x mandatory;
}

.ulssr__item{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:12px;
  padding:10px;
  text-align:left;
  cursor:pointer;
}

.ulssr__list--carousel .ulssr__item{
  flex: 0 0 240px;
  display:flex;
  gap:10px;
  align-items:center;
  scroll-snap-align: start;
}

.ulssr__list--grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:10px;
}

.ulssr__list--grid .ulssr__item{
  display:flex;
  gap:10px;
  align-items:center;
}

.ulssr__item.is-active{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.ulssr__thumb{
  width:64px;
  height:64px;
  border-radius:10px;
  background-size:cover;
  background-position:center;
  flex: 0 0 64px;
  border:1px solid rgba(0,0,0,.08);
}

.ulssr__meta{display:flex; flex-direction:column; gap:4px; min-width:0;}
.ulssr__itemTitle{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ulssr__itemDate{font-size:12px; opacity:.75;}

@media (max-width: 600px){
  .ulssr__list--carousel .ulssr__item{flex-basis: 200px;}
  .ulssr__thumb{width:56px; height:56px; flex-basis:56px;}
}