/* Tema litúrgico de Lecturas. Los valores de --liturgical-* llegan desde PHP. */
#lecturas-main .bg-\[\#58D08E\],
#liturgia-main .bg-\[\#58D08E\],
#lecturas-mobile-dock .bg-\[\#58D08E\] {
  background-color: var(--liturgical-primary);
}

#lecturas-main .border-\[\#58D08E\],
#liturgia-main .border-\[\#58D08E\] {
  border-color: var(--liturgical-border);
}

#lecturas-main .text-\[\#58D08E\],
#lecturas-main .text-\[\#3FAF72\],
#liturgia-main .text-\[\#58D08E\],
#liturgia-main .text-\[\#1C844B\] {
  color: var(--liturgical-accent);
}

#lecturas-main .bg-\[\#EEFCF5\],
#liturgia-main .bg-\[\#EEFCF5\],
#lecturas-mobile-dock .bg-\[\#EEFCF5\],
#lecturas-main .bg-\[\#EEFDF5\],
#liturgia-main .bg-\[\#EEFDF5\],
#lecturas-mobile-dock .bg-\[\#EEFDF5\] {
  background-color: var(--liturgical-soft);
}

#lecturas-mobile-dock .text-\[\#58D08E\] {
  color: var(--liturgical-accent);
}

#lecturas-mobile-dock .bg-\[\#58D08E\].text-white {
  color: var(--liturgical-on-primary);
}

#lecturas-main .bg-\[\#58D08E\]\/5,
#liturgia-main .bg-\[\#58D08E\]\/5 {
  background-color: var(--liturgical-subtle);
}

#lecturas-main #lecturas-hero,
#liturgia-main #lecturas-hero {
  background-color: var(--liturgical-primary);
}

#lecturas-main #lecturas-hero > span,
#liturgia-main #lecturas-hero > span {
  background: linear-gradient(90deg, var(--liturgical-hero-overlay), var(--liturgical-hero-overlay), var(--liturgical-hero-overlay)), linear-gradient(0deg, rgba(0, 0, 0, .28), transparent);
}

@supports (color: color-mix(in lab, red, red)) {
  #lecturas-main #lecturas-hero > span,
  #liturgia-main #lecturas-hero > span {
    background: linear-gradient(90deg, color-mix(in srgb, var(--liturgical-hero-overlay) 96%, transparent), color-mix(in srgb, var(--liturgical-hero-overlay) 75%, transparent), color-mix(in srgb, var(--liturgical-hero-overlay) 12%, transparent)), linear-gradient(0deg, rgba(0, 0, 0, .28), transparent);
  }
}

.liturgical-soft { background-color: var(--liturgical-soft); }
.liturgical-calendar-nav { background-color: var(--liturgical-primary); }
.liturgical-date {
    background-color: var(--liturgical-primary);
    color: var(--liturgical-on-primary);
}

.liturgical-chip {
  background-color: var(--liturgical-subtle);
  border-color: var(--liturgical-border);
  color: var(--liturgical-accent);
}
.liturgical-accent { color: var(--liturgical-accent); }
.liturgical-calendar { border-color: var(--liturgical-border); }
.liturgical-calendar-day:hover,
.liturgical-calendar-day:focus-visible { background-color: var(--liturgical-hover); }
.liturgical-calendar .liturgical-calendar-selected { background-color: var(--liturgical-primary); color: var(--liturgical-on-primary); }
.liturgical-calendar-nav path { stroke: var(--liturgical-on-primary); }

[data-component="evangelio-audio"] [data-audio-progress]:not(.hidden),
[data-component="evangelio-audio"] [data-audio-loading]:not(.hidden) {
  display: flex;
}

[data-component="evangelio-audio"] [data-audio-waveform] {
  cursor: pointer;
}

.lecturas-scroll-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}

.lecturas-scroll-reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--lecturas-reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .lecturas-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

[data-component="evangelio-audio"] .bg-\[\#832369\] {
  background-color: var(--liturgical-primary);
}

[data-component="evangelio-audio"] .bg-\[\#F3E1EF\] {
  background-color: var(--liturgical-soft);
}

