/* ==========================================================================
   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 .dock-legal { display: none; }
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; }

.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; }
}
.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  flex: none;
}
.brand-name { font-weight: 700; letter-spacing: 0.2px; 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)) 96px 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.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; }
.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; }

/* ---------------------------- 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; }

.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;
}

.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); font-size: 0.8rem; font-family: var(--sans);
  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: 0.9rem;
  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: 0.92rem; }
.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;
}
.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: 5px 4px 4px; color: var(--ink-faint); text-decoration: none;
  font-family: var(--sans); font-size: 0.65rem;
  min-width: 0; min-height: 36px;
}
.tabbar .tab svg { width: 20px; height: 20px; }
.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; }
.dock-legal {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 5px 0; background: var(--surface); border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 0.68rem;
}
.dock-legal a { color: var(--ink-faint); text-decoration: none; }
.dock-legal a:hover { color: var(--ink-soft); text-decoration: underline; }
.dock-legal span { color: var(--ink-faint); }

/* ---------------------------- 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 { display: none; }
  body { background: #fff; }
  .app { padding: 0; }
}

/* ========================= Comunidad ========================= */
/* Presencia en portada */
.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; }
.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: 0.85rem; font-family: var(--sans); line-height: 1.45; }
.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); }

.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); }
.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 {
  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-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-edit-s {
  display: block; border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-family: var(--sans); font-size: 0.72rem;
  padding: 0 0 10px; margin-top: -6px;
}
.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; }

/* --------------------------- 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); }