/* OrdoLaudis — tema inspirado en la identidad visual dominicana/op.org
   Enfoque: alto contraste, negro/blanco, dorado sobrio, grandes encabezados.
*/

:root {
  --black:   #070707;
  --coal:    #151515;
  --ink:     #18120c;
  --ivory:   #f6f1e8;
  --paper:   #fbf8f1;
  --white:   #ffffff;
  --line:    #d8cbb8;
  --gold:    #c9a14a;
  --gold2:   #a77918;
  --muted:   #7d715f;
  --red:     #8b1a1a;
  --shadow:  rgba(0,0,0,0.12);
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--ivory);
}

body {
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(180deg, #ffffff 0%, var(--ivory) 42%, #efe5d3 100%);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

/* Sutil textura de papel, más discreta que en SyntaxLaudis */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(201,161,74,.08), transparent 26rem),
    radial-gradient(circle at 85% 0%, rgba(0,0,0,.05), transparent 22rem),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* HERO / HEADER */
header {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 5rem;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: .62rem clamp(1rem, 5vw, 3.25rem);
  color: var(--white);
  background:
    linear-gradient(112deg, rgba(7,7,7,.98) 0%, rgba(7,7,7,.96) 75%, rgba(247,243,236,.96) 75.2%, rgba(247,243,236,.96) 100%);
  border-bottom: 3px solid var(--gold);
}

header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(201,161,74,.18), transparent 38%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 18rem);
  pointer-events: none;
}

header::after {
  content: '';
  position: absolute;
  right: clamp(.8rem, 4vw, 3.2rem);
  bottom: .42rem;
  color: rgba(7,7,7,.055);
  font-family: var(--font-body);
  font-size: clamp(1.7rem, 5vw, 3.7rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}

.site-label,
.cross-mark,
h1,
.subtitle {
  position: relative;
  z-index: 1;
}

.site-label {
  font-family: var(--font-body);
  font-size: .48rem;
  letter-spacing: .14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: .22rem;
  line-height: 1.05;
}

.cross-mark {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 0 .32rem;
  border: 1px solid rgba(201,161,74,.75);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: .78rem;
  line-height: 1;
  background: rgba(255,255,255,.045);
}

h1 {
  max-width: none;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: .9;
}

.subtitle {
  max-width: 42rem;
  margin-top: .22rem;
  color: rgba(255,255,255,.82);
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(.78rem, 1.15vw, .92rem);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.12;
}

/* LAYOUT */
main {
  position: relative;
  z-index: 1;
  width: min(1060px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0 4rem;
}

/* BOTONES PRINCIPALES */
.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-bottom: 1.35rem;
}

button {
  font: inherit;
}

.mode-tabs button,
.tabs button,
#today {
  font-family: var(--font-body);
  border: 1px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.mode-tabs button {
  min-height: 4.4rem;
  padding: 1rem 1.1rem;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mode-tabs button:hover,
.tabs button:hover,
#today:hover {
  transform: translateY(-1px);
  background: var(--ivory);
}

.mode-tabs button.active,
.tabs button.active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* PANEL DE FECHA */
.section {
  margin-bottom: 1.35rem;
  border: 1px solid var(--black);
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 35px rgba(0,0,0,.06);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  background: var(--black);
  border-bottom: 1px solid var(--black);
  color: var(--white);
}

.section-title {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--white);
  text-transform: uppercase;
}

.controls {
  display: flex;
  gap: .85rem;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 1rem;
}

.date-label {
  display: none;
}

input[type="date"] {
  min-height: 2.85rem;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.04rem;
  outline: none;
}

input[type="date"]:focus {
  box-shadow: 0 0 0 3px rgba(201,161,74,.24);
  border-color: var(--gold);
}

#today {
  min-height: 2.85rem;
  padding: .55rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}




/* HERRAMIENTAS DIARIAS: SANTORAL + GUÍA */
.daily-tools {
  margin-bottom: 1rem;
  overflow: hidden;
}

.tool-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--black);
}

.tool-tab {
  min-height: 3.2rem;
  display: grid;
  align-content: center;
  gap: .14rem;
  border: 0;
  border-right: 1px solid rgba(201,161,74,.45);
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  text-align: left;
  padding: .68rem .85rem;
}

.tool-tab:last-child {
  border-right: 0;
}

.tool-tab:hover,
.tool-tab.active {
  background: rgba(255,255,255,.08);
}

.tool-tab.active {
  box-shadow: inset 0 -3px 0 var(--gold);
}

.tool-summary {
  color: rgba(255,255,255,.72);
  font-family: var(--font-body);
  font-size: .78rem;
  font-style: normal;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-tab.active .tool-summary::after {
  content: ' ▾';
  color: var(--gold);
  font-style: normal;
}

.daily-tools.collapsed .tool-summary::after {
  content: ' ▸';
  color: var(--gold);
  font-style: normal;
}

.tool-panel {
  padding: .9rem;
  background: rgba(255,255,255,.86);
  border-top: 1px solid rgba(201,161,74,.35);
}

.tool-panel.hidden {
  display: none;
}

/* SANTORAL DOMINICANO */
.santoral-status {
  margin: 0 0 .7rem;
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.34;
}

.santoral-result {
  display: grid;
  gap: .55rem;
  margin-bottom: .75rem;
}

.santoral-card {
  border-left: 4px solid var(--gold);
  padding: .62rem .75rem;
  background: rgba(247,243,236,.92);
}

.santoral-date {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
  line-height: 1.1;
}

.santoral-title {
  display: block;
  margin-top: .14rem;
  font-family: var(--font-body);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.2;
}

.santoral-rank {
  display: block;
  margin-top: .18rem;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.2;
}

.santoral-extra-tag {
  margin-left: .35rem;
  color: var(--ink);
  border-color: rgba(7,7,7,.28);
}

.santoral-has-office {
  display: inline-block;
  margin-top: .45rem;
  padding: .18rem .42rem;
  border: 1px solid rgba(201,161,74,.65);
  color: var(--gold2);
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255,255,255,.65);
}

.santoral-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .2rem;
}

.santoral-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
  padding: .38rem .7rem;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.santoral-link:hover {
  background: var(--white);
  color: var(--black);
}

.santoral-link.secondary {
  background: var(--white);
  color: var(--black);
}

.santoral-link.secondary:hover {
  background: var(--black);
  color: var(--white);
}

.santoral-note {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .78rem;
  font-style: normal;
  line-height: 1.3;
}

.guide-section.running .guide-options {
  display: none;
}

/* GUÍA LITÚRGICA */
.guide-section {
  margin-bottom: 1rem;
}

.guide-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  padding: .9rem;
  background: rgba(255,255,255,.82);
}

.guide-card {
  border: 1px solid var(--black);
  background: var(--paper);
  color: var(--ink);
  padding: .75rem .7rem;
  min-height: 4.2rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}

.guide-card:hover,
.guide-card.active {
  background: var(--black);
  color: var(--white);
  box-shadow: 0 0 0 2px rgba(201,161,74,.28);
  transform: translateY(-1px);
}

.guide-title {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.18;
}

.guide-path {
  display: block;
  margin-top: .32rem;
  font-size: .78rem;
  color: var(--muted);
  font-style: normal;
  line-height: 1.15;
}

.guide-card:hover .guide-path,
.guide-card.active .guide-path {
  color: rgba(255,255,255,.72);
}

.guide-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .75rem .9rem;
  border-top: 1px solid rgba(7,7,7,.12);
  background: rgba(247,243,236,.92);
}

.guide-status.hidden,
.guide-note.hidden {
  display: none;
}

#guide-step-label {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
}

#guide-current-title {
  display: block;
  font-family: var(--font-body);
  font-size: .86rem;
  color: var(--ink);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.guide-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.guide-actions button {
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  padding: .45rem .7rem;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}

