/* ==========================================================
IMPORTAR FUENTE ATKINSON HYPERLEGIBLE (Para el menú u otros elementos específicos si se requiere)
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* 1. Sobrescribimos tu variable original para eliminar el "amarillito" en tus bloques */
:root {
--lp-beige: #f3efe9 !important;
}

/* 2. Forzamos el gris en el fondo general y en los contenedores del tema Lively */
html,
body,
#wrap,
#content,
main,
.layout,
.site-page,
.blocks,
.block,
.perroteca-modulo-primero {
background-color: #f3efe9 !important;
}

/* Forzar esquema de color claro global */
:root,
html,
body {
color-scheme: light !important;
background-color: #f5f3e9 !important;
color: #000000 !important;
}

/* ==========================================================
TÍTULOS DE LOS ÍTEMS — SIN NEGRITA NI SUBRAYADO
========================================================== */
.media-embed.layout-horizontal .item.resource h3 a {
font-weight: normal !important;
text-decoration: none !important;
}

/* ==========================================================
COLECCIONES — 4 IMÁGENES POR FILA
SISTEMA DE ANCHO: 1200PX
========================================================== */
/* Contenedor de la colección */
.media-embed.layout-horizontal {
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
--grid-column-count: 4 !important;
}

/* ==========================================================
ITEMS / FICHAS
========================================================== */
/* Permite que las fichas se adapten al ancho disponible */
.media-embed.layout-horizontal > * {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}

/* ==========================================================
IMÁGENES
========================================================== */
.media-embed.layout-horizontal img {
max-width: 100% !important;
box-sizing: border-box !important;
}

/* ==========================================================
TABLET
========================================================== */
@media (max-width: 768px) {
.media-embed.layout-horizontal {
padding-left: 24px !important;
padding-right: 24px !important;
}
}

/* ==========================================================
CELULAR
========================================================== */
@media (max-width: 600px) {
.media-embed.layout-horizontal {
padding-left: 20px !important;
padding-right: 20px !important;
}
}

/* ==========================================================
SEGURIDAD — EVITA QUE EL TEMA VUELVA A FORZAR 3 COLUMNAS
========================================================== */
.media-embed.layout-horizontal.attachment-count-3 {
--grid-column-count: 4 !important;
}

/* Menú en páginas de colecciones */
body.item-set header nav ul li a,
body.item-set header nav a,
body.item-set .navigation ul li a,
body.item-set .navigation a {
font-family: 'Atkinson Hyperlegible', sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: inherit !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
color: #333333 !important;
}

/* =========================================
QUITAR LÍNEA DEBAJO DE LOS ÍTEMS
========================================= */
.item-set-items {
border-bottom: none !important;
}
.item-set-items::before,
.item-set-items::after {
content: none !important;
display: none !important;
}
.resources.resource-grid {
border-bottom: none !important;
}
.resources.resource-grid::before,
.resources.resource-grid::after {
content: none !important;
display: none !important;
}

/* =========================================
SUBIR MÁS LA GALERÍA
========================================= */
.regions-container {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.item-set-items {
padding-top: 0 !important;
margin-top: -120px !important;
}
.item-set-items > h3 {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}

/* =========================================
OCULTAR ENCABEZADO ELEMENTOS
========================================= */
.item-set-items > h3 {
display: none !important;
}

/* =========================================
BIBLIOTECA - GALERÍA DE ÍTEMS
LIVELY / OMEKA S
========================================= */
/* -----------------------------------------
OCULTAR CONTADOR DE RESULTADOS
----------------------------------------- */
.row-count {
display: none !important;
}
/* -----------------------------------------
OCULTAR CONTROLES DE NAVEGACIÓN
----------------------------------------- */
.browse-controls {
display: none !important;
}
/* -----------------------------------------
OCULTAR TÍTULO "ELEMENTOS" / ENCABEZADO
----------------------------------------- */
.title {
display: none !important;
}
.title::before,
.block-pageTitle::before {
content: none !important;
display: none !important;
}
h1:has(.title) {
margin-top: 0 !important;
margin-bottom: 60px !important;
}

/* =========================================
QUITAR BORDE PUNTEADO DE LOS ÍTEMS
========================================= */
.resources.resource-grid > .item.resource {
border: none !important;
outline: none !important;
box-shadow: none !important;
}

/* -------------------------------------------------- */
/* Ocultar contador de resultados */
.row-count {
display: none !important;
}
/* Ocultar controles de navegación */
.browse-controls {
display: none !important;
}
/* Ocultar título de la página */
.title {
display: none !important;
}
.title::before,
.block-pageTitle::before {
content: none !important;
}
h1:has(.title) {
margin-top: 0 !important;
margin-bottom: 60px !important;
}

/* =========================================================================
SOLUCIÓN PARA MENÚ EN MÓVILES (ANCLADO A LA DERECHA + SCROLLBAR)
========================================================================= */
@media (max-width: 768px) {
#a11y-widget {
position: fixed !important;
bottom: 15px !important;
right: 15px !important;
left: auto !important;
z-index: 999999 !important;
}
#a11y-menu {
position: absolute !important;
bottom: 65px !important;
right: 0 !important;
/* Crece hacia la izquierda, pegado al borde del botón */
left: auto !important; 
transform: none !important; 
/* Desactiva el centrado que generaba el recorte */
width: calc(100vw - 30px) !important; 
/* Se adapta exacto al ancho del teléfono */
max-width: 280px !important; 
max-height: 65vh !important; 
/* Evita que el menú sobresalga por arriba */
overflow-y: auto !important; 
/* Scroll interno si la pantalla es muy corta */
-webkit-overflow-scrolling: touch;
}
}

