/* Estilos para la cabecera de taxonomía y sus elementos internos */
.taxonomy-header .taxonomy-header-content.container {
    padding-top: 15px;
    padding-bottom: 15px;
    /* .container ya debería centrarlo y darle max-width */
}

.term-children {
    /* Contenedor para sub-términos (sub-ubicaciones, sub-categorías) */
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f7f7f7;
    /* Un fondo ligeramente diferente */
    border: 1px solid #ddd;
    /* var(--medium-gray-color); si está definido, sino un color estándar */
    border-radius: 4px;
}

.term-children .child-locations-title,
.term-children .child-categories-title {
    font-size: 1.4em;
    /* Un poco más grande que el título de sección normal */
    margin-bottom: 15px;
    color: #333;
    /* var(--dark-gray-color); si está definido */
    font-weight: 600;
}

.term-children .category-grid {
    margin-bottom: 0;
    /* Quitar margen inferior si es el último elemento */
}

.location-search-form,
.city-search-form,
.tag-search-form,
.category-search-form {
    margin-top: 25px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
}

.location-search-form .search-form-title,
.city-search-form .search-form-title,
.tag-search-form .search-form-title,
.category-search-form .search-form-title {
    font-size: 1.3em;
    margin-bottom: 10px;
}

.ubicacion-dropdown-form select,
.category-dropdown-form select,
.city-dropdown-form select,
.tag-dropdown-form select,
.country-dropdown-form select {
    flex-grow: 1;
    margin-bottom: 0;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.ubicacion-dropdown-form noscript .search-submit,
.category-dropdown-form noscript .search-submit,
.city-dropdown-form noscript .search-submit,
.tag-dropdown-form noscript .search-submit,
.country-dropdown-form noscript .search-submit {
    flex-grow: 0;
    margin-left: 10px;
    padding: 8px 15px;
}

/* Placeholder para el input de búsqueda en filtros de taxonomía */
.taxonomy-search-form input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-right: 10px;
    /* Espacio si el botón está al lado */
}

/* Botón de submit en filtros de taxonomía */
.taxonomy-search-form .search-submit {
    padding: 8px 15px;
    /* Estilos de botón primario/secundario de tu tema */
}


/* Variables de Color (Ejemplo) - Asegúrate que estén definidas o reemplaza por valores directos */
:root {
    --primary-color: #0073aa;
    --secondary-color: #005177;
    --light-gray-color: #f0f0f0;
    --telegram-blue-base: #27A7E7; /* Azul Telegram original */
    --telegram-blue-tenue: #f0f8ff; /* AliceBlue, un azul muy pálido como ejemplo */
    /* Otra opción podría ser usar el azul de telegram con mucha transparencia: rgba(39, 167, 231, 0.05) */
    --medium-gray-color: #ddd;
    --dark-gray-color: #333;
    --text-color: #333;
    --background-color: #fff; /* Fondo del contenido principal, se mantiene blanco */
    --link-color: var(--primary-color);
    --link-hover-color: var(--secondary-color);
    --button-bg-color: var(--primary-color);
    --button-text-color: #fff;
    --button-hover-bg-color: var(--secondary-color);
}

/* Reset básico y tipografía */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    /* Importante para el layout */
    font-size: 100%; /* Establece la base para unidades rem, usualmente 16px */
}

*,
*::before,
*::after {
    box-sizing: inherit;
    /* Heredar box-sizing */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--telegram-blue-tenue) !important; 
    font-size: 1rem; 
}

html {
    background-color: var(--telegram-blue-tenue) !important; 
    min-height: 100%; 
    padding: 0; /* Asegurar que no haya padding en html */
    margin: 0; /* Asegurar que no haya margin en html */
}

body {
    min-height: 100%;
    padding: 0; /* Asegurar que no haya padding en body */
    margin: 0; /* Asegurar que no haya margin en body */
    width: 100%; /* Asegurar que el body ocupe todo el ancho */
    box-sizing: border-box; /* Incluir padding y border en el width/height total */
}

/* Forzar que el contenedor principal del sitio, si existe uno genérico, también tenga el fondo.
   Esto es especulativo ya que no hemos identificado un ID como #page.
   Si tu tema usa un ID o clase específica para envolver TODO (header, main, footer),
   deberíamos usar ese selector aquí. */
.site, /* Clase común en temas de WordPress */
#page, /* ID común */
.site-container, /* Otra clase común */
.page-wrapper /* Y otra más */ 
{
    background-color: var(--telegram-blue-tenue) !important;
    width: 100% !important;
    min-height: 100vh !important; /* Asegurar que ocupe al menos toda la altura de la ventana */
    box-sizing: border-box;
}

/* Aseguramos que el contenido principal (.site-main) mantenga su fondo blanco
   y no herede el azul tenue si está anidado dentro de uno de los wrappers anteriores. 
   Le damos un max-width y lo centramos para que los márgenes del body sean visibles. */
.site-main {
    background-color: var(--background-color) !important; /* var(--background-color) es #fff */
    padding: 20px 0 !important; /* Mantenemos el padding vertical original, eliminamos el horizontal si lo tuviera por defecto */
    min-height: 60vh !important; /* Mantenemos el min-height original */
    max-width: 1200px !important; /* Hacemos que .site-main tenga el mismo max-width que .container */
    margin-left: auto !important;   /* Centramos .site-main */
    margin-right: auto !important;  /* Centramos .site-main */
    width: 90% !important; /* Opcional: similar al .container, para que en pantallas <1200px no ocupe todo el ancho */
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--link-hover-color);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}

/* Contenedor Principal */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
}

/* Cabecera del Sitio */
.site-header {
    background-color: var(--background-color);
    padding: 15px 0;
    border-bottom: 1px solid var(--medium-gray-color);
    margin-bottom: 20px;
}

.site-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site-title {
    margin-bottom: 0.25em;
}

.site-title a {
    font-size: 2em;
    font-weight: bold;
    color: var(--dark-gray-color);
    text-decoration: none;
}

.site-description {
    font-size: 0.9em;
    color: #777;
}

.custom-logo {
    max-height: 80px;
    width: auto;
    margin-bottom: 10px;
}

/* Navegación Principal */
.main-navigation {
    /* background-color: var(--dark-gray-color); */
    /* padding: 0; */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-navigation ul li {
    margin: 0;
}

.main-navigation ul li a {
    display: block;
    padding: 1em;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item>a {
    background-color: var(--primary-color);
}

.menu-toggle {
    display: none;
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.8em 1em;
    margin: 10px auto;
    cursor: pointer;
}


/* Contenido Principal */
.site-main {
    background-color: var(--background-color);
    padding: 20px 0;
    min-height: 60vh;
}

/* Pie de Página */
.site-footer {
    background-color: var(--dark-gray-color);
    color: #ccc;
    padding: 30px 0;
    text-align: center;
    font-size: 0.9em;
    margin-top: 30px;
}

.site-footer a {
    color: #fff;
}

.footer-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-navigation ul li {
    margin: 0 10px;
}


/* Títulos de Página y Sección */
.page-header,
.taxonomy-header,
.search-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--medium-gray-color);
}

.page-title,
.section-title,
.related-groups-title,
.widget-title {
    font-size: 1.8em;
    color: var(--dark-gray-color);
    margin-bottom: 0.5em;
}

.home-section .section-title {
    text-align: center;
    margin-bottom: 20px;
}

/* Formularios */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    padding: 12px 10px; /* Reducido padding vertical para alinear mejor con botones */
    border: 1px solid var(--medium-gray-color);
    border-radius: 3px;
    font-size: 1em;
    max-width: 100%;
    box-sizing: border-box;
}

input[type="search"].search-field {
    min-width: 250px;
}

button,
input[type="submit"],
.button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 15px 20px; /* Aumentado padding vertical */
    font-size: 1em;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin: 5px 0;
    text-align: center;
}

button:hover,
input[type="submit"]:hover,
.button:hover {
    background-color: var(--button-hover-bg-color);
    color: var(--button-text-color);
    text-decoration: none;
}

.button-secondary {
    background-color: #6c757d;
}

.button-secondary:hover {
    background-color: #5a6268;
}

.search-form {
    display: flex;
    align-items: stretch; /* Para que los items tengan la misma altura */
    gap: 10px;
    margin-bottom: 15px;
}

/* Estilos específicos para formularios de 3 campos en escritorio (45%-35%-20%) */
.home-search-form .search-field,
.category-combined-form .filter-item:nth-of-type(1),
.ubicacion-combined-form .filter-item:nth-of-type(1) {
    width: calc((100% - 20px) * 0.45); /* 45% del espacio (total - 2 gaps de 10px) */
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 0; /* Anular min-width previo de .search-field */
}

