/* 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\] {
  background-color: var(--liturgical-soft);
}

#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-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-selected { background-color: var(--liturgical-primary); color: var(--liturgical-on-primary); }

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