/* ==========================================================================
   LA GRAN BIBLIOTECA - RESPONSIVE MOBILE STYLESHEET
   Optimizada para una lectura cómoda, amplia y natural en móviles y tablets.
   ========================================================================== */

/* Prevenir desbordamiento horizontal en todo momento */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   PANTALLAS MÓVILES (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* ------------------------------------------------------------------------
     1. Botón "Volver a La Red"
     ------------------------------------------------------------------------ */
  #btn-back-network,
  .back-network-btn {
    top: 12px !important;
    left: 12px !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    gap: 6px !important;
  }

  /* Ocultar en la vista de lectura para no superponerse sobre la barra de navegación */
  body:has(.reader-container) #btn-back-network,
  body:has(.reader-container) .back-network-btn {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     2. Barra de Navegación del Lector (.reader-nav)
     ------------------------------------------------------------------------ */
  .reader-nav {
    padding: 8px 12px !important;
    height: 52px !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .reader-nav .nav-home {
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 4px 6px !important;
  }

  /* Contenedor central del buscador en el header */
  .reader-nav > div[style*="maxWidth"],
  .reader-nav > div[style*="max-width"] {
    margin: 0 4px !important;
    max-width: 150px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .reader-nav .search-container {
    width: 100% !important;
  }

  .reader-nav .search-input {
    padding: 6px 8px 6px 28px !important;
    font-size: 0.82rem !important;
    height: 30px !important;
    border-radius: 4px !important;
  }

  .reader-nav .search-icon {
    left: 8px !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* Botones de acción derecha (Audio y título) */
  .reader-nav > div[style*="display: flex"],
  .reader-nav > div[style*="display:flex"] {
    gap: 6px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .reader-nav .audio-button {
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    gap: 4px !important;
    height: 30px !important;
    border-radius: 15px !important;
    white-space: nowrap !important;
  }

  .reader-nav .audio-button svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* En móviles ocultamos el badge secundario de "Capítulo X" del header para que quepa todo sin romperse */
  .reader-nav .nav-title {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     3. Área de Lectura Principal (.content-area)
     ------------------------------------------------------------------------ */
  .content-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 68px 18px 45px !important; /* Márgenes amplios y equilibrados que aprovechan el 92% de la pantalla */
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Separador de cruz inicial */
  .content-area .cross-break,
  .content-area .cross-break[style*="marginTop"],
  .content-area .cross-break[style*="margin-top"] {
    margin: 15px 0 20px !important;
    font-size: 1.25em !important;
  }

  /* Párrafos: tipografía editorial fluida, sin huecos gigantescos */
  .content-area p {
    font-size: 1.15rem !important; /* ~18.5px, tamaño editorial óptimo para lectura continua en móvil */
    line-height: 1.75 !important;
    margin-bottom: 22px !important;
    letter-spacing: 0 !important;
    color: #262626 !important;
    text-align: left !important; /* Alineación limpia que elimina los ríos de espacios en blanco */
    text-wrap: pretty !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }

  /* Letra Capital / Capitular (Drop Cap) */
  .content-area .drop-cap {
    font-size: 3.2em !important;
    line-height: 0.82 !important;
    padding-top: 4px !important;
    padding-right: 8px !important;
    padding-left: 0 !important;
    margin-right: 4px !important;
    float: left !important;
  }

  .content-area .drop-cap-quote {
    font-size: 2.2em !important;
    line-height: 0.85 !important;
    padding-top: 6px !important;
    padding-right: 4px !important;
    float: left !important;
  }

  /* Títulos y Subtítulos */
  .chapter-heading {
    font-size: 1.85em !important;
    line-height: 1.25 !important;
    margin-bottom: 25px !important;
    padding-bottom: 18px !important;
    text-align: center !important;
    word-break: break-word !important;
  }

  .chapter-heading:after {
    margin-top: 12px !important;
    font-size: 0.4em !important;
  }

  .chapter-subheading {
    font-size: 1.3em !important;
    margin-top: 35px !important;
    margin-bottom: 20px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .content-area h1 {
    font-size: 1.55em !important;
    line-height: 1.3 !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
  }

  .content-area h2 {
    font-size: 1.35em !important;
    line-height: 1.35 !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
  }

  .content-area h3 {
    font-size: 1.15em !important;
    line-height: 1.4 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
  }

  .content-area h4 {
    font-size: 1.05em !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
  }

  /* Citas y Textos Sagrados */
  .gospel-text {
    max-width: 100% !important;
    margin: 25px 0 !important;
    padding: 14px 18px !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    border-left-width: 3px !important;
  }

  .evangelio-signature {
    max-width: 100% !important;
    margin: 30px auto !important;
    padding: 12px 0 !important;
    font-size: 0.95em !important;
  }

  /* Tablas: scroll horizontal suave para no deformar la página */
  .content-area table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 0.88rem !important;
    margin: 25px 0 !important;
  }

  .content-area th, .content-area td {
    padding: 8px 10px !important;
    line-height: 1.45 !important;
    font-size: 0.85rem !important;
  }

  /* Listas */
  .content-area ul, .content-area ol {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
  }

  .content-area li {
    margin-bottom: 8px !important;
  }

  /* Figuras e Imágenes */
  .image-figure {
    margin: 25px auto !important;
  }

  .image-figure img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px !important;
  }

  .image-figure figcaption {
    font-size: 0.8rem !important;
    margin-top: 10px !important;
  }

  /* Botón "Leer el capítulo completo" */
  .content-area .btn-primary {
    font-size: 1rem !important;
    padding: 12px 24px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    display: inline-block !important;
  }

  /* ------------------------------------------------------------------------
     4. Pie de Página del Lector (.reader-footer) y Paginación
     ------------------------------------------------------------------------ */
  .reader-footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 18px 60px !important;
    box-sizing: border-box !important;
  }

  .pagination {
    margin-top: 30px !important;
    gap: 12px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  .pagination .btn-secondary {
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    flex: 1 !important;
    text-align: center !important;
  }

  /* ------------------------------------------------------------------------
     5. Portada / Índice General (.cover-container)
     ------------------------------------------------------------------------ */
  .cover-container {
    padding: 60px 16px 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cover-header {
    margin-bottom: 30px !important;
  }

  .cover-title {
    font-size: 1.85em !important;
    letter-spacing: 1.5px !important;
    padding-bottom: 12px !important;
    margin-bottom: 8px !important;
  }

  .cover-subtitle {
    font-size: 1.05em !important;
  }

  .cover-actions {
    margin-bottom: 40px !important;
  }

  .cover-actions .btn-primary {
    padding: 10px 24px !important;
    font-size: 0.95em !important;
  }

  .cover-container video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  .transition {
    margin: 35px 0 25px !important;
    font-size: 1.1em !important;
  }

  .toc-tomes-container {
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .tome-header {
    padding: 14px 16px !important;
  }

  .tome-title {
    font-size: 1.1em !important;
  }

  .tome-subtitle {
    margin-left: 10px !important;
    font-size: 0.85em !important;
  }

  .toc-list {
    padding: 10px !important;
    max-height: 400px !important;
  }

  .toc-list-item {
    padding: 10px 12px !important;
  }

  .chapter-title {
    font-size: 0.95em !important;
  }
}