/* ==========================================================================
   Liturgia de las Horas · Estilos
   Paleta neutra cálida + acento litúrgico del día (cambia por calendario).
   ========================================================================== */

:root {
  --accent: #b8860b;
  --accent-soft: rgba(184, 134, 11, 0.14);
  --accent-ink: #8a6500;
  --bg: #f6f2e9;
  --bg-soft: #efe9dc;
  --surface: #ffffff;
  --surface-2: #faf7f0;
  --line: #e2dccb;
  --ink: #26221a;
  --ink-soft: #6b6455;
  --ink-faint: #978f7d;
  --gold: #b8860b;
  --rub: #b3261e; /* rojo de edición impresa: títulos y citas */
  --radius: 14px;
  --shadow: 0 1px 3px rgba(60, 50, 20, 0.08), 0 6px 24px rgba(60, 50, 20, 0.06);
  --serif: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
}

html[data-theme="dark"] {
  --bg: #17151c;
  --bg-soft: #201d26;
  --surface: #232028;
  --surface-2: #1c1a21;
  --line: #322e39;
  --ink: #ece5d8;
  --ink-soft: #a89f8e;
  --ink-faint: #7e766a;
  --rub: #ea7d70;
  --accent-soft: rgba(216, 166, 54, 0.16);
  --accent-ink: #d8a636;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html { font-size: 16px; }
body { font-size: 1rem; }
html[data-fs="S"]  { font-size: 14px; }
html[data-fs="M"]  { font-size: 16px; }
html[data-fs="L"]  { font-size: 19px; }
html[data-fs="XL"] { font-size: 23px; }

@media (min-width: 720px) {
  html[data-fs="L"]  { font-size: 21px; }
  html[data-fs="XL"] { font-size: 26px; }
}

@media (min-width: 1080px) {
  html[data-fs="XL"] { font-size: 28px; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.6;
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Regla de base: CUALQUIER enlace suelto en cualquier texto, en cualquier
   pantalla, usa el color de acento del tema -claro u oscuro-, nunca el azul
   por defecto del navegador (ilegible sobre fondo oscuro). Los enlaces que
   ya están vestidos de botón, pestaña o tarjeta (.btn, .tab, .hour-card...)
   tienen su propio color con una regla más específica, así que esto no los
   toca. Nunca debe quedar un enlace sin pasar por aquí o por una regla más
   específica: es más fácil de mantener uno para todos que ir cazándolos uno
   a uno cada vez que aparecen en un sitio nuevo. */
a { color: var(--accent-ink); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--surface);
  padding: 8px 14px;
  z-index: 100;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  color: var(--ink);
}
.skip-link:focus { left: 0; }

/* ------------------------------ Top bar ------------------------------- */
/* Modo pantalla completa para rezar: quita la cabecera de arriba (menú,
   buscador, ajustes) y deja el rezo con más sitio. Abajo se queda solo lo
   imprescindible mientras rezas -Scroll, Audio, velocidad-, pero reducido
   a su mínima altura (sin la franja legal ni el nombre de cada pestaña):
   si no, no sería una pantalla completa de verdad. El propio botón de
   pantalla completa, en la barra de la oración, sirve para salir. */
body.reading-fullscreen .topbar { display: none; }
body.reading-fullscreen .app { padding-top: 4px; }
body.reading-fullscreen .prayer-toolbar { top: 0; justify-content: flex-end; padding: 2px 0; margin-bottom: 0; border-bottom: 0; }
body.reading-fullscreen .prayer-toolbar .tt,
body.reading-fullscreen .prayer-toolbar .icon-btn:not(#btn-fullscreen-read) { display: none; }
body.reading-fullscreen .prayer-toolbar #btn-fullscreen-read { width: 30px; height: 30px; }
body.reading-fullscreen .tabbar .tab-label { display: none; }
body.reading-fullscreen .tabbar .tab {
  min-height: 0; padding: 6px 4px; gap: 0;
}
body.reading-fullscreen .tabbar .tab svg { width: 18px; height: 18px; }
body.reading-fullscreen .speed-chip { padding: 3px 8px; font-size: 0.68rem; }
/* Dos modos: edición (normal, con "Personalizar" junto a cada pieza) y
   lectura (pantalla completa, solo el texto para rezar). */
body.reading-fullscreen .piece-tools { display: none; }
body.reading-fullscreen .piece-cb-slot { display: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-left)) 10px
           max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; min-width: 0; }
/* En pantallas estrechas, "Oremus" se quedaba en una "O" suelta -que parece
   un cero- y encima recortaba el nombre de la app a "Liturgia de la…". Mejor
   quitar el subtítulo ahí y dejarle todo el sitio al nombre. */
@media (max-width: 400px) {
  .brand-sub { display: none; }
  .btn-row-hora { flex-wrap: nowrap; gap: 4px; }
  .btn-row-hora .btn {
    flex: 1 1 0; min-width: 0; padding: 8px 4px; gap: 3px;
    font-size: 0.72rem; justify-content: center; white-space: nowrap;
  }
}
.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  flex: none;
}
.brand-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brand-sub { font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 1.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 3; }

.icon-btn {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink); border-radius: 10px; width: 40px; height: 40px;
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.icon-btn:hover { background: var(--bg-soft); }

/* ------------------------------ Drawer -------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.drawer.open { pointer-events: auto; }
.drawer-backdrop {
  position: absolute; inset: 0; background: rgba(20, 16, 8, 0.45);
  opacity: 0; transition: opacity 0.25s ease;
}
.drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw);
  background: var(--surface);
  transform: translateX(-101%); transition: transform 0.28s cubic-bezier(.2,.8,.3,1);
  display: flex; flex-direction: column;
  box-shadow: 8px 0 30px rgba(0,0,0,0.25);
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 14px; border-bottom: 1px solid var(--line);
}
.drawer-nav { list-style: none; margin: 0; padding: 10px; overflow-y: auto; }
.drawer-nav a {
  display: block; padding: 11px 14px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 1rem;
}
.drawer-nav a:hover { background: var(--bg-soft); }

/* ------------------------------- App ---------------------------------- */
.app { padding: 18px max(14px, env(safe-area-inset-left)) 70px max(14px, env(safe-area-inset-right)); }
/* Con el mini reproductor de lectura activo, el bloque fijo es más alto:
   deja sitio de sobra para que no tape el final del texto. */
