/* Palabra Viva — el libro abierto: páginas de pergamino, capitular, versículos y paso de página. */

:root {
  /* Textura de pergamino generada con feTurbulence (sin imágenes externas) */
  --textura: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .12  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='.38'/></svg>");
  --manchas: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .38  0 0 0 0 .14  0 0 0 .5 -.12'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
}
:root[data-tema="noche"] {
  --textura: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05  0 0 0 0 .03  0 0 0 0 .01  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='.45'/></svg>");
  --manchas: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .02  0 0 0 0 .01  0 0 0 0 0  0 0 0 .55 -.1'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
}

.pergamino, .pagina {
  color: var(--tinta);
  background-color: var(--pergamino);
  background-image:
    var(--textura),
    var(--manchas),
    radial-gradient(ellipse at 50% 40%, transparent 55%, color-mix(in srgb, var(--pergamino-2) 85%, #6b4a17 15%) 120%);
  border: 2px solid var(--pergamino-borde);
  box-shadow:
    inset 0 0 0 6px var(--pergamino),
    inset 0 0 0 8px color-mix(in srgb, var(--oro-vivo) 70%, transparent),
    0 18px 40px -18px var(--sombra);
}

/* ---------- Cabecera del lector ---------- */
.lector-cabeza {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 4px 16px; margin-bottom: 8px;
}
.lector-cabeza .migas { flex-basis: 100%; }
.lector-titulo {
  font-family: var(--fuente-texto);
  font-weight: 600;
  letter-spacing: .02em;
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  margin: 0; outline: none; flex: 1 1 auto;
}
.lector-acciones { display: flex; gap: 8px; }
#btn-fav[aria-pressed="true"] { background: var(--principal-fondo); color: var(--principal-texto); border-color: var(--oro-vivo); }
#btn-fav[aria-pressed="false"] svg path { fill: none; }

/* ---------- Escenario y libro ---------- */
.escenario { position: relative; }
.libro {
  position: relative;
  perspective: 2600px;
}
.pagina {
  position: relative;
  border-radius: 6px;
  padding: 26px 18px 22px;
  overflow: hidden;
}
.lomo, .pasar-pagina { display: none; }
.pagina.der:empty { display: none; }
.pagina-cuerpo { position: relative; }

/* Ornamentos de esquina */
.pagina::before, .pagina::after,
.pergamino::before {
  content: "";
  position: absolute;
  width: 54px; height: 54px;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'><g fill='none' stroke='%23b8913f' stroke-width='1.6'><path d='M4 50V12Q4 4 12 4h38'/><path d='M10 50V18q0-8 8-8h32' opacity='.6'/><circle cx='12' cy='12' r='3.2' fill='%23b8913f'/><path d='M20 20q6-6 12 0' /></g></svg>") no-repeat;
  opacity: .9;
}
.pagina::before, .pergamino::before { top: 10px; left: 10px; }
.pagina::after { bottom: 10px; right: 10px; transform: rotate(180deg); }
.pergamino { position: relative; }

/* Encabezado del capítulo */
.cab-capitulo { text-align: center; margin: 4px 0 18px; }
.cab-libro {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: calc(var(--letra) * .72);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}
.cab-numero {
  margin: 4px 0 0;
  font-family: var(--fuente-texto);
  font-weight: 600;
  letter-spacing: .06em;
  font-size: calc(var(--letra) * 1.15);
  color: var(--tinta);
}
.cab-nota { margin: 8px 0 0; font-size: calc(var(--letra) * .68); font-style: italic; color: var(--tinta-suave); }
.cab-resumen {
  margin: 12px auto 0; max-width: 34em;
  font-size: calc(var(--letra) * .7);
  font-style: italic;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.cab-capitulo .filete { margin: 10px auto 0; max-width: 260px; }

/* Texto bíblico */
.parrafo {
  margin: 0;
  font-size: var(--letra);
  line-height: 1.7;
  text-align: left;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.verso { border-radius: 6px; transition: background-color .3s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.verso.cita { background: var(--cita); }
.verso.leyendo { background: var(--resaltado); box-shadow: 0 0 0 3px var(--resaltado); }
.num {
  font-family: var(--fuente-texto);
  font-size: .55em;
  font-weight: 700;
  color: var(--rubrica);
  vertical-align: .55em;
  line-height: 0;
  margin: 0 .2em 0 .15em;
}

/* Capitular ornamentada */
.parrafo.con-capitular::first-letter {
  float: left;
  font-family: var(--fuente-capitular);
  font-weight: 700;
  font-size: 3.1em;
  line-height: 1;
  margin: .06em .14em 0 0;
  padding: .1em .14em .02em;
  color: var(--oro);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--oro-claro) 30%, transparent), transparent 70%),
    var(--pergamino);
  border: 3px double var(--oro-vivo);
  border-radius: 4px;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--oro-claro) 60%, transparent);
}