.guide-actions button:hover:not(:disabled) {
  background: var(--black);
  color: var(--white);
}

.guide-actions button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.guide-note {
  margin: 0;
  padding: .72rem .9rem;
  border-top: 1px solid rgba(201,161,74,.45);
  border-left: 4px solid var(--gold);
  color: var(--ink);
  font-size: .84rem;
  line-height: 1.38;
  font-style: normal;
  font-weight: 500;
  background: rgba(255,255,255,.92);
}


.guide-toggle {
  width: 100%;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.guide-summary {
  color: rgba(255,255,255,.72);
  font-family: var(--font-body);
  font-size: .82rem;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.guide-summary::after {
  content: ' ▾';
  color: var(--gold);
  font-style: normal;
}

.guide-section.collapsed .guide-summary::after {
  content: ' ▸';
}

.guide-section.collapsed > .guide-options,
.guide-section.collapsed > .guide-note {
  display: none;
}

.guide-section.collapsed .guide-status:not(.hidden) {
  padding: .58rem .8rem;
  background: rgba(255,255,255,.92);
}

.hidden {
  display: none !important;
}

/* TABS DE HORAS / MISAL */
.tabs {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding: .2rem 0 1rem;
  margin-bottom: .35rem;
  scrollbar-width: thin;
}

.tabs.hidden {
  display: none;
}

.tabs button {
  white-space: nowrap;
  padding: .62rem .86rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  flex: 0 0 auto;
  border-color: rgba(7,7,7,.28);
}

.tabs button.active {
  border-color: var(--black);
}

/* VISOR */
.viewer-wrap {
  border: 1px solid var(--black);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 20px 50px rgba(0,0,0,.10);
}


  .santoral-content { padding: .72rem; }
  .santoral-status { text-align: center; font-size: .8rem; }
  .santoral-actions { justify-content: center; }
  .santoral-link { font-size: .62rem; padding: .34rem .58rem; }

  .gospel-status {
    text-align: center;
    font-size: .8rem;
  }

  .gospel-actions {
    justify-content: center;
  }

  .santoral-title { font-size: .72rem; text-align: left; }


  .tool-tab {
    min-height: 3rem;
    padding: .58rem .58rem;
    text-align: center;
  }

  .tool-tab .section-title {
    font-size: .62rem;
    letter-spacing: .07em;
  }

  .tool-summary {
    font-size: .68rem;
  }

  .tool-panel {
    padding: .72rem;
  }

  .santoral-status {
    text-align: center;
    font-size: .8rem;
  }

  .santoral-actions {
    justify-content: center;
  }

  .santoral-link {
    font-size: .62rem;
    padding: .34rem .58rem;
  }

  .santoral-title {
    font-size: .72rem;
    text-align: left;
  }

  .guide-summary {
    font-size: .74rem;
  }

  .guide-section.collapsed .guide-status:not(.hidden) {
    padding: .55rem .7rem;
  }

  iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 245px);
  min-height: 680px;
  border: 0;
  background: white;
}

.music-panel {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1rem auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  padding: .34rem;
  border: 1px solid var(--black);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
}

.music-copy {
  display: none;
  min-width: 0;
  gap: .05rem;
  padding: 0 .45rem 0 .3rem;
}

.music-panel.is-playing .music-copy {
  display: grid;
}

.music-title {
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.05;
}

.music-track {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(48vw, 20rem);
}

.music-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}

.music-actions button {
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
  padding: .34rem .58rem;
  min-height: 1.85rem;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
}

.music-actions button:hover {
  background: var(--white);
  color: var(--black);
}

#music-next {
  display: none;
  padding-inline: .48rem;
}

.music-panel.is-playing #music-next {
  display: inline-block;
}

.music-panel.is-playing {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,161,74,.14), 0 10px 26px rgba(0,0,0,.04);
}


/* COMENTARIO DEL EVANGELIO */
.gospel-panel {
  background: rgba(255,255,255,.86);
}

.gospel-status {
  margin: 0 0 .75rem;
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.34;
}

.gospel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

#misal-guide.running .guide-options {
  display: none;
}

/* FOOTER */
footer {
  position: relative;
  z-index: 1;
  margin-top: .6rem;
  text-align: center;
  padding: .65rem 1rem;
  font-size: .76rem;
  line-height: 1.25;
  color: rgba(255,255,255,.72);
  font-style: normal;
  background: var(--black);
  border-top: 3px solid var(--gold);
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
}

.footer-help {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(201,161,74,.75);
  color: var(--gold);
  text-decoration: none;
  font-style: normal;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}

.footer-help:hover {
  background: var(--gold);
  color: var(--black);
}

/* RESPONSIVE */
@media (max-width: 760px) {
  header {
    min-height: 5.7rem;
    justify-items: center;
    text-align: center;
    padding: .78rem .95rem;
    background: rgba(7,7,7,.98);
  }

  .music-panel {
    margin: 0 auto 1rem;
    justify-content: center;
  }

  .music-panel.is-playing {
    width: 100%;
    justify-content: space-between;
  }

  .music-track {
    max-width: 52vw;
  }

  .music-actions {
    justify-content: center;
  }

  .music-actions button {
    font-size: .66rem;
    min-height: 1.8rem;
    padding: .34rem .52rem;
  }

  header::after {
    display: none;
  }

  .site-label {
    font-size: .42rem;
    letter-spacing: .12em;
    margin-bottom: .2rem;
    text-align: center;
  }

  .cross-mark {
    margin: 0 auto .28rem;
    width: 1.65rem;
    height: 1.65rem;
    font-size: .72rem;
  }

  h1 {
    max-width: none;
    font-size: clamp(1.55rem, 8vw, 2.05rem);
    line-height: .95;
    text-align: center;
  }

  .subtitle {
    font-size: .72rem;
    line-height: 1.1;
    margin-top: .18rem;
    text-align: center;
  }

  main {
    width: min(100% - 1rem, 1060px);
    padding-top: .85rem;
  }

  .mode-tabs {
    gap: .55rem;
    margin-bottom: 1rem;
  }

  .mode-tabs button {
    min-height: 3.35rem;
    padding: .65rem .45rem;
    font-size: .68rem;
    letter-spacing: .07em;
  }

  .section {
    margin-bottom: 1rem;
  }

  .section-header {
    padding: .72rem .85rem;
  }

  .controls {
    padding: .85rem;
  }

  input[type="date"] {
    flex: 1 1 10rem;
  }

  .tabs {
    gap: .4rem;
    padding-bottom: .75rem;
  }

  .tabs button {
    padding: .54rem .66rem;
    font-size: .66rem;
    letter-spacing: .06em;
  }



  .guide-options {
    grid-template-columns: 1fr;
    gap: .55rem;
    padding: .75rem;
  }

  .guide-card {
    min-height: auto;
    padding: .68rem .75rem;
    text-align: center;
  }

  .guide-title {
    font-size: .66rem;
  }

  .guide-path {
    font-size: .74rem;
  }

  .guide-status {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }

  .guide-actions {
    justify-content: center;
  }
  .guide-note {
    text-align: left;
    font-size: .78rem;
    line-height: 1.34;
    padding: .65rem .75rem;
  }

  iframe {
    height: calc(100vh - 230px);
    min-height: 560px;
  }
  footer {
    padding: .55rem .75rem;
    font-size: .7rem;
    line-height: 1.2;
  }

}

/* === Mejoras de uso diario: hora sugerida, iframe, FAB y animaciones === */

