/*
 Theme Name:     Directorio de Grupos (GeneratePress Child) - v2.0 Limpio
 Description:    Tema hijo para el directorio de grupos de Telegram. Versión limpia y organizada.
 Author:         Tu Nombre & Jules
 Template:       generatepress
 Version:        2.0.0
*/

/* --- 1. CONFIGURACIÓN GLOBAL: VARIABLES Y ESTILOS BASE --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Roboto:wght@400;500&display=swap');

:root {
    /* Paleta de Colores */
    --color-primary: #0088cc;
    --color-secondary: #5b95eb;
    --color-accent: #FFC107;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-tag: #c91f7d;

    /* Tonos */
    --text-dark: #212121;
    --text-light: #666;
    --text-white: #ffffff;
    --border-color: #e0e0e0;
    --background-light: #FFFFFF;
    --background-grey: #F0F2F5;

    /* Tipografía */
    --font-headings: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;

    /* UI */
    --border-radius: 12px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --transition-fast: all 0.2s ease-in-out;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--background-grey);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}
a:hover {
    color: var(--color-secondary);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.home-section {
    padding: 40px 0;
    border-bottom: 1px solid var(--border-color);
}

.section-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 2rem;
}

/* --- 2. COMPONENTES REUTILIZABLES --- */

/* Botones */
.button, button, input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
    color: var(--text-white) !important;
    padding: 12px 28px;
    border: none;
    border-radius: 50px; /* Píldora */
    font-family: var(--font-headings);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 10px rgba(0, 136, 204, 0.25);
    white-space: nowrap;
}
.button:hover, button:hover, input[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(0, 136, 204, 0.3);
}

.button.button-share {
    background: linear-gradient(45deg, #28a745, #5cb85c);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
}
.button.button-share:hover {
    box-shadow: 0 7px 20px rgba(40, 167, 69, 0.3);
}

.button.button-report,
.button.button-secondary.button-report {
    background: linear-gradient(45deg, #dc3545, #e45d5d);
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.25);
}
.button.button-report:hover,
.button.button-secondary.button-report:hover {
    box-shadow: 0 7px 20px rgba(220, 53, 69, 0.3);
}



/* --- 3. LAYOUT DE GRUPOS (GRID & LIST) --- */

/* 3.1 Grid de Grupos (Destacados) */
.telegram-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.telegram-group,
.telegram-group-card { /* Aplicar a ambas clases por si se usan en distintos sitios */
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.telegram-group:hover,
.telegram-group-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}

.telegram-group.featured,
.telegram-group-card.featured {
    border: 2px solid var(--color-accent);
    background-color: #EBF6FF; /* Fondo amarillo pálido */
}

.featured-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(45deg, #2B748F, #B0C7D6);
    color: var(--text-dark);
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.group-image {
    margin-bottom: 0;
}
.group-image img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.group-info {
    padding: 15px;
}
.group-title {
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
.group-title a {
    color: var(--text-dark);
}
.group-title a:hover {
    color: var(--color-primary);
}

/* 3.2 Lista de Grupos (Filas) */
.group-list-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-list-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--background-light);
    color: var(--text-dark);
    border-radius: var(--border-radius);
    transition: var(--transition-fast);
    border: 1px solid var(--border-color);
}
.group-list-item-row:hover {
    background-color: #f8fbff;
    border-color: var(--color-secondary);
    transform: scale(1.01);
    box-shadow: var(--shadow-sm);
}

.group-list-item-row .group-title {
    font-weight: 700;
    font-size: 1.1rem;
}
.group-list-item-row .group-title-link {
    color: var(--text-dark);
}

.group-list-item-row .group-item-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.group-list-item-row .group-meta-data {
    font-size: 0.9em;
    color: var(--text-light);
    background-color: var(--background-grey);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}





/* --- Estilos para Formularios de Búsqueda --- */

/* Contenedor principal para ambos buscadores */
.telegram-directory-search-form {
    background-color: #f7faff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.telegram-directory-search-form .search-form-title {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

/* Estilos para el formulario de la Homepage */
.home-search-form {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
}

.home-search-form .search-group {
    flex: 1 1 auto;
    display: flex;
}

.home-search-form .search-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 5px 0 0 5px;
}

.home-search-form .submit-group {
    flex: 0 0 auto;
}

.home-search-form .search-submit {
    padding: 12px 25px;
    font-size: 1.1em;
    border: 1px solid #0073aa;
    border-radius: 0 5px 5px 0;
    background-color: #0073aa;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
    height: 48px; /* Match input height + borders */
}

.home-search-form .search-submit:hover {
    background-color: #005177;
}





/* Lista de Taxonomías (Categorías, Ubicaciones) */
.taxonomy-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.taxonomy-list ul li {
    background-color: var(--color-primary);
    border-radius: 20px;
    transition: var(--transition-fast);
}
.taxonomy-list ul li:hover {
    background-color: var(--color-secondary);
    transform: scale(1.05);
}
.taxonomy-list ul li a {
    color: var(--text-white);
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 8px 18px;
    display: block;
}

/* Nube de Etiquetas */
.tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.tagcloud a {
    background-color: var(--background-grey);
    color: var(--text-light);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.9em !important;
    text-decoration: none;
    border: 1px solid var(--border-color);
}
.tagcloud a:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--text-white);
}