.view { max-width: 600px; margin: 0 auto; }
.hidden { display: none !important; }

.loading {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 40px 0; color: var(--ink-soft);
}
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------ Hero ---------------------------------- */
.day-hero {
  text-align: center;
  padding: 18px 8px 20px;
  margin-bottom: 18px;
}
.day-hero .date-line { text-transform: uppercase; letter-spacing: 2.2px; font-size: 0.78rem; color: var(--ink-faint); font-family: var(--sans); }
.day-hero h1 { margin: 8px 0 6px; font-size: clamp(1.35rem, 4.4vw, 1.9rem); font-weight: 700; }
.day-hero .season { font-size: 0.95rem; color: var(--ink-soft); }

.rank-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px; padding: 5px 14px; margin-top: 10px;
  font-size: 0.82rem; font-family: var(--sans);
}
.rank-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

.day-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 14px;
}
.day-meta .meta {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 13px; font-size: 0.8rem;
  color: var(--ink-soft); font-family: var(--sans);
}
.day-meta .meta b { color: var(--ink); font-weight: 600; }

.date-nav {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin: 16px 0 4px;
}
.date-nav button {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 9px 14px; cursor: pointer; font-family: var(--sans); font-size: 0.9rem;
}
.date-nav button:hover { border-color: var(--accent); }
.date-nav .date-val, select.date-val {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-family: var(--sans); font-size: 0.9rem;
  color: var(--ink); min-width: 150px; text-align: center;
}

/* ---------------------------- Sections -------------------------------- */
.section-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2.2px; color: var(--ink-faint);
  margin: 26px 0 12px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------- Hour cards ------------------------------ */
.hour-card {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.hour-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.hour-card.recommended { border-left: 4px solid var(--accent); }
.hour-card.recommended .hour-card-head::after { content: "Ahora"; color: var(--accent); font-size: 0.78rem; font-family: var(--sans); font-weight: 600; }
.hour-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px; margin: 2px 0 8px;
}
.hour-card.done { opacity: 0.85; }
.hour-card.oficio-activo-hoy { border-left: 4px solid var(--accent); }
.hour-card .oficio-hoy { color: var(--accent); font-size: 0.78rem; font-family: var(--sans); font-weight: 600; margin-left: 6px; white-space: nowrap; }