button,
.santoral-link,
.footer-help {
  position: relative;
  overflow: hidden;
  transition:
    transform 130ms ease,
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

button:active,
.santoral-link:active,
.footer-help:active {
  transform: scale(.97);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  background: rgba(201, 161, 74, .32);
  animation: ripple-effect 620ms ease-out;
}

@keyframes ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.suggested-hour-section {
  margin-top: -0.55rem;
}

.suggested-hour-card {
  display: grid;
  gap: .08rem;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.86);
  border-left: 4px solid var(--gold);
}

.suggested-hour-kicker {
  color: var(--gold2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#suggested-hour-title {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.34rem);
  line-height: 1.08;
}

#suggested-hour-detail {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.28;
}

.tabs button.suggested-now {
  border-color: var(--gold2);
  box-shadow: inset 0 -3px 0 var(--gold);
}

.tabs button.suggested-now::after {
  content: ' · sugerida';
  color: var(--gold2);
  font-size: .6rem;
  letter-spacing: .04em;
}

.viewer-wrap {
  position: relative;
}

iframe {
  transition: opacity 220ms ease, filter 220ms ease;
}

iframe.is-loading {
  opacity: .55;
  filter: saturate(.92);
}

.viewer-status {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(251,248,241,.86);
  backdrop-filter: blur(2px);
}

.viewer-status.hidden {
  display: none !important;
}

.viewer-status-card {
  width: min(92%, 28rem);
  border: 1px solid var(--black);
  border-top: 4px solid var(--gold);
  background: rgba(255,255,255,.97);
  padding: 1rem;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

.viewer-status-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: .5rem;
  border: 1px solid rgba(201,161,74,.75);
  color: var(--gold2);
  background: rgba(247,243,236,.75);
}

.viewer-status-card strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.1;
}

.viewer-status-card p {
  margin: .5rem auto .8rem;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.35;
}

.viewer-status-actions {
  display: flex;
  gap: .55rem;
  justify-content: center;
  flex-wrap: wrap;
}

.viewer-status-actions button,
.viewer-status-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  border: 1px solid var(--black);
  padding: .42rem .7rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}

.viewer-status-actions a {
  background: var(--white);
  color: var(--black);
}

.viewer-status-actions button:hover,
.viewer-status-actions a:hover {
  background: var(--gold);
  color: var(--black);
}

.ordo-fab {
  position: fixed;
  right: clamp(.9rem, 4vw, 1.6rem);
  bottom: clamp(.9rem, 4vw, 1.6rem);
  z-index: 60;
  display: grid;
  justify-items: end;
  gap: .5rem;
}

.ordo-fab-main {
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}

.ordo-fab-main.is-playing {
  color: var(--white);
  background: var(--gold2);
  border-color: var(--black);
}

