/* JDServer.es — webcams-rotator.css (v5.0: slides apilados + centrado perfecto) */
:root{
  --wc-h-desktop: 420px;
  --wc-h-mobile:  320px;
}

#wc-rotor{ margin:14px 0 28px; }
.wcR-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.wcR-title{ font-weight:600; }

/* Marco fijo */
.wcR-stage{
  position:relative;
  height: var(--wc-h-desktop);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
@media (max-width:520px){
  .wcR-stage{ height: var(--wc-h-mobile); }
}

/* Pista: ocupa el marco; los slides van apilados encima */
.wcR-track{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* Cada slide ocupa TODO el marco, apilado (absolute) */
.wcR-slide{
  position:absolute;
  inset:0;                 /* top:0; right:0; bottom:0; left:0 */
  padding:12px;
  display:flex;
  will-change: transform;
  transform: translateX(0);
  transition: transform .6s ease-in-out;
}

/* Estados para la animación */
.wcR-slide.is-current{ transform: translateX(0); }
.wcR-slide.is-next{    transform: translateX(100%); }
.wcR-slide.is-prev{    transform: translateX(-100%); }

/* Contenido: una imagen por slide, centrada */
.wcR-figure{
  margin:0; padding:0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

/* La imagen se adapta al alto del cuadro, manteniendo proporción y centrada */
.wcR-figure img{
  display:block;
  max-height:100%;
  max-width:100%;
  height:auto;
  width:auto;
  object-fit: contain;
  margin:0 auto;
}

/* Placeholder por si hiciera falta */
.wcR-ph{
  color:var(--muted); font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  border:1px dashed var(--border);
  border-radius:12px;
}

/* Controles */
.wcR-arrows button{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.75); cursor:pointer; box-shadow:var(--shadow-2);
}
.wcR-arrows .prev{ left:10px; } 
.wcR-arrows .next{ right:10px; }
.wcR-arrows button:focus{ outline:2px solid rgba(0,0,0,.15); }
@media (prefers-color-scheme: dark){ 
  .wcR-arrows button{ background:rgba(0,0,0,.35); } 
}

/* Dots */
.wcR-dots{
  position:absolute; left:0; right:0; bottom:6px;
  display:flex; gap:8px; justify-content:center;
}
.wcR-dots button{
  width:8px; height:8px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(0,0,0,.25);
}
.wcR-dots button.active{ width:18px; background:rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark){
  .wcR-dots button{ background:rgba(255,255,255,.35); }
  .wcR-dots button.active{ background:rgba(255,255,255,.6); }
}

/* Full-bleed horizontal en móvil */
@media (max-width:520px){
  #wc-rotor{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
}
.wcR-slide{
  backface-visibility: hidden;
  contain: paint;
}