.home-search-form .search-filter-select,
.category-combined-form .filter-item:nth-of-type(2),
.ubicacion-combined-form .filter-item:nth-of-type(2) {
    width: calc((100% - 20px) * 0.35); /* 35% del espacio (total - 2 gaps de 10px) */
    flex-grow: 0;
    flex-shrink: 0;
}

.home-search-form .search-submit,
.category-combined-form .search-submit,
.ubicacion-combined-form .search-submit {
    width: calc((100% - 20px) * 0.20); /* 20% del espacio (total - 2 gaps de 10px) */
    flex-grow: 0;
    flex-shrink: 0;
    /* padding-left/right ya están en la regla general del botón, pueden ajustarse si es necesario */
}

/* Hacer que los inputs/selects dentro de .filter-item llenen el contenedor */
.category-combined-form .filter-item .search-field,
.ubicacion-combined-form .filter-item .search-field,
.category-combined-form .filter-item select,
.ubicacion-combined-form .filter-item select {
    width: 100%;
    height: 100%; 
    box-sizing: border-box; 
}

/* Anular margen específico que no se necesita con gap en formularios de taxonomía */
.taxonomy-search-form input[type="text"] {
    /* margin-right: 10px; */ /* Comentado o eliminado */
}

/* Estilos para formularios de búsqueda estándar (2 elementos: input + botón) */
/* Aplicable a search.php y widgets de búsqueda */
.search-form:not(.home-search-form):not(.category-combined-form):not(.ubicacion-combined-form) input[type="search"].search-field {
    flex-grow: 1; /* El campo de texto ocupa el espacio disponible */
    min-width: 150px; /* Un min-width para que no se encoja demasiado antes de apilarse */
}

.search-form:not(.home-search-form):not(.category-combined-form):not(.ubicacion-combined-form) .search-submit {
    flex-grow: 0; /* El botón no crece */
    flex-shrink: 0; /* El botón no se encoge */
}


/* Estilos para listados de grupos (.group-list-container) */
.group-list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.group-list-item {
    background-color: var(--background-color);
    border: 1px solid var(--medium-gray-color);
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
}

.group-list-item .entry-header {
    margin-bottom: 10px;
}

.group-list-item .entry-title {
    font-size: 1.3em;
    margin-bottom: 5px;
}

.group-list-item .entry-title a {
    text-decoration: none;
    color: var(--text-color);
}

.group-list-item .entry-title a:hover {
    color: var(--link-color);
}

.group-list-item .group-image {
    margin-bottom: 10px;
    text-align: center;
}

.group-list-item .group-image img {
    max-width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: cover;
    border-radius: 3px;
}

.group-list-item .group-image.placeholder {
    height: 150px;
    background-color: var(--light-gray-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 3px;
}

.group-list-item .entry-meta {
    font-size: 0.85em;
    color: #777;
    margin-bottom: 10px;
}

.group-list-item .entry-meta span {
    margin-right: 10px;
}

.group-list-item .entry-summary {
    font-size: 0.95em;
    margin-bottom: 15px;
    flex-grow: 1;
}

.group-list-item .entry-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.group-list-item .entry-footer .read-more-link,
.group-list-item .entry-footer .telegram-link {
    font-size: 0.9em;
    padding: 6px 12px;
}

/* Estilos para Single Grupo */
.single-grupo-article {
    background-color: #fff; /* Fondo blanco para la tarjeta del artículo */
    padding: 25px;          /* Padding interno */
    border-radius: 5px;     /* Bordes redondeados */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Sombra sutil */
    margin-bottom: 30px;    /* Espacio debajo del artículo */
}

.single-grupo-article .entry-header {
    margin-bottom: 25px; /* Aumentar espacio debajo del header */
    padding-bottom: 20px; /* Espacio antes del borde */
    border-bottom: 1px solid var(--light-gray-color); /* Separador sutil */
}

.single-grupo-article .entry-title { /* Título del grupo */
    font-size: 2.2em; /* Tamaño de fuente más grande para el título principal */
    margin-bottom: 15px; /* Espacio debajo del título */
}

.single-grupo-article .grupo-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre imagen y taxonomías */
    margin-top: 15px;
    padding: 20px; /* Aumentar padding */
    background-color: #f9f9f9; /* Fondo ligeramente diferente para la meta info */
    border: 1px solid var(--light-gray-color); /* Borde sutil */
    border-radius: 4px;
}

.single-grupo-article .grupo-image-single {
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
}

.single-grupo-article .grupo-image-single img {
    border: 1px solid var(--medium-gray-color);
}

.single-grupo-article .grupo-taxonomies {
    flex-grow: 1;
}

.single-grupo-article .grupo-taxonomies .label {
    font-weight: bold;
    color: var(--dark-gray-color);
}

.single-grupo-article .entry-content {
    margin-bottom: 20px;
    line-height: 1.7;
}

.single-grupo-article .entry-footer {
    border-top: 1px solid var(--light-gray-color); /* Borde más claro */
    padding-top: 25px; /* Más espacio */
    margin-top: 25px; /* Espacio antes del footer del artículo */
}

.single-grupo-article .grupo-actions {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap; /* Permitir que los botones pasen a la siguiente línea si no caben */
    gap: 10px; /* Espacio entre botones */
    align-items: center; /* Alinear botones verticalmente si tienen alturas diferentes */
}

.single-grupo-article .grupo-actions .button {
    padding: 10px 15px !important; 
    font-size: 0.9em !important;  
    line-height: 1.4 !important;  
    text-decoration: none !important;
    border-radius: 4px !important; 
    /* display: inline-flex;
    align-items: center;
    justify-content: center; */
}

.single-grupo-article .grupo-actions .button .dashicons {
    margin-right: 8px !important; 
    font-size: 1.1em !important; 
    vertical-align: middle !important; 
    height: auto;
}

.single-grupo-article .tags-title {
    font-size: 1.2em;
    margin-bottom: 8px; /* Más espacio */
    color: var(--dark-gray-color);
}

