/* App de la congregación */
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.marco { max-width: 560px; margin: 0 auto; padding: 0 18px; }

/* ---------- Encabezado */
.cabeza {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  padding-top: env(safe-area-inset-top);
}
.cabeza .marco { display: flex; align-items: center; gap: 12px; height: 60px; }
.marca-iglesia { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; flex: 1; }
.marca-iglesia img, .marca-iglesia .sello { width: 36px; height: 36px; border-radius: 10px; flex: none; object-fit: cover; }
.marca-iglesia .sello { display: grid; place-items: center; background: var(--marca); }
.marca-iglesia .sello svg { width: 22px; height: 22px; }
.marca-iglesia b { font-size: 17px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boton-icono {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--tinta);
  display: grid; place-items: center; flex: none; text-decoration: none;
}
.boton-icono:hover { background: var(--marca-suave); }
.titulo-vista { font-size: 18px; font-weight: 650; flex: 1; margin: 0; letter-spacing: -.01em; }

/* ---------- Navegación de abajo */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--hoja); border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav ul { list-style: none; margin: 0 auto; padding: 0 6px; max-width: 560px; display: grid; grid-template-columns: repeat(4, 1fr); }
.nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 8px;
  text-decoration: none; color: var(--tinta-3); font-size: 12px; font-weight: 550; position: relative;
}
.nav a[aria-current="page"] { color: var(--marca); }
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--luz);
}
.nav .punto { position: absolute; top: 7px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--luz); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .nav a[aria-current="page"] { color: var(--tinta); } }

/* ---------- Saludo */
.saludo { padding: 8px 0 18px; }
.saludo h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.saludo p { margin: 4px 0 0; color: var(--tinta-2); }

