/* Berea: inicio, movimiento, preparación en mapa, visor, progreso con plan y diario.
   Va después de estilo.css y cambia lo que haga falta. */

/* ---------- Tipografía: una sola familia para títulos y etiquetas ---------- */
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 700; letter-spacing: -.025em; }
.etiqueta { font-family: var(--titulo); font-weight: 600; letter-spacing: .16em; }

/* ---------- Movimiento ---------- */
#vista.entrando { animation: entrar .6s cubic-bezier(.2, .7, .2, 1); }
#vista.entrando-suave { animation: entrar-suave .35s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes entrar-suave { from { opacity: .3; } to { opacity: 1; } }
.revelar { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.revelar.visto { opacity: 1; transform: none; }
.aparece { animation: subir 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes subir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* El fondo se mueve solo y muy lento: el brillo rojo respira */
.brillo { animation: brillo-vivo 16s ease-in-out infinite alternate; }
@keyframes brillo-vivo { from { transform: translate(-2vw, 1vh) scale(.96); opacity: .8; } to { transform: translate(3vw, -3vh) scale(1.06); opacity: 1; } }

/* ---------- Barra: Libros con su flechita ---------- */
.menu-libros { display: flex; align-items: stretch; border-radius: 999px; }
.menu-libros:has(> a.activo) { background: var(--rojo); box-shadow: 0 6px 22px -8px rgba(200, 40, 30, .9); }
.menu-libros > a { display: flex; align-items: center; gap: 4px; padding: 9px 6px 9px 16px; border-radius: 999px 0 0 999px; text-decoration: none; font: 500 14px/1 var(--ui); }
.menu-libros > a.activo { background: none !important; box-shadow: none; }
.menu-libros > a:hover { background: rgba(255, 248, 235, .08); }
.abrir-menu { border: 0; background: none; padding: 9px 10px 9px 4px; border-radius: 0 999px 999px 0; display: grid; place-items: center; }
.menu-libros > a.activo + .abrir-menu { background: none; }
.abrir-menu:hover { background: rgba(255, 248, 235, .08); }
.abrir-menu .caret { width: 16px; height: 16px; transition: transform .2s; }
.abrir-menu[aria-expanded="true"] .caret { transform: rotate(180deg); }
.menu-panel[hidden] { display: none; }
.menu-panel { animation: subir .25s ease-out; }
.menu-panel .ver-todos { margin-top: 6px; border-top: 1px solid var(--linea); border-radius: 0 0 10px 10px; justify-content: center; font-weight: 600; color: var(--beige); }

/* ---------- Inicio ---------- */
.portada-berea { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 6vh 0 30px; }
/* Cinta roja de separador de Biblia que cuelga de la B */
.titulo-berea .letra:first-child { position: relative; }
.cinta-biblia {
  position: absolute; left: 30%; top: .1em; width: .075em; height: 1.02em; background: linear-gradient(90deg, #a81f17, var(--rojo-2) 45%, #a81f17);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); transform-origin: 50% 0; z-index: -1;
  animation: cinta-cae 1.1s cubic-bezier(.2, .7, .2, 1) .9s both, mecer 5s ease-in-out 2s infinite;
  filter: drop-shadow(0 6px 10px rgba(200, 40, 30, .35));
}
@keyframes cinta-cae { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mecer { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }
.titulo-berea {
  display: flex; align-items: center; justify-content: center; gap: .08em; margin: 0;
  font: 700 clamp(96px, 19vw, 230px)/.92 var(--titulo-grande); letter-spacing: -.05em; cursor: default; user-select: none;
}
.titulo-berea .letras { display: inline-flex; }
.titulo-berea .letra {
  display: inline-block; font-variation-settings: "wght" var(--peso, 640);
  transform: translateY(var(--alza, 0)); transition: font-variation-settings .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1);
  animation: letra-entra 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 90ms + 250ms);
}
.titulo-berea .letra:first-child { color: var(--blanco); }
@keyframes letra-entra { from { opacity: 0; transform: translateY(60px) rotate(6deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.titulo-berea.ola .letra { animation: ola .9s cubic-bezier(.2, .7, .2, 1); animation-delay: calc(var(--i) * 70ms); }
@keyframes ola { 40% { transform: translateY(-22px); font-variation-settings: "wght" 850; } }
.cruz-titulo { width: .3em; height: .48em; color: var(--rojo); flex: none; transform-origin: 50% 0; animation: cruz-entra 1s cubic-bezier(.2, .7, .2, 1) both; filter: drop-shadow(0 0 30px rgba(200, 40, 30, .45)); }
@keyframes cruz-entra { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.portada-berea .frase { font: 400 clamp(21px, 2.6vw, 30px)/1.35 var(--titulo); letter-spacing: -.01em; max-width: 620px; }
.bajar { margin-top: 26px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linea-2); display: grid; place-items: center; }
.bajar svg { width: 22px; height: 22px; animation: rebote 2s ease-in-out infinite; }
@keyframes rebote { 50% { transform: translateY(6px); } }

.por-que { max-width: 760px; margin: 10px auto 0; padding: 0 0 20px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.caja-versiculo { margin: 0; padding: 26px 30px; border-radius: 22px; border: 1px solid rgba(232, 220, 196, .35); background: linear-gradient(160deg, rgba(232, 220, 196, .1), rgba(20, 18, 16, .7)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.caja-versiculo p { font: italic 400 clamp(20px, 2.5vw, 26px)/1.5 var(--serif); }
.caja-versiculo cite { display: block; margin-top: 12px; font: 600 12px var(--titulo); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo-2); }
.cita-berea { margin: 0; font: italic 400 clamp(22px, 2.8vw, 30px)/1.45 var(--serif); }
.cita-berea cite { display: block; margin-top: 12px; font: 600 12px var(--titulo); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo-2); }
.por-que > p { font: 400 18.5px/1.7 var(--serif); }

.seccion.centrada .seccion-cabeza { flex-direction: column; align-items: center; text-align: center; border-bottom: 0; }
.seccion.centrada .seccion-cabeza h2 { font-size: clamp(30px, 4vw, 44px); }
.libro-tarjeta .libro-nombre { text-decoration: none; }
.libro-tarjeta h3 { font-size: 34px; font-weight: 800; }

.cabeza-centrada { text-align: center; padding: 40px 0 10px; display: grid; gap: 10px; justify-items: center; }
.cabeza-centrada h1 { font-size: clamp(56px, 9vw, 104px); font-weight: 800; letter-spacing: -.04em; }
.cabeza-centrada p { font: 400 19px/1.5 var(--serif); max-width: 560px; }
.proximos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.proximo { padding: 18px 20px; display: grid; gap: 10px; }
.proximo h3 { font-size: 19px; }
.proximo .libros { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Preparación ---------- */
.qa h3 { color: var(--beige); display: flex; align-items: center; gap: 10px; }
.qa-marca { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--rojo); color: var(--blanco); font: 800 15px var(--titulo); }
.qa p { padding-left: 36px; }
.destacado { margin: 12px 0 0; padding: 14px 18px 14px 20px; max-width: 760px; font: italic 400 16.5px/1.6 var(--serif); border-left: 3px solid var(--beige); background: var(--tarjeta); border-radius: 0 12px 12px 0; }
.destacado::before { content: none; }

.acordeon-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.acordeon-cabeza h3 { margin-bottom: 4px; }
.acordeon-cabeza p { font-size: 14px; }
.acordeon-cabeza .ew-herramientas { padding: 0; }
.acordeon .items { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.acordeon .col { display: grid; gap: 10px; align-content: start; }
.acordeon details { margin: 0; }

.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; margin: -6px 0 18px; }
.punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--carbon); border: 2px solid var(--beige); vertical-align: middle; margin-right: -6px; }
.punto.rojo { background: var(--rojo); border-color: var(--rojo); }
.punto.verde { background: var(--verde); border-color: var(--verde); }
.punto.beige { background: var(--beige); border-color: var(--beige); }

/* Camino: base común del mapa del libro y de los videos */
.camino { position: relative; list-style: none; margin: 0; padding: 0; }
.camino > svg.ruta { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.camino > .parada, .camino > .meta-ruta { position: relative; z-index: 1; }
.ruta-base { fill: none; stroke: rgba(232, 220, 196, .3); stroke-width: 2; stroke-dasharray: 6 8; }
.ruta-luz { fill: none; stroke: var(--rojo); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 2.6s cubic-bezier(.4, .1, .2, 1) .3s forwards; filter: drop-shadow(0 0 6px rgba(200, 40, 30, .6)); }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.nodo { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font: 800 14px var(--titulo); background: var(--carbon); border: 2px solid var(--beige); color: var(--blanco); }

.mapa-libro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; column-gap: 20px; }
.mapa-libro .parada.col-1 { grid-column: 1; }
.mapa-libro .parada.col-2 { grid-column: 2; }
.mapa-libro .parada.col-3 { grid-column: 3; }
.mapa-libro a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; text-decoration: none; background: var(--carbon); border: 1px solid var(--linea); transition: border-color .2s, transform .2s; }
.mapa-libro a:hover { border-color: var(--beige); transform: translateY(-2px); }
.mapa-libro .nodo { grid-row: span 2; }
.mapa-libro .rango { font: 600 11px var(--titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--beige); }
.mapa-libro .t { font-weight: 500; line-height: 1.35; }
.mapa-libro .discurso { border-color: rgba(200, 40, 30, .7); background: linear-gradient(135deg, rgba(200, 40, 30, .22), var(--carbon) 70%); }
.mapa-libro .discurso .nodo { background: var(--rojo); border-color: var(--rojo); }

/* ---------- Videos en camino ---------- */
.ruta-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; padding: 10px 0 20px; }
.ruta-videos .parada { display: grid; justify-items: center; gap: 10px; }
.ruta-videos .parada.izq { grid-column: 1; }
.ruta-videos .parada.der { grid-column: 2; }
.ruta-videos .parada + .parada { margin-top: -110px; }
.ruta-videos .nodo { width: 42px; height: 42px; font-size: 17px; box-shadow: 0 0 0 6px rgba(10, 9, 8, .8); }
.ruta-videos .video { width: min(100%, 400px); padding: 10px; border-radius: 18px; background: var(--carbon); border: 1px solid var(--linea); transition: border-color .2s, transform .2s; }
.ruta-videos .video:hover { border-color: var(--beige); transform: translateY(-3px); }
.inicio-ruta { position: absolute; top: -28px; font: 700 11px var(--titulo); letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--rojo); }
.meta-ruta { grid-column: 1 / -1; display: grid; justify-items: center; margin-top: 30px; }
.meta-ruta span { font: 700 12px var(--titulo); letter-spacing: .14em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--beige); color: var(--beige); }

