/* =========================================================================
   biblioteca.css — Biblioteca Científica y Documental (portal público)
   -------------------------------------------------------------------------
   Migrada al sistema de diseño: hereda los tokens de base.css (tema claro y
   oscuro, tipografía). Antes tenía su propia paleta en un <style> de 300
   líneas; ahora comparte navbar y pie con el resto del sitio.

   Las pocas variables de abajo son de COMPATIBILIDAD: el visor PDF y algunos
   botones traen estilos en línea heredados que aún nombran --primary/--dark/
   etc. Se mapean a valores válidos en ambos temas para no reescribir ese HTML.
   ========================================================================= */
:root {
    --primary:    #0056b3;   /* azul de los botones */
    --secondary:  #22d3ee;   /* acento cian */
    --dark:       #14203b;   /* barra del visor: navy en claro y oscuro */
    --danger:     #ef4444;   /* rojo de cerrar/alertas */
    --text-muted: #5b6b85;   /* texto tenue del visor (sobre panel claro) */
}

body { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------------------------------------------------------------- Hero --- */
.hero {
    text-align: center; max-width: 820px; margin: 0 auto;
    padding: clamp(92px, 10vw, 124px) var(--e-4) var(--e-6);   /* el navbar compartido es fixed: despejar arriba */
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--azul) 12%, transparent);
    color: var(--azul); font-size: 12px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: var(--e-3);
}
.hero h1 {
    font-size: clamp(32px, 5.5vw, 52px); color: var(--titulo);
    line-height: 1.08; letter-spacing: -1.4px; font-weight: 900; margin-bottom: var(--e-3);
}
.hero h1 span {
    background: linear-gradient(120deg, var(--azul), var(--cian-vivo));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { font-size: clamp(15px, 2vw, 17px); color: var(--texto-tenue); line-height: 1.65; }

/* -------------------------------------------------- Contenedor + layout --- */
.container { max-width: var(--ancho-max); margin: 0 auto var(--e-7); padding: 0 var(--e-4); width: 100%; flex-grow: 1; }
.layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--e-5); align-items: start; }
.layout > * { min-width: 0; }   /* los items de grid no desbordan su columna con contenido ancho (mismo caso que el banner) */
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }
.main-content { min-width: 0; }

/* -------------------------------------------------- Sidebar categorías --- */
.sidebar {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--r-lg); padding: var(--e-4);
    box-shadow: var(--sombra); position: sticky; top: 88px;
}
@media (max-width: 860px) { .sidebar { position: static; } }
.sidebar h3 {
    font-size: 14px; color: var(--titulo); font-weight: 800; letter-spacing: .3px;
    display: flex; align-items: center; gap: 8px; margin-bottom: var(--e-3);
    padding-bottom: var(--e-2); border-bottom: 1px solid var(--borde);
}
.sidebar h3 i { color: var(--azul); }
.cat-list { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0; margin: 0; }
.cat-list li {
    padding: 10px 14px; border-radius: var(--r); cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--texto-tenue);
    display: flex; align-items: center; justify-content: space-between;
    transition: var(--transicion);
}
.cat-list li:hover { background: color-mix(in srgb, var(--azul) 8%, transparent); color: var(--azul); }
.cat-list li.active {
    background: linear-gradient(120deg, var(--azul), var(--cian-vivo));
    color: #fff; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--azul) 80%, transparent);
}

/* --------------------------------------------------------------- Buscador --- */
.search-container { position: relative; margin-bottom: var(--e-5); }
.search-container input {
    width: 100%; padding: 15px 18px 15px 48px; border-radius: var(--r);
    border: 1px solid var(--borde); background: var(--superficie);
    color: var(--texto); font-size: 16px; outline: none; box-shadow: var(--sombra);
    transition: var(--transicion);
}
.search-container input::placeholder { color: var(--texto-tenue); }
.search-container input:focus { border-color: var(--cian-vivo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cian-vivo) 25%, transparent); }
.search-container i { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--texto-tenue); font-size: 17px; }