.ordo-fab-menu {
  min-width: min(20rem, calc(100vw - 2rem));
  max-height: min(72vh, 34rem);
  overflow-y: auto;
  display: grid;
  gap: .36rem;
  padding: .55rem;
  border: 1px solid var(--black);
  background: rgba(251,248,241,.98);
  box-shadow: 0 18px 45px rgba(0,0,0,.20);
  opacity: 0;
  pointer-events: none;
  transform: translateY(.7rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.ordo-fab.open .ordo-fab-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ordo-fab-group {
  display: block;
  margin: .2rem .2rem .04rem;
  color: var(--gold2);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ordo-fab-status {
  display: grid;
  gap: .12rem;
  padding: .55rem .6rem;
  border-left: 4px solid var(--gold);
  background: rgba(255,255,255,.86);
}

.ordo-fab-status strong {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.1;
}

.ordo-fab-status span {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
}

.ordo-fab-menu button {
  min-height: 2.25rem;
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  padding: .44rem .7rem;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.ordo-fab-menu button:hover {
  background: var(--black);
  color: var(--white);
}

.ordo-fab-menu button.primary {
  background: var(--black);
  color: var(--white);
  border-color: var(--gold);
}

.ordo-fab-menu button.danger {
  color: var(--red);
}

.ordo-fab-menu button.disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.ordo-fab-separator {
  height: 1px;
  margin: .25rem .15rem;
  background: rgba(7,7,7,.12);
}

@media (max-width: 760px) {
  .tabs button.suggested-now::after {
    display: block;
    margin-top: .1rem;
  }

  .ordo-fab {
    right: .85rem;
    bottom: .85rem;
  }

  .ordo-fab-main {
    width: 3rem;
    height: 3rem;
  }

  .ordo-fab-menu {
    min-width: min(20rem, calc(100vw - 1.7rem));
    max-height: 68vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .ripple {
    display: none !important;
  }
}


/* === Ajuste: la música se controla sólo desde el botón flotante === */
.music-panel.music-panel-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ordo-fab-main {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  line-height: 1;
}

.ordo-fab-main .fab-icon-music,
.ordo-fab-main .fab-icon-cross {
  grid-area: 1 / 1;
  display: block;
  pointer-events: none;
}

.ordo-fab-main .fab-icon-music {
  transform: translate(-.28rem, -.18rem);
  font-size: 1.05rem;
}

.ordo-fab-main .fab-icon-cross {
  transform: translate(.34rem, .3rem);
  font-size: .78rem;
  color: var(--ivory);
}

.ordo-fab-main.is-playing .fab-icon-music {
  font-size: .9rem;
}

.ordo-fab-main.has-guide {
  box-shadow:
    0 0 0 3px rgba(201,161,74,.20),
    0 14px 34px rgba(0,0,0,.24);
}

.ordo-fab-main.has-guide .fab-icon-cross {
  color: var(--gold);
}

.ordo-fab-main.is-playing .fab-icon-cross {
  color: var(--white);
}

@media (max-width: 760px) {
  .ordo-fab-main .fab-icon-music {
    font-size: 1rem;
  }

  .ordo-fab-main .fab-icon-cross {
    font-size: .72rem;
  }
}


/* === Ajustes UI: hora sugerida compacta e ícono de rezo primero === */
.suggested-hour-section {
  display: none !important;
}

.suggested-hour-inline {
  display: grid;
  gap: .02rem;
  padding: .34rem .85rem .38rem;
  border-top: 1px solid rgba(201,161,74,.35);
  border-left: 4px solid var(--gold);
  background: rgba(255,255,255,.88);
}

.suggested-hour-inline .suggested-hour-kicker {
  color: var(--gold2);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
}

.suggested-hour-inline #suggested-hour-title {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: clamp(.92rem, 1.55vw, 1.08rem);
  line-height: 1.05;
}

.suggested-hour-inline #suggested-hour-detail {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.12;
}

.ordo-fab-main .fab-icon-cross {
  transform: translate(-.24rem, -.16rem);
  font-size: 1.02rem;
  color: var(--gold);
}

.ordo-fab-main .fab-icon-music {
  transform: translate(.34rem, .32rem);
  font-size: .78rem;
  color: var(--ivory);
}

.ordo-fab-main.is-playing .fab-icon-music {
  color: var(--white);
  font-size: .72rem;
}

.ordo-fab-main.is-playing .fab-icon-cross {
  color: var(--white);
}

.ordo-fab-main.has-guide .fab-icon-cross {
  color: var(--gold);
  font-size: 1.08rem;
}

@media (max-width: 760px) {
  .suggested-hour-inline {
    padding: .32rem .7rem .36rem;
    text-align: center;
    border-left: 0;
    border-top: 3px solid var(--gold);
  }

  .suggested-hour-inline #suggested-hour-title {
    font-size: .98rem;
  }

  .suggested-hour-inline #suggested-hour-detail {
    font-size: .68rem;
  }

  .ordo-fab-main .fab-icon-cross {
    font-size: .98rem;
  }

  .ordo-fab-main .fab-icon-music {
    font-size: .74rem;
  }
}


/* === Ajuste: sin barra de hora sugerida y guía elegible desde FAB === */
.suggested-hour-inline,
.suggested-hour-section {
  display: none !important;
}

.ordo-fab-menu .ordo-fab-group:first-child {
  margin-top: .05rem;
}

.ordo-fab-menu button[data-fab-action^="start-liturgy"],
.ordo-fab-menu button[data-fab-action^="start-misal"] {
  background: rgba(255,255,255,.94);
}

.ordo-fab-menu button[data-fab-action^="start-liturgy"]:hover,
.ordo-fab-menu button[data-fab-action^="start-misal"]:hover {
  background: var(--black);
  color: var(--white);
}


/* === Ajuste iframe: aviso no bloqueante === */
.viewer-status.compact,
.viewer-status.error {
  inset: auto .75rem .75rem auto;
  width: min(92%, 21rem);
  min-height: 0;
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.viewer-status.compact .viewer-status-card,
.viewer-status.error .viewer-status-card {
  width: 100%;
  padding: .62rem .7rem;
  text-align: left;
  border-top-width: 3px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}

.viewer-status.compact .viewer-status-mark,
.viewer-status.error .viewer-status-mark {
  display: none;
}

.viewer-status.compact .viewer-status-card strong,
.viewer-status.error .viewer-status-card strong {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.viewer-status.compact .viewer-status-card p,
.viewer-status.error .viewer-status-card p {
  margin: .24rem 0 .5rem;
  font-size: .72rem;
  line-height: 1.22;
}

.viewer-status.compact .viewer-status-actions,
.viewer-status.error .viewer-status-actions {
  justify-content: flex-start;
}

.viewer-status.compact .viewer-status-actions,
.viewer-status.compact .viewer-status-actions *,
.viewer-status.error .viewer-status-actions,
.viewer-status.error .viewer-status-actions * {
  pointer-events: auto;
}

.viewer-status.compact .viewer-status-actions button,
.viewer-status.compact .viewer-status-actions a,
.viewer-status.error .viewer-status-actions button,
.viewer-status.error .viewer-status-actions a {
  min-height: 1.78rem;
  padding: .28rem .48rem;
  font-size: .58rem;
}

iframe.is-loading {
  opacity: .88;
  filter: none;
}

@media (max-width: 760px) {
  .viewer-status.compact,
  .viewer-status.error {
    left: .55rem;
    right: .55rem;
    bottom: .55rem;
    width: auto;
  }
}


/* === Ajuste: controles superiores compactos y aviso sólo si falla === */
.mode-tabs {
  gap: .55rem;
  margin-bottom: .75rem;
}

.mode-tabs button {
  min-height: 2.65rem;
  padding: .52rem .85rem;
  font-size: .72rem;
  letter-spacing: .075em;
}

.controls-section {
  margin-bottom: .8rem;
}

.controls-section .section-header {
  padding: .5rem .78rem;
}

.controls-section .section-title {
  font-size: .64rem;
  letter-spacing: .1em;
}

.controls {
  padding: .62rem .78rem;
  gap: .55rem;
}

input[type="date"] {
  min-height: 2.15rem;
  padding: .36rem .58rem;
  font-size: .9rem;
}

#today {
  min-height: 2.15rem;
  padding: .36rem .7rem;
  font-size: .66rem;
  letter-spacing: .075em;
}

.viewer-status.loading {
  display: none !important;
}

iframe.is-loading {
  opacity: 1;
  filter: none;
}

.viewer-status.error.compact {
  animation: soft-notice-in 180ms ease-out;
}

@keyframes soft-notice-in {
  from {
    opacity: 0;
    transform: translateY(.45rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .mode-tabs {
    gap: .45rem;
    margin-bottom: .65rem;
  }

  .mode-tabs button {
    min-height: 2.45rem;
    padding: .46rem .55rem;
    font-size: .64rem;
    letter-spacing: .055em;
  }

  .controls-section .section-header {
    padding: .42rem .62rem;
  }

  .controls {
    padding: .54rem .62rem;
    justify-content: center;
  }

  input[type="date"],
  #today {
    min-height: 2.05rem;
  }
}


/* === FAB con acción directa === */
.ordo-fab-main.fab-action-guide {
  background: var(--black);
  color: var(--gold);
  border-color: var(--gold);
}

.ordo-fab-main.fab-action-guide .fab-icon-next {
  font-size: 1.45rem;
  line-height: 1;
  transform: translateX(.04rem);
  pointer-events: none;
}

.ordo-fab-main.fab-action-music {
  background: var(--gold2);
  color: var(--white);
  border-color: var(--black);
}

.ordo-fab-main.fab-action-music .fab-icon-pause {
  font-size: .92rem;
  letter-spacing: .08em;
  pointer-events: none;
}

.ordo-fab-main.fab-action-guide:hover,
.ordo-fab-main.fab-action-music:hover,
.ordo-fab-main.fab-action-menu:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

.ordo-fab-main.fab-action-guide:active,
.ordo-fab-main.fab-action-music:active,
.ordo-fab-main.fab-action-menu:active {
  transform: scale(.96);
}

.ordo-fab-main.fab-action-guide::after {
  content: 'Siguiente';
  position: absolute;
  right: calc(100% + .55rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .22rem .42rem;
  border: 1px solid rgba(7,7,7,.18);
  background: rgba(251,248,241,.96);
  color: var(--ink);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  opacity: .92;
}

.ordo-fab-main.fab-action-music::after {
  content: 'Pausar';
  position: absolute;
  right: calc(100% + .55rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .22rem .42rem;
  border: 1px solid rgba(7,7,7,.18);
  background: rgba(251,248,241,.96);
  color: var(--ink);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  opacity: .92;
}

@media (max-width: 760px) {
  .ordo-fab-main.fab-action-guide::after,
  .ordo-fab-main.fab-action-music::after {
    display: none;
  }

  .ordo-fab-main.fab-action-guide .fab-icon-next {
    font-size: 1.34rem;
  }
}


/* === FAB con botones auxiliares contextuales === */
.ordo-fab {
  grid-template-areas:
    "menu"
    "guide"
    "music"
    "main";
}

.ordo-fab-menu {
  grid-area: menu;
}

.ordo-fab-main {
  grid-area: main;
}

.ordo-fab-quick {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(251,248,241,.98);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition:
    transform 150ms ease,
    opacity 150ms ease,
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.ordo-fab-quick:hover {
  transform: translateY(-2px);
  background: var(--black);
  color: var(--gold);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.ordo-fab-quick:active {
  transform: scale(.96);
}

.ordo-fab-guide-next {
  grid-area: guide;
  font-size: 1.18rem;
  background: var(--black);
  color: var(--gold);
}

.ordo-fab-music-pause {
  grid-area: music;
  font-size: .78rem;
  letter-spacing: .06em;
  background: var(--gold2);
  color: var(--white);
  border-color: var(--black);
}

.ordo-fab-quick.hidden {
  display: none !important;
}

.ordo-fab-main.fab-action-guide,
.ordo-fab-main.fab-action-music {
  background: var(--black);
  color: var(--gold);
  border-color: var(--gold);
}

.ordo-fab-main.fab-action-guide::after,
.ordo-fab-main.fab-action-music::after {
  display: none !important;
}

@media (max-width: 760px) {
  .ordo-fab-quick {
    width: 2.55rem;
    height: 2.55rem;
  }

  .ordo-fab-guide-next {
    font-size: 1.08rem;
  }

  .ordo-fab-music-pause {
    font-size: .72rem;
  }
}


/* === Guías compactas: proporción con controles superiores === */
.guide-options {
  gap: .48rem;
  padding: .58rem .7rem;
}

.guide-card {
  min-height: 3rem;
  padding: .48rem .58rem;
}

.guide-title {
  font-size: .64rem;
  letter-spacing: .07em;
  line-height: 1.1;
}

.guide-path {
  margin-top: .2rem;
  font-size: .68rem;
  line-height: 1.1;
}

.guide-status {
  padding: .58rem .72rem;
}

#guide-step-label,
#misal-guide-step-label {
  font-size: .66rem;
}

#guide-current-title,
#misal-guide-current-title {
  font-size: .76rem;
}

.guide-actions button {
  padding: .34rem .55rem;
  font-size: .62rem;
  letter-spacing: .06em;
}

.guide-note {
  padding: .58rem .72rem;
  font-size: .78rem;
}

@media (max-width: 760px) {
  .guide-options {
    grid-template-columns: 1fr 1fr;
    gap: .42rem;
    padding: .52rem;
  }

  .guide-card {
    min-height: 2.75rem;
    padding: .42rem .48rem;
  }

  .guide-title {
    font-size: .58rem;
  }

  .guide-path {
    font-size: .62rem;
  }
}


/* === Iframe sin interferencia con controles internos del CEM === */
.viewer-status {
  pointer-events: none !important;
}

.viewer-status.hidden,
.viewer-status.loading {
  display: none !important;
}

.viewer-status.error,
.viewer-status.error.compact {
  position: fixed !important;
  inset: auto 1rem 1rem auto !important;
  width: min(92vw, 22rem) !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

.viewer-status.error .viewer-status-card,
.viewer-status.error.compact .viewer-status-card {
  width: 100% !important;
  padding: .62rem .7rem !important;
  text-align: left !important;
  border-top-width: 3px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
  background: rgba(255,255,255,.97) !important;
}

.viewer-status.error .viewer-status-mark,
.viewer-status.error.compact .viewer-status-mark {
  display: none !important;
}

.viewer-status.error .viewer-status-card strong,
.viewer-status.error.compact .viewer-status-card strong {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.viewer-status.error .viewer-status-card p,
.viewer-status.error.compact .viewer-status-card p {
  margin: .24rem 0 .5rem;
  font-size: .72rem;
  line-height: 1.22;
}

.viewer-status.error .viewer-status-actions,
.viewer-status.error.compact .viewer-status-actions {
  justify-content: flex-start;
}

.viewer-status.error .viewer-status-actions,
.viewer-status.error .viewer-status-actions *,
.viewer-status.error.compact .viewer-status-actions,
.viewer-status.error.compact .viewer-status-actions * {
  pointer-events: auto !important;
}

.viewer-status.error .viewer-status-actions button,
.viewer-status.error .viewer-status-actions a,
.viewer-status.error.compact .viewer-status-actions button,
.viewer-status.error.compact .viewer-status-actions a {
  min-height: 1.78rem;
  padding: .28rem .48rem;
  font-size: .58rem;
}

iframe,
iframe.is-loading {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

@media (max-width: 760px) {
  .viewer-status.error,
  .viewer-status.error.compact {
    left: .55rem !important;
    right: .55rem !important;
    bottom: .55rem !important;
    width: auto !important;
  }
}


/* === Iframe limpio: sin overlay ni bloqueo de controles CEM === */
.viewer-status,
.viewer-status.loading,
.viewer-status.error,
.viewer-status.compact {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.viewer-wrap {
  position: relative;
}

iframe,
iframe.is-loading,
#viewer {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  user-select: auto !important;
}

#viewer:focus {
  outline: none;
}


/* === Enfoque preventivo del iframe CEM === */
#viewer {
  cursor: default;
}

.viewer-wrap:focus-within {
  outline: none;
}

#viewer:focus-visible {
  outline: 2px solid rgba(184,134,11,.25);
  outline-offset: 2px;
}


/* === FAB sin interferencia con el iframe === */
.ordo-fab {
  pointer-events: none !important;
  width: max-content !important;
  max-width: min(20rem, calc(100vw - 2rem));
}

.ordo-fab-main,
.ordo-fab-menu,
.ordo-fab-menu *,
.ordo-fab-quick {
  pointer-events: auto !important;
}

.ordo-fab-menu {
  max-height: min(72vh, 31rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ordo-fab:not(.open) .ordo-fab-menu {
  pointer-events: none !important;
}

.ordo-fab:not(.open) .ordo-fab-menu * {
  pointer-events: none !important;
}

/* Cuando el menú está cerrado, sólo los botones circulares del FAB pueden recibir clics. */
.ordo-fab:not(.open) {
  background: transparent !important;
}

/* El visor del CEM queda por debajo visualmente, pero libre para recibir interacción. */
.viewer-wrap,
#viewer {
  isolation: auto;
  pointer-events: auto !important;
}

@media (max-width: 760px) {
  .ordo-fab {
    max-width: calc(100vw - 1rem);
  }

  .ordo-fab-menu {
    max-height: min(68vh, 29rem);
  }
}


/* === Ajustes finales de interfaz === */

/* El FAB queda fuera del main y siempre por encima del pie de página. */
main {
  z-index: 2;
  padding-bottom: 5.6rem;
}

footer {
  z-index: 1;
}

.ordo-fab {
  z-index: 10000 !important;
  bottom: calc(clamp(1rem, 4vw, 1.55rem) + env(safe-area-inset-bottom)) !important;
}

/* Animación general de botones: rápida, suave y sobria. */
button,
.footer-help,
.santoral-link,
.gospel-link,
.viewer-status-actions a {
  will-change: transform;
  transition:
    transform 150ms cubic-bezier(.2,.8,.2,1),
    background-color 150ms cubic-bezier(.2,.8,.2,1),
    color 150ms cubic-bezier(.2,.8,.2,1),
    border-color 150ms cubic-bezier(.2,.8,.2,1),
    box-shadow 150ms cubic-bezier(.2,.8,.2,1),
    opacity 150ms cubic-bezier(.2,.8,.2,1);
}

button.is-button-pressing,
.footer-help.is-button-pressing,
.santoral-link.is-button-pressing,
.gospel-link.is-button-pressing,
.viewer-status-actions a.is-button-pressing {
  animation: ordo-button-press 180ms cubic-bezier(.2,.8,.2,1);
}

@keyframes ordo-button-press {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(.965);
  }

  100% {
    transform: scale(1);
  }
}

/* Apertura/cierre más elegante del menú flotante. */
.ordo-fab-menu {
  transform-origin: bottom right;
  transition:
    opacity 160ms cubic-bezier(.2,.8,.2,1),
    transform 160ms cubic-bezier(.2,.8,.2,1),
    filter 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 160ms cubic-bezier(.2,.8,.2,1) !important;
}

.ordo-fab.open .ordo-fab-menu {
  transform: translateY(0) scale(1) !important;
}

.ordo-fab.closing .ordo-fab-menu,
.ordo-fab:not(.open) .ordo-fab-menu {
  opacity: 0 !important;
  transform: translateY(.42rem) scale(.985) !important;
  filter: blur(.2px);
}

/* Horas litúrgicas más compactas y proporcionadas con el resto de controles. */
#liturgia-tabs.tabs {
  gap: .38rem;
  padding: .1rem 0 .62rem;
  margin-bottom: .25rem;
  scroll-behavior: smooth;
}

#liturgia-tabs.tabs button {
  min-height: 2.05rem;
  padding: .32rem .54rem;
  font-size: .61rem;
  letter-spacing: .055em;
  line-height: 1.05;
}

/* La hora sugerida se marca con la cruz, no con texto. */
#liturgia-tabs.tabs button.suggested-now {
  border-color: var(--gold2);
  box-shadow: inset 0 -2px 0 var(--gold);
}

#liturgia-tabs.tabs button.suggested-now::after,
.tabs button.suggested-now::after {
  content: ' ✥' !important;
  display: inline !important;
  margin-top: 0 !important;
  margin-left: .2rem;
  color: var(--gold);
  font-size: .68rem;
  letter-spacing: 0;
  vertical-align: baseline;
}

#liturgia-tabs.tabs button.active.suggested-now::after {
  color: var(--gold);
}

@media (max-width: 760px) {
  main {
    padding-bottom: 5.25rem;
  }

  .ordo-fab {
    bottom: calc(.85rem + env(safe-area-inset-bottom)) !important;
  }

  #liturgia-tabs.tabs {
    gap: .3rem;
    padding-bottom: .55rem;
  }

  #liturgia-tabs.tabs button {
    min-height: 1.92rem;
    padding: .28rem .46rem;
    font-size: .56rem;
    letter-spacing: .045em;
  }

  #liturgia-tabs.tabs button.suggested-now::after,
  .tabs button.suggested-now::after {
    display: inline !important;
    margin-top: 0 !important;
    margin-left: .16rem;
    font-size: .62rem;
  }
}


