/* Variables CSS para sistema de diseño coherente */
:root {
    /* Colores - Paleta refinada con mejor contraste */
    --color-texto: #1a1a1a;
    --color-titulo: #89100f;
    --color-titulo-hover: #6b0c0b;
    --color-link: #5a5a5a;
    --color-link-hover: #89100f;
    --color-fondo: #fefefe;
    --color-fondo-alt: #f8f7f5;
    --color-fondo-elevado: #ffffff;
    --color-borde: #e0ddd8;
    --color-borde-sutil: #eae7e2;
    --color-texto-secundario: #4a4a4a;
    --color-texto-terciario: #6b6b6b;

    /* Espaciado - Sistema más generoso */
    --espacio-xs: 0.25rem;
    --espacio-s: 0.5rem;
    --espacio-m: 1rem;
    --espacio-l: 1.5rem;
    --espacio-xl: 2.5rem;
    --espacio-xxl: 4rem;

    /* Tipografía */
    --fuente-principal: 'Vollkorn', serif;
    --fuente-secundaria: 'Noto Sans', sans-serif;
    --fuente-simbolos: 'Noto Sans Symbols 2', sans-serif;

    /* Tamaños de texto - Escala más refinada */
    --tamanio-base: 100%;
    --tamano-xs: 0.75rem;
    --tamano-s: 0.875rem;
    --tamano-m: 1rem;
    --tamano-l: 1.125rem;
    --tamano-xl: 1.375rem;
    --tamano-xxl: 1.625rem;
    --tamano-titulo: 2rem;

    /* Line heights - Más generosos para legibilidad */
    --line-height-tight: 1.3;
    --line-height-normal: 1.7;
    --line-height-relaxed: 1.85;

    /* Letter spacing */
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.04em;

    /* Anchos de contenido */
    --ancho-contenido: 42rem;
    --ancho-maximo-movil: 768px;

    /* Espaciado estándar entre secciones */
    --espacio-entre-secciones: 2.5rem;

    /* Sistema de sombras - Elevación sutil */
    --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sombra-s: 0 2px 4px rgba(0, 0, 0, 0.06);
    --sombra-m: 0 4px 12px rgba(0, 0, 0, 0.08);
    --sombra-l: 0 8px 24px rgba(0, 0, 0, 0.1);
    --sombra-interna: inset 0 1px 2px rgba(0, 0, 0, 0.06);

    /* Bordes redondeados */
    --radio-xs: 2px;
    --radio-s: 4px;
    --radio-m: 6px;
    --radio-l: 8px;
    --radio-xl: 12px;

    /* Transiciones */
    --transicion-rapida: 150ms ease;
    --transicion-normal: 200ms ease;
    --transicion-suave: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Importación de fuentes optimizada */
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400;0,700;1,400&family=Noto+Sans:wght@400;700&display=swap');

/* Fuente para íconos y símbolos especiales */
@font-face {
  font-family: 'Noto Sans Symbols 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosanssymbols2/v24/I_uyMoGduATTei9eI8daxVHDyfisHr71-pTgfA.woff2) format('woff2');
  unicode-range: U+2190-21FF, U+2700-27BF; /* Solo rangos necesarios para flechas e íconos */
}

/* Estilos base */
html {
    font-size: var(--tamanio-base);
    scroll-behavior: smooth;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    font-size: var(--tamano-l);
    line-height: var(--line-height-normal);
    letter-spacing: var(--tracking-normal);
    margin: 0;
    padding: 0;
    background-color: var(--color-fondo);
    min-height: 100%;
    position: relative;
    padding-bottom: 70px; /* Espacio para la barra de navegación fija */
}

/* Enlaces */
a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transicion-rapida);
}

a:hover, a:focus {
    color: var(--color-link-hover);
}

a:focus-visible {
    outline: 2px solid var(--color-titulo);
    outline-offset: 2px;
    border-radius: var(--radio-xs);
}

/* Barra de progreso de lectura */
.barra-progreso-contenedor {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-fondo-elevado);
    padding: var(--espacio-s) 0;
    border-bottom: 1px solid var(--color-borde-sutil);
    z-index: 100;
    box-shadow: var(--sombra-s);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.barra-progreso {
    display: flex;
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
    padding: var(--espacio-xs) var(--espacio-m);
    gap: 3px;
}

