/* General Styles */

.glosario-content {
    display: flex !important;
    gap: 1.5rem !important;
}

.sticky-container {
    position: sticky !important;
    top: 1rem !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
    background-color: #f8f9fa !important;
    padding: 1rem !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    height: fit-content !important;
}
.titulo-categorias.desktop-only {
    font-size: 2rem !important; /* Tamaño de fuente grande para destacar */
    font-weight: 500 !important; /* Peso moderado */
    color: #333 !important; /* Color principal */
    text-align: center !important;
    background-color: #f0f4f8 !important; /* Fondo claro */
    padding: 1rem 2rem !important; /* Espaciado interno */
    margin-bottom: 1.5rem !important; /* Espacio debajo del título */
    border-radius: 8px !important; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Sombra ligera para dar profundidad */
    position: relative;
}

/* Línea decorativa debajo del título */
.titulo-categorias.desktop-only::after {
    content: "";
    display: block;
    width: 50px; /* Ancho de la línea decorativa */
    height: 3px;
    margin: 0.5rem auto 0; /* Espaciado alrededor de la línea */
    border-radius: 2px;
}

.glosario-header {
    background-color: #f8f9fa !important;
    padding: 2rem 1rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

.glosario-buscador {
    display: block !important;
    width: 80% !important;
    max-width: 400px !important;
    margin: 0 auto 1rem auto !important;
}

h1.titulo-termino {
    display: block !important;
    padding: 1.5rem !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-size: 4rem !important;
    margin-bottom: 3rem !important;
}

.glosario-definicion {
    flex: 1 !important;
    background-color: #fff !important;
    padding: 1.5rem !important;
    border-radius: 0.25rem !important;
}

.glosario-term-list, .categorias-lista {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.glosario-term-list-container {
    max-height: calc(100vh - 4rem) !important;
    overflow-y: auto !important;
    padding-right: 0.5rem !important;
    margin-top: 1rem !important;
    position: sticky !important;
    top: 1rem !important;
}

.glosario-term-item {
    margin-bottom: 0.25rem !important;
}

.glosario-categoria {
    padding: 0.5rem 1rem !important;
    border: 1px solid #ddd !important;
    border-radius: 0.5rem !important;
    text-decoration: none !important;
    transition: background-color 0.3s, color 0.3s !important;
}

.titulo-categorias, h2 {
    font-size: 3rem !important;
    font-weight: normal !important; /* Cambia 'none' por 'normal' para desactivar la negrita */
    color: #333 !important;
    text-decoration: none !important; /* Asegúrate de que no tenga subrayado */
}


.desktop-only {
    display: block !important;
}

.mobile-only {
    display: none !important;
}

.elementor-page-title, h1.entry-title, .glosario-header h1 {
    display: none !important;
}

/* Sección de Artículos Relacionados Mejorada */
.relacionados-contenedor-wrapper {
    display: flex;
    justify-content: center; /* Centra el contenedor en la página */
    margin-top: 2rem;
    width: 100%;
}

.glosario-articulos-relacionados {
    width: 80%; /* Ajusta el ancho al 80% para centrado visual */
    max-width: 900px; /* Tamaño máximo para mantener legibilidad en pantallas grandes */
    background-color: #f9f9f9; /* Fondo ligero para resaltar el área */
    padding: 1.5rem; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidad */
    text-align: center;
}

.titulo-articulos-relacionados {
    font-size: 2rem;
    font-weight: bold;
    color: #333; /* Color para destacar el título */
    margin-bottom: 1rem;
}

.articulos-relacionados-contenedor {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.articulo-relacionado {
    flex: 1 1 calc(33.33% - 1rem); /* Tres columnas en pantalla grande */
    max-width: calc(33.33% - 1rem);
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.articulo-relacionado:hover {
    transform: translateY(-4px); /* Efecto de elevación al hacer hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra aumentada en hover */
}

.imagen-articulo,
.imagen-articulo-placeholder {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.imagen-articulo img,
.imagen-articulo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.titulo-articulo {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin: 0.75rem;
}


/* Estilos de artículo sin imagen */
.bonito-sin-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    color: #666;
    height: 150px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.icono-sin-imagen {
    font-size: 2em;
    color: #bbb;
}

.texto-sin-imagen p {
    margin: 5px 0 0;
    color: #777;
}

@media (max-width: 768px) {
    /* Ocultar elementos no necesarios en móviles */
    .desktop-only,
    .glosario-header,
    .glosario-categorias,
    .glosario-sidebar,
    .glosario-buscador {
        display: none !important;
    }

    /* Centrar y ajustar el contenedor de contenido en móviles */
    .glosario-content {
        display: block !important;
        padding: 0 1rem !important; /* Espaciado a ambos lados para centrado */
    }

    /* Ajustes en el contenedor de definición para móviles */
    .glosario-definicion {
        padding: 1.5rem !important;
        width: calc(100% - 2rem) !important; /* Reduce el ancho para margen simétrico */
        margin: 0 auto !important; /* Centra el contenedor en móviles */
        background-color: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Ajuste en el título del término para espaciado entre líneas en móviles */
    h1.titulo-termino {
        font-size: 2.5rem !important; /* Ajuste de tamaño para móviles */
        line-height: 1.3 !important; /* Aumenta espacio entre líneas */
        margin-bottom: 1.5rem !important;
    }

    /* Artículos relacionados ocupa todo el ancho en móvil */
    .glosario-articulos-relacionados {
        width: 100% !important;
        margin-top: 2rem !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        background-color: #f8f9fa !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
    }

    .titulo-articulos-relacionados {
        font-size: 1.8rem !important;
        font-weight: bold !important;
        color: #333 !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }

    /* Ajuste en la disposición de artículos relacionados */
    .articulos-relacionados-contenedor {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .articulo-relacionado {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.5rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* Botón de enlace al glosario */
    .glosario-link {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 2rem auto !important;
        padding: 0.75rem !important;
        background-color: #007bff !important;
        color: #fff !important;
        text-align: center !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        font-size: 1.2rem !important;
        font-weight: bold !important;
    }
}