.single-grupo-article .taglist a {
    display: inline-block;
    background-color: var(--telegram-blue-tenue); /* Usar el azul tenue para consistencia */
    color: var(--primary-color); /* Texto con color primario */
    padding: 6px 12px; /* Padding ligeramente aumentado */
    margin: 4px; /* Margen ligeramente aumentado */
    border-radius: 15px; /* Hacerlos más tipo "píldora" */
    font-size: 0.85em; /* Ajustar tamaño de fuente */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.single-grupo-article .taglist a:hover {
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

/* Navegación de Posts (Single y Archivos) */
.post-navigation,
.posts-navigation { /* Estos son para la navegación entre posts, no para la paginación de listas */
    margin: 40px 0; /* Más espacio vertical */
    overflow: hidden;
    border-top: 1px solid var(--light-gray-color);
    border-bottom: 1px solid var(--light-gray-color);
    padding: 20px 0;
}

.post-navigation .nav-links,
.posts-navigation .nav-links {
    display: flex;
    justify-content: space-between;
}

.post-navigation .nav-previous,
.posts-navigation .nav-previous {
    float: left;
    /* Considerar quitar floats si todo es flex */
    width: 50%;
    text-align: left;
}

.post-navigation .nav-next,
.posts-navigation .nav-next {
    float: right;
    /* Considerar quitar floats si todo es flex */
    width: 50%;
    text-align: right;
}

.post-navigation .meta-nav,
.posts-navigation .meta-nav {
    display: block;
    font-weight: bold;
    font-size: 0.9em;
    color: #777;
}

/* Paginación (ej. para home y archivos) */
/* El div contenedor es .pagination-container y los enlaces/spans .page-numbers están directamente dentro. */
/* No hay un div intermedio .pagination como se asumió inicialmente. */

.pagination-container { /* Estilos para el contenedor si son necesarios, como el text-align */
    margin: 30px 0;
    text-align: center;
}

.pagination-container .page-numbers { /* Selector corregido */
    display: inline-block;
    padding: 8px 13px !important;  /* Reducido ~30% */
    margin: 0 4px !important;     /* Reducido ~30% */
    border: 1px solid var(--primary-color) !important; 
    border-radius: 18px !important;  /* Reducido ~30%, ajustado para mantener forma */
    background-color: var(--background-color) !important; 
    color: var(--primary-color) !important; 
    text-decoration: none !important;
    font-size: 0.85em !important; /* Añadido y reducido */
    font-weight: 600 !important; 
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, transform 0.1s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sombra ligeramente ajustada */
    font-style: normal !important; 
    line-height: 1.2 !important; /* Ajustar line-height para el nuevo font-size */
}

.pagination-container .page-numbers:hover,
.pagination-container .page-numbers:focus { /* Selector corregido */
    background-color: var(--primary-color) !important;
    color: var(--button-text-color, #fff) !important; 
    border-color: var(--secondary-color, var(--primary-color)) !important; 
    text-decoration: none !important;
    transform: translateY(-1px); /* Reducido el efecto hover */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra hover ligeramente ajustada */
}

.pagination-container .page-numbers.current { /* Selector corregido */
    background-color: var(--primary-color) !important;
    color: var(--button-text-color, #fff) !important;
    border-color: var(--primary-color) !important;
    font-weight: bold !important;
    cursor: default !important;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05) inset; /* Sombra inset ligeramente ajustada */
    transform: none; 
}

/* Estilo para los botones de "Anterior" y "Siguiente" */
.pagination-container .prev.page-numbers, /* Selector corregido y más específico */
.pagination-container .next.page-numbers { /* Selector corregido y más específico */
    font-weight: bold !important;
    padding: 8px 14px !important; /* Reducido ~30% */
}

.pagination-container .dots.page-numbers { /* Selector corregido */
    padding: 8px 4px !important; /* Reducido ~30% */
    margin: 0 4px !important;     /* Reducido ~30% */
    border: none !important;
    background: none !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
    transform: none !important;
    font-style: normal !important;
    font-size: 0.85em !important; /* Asegurar que los dots también se escalen */
    line-height: 1.2 !important; 
}
.pagination-container .dots.page-numbers:hover { /* Selector corregido */
    background-color: transparent !important; 
    color: var(--text-color) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Estilos para Home Page Sections */
.home-section {
    padding: 30px 0;
    border-bottom: 1px solid var(--light-gray-color);
}

.home-section:last-child {
    border-bottom: none;
}

.category-grid {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.category-grid li a {
    display: block;
    background-color: var(--background-color);
    border: 1px solid var(--medium-gray-color);
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.category-grid li a:hover {
    background-color: var(--light-gray-color);
    border-color: #ccc;
}

/* 404 Page */
.error-404 .page-title {
    color: #c00;
}

.error-404 .page-content .search-form {
    margin-bottom: 20px;
}

.error-404 .recent-posts-404,
.error-404 .popular-categories-404 {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--medium-gray-color);
}

.error-404 ul {
    list-style: disc;
    margin-left: 20px;
}

/* Clases de ayuda */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.container::after {
    content: "";
    display: table;
    clear: both;
}

.dashicons {
    vertical-align: middle;
    font-size: inherit;
    height: auto;
    width: auto;
}

.top-margin {
    margin-top: 20px;
}

/* === ESTILOS PARA EL SIDEBAR EN SINGLE-GRUPO.PHP === */
body.single-grupo .single-grupo-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Espacio entre contenido principal y sidebar */
}

body.single-grupo .main-content-area-grupo {
    flex: 1;
    min-width: 0; /* Para correcto comportamiento de flex items */
}

body.single-grupo .widget-area-single-grupo {
    flex-basis: 300px; /* Ancho base del sidebar */
    flex-shrink: 0;
    /* width: 300px; Ya no es necesario con flex-basis si single-grupo-layout-wrapper es el contenedor directo */
}

/* Estilos mejorados para los widgets dentro del sidebar específico de grupo */
.widget-area-single-grupo .widget {
    margin-bottom: 25px;
    padding: 20px; /* Más padding interno */
    background-color: #fff; /* Fondo blanco para los widgets */
    border: 1px solid var(--light-gray-color); /* Borde más sutil */
    border-radius: 5px; /* Consistente con la tarjeta principal */
    box-shadow: 0 1px 4px rgba(0,0,0,0.04); /* Sombra muy sutil para widgets */
}

.widget-area-single-grupo .widget:last-child {
    margin-bottom: 0; /* Evitar doble margen si es el último widget */
}

.widget-area-single-grupo .widget-title {
    font-size: 1.25em; /* Ligeramente más grande */
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 12px; /* Un poco más de padding */
    border-bottom: 1px solid var(--medium-gray-color); /* Borde más visible */
    color: var(--dark-gray-color);
}

.widget-area-single-grupo ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.widget-area-single-grupo ul li {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #ddd;
}

.widget-area-single-grupo ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.widget-area-single-grupo a {
    text-decoration: none;
    /* color: var(--primary-color); */
}

.widget-area-single-grupo a:hover {
    text-decoration: underline;
}

/* === FIN DE ESTILOS PARA EL SIDEBAR === */



/* Estilos para widgets comunes dentro de las columnas del footer */
.footer-column .widget {
    margin-bottom: 20px; 
}
.footer-column .widget:last-child {
    margin-bottom: 0;
}

.footer-column .widget ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-column .widget ul li {
    margin-bottom: 8px;
}
.footer-column .widget ul li:last-child {
    margin-bottom: 0;
}

.footer-column .widget a {
    color: #eee; /* Un poco más claro que el texto base del footer para destacar enlaces */
    text-decoration: none;
    display: inline-block; 
    padding: 2px 0; 
}
.footer-column .widget a:hover {
    text-decoration: underline;
    color: #fff;
}

/* Footer Bottom */
.footer-bottom {
    background-color: rgba(0,0,0,0.2); 
    padding: 20px 0;
}

.footer-bottom-content { 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-items: center;
    gap: 15px;
    text-align: left; 
}

.footer-bottom .copyright p {
    margin: 0;
    font-size: 0.85em;
}

.footer-social a { 
    margin-left: 12px; 
    font-size: 1.3em; 
    text-decoration: none;
    color: #ccc; /* Color base para iconos sociales */
    opacity: 0.8;
    transition: opacity 0.2s;
}
.footer-social a:hover {
    opacity: 1;
    color: #fff; /* Color al hacer hover */
    text-decoration: none;
}
.footer-social a:first-child {
    margin-left: 0;
}

/* Responsive para el footer grid (ahora con 2 columnas) */
@media (max-width: 768px) { /* Ajustado para que las columnas se apilen antes si es necesario */
    .footer-column {
        flex-basis: 100%; 
        min-width: unset; 
        margin-bottom: 20px; 
    }
    .footer-column:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 600px) { 
    .footer-bottom-content {
        flex-direction: column; 
        text-align: center; 
    }
    .footer-social {
        margin-top: 15px;
    }
}
/* === FIN DE
 * /* === ESTILOS PARA LISTADO DE GRUPOS CONFIGURABLE POR COLUMNAS === */
/* Estos estilos se aplicarán cuando la clase correspondiente esté en el body. */
/* El breakpoint real para escritorio (ej. 3, 4, o 5 columnas) se maneja en responsive.css */

/* Por defecto (si no hay clase específica o para móviles/tablets), 
   .group-list-item ya tiene flex-basis: 100% o 50% desde responsive.css */

/* 3 Columnas para escritorio (ej. cuando body tiene .group-list-cols-3) */
.group-list-cols-3 .group-list-item {
    /* responsive.css ya tiene @media (min-width: 1025px) para 3 columnas.
       Si se quiere un breakpoint diferente o asegurar que siempre sea 3 cols 
       en desktop si está seleccionado, se puede añadir un min-width aquí. 
       Por ahora, confiamos en responsive.css para el breakpoint de 3 columnas. */
}

/* 4 Columnas para escritorio (ej. cuando body tiene .group-list-cols-4) */
.group-list-cols-4 .group-list-item {
    /* Este estilo necesitará una media query para aplicarse solo en escritorio, 
       ya que responsive.css podría forzar 2 columnas en tablet. */
}

/* 5 Columnas para escritorio (ej. cuando body tiene .group-list-cols-5) */
.group-list-cols-5 .group-list-item {
    /* Similar a 4 columnas, necesitará media query. */
}
/* === FIN DE ESTILOS PARA LISTADO DE GRUPOS CONFIGURABLE === */

/* === ESTILOS PARA EL FORMATO DE FILA EN RESULTADOS DE BÚSQUEDA === */
.group-list-item.group-search-row-item {
    display: flex;
    flex-direction: row; /* Por defecto para escritorio y tablets grandes */
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px; 
    border-bottom: 1px solid var(--medium-gray-color);
    /* margin-bottom ya está siendo aplicado por la regla general de .group-list-item en responsive.css para búsqueda */
}

/* Asegurar que el último ítem no tenga borde inferior si el espaciado es con margin */
body.search-results .search-results-list .group-list-item.group-search-row-item:last-child {
    /* Si se usa margin-bottom en los items, este borde no es estrictamente necesario quitarlo,
       pero si el contenedor no tiene padding inferior, puede verse mejor sin el último borde. */
    /* border-bottom: none; */
}

.group-search-row-item .group-search-row-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre título y metas */
    min-width: 0; /* Importante para que funcione text-overflow en los hijos */
    margin-right: 15px; /* Espacio antes de los botones de acción */
}

.group-search-row-item .group-search-row-title {
    font-size: 1.05em; 
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1; 
}
.group-search-row-item .group-search-row-title a {
    text-decoration: none;
    color: var(--text-color);
}
.group-search-row-item .group-search-row-title a:hover {
    color: var(--link-color);
}


.group-search-row-item .group-search-row-meta {
    font-size: 0.85em;
    color: #555;
    white-space: nowrap;
    flex-shrink: 2; /* Permitir que las metas se encojan más que el título */
    overflow: hidden; /* Para contener ellipsis de los hijos si fuera necesario */
}
.group-search-row-item .group-search-row-meta span {
    display: inline-block; /* Para que ellipsis funcione si se aplica a los spans */
    max-width: 150px; /* Limitar ancho de cada meta item si es necesario */
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle; /* Mejor alineación con el título */
}
.group-search-row-item .group-search-row-meta .group-meta-ubicacion {
    /* Estilos específicos si son necesarios */
}
.group-search-row-item .group-search-row-meta .group-meta-categoria {
    /* Estilos específicos si son necesarios */
}

.group-search-row-item .group-search-row-meta .meta-separator {
    color: var(--medium-gray-color);
    margin: 0 6px;
    max-width: none; /* El separador no necesita ellipsis */
    overflow: visible;
}

.group-search-row-item .group-search-row-actions {
    flex-shrink: 0; /* Los botones no se encogen */
}

.group-search-row-item .group-search-row-actions .button {
    padding: 7px 14px;
    font-size: 0.85em;
    text-align: center;
    min-width: 100px; /* Ancho mínimo para el botón */
}

/* Ajustes para móvil para el formato de fila de búsqueda */
@media (max-width: 768px) {
    .group-list-item.group-search-row-item {
        flex-direction: column; /* Apilar en móvil */
        align-items: flex-start; /* Alinear items al inicio */
        padding: 15px;
    }
    .group-search-row-item .group-search-row-content {
        flex-direction: column; /* Apilar título y metas */
        align-items: flex-start;
        gap: 5px;
        margin-right: 0;
        margin-bottom: 10px; /* Espacio antes del botón */
        width: 100%; /* Ocupar todo el ancho */
    }
    .group-search-row-item .group-search-row-title {
        font-size: 1.1em; /* Título un poco más grande en móvil cuando está apilado */
        white-space: normal; /* Permitir que el título se divida en varias líneas */
        overflow: visible;
        text-overflow: unset;
    }
    .group-search-row-item .group-search-row-meta {
        font-size: 0.9em;
        white-space: normal;
    }
    .group-search-row-item .group-search-row-meta span {
        max-width: none; /* Permitir que los metas ocupen el ancho necesario */
        overflow: visible;
        text-overflow: unset;
        display: block; /* Cada meta en su línea si es necesario */
        margin-bottom: 3px;
    }
     .group-search-row-item .group-search-row-meta .meta-separator {
        display: none; /* Ocultar separador cuando está apilado */
    }
    .group-search-row-item .group-search-row-actions {
        width: 100%; /* Botón ocupa todo el ancho */
    }
    .group-search-row-item .group-search-row-actions .button {
        width: 100%;
        font-size: 0.9em;
        padding: 10px 15px;
    }
}

/* Ajustes específicos para pantallas extra pequeñas (<= 486px) para el formato de fila de búsqueda */
@media (max-width: 486px) {
    .group-search-row-item .group-search-row-content {
        /* Hereda flex-direction: column de la regla de 768px */
        /* Hereda align-items: flex-start de la regla de 768px */
    }
    .group-search-row-item .group-search-row-title {
        font-size: 1em; /* Un poco más pequeño que en 768px si es necesario */
        /* white-space: normal; ya heredado de 768px */
    }
    .group-search-row-item .group-search-row-meta {
        font-size: 0.8em; /* Un poco más pequeño */
        line-height: 1.35; /* Ajustar para el texto inline */
        /* white-space: normal; heredado, pero los spans internos lo controlarán */
    }
    /* Para que los spans de meta (ubicación, categoría) intenten estar en la misma línea */
    .group-search-row-item .group-search-row-meta span {
        display: inline; /* Clave para que estén en la misma línea */
        margin-bottom: 0; 
        white-space: nowrap; 
        overflow: hidden;    
        text-overflow: ellipsis;
    }
    /* Distribuir el espacio entre ubicación y categoría si ambos están presentes */
    .group-search-row-item .group-search-row-meta span.group-meta-ubicacion,
    .group-search-row-item .group-search-row-meta span.group-meta-categoria {
        max-width: calc(50% - 12px); /* Aprox. mitad menos espacio para el separador */
    }
    /* Si solo hay uno de los dos, que ocupe más espacio */
    .group-search-row-item .group-search-row-meta span.group-meta-ubicacion:only-child,
    .group-search-row-item .group-search-row-meta span.group-meta-categoria:only-child {
        max-width: 100%;
    }

    .group-search-row-item .group-search-row-meta .meta-separator {
        display: inline; /* Mostrar el separador de nuevo */
        /* No necesita max-width ni overflow en el separador */
    }

    .group-search-row-item .group-search-row-actions .button {
        font-size: 0.85em; 
        padding: 8px 12px;
        /* width: 100%; ya heredado de 768px */
    }
}
/* === FIN DE ESTILOS PARA EL FORMATO DE FILA EN RESULTADOS DE BÚSQUEDA === */

4. assets/css/responsive.css (Modificaciones y adiciones):

/* ... (inicio de tu responsive.css existente) ... */

/* Tablets y dispositivos más pequeños */
@media (max-width: 768px) {
  /* ... (tus estilos existentes para 768px) ... */

  /* Listado de Grupos - 1 columna para todas las configuraciones */
  .group-list-cols-3 .group-list-item,
  .group-list-cols-4 .group-list-item,
  .group-list-cols-5 .group-list-item,
  .group-list-container:not([class*='group-list-cols-']) .group-list-item { /* Fallback */
    flex-basis: 100%; 
  }

  /* ... (resto de tus estilos para 768px) ... */
}

/* Móviles */
@media (max-width: 480px) {
  /* ... (tus estilos existentes para 480px) ... */
  /* El listado de grupos ya será 1 columna por la regla de 768px */
}

/* Tablets y pantallas medianas (ej. entre 769px y un nuevo breakpoint para escritorio, ej. 1199px) */
@media (min-width: 769px) and (max-width: 1199.98px) { 
    /* Forzar 2 columnas en tablet, independientemente de la selección del Customizer para escritorio */
    .group-list-cols-3 .group-list-item,
    .group-list-cols-4 .group-list-item, 
    .group-list-cols-5 .group-list-item,
    .group-list-container:not([class*='group-list-cols-']) .group-list-item { /* Fallback */
        flex-basis: calc(50% - 10px); /* 2 columnas, asumiendo gap de 20px */
    }

    .single-grupo-article .grupo-meta-info {
        flex-wrap: nowrap; 
    }
}

/* Escritorios y pantallas grandes (ej. >= 1200px) */
/* Aquí es donde las clases del body group-list-cols-X tendrán su efecto principal */
@media (min-width: 1200px) { 
    /* 3 Columnas */
    .group-list-cols-3 .group-list-item {
        flex-basis: calc(33.333% - 13.34px); /* (20px gap * 2) / 3 */
    }
    /* 4 Columnas */
    .group-list-cols-4 .group-list-item {
        flex-basis: calc(25% - 15px);    /* (20px gap * 3) / 4 */
    }
    /* 5 Columnas */
    .group-list-cols-5 .group-list-item {
        flex-basis: calc(20% - 16px);    /* (20px gap * 4) / 5 */
    }
    /* Fallback si no hay clase específica (podría ser el default de 3 columnas o lo que se defina en style.css) */
    .group-list-container:not([class*='group-list-cols-']) .group-list-item {
         flex-basis: calc(33.333% - 13.34px); /* Default a 3 columnas si no hay clase específica */
    }

    .main-navigation ul {
        justify-content: flex-start; 
    }
    .site-branding {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .custom-logo {
        margin-bottom: 0;
        margin-right: 20px;
    }
}



/* === ESTILOS PARA GRUPOS RELACIONADOS (single-grupo.php) === */

.related-groups .group-list-container {
    /* Aseguramos que también sea flex container si no lo hereda */
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Mantener el mismo gap que el listado principal */
}

/* Por defecto para escritorio, forzar 3 columnas para los items relacionados */
.related-groups .group-list-container .group-list-item {
    flex-grow: 0; /* No queremos que crezcan más de su base */
    flex-shrink: 0; /* No queremos que se encojan menos de su base */
    flex-basis: calc(33.333% - 13.34px); /* 3 columnas (asumiendo gap de 20px: (20px * 2) / 3) */
    /* Importante: Si el ítem tiene padding/border, asegurar box-sizing: border-box; */
}

/* === FIN DE ESTILOS PARA GRUPOS RELACIONADOS === */

/* ... (resto de tu responsive.css, como la sección de móviles en landscape
 * 
 * 
 * /* ... (Todo tu CSS existente) ... */

/* === ESTILOS PARA GRUPOS RELACIONADOS (single-grupo.php) === */
.related-groups .group-list-container {
    /* Si .group-list-container no aplica display:flex y gap por defecto a esta instancia, 
       o si quieres un gap diferente para los relacionados, puedes definirlo aquí.
       Por defecto, heredará de .group-list-container general. */
}

.related-groups .group-list-container .group-list-item {
    /* Esta regla es para escritorio y será sobrescrita por responsive.css para tablet/móvil */
    /* Forzar 3 columnas en escritorio para relacionados, independientemente de la clase del body */
    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: calc(33.333% - 13.34px); /* Asumiendo gap de 20px en .related-groups .group-list-container */
}
/* === FIN DE ESTILOS PARA GRUPOS RELACIONADOS === */

/* ... (Todo tu CSS existente) ... */

/* === ESTILOS PARA GRUPOS RELACIONADOS (single-grupo.php) === */
/* Estilos base para escritorio. Responsive.css se encargará de tablets/móviles. */

.related-groups .group-list-container {
    /* Si .group-list-container no aplica display:flex y gap por defecto a esta instancia,
       o si quieres un gap diferente para los relacionados, puedes definirlo aquí.
       Por defecto, heredará de .group-list-container general si este tiene esos estilos base. 
       Si no, descomenta lo siguiente: */
    /*
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    */
}

/* Estilos para botones de acción específicos en single-grupo.php */

/* Botón Compartir */
.button.share-group-button { /* Más especificidad para anular .button si es necesario */
    background-color: #28a745 !important; /* Verde */
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.button.share-group-button:hover,
.button.share-group-button:focus {
    background-color: #218838 !important; /* Verde más oscuro */
    color: #ffffff !important;
}

/* Botón Denunciar */
.button.report-group-button { /* El botón de denunciar ya tiene esta clase */
    background-color: #dc3545 !important; /* Rojo */
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.button.report-group-button:hover,
.button.report-group-button:focus {
    background-color: #c82333 !important; /* Rojo más oscuro */
    color: #ffffff !important;
}

/* Ajuste general para Dashicons dentro de estos botones */
/* Se heredan los estilos de .single-grupo-article .grupo-actions .button .dashicons 
   y .share-group-button .dashicons que ya aseguran buena alineación y margen.
   No se necesitan más ajustes aquí a menos que haya conflictos.
*/

/* Estilos para el sistema de calificación por estrellas */
.wptt-star-rating-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre las estrellas y la información de texto */
    margin-top: 5px; 
}

.wptt-stars {
    display: inline-flex; 
    color: #f0ad4e; /* Color para estrellas llenas/medias (amarillo/naranja) */
}

.wptt-star-icon {
    width: 1.2em; /* Tamaño de las estrellas */
    height: 1.2em;
    margin-right: 2px; /* Pequeño espacio entre estrellas */
}

.wptt-star-icon.star-empty {
    color: #d3d3d3; /* Gris claro para estrellas vacías, un poco más oscuro que #ccc */
}

.wptt-star-icon.star-half {
    /* El SVG de media estrella usa currentColor para la parte llena.
       Podríamos necesitar ajustar el path de la parte vacía del SVG si el color no es el esperado.
       Por ahora, el fill="currentColor" en el SVG debe tomar el color de .wptt-stars (#f0ad4e)
       y la parte vacía de la media estrella está definida en el propio SVG.
    */
}

.wptt-rating-info {
    font-size: 0.9em;
    color: #555;
    line-height: 1.2; /* Para mejor alineación vertical con estrellas */
}

.wptt-rating-count {
    font-size: 0.9em; /* Hereda color de .wptt-rating-info o puede ser específico */
    color: #777;
}

.wptt-no-ratings {
    font-style: italic;
    color: #777;
}

/* Cuando sea interactivo (se añadirá más adelante) */
.wptt-star-rating-interactive .wptt-stars .star-container {
    cursor: pointer;
    transition: transform 0.1s ease-in-out, color 0.1s ease-in-out;
}

.wptt-star-rating-interactive .wptt-stars .star-container:hover .wptt-star-icon {
    transform: scale(1.15);
    color: #e89f39; /* Un poco más oscuro/intenso al hacer hover */
}

/* Forzar 3 columnas en escritorio para relacionados, independientemente de la clase del body */
/* Esto se aplica si el viewport es suficientemente ancho (controlado por la media query en responsive.css) */
.related-groups .group-list-container .group-list-item {
    /* La definición principal de flex-basis para escritorio para relacionados irá en la media query de escritorio en responsive.css */
}


/* ... (Todo tu CSS existente) ... */

/* === ESTILOS PARA EL SIDEBAR EN SINGLE-GRUPO.PHP === */
/* Asegúrate de que la clase del body che uses aquí coincida con la que WordPress genera para tus single de 'grupo' */
/* Por ejemplo, si el body tiene la clase 'single-grupo', este selector es bueno. */
body.single-grupo .single-grupo-layout-wrapper { 
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; /* Espacio entre contenido y sidebar */
}

body.single-grupo .main-content-area-grupo {
    flex: 1; 
    min-width: 0; /* Importante para el correcto encogimiento en flexbox */
}

body.single-grupo .widget-area-single-grupo {
    flex-basis: 300px; 
    flex-shrink: 0; 
    width: 300px; 
}

/* Estilos básicos para widgets dentro del sidebar de single grupo */
body.single-grupo .widget-area-single-grupo .widget {
    margin-bottom: 25px; 
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
}

body.single-grupo .widget-area-single-grupo .widget-title {
    font-size: 1.2em;
    margin-top: 0; 
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

body.single-grupo .widget-area-single-grupo ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

body.single-grupo .widget-area-single-grupo ul li {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #ddd;
}

body.single-grupo .widget-area-single-grupo ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

body.single-grupo .widget-area-single-grupo a {
    text-decoration: none;
}

body.single-grupo .widget-area-single-grupo a:hover {
    text-decoration: underline;
}
/* === FIN DE ESTILOS PARA EL SIDEBAR === */

/* === ESTILOS PARA LISTADO DE GRUPOS CONFIGURABLE POR COLUMNAS (Escritorio) === */
/* Estos se aplican en el breakpoint de escritorio definido en responsive.css */
/* (Ver @media (min-width: 1200px) en responsive.css) */

/* Ajustes internos de fichas para 4 columnas en listados principales */
body.group-list-cols-4 .group-list-item {
    padding: 12px; 
}
body.group-list-cols-4 .group-list-item .entry-title {
    font-size: 1.1em; 
    margin-bottom: 4px;
}
body.group-list-cols-4 .group-list-item .entry-meta {
    font-size: 0.8em; 
    margin-bottom: 8px;
}
body.group-list-cols-4 .group-list-item .entry-summary {
    font-size: 0.88em; 
    line-height: 1.45;
    margin-bottom: 10px;
}
body.group-list-cols-4 .group-list-item .group-image img {
    max-height: 130px; 
}
body.group-list-cols-4 .group-list-item .group-image.placeholder {
    height: 110px; 
}
body.group-list-cols-4 .group-list-item .entry-footer .button,
body.group-list-cols-4 .group-list-item .entry-footer .read-more-link,
body.group-list-cols-4 .group-list-item .entry-footer .telegram-link {
    padding: 5px 8px; 
    font-size: 0.8em;
}

/* Ajustes internos de fichas para 5 columnas */
body.group-list-cols-5 .group-list-item {
    padding: 10px; 
}
body.group-list-cols-5 .group-list-item .entry-title {
    font-size: 1.0em; 
    margin-bottom: 3px;
}
body.group-list-cols-5 .group-list-item .entry-meta {
    font-size: 0.75em; 
    margin-bottom: 5px;
}
body.group-list-cols-5 .group-list-item .entry-summary {
    font-size: 0.82em; 
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.group-list-cols-5 .group-list-item .group-image img {
    max-height: 110px; 
}
body.group-list-cols-5 .group-list-item .group-image.placeholder {
    height: 90px; 
}
body.group-list-cols-5 .group-list-item .entry-footer .button,
body.group-list-cols-5 .group-list-item .entry-footer .read-more-link,
body.group-list-cols-5 .group-list-item .entry-footer .telegram-link {
    padding: 3px 6px; 
    font-size: 0.75em;
}
/* === FIN DE ESTILOS PARA LISTADO DE GRUPOS CONFIGURABLE === */

/* === ESTILOS PARA GRUPOS RELACIONADOS (single-grupo.php) === */
.related-groups .group-list-container {
    /* Hereda display:flex, flex-wrap:wrap, gap:20px de .group-list-container general */
}

/* Los estilos de columnas para .related-groups .group-list-item 
   se definen en responsive.css dentro de las media queries apropiadas 
   (3 cols en escritorio, 2 en tablet/celular-medio, 1 en móvil-pequeño) */
/* === FIN DE ESTILOS PARA GRUPOS RELACIONADOS === */



/* ... (Todo tu CSS existente) ... */

/* === ESTILOS PARA EL SIDEBAR EN SINGLE-GRUPO.PHP === */
/* Reemplaza 'body.single-grupo' con la clase real del body si es diferente */
body.single-grupo .single-grupo-layout-wrapper { 
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
}

body.single-grupo .main-content-area-grupo {
    flex: 1; 
    min-width: 0; 
}

body.single-grupo .widget-area-single-grupo {
    flex-basis: 300px; 
    flex-shrink: 0; 
    width: 300px; 
}

body.single-grupo .widget-area-single-grupo .widget {
    margin-bottom: 25px; 
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
}

body.single-grupo .widget-area-single-grupo .widget-title {
    font-size: 1.2em;
    margin-top: 0; 
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

body.single-grupo .widget-area-single-grupo ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

body.single-grupo .widget-area-single-grupo ul li {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #ddd;
}

body.single-grupo .widget-area-single-grupo ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

body.single-grupo .widget-area-single-grupo a {
    text-decoration: none;
}

body.single-grupo .widget-area-single-grupo a:hover {
    text-decoration: underline;
}
/* === FIN DE ESTILOS PARA EL SIDEBAR === */

/* === ESTILOS PARA GRUPOS RELACIONADOS (single-grupo.php) === */
/* Estilos base para escritorio. Responsive.css se encargará de tablets/móviles. */

.related-groups .group-list-container {
    /* Si .group-list-container no aplica display:flex y gap por defecto a esta instancia,
       o si quieres un gap diferente para los relacionados, puedes definirlo aquí.
       Por defecto, heredará de .group-list-container general si este tiene esos estilos base. 
       Si no, descomenta lo siguiente: */
    /*
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    */
}

/* El flex-basis para .related-groups .group-list-container .group-list-item 
   se manejará en responsive.css para los diferentes breakpoints. 
   Aquí no se define un flex-basis global para escritorio, 
   se hará en la media query de escritorio en responsive.css. */

/* === FIN DE ESTILOS PARA GRUPOS RELACIONADOS === */

/* === ESTILOS PARA LISTADO DE GRUPOS CONFIGURABLE POR COLUMNAS === */
/* Los estilos base para .group-list-cols-X .group-list-item 
   se definen DENTRO de la media query @media (min-width: 1200px) en responsive.css 
   para asegurar que solo apliquen en el viewport correcto de escritorio. 
   Los ajustes internos de las fichas (padding, font-size) también van allí. */
/* === FIN DE ESTILOS PARA LISTADO DE GRUPOS CONFIGURABLE === */


/* ... (Tu CSS existente para variables, reset, header, navegación, formularios, etc.) ... */

/* Estilos para listados de grupos (.group-list-container) */
.group-list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre fichas */
    margin-bottom: 20px;
}

.group-list-item {
    background-color: var(--background-color);
    border: 1px solid var(--medium-gray-color);
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    /* El flex-basis se manejará en responsive.css con las clases del body y media queries */
}
/* ... (otros estilos de .group-list-item que ya tenías para contenido interno) ... */


/* === ESTILOS PARA EL SIDEBAR EN SINGLE-GRUPO.PHP === */
/* Asegúrate de que la clase del body sea correcta, ej. body.single-grupo */
body.single-grupo .single-grupo-layout-wrapper { 
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
}

body.single-grupo .main-content-area-grupo {
    flex: 1; 
    min-width: 0; 
}

body.single-grupo .widget-area-single-grupo {
    flex-basis: 300px; 
    flex-shrink: 0; 
    width: 300px; 
}

body.single-grupo .widget-area-single-grupo .widget {
    margin-bottom: 25px; 
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
}

body.single-grupo .widget-area-single-grupo .widget-title {
    font-size: 1.2em;
    margin-top: 0; 
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

body.single-grupo .widget-area-single-grupo ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

body.single-grupo .widget-area-single-grupo ul li {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #ddd;
}

body.single-grupo .widget-area-single-grupo ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

body.single-grupo .widget-area-single-grupo a {
    text-decoration: none;
}

body.single-grupo .widget-area-single-grupo a:hover {
    text-decoration: underline;
}
/* === FIN DE ESTILOS PARA EL SIDEBAR === */

/* === ESTILOS PARA GRUPOS RELACIONADOS (single-grupo.php) === */
.related-groups .group-list-container .group-list-item {
    /* El flex-basis para escritorio (3 columnas) se define en responsive.css @media (min-width: 1200px) */
    /* Aquí no es necesario si ya está en responsive.css, pero no hace daño tenerlo como fallback si responsive.css falla */
    /* flex-grow: 0;  */ /* Se maneja mejor en la media query específica */
    /* flex-shrink: 0; */
}
/* === FIN DE ESTILOS PARA GRUPOS RELACIONADOS === */

/* === ESTILOS PARA EL FOOTER (2 Columnas con Widgets) === */
.site-footer {
    padding: 30px 0 0; 
    text-align: left; 
}

.site-footer h3.widget-title.footer-widget-title,
.footer-column .widget .widget-title {
    color: #fff; 
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.footer-content .container { 
    padding-top: 0; 
    padding-bottom: 30px; 
}

.footer-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
}

.footer-column { 
    flex: 1; 
    min-width: 250px; 
}

.footer-column .widget {
    margin-bottom: 20px; 
}
.footer-column .widget:last-child {
    margin-bottom: 0;
}

.footer-column .widget ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-column .widget ul li {
    margin-bottom: 8px;
}
.footer-column .widget ul li:last-child {
    margin-bottom: 0;
}

.footer-column .widget a {
    color: #eee; 
    text-decoration: none;
    display: inline-block; 
    padding: 2px 0; 
}
.footer-column .widget a:hover {
    text-decoration: underline;
    color: #fff;
}

.footer-bottom {
    background-color: rgba(0,0,0,0.2); 
    padding: 20px 0;
}

.footer-bottom-content { 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-items: center;
    gap: 15px;
    text-align: left; 
}

.footer-bottom .copyright p {
    margin: 0;
    font-size: 0.85em;
}

.footer-social a { 
    margin-left: 12px; 
    font-size: 1.3em; 
    text-decoration: none;
    color: #ccc; 
    opacity: 0.8;
    transition: opacity 0.2s;
}
.footer-social a:hover {
    opacity: 1;
    color: #fff; 
    text-decoration: none;
}
.footer-social a:first-child {
    margin-left: 0;
}
/* === FIN DE ESTILOS PARA EL FOOTER === */

/* === Estilos para el nuevo formato de lista de grupos (Home) === */

/* Hacer que los contenedores de las listas de la home sean de ancho completo siempre */
/*
.home-section.featured-groups-section .container,
.home-section.latest-groups-section .container {
    width: 100%;
    max-width: none !important; /* Importante para anular max-width del tema */
    padding-left: 0; /* El padding se manejará en las filas */
    padding-right: 0;
    margin-left: 0; 
    margin-right: 0;
    box-sizing: border-box; /* Para asegurar que el padding no afecte el width:100% */
}
*/

.group-list-container { /* Contenedor del UL */
    margin-bottom: 20px; /* Mantiene el margen inferior que tenías */
}

.group-list-container ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.group-list-item-row {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 15px; /* Padding vertical Y HORIZONTAL para el contenido dentro de la fila */
    border-bottom: 1px solid var(--medium-gray-color, #ddd); 
    gap: 10px; /* Espacio entre contenido principal y botón de acción */
    box-sizing: border-box; /* Asegura que el padding no aumente el ancho total de la fila si es 100% */
}

.group-list-item-row:last-child {
    border-bottom: none;
}

.group-list-item-row .group-item-content {
    flex-grow: 1; /* El contenido (nombre + meta) toma el espacio disponible */
    display: flex; /* Hacemos este contenedor flex también para alinear nombre y meta */
    align-items: center; 
    gap: 8px; /* Espacio entre el título y el bloque de metadatos */
    min-width: 0; /* ESENCIAL para que text-overflow ellipsis funcione en los hijos */
}

.group-list-item-row .group-title {
    font-size: 1em; /* Ajustado, responsive puede cambiarlo */
    margin: 0;
    white-space: nowrap; 
    overflow: hidden;    
    text-overflow: ellipsis; 
    flex-grow: 1; /* Permitir que el título crezca pero también se encoja */
    flex-shrink: 1;
    min-width: 40%; /* Darle una base para que no desaparezca, ajustar según necesidad */
}

.group-list-item-row .group-title a {
    text-decoration: none;
    color: var(--text-color, #333);
}

.group-list-item-row .group-title a:hover {
    color: var(--link-color, #0073aa);
}

.group-list-item-row .group-meta {
    font-size: 0.8em; /* Ajustado, responsive puede cambiarlo */
    color: #666;
    display: flex; 
    align-items: center;
    white-space: nowrap; /* Para mantener ciudad y categoría en una línea dentro de su propio contenedor */
    flex-shrink: 2; /* Permitir que los metas se encojan más fácilmente que el título */
    overflow: hidden; /* Para contener el ellipsis de los hijos */
}

.group-list-item-row .group-meta .group-country,
.group-list-item-row .group-meta .group-category {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; /* Necesario para ellipsis en spans */
    max-width: 100px; /* O un valor adecuado, ajustar según necesidad y pruebas */
}
.group-list-item-row .group-meta .group-country {
    /* Podría tener un max-width un poco mayor si es más importante */
}


.group-list-item-row .group-meta .meta-separator {
    color: var(--medium-gray-color, #ccc);
    margin: 0 5px; 
}

.group-list-item-row .group-join-action {
    flex-shrink: 0; /* El botón no se encoge */
}

.group-list-item-row .group-join-action .button {
    padding: 5px 10px; 
    font-size: 0.85em;
    white-space: nowrap; /* Para que el texto del botón no se parta */
}

/* Estilos para las secciones de categorías, ubicaciones y etiquetas en la home (si se quiere unificado) */
.home-section .category-grid,
.home-section .location-grid,
.home-section .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start; /* O 'center' si se prefiere */
    list-style: none;
    padding-left: 0;
}

.home-section .category-grid li a,
.home-section .location-grid li a,
.home-section .tagcloud a {
    display: inline-block;
    background-color: var(--light-gray-color, #f0f0f0);
    border: 1px solid var(--medium-gray-color, #ddd);
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    color: var(--text-color, #333);
}

.home-section .category-grid li a:hover,
.home-section .location-grid li a:hover,
.home-section .tagcloud a:hover {
    background-color: var(--medium-gray-color, #ddd);
    border-color: #ccc;
    color: var(--dark-gray-color, #333);
}

.home-section .tagcloud a {
    margin-bottom: 5px; /* Para nubes de etiquetas, a veces es necesario */
}

/* Eliminamos o comentamos los estilos de .group-list-item tipo ficha si ya no se usan en la home */
/* Es importante asegurarse que no afecte otras áreas como archivos de taxonomía si reutilizan estas clases */
/* Por ahora, no los eliminaré completamente, pero los nuevos estilos de lista tomarán precedencia en la home 
   debido a que los elementos ahora son <li> dentro de <ul> y tienen la clase .group-list-item-row */

/* Comentando estilos de ficha para .group-list-item que podrían interferir con el nuevo diseño de lista en HOME */
/* 
.group-list-item {
    background-color: var(--background-color);
    border: 1px solid var(--medium-gray-color);
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    flex-basis: 100%; // Esto es para responsive, se maneja allí
    display: flex; // Esto es para el contenido interno de la ficha
    flex-direction: column; // Esto es para el contenido interno de la ficha
}

.group-list-item .entry-header {
    margin-bottom: 10px;
}

.group-list-item .entry-title {
    font-size: 1.3em;
    margin-bottom: 5px;
}
// ... y así sucesivamente para otros estilos de ficha ...
// .group-list-item .group-image, .group-list-item .entry-summary, .group-list-item .entry-footer etc.
// Estos estilos no aplicarán a .group-list-item-row a menos que también tengan la clase .group-list-item.
// El nuevo template part usa `post_class('group-list-item-row')` así que no debería haber conflicto directo.
*/

/* Responsive Fix for Single Grupo on Tablets/Medium Screens */
@media (min-width: 601px) and (max-width: 1199.98px) {
  body.single-grupo .single-grupo-layout-wrapper,
  div.single-grupo-layout-wrapper { /* Added for robustness */
    flex-direction: column !important;
  }
  body.single-grupo .single-grupo-layout-wrapper > .main-content-area-grupo,
  body.single-grupo .single-grupo-layout-wrapper > .widget-area-single-grupo,
  body.single-grupo .single-grupo-layout-wrapper > aside#secondary-grupo {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important; /* Ensure it doesn't try to stay constrained */
  }
}

/* Estilos para el Modal de Compartir Fallback */
#wptt-share-fallback-modal {
    display: none; /* Oculto por defecto, controlado por JS */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Fondo más oscuro */
    animation: wptFadeIn 0.3s ease-out;
}

.wptt-share-modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 10% auto; /* Ajustado para mejor centrado vertical */
    padding: 25px;
    border: 1px solid #ddd;
    width: 90%;
    max-width: 450px; /* Un poco más ancho */
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    animation: wptSlideIn 0.3s ease-out;
}

.wptt-share-modal-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
    color: #333;
}

.wptt-share-modal-content p {
    margin-bottom: 20px;
    font-size: 0.95em;
    color: #555;
}

.wptt-share-modal-links {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.wptt-share-modal-links li {
    margin-bottom: 12px;
}

.wptt-share-modal-links a,
.wptt-share-modal-content button { /* Aplicar también a botones dentro del modal */
    text-decoration: none;
    padding: 12px 15px; /* Más padding */
    color: white;
    border-radius: 5px; /* Bordes más suaves */
    display: block;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.1s ease;
    border: none; /* Para los botones */
    cursor: pointer; /* Para los botones */
    width: 100%; /* Asegurar ancho completo */
    box-sizing: border-box; /* Incluir padding y borde en el ancho/alto */
}

.wptt-share-modal-links a:hover,
.wptt-share-modal-content button:hover { /* Aplicar también a botones dentro del modal */
    opacity: 0.9;
    transform: translateY(-1px);
}

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

#wptt-copy-link-button {
    background-color: #6c757d; /* Gris oscuro Bootstrap */
    margin-bottom: 10px;
}

#wptt-close-fallback-modal {
    background-color: #dc3545; /* Rojo Bootstrap */
}

/* Animaciones sencillas */
@keyframes wptFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wptSlideIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Estilos para el botón de compartir principal para que sea consistente */
.share-group-button .dashicons {
    vertical-align: middle;
    margin-right: 5px; /* Ajusta según sea necesario */
}

/* Estilos para el botón de Telegram */
.button-telegram {
    background-color: #0088cc !important; /* Azul Telegram */
    color: #ffffff !important; /* Texto blanco */
    display: inline-flex !important; /* Para alinear SVG y texto */
    align-items: center !important;
    justify-content: center !important;
    padding-top: 10px !important; /* Ajustar padding si es necesario */
    padding-bottom: 10px !important;
}

.button-telegram:hover,
.button-telegram:focus {
    background-color: #0077b3 !important; /* Un azul un poco más oscuro para hover/focus */
    color: #ffffff !important;
}

.button-telegram svg {
    /* El estilo inline ya tiene margin-right y vertical-align, 
       podemos añadir más aquí si es necesario o moverlos aquí.
       fill="currentColor" en el SVG asegura que tome el color del texto del botón.
    */
}






/* Estilos Generales del Footer de Dos Filas */
.site-footer {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #f9f9f9; /* Un color de fondo base para el área del menú, o transparente si prefieres */
    border-top: 1px solid #eee; /* Opcional: una línea divisoria sutil */
}

.site-footer .container {
    max-width: 1140px; /* O el ancho de tu contenedor principal */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* --- Fila Superior: Área del Menú del Footer --- */
.site-footer .footer-menu-area {
    padding: 15px 0; /* Espaciado vertical para la fila del menú */
    text-align: center; /* Centrar el menú en escritorio si es de ancho fijo */
}

/* Botón Hamburguesa del Menú del Footer (visible solo en móviles) */
#footer-menu-toggle {
    display: none; /* Oculto por defecto, se mostrará en móviles */
    background: none;
    border: 1px solid #ccc;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 3px;
}

#footer-menu-toggle .hamburger-icon {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #333;
    position: relative;
    transition: background-color 0.3s ease;
}

#footer-menu-toggle .hamburger-icon::before,
#footer-menu-toggle .hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
    transition: transform 0.3s ease;
}

#footer-menu-toggle .hamburger-icon::before {
    top: -6px;
}

#footer-menu-toggle .hamburger-icon::after {
    bottom: -6px;
}

/* Estilo del botón hamburguesa cuando el menú está activo (X) */
#footer-menu-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; /* La línea central se desvanece */
}

#footer-menu-toggle[aria-expanded="true"] .hamburger-icon::before {
    transform: translateY(6px) rotate(45deg);
}

#footer-menu-toggle[aria-expanded="true"] .hamburger-icon::after {
    transform: translateY(-6px) rotate(-45deg);
}


/* Área del Widget del Menú del Footer */
.site-footer .footer-widget-area .widget_nav_menu .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Por defecto para escritorio: horizontal */
    flex-wrap: wrap; /* Permitir que los ítems pasen a la siguiente línea si no caben */
    justify-content: center; /* Centrar los ítems del menú */
}

.site-footer .footer-widget-area .widget_nav_menu .menu-item {
    margin: 0 10px; /* Espacio entre ítems del menú */
}

.site-footer .footer-widget-area .widget_nav_menu .menu-item a {
    text-decoration: none;
    color: #333;
    padding: 5px 0;
    display: block;
}

.site-footer .footer-widget-area .widget_nav_menu .menu-item a:hover {
    color: #197BC1; /* Color de hover, igual al de la cabecera/copyright */
}

/* --- Fila Inferior: Copyright --- */
.site-footer .footer-bottom {
    background-color: #197BC1; /* Color de la cabecera/fondo deseado */
    padding: 15px 0; /* Espaciado vertical para la fila de copyright */
}

.site-footer .footer-bottom .footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Asegurar centrado del texto */
}

.site-footer .footer-bottom .copyright p {
    color: #FFFFFF; /* Texto del copyright en blanco */
    margin: 0;
    font-size: 0.9em;
}

/* --- Estilos para Móviles (ej. menos de 768px) --- */
@media (max-width: 767px) {
    #footer-menu-toggle {
        display: block; /* Mostrar el botón hamburguesa */
        margin: 0 auto 15px auto; /* Centrarlo y darle espacio inferior */
    }

    .site-footer .footer-widget-area .widget_nav_menu .menu {
        display: none; /* Ocultar el menú horizontal por defecto */
        flex-direction: column; /* Apilar ítems verticalmente cuando se muestre */
        width: 100%;
        text-align: center; /* Centrar texto de los ítems */
    }

    .site-footer .footer-widget-area .widget_nav_menu .menu.footer-menu-active {
        display: flex; /* Mostrar el menú cuando esté activo */
    }

    .site-footer .footer-widget-area .widget_nav_menu .menu-item {
        margin: 0; /* Quitar márgenes laterales */
        border-bottom: 1px solid #eee; /* Separador entre ítems */
    }
    .site-footer .footer-widget-area .widget_nav_menu .menu-item:last-child {
        border-bottom: none;
    }

    .site-footer .footer-widget-area .widget_nav_menu .menu-item a {
        padding: 10px; /* Más padding para facilitar el toque */
    }
}





