/* css/main.css */
@import url('variables.css');
@import url('reset.css');
@import url('layout.css');
@import url('utilities.css');
@import url('animations.css');
@import url('components/forms.css');
@import url('views/players.css');
@import url('views/dashboard.css');
@import url('views/leagues.css');
@import url('views/landing.css');
@import url('views/teams.css');
@import url('views/match-detail.css');

/* Themes (active via class on parent) */
@import url('themes/sport-futbol.css');
@import url('themes/sport-basquet.css');
@import url('themes/sport-voleibol.css');

/* Responsive last so it wins the cascade */
@import url('responsive.css');

/* Global UI classes and scroll behaviors */
html {
    scroll-behavior: smooth;
}
body {
    background: var(--color-bg-base);
    background-image: 
        radial-gradient(at 0% 0%, var(--color-glow-a) 0px, transparent 50%),
        radial-gradient(at 100% 100%, var(--color-glow-b) 0px, transparent 50%);
    background-attachment: fixed;
}

.nav-league-info {
  margin-left: auto; 
}
.logo-grid-container {
    width: fit-content;         /* Se adapta al ancho real del logo */
    max-width: 170px;           /* Limite para logos muy anchos */
    height: 56px;               /* Alto para que los logos se vean con presencia */
    border-radius: 10px;        
    overflow: hidden;           /* Esquinas redondeadas limpiecitas */
    display: flex;
    align-items: center;        
    justify-content: center;    
    padding: 0 6px;             /* Mínimo aire para que el logo no toque el borde */
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.brand-logo-img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;        /* Muestra el logo completo sin recortar */
    object-position: center;    /* Centra el enfoque del logo */
    display: block;
    transform: scale(1.3);      /* Hace zoom al centro para que se vea más el logo */
    transform-origin: center;
}

.brand-link:hover .logo-grid-container {
    transform: scale(1.03);
    border-color: var(--color-accent, #3b82f6);
}