@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    --bs-primary: #00497A;
    --bs-primary-rgb: 0, 73, 122;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #003a62;
    --bs-btn-hover-border-color: #00365a;
    --bs-btn-active-bg: #00365a;
    --bs-btn-active-border-color: #003353;
}

/* Estilos botones light que se usan en pagos */
.btn-light {
    --bs-btn-bg: #f2f2f2;
    --bs-btn-border-color: #e4e4e4;
    --bs-btn-hover-bg: #003a62;
    --bs-btn-hover-border-color: #d9d9d9;
    --bs-btn-active-bg: #d9d9d9;
    --bs-btn-active-border-color: #d9d9d9;
    color: #000;
}

/* Estilos botones light que se usan en pagos para que cuando es hover o focus, el color del texto sea blanco */

.btn-light:hover,
.btn-light:focus {
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #003a62;
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.card-primary .card-header {
    background-color: var(--bs-primary) !important;
    color: #FFF !important;
}


a {
    text-decoration: none;
}

li {
    list-style: none;
}

body {
    font-family: 'Outfit', serif;
}

/* Estilos para navbar con tema dark - texto blanco */
.navbar.bg-primary .navbar-nav .nav-link,
.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .navbar-nav .dropdown-item {
    color: #ffffff !important;
}

.navbar.bg-primary .navbar-nav .nav-link:hover,
.navbar.bg-primary .navbar-nav .dropdown-item:hover {
    color: #ffffff !important;
    opacity: 0.8;
}

.navbar.bg-primary .navbar-nav .nav-link i,
.navbar.bg-primary .navbar-nav .dropdown-item i {
    color: #ffffff !important;
}

.retoquiz-navbar .navbar-search-form {
    width: 100%;
    min-width: 0;
}

.retoquiz-navbar .navbar-search-group {
    min-width: 160px;
    flex: 1 1 200px;
}

.retoquiz-navbar .navbar-filter-wrap {
    flex: 1 1 120px;
    min-width: 110px;
    max-width: none;
}

@media (min-width: 992px) {
    .retoquiz-navbar .navbar-filter-wrap {
        flex: 0 1 150px;
        max-width: 170px;
    }

    .retoquiz-navbar .navbar-search-form {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 991.98px) {
    .retoquiz-navbar .collapse.navbar-collapse {
        width: 100%;
        flex-basis: 100%;
    }
}

.retoquiz-navbar .navbar-filter-wrap .select2-container {
    width: 100% !important;
}

.retoquiz-navbar .navbar-filter-select {
    width: 100%;
}

.retoquiz-navbar .select2-container--bootstrap-5 .select2-selection {
    min-height: 31px;
    font-size: 0.875rem;
}

.retoquiz-navbar .select2-container--open {
    z-index: 1065 !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    z-index: 1065;
}

/* Encabezados de sección en dropdown: padding izquierda y derecha */
.navbar .dropdown-menu .dropdown-header-padding-x {
    display: block !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Menú largo (engranaje): alto máximo y scroll vertical */
.navbar .dropdown-menu.dropdown-menu-scrollable {
    max-height: min(70vh, 28rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.suggestions {
    /*border: 1px solid #ccc;*/
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    position: absolute;
    /* Para que aparezca debajo del input */
    margin-top: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra para mejor visibilidad */
    border-radius: 4px;
    /* Bordes redondeados */
}

#filterCardBody {
    overflow-x: visible !important;
}

#filterCardBody.collapse.show {
    overflow: visible !important;
}

.search-card {
    overflow: visible !important;
}

.search-card,
.search-card .card-body,
.search-card .card-header {
    position: relative;
}

.search-card {
    z-index: 1;
}

.search-card .card-body {
    z-index: 2;
}

.search-card .card-header {
    z-index: 1;
}

.navbar .dropdown-menu {
    z-index: 3000;
}

.suggestion-item {
    padding: 8px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

.suggestion-item.selected {
    background-color: #007bff;
    /* Color de fondo para la sugerencia seleccionada */
    color: white;
    /* Color del texto */
}

/* Cuenta en navbar + modal de autenticación */
.navbar-auth-actions .dropdown-menu {
    min-width: 12rem;
}

#authModal .alert {
    margin-top: 0;
}

#authModal .nav-tabs .nav-link {
    font-weight: 600;
}

.retoquiz-navbar .navbar-auth-actions .btn-outline-light:hover,
.retoquiz-navbar .navbar-auth-actions .btn-outline-light:focus {
    color: var(--bs-primary);
    background-color: #fff;
}

@media (max-width: 575.98px) {
    .retoquiz-navbar .navbar-brand {
        font-size: 1rem;
    }
}

/* Leaderboard semanal (sidebar derecho) */
.leaderboard-sidebar .leaderboard-weekly-card {
    margin-top: 0;
}

@media (min-width: 768px) {
    .leaderboard-sidebar {
        position: sticky;
        top: 4.75rem;
        align-self: flex-start;
    }
}

.leaderboard-weekly-card {
    overflow: hidden;
}

.leaderboard-weekly-header {
    background: linear-gradient(135deg, #eaebec 0%, #e0e4e8 55%, #d4e3ed 100%);
    border-bottom: 1px solid #d4e3ed;
}

.leaderboard-weekly-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 600;
    font-size: 0.68rem;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.leaderboard-item {
    display: grid;
    grid-template-columns: 2rem 2.5rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
    border-radius: 0.65rem;
    background: #f8f9fb;
    border: 1px solid #eef1f5;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.leaderboard-item:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 73, 122, 0.08);
}

.leaderboard-item.is-me {
    border-color: rgba(0, 73, 122, 0.35);
    background: linear-gradient(90deg, #eef6fc 0%, #f8f9fb 100%);
}

.leaderboard-item.rank-gold {
    background: linear-gradient(90deg, #fff8e1 0%, #fffdf5 100%);
    border-color: #ffe082;
}

.leaderboard-item.rank-silver {
    background: linear-gradient(90deg, #f5f7fa 0%, #fafbfc 100%);
    border-color: #cfd8dc;
}

.leaderboard-item.rank-bronze {
    background: linear-gradient(90deg, #fbe9e7 0%, #fff8f6 100%);
    border-color: #ffccbc;
}

.leaderboard-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: 0.7rem;
    font-weight: 700;
    color: #6c757d;
}

.leaderboard-item.rank-gold .leaderboard-rank {
    color: #b8860b;
}

.leaderboard-item.rank-silver .leaderboard-rank {
    color: #607d8b;
}

.leaderboard-item.rank-bronze .leaderboard-rank {
    color: #bf360c;
}

.leaderboard-rank-num {
    font-size: 0.62rem;
    margin-top: 1px;
}

.leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.leaderboard-item.rank-gold .leaderboard-avatar {
    border-color: #ffd54f;
}

.leaderboard-item.rank-silver .leaderboard-avatar {
    border-color: #b0bec5;
}

.leaderboard-item.rank-bronze .leaderboard-avatar {
    border-color: #ffab91;
}

.leaderboard-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #212529;
    display: block;
    max-width: 100%;
}

.leaderboard-points-container {
    font-size: 0.78rem;
    font-weight: 700;
    color: #00497a;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.leaderboard-points-container i {
    color: #ffc107;
}

.auth-offcanvas .leaderboard-weekly-card .card-header {
    display: block;
}