.barra-progreso::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.seccion-progreso {
    flex: 1;
    height: 5px;
    background-color: var(--color-borde-sutil);
    border-radius: var(--radio-m);
    position: relative;
    transition: all var(--transicion-normal);
    cursor: pointer;
}

.seccion-progreso:hover {
    background-color: var(--color-borde);
    transform: scaleY(1.2);
}

.seccion-progreso.activa {
    background-color: var(--color-titulo);
    box-shadow: 0 0 8px rgba(137, 16, 15, 0.3);
}

.seccion-progreso.completada {
    background-color: rgba(137, 16, 15, 0.35);
}

.nombre-seccion {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    font-family: var(--fuente-secundaria);
    font-size: var(--tamano-xs);
    white-space: nowrap;
    color: var(--color-texto);
    opacity: 0;
    transition: all var(--transicion-rapida);
    padding: var(--espacio-xs) var(--espacio-s);
    background-color: var(--color-fondo-elevado);
    border-radius: var(--radio-s);
    box-shadow: var(--sombra-m);
    pointer-events: none;
    font-weight: 500;
}

.seccion-progreso:hover .nombre-seccion {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Controles de accesibilidad */
.controles-accesibilidad {
    position: fixed;
    top: var(--espacio-m);
    right: var(--espacio-m);
    display: flex;
    gap: 2px;
    z-index: 101;
    background-color: var(--color-fondo-elevado);
    border-radius: var(--radio-l);
    padding: 3px;
    box-shadow: var(--sombra-m);
    border: 1px solid var(--color-borde-sutil);
}

.btn-accesibilidad {
    border: none;
    background-color: transparent;
    color: var(--color-texto-secundario);
    font-family: var(--fuente-secundaria);
    font-size: var(--tamano-s);
    font-weight: 600;
    padding: var(--espacio-xs) var(--espacio-s);
    cursor: pointer;
    border-radius: var(--radio-m);
    transition: all var(--transicion-rapida);
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-accesibilidad:hover {
    background-color: var(--color-fondo-alt);
    color: var(--color-titulo);
}

.btn-accesibilidad:active {
    transform: scale(0.95);
}

.btn-accesibilidad:focus-visible {
    outline: 2px solid var(--color-titulo);
    outline-offset: 1px;
}

/* Feedback de accesibilidad */
#accesibilidad-feedback {
    position: fixed;
    bottom: 80px;
    right: var(--espacio-m);
    background-color: var(--color-texto);
    color: var(--color-fondo);
    padding: var(--espacio-s) var(--espacio-m);
    border-radius: var(--radio-m);
    font-family: var(--fuente-secundaria);
    font-size: var(--tamano-s);
    font-weight: 500;
    z-index: 1001;
    opacity: 0;
    transform: translateY(4px);
    transition: all var(--transicion-normal);
    box-shadow: var(--sombra-l);
}

#accesibilidad-feedback.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Contenedor principal */
.contenedor-oficio {
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    padding: var(--espacio-l) var(--espacio-m);
}

/* Encabezados */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-principal);
    margin-top: var(--espacio-xl);
    margin-bottom: var(--espacio-m);
    text-align: center;
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-tight);
}

h1 {
    font-size: var(--tamano-titulo);
    color: var(--color-titulo);
    font-weight: 700;
    margin-top: var(--espacio-xl);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--tamano-xxl);
    color: var(--color-texto);
    font-weight: 600;
}

h4 {
    color: var(--color-titulo);
    font-size: var(--tamano-xl);
    font-weight: 400;
    margin-bottom: var(--espacio-m);
    margin-top: var(--espacio-xl);
    letter-spacing: var(--tracking-wide);
}

h5 {
    font-size: var(--tamano-l);
    color: var(--color-titulo);
    margin-bottom: var(--espacio-m);
    font-weight: 600;
    text-align: center;
}