/* === ESTILOS MEJORADOS PARA EL FOOTER (2 Columnas con Widgets) === */

.site-footer {
    background-color: var(--dark-gray-color); 
    color: #ccc; 
    padding: 30px 0 0; /* Quitar padding inferior, se maneja con footer-bottom */
    font-size: 0.9em;
    margin-top: 30px;
    text-align: left; /* Cambiar de center a left para control granular */
}

/* Estilos para los títulos de los widgets en el footer */
.site-footer h3.widget-title.footer-widget-title, /* Si usas la clase que definimos en register_sidebar */
.footer-column .widget .widget-title { /* Selector más genérico para el título del widget en el footer */
    color: #fff; 
    margin-top: 0; /* Evitar doble margen si el widget tiene el suyo */
    margin-bottom: 15px;
    font-size: 1.1em;
    /* border-bottom: 1px solid rgba(255,255,255,0.1); */ /* Opcional: línea separadora */
    /* padding-bottom: 10px; */
}

.footer-content .container { 
    padding-top: 0; 
    padding-bottom: 30px; 
}

.footer-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; /* Espacio entre las columnas del footer */
}

.footer-column { 
    flex: 1; 
    min-width: 250px; /* Ancho mínimo antes de apilarse */
}


/* Estilos Generales del Footer de Dos Filas */
.site-footer {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #ffffff; /* Fondo blanco para el área del menú, o el que prefieras */
    border-top: 1px solid #e0e0e0; /* Línea divisoria sutil */
}

