/* ==========================================================
   1. IMPORTAR FUENTE INTER (Para el menú u otros elementos específicos si se requiere)
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap');

/* ==========================================================
   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;
}

/* ==========================================================
   CONVERTIR ENLACE DEL MENÚ EN BOTÓN TIPO "SELLO" (MÁXIMA PRIORIDAD)
   ========================================================== */

/* Estilo principal del botón y estado visitado */
body nav a[href*="/page/lectores"],
body .navigation a[href*="/page/lectores"],
body header a[href*="/page/lectores"],
body nav a[href*="/page/lectores"]:visited,
body .navigation a[href*="/page/lectores"]:visited,
body header a[href*="/page/lectores"]:visited {
    background-color: #008fb4 !important; /* Color celeste */
    color: #ffffff !important;            /* Texto blanco obligatorio */
    -webkit-text-fill-color: #ffffff !important; /* Fuerza el relleno blanco */
    
    /* CENTRADO PERFECTO */
    padding: 8px 18px !important;         /* Relleno simétrico arriba/abajo y lados */
    line-height: 1.2 !important;          /* Controla el espacio invisible de la letra */
    
    border: 2px solid #008fb4 !important; /* Borde para dar textura de sello */
    border-radius: 50px !important;       /* Bordes redondeados tipo sello */
    font-weight: 800 !important;          /* Letra bien gruesa */
    letter-spacing: 1.5px !important;
    
    /* Uso de Flexbox para forzar el centrado absoluto del texto */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    background-image: none !important;    /* Evita degradados del tema base */
    text-shadow: none !important;         /* Evita sombras grises/azules en el texto */
}

/* Efecto al pasar el mouse por encima (hover) */
body nav a[href*="/page/lectores"]:hover,
body .navigation a[href*="/page/lectores"]:hover,
body header a[href*="/page/lectores"]:hover {
    background-color: #008fb4 !important; /* Mantiene el mismo celeste */
    border-color: #008fb4 !important;
    color: #ffffff !important;            /* Texto siempre blanco */
    -webkit-text-fill-color: #ffffff !important;
    transform: translateY(-2px) !important; 
    box-shadow: 0 4px 10px rgba(0, 143, 180, 0.4) !important;
    text-decoration: none !important;
}

/* Estados al hacer clic, al enfocar, y al estar dentro de la página "Lectores" */
body nav a[href*="/page/lectores"]:active,
body nav a[href*="/page/lectores"]:focus,
body nav a[href*="/page/lectores"].active,
body nav a[href*="/page/lectores"].current,
body nav li.active a[href*="/page/lectores"],
body nav li.current a[href*="/page/lectores"],
body .navigation a[href*="/page/lectores"]:active,
body .navigation a[href*="/page/lectores"]:focus,
body header a[href*="/page/lectores"]:active,
body header a[href*="/page/lectores"]:focus {
    background-color: #008fb4 !important; 
    color: #ffffff !important;            
    -webkit-text-fill-color: #ffffff !important;
    border-color: #008fb4 !important;
    outline: none !important;             
}

/* REFUERZO EXTREMO: Fuerza el texto blanco en cualquier sub-etiqueta que Omeka inyecte */
body nav a[href*="/page/lectores"] *,
body .navigation a[href*="/page/lectores"] *,
body header a[href*="/page/lectores"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 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: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !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 */
header nav ul li a:hover,
.navigation ul li 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;
}

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

/* 5. ESTADO ACTIVO (Indicador de página actual) */
header nav ul li a[aria-current],
header nav ul li a.active,
.navigation ul li a[aria-current],
.navigation ul li 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;
}