/* Estilo base */
main {
  padding-top: 56px; /* altura aproximada del navbar */
  background-color: var(--zeus-bg-color);
  min-height: calc(100vh - 56px);
}

.offset-sidebar main {
  padding-top: 56px;
}

#sidebar {
  width: 250px;
  transition: all 0.3s ease;
  z-index: 1040;
}

.offset-sidebar {
  margin-left: 250px;
  transition: margin-left 0.3s ease;
}

/* Sidebar compacto solo en escritorio */
@media (min-width: 768px) {
  #sidebar.compact {
    width: 80px;
    padding: 1rem 0rem;
  }

  #sidebar.compact h4,
  #sidebar.compact .nav-link span {
    display: none;
  }

  .offset-sidebar.compact {
    margin-left: 80px;
  }
}

/* Sidebar oculto en móviles */
@media (max-width: 767.98px) {
  #sidebar {
    transform: translateX(-100%);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transition: transform 0.3s ease;
  }

  #sidebar.show {
    transform: translateX(0);
  }

  .offset-sidebar {
    margin-left: 0;
  }

  /* Ocultar botón de compactar */
  #toggleSidebarIcons {
    display: none !important;
  }
}

#sidebar.compact > a > .logo {
    max-width: 112px;
    margin-top: -8px;
    margin-left: -3px;
    display: none;
}

#sidebar > a > .logo {
    max-width: 112px;
    margin-top: -8px;
    margin-left: 0px;
    display: block;
}

#sidebar.compact > a > .logo-mini {
    max-width: 58px;
    margin-top: -8px;
    display: block;
}

#sidebar > a > .logo-mini {
    max-width: 58px;
    margin-top: -8px;
    display: none;
}

#sidebar .nav-link {
  color: #ffffff; /* blanco */
}

#sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

#sidebar .nav-link.active {
  background-color: rgba(255, 255, 255, 0.1);
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-left: 2px solid var(--zeus-yellow);
}


#sidebar {
  background-color: var(--bs-sidebar-bg);
  color: var(--bs-sidebar-color);
}

.dropdown-menu a.dropdown-item:hover {
  background-color: var(--bs-secondary-bg);
}

.zeus-thumbnail {
    width: 30px;
    max-width: 30px;
    height: 30px;
    max-height: 30px;
    border: 1px solid var(--zeus-yellow);
    border-radius: 30px;
}

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.page-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  /*border-bottom: 2px solid #0000003d;*/
}

.zeus-navbar {
  background: var(--zeus-nav-default);
}


[data-bs-theme="light"] {
  --zeus-nav-default: radial-gradient(circle at right center, #500096, #563277 25%, #4a378c 40%, #0f4fbd 65%, #124881);
  --zeus-bg-color: #0000001a;
  --bs-body-bg: #f8f9fa;
  --bs-body-color: #212529;
  --bs-sidebar-bg: #ffffff;
  --bs-sidebar-color: #000000;
  
  .bg-dark {
    --bs-bg-opacity: 1;
    --bs-dark-rgb: 214, 214, 214;
  }
}

[data-bs-theme="dark"] {
  --zeus-nav-default: radial-gradient(circle at right center, #500096, #563277 25%, #4a378c 40%, #0f4fbd 65%, #124881);
  --zeus-bg-color: #0000001a;
  --bs-body-bg: #212529;
  --bs-body-color: #f8f9fa;
  --bs-sidebar-bg: #1a1c1e;
  --bs-sidebar-color: #ffffff;
}

:root {
  --zeus-purple: #8f5fe8;
  --bs-secondary-rgb: 143, 95, 232;
  --zeus-orange: #ffab00;
  --zeus-red: #fc424a;
  --bs-danger-rgb: 252, 66, 74;
  --zeus-cyan: #0090e7;
  --bs-primary-rgb: 0, 144, 231;
  --zeus-green: #00d25b;
  --bs-success-rgb: 0, 210, 91;
  --zeus-yellow: #ffff29;
  --bs-success-rgb: 0, 210, 91;

  .btn-outline-secondary {
    /*--bs-btn-color: var(--zeus-yellow);
    --bs-btn-border-color: var(--zeus-yellow);*/
  }

  .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--zeus-green);
    --bs-btn-border-color: var(--zeus-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--bs-success-rgb), 0.5);
    --bs-btn-hover-border-color: rgba(var(--bs-success-rgb), 0.5);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--bs-success-rgb), 0.7);
    --bs-btn-active-border-color: rgba(var(--bs-success-rgb), 0.7);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--zeus-green);
    --bs-btn-disabled-border-color: var(--zeus-green);
    --bs-border-radius: 2rem;
    --bs-border-radius-sm: 2rem;
  }

  .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--zeus-purple);
    --bs-btn-border-color: var(--zeus-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 0.5);
    --bs-btn-hover-border-color: rgba(var(--bs-secondary-rgb), 0.5);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), 0.7);
    --bs-btn-active-border-color: rgba(var(--bs-secondary-rgb), 0.7);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--zeus-purple);
    --bs-btn-disabled-border-color: var(--zeus-purple);
    --bs-border-radius: 2rem;
    --bs-border-radius-sm: 2rem;
  }

  .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--zeus-red);
    --bs-btn-border-color: var(--zeus-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--bs-danger-rgb), 0.5);
    --bs-btn-hover-border-color: rgba(var(--bs-danger-rgb), 0.5);;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--bs-danger-rgb), 0.7);
    --bs-btn-active-border-color: rgba(var(--bs-danger-rgb), 0.7);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--zeus-red);
    --bs-btn-disabled-border-color: var(--zeus-red);
    --bs-border-radius: 2rem;
    --bs-border-radius-sm: 2rem;
  }

  .btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--zeus-orange);
    --bs-btn-border-color: var(--zeus-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--bs-warning-rgb), 0.5);
    --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb), 0.5);;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--bs-warning-rgb), 0.7);
    --bs-btn-active-border-color: rgba(var(--bs-warning-rgb), 0.7);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--zeus-orange);
    --bs-btn-disabled-border-color: var(--zeus-orange);
    --bs-border-radius: 2rem;
    --bs-border-radius-sm: 2rem;
  }

  .dropdown-menu {
    border: 5px solid var(--bs-dropdown-border-color);
    --bs-dropdown-min-width:250px;
  }
}

.hero {
  background: url('../img/sport-collage.png'), linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(39, 48, 43, 1) 50%, rgba(59, 59, 59, 1) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 6; /* mantiene proporción */
  width: 100%;
}

/* Pantallas grandes (desktop) */
@media (min-width: 1200px) {
  .hero {
    background-size: 100% auto;

  }
}

/* Tablets */
@media (max-width: 1024px) {
  .hero {
    background-size: contain;
  }
}

/* Móviles */
@media (max-width: 768px) {
  .hero {
    background-size: 180%;
  }
}