/* Personalización de la barra de scroll dentro del menú */
#a11y-menu {
scrollbar-width: thin;
scrollbar-color: #f94b18 #f5f5f5;
}
#a11y-menu::-webkit-scrollbar {
width: 5px;
}
#a11y-menu::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 10px;
}
#a11y-menu::-webkit-scrollbar-thumb {
background: #f94b18;
border-radius: 10px;
}

/* --- CONTENEDOR PRINCIPAL DEL FOOTER (BLINDADO) --- */
.lp-footer-breakout { 
display: flex !important; 
flex-direction: column !important; 
margin-bottom: 0 !important; 
padding: 0 !important; 
width: 100vw !important; 
position: relative !important; 
left: calc(-50vw + 50%) !important; 
min-height: auto !important; 
/* Bloquea alturas impuestas por módulos */
height: auto !important;
}

/* Evita que los módulos inflen los divs internos */
.lp-footer-breakout div {
min-height: auto !important;
box-sizing: border-box !important;
}

/* --- SECCIÓN BEIGE --- */
.lp-section-beige {
background: #f3efe9 !important;
padding: 40px 20px !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
width: 100% !important;
}
.lp-container {
width: 100% !important;
max-width: 1000px !important;
margin: 0 auto !important;
padding: 0 !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.footer-grid {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
gap: 20px !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.footer-column {
margin: 0 !important;
padding: 0 !important;
}
.footer-column h4 {
font-family: 'Montserrat', sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
color: #6a6460 !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
.footer-column a {
font-family: 'Playfair Display', serif !important;
font-style: italic !important;
font-size: 1.1rem !important;
color: #1a1a1a !important;
text-decoration: none !important;
margin: 0 !important;
padding: 0 !important;
}
.footer-column a:hover { color: #0076ad !important; }
.footer-logo img {
height: 100px !important;
width: auto !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
}

/* --- SECCIÓN CELESTE --- */
.lp-section-celeste {
background-color: #0076ad !important;
color: #faf7f2 !important;
padding: 40px 20px 0 !important;
margin: 0 !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
box-shadow: 0 150px 0 0 #0076ad !important;
}
.lp-main-text {
font-size: 14px !important;
line-height: 1.7 !important;
max-width: 700px !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
}
/* Bloquea párrafos vacíos que Omeka a veces inyecta generando espacio al final */
.lp-main-text:empty {
display: none !important;
}
.copy {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
border-top: 1px solid rgba(255,255,255,0.2) !important;
width: 100% !important;
max-width: 1000px !important;
opacity: 0.8 !important;
display: block !important;
text-align: center !important;
margin: 0 !important;
padding-top: 30px !important;
padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
line-height: 1.2 !important;
}

/* RESPONSIVE PROTEGIDO */
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
}

/* 1. Prevenir scroll horizontal (causa principal de sitios "rotos" en IG) */
html, body {
overflow-x: hidden;
max-width: 100%;
width: 100%;
margin: 0;
padding: 0;
}

/* 2. Forzar que las imágenes, archivos y videos de Omeka no desborden la pantalla */
img, video, iframe, .item-file, .element-text {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}

/* 3. Evitar que textos largos o enlaces rompan la estructura */
p, h1, h2, h3, a {
word-wrap: break-word;
overflow-wrap: break-word;
}

/* 1. Mantiene el scroll vertical fijo para evitar saltos de ancho al cambiar de página */
html {
overflow-y: scroll;
}

/* 2. Evita el desbordamiento horizontal en dispositivos móviles o elementos grandes */
body {
overflow-x: hidden;
max-width: 100%;
}

/* 3. Estabiliza de forma segura los bloques principales sin alterar la posición del menú */
#content, main, .main-content {
min-height: 70vh;
box-sizing: border-box;
}

/* --- Optimización y velocidad para el Slider --- */
.carousel, .slider, .slick-slider, .swiper-container { 
contain: layout style paint; 
/* Le dice al navegador que aisle este elemento para renderizarlo más rápido */
min-height: 350px; 
/* Reserva un espacio estricto para evitar que empuje el contenido hacia abajo al cargar */
background-color: #f4f4f4; 
/* Color de fondo sutil mientras carga la primera imagen */
}

/* Evita que las imágenes del slider parpadeen o deformen el diseño */
.carousel img, .slider img, .slick-slide img, .swiper-slide img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}

/* ==========================================================
UNIFICAR TÍTULOS PRINCIPALES (Fuerza el grosor en Inicio y Colecciones)
========================================================== */
h1, h2, h3,
.page-title,
.home h1,
.home h2,
.blocks h1,
.blocks h2,
.site-title,
header h1,
header .site-title {
font-weight: 800 !important;
color: #333333 !important;
}

/* ==========================================================
BOTÓN "ASÓCIATE" (CÁPSULA CELESTE) EN EL MENÚ PRINCIPAL
========================================================== */
/* Aplica la forma de cápsula al 5to elemento del menú */
header nav ul li:nth-child(5) a,
.navigation ul li:nth-child(5) a {
    background-color: #008fb4 !important; /* Celeste base */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 8px 24px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* Efecto Hover para la cápsula celeste */
header nav ul li:nth-child(5) a:hover,
.navigation ul li:nth-child(5) a:hover {
    background-color: #0076ad !important; /* Ligeramente más oscuro al pasar el cursor */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 143, 180, 0.4) !important;
}

/* Eliminar subrayado y forzar estilo cuando la página está activa */
header nav ul li:nth-child(5) a[aria-current],
header nav ul li:nth-child(5) a.active,
.navigation ul li:nth-child(5) a[aria-current],
.navigation ul li:nth-child(5) a.active {
    background-color: #008fb4 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    pointer-events: none !important;
}

/* ==========================================================
FORMULARIO DE BÚSQUEDA Y ESPACIADOS
========================================================== */
/* 1. Color de fondo para el formulario de búsqueda */
.search-form { 
background-color: var(--beige-search) !important; 
padding: 15px; 
/* Ajuste de espaciado interno */
border-radius: 4px; 
/* Opcional: bordes ligeramente redondeados */
}

/* 2. Asegurar que el input (caja de texto) dentro de la búsqueda sea limpio */
.search-form input[type="text"],
.main-header-search input[type="text"] {
background-color: #ffffff !important;
border: 1px solid #ccc;
padding: 5px;
}

/* 3. Eliminación de espacios excedentes del contenido superior */
#content,
.container,
#main-content {
padding-top: 0 !important;
margin-top: 0 !important;
}

/* 4. Limpieza de posibles herencias de fondos en enlaces */
a, span {
background-image: none !important;
}

/* ==========================================================
FRANJA DE COLORES DEL HEADER (OCULTA)
========================================================== */
:root {
--amarillo: #ffa802;
--celeste: #008fb4;
--naranja: #f94b18;
--verde: #0ea963;
}

/* 1. Ajuste del encabezado / navegación */
header,
nav {
position: relative;
border-bottom: none !important;
}

/* 2. Creación de la franja mediante un pseudo-elemento (Apagado) */
header::after, nav::after { 
content: ""; 
display: none !important; 
/* FRANAJA ELIMINADA */
position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
height: 0px !important; 
/* GROSOR CERO */
z-index: 999;
}

/* 4. Corrección para evitar "contagio" en subrayados y otros módulos */
a, span, .module-item {
background-image: none !important;
}

/* ==========================================================
RECURSOS INDIVIDUALES Y BUSCADOR (ICONOS)
========================================================== */
/* Fondo blanco y tipografía negra para los recursos individuales */
.item.resource {
background-color: #ffffff !important;
color: #000000 !important;
}

/* Asegurar que los títulos y enlaces dentro del recurso también sean negros */
.item.resource h2,
.item.resource h3,
.item.resource a,
.item.resource .metadata {
color: #000000 !important;
}

/* Estilo específico para el icono/botón de búsqueda y su estado hover */
.o-icon-search.main-search-button, .main-search-button { 
background-color: #faf7f2 !important; 
border: none !important; 
outline: none !important; 
box-shadow: none !important; 
border-radius: 0 !important; 
color: #333333 !important; 
/* Fuerza el color del ícono para que no desaparezca */
}

.o-icon-search.main-search-button:hover,
.main-search-button:hover {
background-color: #faf7f2 !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
color: #f94b18 !important; /* Color naranja de acento para el icono */
}

/* Fuerza el color del SVG/icono interno por si Omeka lo sobreescribe */
.main-search-button svg,
.main-search-button i {
color: inherit !important;
fill: currentColor !important;
}

/* --- ESTILOS PARA EL BUSCADOR (SEARCH FORM) --- */
/* Contenedor principal del formulario */
.search-form,
#search-form,
form[action="search"] {
background-color: #faf7f2 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 5px 10px !important;
}

/* Campo de texto donde se escribe */
.search-form input[type="text"],
#search-form input[type="text"],
.search-form .query,
#search-query {
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
color: #4a4a4a !important;
}

