/* ==============================================================
   style.css - Archivo consolidado (v7) con ajustes móviles añadidos
   He mantenido todo tu CSS original y añadí al final un bloque
   con overrides móviles para que el visor se vea bien en celulares.
   ============================================================== */

/* ---------------- Variables globales (control centralizado) ---------------- */
:root{
    /* Header / espacio superior (fallback estático, puede actualizarse por JS) */
    --site-header-h: 50px; /* Ajusta aquí la altura visual reservada para header + búsqueda */

    /* Variables legacy/fallback usadas en varias reglas */
    --header-h: 60px;

    /* Flipbook global */
    --flipbook-maxw: 1600px;                                /* ancho máximo global del flipbook */
    --flipbook-maxh: calc(100vh - var(--header-h) - 180px); /* altura máxima global del flipbook */

    /* Flipbook lector (leer.php) - valores centralizados para este visor */
    --flipbook-lector-height-vh: 78vh; /* altura relativa por defecto del lector (cambia aquí) */
    --flipbook-lector-minh: 320px;     /* altura mínima absoluta para el lector */
    --flipbook-lector-maxw: 1200px;    /* ancho máximo del lector */

    /* Fallback para iframe PDF */
    --pdf-iframe-height-vh: 80vh;
    --pdf-iframe-minh: 300px;

    /* Espacio entre páginas (gutter). Cambia a 0 para pegar páginas, >0 para separarlas */
    --flipbook-gutter: 0px;
}

/* ---------------- Reset / Body ---------------- */
body {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    /* usamos la variable central para dejar espacio al header fijo */
    padding-top: calc(var(--site-header-h) + 12px);
    background-color: #f4f4f4;
    color: #333;
    font-family: Arial, sans-serif;
}

/* ---------------- Header y búsqueda (mantengo comportamiento sticky/fijo) ---------------- */
.header-search {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ec1d4c;
    padding: 14px 18px;
    border-bottom: 2px solid #ddd;
    text-align: center;
    width: 100%;
    min-height: var(--site-header-h);
    box-sizing: border-box;
}

.header-search form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.header-search input[type="text"],
.header-search select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 250px;
}

.header-search button {
    background: #ec1d4c;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.header-search button:hover {
    background: #c9143c;
}

/* header fijo con logo (si se usa) */
.header-bar {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--site-header-h);
    background-color: #ec1d4c;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-bottom: 2px solid #c9143c;
    gap: 20px;
    box-sizing: border-box;
}

.header-container {
    width: 100%;
    background-color: #ec1d4c;
    padding: 0 20px;
    position: fixed;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-bottom: 2px solid #c9143c;
    height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: var(--site-header-h);
    box-sizing: border-box;
}

.header-logo {
    height: 30px;
    object-fit: contain;
}

.header-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
}

.header-search-form select {
    padding: 8px;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.header-search-form button {
    background-color: #fff;
    color: #ec1d4c;
    font-weight: bold;
    border: 1px solid #ec1d4c;
    border-radius: 20px;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.3s;
}

.header-search-form button:hover {
    background-color: #ec1d4c;
    color: #fff;
}

/* icono dentro de input de búsqueda */
.search-icon {
    position: absolute;
    left: 10px;
    font-size: 16px;
    color: #555;
}

/* ---------------- Contenido principal - listado de PDFs ---------------- */
h1 {
    text-align: center;
    color: #ec1d4c;
    font-size: 28px;
    margin-top: 20px;
}

/* listados */
.contenedor-pdfs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    margin-top: 18px; /* separación adicional desde el header */
    padding-top: 6px;
}

.pdf-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 250px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    box-sizing: border-box;
}

.pdf-item:hover {
    transform: translateY(-5px);
}