.site-footer .container {
    max-width: 1140px; /* O el ancho de tu contenedor principal */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

/* --- Fila Superior: Área del Menú del Footer --- */
.site-footer .footer-menu-area {
    padding: 10px 0; /* Espaciado vertical reducido para la fila del menú */
    text-align: center; 
    position: relative; /* Para el posicionamiento del botón en algunas situaciones si fuera necesario */
}

/* Mensaje si no hay widget de menú */
.site-footer .no-footer-menu-widget p {
    margin: 5px 0;
    font-size: 0.9em;
    color: #777;
}

/* Botón Hamburguesa del Menú del Footer (visible solo en móviles) */
#footer-menu-toggle {
    display: none; 
    background: #f0f0f0; /* Un fondo ligero para el botón */
    border: 1px solid #ccc;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px; /* Bordes redondeados */
    position: relative; /* Para asegurar que esté sobre otros elementos si es necesario */
    z-index: 1001; /* Más alto que el menú de cabecera si se superponen */
}

#footer-menu-toggle .hamburger-icon {
    display: block;
    width: 22px; /* Un poco más grande */
    height: 3px; /* Un poco más grueso */
    background-color: #333;
    position: relative;
    transition: background-color 0.2s ease-in-out;
}

#footer-menu-toggle .hamburger-icon::before,
#footer-menu-toggle .hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px; /* Un poco más grueso */
    background-color: #333;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
}

