/* Opinar Revista — estilos scoped. No toca nada fuera de .opinar-revista. */

.opinar-revista{
  --or-fondo:#15171c;
  --or-linea:#2c313a;
  --or-texto:#eceae4;
  --or-tenue:#a7adb8;
  --or-oro:#c9a227;
  position:relative;
  display:block;
  margin:22px 0 30px;
  padding:0;
  background:var(--or-fondo);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  /* Tipografía propia, NO heredada: el contenido de una entrada del tema usa una serif
     (Lora) y el visor heredaba esa fuente, así que los botones salían con otra letra
     que el resto del sitio. Se fija la familia de interfaz del tema. */
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--or-texto);
  line-height:1.2;
  outline:none;
}
.opinar-revista *{box-sizing:border-box}
.opinar-revista:focus-visible{outline:3px solid var(--or-oro); outline-offset:2px}

/* barra */
.opinar-revista .or-barra{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; border-bottom:1px solid var(--or-linea);
  background:linear-gradient(#1e2128,#191c22);
}
.opinar-revista .or-titulo{
  font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--or-texto);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 120px; min-width:0;
}
.opinar-revista .or-acciones{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.opinar-revista .or-btn{
  appearance:none; border:1px solid var(--or-linea); background:#23272f; color:var(--or-texto);
  height:32px; padding:0 10px; border-radius:7px; font:inherit; font-size:12.5px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none;
  transition:background .15s,border-color .15s;
}
.opinar-revista .or-btn:hover{background:#2b3038; border-color:#3b424c; color:#fff}
.opinar-revista .or-btn:focus-visible{outline:2px solid var(--or-oro); outline-offset:2px}
.opinar-revista .or-pdf{border-color:#5c4a12; background:#2a2413; color:#f0d98a}
.opinar-revista .or-pdf:hover{background:#332c15; color:#fff}

/* libro */
.opinar-revista .or-libro{
  position:relative; width:100%; margin:0 auto; padding:0;
  background:radial-gradient(120% 90% at 50% 0%, #22262d 0%, var(--or-fondo) 70%);
  min-height:240px; display:flex; align-items:center; justify-content:center;
  /* el lienzo del motor es 1,24x el libro (margen para la silueta de la hoja que
     vuela): recortarlo acá es lo que evita que se desborde de la entrada */
  overflow:hidden;
}

/* motor de hojas (propio) */
.opinar-revista .mr-marco{position:relative; margin:0 auto; flex:0 0 auto}
.opinar-revista .mr-canvas{position:absolute; left:0; top:0; display:block; touch-action:none}
.opinar-revista .mr-escena{position:relative; margin:0 auto; perspective:2300px;
  perspective-origin:50% 50%; touch-action:pan-y; user-select:none; transition:transform .24s ease}
.opinar-revista .mr-escena.mr-simple{overflow:hidden}
.opinar-revista .mr-pagina{position:absolute; top:0; height:100%; overflow:hidden;
  background:#f6f3ec; box-shadow:0 10px 28px rgba(0,0,0,.45); z-index:1}
.opinar-revista .mr-izq{left:0}
.opinar-revista .mr-der{right:0}
.opinar-revista .mr-pagina img{width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none}
.opinar-revista .mr-pagina.mr-vacia{background:transparent; box-shadow:none; visibility:hidden}
.opinar-revista .mr-pagina.mr-vacia img{visibility:hidden}
.opinar-revista .mr-hoja{position:absolute; top:0; left:50%; height:100%; transform-origin:0 50%;
  transform-style:preserve-3d; display:none; pointer-events:none; z-index:4}
.opinar-revista .mr-hoja.mr-activa{display:block}
.opinar-revista .mr-cara{position:absolute; inset:0; transform-style:preserve-3d}
.opinar-revista .mr-franja{position:absolute; top:0; background-repeat:no-repeat;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform}
.opinar-revista .mr-pliegue{position:absolute; top:0; bottom:0; left:50%; width:9%;
  transform:translateX(-50%); pointer-events:none; z-index:5; transition:opacity .22s linear;
  background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.34) 42%, rgba(0,0,0,.46) 50%, rgba(0,0,0,.34) 58%, rgba(0,0,0,0))}
.opinar-revista .mr-luz{position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 72%, rgba(0,0,0,.20) 100%)}
.opinar-revista .mr-capa-sombra{position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden;
  opacity:0; transition:opacity .16s linear}
.opinar-revista .mr-capa-sombra i{position:absolute; top:0; bottom:0; display:block;
  filter:blur(14px); background:linear-gradient(90deg, rgba(0,0,0,.38), rgba(0,0,0,0))}

/* pie */
.opinar-revista .or-pie{
  display:flex; align-items:center; gap:9px; padding:9px 12px;
  border-top:1px solid var(--or-linea); background:linear-gradient(#191c22,#15181d);
  flex-wrap:nowrap;
}
.opinar-revista .or-ico{width:32px; padding:0; font-size:18px; line-height:1}
.opinar-revista .or-contador{font-size:12.5px; color:var(--or-tenue); display:flex; align-items:center; gap:5px; white-space:nowrap}
.opinar-revista .or-ir{
  width:48px; height:30px; text-align:center; font:inherit; font-size:12.5px;
  background:#23272f; border:1px solid var(--or-linea); color:var(--or-texto); border-radius:6px; padding:0;
}
.opinar-revista .or-barra-progreso{
  flex:1 1 auto; height:3px; background:#262b33; border-radius:3px; overflow:hidden; min-width:24px;
}
.opinar-revista .or-barra-progreso i{display:block; height:100%; width:0; background:linear-gradient(90deg,#8a6f1e,var(--or-oro)); transition:width .25s}

/* cajones */
.opinar-revista .or-cajon{
  position:absolute; inset:0; z-index:20; background:rgba(9,10,13,.94);
  padding:14px; overflow:auto; display:block;
}
.opinar-revista .or-cajon[hidden]{display:none}
.opinar-revista .or-cajon-cab{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px; position:sticky; top:0; background:rgba(9,10,13,.96); padding:4px 0;
}
.opinar-revista .or-cajon-cab strong{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--or-tenue)}
.opinar-revista .or-minis{display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:10px}
.opinar-revista .or-mini{
  cursor:pointer; border:2px solid transparent; border-radius:5px; overflow:hidden; background:#0e0f12;
  padding:0; position:relative; display:block; width:100%; aspect-ratio:1/1.294;
}
.opinar-revista .or-mini img{width:100%; height:100%; object-fit:cover; display:block}
.opinar-revista .or-mini:hover{border-color:#4a515c}
.opinar-revista .or-mini.or-activa{border-color:var(--or-oro)}
.opinar-revista .or-mini span{
  position:absolute; bottom:0; left:0; right:0; padding:3px 5px; font-size:10.5px; color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
}
.opinar-revista .or-zoom-caja{text-align:center}
.opinar-revista .or-zoom-caja img{max-width:none; width:min(1400px,200%); height:auto; background:#fff}

/* pantalla completa */
.opinar-revista:fullscreen{display:flex; flex-direction:column; border-radius:0; margin:0; height:100vh}
.opinar-revista:fullscreen .or-libro{flex:1 1 auto; height:auto !important}
.opinar-revista:-webkit-full-screen{display:flex; flex-direction:column; height:100vh}

@media (max-width:640px){
  .opinar-revista .or-btn{padding:0 8px; font-size:12px}
  .opinar-revista .or-titulo{font-size:12px}
  .opinar-revista .or-minis{grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .opinar-revista *{transition-duration:.001s !important; animation-duration:.001s !important}
}

/* ---------------------------------------------------------------------------
   Pantalla de carga
   Antes el visor abría con un rectángulo oscuro vacío: no se sabía si estaba
   cargando o si algo se había roto. Tapa el visor hasta que la primera página
   está a la vista, y se va con un fundido.
   --------------------------------------------------------------------------- */
.opinar-revista { position: relative; }

.opinar-revista .or-carga {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--or-fondo);
  color: var(--or-texto); font-size: 13px; letter-spacing: .01em;
  transition: opacity .32s ease;
}
.opinar-revista .or-carga[hidden] { display: none; }
.opinar-revista .or-carga.or-fuera { opacity: 0; pointer-events: none; }

.opinar-revista .or-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: var(--or-texto);
  animation: or-girar .9s linear infinite;
}
@keyframes or-girar { to { transform: rotate(360deg); } }

/* con «reducir movimiento» no se gira: se queda quieto y avisa igual */
@media (prefers-reduced-motion: reduce) {
  .opinar-revista .or-spinner { animation-duration: 3.5s; }
  .opinar-revista .or-carga { transition: none; }
}