/* Berea: inicio en una pantalla, caminos tipo mapa, íconos de preguntas, Mis apuntes por semana y planes.
   Va después de paginas.css. */

/* ---------- Inicio: todo cabe en la primera pantalla ---------- */
.portada-berea { min-height: calc(100vh - 110px); align-content: center; gap: 12px; padding: 2vh 0 24px; }
.titulo-berea { font-size: clamp(84px, 14vw, 178px); margin-bottom: .3em; }

/* Dos cintas de separador que salen por debajo de la B, como en una Biblia */
.cinta-biblia {
  position: absolute; top: 80%; height: .38em; width: .07em; left: 30%; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); transform-origin: 50% 0;
  animation: cinta-cae 1.1s cubic-bezier(.2, .7, .2, 1) .9s both, mecer 5s ease-in-out 2s infinite;
}
.cinta-biblia.roja { background: linear-gradient(90deg, #9e1c14, var(--rojo-2) 50%, #9e1c14); filter: drop-shadow(0 6px 10px rgba(200, 40, 30, .4)); }
.cinta-biblia.beige { left: 44%; height: .3em; background: linear-gradient(90deg, #b8a684, var(--beige) 50%, #b8a684); animation-delay: 1.05s, 2.6s; animation-duration: 1.1s, 6s; }

.portada-berea .frase { font: 500 clamp(20px, 2.3vw, 27px)/1.3 var(--titulo); letter-spacing: -.01em; }
.caja-berea { margin: 6px 0 0; max-width: 680px; padding: 20px 26px; border-radius: 20px; border: 1px solid rgba(232, 220, 196, .3); background: linear-gradient(160deg, rgba(232, 220, 196, .09), rgba(20, 18, 16, .75)); }
.caja-berea p { font: 400 17.5px/1.6 var(--serif); }
.caja-berea cite { display: block; margin-top: 10px; font: 600 11px var(--titulo); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo-2); }
.resalta { color: var(--blanco); background: linear-gradient(transparent 62%, rgba(200, 40, 30, .55) 62%) no-repeat 0 0 / 0% 100%; animation: subrayar 1s cubic-bezier(.2, .7, .2, 1) 1.8s forwards; padding: 0 2px; border-radius: 2px; }
.resalta:nth-of-type(2) { animation-delay: 2.2s; }
@keyframes subrayar { to { background-size: 100% 100%; } }
.meta-berea { max-width: 620px; font: 400 16.5px/1.6 var(--serif); }
.portada-berea .boton { margin-top: 6px; }

/* Texto dentro de las ilustraciones de fondo */
.svg-titulo { font-family: var(--titulo); font-weight: 800; fill: currentColor; stroke: currentColor; }
.svg-cursiva { font-family: var(--serif); font-style: italic; font-weight: 600; fill: currentColor; stroke: none; }

/* ---------- Preparación ---------- */
.qa-icono { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(232, 220, 196, .12); border: 1px solid rgba(232, 220, 196, .3); color: var(--beige); }
.qa-icono svg { width: 19px; height: 19px; }
.qa p { padding-left: 44px; }

/* ---------- Camino tipo mapa (bosquejo y videos) ---------- */
.mapa-bloque { padding: 22px 22px 30px; }
.mapa-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mapa-cabeza h3 { font-size: 24px; }
.mapa-cabeza .leyenda { margin: 0; gap: 14px; }
.mapa-cabeza .leyenda > span { display: inline-flex; align-items: center; gap: 8px; }
.mapa-cabeza .punto { margin: 0; }

.ruta-mapa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 44px; padding: 26px 46px 10px; }
.ruta-mapa .parada { display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; margin: 0 !important; padding: 0 !important; }
.ruta-mapa .nodo { width: 50px; height: 50px; font-size: 17px; border: 0; background: var(--carbon); box-shadow: 0 0 0 3px var(--beige), 0 0 0 9px rgba(10, 9, 8, .9); }
.ruta-mapa .nodo svg { width: 22px; height: 22px; }
.ruta-mapa .discurso .nodo { background: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-2), 0 0 0 9px rgba(10, 9, 8, .9), 0 0 24px rgba(200, 40, 30, .6); }
.ruta-mapa .parada > a { display: grid; gap: 4px; text-decoration: none; padding: 10px 12px; border-radius: 14px; background: rgba(20, 18, 16, .85); max-width: 260px; transition: background .2s; }
.ruta-mapa .parada > a:hover { background: rgba(232, 220, 196, .1); }
.ruta-mapa .rango { font: 700 11px var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--beige); }
.ruta-mapa .discurso .rango { color: var(--rojo-2); }
.ruta-mapa .t { font: 600 16px/1.35 var(--titulo); }
.ruta-sombra { fill: none; stroke: rgba(0, 0, 0, .6); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.ruta-luz { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 2.8s cubic-bezier(.4, .1, .2, 1) .2s forwards; filter: drop-shadow(0 0 8px rgba(226, 64, 47, .45)); }

.ruta-videos { padding-top: 30px; row-gap: 40px; }
.ruta-videos .parada { position: relative; }
.ruta-videos .video { width: 100%; max-width: 340px; }
.ruta-videos .inicio-ruta { top: -24px; }

/* ---------- Capítulo ---------- */
.volver {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 12px; border-radius: 999px; text-decoration: none;
  font: 600 15px var(--titulo); border: 1px solid var(--linea-2); background: rgba(255, 248, 235, .05); transition: background .2s, transform .2s;
}
.volver:hover { background: rgba(255, 248, 235, .12); transform: translateX(-3px); }
.volver svg { width: 20px; height: 20px; }
.cap-cabeza h1 { margin-top: 14px; }
.nota > p > strong:first-of-type, .detalle > p > strong:first-of-type { font-size: 1.07em; }

/* ---------- Mis apuntes: la semana arriba ---------- */
.apuntes-caja { grid-template-columns: 1fr !important; max-width: 860px; gap: 16px; }
.semana-apuntes, .mes-apuntes { padding: 16px 18px; border-radius: var(--radio); background: rgba(20, 18, 16, .85); border: 1px solid var(--linea); display: grid; gap: 12px; }
.semana-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 15px var(--titulo); text-transform: capitalize; }
.semana-cabeza button { border: 1px solid var(--linea); background: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.semana-cabeza button:disabled { opacity: .3; }
.semana-cabeza svg { width: 18px; height: 18px; }
.semana-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia-semana, .dia-mes { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 14px; border: 1px solid var(--linea); background: rgba(255, 248, 235, .03); color: var(--blanco); transition: border-color .2s, background .2s; }
.dia-semana small { font-size: 11px; }
.dia-semana b { font: 800 22px/1.1 var(--titulo); }
.dia-semana:hover:not(:disabled), .dia-mes:hover:not(:disabled) { border-color: var(--linea-2); background: rgba(255, 248, 235, .07); }
.dia-semana:disabled, .dia-mes:disabled { opacity: .3; cursor: default; }
.dia-semana.hoy, .dia-mes.hoy { border-color: var(--beige); }
/* El día elegido se marca con un borde rojo, sin cambiar el color del texto */
.dia-semana.elegido, .dia-mes.elegido { border-color: var(--rojo-2); box-shadow: 0 0 0 2px var(--rojo-2); background: rgba(200, 40, 30, .12); }
.marcas { display: flex; gap: 4px; height: 8px; align-items: center; }
.marcas i, .leyenda-mini i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.m-leyo { background: var(--verde); }
.m-escribio { background: var(--beige); }
.semana-pie { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.leyenda-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.leyenda-mini i + i { margin-left: 8px; }
.mes-semana, .mes-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; text-align: center; }
.mes-semana span { font-size: 11px; }
.dia-mes { font: 700 15px var(--titulo); padding: 8px 2px 6px; }
.mes-apuntes .enlace-pequeno { justify-self: center; }

.dia-cabeza { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.dia-cabeza .boton svg { width: 18px; height: 18px; }
.leido-dia .chip { display: inline-flex; align-items: center; gap: 6px; }
.leido-dia .chip svg { width: 15px; height: 15px; }
.form-pie { display: flex; gap: 8px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 248, 235, .04); border: 1px solid var(--linea); width: fit-content; }
.filtros button { border: 0; background: none; padding: 8px 14px; border-radius: 999px; font: 600 14px var(--titulo); display: inline-flex; gap: 6px; align-items: center; }
.filtros button small { font-size: 11px; opacity: .8; }
.filtros button[aria-selected="true"] { background: var(--blanco); color: #15110c; }
.filtros button.verde[aria-selected="true"] { background: var(--verde); color: #0d2414; }
.filtros button.rojo[aria-selected="true"] { background: var(--rojo); color: var(--blanco); }
.filtros button.beige[aria-selected="true"] { background: var(--beige); color: #15110c; }
.apunte { display: grid; gap: 8px; grid-template-columns: 1fr; border-left: 4px solid var(--beige); background: rgba(255, 248, 235, .03); }
.apunte.verde { border-left-color: var(--verde); }
.apunte.rojo { border-left-color: var(--rojo-2); }
.apunte-cabeza { display: flex; align-items: center; gap: 8px; }
.apunte-cabeza button { margin-left: auto; border: 0; background: none; width: 28px; height: 28px; display: grid; place-items: center; }
.apunte-cabeza button svg { width: 16px; height: 16px; }
.apunte p { grid-column: auto; grid-row: auto; }
.vacio-apuntes { padding: 18px; text-align: center; border-radius: 14px; border: 1px dashed var(--linea-2); font-size: 15px; }

/* ---------- Planes ---------- */
.plan-todo > summary { cursor: pointer; color: var(--beige); font-weight: 600; }
.lista-todo { display: grid; gap: 6px; margin-top: 10px; max-height: 360px; overflow-y: auto; padding-right: 6px; }
.dia-todo { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linea); }
.dia-todo.completo { border-color: var(--verde-borde); background: var(--verde-suave); }
.dia-todo.hoy { border-color: var(--beige); }
.dia-num { display: grid; font: 700 14px var(--titulo); }
.dia-num small { font: 400 12px var(--ui); }
.dia-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.dia-caps a { font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea-2); text-decoration: none; }
.dia-caps a.leido { background: var(--verde); border-color: var(--verde); color: #0d2414; }
.plan-opciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Tableta ---------- */
@media (max-width: 980px) {
  .ruta-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 26px 30px 10px; }
}

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  .portada-berea { min-height: 0; padding-top: 3vh; }
  .caja-berea { padding: 16px 18px; }
  .ruta-mapa { grid-template-columns: 1fr; padding: 20px 0 6px; row-gap: 30px; }
  .ruta-mapa .parada > a { max-width: 100%; }
  .mapa-bloque { padding: 18px 14px 20px; }
  .qa p { padding-left: 0; }
  .semana-dias { gap: 4px; }
  .dia-semana { padding: 8px 2px 6px; }
  .dia-semana b { font-size: 18px; }
  .filtros { width: auto; border-radius: 18px; }
  .dia-todo { grid-template-columns: 1fr; }
}