/* Calendario de comprobación (sección 9) */
.cal-scroll { overflow-x: auto; }
.cal-comp { border-collapse: collapse; font-family: var(--sans); font-size: 0.8rem; }
.cal-comp th { font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sub, #777); padding: 4px 6px; border-bottom: 1px solid var(--line, #e5e1d8); }
.cal-comp td { padding: 0; text-align: center; }
.cal-comp td.co-dia { padding: 4px 8px; color: var(--sub, #777); min-width: 30px; text-align: right; }
.cal-comp td.co-cal { min-width: 44px; height: 22px; color: #fff; font-weight: 600; border: 2px solid transparent; border-radius: 4px; }
.cal-comp td.co-oficial { color: var(--sub, #777); font-weight: 400; border-color: transparent; }
.cal-comp td.co-propio { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.cal-comp td.co-apartada { border-color: #c07a1b; }
.cal-comp td.co-hoy { outline: 1px outset var(--accent); outline-offset: -1px; font-weight: 700; }
.cal-comp td.co-dia.co-hoy { color: var(--accent); }
.cal-comp .co-ap { font-size: 0.68rem; color: #c07a1b; vertical-align: super; }
.cal-comp td.co-hoy.co-oficial { background: transparent; }
.co-leyenda { font-family: var(--sans); font-size: 0.82rem; line-height: 1.8; }
.co-ley { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 4px 0; white-space: nowrap; }
.co-ley i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.hour-card.done .hour-name { color: var(--accent-ink); }
.hour-card .hour-ant { color: var(--ink-soft); font-size: 0.8rem; }
/* La hora ("Oficio de lectura") y la franja horaria ("a cualquier hora")
   compitiendo por la misma línea estrujaban el título hasta partirlo
   palabra a palabra en tarjetas estrechas. El título ocupa siempre su
   propia línea entera; la franja horaria y el visto van debajo. */
.hour-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.hour-card-head .hour-name { flex: 1 0 100%; }
.hour-card-head .hour-check { margin-left: auto; }
.hour-name { font-weight: 700; font-size: 1.12rem; }
/* Tarjetas con título largo (Mis oficios personalizados, oficios con nombre
   propio): la palabra larga se parte con guion en vez de salirse de la tarjeta,
   y en móvil ocupan la fila entera. */
.hour-card-larga .hour-name { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 540px) { .hour-card-larga { grid-column: 1 / -1; } }
.hour-time { font-size: 0.78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 1.4px; font-family: var(--sans); }
.hour-check { margin-left: auto; color: var(--ink-faint); font-weight: 700; opacity: 0; transition: opacity 0.2s ease; }
.hour-check.done { opacity: 1; color: var(--accent); }
.hour-ant { margin-top: 6px; font-size: 0.9rem; color: var(--ink-soft); font-style: italic; }

/* ----------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 10px 16px; cursor: pointer;
  font-family: var(--sans); font-size: 0.92rem; text-decoration: none;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.btn-block { width: 100%; justify-content: center; padding: 14px 20px; font-size: 1.05rem; }

/* ---------------------------- Prayer view ----------------------------- */
.prayer-toolbar {
  position: sticky; top: 58px; z-index: 20;
  display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 8px 0 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.prayer-toolbar .tt { flex: 1; }
.prayer-toolbar h1 { margin: 0; font-size: 1.15rem; }
.prayer-toolbar .sub { font-size: 0.78rem; color: var(--ink-faint); font-family: var(--sans); }
.prayer-toolbar .icon-btn { width: 36px; height: 36px; }
.prayer-toolbar .tb-export { flex: none; padding: 8px 12px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin: 12px 0;
  box-shadow: var(--shadow);
}

.rubric {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--rub);
  margin: 6px 0 8px;
}
.rubric-inline {
  display: inline-block; font-family: var(--sans); font-size: 0.78rem;
  font-weight: 700; font-style: normal; color: var(--rub);
  margin: 4px 0; letter-spacing: 0.3px;
}
.rubric-note {
  font-family: var(--sans); font-size: 0.78rem; font-style: italic;
  color: var(--rub); margin: 0 0 10px;
}

/* Música de fondo por defecto de toda la app: barra pequeña y fija solo
   cuando la fuente es un enlace de YouTube (un archivo propio suena sin
   mostrar nada, con un <audio> oculto). */
.bg-music-yt-bar {
  position: fixed; right: 10px; bottom: 10px; z-index: 40;
  width: 160px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.25); overflow: hidden;
}
.bg-music-yt-bar iframe { display: block; width: 160px; height: 90px; border: 0; }
.bg-music-yt-bar #btn-bg-music-yt-hide {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; min-height: 0;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 50%;
}

.prayer {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 24px; margin: 4px 0 12px;
  box-shadow: var(--shadow);
}
.prayer .psalm-block { margin: 12px 0 20px; }
.prayer .psalm-block .psalm-ref {
  font-size: 0.82rem; color: var(--rub); font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 4px;
}
.prayer .psalm-block .psalm-title { font-weight: 700; margin-bottom: 6px; }
.prayer .ant {
  font-style: italic; color: var(--ink); margin: 2px 0 10px;
  padding-left: 14px; border-left: 2px solid var(--rub);
}
.prayer .text { white-space: pre-line; color: var(--ink); }
.prayer .text p { margin: 0 0 10px; }
.prayer .gloria {
  margin-top: 10px; color: var(--ink-soft); font-size: 0.95em;
}
.prayer .verse-line { display: block; }
.prayer .vs { font-weight: 700; font-family: var(--sans); font-size: 0.8rem; color: var(--rub); margin-right: 4px; }

/* Salterio en kathismas: títulos de salmo en rojo, como la edición impresa */
.psalm-stanzer { color: var(--rub); font-weight: 700; font-family: var(--sans); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1.1px; margin-bottom: 6px; }
.section-title.psalm-title-h { color: var(--rub); }

.prayer .reading-box {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin: 12px 0;
}
.prayer .reading-box .ref { font-size: 0.8rem; color: var(--rub); font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; margin-bottom: 4px; }
.prayer .reading-box .title { font-weight: 700; color: var(--rub); margin-bottom: 8px; }

.prayer .preces .peticion { margin: 10px 0; }
.prayer .preces .res-hint {
  color: var(--ink-faint);
  display: block; margin-top: 2px;
}

.prayer .responsorios p { margin: 4px 0; }
.prayer .responsorios p:first-child { margin-top: 0; }

.prayer .canticle-final { margin-top: 6px; color: var(--ink-soft); }

/* --------------------------- Mark button ------------------------------ */
.done-bar {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  margin: 18px 0 8px;
  flex-wrap: wrap;
}
.btn.marked { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* ----------------------------- Biblia --------------------------------- */
.bible-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.bible-grid .book {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; text-decoration: none; color: inherit; font-size: 0.95rem;
}
.bible-grid .book:hover { border-color: var(--accent); }
.bible-grid .book small { display: block; color: var(--ink-faint); font-family: var(--sans); font-size: 0.72rem; }
.book-group-title { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; font-size: 0.74rem; color: var(--ink-faint); margin: 18px 0 8px; }

.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px; max-width: 640px; }
.chapters a {
  display: grid; place-items: center; height: 42px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); text-decoration: none;
}
.chapters a:hover { border-color: var(--accent); }

.verse { margin-bottom: 10px; }
.verse-num {
  font-family: var(--sans); font-size: 0.66rem; color: var(--accent-ink);
  font-weight: 700; vertical-align: super; margin-right: 3px;
}
.chapter-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.chapter-head h2 { font-size: 1.15rem; margin: 0; }

.bible-empty {
  background: var(--bg-soft); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 18px;
  color: var(--ink-soft); margin: 14px 0;
}

.note-box {
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px; padding: 13px 15px; font-size: 1rem;
  color: var(--ink); margin: 12px 0;
}

/* ------------------------------ Settings ------------------------------ */
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin: 10px 0;
}
.setting-row .seg { flex: 1 1 100%; justify-content: center; margin-top: 4px; overflow-x: auto; max-width: 100%; }
.setting-row .lbl { font-weight: 600; }
.setting-row .desc { font-size: 0.82rem; color: var(--ink-soft); font-family: var(--sans); }

/* Switch */
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .sl {
  position: absolute; inset: 0; cursor: pointer; background: var(--line);
  border-radius: 999px; transition: 0.2s;
}
.switch .sl::before {
  content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: 0.2s;
}
.switch input:checked + .sl { background: var(--accent); }
.switch input:checked + .sl::before { transform: translateX(20px); }

.seg { display: inline-flex; flex-wrap: wrap; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; }
.seg button {
  border: 0; background: transparent; padding: 9px 12px; cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft);
  flex: 1 1 auto; min-width: 0; white-space: nowrap; text-align: center;
}
.seg button.active { background: var(--accent); color: #fff; font-weight: 600; }

/* Selector de "Opción" en una hora con más de un texto posible (p. ej. una
   fiesta que coincide con la feria): la etiqueta puede ser el nombre real
   de la celebración, mucho más largo que una palabra suelta -que no
   desborde el globo ni se corte-. */
.option-bar-2 { align-items: flex-start; }
.option-bar-2 .seg { max-width: 100%; }
.option-bar-2 .seg button { white-space: normal; word-break: break-word; line-height: 1.25; padding: 8px 10px; }

/* ------------------------------ Acerca -------------------------------- */
.legal h3 { margin-bottom: 4px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 1.02rem; }
.legal code { background: var(--bg-soft); padding: 1px 6px; border-radius: 6px; font-size: 0.85em; }
.legal a { color: var(--accent-ink); }

/* ------------------------------ Tabbar -------------------------------- */
/* Pestañas de navegación y "mini reproductor" de lectura apilados en un
   único bloque fijo (como el mini-player de Spotify/Podcasts sobre su
   barra de pestañas): cada fila tiene su propio sitio, nunca se amontonan. */
.bottom-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column;
}
.dock-voice-wrap {
  position: relative; flex: none; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 2px;
}
.dock-voice-icon { color: var(--ink-faint); pointer-events: none; }
.dock-voice-select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; cursor: pointer;
}
.tabbar {
  display: flex; align-items: center; background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px 5px; color: var(--ink-faint); text-decoration: none;
  font-family: var(--sans); font-size: 0.78rem;
  min-width: 0; min-height: 40px;
}
.tabbar .tab svg { width: 23px; height: 23px; }
.tabbar .tab.active { color: var(--accent-ink); }
.tabbar .tab.active::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  background: var(--accent); border-radius: 0 0 3px 3px;
}
.tabbar .tab { position: relative; }
/* Pie de cada página (NO fijo: va en el flujo normal, después del
   contenido de #view, para que se lea al llegar al final de la página;
   la franja fija de abajo es solo para las pestañas de navegación). */
.page-footer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 16px 8px;
  font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft);
}
.page-footer-row { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; text-align: center; }
.page-footer a { color: var(--ink-faint); text-decoration: underline; }
.page-footer a:hover { color: var(--ink-soft); }

