/* Estilos para el menú lateral */
.menu-lateral {
    list-style: none;
    padding: 20px;
    margin: 0;
    width: 250px;
    min-height: 100vh;
    box-shadow: -4px 0px 4px -4px rgba(0, 0, 0, 0.15);

}

/* Estilo para cada ítem del menú */
.menu-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    transition: background-color 0.2s, color 0.2s;
    white-space: overflow-wrap;
    width: 100%;
    /* Evita que sobrepase su contenedor */
    box-sizing: border-box;
    /* Mantiene el tamaño sin afectar padding */
}

/* Ítem activo */
.menu-item.activo {
    background: linear-gradient(135deg, #d9e4a8 0%, #c6d873 100%);
    /*color: white;*/
    color: #8fa72d;
    font-weight: bold;
    border-radius: 8px;

}

/* Hover */
.menu-item:hover {
    background-color: #f4f4f2;
    color: #8fa72d;
    border-radius: 8px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

/* Grupos de sublecciones */
.menu-grupo {
    margin: 5px 0;
}

/* Título del grupo */
.menu-grupo .grupo-titulo {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

/* Ajuste para los iconos */
.fa-caret-down,
.fa-forward,
.fa-caret-right {
    font-size: 14px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Ajuste específico para fa-forward */
.fa-forward {
    flex-shrink: 0;
}

/* Ajuste del espacio entre icono y texto en los grupos */
.grupo-icono {
    margin-right: 8px;
    display: flex;
    align-items: center;
}

/* Ajuste para el texto en los grupos */
.grupo-texto {
    flex-grow: 1;
    min-width: 180px;
}

/* Lista anidada */
.sublecciones {
    list-style: none;
    padding-left: 20px;
}

/* Ítems de sublecciones */
.sublecciones .menu-item {
    padding: 8px 15px;
    font-size: 15px;
}

/*   ESTO YA NO ES PARA EL MENU */
/* Estilo para el contenedor de la lección */
.b-detail {
    font-family: "Lora", serif;
    font-size: 17px; /* Tamaño base */
    font-weight: 400;
    line-height: 1.7;
    color: #333;
}

/* Ajustar encabezados proporcionalmente */
.b-detail h1 { font-size: 2em; }
.b-detail h2 { font-size: 1.75em;}
 div.b-detail h3 { font-size: 1.5em;
    margin-top: 1em;
    }
 div.b-detail h4 {
     font-size: 1.25em;
     margin-top: 1.25em;}

/* Asegurar coherencia en listas y código */
.b-detail p,
.b-detail ul,
.b-detail ol,
.b-detail li,
.b-detail code {
    font-size: inherit; /* Hereda de .b-detail */
    line-height: inherit; /* Mantiene consistencia */
}
.b-detail li {
    font-size: 17px !important;
}
/* Ajuste de listas */
.b-detail ul, .b-detail ol {
    padding-left: 1.5em;
    margin-left: 0; /* Evita desbordes */
}

.b-detail li {
    padding-left: 0.5em; /* Mantiene espacio interno sin mover las marcas */
}
.b-detail pre code {
    border-radius: 8px; /* Ajusta el valor según qué tan redondeado lo quieras */
    overflow: hidden; /* Evita que el contenido sobresalga de las esquinas */
    padding: 1em; /* Mejora el espaciado interno */
}

.b-detail pre  {

    border-radius: 8px;
    background-color: #282c34; /* Asegura que el fondo se vea bien */
    padding: 1em;
    margin: 2em 0; /* Más separación arriba y abajo */

}
.b-detail p code, span code, blockquote code {
    background-color: #e0e0e0; /* Un gris ligeramente más oscuro */
    color: #333333;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85em; /* Reduce ligeramente el tamaño de fuente */
    line-height: inherit; /* Mantiene el espaciado del texto circundante */
}
.b-detail li code {
    background-color: #e0e0e0 !important;
    color: #333333 !important;
    padding: 0.1em 0.3em !important;
    border-radius: 3px !important;
    font-family: monospace !important;
    font-size: 0.85em !important;
    line-height: inherit !important;
}
.b-detail table code {
    background-color: #e0e0e0 !important;
    color: #333333 !important;
    padding: 0.1em 0.3em !important;
    border-radius: 3px !important;
    font-family: monospace !important;
    font-size: 0.85em !important;
    line-height: inherit !important;
}

.b-detail table code {
    color: #333333;
    background-color: #e0e0e0 !important;
}


/* para el h6 utilidades, en el footer: */
.footer-hedding-wrapper {
    position: relative;
    text-align: center;
    margin-bottom: 15rem;

}

.utilidades-titulo {
    position: relative;
    display: inline-block;
    padding: 0 1rem;
    background-color: #1a1a1a;
    /* ajusta al fondo del footer */
    z-index: 1;
}

.footer-hedding-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #2b2b2b;
    z-index: 0;
}
/* Adaptable a pantallas pequeñas */
@media (max-width: 576px) {
    .b-detail p {
        font-size: 1em; /* Más pequeño en móviles */
        line-height: 1.5;
    }
     .b-detail ul, .b-detail ol {
        padding-left: 0.5em;
        margin-left: 0;
        list-style-position: inside !important;
    }
}


/*  wtf el widget lateral de la galeria */
/* Asegura que el contenedor se comporte como una cuadrícula */
.sidebar-widget .widget-gallery ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    /* Espacio entre imágenes */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Estilo para los elementos de la galería */
.sidebar-widget .widget-gallery ul li {
    width: 100%;
    /* Cada celda ocupa el espacio completo de su columna */
}

/* Imagen dentro del enlace: se adapta al ancho de su contenedor */
.sidebar-widget .widget-gallery ul li img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    object-fit: cover;
}

.widget-gallery ul li img {
    filter: blur(0.6px) sepia(0.5) brightness(1.4) saturate(0.4);
    transition: transform 0.3s ease, filter 0.3s ease;
    transform: scale(1);
    /* estado normal */
}

/* Al pasar el cursor: se muestra más grande y sin filtro */
.widget-gallery ul li img:hover {
    transform: scale(1.1);
        filter: none;
        z-index:4;
}

/* enlaces en single post: <-- volver al listado -- volver a la busqueda --> */
.retorno-doble-alineado {
    display: flex;
    align-items: center;
    margin-top: 2em;
    font-size: 0.95em;
    flex-wrap: wrap;
}

.retorno-izq {
    margin-left: 0em;
    /* alinea con etiquetas */
}

.retorno-der {
    margin-left: auto;
    /* empuja hacia la derecha */
    margin-right: 5em;
    /* pero no al borde */
}
/*
.retorno-doble-alineado a {
    text-decoration: none;
    color: #333;
}
*/
.retorno-doble-alineado i {
    margin: 0 5px;
}

.resultado.oculto {
    display: none;
}


.resultado {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    /*border-bottom: 1px solid #ccc;*/
}

#mostrarMasResultados {
   /* background-color: #007bff;*/
    color: white;
    border: none;
    padding: 0.6em 1.2em;
    font-size: 1em;
    cursor: pointer;
}

#mostrarMasResultados:hover {
    background-color: #323232;
}
.snippet mark {
    background-color: yellow;
    color: black;
}


/*about us*/

[id="context"] {
    scroll-margin-top: 140px;
}