/* ---------- Capítulo ---------- */
.ew-sec > .puntos { display: grid; gap: 8px; }
.ew-punto.visto-punto { border-color: var(--beige); }
.ew-punto > summary { align-items: center; }
.en-grande { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--linea-2); background: rgba(255, 248, 235, .04); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.en-grande:hover { background: var(--beige); color: #15110c; border-color: var(--beige); }
.en-grande svg { width: 17px; height: 17px; }

/* Paginador de capítulos: arriba normal y abajo más pequeño */
.paginador { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 22px; }
.paginador a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; text-decoration: none; font: 500 14px/1 var(--ui); border: 1px solid var(--linea-2); background: rgba(255, 248, 235, .04); }
.paginador a:hover { border-color: var(--beige); }
.paginador svg { width: 16px; height: 16px; }
.paginador .pag-sig { background: var(--rojo); border-color: var(--rojo); }
.paginador .pag-sig:hover { background: var(--rojo-2); }
.pag-actual { display: grid; justify-items: center; min-width: 74px; padding: 6px 12px; border-radius: 16px; background: var(--beige); color: #15110c; font: 800 24px/1 var(--titulo); }
.pag-actual small { font: 600 9px var(--titulo); letter-spacing: .12em; text-transform: uppercase; }
.paginador.abajo { margin: 26px 0 4px; transform: scale(.9); }
.pag-vacio { width: 120px; }
.pag-sigue { text-align: center; font: italic 400 15px var(--serif); }
.nota strong, .detalle strong { color: var(--beige); font-weight: 600; }
.verso strong { color: var(--blanco); }

.cap-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.cap-pie a { display: grid; gap: 4px; padding: 20px 24px; border-radius: var(--radio); text-decoration: none; border: 1px solid var(--linea-2); background: var(--tarjeta); transition: transform .2s, border-color .2s; }
.cap-pie a:hover { transform: translateY(-3px); border-color: var(--beige); }
.cap-pie small { display: flex; align-items: center; gap: 4px; font: 600 12px var(--titulo); letter-spacing: .12em; text-transform: uppercase; }
.cap-pie small svg { width: 16px; height: 16px; }
.cap-pie b { font: 800 clamp(24px, 3vw, 34px) var(--titulo); letter-spacing: -.02em; }
.cap-pie span { font: 400 16px/1.4 var(--serif); }
.cap-pie-sig { text-align: right; justify-items: end; background: var(--rojo) !important; border-color: var(--rojo) !important; }
.cap-pie-sig:hover { background: var(--rojo-2) !important; }

.biblia .pie { display: grid; gap: 8px; }
.ayuda-yv summary { cursor: pointer; color: var(--beige); font-weight: 500; }
.ayuda-yv ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }

/* ---------- Visor de una parte ---------- */
.visor { border: 0; padding: 0; background: none; color: var(--blanco); width: min(880px, 94vw); max-width: none; max-height: 92vh; }
.visor::backdrop { background: rgba(5, 4, 4, .82); backdrop-filter: blur(8px); }
.visor[open] .visor-caja { animation: visor-entra .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes visor-entra { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.visor-caja { display: flex; flex-direction: column; max-height: 92vh; background: var(--carbon); border: 1px solid var(--linea-2); border-radius: 22px; overflow: hidden; }
.visor-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 12px 22px; border-bottom: 1px solid var(--linea); }
.visor-cuenta { font: 600 12px var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--beige); }
.visor-cabeza button { border: 1px solid var(--linea); background: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.visor-cabeza svg { width: 20px; height: 20px; }
.visor-cuerpo { overflow-y: auto; padding: 22px 28px 26px; display: grid; gap: 14px; }
.visor-seccion { font: 600 12px var(--titulo); letter-spacing: .12em; text-transform: uppercase; }
.visor-cuerpo h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.visor-cuerpo h2 .ref { font: 700 14px var(--ui); padding: 4px 10px; border-radius: 8px; background: var(--beige); color: #15110c; }
.visor-cuerpo .cuerpo { display: grid; gap: 14px; }
.visor-pie { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--linea); }
.visor-pie .boton:disabled { opacity: .35; cursor: default; }
.nota-rapida { display: grid; gap: 10px; padding: 16px; border-radius: 14px; border: 1px solid var(--beige); background: rgba(232, 220, 196, .06); }
.nota-rapida label { display: grid; gap: 8px; font-size: 14px; }
.nota-rapida textarea, .entrada input, .entrada textarea { font: 400 16px/1.5 var(--serif); padding: 11px 13px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--negro); color: var(--blanco); width: 100%; resize: vertical; }
.nota-rapida .boton { justify-self: start; }
.nota-guardada { color: var(--verde); font-weight: 600; }