/* ---------------------------- Responsive ------------------------------ */
@media (min-width: 760px) {
  .drawer-panel { width: 340px; }
  .app { padding-top: 26px; }
}

@media print {
  .topbar, .drawer, .bottom-dock, .prayer-toolbar .icon-btn, .date-nav, .done-bar,
  .loading, .welcome, .no-cookies, .chorus-banner, .install-banner, .propio-pais,
  .btn-row, .piece-tools, .ref-actions, .note-s, .note-box-edit, .day-meta,
  .rank-chip, #intentions-slot, .now-others, .ct-modal, .hour-video-wrap, #hour-video-manage,
  .hour-music-el, #hour-music-manage, .video-player-top {
    display: none !important;
  }
  body, .app, .view { background: #fff !important; color: #000 !important; }
  .app { padding: 0; }
  .prayer, .psalm-block, .reading-box { break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* ========================= Comunidad ========================= */
/* Presencia en portada */
.not-today-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--rub) 16%, var(--surface)); border: 1px solid var(--rub);
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink);
}
.chorus-banner {
  margin: 16px 0 4px; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; background: var(--surface);
}
.chorus-banner a {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  color: var(--ink); text-decoration: none; font-family: var(--sans);
}
.chorus-banner .cb-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.chorus-banner .cb-sub { color: var(--ink-soft); font-size: 0.8rem; }
.chorus-banner .cb-dismiss {
  display: block; width: 100%; background: none; border: none;
  border-top: 1px solid var(--line); padding: 7px; margin: 0;
  font-family: var(--sans); font-size: 0.72rem; color: var(--ink-faint);
  text-align: center; cursor: pointer;
}
.chorus-banner .cb-dismiss:hover { color: var(--ink-soft); background: var(--bg-soft); }
.geo-note .btn-row { margin-top: 10px; }

.prayed-banner {
  margin: 14px 0 4px; padding: 12px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  font-size: 0.95rem;
}

/* Peticiones */
.intentions .int-sub { color: var(--ink-soft); font-size: 0.85rem; font-family: var(--sans); margin: 6px 0 14px; }
#int-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
#int-text {
  width: 100%; min-height: 76px; resize: vertical; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface2);
  color: var(--ink); font: inherit; font-size: 0.95rem;
}
#int-hint { color: var(--accent-ink); font-family: var(--sans); font-size: 0.85rem; }
.int-empty { color: var(--ink-faint); font-style: italic; }
.int-item { border-top: 1px solid var(--line); padding: 12px 2px; }
.int-item .int-text { margin: 0 0 8px; font-size: 0.98rem; }
.int-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.int-count { color: var(--ink-soft); font-family: var(--sans); font-size: 0.8rem; }
.int-report { background: none; border: none; color: var(--ink-faint); font-family: var(--sans); font-size: 0.7rem; text-decoration: underline; cursor: pointer; }
.int-report:disabled { opacity: .5; }
.btn.small { padding: 6px 10px; font-size: 0.8rem; }
.int-mine { margin-bottom: 10px; }

/* Comunidad general */
.comm-sub { color: var(--ink-soft); font-size: 1rem; font-family: var(--sans); line-height: 1.5; }
.comm-tabs { margin-bottom: 16px; }
.comm-map { height: 340px; border-radius: 14px; overflow: hidden; z-index: 1; }
.comm-map .leaflet-container { background: #dbe7ef; }
.chorus-card .chorus-big { font-size: 1.2rem; font-family: var(--sans); margin-bottom: 8px; }
.chorus-card .chorus-big b { color: var(--accent-ink); font-size: 1.5rem; }
.chorus-hours { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--line);
  font-family: var(--sans); font-size: 0.78rem; color: var(--ink);
}
.chip.dim { color: var(--ink-faint); }
.comm-rt { text-align: center; color: var(--ink-faint); font-family: var(--sans); font-size: 0.75rem; margin-top: 8px; }

.col-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.col-form input { padding: 10px 12px; }

/* Coros */
.choir-card { margin-bottom: 14px; }
.choir-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.choir-members { margin: 4px 0 10px; }
.choir-member {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-top: 1px dashed var(--line); flex-wrap: wrap;
}
.choir-member b { font-family: var(--sans); font-size: 0.9rem; min-width: 90px; }
.hstrip { display: flex; gap: 4px; margin-left: 6px; }
.hslot {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; color: var(--ink-faint);
  border: 1px solid var(--line);
}
.hslot.done { color: var(--accent-ink); border-color: var(--accent); }
.hslot.now {
  border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 8px var(--accent); animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 2px var(--accent); } }
.choir-now { color: var(--accent-ink); font-family: var(--sans); font-size: 0.75rem; }
.choir-legend { color: var(--ink-faint); font-family: var(--sans); font-size: 0.7rem; margin-top: 6px; }

.offline-msg { color: var(--ink-soft); font-style: italic; }

/* ─────────── Portada: “Ahora rezamos juntos” ─────────── */
.home-hero {
  text-align: center;
  padding: 28px 16px 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 18px;
}
.home-hero .celebration {
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px;
}
.home-hero .now-label {
  font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px;
}
.home-hero .hero-hour {
  font-family: var(--serif); font-size: clamp(1.7rem, 8vw, 2.6rem); line-height: 1.1;
  margin: 4px 0 6px; color: var(--ink); overflow-wrap: break-word;
}
.home-hero .date-line { color: var(--ink-soft); font-family: var(--sans); }
.hero-done { margin-top: 12px; color: var(--accent-ink); font-family: var(--sans); font-size: 0.85rem; }
.rezar-btn {
  display: block; width: min(100%, 320px); margin: 18px auto 0;
  padding: 16px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.18em;
  text-align: center; text-decoration: none; box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 45%, transparent);
}
.rezar-btn:active { transform: scale(0.98); }