/* Fecha y título del día */
.fecha {
    text-align: center;
    font-family: var(--fuente-secundaria);
    font-size: var(--tamano-s);
    font-weight: 500;
    color: var(--color-texto-terciario);
    margin: 0 0 var(--espacio-s);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.titulo-dia {
    text-align: center;
    font-size: var(--tamano-xl);
    margin: 0 0 var(--espacio-xl);
    font-weight: 400;
    font-style: normal;
    line-height: var(--line-height-tight);
    color: var(--color-texto);
}

/* Navegación mejorada para fechas */
.navegacion-fechas {
    display: flex;
    justify-content: center;
    margin: var(--espacio-m) 0 var(--espacio-xxl);
    position: relative;
    width: 100%;
}

.nav-fechas-interior {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: var(--ancho-contenido);
}

/* Selector de oficio (Matutina/Vespertina) */
.selector-oficio {
    display: flex;
    gap: 0;
    border-radius: var(--radio-l);
    overflow: hidden;
    border: 1px solid var(--color-borde);
    margin: 0 auto;
    background-color: var(--color-fondo-alt);
    padding: 3px;
    box-shadow: var(--sombra-interna);
}

.boton-oficio {
    padding: var(--espacio-s) var(--espacio-l);
    text-align: center;
    background-color: transparent;
    transition: all var(--transicion-normal);
    flex: 1;
    min-width: 110px;
    border-radius: var(--radio-m);
    font-weight: 500;
    color: var(--color-texto-secundario);
}

.boton-oficio.activo {
    background-color: var(--color-fondo-elevado);
    color: var(--color-titulo);
    box-shadow: var(--sombra-s);
    font-weight: 600;
}

.boton-oficio:hover {
    text-decoration: none;
    color: var(--color-titulo);
}

.boton-oficio.activo:hover {
    background-color: var(--color-fondo-elevado);
    color: var(--color-titulo);
}

/* Secciones del oficio - Espaciado consistente */
.seccion-oficio {
    margin: var(--espacio-entre-secciones) 0;
    padding: var(--espacio-l) var(--espacio-m);
    max-width: var(--ancho-contenido);
    text-align: left;
    border-radius: var(--radio-m);
    transition: all var(--transicion-suave);
    position: relative;
}

.seccion-oficio:target {
    background-color: rgba(137, 16, 15, 0.03);
    box-shadow: var(--sombra-xs);
}

/* Separador sutil entre secciones principales */
.seccion-oficio::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-borde), transparent);
    margin: var(--espacio-xl) auto 0;
}

.seccion-oficio:last-child::after {
    display: none;
}

/* Versículos */
.versiculo {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--espacio-m);
    line-height: var(--line-height-relaxed);
}

.versiculo .numero {
    font-family: var(--fuente-secundaria);
    font-weight: 600;
    font-size: var(--tamano-s);
    color: var(--color-titulo);
    width: 2.25rem;
    text-align: right;
    margin-right: var(--espacio-m);
    flex-shrink: 0;
    padding-top: 0.15em;
}

.versiculo .capitulo {
    color: var(--color-titulo);
    font-weight: 700;
    margin-right: 3px;
    display: inline;
}

.versiculo .texto {
    flex: 1;
    font-size: var(--tamano-l);
    color: var(--color-texto);
    line-height: var(--line-height-relaxed);
}

/* Doxología */
.doxologia {
    font-style: italic;
    margin-top: var(--espacio-l);
    text-align: center;
    color: var(--color-texto-secundario);
    line-height: var(--line-height-relaxed);
}

/* Salmos */
.salmo {
    margin-bottom: var(--espacio-xxl);
}

.salmo h4 {
    font-size: var(--tamano-xl);
    color: var(--color-titulo);
    margin: var(--espacio-l) 0 var(--espacio-m);
    font-weight: 400;
    text-align: center;
    letter-spacing: var(--tracking-wide);
}

.salmo h5 {
    font-size: var(--tamano-m);
    margin: 0 0 var(--espacio-l);
    font-weight: 600;
    color: var(--color-titulo);
    text-align: center;
    font-style: italic;
}

/* Lecciones */
.leccion {
    margin-bottom: var(--espacio-xxl);
}

.leccion h4 {
    font-size: var(--tamano-xl);
    color: var(--color-titulo);
    margin: var(--espacio-l) 0 var(--espacio-m);
    font-weight: 400;
    text-align: center;
    letter-spacing: var(--tracking-wide);
}

/* Colectas */
.colecta {
    margin: var(--espacio-l) auto;
    padding: var(--espacio-m);
    max-width: var(--ancho-contenido);
}

.colecta p {
    margin: var(--espacio-s) 0;
    line-height: var(--line-height-relaxed);
    text-align: left;
}