/* --- ELIMINAR ELEMENTOS SOLICITADOS --- */
.input-group-button,
.input-group-append,
.search-form button[type="submit"] {
display: none !important;
}

/* --- OPCIONAL: Estilo cuando el cursor está encima (Focus) --- */
.search-form input[type="text"]:focus {
outline: none !important;
border: none !important;
}

/* ==========================================================
LIMPIEZA DE CABECERA Y TOP BAR
========================================================== */
/* Ocultar el botón de grupo de entrada en Omeka S */
.input-group-button {
display: none !important;
}

/* 2. LIMPIEZA DE CABECERA */
.top-bar__advanced-search,
.main-header__top-bar,
.top-bar {
display: none !important;
}

body header.main-header,
body .main-header {
background-color: #faf7f2 !important;
border: none !important;
box-shadow: none !important;
}

/* ==========================================================
NAVEGACIÓN PRINCIPAL (MENÚ)
========================================================== */
/* 3. ESTILO BASE DEL MENÚ (Selectores universales para evitar que Omeka los ignore en subpáginas) */
header nav ul li a,
header nav a,
.navigation ul li a,
.navigation a {
font-family: 'Atkinson Hyperlegible', sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: #333333 !important;
text-decoration: none !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
transition: color 0.3s ease !important;
}