.now-praying {
  margin: 16px 0 4px; padding: 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  text-align: center;
}
.np-count { font-family: var(--sans); display: flex; flex-direction: column; }
#np-total { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--accent-ink); }
#np-label { color: var(--ink-soft); font-size: 0.9rem; margin-top: 4px; }
.np-countries { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.np-country {
  padding: 5px 11px; border-radius: 999px; background: var(--surface2);
  border: 1px solid var(--line); font-family: var(--sans); font-size: 0.82rem;
}
.np-solo {
  margin-top: 10px; color: var(--accent-ink); font-family: var(--serif);
  font-style: italic; font-size: 1.05rem;
}

.hour-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; }
.hour-chip {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: var(--surface2); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--sans); font-size: 0.85rem;
}
.hour-chip.recommended { border-color: var(--accent); color: var(--accent-ink); }
.hour-chip.done { color: var(--ink-faint); }
.hour-chip:active { transform: scale(0.97); }

/* Reza con alguien (franja dentro de la hora) */
.now-others {
  margin: 14px 0 4px; padding: 12px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  font-family: var(--sans); font-size: 0.88rem; text-align: center;
}
.now-others a { color: var(--accent-ink); }

/* Avisos (toasts) */
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px); z-index: 90;
  max-width: min(92vw, 480px); padding: 13px 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--ink); font-family: var(--sans); font-size: 0.9rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Banner único de privacidad: sin cookies */
.no-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  font-family: var(--sans); font-size: 0.86rem; color: var(--ink);
}
.no-cookies p { margin: 0; flex: 1 1 240px; line-height: 1.45; }
.no-cookies a { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }
.no-cookies button {
  border: none; cursor: pointer; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700;
  font-family: var(--sans); font-size: 0.86rem; padding: 8px 18px;
}
.no-cookies button:hover { filter: brightness(1.06); }
.no-cookies .nci-link {
  background: none; border: none; cursor: pointer;
  color: var(--accent-ink); font-weight: 600; font-size: 0.86rem;
  padding: 0; font-family: var(--sans);
}
.no-cookies-info {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 12, 22, 0.55);
}
.nci-card {
  position: relative; max-width: 440px; width: 100%; max-height: 82vh; overflow: auto;
  padding: 24px 26px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.55;
}
.nci-card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.2rem; }
.nci-card p { margin: 8px 0; }
.nci-card .nci-close {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--ink-soft); padding: 6px 10px;
}
.nci-card .nci-close:hover { color: var(--ink); }
.nci-card .nci-more { font-size: 0.84rem; }
.nci-card .nci-more a { color: var(--accent-ink); font-weight: 600; }
.nci-ok {
  margin-top: 14px; width: 100%; padding: 10px; cursor: pointer;
  border: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700;
  font-family: var(--sans); font-size: 0.9rem;
}
.nci-ok:hover { filter: brightness(1.06); }

/* Velocidad del scroll automático: insignia pequeña sobre el propio botón
   "Scroll" del pie (antes era una fila aparte encima de las pestañas),
   solo visible en pantallas de lectura. Toca la insignia para cambiar la
   velocidad; toca el resto del botón para arrancar o parar el scroll. */
/* Velocidad del scroll: su propio botón en la misma fila, al lado de
   "Scroll" -no encima, no en un menú, no en Ajustes-, con la palabra
   completa. Discreto: solo texto, sin fondo llamativo. */
.speed-chip {
  flex: none; align-self: center;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  border-radius: 8px; padding: 5px 10px; margin: 0 2px;
  font-family: var(--sans); font-size: 0.72rem; color: var(--ink-soft);
  white-space: nowrap;
}
.speed-chip:hover { border-color: var(--accent); color: var(--ink); }
.as-badge.hidden { display: none; }

/* Scroll y Audio: botones de acción fijos en el pie (no navegan; activan o
   paran el scroll automático / la lectura en voz alta de la pantalla
   actual). Mismo aspecto que las pestañas de navegación. */
.tab-action {
  background: none; border: none; font: inherit; margin: 0; cursor: pointer;
}
.tab-action.on { color: var(--accent-ink); }
.tab-action.on::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  background: var(--accent); border-radius: 0 0 3px 3px;
}

@media print {
  .toast, .now-others { display: none !important; }
}

/* --------------------- Mis salmos y rezos personalizados --------------------- */
.fav-s {
  float: right;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 1.05rem; line-height: 1;
  padding: 2px 4px; margin-left: 8px; vertical-align: middle;
}
.fav-s:hover { color: var(--accent); }
.fav-s.on { color: var(--accent); }

.note-s {
  float: right;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 0.92rem; line-height: 1;
  padding: 2px 4px; margin-left: 4px; vertical-align: middle;
}
.note-s:hover { color: var(--accent); }
.note-s.on { color: var(--accent-ink); }