.colecta h4 {
    color: var(--color-titulo);
    font-size: var(--tamano-l);
    text-align: center;
    margin-bottom: var(--espacio-m);
    font-weight: 500;
}

/* Oraciones */
.oraciones-breves {
    margin: var(--espacio-l) auto;
    line-height: var(--line-height-relaxed);
}

.oracion-respuesta {
    margin-left: 1.5rem;
    font-style: italic;
    font-size: var(--tamano-m);
    color: var(--color-texto-secundario);
}

/* Barra de navegación mejorada */
.barra-navegacion {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--espacio-xl);
    background: var(--color-fondo-elevado);
    border-top: 1px solid var(--color-borde-sutil);
    padding: var(--espacio-m) var(--espacio-l);
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.flecha {
    font-family: var(--fuente-secundaria);
    font-size: var(--tamano-s);
    font-weight: 600;
    color: var(--color-texto-secundario);
    text-decoration: none;
    transition: all var(--transicion-normal);
    display: flex;
    align-items: center;
    gap: var(--espacio-s);
    padding: var(--espacio-s) var(--espacio-m);
    border-radius: var(--radio-m);
}

.flecha:hover {
    background-color: var(--color-fondo-alt);
    color: var(--color-titulo);
    text-decoration: none;
    transform: translateY(-1px);
}

.flecha:active {
    transform: translateY(0);
}

.flecha-simbolo {
    font-family: var(--fuente-simbolos);
    font-size: var(--tamano-l);
    color: inherit;
    vertical-align: middle;
    transition: transform var(--transicion-rapida);
}

.flecha:hover .flecha-simbolo {
    transform: scale(1.1);
}

.flecha.deshabilitado {
    color: var(--color-borde);
    pointer-events: none;
    opacity: 0.4;
}

.boton-hoy {
    font-family: var(--fuente-secundaria);
    font-size: var(--tamano-s);
    font-weight: 600;
    padding: var(--espacio-s) var(--espacio-l);
    border-radius: var(--radio-l);
    background-color: var(--color-titulo);
    color: var(--color-fondo);
    text-align: center;
    transition: all var(--transicion-normal);
    cursor: pointer;
    box-shadow: var(--sombra-s);
    border: none;
}

.boton-hoy:hover {
    background-color: var(--color-titulo-hover);
    text-decoration: none;
    color: var(--color-fondo);
    transform: translateY(-1px);
    box-shadow: var(--sombra-m);
}

.boton-hoy:active {
    transform: translateY(0);
    box-shadow: var(--sombra-xs);
}

/* Footer */
.footer-falso {
    text-align: center;
    font-family: var(--fuente-secundaria);
    font-size: var(--tamano-s);
    color: var(--color-texto-terciario);
    background-color: var(--color-fondo-alt);
    padding: var(--espacio-xl) var(--espacio-m);
    margin-top: var(--espacio-xxl);
    border-top: 1px solid var(--color-borde-sutil);
}

.footer-falso a {
    color: var(--color-titulo);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transicion-rapida);
}

.footer-falso a:hover {
    color: var(--color-titulo-hover);
}