/* === Tamaño unificado de secciones y botones === */
.section {
  margin-bottom: .78rem;
}

.section-header,
.controls-section .section-header {
  min-height: 2rem;
  padding: .44rem .68rem;
}

.section-title,
.tool-tab .section-title {
  font-size: .6rem;
  letter-spacing: .085em;
  line-height: 1.05;
}

.controls,
.tool-panel {
  padding: .54rem .64rem;
}

.tool-switch {
  min-height: 0;
}

.tool-tab {
  min-height: 2.35rem;
  padding: .42rem .56rem;
  gap: .08rem;
}

.tool-summary,
.guide-summary {
  font-size: .62rem;
  line-height: 1.05;
}

.daily-tools {
  margin-bottom: .78rem;
}

/* Unifica las pestañas de Liturgia y Misal */
.tabs,
#liturgia-tabs.tabs,
#misal-tabs.tabs {
  gap: .32rem;
  padding: .08rem 0 .5rem;
  margin-bottom: .18rem;
  scroll-behavior: smooth;
}

.tabs button,
#liturgia-tabs.tabs button,
#misal-tabs.tabs button {
  min-height: 1.95rem;
  padding: .28rem .48rem;
  font-size: .56rem;
  letter-spacing: .045em;
  line-height: 1.05;
}

