/* ══════════════════════════════════════════
   Fundación Biblioteca Maximilian Freundorfer
   Hoja de estilos principal
   ══════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: #f6f9fc; color: #2c3e50; min-height: 100vh; display: flex; flex-direction: column; }

/* ── HEADER ── */
header { background-color: #ffffff; padding: 12px 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #f0f4f8; }
.logo-container { display: flex; align-items: center; }
.logo-placeholder { max-height: 85px; height: auto; }
.header-galeria { display: flex; gap: 8px; align-items: center; height: 70px; }
.header-galeria img { height: 100%; width: 95px; object-fit: cover; border-radius: 8px; background-color: #e2e8f0; border: 1px solid #f0f4f8; transition: transform 0.2s ease; }
.header-galeria img:hover { transform: scale(1.05); }

/* ── NAV ── */
nav { background-color: #ffffff; padding: 10px 20px; display: flex; justify-content: center; }
.menu { display: flex; list-style: none; gap: 12px; }
.menu li a { display: block; color: #5c6b73; text-decoration: none; padding: 10px 24px; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 30px; transition: all 0.3s ease; background-color: #f1f5f9; }
.menu li a:hover { background-color: #e0f2fe; color: #0284c7; }
.menu li a.active { background-color: #d47596; color: #ffffff; box-shadow: 0 4px 10px rgba(212,117,150,0.2); }

/* ── CONTENIDO PRINCIPAL ── */
.main-container { flex: 1; padding: 25px 40px; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.main-container.centrado { align-items: center; }
.contenido { width: 100%; max-width: 1200px; height: 100%; }

/* ── INICIO ── */
.grid-inicio { display: grid; grid-template-columns: 46% 54%; gap: 40px; width: 100%; height: 100%; align-items: center; }
.galeria-compacta { display: flex; flex-direction: column; gap: 12px; height: 100%; justify-content: center; }
.foto-principal { width: 100%; height: 250px; background-color: #e2e8f0; border-radius: 14px; object-fit: cover; }
.fotos-secundarias { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.foto-mini { width: 100%; height: 110px; background-color: #e2e8f0; border-radius: 12px; object-fit: cover; }
.texto-inicio { background-color: #ffffff; padding: 35px 40px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); overflow-y: auto; }
.texto-inicio p { margin-bottom: 16px; line-height: 1.6; font-size: 1rem; text-align: justify; color: #334155; }
.texto-inicio p:last-child { margin-bottom: 0; }

/* ── SECCIONES GENERALES ── */
.seccion-vacia { background-color: #ffffff; width: 100%; padding: 30px 40px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); overflow-y: auto; }
.titulo-seccion { color: #2c3e50; margin-bottom: 15px; font-size: 1.45rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #f0f4f8; padding-bottom: 6px; }

/* ── ACTIVIDADES ── */
.bloque-cronograma-titulo { font-size: 1.15rem; color: #475569; text-transform: uppercase; margin: 25px 0 4px 0; letter-spacing: 0.5px; font-weight: 700; }
.descripcion-cronograma { font-size: 0.88rem; color: #64748b; margin-bottom: 16px; font-style: italic; }
.bloque-actividad { display: grid; grid-template-columns: 45% 55%; gap: 20px; margin-bottom: 18px; align-items: center; padding: 16px; border-radius: 14px; border: 1px solid #e2e8f0; }
.bg-ambulante { background-color: #f8fafc; }
.bg-origami { background-color: #fffaf0; }
.bg-pintura { background-color: #fdf2f8; }
.bg-manuales { background-color: #f5f3ff; }
.texto-actividad p { font-size: 0.95rem; line-height: 1.5; color: #334155; text-align: justify; }
.subtitulo-actividad { font-size: 1.15rem; margin-bottom: 6px; font-weight: 700; }
.color-ambulante { color: #1e293b; } .color-origami { color: #b45309; } .color-pintura { color: #9d174d; } .color-manuales { color: #5b21b6; }
.grid-fotos-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto-cuadrada { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; background-color: #e2e8f0; border: 1px solid #e2e8f0; transition: transform 0.2s ease; }
.foto-cuadrada:hover { transform: scale(1.03); }

/* ── COLECCIÓN ── */
.bloque-coleccion { display: grid; grid-template-columns: 68% 32%; gap: 25px; margin-top: 10px; margin-bottom: 20px; padding: 20px 25px; border-radius: 16px; border: 1px solid #e2e8f0; background-color: #f8fafc; align-items: center; }
.texto-colecciones p { font-size: 0.93rem; color: #475569; line-height: 1.55; text-align: justify; margin-bottom: 12px; }
.texto-colecciones p:last-child { margin-bottom: 0; }
.texto-colecciones strong { color: #1e293b; font-weight: 700; }
.grid-fotos-coleccion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto-coleccion-cuadrada { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; border: 1px solid #e2e8f0; transition: transform 0.2s ease; }

/* ── BUSCADOR ── */
.search-bar-integ { background: linear-gradient(135deg, #d47596 0%, #b85c7c 100%); padding: 1.2rem 1.4rem; border-radius: 14px; margin-bottom: 1rem; }
.search-bar-integ h1 { color: #ffffff; font-size: 1.05rem; font-weight: 800; margin-bottom: 0.7rem; }
.search-bar-integ h1 span { opacity: 0.75; font-weight: 400; font-size: 0.82rem; margin-left: 0.5rem; }
.search-row-integ { display: flex; gap: 8px; flex-wrap: wrap; }
.search-input-wrap-integ { flex: 1; min-width: 240px; position: relative; }
.search-input-wrap-integ svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; }
#busqueda { width: 100%; padding: 10px 14px 10px 2.5rem; border-radius: 10px; border: none; font-size: 0.93rem; outline: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); background-color: #ffffff; }
#busqueda:focus { box-shadow: 0 0 0 3px rgba(212,117,150,0.4); }
select.filtro-integ { padding: 10px 14px; border-radius: 10px; border: none; font-size: 0.86rem; background: #ffffff; color: #2c3e50; cursor: pointer; outline: none; }
.btn-buscar-integ { background: #ffffff; color: #d47596; font-weight: 800; font-size: 0.86rem; padding: 10px 22px; border-radius: 10px; border: none; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn-buscar-integ:hover { background: #fdf2f8; }
.filtros-rapidos-integ { display: flex; gap: 7px; margin-top: 0.7rem; flex-wrap: wrap; align-items: center; }
.chip-integ { background: rgba(255,255,255,0.18); color: #ffffff; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; font-size: 0.73rem; font-weight: 700; padding: 3px 11px; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.chip-integ:hover { background: rgba(255,255,255,0.35); }

/* ── ESTADO VACÍO ── */
.estado-vacio-catalogo { text-align: center; padding: 2rem 1rem; color: #94a3b8; }
.estado-vacio-catalogo svg { opacity: 0.2; margin-bottom: 0.6rem; }
.estado-vacio-catalogo p { font-size: 0.9rem; }

/* ── STATS ── */
.stats-bar-integ { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; }
.stats-txt-integ { font-size: 0.86rem; color: #64748b; }
.stats-txt-integ strong { color: #d47596; }
.sort-row-integ { display: flex; gap: 5px; }
.sort-btn-integ { font-size: 0.76rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1.5px solid #e2e8f0; background: #ffffff; color: #64748b; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.sort-btn-integ.activo { background: #d47596; color: #ffffff; border-color: #d47596; }

/* ── FICHA BIBLIOGRÁFICA ── */
#resultados-integ { display: flex; flex-direction: column; gap: 12px; }

.ficha-card { display: grid; grid-template-columns: 90px 1fr; gap: 16px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 18px; transition: box-shadow 0.2s, border-color 0.2s; }
.ficha-card:hover { box-shadow: 0 4px 16px rgba(212,117,150,0.09); border-color: #fbcfe8; }

.ficha-portada { width: 90px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.portada-img { width: 90px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0; background: #f1f5f9; display: block; }
.portada-no-disp { width: 90px; height: 120px; background: linear-gradient(145deg, #f1f5f9, #e2e8f0); border-radius: 6px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 8px; }
.portada-no-disp svg { opacity: 0.3; }
.portada-no-disp span { font-size: 0.6rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.3; }

.ficha-datos { min-width: 0; }
.ficha-fila { display: flex; gap: 6px; margin-bottom: 4px; align-items: baseline; font-size: 0.88rem; line-height: 1.45; }
.ficha-fila:last-child { margin-bottom: 0; }
.ficha-campo { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; min-width: 72px; flex-shrink: 0; padding-top: 1px; }
.ficha-valor { color: #1e293b; line-height: 1.45; }
.ficha-fila.fila-autor .ficha-valor { font-weight: 700; color: #0f172a; font-size: 0.92rem; }
.ficha-fila.fila-titulo .ficha-valor { font-weight: 800; color: #1e293b; font-size: 0.97rem; font-style: italic; }
.ficha-descriptores { display: flex; flex-wrap: wrap; gap: 5px; }
.desc-tag { font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #fdf2f8; color: #9d174d; border: 1px solid #fbcfe8; }
.ficha-ubicacion { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; display: flex; align-items: center; gap: 8px; }
.ubic-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; }
.ubic-caja { display: inline-flex; align-items: center; gap: 6px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 4px 12px; font-family: 'Courier New', monospace; font-size: 0.82rem; font-weight: 700; color: #166534; }
.ubic-sep { color: #86efac; font-weight: 400; }

/* ── LOADING / EMPTY ── */
#loading-integ { text-align: center; padding: 2rem; color: #64748b; font-size: 0.93rem; }
.empty-integ { text-align: center; padding: 2.5rem 1rem; color: #64748b; }
.empty-integ svg { opacity: 0.25; margin-bottom: 8px; }
.empty-integ h3 { font-size: 1rem; margin-bottom: 4px; color: #1e293b; }

/* ── PAGINACIÓN ── */
.paginacion-integ { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 1.2rem; flex-wrap: wrap; }
.pag-btn-integ { padding: 5px 11px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #ffffff; color: #64748b; font-size: 0.83rem; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.pag-btn-integ:hover { border-color: #d47596; color: #d47596; }
.pag-btn-integ.activo { background: #d47596; color: #ffffff; border-color: #d47596; }
.pag-btn-integ:disabled { opacity: 0.4; cursor: default; }

/* ── BOLETINES (AJUSTADO: MINI-ICONOS) ── */
.bloque-boletines-layout { display: grid; grid-template-columns: 55% 45%; gap: 30px; margin-top: 15px; align-items: start; }
.texto-boletines-info p { font-size: 0.98rem; line-height: 1.6; color: #334155; text-align: justify; margin-bottom: 16px; }
.texto-boletines-info p strong { color: #0f172a; }
.grid-boletines { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; margin: 0 auto; }
.tarjeta-boletin { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1/1; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,0.03); transition: all 0.2s ease; width: 100%; }
.tarjeta-boletin:hover { transform: translateY(-2px); border-color: #d47596; box-shadow: 0 4px 8px rgba(212,117,150,0.15); }
.mini-logo-boletin { max-height: 6px; margin-bottom: 2px; opacity: 0.6; }
.mini-dibujo-hoja { width: 80%; height: 16px; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 2px; padding: 2px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.recuadro-dibujo { width: 100%; height: 10px; background: linear-gradient(135deg, #fbcfe8, #f472b6); border-radius: 1px; }
.linea-texto-simulada { display: none; }
.texto-boletin { font-size: 0.6rem; font-weight: 700; color: #64748b; margin-top: 4px; text-align: center; line-height: 1; transition: color 0.2s ease; }
.tarjeta-boletin:hover .texto-boletin { color: #d47596; }

/* ── CONTACTO ── */
.grid-contacto { display: grid; grid-template-columns: 55% 45%; gap: 30px; margin-top: 12px; align-items: center; }
.texto-bienvenida-contacto { font-size: 0.95rem; line-height: 1.5; color: #334155; margin-bottom: 16px; text-align: justify; }
.bloques-contacto-flex { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bloque-contacto { background-color: #f8fafc; padding: 12px 16px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; align-items: flex-start; gap: 10px; }
.icono-svg { width: 20px; height: 20px; flex-shrink: 0; fill: #d47596; margin-top: 2px; }
.detalles-contacto h3 { font-size: 0.82rem; color: #64748b; text-transform: uppercase; margin-bottom: 3px; letter-spacing: 0.5px; font-weight: 600; }
.detalles-contacto p, .detalles-contacto a { font-size: 0.88rem; color: #1e293b; line-height: 1.35; text-decoration: none; }
.detalles-contacto a { font-weight: 600; transition: color 0.2s ease; }
.detalles-contacto a:hover { color: #d47596; }
.contenedor-mapa { width: 100%; height: 280px; border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); background-color: #f1f5f9; }
.contenedor-mapa iframe { width: 100%; height: 100%; border: 0; }

/* ── FOOTER ── */
footer { background-color: #ffffff; text-align: center; padding: 12px; font-size: 0.85rem; color: #94a3b8; border-top: 1px solid #f0f4f8; }

/* ══ RESPONSIVE ══ */
@media (max-width: 1024px) {
    .bloque-boletines-layout { grid-template-columns: 1fr; }
    .grid-boletines { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}

@media (max-width: 768px) {
    body { height: auto; overflow: auto; }
    header { flex-direction: column; gap: 15px; padding: 15px 20px; }
    .header-galeria { width: 100%; overflow-x: auto; }
    .menu { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .menu li a { padding: 8px 14px; font-size: 0.8rem; }
    .main-container { height: auto; overflow: auto; padding: 15px 20px; }
    .grid-inicio { grid-template-columns: 1fr; gap: 20px; }
    .galeria-compacta { height: auto; }
    .foto-principal { height: 200px; }
    .bloque-actividad { grid-template-columns: 1fr; }
    .bloque-coleccion { grid-template-columns: 1fr; }
    .search-row-integ { flex-direction: column; }
    .grid-contacto { grid-template-columns: 1fr; }
    .bloques-contacto-flex { grid-template-columns: 1fr; }
    .ficha-card { grid-template-columns: 1fr; gap: 10px; }
    .ficha-portada { order: 2; width: 100%; align-items: center; }
    .portada-img, .portada-no-disp { width: 100%; height: 180px; }
    .ficha-datos { order: 1; }
}

@media (max-width: 600px) {
    .grid-boletines { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}