/* Media Queries */
@media only screen and (max-width: 768px) {
    :root {
        --ancho-contenido: 100%;
        --espacio-xl: 2rem;
        --espacio-xxl: 3rem;
        --espacio-entre-secciones: 2rem;
    }

    body {
        font-size: var(--tamano-m);
        padding-bottom: 60px;
    }

    h1 {
        font-size: calc(var(--tamano-titulo) * 0.85);
        margin: var(--espacio-l) 0 var(--espacio-s);
    }

    .fecha {
        font-size: var(--tamano-xs);
    }

    h4 {
        font-size: var(--tamano-l);
        margin-top: var(--espacio-l);
    }

    .contenedor-oficio {
        padding: var(--espacio-m) var(--espacio-s);
    }

    /* Navegación en fila para centrar Matutina/Vespertina */
    .nav-fechas-interior {
        flex-direction: row;
        justify-content: center;
        gap: var(--espacio-s);
    }

    .selector-oficio {
        width: auto;
        margin: 0 auto;
    }

    .boton-oficio {
        min-width: 100px;
        padding: var(--espacio-xs) var(--espacio-m);
    }

    .seccion-oficio {
        padding: var(--espacio-m) var(--espacio-s);
        margin: var(--espacio-l) auto;
    }

    .seccion-oficio::after {
        margin-top: var(--espacio-l);
    }

    .versiculo .numero {
        width: 1.75rem;
        margin-right: var(--espacio-s);
    }

    .versiculo .texto {
        font-size: var(--tamano-m);
    }

    .barra-navegacion {
        padding: var(--espacio-s) var(--espacio-m);
        gap: var(--espacio-m);
    }

    .flecha {
        padding: var(--espacio-xs) var(--espacio-s);
    }

    .flecha-simbolo {
        font-size: var(--tamano-m);
    }

    .texto-flecha {
        display: none;
    }

    .boton-hoy {
        font-size: var(--tamano-xs);
        padding: var(--espacio-xs) var(--espacio-m);
    }

    .footer-falso {
        padding: var(--espacio-l) var(--espacio-m);
    }

    .controles-accesibilidad {
        top: auto;
        bottom: 70px;
        right: var(--espacio-s);
    }

    .barra-progreso {
        overflow-x: auto;
        padding: var(--espacio-xs) var(--espacio-s);
    }

    .barra-progreso-contenedor {
        padding: var(--espacio-xs) 0;
    }
}

/* ===========================================
   LETRAS CAPITULARES (DROP CAPS)
   Estilo litúrgico tradicional BCP 1662

   INCLUIR: Oraciones largas, Colectas, Credos
   EXCLUIR: Lecciones, Salmos, Cánticos, Doxología,
            Diálogos cortos, Súplicas, Respuestas
   =========================================== */

/* ===========================================
   SECCIONES CON DROP CAP
   =========================================== */

/* Exhortación, Confesión, Absolución */
#exhortacion > p:first-of-type::first-letter,
#confesion > p:first-of-type::first-letter,
#absolucion > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    padding-top: 0.08em;
    color: var(--color-titulo);
    font-family: var(--fuente-principal);
    font-weight: 400;
}

/* Credo de los Apóstoles */
#credo > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    padding-top: 0.08em;
    color: var(--color-titulo);
    font-family: var(--fuente-principal);
    font-weight: 400;
}

/* Padrenuestro (primer <p> directo, NO dentro de .oraciones-breves) */
#padrenuestro1 > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    padding-top: 0.08em;
    color: var(--color-titulo);
    font-family: var(--fuente-principal);
    font-weight: 400;
}

/* Segundo Padrenuestro en #oraciones (después del h4, antes de .oraciones-breves) */
#oraciones h4 + p::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    padding-top: 0.08em;
    color: var(--color-titulo);
    font-family: var(--fuente-principal);
    font-weight: 400;
}

/* ===========================================
   COLECTAS - Cada oración después de h4
   =========================================== */

/* Colecta del día */
#colectas .colecta > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    padding-top: 0.08em;
    color: var(--color-titulo);
    font-family: var(--fuente-principal);
    font-weight: 400;
}

/* Colectas del servicio (cada h4 + p) */
#colectas h4 + p::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    padding-top: 0.08em;
    color: var(--color-titulo);
    font-family: var(--fuente-principal);
    font-weight: 400;
}

/* ===========================================
   ORACIONES FINALES - Cada oración después de h4
   =========================================== */

#bendicion h4 + p::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    padding-top: 0.08em;
    color: var(--color-titulo);
    font-family: var(--fuente-principal);
    font-weight: 400;
}

/* ===========================================
   CREDO DE SAN ATANASIO
   =========================================== */

.credo-atanasio .versiculo:first-of-type .texto::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    padding-top: 0.08em;
    color: var(--color-titulo);
    font-family: var(--fuente-principal);
    font-weight: 400;
}

/* ===========================================
   EXCLUSIONES - Sin drop caps
   =========================================== */

