/* Color de fondo general */
body {
  background-color: #EDF6F9;
  margin: 0;
  padding: 0;
  min-height: 100vh; /* asegura que el color cubra toda la altura */
}

/* Estilos específicos para la vista seleccionar_club */

        .comunidad-title {
            color: #006D77;
        }

        .provincia-title {
            font-weight: 600;
            text-align: center;
            margin-bottom: 1rem;
            color: #006D77;
        }

        .municipio-title {
            font-weight: 500;
            text-align: center;
            margin-bottom: 0.75rem;
            color: #E29578;
        }

        /* "Card" clicable pero visualmente invisible */
        .club-card {
            cursor: pointer;
            width: 100%;
            display: flex;
            flex-direction: column;     /* logo encima del nombre (si existe) */
            align-items: center;
            justify-content: center;    /* centra verticalmente */
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            min-height: 72px;           /* área clicable consistente */
            box-sizing: border-box;

            /* invisibilizar estilo de "tarjeta" para que no rompa el layout */
            border: none;
            background: transparent;
            box-shadow: none;
            color: inherit;
            text-decoration: none;
        }

        /* foco visible (accesibilidad) */
        .club-card:focus {
            outline: 3px solid rgba(8,50,56,0.12);
            outline-offset: 2px;
        }

        /* hover opcional: ligera elevación visual (no obligatorio) */
        .club-card:hover {
            transform: translateY(-2px);
        }

        .club-logo {
            width: 128px;
            height: 128px;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;
            border: none;
            background: transparent;
        }
        .club-logo img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

        .club-name {
            font-size: 1.05rem;
            font-weight: 600;
            color: #083238;
            word-break: break-word;
            text-align: center; /* nombre centrado */
        }

        /* Separación vertical entre items */
        .club-list > .mb-3 { margin-bottom: 0.75rem; }

        /* Controles de filtro */
        .filtros-row { gap: .5rem; align-items: center; }
        .filtros-row .form-select { min-width: 200px; }

        /* --- nueva lógica de columnas de municipios --- */
        .municipios-row {
            display: flex;
            flex-wrap: wrap;
            margin-left: -0.5rem;
            margin-right: -0.5rem;
        }
        .municipio-col {
            box-sizing: border-box;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            width: 100%;
        }

        /* cuando hay exactamente 1 municipio visible (clase managed por JS),
                   lo mostramos con ancho mayor y centrado */
                .municipio-col.single {
                    width: 100%; /* por defecto en móvil; en desktop el rule de desktop (below) lo ajusta */
                }

        /* responsive - en >=768px hacemos 2 columnas */
        @media (min-width: 768px) {
            .municipio-col { width: 50%; }

            /* Cuando hay un único municipio en la provincia, lo centramos y le damos ancho mayor */
            .municipio-col.single {
                width: 66.6666%;      /* equivalente a col-md-8 */
                margin-left: auto;
                margin-right: auto;
            }

            /* centro dinámico aplicado por JS con la clase 'center-last' (para >=3 impares) */
                        .municipio-col.center-last {
                            margin-left: auto;
                            margin-right: auto;
                        }
        }

        @media (max-width: 767.98px) {
            .provincia-title { text-align: center; }
            .municipio-title { text-align: center; }
            .filtros-row .form-select { min-width: 100%; }
        }

/* -- FILTROS -- */
/* Contenedor que centra el bloque completo */
.filters-bar {
  width: 100%;
}

/* Grupo que contiene selects + botón, centrado en pantalla */
.filters-group {
  justify-content: center; /* centra todo el grupo horizontalmente */
  align-items: center;
  gap: .75rem;
  max-width: 1100px;       /* evita que el grupo crezca demasiado; ajusta si quieres */
  margin: 0 auto;
  padding: 0 0.5rem;
}

/* Cada item dentro del grupo (selects y botón) */
.filter-item {
  display: inline-flex;
  align-items: center;
}

/* Anchura mínima de los selects para dar consistencia */
.filter-select {
  min-width: 200px; /* ajustable */
  max-width: 320px; /* opcional, evita que sean excesivamente anchos */
}

/* Botón un poco separado visualmente */
.btn-borrar {
  white-space: nowrap;
}

/* Responsive: en pantallas pequeñas los elementos se apilan (flex-wrap) */
@media (max-width: 767.98px) {
  .filters-group {
    justify-content: center;
    gap: .5rem;
  }
  .filter-select {
    min-width: 140px;
    width: 100%;
  }
  .filter-item {
    width: 100%;
    justify-content: center;
  }
  .btn-borrar {
    width: auto;
  }
}