:root {
    --pagefind-ui__rpesult-link: #003366 !important; /* Azul oscuro para enlaces de resultados */
}

:root {
    --mobile-header-height: 60px; 
}

/* 2. Contenedor principal del buscador */
#liberty-pagefind {
    /* Posición y Centrado (se mantiene) */
    position: absolute;
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
    
    z-index: 99999 !important; 
    width: 50%; 
    max-width: 500px; 
}

/* 3. Media Query para Dispositivos Móviles (ancho <= 768px) */
@media (max-width: 1024px) {
    #liberty-pagefind {
        /* Se mantiene la configuración para móvil */
        width: 95% !important; 
        max-width: none !important; 
        top: 10px !important; 
    }

.e-off-canvas__main {
        
        margin-top: var(--mobile-header-height); 
        height: calc(100vh - var(--mobile-header-height)); 
        top: 0 !important; 
    }
}

/* 4. Estilos de la Interfaz de Pagefind  */

/* Fondo blanco del cuadro de resultados */
pagefind-ui::part(results-area),
.pagefind-ui__results-area {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Ocultar el botón nativo de limpiar */
.pagefind-ui__search-clear {
    display: none !important;
}

/* Estilos del campo de búsqueda (input) */
.pagefind-ui__search-input {
    background-color: #f0f0f0 !important;
    border-radius: 25px !important;
    border: 1px solid #ccc !important;
    padding: 8px 30px 8px 12px !important;
    font-size: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/*color del título principal de cada resultado */
.pagefind-ui__result-title {
    color: #003163 !important; 
    font-weight: 600; 
}

/* Estilo para el nombre de la página (Page name) */
.page-name {
    font-size: 13px;
    color: #dfdfdf !important; 
    margin-top: 4px;
    line-height: 1.2;
}