/* Salutación y Kyrie (diálogos cortos) */
.salutation p::first-letter,
#oraciones .salutation p::first-letter {
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Oraciones breves y súplicas */
.oraciones-breves p::first-letter {
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Respuestas litúrgicas */
.oracion-respuesta::first-letter,
p.oracion-respuesta::first-letter {
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Lecciones bíblicas */
.leccion p::first-letter,
.leccion .versiculo .texto::first-letter,
#leccion1 .leccion p::first-letter,
#leccion2 .leccion p::first-letter {
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Salmos y cánticos (excepto Credo de San Atanasio) */
.salmo:not(.credo-atanasio) .versiculo .texto::first-letter,
.salmo:not(.credo-atanasio) p::first-letter {
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Doxología (Gloria Patri) */
.doxologia::first-letter,
p.doxologia::first-letter {
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Rúbricas */
.rubrica::first-letter,
p.rubrica::first-letter {
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Colectas adicionales de Adviento/Cuaresma - CON drop cap */
.colecta-adicional::first-letter,
p.colecta-adicional::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.12em;
    padding-top: 0.08em;
    color: var(--color-titulo);
    font-family: var(--fuente-principal);
    font-weight: 400;
}

/* ===========================================
   RESPONSIVE - Drop caps en móviles
   =========================================== */

@media only screen and (max-width: 768px) {
    #exhortacion > p:first-of-type::first-letter,
    #confesion > p:first-of-type::first-letter,
    #absolucion > p:first-of-type::first-letter,
    #credo > p:first-of-type::first-letter,
    #padrenuestro1 > p:first-of-type::first-letter,
    #oraciones h4 + p::first-letter,
    #colectas .colecta > p:first-of-type::first-letter,
    #colectas h4 + p::first-letter,
    #bendicion h4 + p::first-letter,
    .credo-atanasio .versiculo:first-of-type .texto::first-letter,
    .colecta-adicional::first-letter {
        font-size: 2.8em;
        line-height: 0.85;
        padding-right: 0.1em;
        padding-top: 0.06em;
    }
}

@media only screen and (max-width: 380px) {
    #exhortacion > p:first-of-type::first-letter,
    #confesion > p:first-of-type::first-letter,
    #absolucion > p:first-of-type::first-letter,
    #credo > p:first-of-type::first-letter,
    #padrenuestro1 > p:first-of-type::first-letter,
    #oraciones h4 + p::first-letter,
    #colectas .colecta > p:first-of-type::first-letter,
    #colectas h4 + p::first-letter,
    #bendicion h4 + p::first-letter,
    .credo-atanasio .versiculo:first-of-type .texto::first-letter,
    .colecta-adicional::first-letter {
        font-size: 2.4em;
        line-height: 0.9;
        padding-right: 0.08em;
        padding-top: 0.05em;
    }
}

/* ===========================================
   FIN DROP CAPS
   =========================================== */

/* Utilidades */
.hang {
    padding-left: 2rem;
    text-indent: -2rem;
}

.center {
    text-align: center;
}

/* Mensajes de error */
.error {
    color: #d32f2f;
    font-style: italic;
    text-align: center;
    padding: var(--espacio-s);
    background-color: #ffebee;
    border-radius: 4px;
    margin: var(--espacio-m) 0;
}

/* Ajuste para pantallas muy pequeñas */
@media only screen and (max-width: 380px) {
    :root {
        --espacio-entre-secciones: 1.5rem;
    }

    body {
        font-size: calc(var(--tamano-m) * 0.95);
    }

    h1 {
        font-size: calc(var(--tamano-titulo) * 0.75);
    }

    .barra-navegacion {
        padding: var(--espacio-xs) var(--espacio-s);
        gap: var(--espacio-s);
    }

    /* Asegurar que los botones de Matutina/Vespertina sigan visibles */
    .boton-oficio {
        min-width: 85px;
        padding: var(--espacio-xs) var(--espacio-s);
        font-size: var(--tamano-s);
    }

    .controles-accesibilidad {
        padding: 2px;
    }

    .btn-accesibilidad {
        min-width: 28px;
        padding: var(--espacio-xs);
        font-size: var(--tamano-xs);
    }

    .seccion-oficio::after {
        width: 40px;
    }
}

/* Estilos para scroll */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-fondo-alt);
    border-radius: var(--radio-s);
}

::-webkit-scrollbar-thumb {
    background: var(--color-borde);
    border-radius: var(--radio-s);
    transition: background var(--transicion-rapida);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-texto-terciario);
}

/* Selección de texto */
::selection {
    background-color: rgba(137, 16, 15, 0.15);
    color: var(--color-texto);
}

/* Focus visible para accesibilidad */
*:focus-visible {
    outline: 2px solid var(--color-titulo);
    outline-offset: 2px;
}