/* Misal: secciones largas, compactas pero legibles */
#misal-tabs.tabs button {
  padding-inline: .5rem;
  font-size: .55rem;
  max-width: none;
}

/* Guías y tarjetas auxiliares en la misma escala */
.guide-options {
  gap: .38rem;
  padding: .48rem .56rem;
}

.guide-card {
  min-height: 2.65rem;
  padding: .38rem .46rem;
}

.guide-title {
  font-size: .56rem;
  letter-spacing: .055em;
  line-height: 1.08;
}

.guide-path {
  margin-top: .16rem;
  font-size: .6rem;
  line-height: 1.08;
}

.guide-status {
  padding: .48rem .58rem;
  gap: .55rem;
}

#guide-step-label,
#misal-guide-step-label {
  font-size: .58rem;
}

#guide-current-title,
#misal-guide-current-title {
  font-size: .68rem;
  letter-spacing: .06em;
}

.guide-actions {
  gap: .34rem;
}

.guide-actions button,
.gospel-actions .santoral-link,
.santoral-actions .santoral-link,
.santoral-link {
  min-height: 1.85rem;
  padding: .28rem .46rem;
  font-size: .56rem;
  letter-spacing: .055em;
}

.guide-note,
.santoral-note,
.gospel-status,
.santoral-status {
  padding: .48rem .58rem;
  font-size: .72rem;
  line-height: 1.28;
}

.santoral-card {
  padding: .46rem .58rem;
}

.santoral-title {
  font-size: .66rem;
  letter-spacing: .045em;
}

.santoral-date,
.santoral-rank {
  font-size: .62rem;
}

.santoral-has-office {
  padding: .12rem .32rem;
  font-size: .54rem;
}

/* Menú flotante y botones rápidos en la misma escala */
.ordo-fab-menu {
  gap: .26rem;
  padding: .44rem;
}

.ordo-fab-group {
  margin: .14rem .16rem .02rem;
  font-size: .54rem;
  letter-spacing: .095em;
}

.ordo-fab-status {
  gap: .08rem;
  padding: .42rem .5rem;
}

.ordo-fab-status strong {
  font-size: .82rem;
}

.ordo-fab-status span {
  font-size: .62rem;
}

.ordo-fab-menu button {
  min-height: 1.95rem;
  padding: .28rem .46rem;
  font-size: .58rem;
  letter-spacing: .055em;
}

.ordo-fab-separator {
  margin: .18rem .1rem;
}

.footer-help {
  width: 1.55rem;
  height: 1.55rem;
  font-size: .72rem;
}

@media (max-width: 760px) {
  .section {
    margin-bottom: .68rem;
  }

  .section-header,
  .controls-section .section-header {
    min-height: 1.85rem;
    padding: .36rem .52rem;
  }

  .section-title,
  .tool-tab .section-title {
    font-size: .54rem;
    letter-spacing: .07em;
  }

  .controls,
  .tool-panel {
    padding: .46rem .5rem;
  }

  .tool-tab {
    min-height: 2.08rem;
    padding: .34rem .42rem;
  }

  .tool-summary,
  .guide-summary {
    font-size: .56rem;
  }

  .tabs,
  #liturgia-tabs.tabs,
  #misal-tabs.tabs {
    gap: .24rem;
    padding-bottom: .44rem;
  }

  .tabs button,
  #liturgia-tabs.tabs button,
  #misal-tabs.tabs button {
    min-height: 1.78rem;
    padding: .24rem .38rem;
    font-size: .5rem;
    letter-spacing: .035em;
  }

  #misal-tabs.tabs button {
    font-size: .49rem;
  }

  .guide-options {
    gap: .32rem;
    padding: .42rem;
  }

  .guide-card {
    min-height: 2.38rem;
    padding: .34rem .38rem;
  }

  .guide-title {
    font-size: .5rem;
  }

  .guide-path {
    font-size: .54rem;
  }

  .guide-status {
    padding: .42rem .48rem;
    align-items: flex-start;
  }

  #guide-step-label,
  #misal-guide-step-label {
    font-size: .54rem;
  }

  #guide-current-title,
  #misal-guide-current-title {
    font-size: .62rem;
  }

  .guide-actions button,
  .gospel-actions .santoral-link,
  .santoral-actions .santoral-link,
  .santoral-link {
    min-height: 1.72rem;
    padding: .24rem .38rem;
    font-size: .5rem;
  }

  .guide-note,
  .santoral-note,
  .gospel-status,
  .santoral-status {
    padding: .42rem .48rem;
    font-size: .68rem;
  }

  .ordo-fab-menu button {
    min-height: 1.82rem;
    padding: .24rem .4rem;
    font-size: .52rem;
  }
}


/* === Botón flotante debajo del pie de página en el HTML === */
.ordo-fab {
  z-index: 9000 !important;
  bottom: calc(.9rem + env(safe-area-inset-bottom)) !important;
}

/* Ya no se agrega espacio extra al final del main por el FAB. */
main {
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
}

/* El footer mantiene su propia capa; el FAB está después del footer en el DOM. */
footer {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .ordo-fab {
    bottom: calc(.75rem + env(safe-area-inset-bottom)) !important;
  }

  main {
    padding-bottom: 1rem;
  }
}


/* === Corrección: FAB siempre flotante y a la derecha === */
.ordo-fab {
  position: fixed !important;
  right: clamp(1rem, 3vw, 1.55rem) !important;
  left: auto !important;
  bottom: clamp(4.6rem, 8vh, 6.1rem) !important;
  z-index: 10000 !important;
  pointer-events: none !important;
  width: max-content !important;
  max-width: min(20rem, calc(100vw - 2rem));
}