[data-component="evangelio-audio"] .text-\[\#832369\] {
  color: var(--liturgical-accent);
}

[data-component="evangelio-audio"] .border-\[\#E8D6E3\] {
  border-color: var(--liturgical-border);
}

section[data-component="evangelio-audio"] {
  border-color: var(--liturgical-border);
}

[data-component="evangelio-audio"] .text-white {
  color: var(--liturgical-on-primary);
}

[data-component="evangelio-audio"] {
  box-shadow: 0 8px 30px var(--liturgical-subtle);
}

[data-component="evangelio-audio"] [data-audio-preview] {
  background-color: var(--liturgical-subtle);
  box-shadow: inset -2px 0 5px var(--liturgical-hover);
}

[data-component="evangelio-audio"] [data-audio-toggle]:hover {
  background-color: var(--liturgical-primary);
}

[data-component="evangelio-audio"] [data-audio-seek]:hover,
[data-component="evangelio-audio"] [data-audio-speed-toggle]:hover,
[data-component="evangelio-audio"] [data-audio-speed]:hover,
[data-component="evangelio-audio"] [data-track="evangelio-audio-descargar"]:hover {
  background-color: var(--liturgical-soft);
  color: var(--liturgical-accent);
}

[data-component="evangelio-audio"] :focus-visible {
  outline-color: var(--liturgical-accent);
}

@supports (color: color-mix(in srgb, red, transparent)) {
  [data-component="evangelio-audio"] {
    box-shadow: 0 8px 30px color-mix(in srgb, var(--liturgical-primary) 12%, transparent);
  }

  [data-component="evangelio-audio"] [data-audio-preview] {
    background-color: color-mix(in srgb, var(--liturgical-primary) 7%, transparent);
    box-shadow: inset -2px 0 5px color-mix(in srgb, var(--liturgical-primary) 24%, transparent);
  }

  [data-component="evangelio-audio"] [data-audio-toggle] {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--liturgical-primary) 25%, transparent);
  }

  [data-component="evangelio-audio"] [data-audio-speed-menu] {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--liturgical-primary) 20%, transparent);
  }
}

.liturgical-icon {
  display: block;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.liturgical-icon-calendar { mask-image: url('../images/lecturas/icon-calendar.svg'); }
.liturgical-icon-readings { mask-image: url('../images/lecturas/icon-readings.svg'); }
.liturgical-icon-liturgy { mask-image: url('../images/lecturas/icon-liturgy.svg'); }
.liturgical-icon-on-primary { color: var(--liturgical-on-primary); }
.liturgical-icon-accent { color: var(--liturgical-accent); }

/* Dark mode: la paleta litúrgica sigue llegando dinámica desde PHP.
   Solo se sustituyen las superficies neutrales y la tipografía de Lecturas. */
.dark #lecturas-main,
.dark #liturgia-main {
  /* Igualar el lienzo exterior con la superficie de contenido evita el corte
     oscuro visible a ambos lados en pantallas amplias. */
  background-color: #202020;
  color: #d1d5db;
}

.dark #lecturas-app,
.dark #liturgia-app {
  background-color: #202020;
}

.dark #lecturas-main .bg-white,
.dark #liturgia-main .bg-white,
.dark #lecturas-mobile-dock {
  background-color: #202020;
}

/* La tarjeta de canales de suscripción conserva la superficie clara definida
   en Figma, incluso cuando el resto de Lecturas está en modo oscuro. */
.dark #lecturas-main [data-component="evangelio-diario-subscription"] [data-evangelio-subscription-options] > div > div {
  background-color: #fff;
}

.dark #lecturas-main .border-\[\#F3F4F6\],
.dark #liturgia-main .border-\[\#F3F4F6\],
.dark #lecturas-main .border-\[\#D1D5DB\],
.dark #liturgia-main .border-\[\#D1D5DB\],
.dark #lecturas-mobile-dock,
.dark #lecturas-mobile-dock .border-\[\#F3F4F6\],
.dark #lecturas-mobile-dock .border-\[\#E5E7EB\] {
  border-color: #474d4f;
}