.cb-del {
  float: right;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 0.8rem; line-height: 1;
  padding: 2px 4px; margin-left: 4px; vertical-align: middle;
}
.cb-del:hover { color: var(--danger, #c0392b); }

.audio-s {
  float: right;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 0.92rem; line-height: 1;
  padding: 2px 4px; margin-left: 4px; vertical-align: middle;
}
.audio-s:hover { color: var(--accent); }
.audio-s.on { color: var(--accent-ink); }
.video-s.on { color: var(--accent-ink); }
.score-s {
  float: right;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 0.92rem; line-height: 1;
  padding: 2px 4px; margin-left: 4px; vertical-align: middle;
}
.score-s:hover { color: var(--accent); }
.score-s.on { color: var(--accent-ink); }

/* Menú "más opciones" del salmo: favorito, audio y partitura ya no van
   sueltos uno junto a otro -se amontonaban en pantallas estrechas-, sino
   agrupados bajo un único botón "⋮" que despliega la lista. */
.ref-actions { float: right; position: relative; margin-left: 8px; }
.ref-actions-toggle {
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 1.2rem; line-height: 1;
  padding: 2px 6px; vertical-align: middle;
}
.ref-actions-toggle:hover { color: var(--accent); }
.ref-actions-menu {
  position: absolute; right: 0; top: 100%; z-index: 20; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  padding: 4px; min-width: 210px; display: flex; flex-direction: column;
}
.ref-actions-menu.hidden { display: none; }
.ref-action-item {
  float: none; display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; margin: 0; padding: 9px 10px;
  border-radius: 7px; font-size: 0.92rem;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.ref-action-item:hover { background: var(--bg-soft); }
.ref-action-item.on { color: var(--accent-ink); }
.ref-action-label { font-family: var(--sans); color: var(--ink); }

/* Editor de pentagrama (alternativa a escribir la melodía en texto) */
.staff-editor { margin-top: 10px; }
.staff-dur-row { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.staff-dur-btn {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  border-radius: 8px; padding: 3px 6px; color: var(--ink);
}
.staff-dur-btn.active { border-color: var(--accent); background: var(--accent-soft); }
.staff-dur-icon { width: 22px; height: 34px; display: block; }
.staff-rest-btn { font-size: 1.3rem; line-height: 1; width: 34px; height: 40px; }
.staff-svg-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.staff-svg { width: 100%; min-width: 400px; height: 140px; display: block; }
.staff-line, .staff-line-thin { stroke: var(--ink-faint); stroke-width: 1; }
.staff-head-filled { fill: var(--ink); stroke: none; }
.staff-head-open { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.staff-stem { stroke: var(--ink); stroke-width: 1.3; }
.staff-flag { stroke: var(--ink); stroke-width: 1.3; fill: none; }
.staff-rest { fill: var(--ink); }
.staff-rest-label { font-family: var(--sans); font-size: 9px; fill: var(--ink-soft); }

/* Modo coro: pantalla completa, texto grande para leer de un vistazo
   cantando en grupo. Esta hoja se había perdido por completo -el overlay
   se creaba en el DOM pero sin ningún estilo, así que no se veía ni hacía
   nada visible al pulsar el botón-. */
.modo-coro-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
.modo-coro-top {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  flex: none;
}
.modo-coro-nombre { font-family: var(--sans); font-weight: 700; flex: 1; text-align: center; }
.modo-coro-contador { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); min-width: 3.5em; text-align: right; }
.modo-coro-titulo {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--rub);
  text-transform: uppercase; letter-spacing: 1.2px;
  padding: 14px 20px 0;
}
.modo-coro-cuerpo {
  flex: 1; overflow-y: auto; padding: 16px 20px 24px;
  font-family: var(--serif); font-size: 1.55rem; line-height: 1.55;
}
.modo-coro-nav {
  display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line);
  flex: none;
}
.modo-coro-nav .btn { flex: 1; padding: 14px; font-size: 1rem; }
.modo-coro-nav .btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 480px) { .modo-coro-cuerpo { font-size: 1.3rem; } }
.score-item { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.score-item:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.score-item-label { font-family: var(--sans); font-size: 0.88rem; }
.audio-player { margin-top: 4px; }
.audio-player-top { display: block; width: 100%; margin: 6px 0 10px; }
.note-box-edit {
  margin: 8px 0; padding: 10px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 10px;
}
.note-box-edit textarea {
  width: 100%; min-height: 130px; resize: vertical;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink);
  background: var(--surface); box-sizing: border-box;
}
.note-box-edit .btn-row { margin: 8px 0 0; }

/* Ventana emergente para "Personalizar" una pieza de la hora oficial:
   a diferencia de la caja de notas (corta, empotrada), aquí puede haber
   un salmo o una lectura enteros, así que necesita más sitio y no debe
   descolocar el resto de la página. */
.ct-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 12, 22, 0.55);
}
.ct-modal-card {
  position: relative;
  width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  padding: 20px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  box-sizing: border-box;
}
.ct-modal-x {
  position: sticky; float: right; top: 0; margin: -8px -8px 0 8px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--surface); color: var(--ink-soft);
  font-size: 1rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow);
}
.ct-modal-x:hover { color: var(--danger, #c0392b); }
.ct-modal-card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.15rem; }
.ct-modal-card textarea {
  width: 100%; min-height: min(50vh, 360px); resize: vertical;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: var(--bg-soft); box-sizing: border-box;
}
.ct-modal-card .btn-row { margin: 12px 0 0; }

/* --------------- Personalizar piezas sueltas (Nivel 1) --------------- */
.piece-tools { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: -6px; padding-bottom: 10px; }
.piece-cb-slot:empty { display: none; }
.piece-cb-slot:not(:empty) { margin: 0 0 12px; }
.piece-edit-s {
  display: inline-block; border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-family: var(--sans); font-size: 0.72rem;
  padding: 0; margin: 0;
}
.piece-edit-s:hover { color: var(--accent); }
.prayer .ant.custom-edited { border-left-color: var(--accent); }
.prayer .preces.custom-edited,
.prayer .responsorios.custom-edited,
.prayer .text.custom-edited { border-left: 2px solid var(--accent); padding-left: 10px; }
.prayer .preces.custom-edited,
.prayer .responsorios.custom-edited { white-space: pre-line; }

/* --------------- Oficios personalizados (Niveles 2 y 3) --------------- */
.input-line {
  width: 100%; margin-top: 4px; padding: 8px; box-sizing: border-box;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-family: var(--sans);
}
.oficio-pieza textarea { width: 100%; min-height: 140px; resize: vertical; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-family: var(--sans); font-size: 0.9rem; color: var(--ink); background: var(--surface); }

.vline { cursor: pointer; border-radius: 3px; }
.vline:hover { background: var(--accent-soft); }
.vline.underlined { text-decoration: underline; text-decoration-color: var(--rub); text-decoration-thickness: 2px; }
.fav-s-inline {
  color: var(--accent); font-size: 1.05rem;
  background: var(--accent-soft); padding: 1px 5px; border-radius: 6px;
}
.personal-pick-group { margin: 10px 0; }
.personal-pick-group .pick { display: block; margin: 3px 0; }
.section-sub {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  color: var(--ink-soft); margin: 8px 0 6px;
}
.personal-title { font-weight: 700; margin: 2px 0 10px; }
.field-label {
  display: block; font-family: var(--sans); font-size: 0.8rem;
  color: var(--ink-soft); margin: 10px 0 4px;
}
.input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink); font-size: 0.95rem;
}
.input:focus { outline: none; border-color: var(--accent); }