/* 2. ESTILOS BASE DEL ARTÍCULO Y ESTRUCTURA DE 2 COLUMNAS
---------------------------------------- */
.single-grupo-article-flat {
    /* Mantenemos padding y background transparente como antes */
    padding: 24px;
}

.group-detail-layout {
    display: flex;
    flex-direction: column; /* Mobile first: apila columnas */
    gap: 22px; /* Espacio entre las columnas cuando se vuelven horizontales */
}

/* Columna Izquierda (Imagen y Vistas) */
.group-sidebar-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra la imagen y vistas en móvil */
    gap: 20px;
}

.group-image-block img {
    width: 120px;
    height: 120px;
    border-radius: 8px; /* Bordes ligeramente redondeados, no circular */
    object-fit: cover;
}

.group-views-counter {
    text-align: center;
}
.views-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-texto-secundario);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.views-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-texto);
    line-height: 1.2;
}


/* Columna Derecha (Título, Votación, Descripción, Botones, Etiquetas) */
.group-main-content {
    /* Flex-grow si queremos que ocupe el espacio restante */
}

/* MEDIA QUERY PARA DESKTOP (Layout de 2 columnas) */
@media (min-width: 768px) {
    .single-grupo-article-flat {
        padding: 32px;
    }
    .group-detail-layout {
        flex-direction: row; /* Columnas horizontales en desktop */
        align-items: flex-start; /* Alinea los elementos a la parte superior */
    }
    .group-sidebar-left {
        flex: 0 0 160px; /* Ancho fijo para la columna izquierda */
        align-items: flex-start; /* Alinea a la izquierda en desktop */
        gap: 32px;
    }
    .group-image-block img {
        width: 160px; /* Ajuste de tamaño de imagen para desktop */
        height: 160px;
    }
    .group-views-counter {
        text-align: left;
    }
    .group-main-content {
        flex-grow: 1; /* La columna derecha toma el espacio restante */
    }
}

















/* 4. ESTILOS DE GRUPOS RELACIONADOS Y SIDEBAR (Sin Cambios significativos, ya los tienes)
----------------------------------------------------------------------------------------- */
/* ... (Mantén el CSS de related-groups y sidebar que te di en la respuesta anterior) ... */
/* Asegúrate de que los estilos para eliminar cajas y sombras se mantengan: */
/*
.single-grupo-article-flat,
.widget-area-single-grupo .widget {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.widget-area-single-grupo .widget {
    margin-bottom: 40px;
}
*/