.dark #lecturas-main .bg-\[\#F9FAFB\],
.dark #liturgia-main .bg-\[\#F9FAFB\],
.dark #lecturas-mobile-dock .bg-\[\#F3F4F6\] {
  background-color: #2a2a2a;
}

.dark #lecturas-main .text-\[\#383838\],
.dark #liturgia-main .text-\[\#383838\],
.dark #lecturas-main .text-\[\#1E2939\],
.dark #liturgia-main .text-\[\#1E2939\] {
  color: #f3f4f6;
}

.dark #lecturas-main .text-\[\#334155\],
.dark #lecturas-main .text-\[\#364153\],
.dark #liturgia-main .text-\[\#364153\],
.dark #lecturas-main .text-\[\#667085\],
.dark #lecturas-main .text-\[\#4A5565\],
.dark #liturgia-main .text-\[\#4A5565\],
.dark #lecturas-main .text-\[\#6A7282\],
.dark #liturgia-main .text-\[\#6A7282\] {
  color: #d1d5db;
}

.dark #lecturas-main .text-\[\#98A2B3\],
.dark #lecturas-mobile-dock .text-\[\#98A2B3\] {
  color: #9ca3af;
}

.dark #lecturas-mobile-dock .text-\[\#475467\] {
  color: #c4c9d2;
}

.dark #lecturas-main .prose,
.dark #lecturas-main .prose :where(p, strong, em, li, blockquote, h1, h2, h3, h4),
.dark #liturgia-main article,
.dark #liturgia-main article :where(p, strong, em, li, h1, h2, h3, h4) {
  color: #d1d5db;
}

.dark #lecturas-main .prose :where(h1, h2, h3, h4),
.dark #liturgia-main article :where(h1, h2, h3, h4) {
  color: #f3f4f6;
}

.dark [data-component="evangelio-audio"],
.dark [data-component="evangelio-audio"] [data-audio-speed-menu] {
  background-color: #202020;
}

.dark [data-component="evangelio-audio"] [data-audio-speed-menu] [data-audio-speed] {
  color: var(--liturgical-primary);
}

.dark #audio-title {
  color: #fff;
}

.dark [data-component="evangelio-audio"] [data-audio-seek]:hover {
  background-color: #2a2a2a;
}

.dark [data-component="evangelio-audio"] [data-audio-loading] {
  background-color: rgb(32 32 32 / .92);
}

/* Calendario: las superficies pasan a Dark Mode; el acento siempre conserva
   el tiempo litúrgico que la vista recibió desde PHP. */
.dark .liturgical-calendar {
  background-color: #202020;
  border-color: #474d4f;
  color: #f3f4f6;
  box-shadow: 0 16px 32px rgb(0 0 0 / .45);
}

.dark .liturgical-calendar strong {
  color: #f3f4f6;
}

.dark .liturgical-calendar .text-\[\#667085\] {
  color: #9ca3af;
}

.dark .liturgical-calendar-day {
  color: #f3f4f6;
}

.dark .liturgical-calendar-day:hover,
.dark .liturgical-calendar-day:focus-visible {
  background-color: #2a2a2a;
  box-shadow: 0 0 0 2px var(--liturgical-accent);
}

.dark .liturgical-calendar .liturgical-calendar-selected {
  background-color: var(--liturgical-primary);
  color: var(--liturgical-on-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--liturgical-primary) 34%, transparent);
}

.dark .liturgical-calendar-nav:hover,
.dark .liturgical-calendar-nav:focus-visible {
  background-color: var(--liturgical-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--liturgical-accent) 38%, transparent);
}

/* En móvil, las superficies activas secundarias conservan la identidad
   litúrgica, pero con una presencia más discreta sobre el fondo oscuro. */
@media (max-width: 1279px) {
  .dark #lecturas-app > .xl\:hidden,
  .dark #lecturas-mobile-dock .bg-\[\#EEFDF5\] {
    background-color: color-mix(in srgb, var(--liturgical-primary) 15%, #202020);
  }
}