/* css/catalogo.css */

/* Contenedor principal de la página del catálogo */
.catalog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-spacing-large);
}

/* Sección del selector de categoría */
.category-filter-section {
    width: 100%;
    max-width: 500px;
    text-align: center;
}

/* Cuadrícula para mostrar los logos de los equipos */
.teams-grid {
    width: 100%;
    display: grid;
    /* --- La clave de la responsividad --- */
    /* Crea columnas de mínimo 100px y máximo 1fr (fracción del espacio) */
    /* auto-fit llenará el espacio con tantas columnas como quepan */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 25px;
    /* Espacio entre logos */
    padding: 10px;
}

/* Mensaje inicial que se muestra antes de seleccionar categoría */
.initial-message {
    grid-column: 1 / -1;
    /* Hace que el mensaje ocupe todo el ancho de la cuadrícula */
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-text-on-dark-secondary);
}

/* Estilo para cada elemento individual de la cuadrícula */
.team-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.team-item:hover {
    transform: scale(1.08);
    filter: brightness(1.2);
}

.team-item .team-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 5px;
}

.team-item .team-name {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    text-align: center;
    color: var(--color-text-on-dark);
}

/* Estilos para el popup de jugadores (vista pública) */
.players-list-public {
    min-height: 150px;
    max-height: 400px;
    /* Altura máxima para la lista */
    overflow-y: auto;
    /* Scroll si hay muchos jugadores */
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 5px;
}