html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}

/* ------------------------------------------------------------------
   RF12 - Estilos de lectura.
   Bootstrap 5.3 cambia toda la interfaz con data-bs-theme="light|dark".
   Encima de eso, cada estilo define sus propias variables para la página
   de lectura (fondo tipo papel en el claro, contraste suave en el oscuro).
   ------------------------------------------------------------------ */
.estilo-claro {
  --lectura-fondo: #fbf8f1;
  --lectura-texto: #2b2622;
  --lectura-acento: #8a5a2b;
  --lectura-borde: #e6dccb;
}

.estilo-oscuro {
  --lectura-fondo: #1e1f24;
  --lectura-texto: #d9d6cf;
  --lectura-acento: #e0b26b;
  --lectura-borde: #34363d;
}

.lectura {
  max-width: 42rem;
  padding: 2rem 2.25rem;
  background: var(--lectura-fondo);
  color: var(--lectura-texto);
  border: 1px solid var(--lectura-borde);
  border-radius: .5rem;
}

.lectura-historia {
  color: var(--lectura-acento);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  margin-bottom: .25rem;
}

.lectura-titulo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  margin-bottom: 1.25rem;
}

.lectura-texto {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  line-height: 1.75;
  white-space: pre-line;
}

.lectura-opcion {
  white-space: normal;
}

@media (max-width: 576px) {
  .lectura {
    padding: 1.25rem 1rem;
  }
}