/* --------------------------- Rezo en latín --------------------------- */
.lat-head { display: flex; align-items: flex-start; gap: 10px; }
.lat-head .psalm-ref { flex: 1; margin-top: 4px; }
.lat-play {
  border: none; background: var(--accent); color: #fff;
  min-width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  font-size: 0.9rem; flex: none;
}
.lat-row {
  display: flex; gap: 12px; margin: 8px 0;
  align-items: baseline;
}
.lat-la {
  flex: 1 1 50%; font-style: italic; color: var(--ink);
}
.lat-es {
  flex: 1 1 50%; color: var(--ink-soft);
  border-left: 2px solid var(--accent-soft); padding-left: 12px;
}
.lat-block .lat-row { margin: 8px 0; }
@media (pointer: coarse) {
  .lat-row { flex-direction: column; gap: 1px; }
  .lat-es { border-left: none; padding-left: 0; padding-top: 10px; }
}

/* ---------------------------- Oficio Divino ---------------------------- */
.vresp { margin: 4px 0; }
.orth-oracion {
  margin: 12px 0; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 12px;
}

/* ------------------------ Rezos del día (ePrex) ------------------------ */
.saints-box {
  margin: 14px 0 4px;
}
.saints-line {
  font-size: 0.95rem; color: var(--ink);
  display: flex; align-items: baseline; gap: 2px;
}
.saints-line b { color: var(--accent-ink); }

.rezo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 4px 0 6px;
}
.rezo-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: 12px;
  text-decoration: none; color: var(--ink);
  transition: transform .12s ease, border-color .12s ease;
}
.rezo-card:hover { transform: translateY(-1px); border-color: var(--accent); }
.rezo-card.done { opacity: .85; }
.rezo-card.done .rezo-titulo { color: var(--accent-ink); }
.rezo-icon { font-size: 1.3rem; line-height: 1.2; }
.rezo-titulo { font-weight: 600; font-family: var(--serif); }
.rezo-sub { font-size: 0.78rem; color: var(--ink-soft); }

.orac-list { display: flex; flex-direction: column; gap: 8px; }
.orac-item {
  padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px;
  text-decoration: none; color: var(--ink);
}
.orac-item:hover { border-color: var(--accent); }
.orac-item.done .orac-titulo { color: var(--accent-ink); }
.orac-titulo { font-weight: 600; font-family: var(--serif); }
.orac-fuente { font-size: 0.78rem; color: var(--ink-soft); }

.mystery-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin: 4px 0 6px;
}
.mystery-card {
  padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: 12px;
  text-decoration: none; color: var(--ink);
}
.mystery-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.mystery-card.hoy { border-top: 4px solid var(--accent); background: var(--accent-soft); }
.mystery-card.done .mystery-chip { color: var(--accent-ink); }
.mystery-card ol { margin: 8px 0 4px; padding-left: 18px; font-size: 0.85rem; }
.mystery-chip {
  display: inline-block; font-weight: 700; font-family: var(--sans);
  text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem;
  color: var(--accent-ink);
}
.mystery-done { margin-top: 6px; color: var(--accent-ink); font-size: 0.82rem; }

.beads {
  display: flex; justify-content: space-between; gap: 6px;
  margin: 10px 0 6px;
}
.bead {
  flex: 1; max-width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line);
}
.bead.done { background: var(--accent); border-color: var(--accent); }
.bead.active {
  background: var(--accent-soft); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mystery-step { text-align: center; }
.mystery-title { font-family: var(--serif); margin: 6px 0 2px; }
.mystery-fruto { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 8px; }
.ros-intro { text-align: center; }
.ros-nav { margin-top: 18px; }
.ros-done { text-align: center; }
.prayer.rosario p { text-align: left; font-size: 1.1rem; line-height: 1.5; }

/* --------------------------- Tutorial (#tutorial) --------------------------- */
.tut-ui {
  font-family: var(--sans); font-weight: 600; font-size: 0.82em;
  background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.06em 0.5em; white-space: nowrap;
}
.tut-keys { display: grid; gap: 12px; margin: 14px 0 24px; }
.tut-key { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.tut-key-n {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 700;
  color: var(--accent-ink); line-height: 1;
}
.tut-key h3 { margin: 0 0 6px; font-size: 1.05rem; }
.tut-key p { margin: 0 0 6px; }
.tut-key .note-box { font-size: 0.85rem; }
.tut-key .note-box b { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--accent-ink); margin-right: 4px; }
.tut-key-star { border-color: var(--accent); background: var(--accent-soft); }
.tut-dots { text-align: center; border: 1px dashed var(--line); background: var(--bg-soft); }
.tut-dots-big { font-size: 2.2rem; line-height: 1; margin-bottom: 4px; color: var(--accent-ink); }
.tut-dots p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.tut-nonprofit { text-align: center; }
.tut-timeline { margin: 14px 0 24px; }
.tut-tstep { display: grid; grid-template-columns: 40px 1fr; gap: 14px; position: relative; padding-bottom: 26px; }
.tut-tstep:last-child { padding-bottom: 0; }
.tut-tstep:not(:last-child)::before {
  content: ''; position: absolute; left: 19px; top: 40px; bottom: -6px; width: 2px; background: var(--line);
}
.tut-tdot {
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 700; font-size: 1.1rem;
}
.tut-tstep h3 { margin: 4px 0 6px; font-size: 1.02rem; }
.tut-tstep p { margin: 0 0 8px; font-size: 0.92rem; color: var(--ink-soft); }
.tut-tstep .note-box { font-size: 0.85rem; }
.tut-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 24px; margin: 14px 0 24px; }
.tut-more-item { padding-block: 10px; border-bottom: 1px solid var(--line); }
.tut-more-item h4 { margin: 0 0 3px; font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.02em; }
.tut-more-item p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.tut-where { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint); font-weight: 400; text-align: right; }
details.card summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after { content: "+"; color: var(--accent-ink); font-size: 1.2rem; line-height: 1; margin-left: 6px; }
details.card[open] summary::after { content: "−"; }
.tut-details-body { padding-top: 10px; }
.tut-details-body p { margin: 0 0 10px; color: var(--ink-soft); }
/* Aviso tras la primera grabación: instalar para no perderla */
.safe-sheet {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
}
.safe-sheet-box {
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-width: 520px; width: 100%;
  padding: 20px 20px 8px;
  font-family: var(--sans); font-size: 1rem; line-height: 1.5;
  margin-bottom: env(safe-area-inset-bottom, 0);
}
.safe-sheet-box h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 10px; }
.safe-sheet-box p { margin: 0 0 10px; }
@media (min-width: 700px) { .safe-sheet { align-items: center; } }

