/* Supersized (parche 2025, drop-in) */
* { margin: 0; padding: 0; }
body { background: #111; }
img { border: none; }

/* Loader centrado */
#supersized-loader{
  position: fixed;
  top: 50%; left: 50%;
  z-index: 10;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  text-indent: -999em;
  background: rgba(0,0,0,.8) url(../i/loader.gif) no-repeat center;
  border-radius: 5px;
}

/* Lienzo de fondo */
#supersized{
  position: fixed;
  inset: 0;            /* top:0; right:0; bottom:0; left:0 */
  overflow: hidden;
  z-index: -1 !important;
  height: 100%; width: 100%;
}
#supersized img{
  position: relative;
  display: none;
  width: auto; height: auto;
  outline: none; border: none;
  /* Mejora visual en escalados modernos */
  image-rendering: auto;
}
#supersized a{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
  z-index: -1 !important;
}
#supersized a.prevslide{ z-index: 0 !important; }
#supersized a.activeslide{ z-index: 1 !important; }
#supersized a.prevslide img,
#supersized a.activeslide img{ display: inline; }

/* Controles (si los usas) */
#controls-wrapper{
  position: fixed;
  left: 0; bottom: 0;
  width: 100%; height: 62px;
  background: url(../img/nav-bg.png) repeat-x;
  z-index: 4 !important;
}
#controls{
  overflow: hidden;
  height: 100%;
  text-align: left;
  z-index: 5 !important;
  padding: 0 114px; /* hueco para thumbnails */
}
#slidecounter{
  float: left;
  margin: 19px 10px 18px 20px;
  color: #888;
  font: bold 23px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 -1px 0 #000;
}
#slidecaption{
  float: left; overflow: hidden;
  margin: 23px 20px;
  color: #fff;
  font: bold 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 2px 0 #000;
}
#navigation{ float: right; margin: 10px 20px 0 0; }

/* Thumbnails navegación */
#nextthumb, #prevthumb{
  position: fixed;
  bottom: 12px;
  height: 75px; width: 100px;
  overflow: hidden;
  background: #ddd;
  border: 2px solid #fff;
  box-shadow: 0 0 5px #000;
  display: none;
  z-index: 6 !important;
}
#nextthumb{ right: 12px; }
#prevthumb{ left: 12px; }
#nextthumb img, #prevthumb img{ width: 150px; height: auto; }
#nextthumb:active, #prevthumb:active{ bottom: 10px; }
#navigation > :hover, #nextthumb:hover, #prevthumb:hover{ cursor: pointer; }

/* Accesibilidad / movimiento reducido */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}