:root{
  --slide-w: 1280px;       /* mismo canvas que uses en editor (ajusta si es 960x540) */
  --slide-h: 720px;
  --slide-radius: 18px;
  --bg-default: #0b0b0f;
}

/* Contenedor principal del visor */
.stage{
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 20px 110px; /* espacio para controles flotantes */
  overflow: hidden;
  background: #000; /* fuera de la diapositiva */
}

/* Slide: replica del canvas del editor */
.slide{
  width: var(--slide-w);
  height: var(--slide-h);
  position: relative;
  overflow: hidden;
  border-radius: var(--slide-radius);
  background: var(--bg-default);
  box-shadow: 0 32px 80px rgba(0,0,0,.55);
}

/* Fondo imagen, igual que editor */
.slide.bg-image{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Elementos (clases idénticas al editor) */
.el{
  position: absolute;
  overflow: hidden;     /* evita desbordes */
  word-wrap: break-word;
  hyphens: auto;
}
.el .el-content{
  width: 100%;
  height: 100%;
}

/* Texto */
.el.el-text{
  padding: 4px;
  border-radius: 8px;
}

/* Imagen */
.el.el-imgwrap{ display: block; }
.el.el-imgwrap img.media{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;  /* igual que en el editor */
}

/* Tablas, Código, Chart, LaTeX */
.el.el-table{ overflow: auto; }
.el.el-code{
  overflow: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  color: #e8e8ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
}
.el.el-chart canvas, .el.el-chart svg{ width:100%!important; height:100%!important; }
.el.el-latex{ display: grid; place-items: center; padding: 4px; }

/* Controles inferiores flotantes */
.viewer-controls{
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(20,20,26,.85), rgba(6,6,10,.85));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.viewer-status{
  font-size: 14px;
  opacity: .9;
  color: #D7DAE0;
}
.nav-btn{
  width: 48px; height: 48px;
  border-radius: 999px; border: none;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px; letter-spacing: .5px;
  color: #EAEAF2A0;
  background: radial-gradient(circle at 30% 30%, #2e2f36, #16171b 65%);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.nav-btn:hover{ transform: translateY(-1px) scale(1.03); }
.nav-btn:active{ transform: translateY(1px) scale(.98); }

/* ========= MODO REEL (móvil) ========= */
@media (max-width: 768px){
  .stage{
    display: block;
    padding: 12px 12px 120px;
    overflow-y: auto;
    scroll-behavior: smooth;
  }
  .slide{
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;       /* “reel” */
    margin: 0 auto 16px;
  }
  .slide.reel .el{
    position: relative !important;
    left: auto !important;
    top:  auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 10px 0 !important;
  }
  .slide.reel .el.el-imgwrap{ max-height: 60vh; }
  .slide.reel .el.el-table{ max-height: 50vh; }
  .slide.reel .el.el-code{ max-height: 50vh; }
  .slide.reel .el.el-chart{ height: 40vh !important; }
  .slide.reel .el.el-text{ font-size: clamp(18px, 4vw, 28px) !important; line-height: 1.35 !important; }
}

/* Print: una por página */
@media print{
  .viewer-controls{ display:none!important; }
  .stage{ padding:0; }
  .slide{ width:100%; height:auto; box-shadow:none; border-radius:0; page-break-after:always; }
}