.pie-pagina {
  text-align: center;
  font-family: var(--fuente-titulo);
  font-size: .9rem;
  color: var(--tinta-suave);
  margin-top: 14px;
}
.fin-capitulo { text-align: center; color: var(--oro-vivo); font-size: 1.6rem; margin-top: 14px; }

/* Capítulo sin texto */
.no-disponible { text-align: center; padding: 20px 6px; }
.no-disponible p { font-size: calc(var(--letra) * .9); margin: 10px 0; }
.no-disponible .ayuda { font-size: 1.05rem; }
.no-disponible .boton { margin-top: 12px; }

/* Animación de paso de capítulo en móvil */
.entrar-adelante { animation: entrar-adelante .35s ease-out; }
.entrar-atras { animation: entrar-atras .35s ease-out; }
@keyframes entrar-adelante { from { opacity: 0; transform: translateX(40px); } }
@keyframes entrar-atras { from { opacity: 0; transform: translateX(-40px); } }

/* ---------- Escritorio: libro abierto con dos páginas ---------- */
@media (min-width: 1024px) and (min-height: 560px) {
  .escenario {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: center;
    gap: 12px;
  }
  .pasar-pagina {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    color: var(--boton-texto);
    background: var(--boton-fondo);
    border: 2px solid var(--boton-borde);
    cursor: pointer;
    box-shadow: 0 6px 16px -8px var(--sombra);
  }
  .pasar-pagina svg { width: 32px; height: 32px; }
  .pasar-pagina:disabled { opacity: .35; cursor: default; }

  .libro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: clamp(480px, calc(100vh - 330px), 1100px);
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 14px;
    /* Tapas del libro */
    background: linear-gradient(180deg, #5b3816, #3b230c);
    box-shadow: 0 30px 60px -25px rgba(0,0,0,.6), 0 0 0 2px #8a6420, 0 0 80px -10px var(--resplandor);
  }
  :root[data-tema="noche"] .libro { background: linear-gradient(180deg, #2c1b0b, #1a0f05); }
  .pagina {
    height: 100%;
    padding: 32px 46px 22px;
    display: flex; flex-direction: column;
  }
  .pagina.der:empty { display: flex; }
  .pagina.izq { border-radius: 8px 2px 2px 8px; border-right-width: 0;
    background-image: var(--textura), var(--manchas),
      linear-gradient(270deg, color-mix(in srgb, var(--pergamino-2) 70%, #3b2508 30%) 0, transparent 9%),
      radial-gradient(ellipse at 50% 40%, transparent 55%, color-mix(in srgb, var(--pergamino-2) 85%, #6b4a17 15%) 120%); }
  .pagina.der { border-radius: 2px 8px 8px 2px; border-left-width: 0;
    background-image: var(--textura), var(--manchas),
      linear-gradient(90deg, color-mix(in srgb, var(--pergamino-2) 70%, #3b2508 30%) 0, transparent 9%),
      radial-gradient(ellipse at 50% 40%, transparent 55%, color-mix(in srgb, var(--pergamino-2) 85%, #6b4a17 15%) 120%); }
  .parrafo { text-align: justify; }
  .pagina-cuerpo { flex: 1 1 auto; overflow: hidden; min-height: 0; }
  .pagina-cuerpo.desborda { overflow-y: auto; }
  .lomo {
    display: block;
    position: absolute; top: 10px; bottom: 10px; left: 50%;
    width: 4px; transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(60,35,8,.5), rgba(255,240,200,.15), rgba(60,35,8,.5));
    pointer-events: none;
  }

  /* Hoja que gira */
  .hoja {
    position: absolute;
    top: 10px; bottom: 10px;
    width: calc(50% - 10px);
    transform-style: preserve-3d;
    z-index: 5;
    pointer-events: none;
  }
  .hoja.adelante { left: 50%; transform-origin: left center; animation: girar-adelante .8s cubic-bezier(.45,.05,.35,1) forwards; }
  .hoja.atras { left: 10px; transform-origin: right center; animation: girar-atras .8s cubic-bezier(.45,.05,.35,1) forwards; }
  .hoja .cara {
    position: absolute; inset: 0;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    height: 100%;
  }
  .hoja .dorso { transform: rotateY(180deg); }
  .hoja .cara::selection { background: none; }
  /* Sin filter: aplanaría el 3D y se vería el dorso al revés */
  @keyframes girar-adelante { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
  @keyframes girar-atras { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }

  .lector-cabeza { flex-wrap: nowrap; align-items: center; }
  .lector-cabeza .migas { flex-basis: auto; margin: 0; white-space: nowrap; }
  .lector-titulo { font-size: 1.6rem; }
  .cab-resumen { font-size: calc(var(--letra) * .6); }
  .cab-capitulo { margin-bottom: 12px; }
  .controles { max-width: 980px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 1023px), (max-height: 559px) {
  .libro { max-width: 820px; margin: 0 auto; }
}