/* ------------------------------------------------ Grid de documentos --- */
.grid-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--e-4); }
.doc-card {
    position: relative; overflow: hidden;
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--r-lg); padding: var(--e-4);
    box-shadow: var(--sombra);
    display: flex; flex-direction: column; justify-content: space-between;
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.doc-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--azul), var(--cian-vivo));
    opacity: 0; transition: opacity var(--transicion);
}
.doc-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--azul) 40%, var(--borde));
    box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--azul) 55%, transparent);
}
.doc-card:hover::before { opacity: 1; }
.cat-badge {
    position: absolute; top: 14px; right: 14px;
    background: color-mix(in srgb, var(--cian-vivo) 16%, transparent); color: var(--cian);
    padding: 4px 10px; border-radius: var(--r-full); font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px;
}
.doc-icon {
    width: 46px; height: 46px; border-radius: 12px; margin-bottom: var(--e-3);
    display: grid; place-items: center; font-size: 20px;
    background: color-mix(in srgb, var(--azul) 12%, transparent); color: var(--azul);
}
.doc-title { font-size: 17px; color: var(--titulo); font-weight: 800; line-height: 1.3; margin-bottom: 10px; }
.doc-desc { font-size: 13.5px; color: var(--texto-tenue); line-height: 1.6; margin-bottom: var(--e-4); flex-grow: 1; }
.fecha-limite {
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: var(--e-3);
    font-size: 11px; font-weight: 700; color: #d9534f;
    background: color-mix(in srgb, #d9534f 12%, transparent); padding: 4px 10px; border-radius: var(--r-full);
}

/* --------------------------------------------- Clave + botones descarga --- */
.caja-clave {
    background: color-mix(in srgb, var(--ambar) 14%, var(--superficie-2));
    border: 1px solid color-mix(in srgb, var(--ambar) 45%, transparent);
    padding: 13px; border-radius: var(--r); margin-bottom: 13px;
}
.caja-clave label { color: var(--texto); }
.input-clave {
    width: 100%; padding: 11px 13px; border-radius: 8px; margin-top: 7px;
    border: 1px solid color-mix(in srgb, var(--ambar) 55%, var(--borde));
    background: var(--superficie); color: var(--texto);
    font-size: 14px; outline: none; box-sizing: border-box; transition: var(--transicion);
}
.input-clave:focus { border-color: var(--ambar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ambar) 28%, transparent); }
.btn-descarga {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--azul); color: #fff; border: none; padding: 13px; width: 100%;
    border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; transition: var(--transicion);
}
.btn-descarga:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--azul) 70%, transparent); }
.btn-candado { background: var(--azul-hondo); }
.btn-candado:hover { background: #0d1830; }

/* ------------------------------------------------------ Alertas + vacío --- */
.alert-box {
    display: flex; align-items: center; gap: 10px;
    background: color-mix(in srgb, #ef4444 12%, var(--superficie)); color: #c0392b;
    padding: 15px 18px; border-radius: var(--r); margin-bottom: var(--e-4);
    font-weight: 700; font-size: 14px; border-left: 4px solid #ef4444;
}
.empty-state {
    text-align: center; padding: 56px 20px;
    background: var(--superficie); border: 2px dashed var(--borde); border-radius: var(--r-lg);
}
.empty-state i { font-size: 46px; color: var(--texto-tenue); opacity: .55; margin-bottom: 12px; }
.empty-state h3 { color: var(--texto-tenue); font-size: 17px; font-weight: 700; }

/* --------------------------------------------------------- Visor (modal) --- */
#pdfModal { animation: bibFade .2s ease; }
@keyframes bibFade { from { opacity: 0; } to { opacity: 1; } }

/* ========================= Móvil / adaptativo ============================
   El navbar y el layout ya se apilan a 860px; aquí se afina el teléfono:
   la barra de categorías pasa a chips horizontales deslizables (no una lista
   vertical que empuja todo hacia abajo), el grid nunca desborda, y el espacio
   se aprieta para pantallas pequeñas. */
@media (max-width: 860px) {
    .sidebar { padding: var(--e-3) var(--e-3) 10px; }
    .sidebar h3 { margin-bottom: 10px; padding-bottom: var(--e-2); }
    .cat-list {
        flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
        padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    }
    .cat-list li { flex: 0 0 auto; white-space: nowrap; justify-content: center; }
}
@media (max-width: 640px) {
    .hero { padding: 84px var(--e-3) var(--e-5); }
    .hero h1 { letter-spacing: -1px; }
    .container { padding: 0 var(--e-3); }
    .grid-docs { grid-template-columns: 1fr; }   /* nunca desborda en teléfonos angostos */
    .doc-card { padding: var(--e-3); }
    .cat-badge { position: static; display: inline-block; margin-bottom: 10px; }
}
@media (max-width: 560px) {
    /* Botones de descarga apilados: más cómodos con el pulgar, sin apretar el texto. */
    .doc-card form > div { flex-direction: column; }
}