/* Bienvenida de la primera visita: los botones Siguiente/Saltar deben
   verse siempre sin necesidad de hacer scroll, y "Salmodiando" no debe
   desbordar en pantallas estrechas o con letra grande del sistema; de
   ahí los clamp() en vez de tamaños fijos, y "safe center" para que, si
   aun así no cupiera entero, se vea el principio (y los botones) en vez
   de recortarse por arriba.
   ============================================================ */
.welcome {
  position: fixed; inset: 0; z-index: 700;
  background: var(--bg); color: var(--ink);
  display: flex; align-items: safe center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.welcome-box { max-width: 520px; width: 100%; text-align: center; font-family: var(--sans); }
.welcome-brand { font-family: var(--serif); font-size: clamp(1.7rem, 8vw, 2.6rem); font-weight: 700; color: var(--accent-ink); letter-spacing: 0.5px; overflow-wrap: break-word; }
.welcome-lead { font-family: var(--serif); font-size: clamp(0.95rem, 3.6vw, 1.15rem); color: var(--ink-soft); margin: 6px 0 clamp(14px, 4vh, 28px); line-height: 1.4; }
.welcome-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 4vh, 22px) 20px; }
.welcome-num { font-size: 0.85rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 8px; }
.welcome-step h2 { font-family: var(--serif); font-size: clamp(1.2rem, 5vw, 1.5rem); margin: 0 0 10px; line-height: 1.25; }
.welcome-step p { font-size: clamp(0.92rem, 3.4vw, 1.05rem); line-height: 1.5; margin: 0; color: var(--ink); }
.welcome-dots { display: flex; gap: 8px; justify-content: center; margin: clamp(10px, 3vh, 18px) 0 4px; }
.welcome-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.welcome-dots span.on { background: var(--accent); }
.welcome-actions { justify-content: center; }
.welcome-actions .btn { font-size: 1.05rem; padding: 12px 22px; }

/* Emojis encima de cualquier texto propio (Personalizar, oraciones,
   bloques, piezas de oficio) */
.emoji-picker { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.emoji-btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
  font-size: 1.15rem; line-height: 1; padding: 5px 7px; cursor: pointer;
}
.emoji-btn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Recordatorios en el calendario */
.ics-rows { display: grid; gap: 8px; }
.ics-row { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 1rem; }
.ics-row span { flex: 1; }
.ics-row input[type="time"] { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); }

/* Aviso de celebraciones propias del país */
.propio-pais { font-family: var(--sans); line-height: 1.5; }
.propio-pais-sub { font-size: .85rem; color: var(--ink-soft); margin-top: 6px; }

/* Vídeo al principio de una hora: pequeño arriba, el texto sigue debajo.
   Cada reproductor (nativo o de YouTube) trae su propio botón de pantalla
   completa en los controles, así que no hace falta uno propio aquí. */
.hour-media-row { display: flex; gap: 8px; }
.hour-media-row > div { flex: 1; min-width: 0; }
.hour-media-row details.card { padding: 12px 8px; }
.hour-media-row details.card summary {
  font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  justify-content: center; gap: 0;
}
.hour-media-row details.card summary::after { content: ""; margin-left: 0; }
.hour-video-wrap { margin: 10px 0; border-radius: var(--radius); overflow: hidden; background: #000; }
.hour-video-el { display: block; width: 100%; height: 200px; border: 0; object-fit: contain; background: #000; }
.hour-music-el { display: block; width: 100%; margin: 10px 0; }
.video-player-top { margin: 8px 0; }

/* Misterios de la vida oculta de Jesús */
.mist-intro{
  font-size:1.1rem;
  line-height:1.5;
}
.mist-titulo{
  font-size:1.2rem;
}
.mist-rubric{
  font-size:0.95rem;
  letter-spacing:1px;
}
.mist-jac{
  font-size:1.35rem;
  line-height:1.6;
  text-align:center;
  margin:.6em 0;
}
.mist-audio-player{width:100%;margin-top:14px}
.mist-icono{
  display:block;
  width:170px;
  height:auto;
  margin:6px auto 18px;
  padding:5px;
  background:#fffdf9;
  border:1px solid rgba(0,0,0,.18);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.mystery-card ol li{margin-bottom:.7em}

/* La Oración de Jesús: cuerda digital */
.oj-contador{ text-align: center; margin: 4px 0 16px; }
.oj-nudo{
  display: block; width: 100%; padding: 26px 16px;
  background: var(--surface); border: 2px solid var(--accent);
  border-radius: var(--radius); cursor: pointer;
}
.oj-nudo #oj-n{ display: block; font-size: 3.4rem; font-weight: 700; line-height: 1; color: var(--accent-ink); }
.oj-nudo small{ display: block; margin-top: 6px; font-size: 1rem; color: var(--ink-soft); }
.oj-largo-lbl{ display: flex; align-items: center; gap: 6px; font-size: 1rem; }
.oj-largo-lbl select{ font-size: 1rem; padding: 4px 6px; }

/* Tutorial ("Todo lo que hace Salmodiando"): una sola regla para todo el
   texto del manual, en vez de ir corrigiendo párrafo a párrafo -antes
   heredaba 0.85rem-0.9rem de .note-box y .comm-sub, diminuto para un
   texto tan largo-. Va después en el archivo a propósito: para ganar el
   empate de especificidad con esas reglas más viejas. */
.tut-page p, .tut-page li, .tut-page .note-box, .tut-page .comm-sub {
  font-size: 1.05rem;
  line-height: 1.55;
}
.tut-page h3 { font-size: 1.2rem; }
.tut-page h4 { font-size: 1.1rem; }