/* El FAB queda visualmente encima del footer en escritorio. */
footer {
  position: relative;
  z-index: 1;
}

/* Se deja aire suficiente al final del contenido sin empujar el FAB. */
main {
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
}

.ordo-fab-main,
.ordo-fab-menu,
.ordo-fab-menu *,
.ordo-fab-quick {
  pointer-events: auto !important;
}

@media (max-width: 760px) {
  .ordo-fab {
    right: calc(.7rem + env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: calc(.75rem + env(safe-area-inset-bottom)) !important;
    z-index: 10000 !important;
    max-width: calc(100vw - 1rem);
  }

  main {
    padding-bottom: 1rem;
  }
}


/* === FAB siempre flotante y sobre el footer === */
:root {
  --ordo-fab-default-bottom: clamp(1rem, 3vw, 1.35rem);
  --ordo-fab-bottom: var(--ordo-fab-default-bottom);
}

.ordo-fab {
  position: fixed !important;
  right: clamp(1rem, 3vw, 1.55rem) !important;
  left: auto !important;
  bottom: calc(var(--ordo-fab-bottom) + env(safe-area-inset-bottom)) !important;
  z-index: 10000 !important;
  pointer-events: none !important;
  width: max-content !important;
  max-width: min(20rem, calc(100vw - 2rem));
  transition:
    bottom 180ms cubic-bezier(.2,.8,.2,1),
    transform 150ms cubic-bezier(.2,.8,.2,1),
    opacity 150ms cubic-bezier(.2,.8,.2,1) !important;
}

.ordo-fab-main,
.ordo-fab-menu,
.ordo-fab-menu *,
.ordo-fab-quick {
  pointer-events: auto !important;
}

footer {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  :root {
    --ordo-fab-default-bottom: .85rem;
  }

  .ordo-fab {
    right: calc(.7rem + env(safe-area-inset-right)) !important;
    left: auto !important;
    max-width: calc(100vw - 1rem);
  }
}


/* === FAB: carácter para último paso del rezo guiado === */
.ordo-fab-guide-next.is-last-step {
  background: rgba(251,248,241,.98);
  color: var(--gold);
  border-color: var(--gold);
  cursor: default;
}

.ordo-fab-guide-next.is-last-step:hover {
  background: rgba(251,248,241,.98);
  color: var(--gold);
  transform: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.ordo-fab-guide-next.is-last-step:active {
  transform: scale(.98);
}


/* === Botón flotante: volver arriba tras centrar el visor === */
.scroll-top-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.55rem);
  bottom: calc(var(--ordo-fab-bottom, 1rem) + env(safe-area-inset-bottom) + 3.35rem);
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(251,248,241,.98);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  opacity: .96;
  transform: translateY(0) scale(1);
  transition:
    opacity 160ms cubic-bezier(.2,.8,.2,1),
    transform 160ms cubic-bezier(.2,.8,.2,1),
    bottom 180ms cubic-bezier(.2,.8,.2,1),
    background-color 150ms cubic-bezier(.2,.8,.2,1),
    color 150ms cubic-bezier(.2,.8,.2,1),
    box-shadow 150ms cubic-bezier(.2,.8,.2,1);
}

.scroll-top-fab:hover {
  transform: translateY(-2px) scale(1);
  background: var(--black);
  color: var(--gold);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.scroll-top-fab:active {
  transform: scale(.96);
}

.scroll-top-fab.hidden {
  opacity: 0;
  transform: translateY(.5rem) scale(.96);
  pointer-events: none;
}

@media (max-width: 760px) {
  .scroll-top-fab {
    right: calc(.7rem + env(safe-area-inset-right));
    bottom: calc(var(--ordo-fab-bottom, .85rem) + env(safe-area-inset-bottom) + 3rem);
    width: 2.35rem;
    height: 2.35rem;
    font-size: 1rem;
  }
}


/* === Ajuste: botón arriba sin encimarse y sin botón en último paso === */
:root {
  --scroll-top-extra: 48px;
}

.scroll-top-fab {
  bottom: calc(var(--ordo-fab-bottom, 1rem) + env(safe-area-inset-bottom) + var(--scroll-top-extra)) !important;
}

.ordo-fab-guide-next.hidden,
.ordo-fab-guide-next[disabled] {
  display: none !important;
}

.ordo-fab-guide-next.is-last-step {
  display: none !important;
}

@media (max-width: 760px) {
  :root {
    --scroll-top-extra: 42px;
  }

  .scroll-top-fab {
    bottom: calc(var(--ordo-fab-bottom, .85rem) + env(safe-area-inset-bottom) + var(--scroll-top-extra)) !important;
  }
}


/* === Separación corregida del botón volver arriba === */
:root {
  --scroll-top-extra: 54px;
}

.scroll-top-fab {
  bottom: calc(var(--ordo-fab-bottom, 1rem) + env(safe-area-inset-bottom) + var(--scroll-top-extra) + .45rem) !important;
}

@media (max-width: 760px) {
  :root {
    --scroll-top-extra: 48px;
  }

  .scroll-top-fab {
    bottom: calc(var(--ordo-fab-bottom, .85rem) + env(safe-area-inset-bottom) + var(--scroll-top-extra) + .4rem) !important;
  }
}


/* === Corrección móvil: botón volver arriba fuera de la columna FAB === */
:root {
  --scroll-top-bottom: 72px;
}

.scroll-top-fab {
  bottom: calc(var(--scroll-top-bottom) + env(safe-area-inset-bottom)) !important;
  right: clamp(1rem, 3vw, 1.55rem) !important;
}

@media (max-width: 760px) {
  :root {
    --scroll-top-bottom: 68px;
  }

  .scroll-top-fab {
    right: calc(.7rem + env(safe-area-inset-right)) !important;
    bottom: calc(var(--scroll-top-bottom) + env(safe-area-inset-bottom)) !important;
  }
}


/* === Sección Orden / Celebraciones especiales: estable === */
:root {
  --special-text-scale: 100%;
}

.mode-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#orden-viewer[hidden],
#orden-tabs[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.special-viewer.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.special-viewer {
  position: relative;
  z-index: 1;
  border: 1px solid var(--black);
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 35px rgba(0,0,0,.06);
}

.special-card {
  display: flex;
  flex-direction: column;
  max-height: min(78vh, 48rem);
  background: var(--paper);
}

.special-header {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
}

.special-eyebrow {
  display: block;
  margin-bottom: .18rem;
  font-family: var(--font-body);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}

.special-header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.05;
}

.special-header p {
  margin: .2rem 0 0;
  color: rgba(255,255,255,.78);
  font-size: .72rem;
}

.special-actions {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.special-font-controls {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .16rem;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
}

.special-font-controls button {
  min-height: 1.82rem;
  min-width: 2.05rem;
  padding: .22rem .38rem;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.92);
  color: var(--black);
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}

.special-font-controls button:hover {
  background: var(--gold);
  color: var(--black);
}