/* ---------- Progreso ---------- */
.prog-centro { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 30px 0 10px; }
.anillo { position: relative; width: min(240px, 62vw); aspect-ratio: 1; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 12; }
.anillo-fondo { stroke: rgba(255, 248, 235, .1); }
.anillo-valor { stroke: var(--verde); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1); filter: drop-shadow(0 0 10px rgba(143, 227, 160, .35)); }
.anillo.lleno .anillo-valor { stroke-dashoffset: calc(100 - var(--valor)); }
.anillo-texto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.anillo-texto b { font: 800 clamp(56px, 9vw, 76px)/1 var(--titulo); letter-spacing: -.04em; }
.anillo-texto small { font: 600 22px var(--titulo); margin-left: 2px; }
.prog-centro h1 { font-size: clamp(48px, 7vw, 84px); font-weight: 800; letter-spacing: -.035em; font-variation-settings: "opsz" 96, "wdth" 90; }
.prog-centro .resumen { font: 400 19px/1.5 var(--serif); max-width: 560px; }
.cifras { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cifras div { min-width: 150px; padding: 14px 18px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--linea); display: grid; }
.cifras b { font: 800 30px/1.1 var(--titulo); }
.cifras span { font-size: 13px; }
.bajada-centrada { text-align: center; font: 400 17px/1.5 var(--serif); margin: -6px auto 18px; max-width: 620px; }

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.plan { padding: 20px; display: grid; gap: 10px; align-content: start; text-align: center; justify-items: center; }
.plan h3 { font-size: 21px; }
.plan-activo { padding: 22px 24px; display: grid; gap: 14px; max-width: 860px; margin: 0 auto; }
.plan-cabeza { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.plan-cabeza h3 { font-size: 24px; margin-top: 4px; }
.dia-actual { font-size: 14px; }
.dia-actual b { font: 800 26px var(--titulo); }
.estado-plan { font-weight: 600; }
.estado-plan.al-dia { color: var(--verde); }
.estado-plan.atrasado { color: var(--beige); }
.semana { display: flex; gap: 8px; flex-wrap: wrap; }
.dia-plan { display: grid; justify-items: center; min-width: 52px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--linea); }
.dia-plan small { font-size: 11px; }
.dia-plan b { font: 700 18px var(--titulo); }
.dia-plan.completo { background: var(--verde-suave); border-color: var(--verde-borde); }
.dia-plan.pendiente { border-color: rgba(200, 40, 30, .6); }
.dia-plan.hoy { border-color: var(--beige); box-shadow: 0 0 0 2px var(--beige); }
.plan-activo h4 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--beige); }
.lecturas-hoy { display: flex; flex-wrap: wrap; gap: 8px; }
.lectura-chip { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--linea-2); overflow: hidden; }
.lectura-chip a { padding: 8px 12px; text-decoration: none; font-weight: 500; }
.lectura-chip button { border: 0; border-left: 1px solid var(--linea-2); background: none; width: 38px; height: 36px; display: grid; place-items: center; }
.lectura-chip button svg { width: 17px; height: 17px; opacity: .5; }
.lectura-chip.hecho { border-color: var(--verde-borde); background: var(--verde-suave); }
.lectura-chip.hecho button { background: var(--verde); color: #0d2414; }
.lectura-chip.hecho button svg { opacity: 1; }
.atrasadas summary { cursor: pointer; color: var(--beige); margin-bottom: 8px; }
.boton.pequeno { justify-self: start; padding: 8px 14px; font-size: 13px; }

.diario { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; max-width: 1000px; margin: 0 auto; }
.calendario { padding: 18px; border-radius: var(--radio); background: rgba(20, 18, 16, .85); border: 1px solid var(--linea); width: 100%; max-width: 400px; justify-self: center; }
.calvario-fondo { opacity: .14; }
.cal-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-cabeza b { font: 700 18px var(--titulo); text-transform: capitalize; }
.cal-cabeza button { border: 1px solid var(--linea); background: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.cal-cabeza svg { width: 18px; height: 18px; }
.cal-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-semana span { font-size: 11px; padding-bottom: 4px; }
.dia { position: relative; aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px; background: rgba(255, 248, 235, .03); font: 600 14px var(--titulo); }
.dia:disabled { opacity: .3; cursor: default; }
.dia.leyo { background: var(--verde-suave); border-color: var(--verde-borde); }
.dia.escribio::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--beige); }
.dia.hoy { border-color: var(--beige); }
.dia.elegido { background: var(--beige); color: #15110c; }
.cal-leyenda { display: flex; gap: 14px; justify-content: center; font-size: 12px; margin-top: 12px; }
.cal-leyenda .punto { margin-right: 2px; }
.entrada { padding: 20px 22px; border-radius: var(--radio); background: rgba(20, 18, 16, .85); border: 1px solid var(--linea); display: grid; gap: 14px; }
.entrada h3 { font-size: 22px; }
.entrada label { display: grid; gap: 6px; font: 600 13px var(--titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--beige); }
.entrada .marcados { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.notas-dia { display: grid; gap: 8px; }
.nota-dia { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea); }
.nota-dia .ref { font: 700 12px var(--ui); padding: 3px 8px; border-radius: 8px; background: var(--beige); color: #15110c; }
.nota-dia p { font: 400 16px/1.5 var(--serif); }
.nota-dia button { border: 0; background: none; width: 30px; height: 30px; display: grid; place-items: center; }
.nota-dia button svg { width: 16px; height: 16px; }
.entrada-pie { display: flex; align-items: center; gap: 12px; }
.guardado-ok { color: var(--verde); font-weight: 600; }
.categorias { max-width: 1000px; margin: 0 auto; }

/* ---------- Libros ---------- */
.libros-grid.amplia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.libro-tarjeta { gap: 14px; padding: 24px; }
.libro-tarjeta-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.libro-desc { font: 400 17px/1.6 var(--serif) !important; }
.libro-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ---------- Progreso: pestañas y planes ---------- */
.pestanas.centradas { margin: 26px auto 8px; }
.prog-cuerpo { margin-top: 20px; }
.planes-lista { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.plan { padding: 0; text-align: left; justify-items: stretch; margin: 0; width: 100%; max-width: none; display: block; }
.plan > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
.plan > summary::-webkit-details-marker { display: none; }
.plan-nombre { flex: 1; display: grid; gap: 2px; }
.plan-nombre b { font: 700 19px var(--titulo); }
.plan-nombre small { font-size: 13px; }
.estado-pill { font: 600 12px var(--titulo); letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linea-2); white-space: nowrap; }
.estado-pill.al-dia { background: var(--verde-suave); border-color: var(--verde-borde); color: var(--verde); }
.estado-pill.atrasado { background: var(--rojo-suave); border-color: rgba(200, 40, 30, .6); }
.plan-cuerpo { padding: 0 20px 20px; display: grid; gap: 14px; }
.plan-cuerpo h4 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--beige); }
.plan-cuerpo h4.rojo { color: var(--rojo-2); }
.plan-cuerpo > .boton { justify-self: start; }
.ayuda { font-size: 14px; margin-top: -8px; }
.lecturas { display: grid; gap: 8px; }
.fila-lectura { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--linea); background: rgba(255, 248, 235, .03); }
.fila-lectura .check { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--linea-2); background: none; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.fila-lectura .check svg { width: 18px; height: 18px; opacity: 0; transition: opacity .2s; }
.fila-lectura .check:hover svg { opacity: .5; }
.fila-lectura a { flex: 1; display: grid; text-decoration: none; }
.fila-lectura a b { font-weight: 600; }
.fila-lectura a span { font-size: 13px; }
.fila-lectura.hecho { border-color: var(--verde-borde); background: var(--verde-suave); }
.fila-lectura.hecho .check { background: var(--verde); border-color: var(--verde); color: #0d2414; }
.fila-lectura.hecho .check svg { opacity: 1; }
.enlace-pequeno { justify-self: start; border: 0; background: none; padding: 0; font-size: 13px; text-decoration: underline; opacity: .8; }

/* ---------- Mis apuntes ---------- */
.apuntes-caja { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; max-width: 1040px; margin: 0 auto; }
.dia.escribio { background: rgba(232, 220, 196, .16); border-color: rgba(232, 220, 196, .5); }
.dia.escribio::after { content: none; }
.dia.ambos { background: linear-gradient(135deg, rgba(143, 227, 160, .3) 50%, rgba(232, 220, 196, .3) 50%); border-color: var(--verde-borde); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.muestra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid; }
.muestra.leyo { background: var(--verde-suave); border-color: var(--verde-borde); }
.muestra.escribio { background: rgba(232, 220, 196, .16); border-color: rgba(232, 220, 196, .5); }
.muestra.ambos { background: linear-gradient(135deg, rgba(143, 227, 160, .45) 50%, rgba(232, 220, 196, .45) 50%); border-color: var(--verde-borde); }
.dia-panel { display: grid; gap: 18px; padding: 22px; border-radius: var(--radio); background: rgba(20, 18, 16, .85); border: 1px solid var(--linea); }
.dia-panel h3 { font-size: 24px; }
.dia-panel .etiqueta { display: block; margin-bottom: 8px; }
.chip.verde { border-color: var(--verde-borde); background: var(--verde-suave); text-decoration: none; }
.nuevo-apunte { display: grid; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--linea-2); background: rgba(255, 248, 235, .03); }
.nuevo-apunte .etiqueta { margin-bottom: 0; }
.tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.tipo { cursor: pointer; }
.tipo input { position: absolute; opacity: 0; pointer-events: none; }
.tipo span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea-2); font-weight: 600; font-size: 14px; }
.tipo input:focus-visible + span { outline: 2px solid var(--beige); outline-offset: 2px; }
.tipo.verde input:checked + span { background: var(--verde); border-color: var(--verde); color: #0d2414; }
.tipo.rojo input:checked + span { background: var(--rojo); border-color: var(--rojo); }
.tipo.beige input:checked + span { background: var(--beige); border-color: var(--beige); color: #15110c; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fila-campos label { display: grid; gap: 4px; font: 600 12px var(--titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--beige); }
.fila-campos label[hidden] { display: none; }
.fila-campos select, .fila-campos input, .nuevo-apunte textarea { font: 400 15px/1.4 var(--ui); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--negro); color: var(--blanco); width: 100%; }
.nuevo-apunte textarea { font: 400 16px/1.5 var(--serif); resize: vertical; }
.nuevo-apunte .boton { justify-self: start; }
.lista-apuntes { display: grid; gap: 8px; }
.apunte { display: grid; grid-template-columns: auto auto 1fr auto; align-items: start; gap: 8px 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea); }
.apunte p { grid-column: 1 / -1; font: 400 16.5px/1.55 var(--serif); grid-row: 2; }
.apunte .ref { font: 700 12px var(--ui); padding: 3px 9px; border-radius: 8px; background: var(--beige); color: #15110c; text-decoration: none; }
.apunte button { grid-column: 4; grid-row: 1; border: 0; background: none; width: 28px; height: 28px; display: grid; place-items: center; }
.apunte button svg { width: 16px; height: 16px; }
.tipo-pill { font: 700 11px var(--titulo); letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.tipo-pill.verde { background: var(--verde); color: #0d2414; }
.tipo-pill.rojo { background: var(--rojo); }
.tipo-pill.beige { background: var(--beige); color: #15110c; }
.nota-rapida .tipos { margin: 2px 0; }

/* ---------- Por categoría ---------- */
.categoria-evangelios { max-width: 880px; margin: 0 auto 14px; padding: 20px 22px; display: grid; gap: 12px; }
.cat-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cat-cabeza a { text-decoration: none; }
.cat-cabeza h3 { font-size: 22px; }
.libros-capitulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 880px; margin: 0 auto; }
.libro-caps { padding: 18px 20px; display: grid; gap: 12px; }
.mini-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 5px; }
.mini-caps a { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font: 600 12px var(--titulo); text-decoration: none; border: 1px solid var(--linea); background: rgba(255, 248, 235, .03); }
.mini-caps a:hover { border-color: var(--beige); }
.mini-caps a.leido { background: var(--verde); border-color: var(--verde); color: #0d2414; }

/* ---------- Tableta ---------- */
@media (max-width: 980px) {
  .mapa-libro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa-libro .parada.col-3 { grid-column: 2; }
  .mapa-libro .parada.col-2 { grid-column: 1 / -1; justify-self: center; width: 60%; }
  .diario, .apuntes-caja { grid-template-columns: 1fr; }
  .apuntes-caja .calendario { justify-self: center; }
}

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  .portada-berea { padding-top: 4vh; }
  .caja-versiculo { padding: 20px; }
  .paginador { gap: 6px; }
  .paginador a { padding: 9px 11px; font-size: 13px; }
  .pag-vacio { width: 80px; }
  .apuntes-caja { grid-template-columns: 1fr; }
  .fila-campos { grid-template-columns: 1fr 1fr; }
  .libros-grid.amplia, .libros-capitulos { grid-template-columns: 1fr; }
  .qa p { padding-left: 0; }
  .acordeon .items { grid-template-columns: 1fr; }
  .mapa-libro { grid-template-columns: 1fr; }
  .mapa-libro .parada.col-1, .mapa-libro .parada.col-2, .mapa-libro .parada.col-3 { grid-column: 1; width: auto; justify-self: stretch; }
  .mapa-libro .parada:nth-child(even) { padding-left: 36px; }
  .ruta-videos { grid-template-columns: 1fr; }
  .ruta-videos .parada.izq, .ruta-videos .parada.der { grid-column: 1; }
  .ruta-videos .parada + .parada { margin-top: 26px; }
  .ruta-videos .parada:nth-child(even) { padding-left: 40px; }
  .ruta-videos .parada:nth-child(odd) { padding-right: 40px; }
  .cap-pie { grid-template-columns: 1fr; }
  .visor { width: 100vw; max-height: 100svh; margin: auto 0 0; }
  .visor-caja { max-height: 92svh; border-radius: 22px 22px 0 0; }
  .visor-cuerpo { padding: 18px; }
  .visor-pie { flex-wrap: wrap; }
  .visor-pie #visor-nota { order: 3; width: 100%; justify-content: center; }
  .cifras div { min-width: 0; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
  .brillo { animation: none !important; }
}