/* ---------- La ventana: devocional de hoy (el cielo cambia con la hora) */
.ventana {
  --cielo-1: #BFD8F2; --cielo-2: #EEF4FB; --texto-cielo: #232226; --texto-cielo-2: rgba(35, 34, 38, .72);
  position: relative; display: block; text-decoration: none; color: var(--texto-cielo);
  border-radius: 999px 999px var(--r-grande) var(--r-grande);
  background: linear-gradient(180deg, var(--cielo-1) 0%, var(--cielo-2) 78%);
  padding: 34% 26px 26px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.ventana::before { /* el marco interior del arco */
  content: ""; position: absolute; inset: 10px; border-radius: 999px 999px 16px 16px;
  border: 1.5px solid currentColor; opacity: .16; pointer-events: none;
}
.ventana .astro {
  position: absolute; left: 50%; top: 16%; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%;
  background: var(--astro, #FFF6E6); box-shadow: 0 0 60px 18px var(--astro-halo, rgba(255, 236, 200, .7)); z-index: -1;
}
.ventana[data-cielo="amanecer"] { --cielo-1: #F7C9A0; --cielo-2: #FBEFE4; --astro: #FFE7C4; --astro-halo: rgba(255, 200, 140, .75); }
.ventana[data-cielo="dia"]      { --cielo-1: #A9CBEF; --cielo-2: #EEF4FB; --astro: #FFFBF0; --astro-halo: rgba(255, 250, 225, .9); }
.ventana[data-cielo="tarde"]    { --cielo-1: #E8936B; --cielo-2: #F6D9C4; --astro: #FFE0B3; --astro-halo: rgba(255, 170, 110, .8); }
.ventana[data-cielo="noche"]    {
  --cielo-1: #121735; --cielo-2: #2C3470; --texto-cielo: #F3F4FB; --texto-cielo-2: rgba(243, 244, 251, .78);
  --astro: #EEF0FF; --astro-halo: rgba(190, 200, 255, .35);
}
.ventana[data-cielo="noche"] .astro { width: 40px; height: 40px; margin-left: -20px; box-shadow: inset -12px -4px 0 0 #C9CEF0, 0 0 40px 10px var(--astro-halo); background: transparent; }
.ventana .cuando { font-size: 14px; color: var(--texto-cielo-2); margin: 0 0 6px; font-weight: 550; }
.ventana h2 { margin: 0; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.ventana .cita { margin: 10px 0 0; font-family: var(--lectura); font-style: italic; font-size: 17px; color: var(--texto-cielo-2); }
.ventana .acciones { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.ventana .btn { background: rgba(255, 255, 255, .78); border-color: transparent; color: #1B2142; }
.ventana .btn-marca { background: var(--texto-cielo); color: var(--cielo-1); }
.ventana[data-cielo="noche"] .btn { background: rgba(255, 255, 255, .12); color: #F3F4FB; }
.ventana[data-cielo="noche"] .btn-marca { background: #F3F4FB; color: #121735; }
.ventana.vacia h2 { font-size: 24px; }

/* ---------- Secciones */
.seccion { margin-top: 32px; }
.seccion > header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.seccion h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.seccion > header a { color: var(--marca); font-weight: 600; font-size: 15px; text-decoration: none; }

/* Tarjeta de invitación (avisos / instalar) */
.invita {
  display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r);
  background: var(--marca-suave); margin-top: 18px;
}
.invita .ico { width: 28px; height: 28px; color: var(--marca); }
.invita div { flex: 1; min-width: 0; }
.invita b { display: block; font-weight: 650; }
.invita span { color: var(--tinta-2); font-size: 14px; }
.invita .cerrar { width: 36px; height: 36px; }

/* ---------- Evento destacado */
.destacado { display: block; text-decoration: none; border-radius: var(--r-grande); overflow: hidden; background: var(--hoja); box-shadow: var(--sombra); }
.destacado .imagen { aspect-ratio: 16 / 9; background: var(--marca-suave); }
.destacado .imagen img { width: 100%; height: 100%; object-fit: cover; }
.destacado .cuerpo { padding: 14px 18px 18px; }
.destacado h3 { margin: 4px 0 0; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.etiqueta { display: inline-block; font-size: 13px; font-weight: 600; color: var(--alerta); background: var(--luz-suave); border-radius: 999px; padding: 2px 10px; }

/* ---------- Lista de eventos */
.lista-ev { list-style: none; margin: 0; padding: 0; }
.lista-ev li + li { border-top: 1px solid var(--linea); }
.fila-ev { display: flex; gap: 14px; align-items: center; padding: 12px 0; text-decoration: none; }
.fila-ev .mini { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; flex: none; background: var(--marca-suave); }
.fila-ev .mini img { width: 100%; height: 100%; object-fit: cover; }
.hoja-cal { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--marca); }
.hoja-cal small { font-size: 12px; font-weight: 650; line-height: 1; }
.hoja-cal strong { font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.fila-ev .info { min-width: 0; flex: 1; }
.fila-ev h3 { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.fila-ev p { margin: 2px 0 0; color: var(--tinta-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grupo-titulo { margin: 24px 0 2px; font-size: 15px; font-weight: 650; color: var(--tinta-2); }

/* Carrusel "esta semana" */
.carril { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none; }
.carril::-webkit-scrollbar { display: none; }
.carril a { scroll-snap-align: start; flex: 0 0 72%; max-width: 300px; text-decoration: none; border-radius: var(--r); background: var(--hoja); overflow: hidden; border: 1px solid var(--linea); }
.carril .imagen { aspect-ratio: 16 / 9; background: var(--marca-suave); }
.carril .imagen img { width: 100%; height: 100%; object-fit: cover; }
.carril .imagen .hoja-cal strong { font-size: 34px; }
.carril .cuerpo { padding: 10px 14px 14px; }
.carril h3 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.25; }
.carril p { margin: 2px 0 0; font-size: 14px; color: var(--tinta-2); }

/* ---------- Filtros y selector */
.selector { display: grid; grid-template-columns: 1fr 1fr; background: var(--marca-suave); border-radius: 999px; padding: 4px; margin: 6px 0 14px; }
.selector button { border: 0; background: transparent; border-radius: 999px; min-height: 40px; font-weight: 600; color: var(--tinta-2); }
.selector button[aria-pressed="true"] { background: var(--hoja); color: var(--tinta); box-shadow: var(--sombra); }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea-2); background: var(--hoja); font-size: 14px; font-weight: 550; }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* ---------- Calendario */
.mes { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; }
.mes h2 { margin: 0; font-size: 20px; font-weight: 700; text-transform: capitalize; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal .dsem { font-size: 12px; color: var(--tinta-3); font-weight: 600; padding: 6px 0; }
.cal button {
  aspect-ratio: 1; border: 0; background: transparent; border-radius: 50%; position: relative;
  font-size: 15px; font-weight: 550; display: grid; place-items: center; max-width: 52px; margin: 0 auto; width: 100%;
}
.cal button.fuera { color: var(--tinta-3); opacity: .5; }
.cal button.hoy { color: var(--marca); font-weight: 750; }
.cal button.con::after { content: ""; position: absolute; bottom: 14%; width: 5px; height: 5px; border-radius: 50%; background: var(--luz); }
.cal button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.cal button[aria-pressed="true"].con::after { background: var(--papel); }
.dia-sel { margin-top: 18px; }

/* ---------- Detalle de evento */
.portada { margin: 0 -18px; aspect-ratio: 16 / 9; background: var(--marca-suave); position: relative; overflow: hidden; }
.portada img { width: 100%; height: 100%; object-fit: cover; }
.portada.sin-imagen { display: grid; place-items: center; aspect-ratio: 16 / 7; }
.portada .hoja-cal strong { font-size: 56px; }
.portada .hoja-cal small { font-size: 16px; }
@media (min-width: 600px) { .portada { margin: 0; border-radius: var(--r-grande); } }
.detalle h1 { font-size: 28px; line-height: 1.12; letter-spacing: -.025em; margin: 20px 0 12px; font-weight: 700; text-wrap: balance; }
.datos { list-style: none; margin: 0 0 18px; padding: 0; }
.datos li { display: flex; gap: 12px; padding: 10px 0; align-items: flex-start; }
.datos li + li { border-top: 1px solid var(--linea); }
.datos .ico { color: var(--marca); margin-top: 1px; }
.datos div { flex: 1; }
.datos small { display: block; color: var(--tinta-2); font-size: 14px; }
.datos a { color: var(--marca); font-weight: 600; text-decoration: none; }
.descripcion { white-space: pre-line; font-size: 17px; line-height: 1.6; margin: 0 0 20px; }
.pila { display: grid; gap: 10px; margin: 8px 0 24px; }

/* ---------- Devocional */
.devo-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.devo-nav span { font-weight: 600; color: var(--tinta-2); font-size: 15px; }
.devo h1 { margin: 6px 0 6px; font-size: clamp(30px, 8.5vw, 40px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.devo .cita { margin: 0 0 22px; font-family: var(--lectura); font-style: italic; font-size: 18px; color: var(--tinta-2); }
.lectura { font-family: var(--lectura); font-size: var(--tam-lectura, 19px); line-height: 1.72; max-width: 36em; }
.lectura p { margin: 0 0 1em; }
.lectura h2, .lectura h3 { font-family: var(--letra); letter-spacing: -.015em; line-height: 1.2; margin: 1.6em 0 .5em; }
.lectura h2 { font-size: 1.2em; } .lectura h3 { font-size: 1.05em; }
.lectura blockquote {
  margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--luz); font-style: italic; color: var(--tinta);
}
.lectura ul, .lectura ol { padding-left: 1.3em; margin: 0 0 1em; }
.lectura a { color: var(--marca); }
.lectura hr { border: 0; text-align: center; margin: 2em 0; }
.lectura hr::after { content: "· · ·"; color: var(--tinta-3); letter-spacing: .4em; }
.herr-lectura { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--linea); }
.tamanos { display: flex; gap: 4px; }

/* Reproductor */
.reproductor {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r); background: var(--hoja); border: 1px solid var(--linea); margin: 0 0 26px;
}
.reproductor .play {
  grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--marca); color: var(--sobre-marca); display: grid; place-items: center;
}
.reproductor .play .ico { width: 26px; height: 26px; }
.reproductor .barra { width: 100%; accent-color: var(--marca); margin: 0; height: 28px; }
.reproductor .controles { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.reproductor .controles button { border: 0; background: transparent; font-weight: 650; font-size: 13px; color: var(--tinta); padding: 4px 6px; border-radius: 8px; display: inline-flex; align-items: center; gap: 2px; }
.reproductor .controles .ico { width: 18px; height: 18px; }
.reproductor .grupo { display: flex; gap: 2px; align-items: center; }

/* Archivo de devocionales */
.archivo li a { display: flex; gap: 14px; align-items: center; padding: 12px 0; text-decoration: none; }
.archivo .fecha-chica { width: 52px; text-align: center; flex: none; }
.archivo .fecha-chica strong { display: block; font-size: 22px; line-height: 1; font-weight: 700; }
.archivo .fecha-chica small { font-size: 12px; color: var(--tinta-2); font-weight: 600; text-transform: capitalize; }

/* ---------- Avisos */
.aviso { display: flex; gap: 12px; padding: 14px 0; text-decoration: none; }
.aviso .circulo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca); flex: none; }
.aviso .circulo .ico { width: 20px; height: 20px; }
.aviso b { display: block; font-weight: 650; line-height: 1.3; }
.aviso p { margin: 2px 0 0; color: var(--tinta-2); font-size: 15px; }
.aviso small { color: var(--tinta-3); font-size: 13px; }
.aviso img { width: 100%; border-radius: 12px; margin-top: 8px; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Ajustes */
.grupo-aj { background: var(--hoja); border-radius: var(--r); border: 1px solid var(--linea); margin: 0 0 18px; }
.grupo-aj > * + * { border-top: 1px solid var(--linea); }
.opcion { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px; text-decoration: none; color: inherit; }
.opcion > .ico:last-child { color: var(--tinta-3); }
.opcion > div { flex: 1; min-width: 0; }
.opcion small { display: block; color: var(--tinta-2); font-size: 14px; }
.opcion select { border: 1px solid var(--linea-2); border-radius: 10px; background: var(--papel); padding: 8px 10px; }
.titulo-grupo { margin: 26px 4px 8px; font-size: 15px; color: var(--tinta-2); font-weight: 650; }
.interruptor { appearance: none; width: 50px; height: 30px; border-radius: 999px; background: var(--linea-2); position: relative; flex: none; transition: background .15s; margin: 0; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.interruptor:checked { background: var(--bien); }
.interruptor:checked::after { transform: translateX(20px); }
.temas { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.nota { color: var(--tinta-2); font-size: 14px; margin: 8px 4px; }

/* ---------- Estados */
.vacio { text-align: center; padding: 40px 12px; color: var(--tinta-2); }
.vacio .ico { width: 40px; height: 40px; color: var(--tinta-3); margin-bottom: 8px; }
.vacio b { display: block; color: var(--tinta); font-size: 18px; margin-bottom: 4px; }
.cargando { height: 120px; border-radius: var(--r); background: linear-gradient(90deg, var(--linea) 0%, var(--hoja) 50%, var(--linea) 100%); background-size: 200% 100%; animation: brillo 1.2s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }
.sin-red { background: var(--alerta-suave); color: var(--alerta); font-size: 14px; padding: 8px 12px; border-radius: 10px; margin: 6px 0 0; }
.toast {
  position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--tinta); color: var(--papel); padding: 12px 18px; border-radius: 12px; z-index: 50;
  font-weight: 550; max-width: calc(100% - 32px); box-shadow: var(--sombra);
}
main { padding-bottom: 24px; }
main:focus { outline: none; }
.vista-entra { animation: entra .22s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Marca LCDMP: fechas en naranja */
.hoja-cal { color: var(--tinta); }
.hoja-cal small { color: var(--luz-texto); }
.fila-ev .mini, .carril .imagen, .destacado .imagen, .portada { background: var(--luz-suave); }
.marca-iglesia img { background: #545454; }

/* ---------- Devocional del pastor */
.serie { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--luz-texto); }
.lectura-dia {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 24px; padding: 12px 14px;
  border-radius: var(--r); background: var(--hoja); border: 1px solid var(--linea); text-decoration: none;
}
.lectura-dia > .ico { color: var(--luz-texto); width: 26px; height: 26px; }
.lectura-dia span { flex: 1; min-width: 0; }
.lectura-dia small { display: block; font-size: 13px; color: var(--tinta-2); }
.lectura-dia b { font-size: 17px; }
.lectura-dia em { font-style: normal; font-size: 13px; font-weight: 650; color: var(--sobre-marca); background: var(--marca); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.lectura sup { font-size: .62em; line-height: 0; color: var(--luz-texto); font-family: var(--letra); font-weight: 650; padding-left: 1px; }
.reflexion { margin: 2em 0 1.2em; padding: 18px 20px; border-radius: var(--r); background: var(--luz-suave); }
.reflexion h2 { margin: 0 0 .4em; font-size: .78em; color: var(--luz-texto); }
.reflexion p { margin: 0 0 .5em; font-style: italic; }
.reflexion p:last-child { margin-bottom: 0; }
.notas { font-family: var(--letra); font-size: 13px !important; line-height: 1.6; color: var(--tinta-3); margin-top: 1.4em; }
.derechos { font-size: 12px; color: var(--tinta-3); text-align: center; margin: 18px 8px 0; line-height: 1.5; }
.protegido { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media print { .devo .lectura, .devo .reproductor { display: none !important; } .devo::after { content: "Este devocional tiene derechos de autor."; } }