.pdf-item img.thumbnail {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

/* acciones por item */
.acciones {
    margin-top: 10px;
}

.acciones a {
    display: inline-block;
    background: #ec1d4c;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    margin: 5px;
    transition: background 0.3s ease-in-out;
}

.acciones a:hover {
    background: #c9143c;
}

/* No results */
.no-results {
    text-align: center;
    font-size: 18px;
    color: #555;
    margin-top: 20px;
}

/* ---------------- Formularios, login, admin (preservados) ---------------- */
.login-container {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 30px;
    max-width: 400px;
    margin: 100px auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.login-box h2 {
    color: #ec1d4c;
    text-align: center;
    margin-bottom: 20px;
}

.login-box input[type="text"],
.login-box input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.login-box button {
    width: 100%;
    padding: 10px;
    background-color: #ec1d4c;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.login-box button:hover {
    background-color: #c9143c;
}

.error {
    color: red;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

/* Admin */
.admin-container {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    margin: 50px auto;
    max-width: 700px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.admin-container h1,
.admin-container h2 {
    text-align: center;
    color: #ec1d4c;
}

.admin-container form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-container label {
    font-weight: bold;
    margin-bottom: 5px;
}

.admin-container input[type="text"],
admin-container textarea,
.admin-container select,
.admin-container input[type="file"] {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.admin-container button {
    background-color: #ec1d4c;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-container button:hover {
    background-color: #c9143c;
}

.admin-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
}

.admin-container th,
.admin-container td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.admin-container th {
    background-color: #ec1d4c;
    color: white;
}

/* ---------------- Flipbook / visor - reglas centralizadas ---------------- */
/* Contenedor general para flipbook en listados / plugins */


/* Regla específica para el lector (leer.php) que presiona más el visor.
   Esto evita romper flipbooks en otras páginas y concentra los valores grandes aquí. */
.contenedor-lector .flipbook-container {
    position: relative;
    max-width: var(--flipbook-lector-maxw);
    margin: 18px auto 0 auto; /* reducido para acercar la descripción */
    background: #fff;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: var(--flipbook-lector-minh);
    height: var(--flipbook-lector-height-vh);
    padding: 0 1vw;
    box-sizing: border-box;
}

/* Imágenes / canvas / páginas internas */
.flipbook-container img,
.flipbook-container canvas,
.flipbook-container .page,
.flipbook-container .fb3d-page,
.flipbook-container .fb3d-wrapper {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
}

/* Stage y viewport usados por plugins */
.flipbook-stage{
    width: 100%;
    max-width: min(var(--flipbook-maxw), 98vw);
    margin: 8px auto 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.flipbook-viewport{
    height: var(--flipbook-maxh);
    display:flex; align-items:center; justify-content:center;
    overflow: visible;
}

.flipbook-viewport canvas,
.flipbook-viewport img,
.flipbook-viewport .page,
.flipbook-viewport .fb3d-page,
.flipbook-viewport .fb3d-wrapper{
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.flipbook-stage.fullwidth{
    width: 100vw;
    max-width: 98vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Página en doble vista (lector) */
.flipbook-page {
    width: 50%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
    background: transparent;
    border: none;
}

/* Controles (flechas, número de página) */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    background-color: rgba(0,0,0,0.3);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
}

.nav-button.left { left: 10px; }
.nav-button.right { right: 10px; }

/* Flechas modernas estilo visor (reutilizadas) */
.nav-arrow {
    width: 48px;
    height: 48px;
    background: rgba(236,29,76,0.92);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    z-index: 100;
}

.nav-arrow:focus {
    outline: 2px solid #ec1d4c;
}

.nav-arrow:hover {
    background-color: rgba(60, 60, 60, 0.9);
}

.nav-arrow.left { left: 10px; }
.nav-arrow.right { right: 10px; }

/* Controles y número de página */
.flipbook-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 12px; /* reducido para acercar la descripción */
    margin-bottom: 18px;
    position: relative;
    z-index: 10;
}

.flipbook-page-number {
    color: #ec1d4c;
    font-weight: bold;
    font-size: 18px;
    padding: 4px 18px;
    border-radius: 10px;
    background: none;
    letter-spacing: 1px;
}

/* Info autor / año y descripción (lector) */
.info-autor-anio {
    font-size: 16px;
    color: #444;
    background: #fafafa;
    padding: 8px 14px;
    border-radius: 7px;
    margin-bottom: 10px;
    display: inline-block;
}

/* PDF fallback viewer container */
.pdf-viewer-container {
    max-width: 950px;
    margin: 0 auto 18px auto;
    box-shadow: 0 6px 32px rgba(0,0,0,0.12);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    padding: 0;
}

.pdf-iframe {
    width: 100%;
    height: var(--pdf-iframe-height-vh);
    min-height: var(--pdf-iframe-minh);
    border: none;
    display: block;
    border-radius: 16px;
    background: #fafafa;
}

/* Botones de acción */
.btn-descargar {
    display: inline-block;
    background: #ec1d4c;
    color: #fff;
    padding: 9px 28px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 8px;
    margin-top: 16px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(236,29,76,0.10);
    transition: background 0.2s;
}

.btn-descargar:hover {
    background: #c30038;
}

/* Descripción del PDF */
.descripcion-pdf {
    margin: 12px auto 0 auto; /* reducido para subir el texto */
    max-width: 900px;
    padding: 12px 18px;
    font-size: 1.09rem;
    color: #333;
    background: #f9f9f9;
    border-radius: 8px;
}

/* Resumen / títulos */
h3 {
    margin-top: 20px;
    font-size: 1.2rem;
    color: #222;
}

hr {
    max-width: 950px;
    margin: 20px auto 10px auto;
    color: #ddd;
}

/* ---------------- Page title y contenedor lector (compatibilidad) ---------------- */
.page-title {
    max-width: 100vw;
    margin: 2px auto 4px auto; /* más arriba */
    padding: 0 2vw;
    text-align: center;
    box-sizing: border-box;
}

.page-title.fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.contenedor-lector {
    width: 100vw;
    max-width: 1200px;
    margin: 2px auto 0 auto; /* menos espacio superior */
    padding-top: 3px;
    box-sizing: border-box;
}

/* ---------------- Sugerencias y búsqueda (lista desplegable) ---------------- */
.sugerencias-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 250px;
    overflow-y: auto;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.sugerencias-box li {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.sugerencias-box li:hover {
    background-color: #f2f2f2;
}

/* Caja de búsqueda interna */
.search-box input[type="text"] {
    padding: 8px 10px 8px 32px;
    border-radius: 0px;
    border: 1px solid #ccc;
    font-size: 14px;
    width: 250px;
    outline: none;
    margin: 0;
    box-shadow: none;
    background-color: white;
    display: block;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

/* ---------------- Visor fondo (si se usa) ---------------- */
.visor-fondo {
    background-color: #2f2f2f;
    min-height: 100vh;
    padding: 40px 0;
    padding-top: calc(var(--header-h) + 24px) !important;
}

/* ---------------- Flechas z-index por seguridad ---------------- */
.nav-arrow{ z-index: 100; }

/* ---------------- Responsive (ajustes y sobrescrituras) ---------------- */
@media screen and (max-width: 950px) {
    .pdf-viewer-container, .descripcion-pdf, .flipbook-container { max-width: 98vw; }
    .pdf-iframe { height: calc(var(--pdf-iframe-height-vh) * 0.75); min-height: 300px; }
    .flipbook-container { margin-top: 18px; }
    .flipbook-viewport canvas,
    .flipbook-viewport img,
    .flipbook-viewport .page,
    .flipbook-viewport .fb3d-page,
    .flipbook-viewport .fb3d-wrapper {
        max-height: calc(var(--flipbook-maxh) * 0.75);
    }
}

@media screen and (max-width: 768px) {
    .header-search form {
        flex-direction: column;
        gap: 5px;
    }
    .header-search input,
    .header-search select {
        width: 100%;
    }
    .contenedor-pdfs {
        flex-direction: column;
        align-items: center;
    }
    .pdf-container {
        width: 100%;
        height: 50vh;
    }
    h2, h3 {
        font-size: 20px;
    }
    .link-button {
        width: 100%;
    }

    /* Móvil: el header puede ocupar más en pantallas pequeñas */
    :root { /* Este override es útil como fallback; si usas JS dinámico, JS lo reemplaza */
        --site-header-h: 96px;
        --flipbook-lector-height-vh: 48vh;
        --flipbook-lector-minh: 260px;
    }
    body { padding-top: calc(var(--site-header-h) + 8px); }
    .flipbook-container { margin-top: 18px; min-height: 260px; height: auto; }
    .contenedor-pdfs { margin-top: 12px; }
}

@media screen and (max-width: 600px) {
    .info-autor-anio, .descripcion-pdf { padding: 6px 7px; font-size: 15px;}
    .pdf-iframe { height: 52vw; min-height: 220px;}
    .flipbook-container { flex-direction: column; min-height: 0; height: auto;}
    .flipbook-page { width: 100%; height: 100%; margin-bottom: 1px; object-fit: contain; }
    .flipbook-controls { gap: 16px; }
}

/* ---------------- Notas finales ----------------
   - Para cambiar el espacio superior reservado para el header: modifica --site-header-h en :root.
   - Para cambiar el tamaño global del flipbook: modifica --flipbook-maxw y --flipbook-maxh.
   - Para cambiar sólo el visor de leer.php (más grande): modifica --flipbook-lector-height-vh,
     --flipbook-lector-minh y --flipbook-lector-maxw.
   - Si quieres que la altura del header se calcule automáticamente, añade el script JS
     que actualice --site-header-h en tiempo de ejecución (recomendado). Mantengo todo el CSS
     original y las clases que ya utilizas en index.php y leer.php.
   --------------------------------------------------------------------------- */


/* ==============================================================
   BLOQUE AÑADIDO: Ajustes adicionales para MÓVILES (solo overrides)
   - Este bloque es extra al final para asegurar que en móviles:
     * el flipbook no reserva una altura fija grande,
     * las páginas se apilan y ocupan el ancho correcto,
     * las imágenes/canvas/iframe ocupen 100% del ancho,
     * se reducen márgenes que causaban huecos en vertical.
   - No modifica reglas desktop.
   ============================================================== */

@media (max-width: 600px) {
  /* Ajustes de espacio superior y body para móviles */
  :root { --site-header-h: 64px; }
  body { padding-top: calc(var(--site-header-h) + 8px) !important; }

  /* Forzar contenedor lector full width y quitar altura fija para evitar huecos */
  .contenedor-lector,
  .contenedor-lector.fullwidth {
    width: 100vw !important;
    max-width: none !important;
    margin: 6px 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .contenedor-lector .flipbook-container,
  .flipbook-container {
    flex-direction: column !important; /* apilar páginas en móvil */
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 6px 0 !important;
    height: auto !important;     /* quitar altura fija para evitar huecos */
    min-height: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    justify-content: flex-start !important;
  }

  /* Cada página ocupa todo el ancho del viewport y se muestra a tamaño natural */
  .flipbook-page {
    width: 100vw !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Asegurar que canvas/iframe ocupen ancho y no queden centrados con hueco */
  .flipbook-container img,
  .flipbook-container canvas,
  .flipbook-viewport canvas,
  .flipbook-viewport img,
  .pdf-iframe {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Reducir márgenes y ajustar controles/números para móvil */
  .flipbook-controls { gap: 16px !important; margin-top: 12px !important; margin-bottom: 12px !important; }
  .flipbook-page-number { font-size: 16px !important; padding: 6px 12px !important; }
  .descripcion-pdf { margin: 10px 8px !important; padding: 10px !important; box-sizing: border-box; }

  /* Evitar grandes márgenes en el stage */
  .flipbook-stage, .flipbook-stage.fullwidth { padding: 0 !important; margin-top: 6px !important; }

  /* Si algún plugin está usando ancho/alto internos, forzamos overflow visible y redraw-friendly */
  .flipbook-viewport { overflow: visible !important; }

  /* Si persisten líneas finas por subpíxeles, sumar una ligera superposición puede ayudar
     (opcional): descomentar la siguiente línea si es necesario: */
  .flipbook-page { width: calc(100vw + 0.5px) !important; margin-left: -0.25px !important; }
 
}

/* =================== FIN BLOQUE AÑADIDO =================== */


/* === OVERRIDE: flipbook más ancho en desktop === */
@media (min-width: 992px) {
  :root{
    /* sube límites globales */
    --flipbook-lector-maxw: 1800px;   /* antes 1200px */
    --flipbook-maxw: 2200px;          /* ancho máximo global del stage */
    --flipbook-lector-height-vh: 82vh;/* (opcional) un poco más alto */
  }

  /* el contenedor del lector casi a todo el viewport */
  .contenedor-lector{
    max-width: 90vw !important;
  }

  /* el contenedor interno del flipbook también */
  .contenedor-lector .flipbook-container{
    max-width: 90vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* el "stage" del flipbook (turn/3D FlipBook) acompaña el ancho */
  .flipbook-stage{
    max-width: 90vw !important;
  }
}

/* OPCIONAL: si quieres 100% real del viewport al activar la clase "fullwidth" */
@media (min-width: 992px) {
  .contenedor-lector.fullwidth,
  .contenedor-lector.fullwidth .flipbook-container,
  .flipbook-stage.fullwidth{
    width: 100vw !important;
    max-width: 100vw !important;
  }
}
/* === Overrides visor para móvil vs escritorio === */
.flipbook-container.double .flipbook-page { width: 50%; }
.flipbook-container.single .flipbook-page { width: 100%; }

@media (max-width: 768px) {
  #flipbookContainer,
  #flipbookResumenContainer {
    max-width: 100vw;
  }
}
/* === Visor (parches finales) === */
.flipbook-container.double .flipbook-page { width: 50%; }
.flipbook-container.single .flipbook-page { width: 100%; }

@media (max-width: 768px){
  #flipbookContainer,
  #flipbookResumenContainer { max-width: 100vw; }

  #flipbookContainer.single #flipbookPageRight,
  #flipbookResumenContainer.single #flipbookResumenRight{ display:none !important; }
  #flipbookContainer.single #flipbookPageLeft,
  #flipbookResumenContainer.single #flipbookResumenLeft{ width:100% !important; }

  /* Fallback extra si no cargó el JS */
  #flipbookPageRight, #flipbookResumenRight{ display:none !important; }
  #flipbookPageLeft,  #flipbookResumenLeft { width:100% !important; }
}