/* EL VERBO REVELADO — apariencia de bloc de notas en blanco.
   Sin efectos. Compatible con móvil, tablet, desktop y cualquier navegador. */

/* Reset mínimo y box-sizing uniforme */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Imágenes y contenido embebido nunca desbordan su contenedor */
img, svg, video, canvas, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

body {
    background: #ffffff;
    color: #000000;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;               /* base cómoda */
    line-height: 1.75;
    min-width: 0;
    overflow-x: hidden;            /* evita scroll horizontal accidental */
    padding-bottom: 4.5rem;        /* espacio para la barra fija de descarga */
}

/* Tipografía fluida con clamp(): se adapta sola a cualquier pantalla */
:root {
    --fs-titulo:  clamp(1.6rem, 4.5vw, 2.2rem);
    --fs-cuerpo:  clamp(1.05rem, 3vw, 1.25rem);
}

/* Cabecera */
.alba {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    border-bottom: 1px solid #000000;
    margin-bottom: 2.5rem;
}

.titulo-verbo {
    font-size: var(--fs-titulo);
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    overflow-wrap: break-word;     /* títulos largos no desbordan */
    word-break: break-word;
    line-height: 1.25;
}

.subtitulo {
    font-size: 0.95rem;
    color: #000000;
    overflow-wrap: break-word;
}

.cita {
    margin-top: 1.2rem;
    font-style: italic;
    color: #000000;
    overflow-wrap: break-word;
}

.fuente-cita {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: #000000;
}

/* Listado tipo libro continuo */
.santuario {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.entrada {
    margin-bottom: 3.5rem;
    min-width: 0;
}

.entrada h2 {
    font-size: clamp(1.3rem, 3.5vw, 1.5rem);
    font-weight: bold;
    margin-bottom: 0.4rem;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
}

.entrada .meta {
    font-size: 0.8rem;
    color: #000000;
    margin-bottom: 1.1rem;
}

.entrada .cuerpo {
    font-size: var(--fs-cuerpo);
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

.entrada .cuerpo p { margin-bottom: 1rem; }

.entrada-subtitulo {
    font-size: 1.05rem;
    font-style: italic;
    color: #000000;
    margin: -0.2rem 0 1rem;
    overflow-wrap: break-word;
}

.vacio {
    text-align: center;
    padding: 3rem 1rem;
    color: #000000;
}

/* Paginación */
.paginacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 2.5rem 0 2rem;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
}

.paginacion a,
.paginacion span {
    color: #000000;
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
}

.paginacion a { text-decoration: underline; text-underline-offset: 3px; }

/* Selector de idioma */
.selector-idioma {
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.9rem;
    font-family: Arial, sans-serif;
    font-size: 0.85rem;
}

.selector-idioma a {
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.25rem 0.1rem;
    min-height: 44px;              /* área táctil mínima recomendada */
    display: inline-flex;
    align-items: center;
}

.selector-idioma a.activo {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 2px solid #000000;
}

/* Barra fija de descarga */
.descarga-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #000000;
    padding: 0.6rem 0.8rem;
    font-family: Arial, sans-serif;
    font-size: 0.85rem;
    text-align: center;
    z-index: 10;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.06);
}

.descarga-bar a {
    display: inline-block;
    color: #000000;
    margin: 0.2rem 0.6rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: 44px;
    line-height: 44px;
}

/* RTL: árabe y urdu se visualizan correctamente */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .santuario { text-align: right; }

/* Impresión: sin barra de descarga */
@media print {
    .descarga-bar { display: none !important; }
    body { background: #ffffff; color: #000000; padding-bottom: 0; }
    .alba { border-bottom: 1px solid #000000; }
}

/* Tablet */
@media (max-width: 820px) {
    body { font-size: 17px; }
    .alba { padding: 2rem 1rem 1.8rem; }
    .santuario { padding: 0 1.2rem 2rem; }
}

/* Móvil */
@media (max-width: 520px) {
    body { font-size: 16px; line-height: 1.7; padding-bottom: 5rem; }
    .titulo-verbo { letter-spacing: 0.08em; }
    .alba { padding: 1.8rem 0.9rem 1.6rem; margin-bottom: 1.8rem; }
    .santuario { padding: 0 0.9rem 1.5rem; }
    .entrada { margin-bottom: 2.8rem; }
    .descarga-bar { font-size: 0.8rem; padding: 0.5rem 0.4rem; }
    .descarga-bar a { margin: 0.2rem 0.4rem; }
    .paginacion { gap: 0.25rem; }
    .paginacion a, .paginacion span { padding: 0.4rem 0.5rem; }
}

/* Preferencia de movimiento reducido (compatibilidad) */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* RTL ur/ar: centrado físico garantizado en la cabecera */
html[dir="rtl"] .alba,
html[dir="rtl"] .alba h1,
html[dir="rtl"] .alba p {
    text-align: center !important;
}
html[dir="rtl"] .titulo-verbo,
html[dir="rtl"] .subtitulo,
html[dir="rtl"] .cita,
html[dir="rtl"] .fuente-cita {
    direction: rtl;
    unicode-bidi: isolate;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}