.special-font-controls button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.special-body {
  max-height: min(68vh, 40rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  background: var(--paper);
  border-top: 1px solid rgba(7,7,7,.18);
}

.special-body:focus {
  outline: none;
}

.special-body:focus-visible {
  outline: 2px solid rgba(184,134,11,.35);
  outline-offset: -2px;
}

.special-content {
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(1rem, 2.6vw, 1.7rem);
  padding-bottom: 4rem;
  font-family: var(--font-serif);
  font-size: calc(clamp(1rem, 1.55vw, 1.14rem) * var(--special-text-scale) / 100);
  line-height: 1.62;
  color: var(--ink);
}

.special-content h3,
.special-content h4 {
  margin: 1.25rem 0 .55rem;
  font-family: var(--font-body);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  scroll-margin-top: 1rem;
}

.special-content p {
  margin: .55rem 0;
}

.special-rubric,
.special-antiphon {
  color: var(--red);
  font-style: italic;
}

.special-loading,
.special-liturgy code {
  font-family: var(--font-body);
}

.santoral-link.disabled {
  opacity: .55;
  pointer-events: none;
}

@media (max-width: 760px) {
  .mode-tabs {
    grid-template-columns: 1fr;
    gap: .42rem;
  }

  .special-card {
    max-height: 76vh;
  }

  .special-header {
    flex-direction: column;
    padding: .65rem .7rem;
  }

  .special-actions {
    width: 100%;
    align-items: stretch;
  }

  .special-font-controls {
    width: 100%;
    justify-content: center;
  }

  .special-font-controls button {
    flex: 1;
    min-height: 1.75rem;
    font-size: .58rem;
  }

  .special-actions .santoral-link {
    width: 100%;
    justify-content: center;
  }

  .special-body {
    max-height: 58vh;
  }

  .special-content {
    padding: .9rem .78rem 4.8rem;
    font-size: calc(1rem * var(--special-text-scale) / 100);
    line-height: 1.56;
  }
}


/* === Ajuste visual tipo Episcopado: Cambria y controles - / + === */
.special-card,
.special-body,
.special-content {
  background: #fff !important;
}

.special-card {
  border: 1px solid #111;
}

.special-body {
  border-top: 1px solid #111 !important;
}

.special-content {
  font-family: Cambria, "Cambria Math", Georgia, "Times New Roman", serif !important;
  color: #222 !important;
  line-height: 1.35 !important;
}

.special-content h3,
.special-content h4 {
  font-family: Cambria, "Cambria Math", Georgia, "Times New Roman", serif !important;
  font-size: 1em !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #ff0000 !important;
  font-weight: normal !important;
}

.special-rubric,
.special-antiphon {
  color: #ff0000 !important;
}

.special-actions {
  align-items: flex-start;
}

.special-font-controls {
  display: inline-flex !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.special-font-controls button {
  min-width: 56px !important;
  width: 56px !important;
  height: 23px !important;
  min-height: 23px !important;
  padding: 0 !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #000 !important;
  font-family: Cambria, "Cambria Math", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.special-font-controls button + button {
  margin-left: -1px;
}

.special-font-controls button:hover,
.special-font-controls button:focus {
  background: #f1f1f1 !important;
  color: #000 !important;
}

.special-font-controls button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

@media (max-width: 760px) {
  .special-font-controls {
    width: auto !important;
    align-self: flex-end;
  }

  .special-font-controls button {
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 23px !important;
    min-height: 23px !important;
    font-size: 15px !important;
  }

  .special-content {
    line-height: 1.38 !important;
  }
}


/* === Encabezado compacto para el cuadro de Orden === */
.special-header {
  min-height: 0 !important;
  padding: .34rem .55rem !important;
  gap: .45rem !important;
  align-items: center !important;
}

.special-eyebrow {
  margin-bottom: .08rem !important;
  font-size: .46rem !important;
  line-height: 1 !important;
  letter-spacing: .11em !important;
}

.special-header h2 {
  font-size: clamp(.92rem, 1.55vw, 1.12rem) !important;
  line-height: 1 !important;
}

.special-header p {
  margin-top: .08rem !important;
  font-size: .58rem !important;
  line-height: 1.05 !important;
}

.special-actions {
  gap: .25rem !important;
}

.special-font-controls button {
  height: 21px !important;
  min-height: 21px !important;
}

.special-actions .santoral-link {
  min-height: 21px !important;
  padding-top: .16rem !important;
  padding-bottom: .16rem !important;
  font-size: .52rem !important;
  line-height: 1 !important;
}

@media (max-width: 760px) {
  .special-header {
    padding: .34rem .48rem !important;
    gap: .34rem !important;
  }

  .special-header h2 {
    font-size: .98rem !important;
  }

  .special-header p {
    font-size: .57rem !important;
  }

  .special-eyebrow {
    font-size: .45rem !important;
  }

  .special-actions {
    gap: .22rem !important;
  }

  .special-font-controls button {
    height: 21px !important;
    min-height: 21px !important;
  }

  .special-actions .santoral-link {
    min-height: 21px !important;
    padding-top: .16rem !important;
    padding-bottom: .16rem !important;
  }
}


/* === Formato fiel al PDF de Vísperas Santiago === */
.pdf-liturgic-document {
  font-family: Cambria, "Cambria Math", Georgia, "Times New Roman", serif !important;
  color: #222 !important;
  line-height: 1.34 !important;
}

.pdf-liturgic-document .pdf-line {
  margin: 0 0 .08rem;
  min-height: 1.08em;
  font: inherit;
}

.pdf-liturgic-document .pdf-center {
  text-align: center;
}

.pdf-liturgic-document .pdf-indent {
  margin-left: var(--pdf-indent, 1.8rem);
}

.pdf-liturgic-document .pdf-split {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.pdf-liturgic-document .pdf-part:last-child {
  margin-left: auto;
  text-align: right;
}

.pdf-liturgic-document .pdf-red {
  color: #ee0000 !important;
}

.pdf-liturgic-document .pdf-bold {
  font-weight: 700 !important;
}

.pdf-liturgic-document .pdf-italic {
  font-style: italic !important;
}

@media (max-width: 760px) {
  .pdf-liturgic-document {
    line-height: 1.36 !important;
  }

  .pdf-liturgic-document .pdf-line {
    margin-bottom: .12rem;
  }

  .pdf-liturgic-document .pdf-indent {
    margin-left: min(var(--pdf-indent, 1.5rem), 1.65rem);
  }

  .pdf-liturgic-document .pdf-split {
    flex-wrap: wrap;
    gap: .15rem .75rem;
  }

  .pdf-liturgic-document .pdf-part:last-child {
    text-align: left;
  }
}


/* === Alineación izquierda del encabezado de Orden en celular === */
@media (max-width: 760px) {
  .special-header {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .special-title-wrap,
  .special-eyebrow,
  .special-header h2,
  .special-header p {
    width: 100% !important;
    text-align: left !important;
  }

  .special-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
}

/* === Footer mini en móvil === */
@media (max-width: 760px) {
  footer {
    margin-top: .35rem;
    padding: .38rem .65rem;
    font-size: .58rem;
    line-height: 1.15;
    gap: .45rem;
    border-top-width: 2px;
  }

  footer span {
    display: inline-block;
    max-width: calc(100% - 2.2rem);
  }

  .footer-help {
    width: 1.15rem !important;
    height: 1.15rem !important;
    min-width: 1.15rem;
    font-size: .62rem !important;
  }
}

/* === Botones de Orden en móvil: PDF izquierda, tamaño derecha === */
@media (max-width: 760px) {
  .special-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: .6rem !important;
    margin-top: .55rem !important;
  }

  .special-actions .santoral-link {
    order: 1 !important;
    flex: 0 0 4.35rem !important;
    width: 4.35rem !important;
    min-width: 4.35rem !important;
    max-width: 4.35rem !important;
    height: 1.45rem !important;
    min-height: 1.45rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }

  .special-font-controls {
    order: 2 !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .35rem !important;
    flex: 0 0 4.35rem !important;
    width: 4.35rem !important;
  }

  .special-font-controls button {
    flex: 0 0 2rem !important;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 1.45rem !important;
    min-height: 1.45rem !important;
    padding: 0 !important;
    font-size: .72rem !important;
    line-height: 1 !important;
  }
}

/* Ocultar temporalmente sección Orden */
.orden-temporalmente-oculto {
  display: none !important;
}

.mode-tabs button.hidden {
  display: none !important;
}

.mode-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}