/* 4. HOVER PERSONALIZADO POR CADA BOTÓN */
/* Regla General para Subrayado en Hover (Aplica sólo a los 4 primeros elementos) */
header nav ul li:not(:nth-child(5)) a:hover,
.navigation ul li:not(:nth-child(5)) a:hover {
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 3px !important;
}

/* 1er Botón (Inicio) -> Celeste */
header nav ul li:nth-child(1) a:hover,
.navigation ul li:nth-child(1) a:hover {
color: #008fb4 !important;
text-decoration-color: #008fb4 !important;
}

/* 2do Botón (Colecciones) -> Naranja */
header nav ul li:nth-child(2) a:hover,
.navigation ul li:nth-child(2) a:hover {
color: #f94b18 !important;
text-decoration-color: #f94b18 !important;
}

/* 3er Botón (Bitácora) -> Amarillo */
header nav ul li:nth-child(3) a:hover,
.navigation ul li:nth-child(3) a:hover {
color: #ffa802 !important;
text-decoration-color: #ffa802 !important;
}

/* 4to Botón (Editorial) -> Verde */
header nav ul li:nth-child(4) a:hover,
.navigation ul li:nth-child(4) a:hover {
color: #0ea863 !important;
text-decoration-color: #0ea863 !important;
}

/* 5. ESTADO ACTIVO (Indicador de página actual para los 4 primeros elementos) */
header nav ul li:not(:nth-child(5)) a[aria-current],
header nav ul li:not(:nth-child(5)) a.active,
.navigation ul li:not(:nth-child(5)) a[aria-current],
.navigation ul li:not(:nth-child(5)) a.active {
color: #333333 !important;
pointer-events: none !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 3px !important;
}

/* Colores específicos del subrayado para la página activa según el ítem */
header nav ul li:nth-child(1) a[aria-current],
header nav ul li:nth-child(1) a.active,
.navigation ul li:nth-child(1) a[aria-current],
.navigation ul li:nth-child(1) a.active {
text-decoration-color: #008fb4 !important;
}

header nav ul li:nth-child(2) a[aria-current],
header nav ul li:nth-child(2) a.active,
.navigation ul li:nth-child(2) a[aria-current],
.navigation ul li:nth-child(2) a.active {
text-decoration-color: #f94b18 !important;
}

header nav ul li:nth-child(3) a[aria-current],
header nav ul li:nth-child(3) a.active,
.navigation ul li:nth-child(3) a[aria-current],
.navigation ul li:nth-child(3) a.active {
text-decoration-color: #ffa802 !important;
}

header nav ul li:nth-child(4) a[aria-current],
header nav ul li:nth-child(4) a.active,
.navigation ul li:nth-child(4) a[aria-current],
.navigation ul li:nth-child(4) a.active {
text-decoration-color: #0ea863 !important;
}

.media-render.file {
    background-color: #f3efe9;
}

.item.resource {
    background-color: #f3efe9 !important;
    border: none !important;
}

.item.resource h3 {
    background-color: #f3efe9 !important;
    margin: 0 !important; 
    padding: 10px !important; 
}