#footer-menu-toggle .hamburger-icon::before {
    top: -7px; /* Más separación */
}

#footer-menu-toggle .hamburger-icon::after {
    bottom: -7px; /* Más separación */
}

#footer-menu-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; 
}

#footer-menu-toggle[aria-expanded="true"] .hamburger-icon::before {
    top: 0;
    transform: translateY(0px) rotate(45deg);
}

#footer-menu-toggle[aria-expanded="true"] .hamburger-icon::after {
    bottom: 0;
    transform: translateY(0px) rotate(-45deg);
}

/* Contenedor del Widget del Menú del Footer */
.site-footer .footer-widget-area {
    /* No necesita mucho estilo aquí si el menú lo maneja todo */
}

/* Estilo del menú de navegación de WordPress cuando está en .footer-widget-area */
.site-footer .footer-widget-area .widget_nav_menu .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
}

.site-footer .footer-widget-area .widget_nav_menu .menu-item {
    margin: 0 12px; /* Espacio entre ítems del menú */
}

.site-footer .footer-widget-area .widget_nav_menu .menu-item a {
    text-decoration: none;
    color: #333;
    padding: 8px 0; /* Padding vertical para los enlaces */
    display: block;
    font-size: 0.95em;
    line-height: 1.4;
}

.site-footer .footer-widget-area .widget_nav_menu .menu-item a:hover {
    color: #197BC1; 
}