/* --- Estilos para el Modal de Compartir --- */
.share-modal {
    /* display: none; /* Controlled by inline style for initial state */
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}

.share-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
    text-align: center;
}

.close-modal {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
}

.share-modal-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.social-link {
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.social-link.whatsapp { background-color: #25D366; }
.social-link.telegram { background-color: #0088cc; }
.social-link.twitter { background-color: #1DA1F2; }
.social-link.facebook { background-color: #1877F2; }

#wptt-copy-link-button {
    padding: 10px 20px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 5px;
}


/*
========================================
== MEJORA: NAVEGACIÓN ENTRE POSTS ==
Añadir al final de style.css
========================================
*/

/* Contenedor principal de la navegación */
.post-navigation {
    padding: 25px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-top: 40px;
}

/* Aplicar Flexbox para alinear los enlaces en una sola fila */
.post-navigation .nav-links {
    display: flex;
    justify-content: space-between; /* Uno a la izquierda, otro a la derecha */
    align-items: center;
    gap: 20px;
}

/* Estilos para el texto de los enlaces */
.post-navigation .meta-nav {
    font-size: 0.9em;
    color: var(--text-light);
    display: block;
    margin-bottom: 5px;
}

.post-navigation .post-title {
    font-family: var(--font-headings);
    font-weight: 700;
    color: var(--color-primary);
}

/* Alineación del texto dentro de cada enlace */
.post-navigation .nav-previous {
    text-align: left;
}

.post-navigation .nav-next {
    text-align: right;
}


/*
========================================
== MEJORA: PÁGINA SINGLE DE GRUPO (Parte 1) ==
Añadir al final de style.css
========================================
*/

/* Contenedor principal del artículo */
.single-telegram .single-grupo-article-flat {
    background: var(--background-light);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow-sm);
}

/* Layout principal (Sidebar a la izquierda, contenido a la derecha) */
.group-detail-layout {
    display: flex;
    flex-wrap: wrap; /* Permitir que se apile en móvil */
    gap: 30px;
}

.group-sidebar-left {
    flex: 0 0 180px; /* Ancho fijo para la barra lateral */
    text-align: center;
}

.group-main-content {
    flex: 1;
    min-width: 0; /* Permite que el contenido se encoja */
}

/* Estilo de la imagen del grupo */
.group-image-block img {
    width: 150px;
    height: 150px;
    border-radius: 20px; /* Bordes más suaves */
    box-shadow: var(--shadow-md);
    margin-bottom: 20px;
}

/* Contador de vistas */
.group-views-counter {
    background: var(--background-grey);
    padding: 10px;
    border-radius: var(--border-radius);
}
.views-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.views-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

/* Título principal del grupo */
.group-header-info .group-title {
    font-size: 2.8em;
    text-align: left;
    margin-bottom: 10px;
}

/* Taxonomías (Categorías, Ubicación) */
.group-taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.group-taxonomies .taxonomy-item a {
    background-color: var(--background-grey);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.9em;
    color: var(--text-light);
    font-weight: 500;
}
.group-taxonomies .taxonomy-item a:hover {
    background-color: var(--color-secondary);
    color: var(--text-white);
}

/* --- RESPONSIVE PARA PÁGINA SINGLE --- */
@media (max-width: 768px) {
    .group-detail-layout {
        flex-direction: column; /* Apilar en móvil */
        align-items: center; /* Centrar todo */
    }
    .group-sidebar-left {
        flex-basis: auto; /* Ancho automático */
    }
    .group-header-info .group-title {
        text-align: center; /* Centrar título en móvil */
        font-size: 2.2em;
    }
    .group-taxonomies {
        justify-content: center; /* Centrar taxonomías en móvil */
    }
}



/*
========================================
== FIX RESPONSIVE: PÁGINA SINGLE ==
Añadir al final de style.css
========================================
*/

@media (max-width: 480px) {

    /* Reducir el padding en el contenedor principal del artículo */
    .single-telegram .single-grupo-article-flat {
        padding: 15px; /* Menos padding para pantallas pequeñas */
    }

    /* Ajustar el tamaño del título principal para que no se desborde */
    .single-telegram .group-header-info .group-title {
        font-size: 1.8em; /* Reducir tamaño de la fuente */
        line-height: 1.2;
        word-wrap: break-word; /* Forzar el corte de palabras largas si es necesario */
    }

    /* Reducir el padding del bloque de meta info */
    .single-telegram .grupo-meta-info {
        padding: 20px;
    }

    /* Asegurar que los botones de acción se apilen si no caben */
    .single-telegram .group-actions {
        justify-content: center; /* Centrar los botones cuando se apilan */
    }
}




/*
========================================
== FIX: LAYOUT PÁGINA DE GRUPO ==
Añadir al final de style.css
========================================
*/

/*
 * El tema base fuerza un ancho del 100% al área de contenido principal.
 * Necesitamos anular esto en nuestra página de dos columnas para que 
 * la barra lateral pueda posicionarse correctamente.
*/
.single-telegram .single-grupo-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.single-telegram .main-content-area-grupo {
    flex: 1;
    min-width: 65%;
    width: auto; /* Anular el width: 100% del tema base */
}

.single-telegram .widget-area-single-grupo {
    flex-basis: 300px;
    flex-grow: 1;
}










/*
========================================
== MEJORA: BUSCADOR DE TAXONOMÍAS ==
Añadir al final de style.css
========================================
*/

/* Contenedor del formulario avanzado en páginas de taxonomía */
.advanced-search {
    display: flex;
    flex-wrap: wrap; /* Permitir que se apile en móvil */
    gap: 15px;
    align-items: center;
    background-color: var(--background-light);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

/* Estilo base para los campos del formulario */
.advanced-search input[type="text"],
.advanced-search .search-filter-select {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid var(--border-color);
    border-radius: 50px; /* Bordes de píldora */
    font-size: 1rem;
    font-family: var(--font-body);
    transition: var(--transition-fast);
    height: 50px; /* Altura fija para consistencia */
    -webkit-appearance: none; /* Quitar estilos por defecto en iOS */
    -moz-appearance: none;
    appearance: none;
    background-color: var(--background-grey);
}

/* Estilo para el select, para que parezca un input */
.advanced-search .search-filter-select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23555%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1em;
}

/* Estado de foco para los campos */
.advanced-search input[type="text"]:focus,
.advanced-search .search-filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(0, 136, 204, 0.1);
}

/* Contenedores de los items del formulario */
.advanced-search .filter-item {
    flex-grow: 1; /* Para que ocupen el espacio disponible */
}
.advanced-search .search-item {
    flex-basis: 250px;
}
.advanced-search .dropdown-item {
    flex-basis: 250px;
}
.advanced-search .submit-item {
    flex-grow: 0;
}

/* Botón de envío, ya hereda el estilo de .button */
.advanced-search .search-submit {
    height: 50px; /* Misma altura que los inputs */
}





/*
========================================
== MEJORA: CABECERA DE TAXONOMÍAS ==
Añadir al final de style.css
========================================
*/

/* Contenedor de la cabecera de la página de archivo/taxonomía */
.tax-tipos .page-header,
.tax-ciudad .page-header,
.tax-adultos .page-header,
.tag .page-header {
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
    color: var(--text-white);
    padding: 40px 20px;
    border-radius: var(--border-radius);
    margin-bottom: 40px;
    box-shadow: var(--shadow-md);
}

/* Título dentro de la cabecera */
.page-header .page-title {
    color: var(--text-white);
    font-size: 2.5em;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* El nombre específico de la taxonomía (ej. "Hobbies") */
.page-header .page-title span {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 3px;
}



/*
========================================
== MEJORA RESPONSIVE: FILAS DE GRUPO ==
Añadir al final de style.css
========================================
*/

/*
 * En pantallas pequeñas (móviles), ocultamos la información de país y tipo
 * para dejar solo el nombre del grupo y el botón, haciendo la interfaz más limpia.
*/
@media (max-width: 480px) {
    .group-list-item-row .group-meta-country,
    .group-list-item-row .group-meta-type,
    .group-list-item-row .group-meta-separator,
    .group-list-item-row .group-meta-data { /* Cubrimos todas las posibles clases */
        display: none;
    }

    /* Opcional: Reducir un poco el padding en la fila para ahorrar espacio */
    .group-list-item-row {
        padding: 12px 15px;
    }

    /* Opcional: Reducir el tamaño del título y del botón en móviles */
    .group-list-item-row .group-title {
        font-size: 1rem;
    }
    .group-list-item-row .button.ver-grupo,
    .group-list-item-row .button.button-view-group {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}



/*
========================================
== MEJORA: WIDGET DE GRUPOS RECIENTES ==
Añadir al final de style.css
========================================
*/

/* Quitar borde y ajustar padding del widget contenedor */
.widget-area-single-grupo .widget_dgt_recent_groups_widget {
    border: none; /* Eliminar el borde principal del widget */
    padding: 20px; /* Ajustar el padding si es necesario */
}

/* Título del widget de grupos recientes */
.widget_dgt_recent_groups_widget .widget-title {
    font-size: 1.4em;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 25px;
}

/* Eliminar borde de cada elemento de la lista */
.widget_dgt_recent_groups_widget .dgt-recent-groups-widget-list li {
    border-bottom: none;
    padding: 0;
    margin-bottom: 20px;
}

/* Mejorar el contenedor del enlace para un efecto hover */
.widget_dgt_recent_groups_widget .dgt-widget-item-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: var(--border-radius);
    transition: var(--transition-fast);
}

.widget_dgt_recent_groups_widget .dgt-widget-item-link:hover {
    background-color: var(--background-grey);
    transform: scale(1.03);
}

/* Estilo para la imagen (thumbnail) */
.widget_dgt_recent_groups_widget .dgt-widget-thumb {
    width: 50px; /* Un poco más grande */
    height: 50px;
    border-radius: 8px; /* Bordes redondeados */
    object-fit: cover;
    flex-shrink: 0;
}

/* Contenedor del texto */
.widget_dgt_recent_groups_widget .dgt-widget-item-content {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Espacio entre título y taxonomía */
}

/* Título del grupo en el widget */
.widget_dgt_recent_groups_widget .dgt-widget-item-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.3;
}

/* Taxonomías en el widget */
.widget_dgt_recent_groups_widget .dgt-widget-item-tax {
    font-size: 0.85em;
    color: var(--text-light);
}






/* --- Menú Horizontal en el Footer Widget --- */

/* Selecciona el contenedor del widget de menú en la primera área del footer */
.footer-widget-1 .widget_nav_menu .menu {
    
    /* 1. Convierte la lista en un layout flexible */
    display: flex;
    
    /* 2. Permite que los elementos pasen a la siguiente línea en móviles */
    flex-wrap: wrap;
    
    /* 3. Centra los elementos horizontalmente */
    justify-content: center;
    
    /* 4. Quita los estilos de lista (puntos y sangría) */
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Espaciado entre cada elemento del menú */
.footer-widget-1 .widget_nav_menu .menu-item {
    margin: 5px 15px; /* 5px arriba/abajo, 15px a los lados */
}

/* Estilo de los enlaces del menú */
.footer-widget-1 .widget_nav_menu .menu-item a {
    text-decoration: none;
    font-weight: 500;
    color: var(--text-light); /* Usa una de tus variables globales */
}

.footer-widget-1 .widget_nav_menu .menu-item a:hover {
    color: var(--color-primary); /* Usa una de tus variables globales */
    text-decoration: underline;
}