/* --- Fila Inferior: Copyright --- */
.site-footer .footer-bottom {
    background-color: #197BC1; 
    padding: 12px 0; /* Espaciado vertical ajustado */
}

.site-footer .footer-bottom .footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; 
}

.site-footer .footer-bottom .copyright p {
    color: #FFFFFF; 
    margin: 0;
    font-size: 0.85em; /* Ligeramente más pequeño */
    line-height: 1.3;
}

/* --- Estilos para Móviles (ej. breakpoint 768px) --- */
@media (max-width: 768px) { /* Ajusta este breakpoint si es necesario */
    .site-footer .footer-menu-area .container {
        /* Permitir que el botón y el menú ocupen el ancho necesario */
    }

    #footer-menu-toggle {
        display: inline-block; /* Mostrar el botón hamburguesa */
        margin: 0 auto 10px auto; /* Centrarlo y darle espacio inferior */
        /* Si el menú es muy largo, el botón podría necesitar estar fuera del flujo normal */
    }

    .site-footer .footer-widget-area .widget_nav_menu .menu {
        display: none; /* Ocultar el menú horizontal por defecto */
        flex-direction: column; 
        width: 100%;
        text-align: left; /* Alinear texto a la izquierda en el menú desplegado */
        background-color: #fdfdfd; /* Fondo para el menú desplegable */
        border: 1px solid #ddd;
        border-top: none; /* El botón ya tiene un borde */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin-top: -1px; /* Para que el borde se junte con el del botón si están adyacentes */
    }

    .site-footer .footer-widget-area .widget_nav_menu .menu.footer-menu-active {
        display: flex; /* Mostrar el menú cuando esté activo */
    }

    .site-footer .footer-widget-area .widget_nav_menu .menu-item {
        margin: 0; 
        border-bottom: 1px solid #eee; 
    }
    .site-footer .footer-widget-area .widget_nav_menu .menu-item:last-child {
        border-bottom: none;
    }

    .site-footer .footer-widget-area .widget_nav_menu .menu-item a {
        padding: 12px 15px; /* Más padding para facilitar el toque y lectura */
        text-align: center; /* Centrar el texto de los items del menu */
    }
}