.dropdown-menu
{
    background: var(--fg-gradient-surface) !important;
    border-color: var(--fg-border) !important;
}

body {
    background: var(--fg-gradient-main);
}

.table,
.table-dark
{
    --bs-table-bg: var(--fg-surface);
    --bs-table-striped-bg: var(--fg-surface-2);
    --bs-table-hover-bg: rgba(var(--fg-primary-rgb), .16);
    --bs-table-border-color: var(--fg-border);
    color: var(--fg-text);
}

.form-control,
.form-select
{
    background-color: var(--fg-surface);
    border-color: var(--fg-border);
    color: var(--fg-text);
}

.form-control:focus,
.form-select:focus
{
    border-color: var(--fg-primary-hover);
    box-shadow: 0 0 0 .2rem rgba(var(--fg-primary-rgb), 0.25);
}

.btn-primary
{
    background-color: var(--fg-primary) !important;
    border-color: var(--fg-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus
{
    background-color: var(--fg-primary-hover) !important;
    border-color: var(--fg-primary-hover) !important;
}

.btn-success
{
    background-color: var(--fg-success) !important;
    border-color: var(--fg-success) !important;
}

.btn-outline-warning
{
    color: var(--fg-warning) !important;
    border-color: var(--fg-warning) !important;
}

.btn-outline-danger
{
    color: var(--fg-danger) !important;
    border-color: var(--fg-danger) !important;
}

.accordion-button:focus
{
    border-color: var(--fg-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--fg-primary-rgb), .22) !important;
}

.accordion-button:not(.collapsed)
{
    background-color: rgba(var(--fg-primary-rgb), .14);
    color: var(--fg-text);
}

.text-muted,
.text-secondary,
.text-light-emphasis
{
    color: var(--fg-muted) !important;
}

.text-info,
.link-info,
.btn-info,
.border-info,
.alert-info,
.text-bg-info,
.bg-info,
.bg-info-subtle
{
    --bs-info-rgb: var(--fg-primary-rgb);
}

.text-info,
.link-info
{
    color: var(--fg-primary-hover) !important;
}

.border-info
{
    border-color: rgba(var(--fg-primary-rgb), .5) !important;
}

.bg-info,
.bg-info-subtle,
.text-bg-info,
.alert-info
{
    background-color: rgba(var(--fg-primary-rgb), .18) !important;
    color: var(--fg-text) !important;
    border-color: rgba(var(--fg-primary-rgb), .38) !important;
}

.btn-info
{
    background-color: var(--fg-primary-hover) !important;
    border-color: var(--fg-primary-hover) !important;
    color: var(--fg-text) !important;
}

/* Capa de compatibilidad para vistas con clases Bootstrap hardcodeadas */
[data-bs-theme="light"] .bg-dark,
[data-bs-theme="light"] .bg-dark-subtle,
[data-bs-theme="light"] .table-dark,
[data-bs-theme="light"] .list-group-item.bg-dark,
[data-bs-theme="light"] .modal-content.bg-dark
{
    background-color: var(--fg-surface) !important;
    color: var(--fg-text) !important;
    border-color: var(--fg-border) !important;
}

[data-bs-theme="light"] .text-white,
[data-bs-theme="light"] .text-light
{
    color: var(--fg-text) !important;
}

[data-bs-theme="light"] .btn-outline-light
{
    color: var(--fg-text) !important;
    border-color: var(--fg-border) !important;
    background-color: rgba(var(--fg-surface-rgb), .82) !important;
}

[data-bs-theme="light"] .btn-outline-light:hover,
[data-bs-theme="light"] .btn-outline-light:focus
{
    color: var(--fg-text) !important;
    border-color: var(--fg-primary) !important;
    background-color: rgba(var(--fg-primary-rgb), .16) !important;
}

[data-bs-theme="light"] .btn-dark,
[data-bs-theme="light"] .btn-secondary
{
    background-color: var(--fg-surface-2) !important;
    color: var(--fg-text) !important;
    border-color: var(--fg-border) !important;
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] .input-group-text
{
    background-color: var(--fg-surface) !important;
    color: var(--fg-text) !important;
    border-color: var(--fg-border) !important;
}

[data-bs-theme="light"] .table-dark > :not(caption) > * > *,
[data-bs-theme="light"] .table-dark th,
[data-bs-theme="light"] .table-dark td
{
    color: var(--fg-text) !important;
    border-color: var(--fg-border) !important;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .modal-content.bg-light
{
    background-color: var(--fg-surface) !important;
    color: var(--fg-text) !important;
    border-color: var(--fg-border) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .link-dark
{
    color: var(--fg-text) !important;
}

.popover .popover-header
{
    text-align: center;
    font-weight: bold;
    background-color: var(--fg-danger);
}


.content
{
    margin-top: clamp(4.9rem, 10vh, 6.7rem);
    min-height: 90vh;
}

footer
{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

.image-logo
{
    height: 2.35rem;
}

.fg-download-frame
{
    display: none;
}

@keyframes moveBackground
{
    from
    {
        background-position: 0 0;
    }

    to
    {
        background-position: 200% 0;
    }
}


body
{
    min-height: 100vh;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background:
        radial-gradient(circle at 12% 10%, rgba(var(--fg-warning-rgb), .16), transparent 30%),
        radial-gradient(circle at 88% 92%, rgba(var(--fg-primary-rgb), .18), transparent 32%),
        var(--fg-gradient-main);
    background-attachment: fixed;
    animation: moveBackground 480s linear infinite alternate;
}

.vertical-menu
{
    height: 100vh;
    width: 250px;
    position: fixed;
    right: -250px; /* Inicialmente oculta el menú fuera de la pantalla a la derecha */
    background-color: var(--fg-surface);
    padding-top: 20px;
    transition: right 0.3s ease; /* Agrega una transición para suavizar el movimiento del menú */
}

    .vertical-menu.show
    {
        right: 0; /* Muestra el menú cuando tiene la clase "show" */
    }

    .vertical-menu a
    {
        padding: 15px 20px;
        text-decoration: none;
        color: var(--fg-text);
        display: block;
    }

        .vertical-menu a:hover
        {
            background-color: var(--fg-primary);
            color: var(--fg-text);
        }

.navbar-toggler-icon
{
    background-color: var(--fg-primary);
}

.list-group-item
{
    display: flex;
    justify-content: space-between;
}

    .list-group-item span
    {
        margin-right: 1rem; /* Espaciado entre el texto y el icono (ajústalo según sea necesario) */
    }

.youtubeButton
{
    color: red;
}

.whatsAppButton
{
    color: var(--fg-success);
}

#spinner
{
    position: fixed; /* Fija el spinner en la pantalla */
    top: 0;
    left: 0;
    width: 100vw; /* Ancho del viewport */
    height: 100vh; /* Alto del viewport */
    z-index: 9999; /* Alto z-index para asegurar que esté sobre otros elementos */
    display: flex; /* Usa flexbox para centrar el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    background-color: rgba(var(--fg-shadow-rgb), 0.5);
}

    #spinner .container
    {
        position: relative; /* Posición relativa dentro del spinner */
        width: auto; /* Ancho automático basado en el contenido */
        height: auto; /* Alto automático basado en el contenido */
    }

        #spinner .container img
        {
            width: 25vh; /* Ancho específico para la imagen, ajusta según necesidad */
            height: auto; /* Alto específico para la imagen, ajusta según necesidad */
        }

    #spinner .loading-text
    {
        display: none;
        position: absolute; /* Posición absoluta para el texto */
        top: 50%; /* Centra verticalmente */
        left: 0; /* Alinea a la izquierda */
        width: 100%; /* Ancho completo de la pantalla */
        font-size: 10vw; /* Tamaño de la fuente basado en el ancho de la pantalla */
        font-weight: bold; /* Peso de la fuente */
        text-align: center; /* Alinea el texto al centro */
        color: white; /* Color del texto */
        z-index: 10; /* Asegúrate de que el texto esté sobre la imagen */
        overflow: hidden; /* Oculta el desbordamiento de texto */
        white-space: nowrap; /* Evita que el texto se envuelva a la siguiente línea */
    }

@keyframes spin
{
    0%
    {
        transform: rotate(0deg);
    }

    100%
    {
        transform: rotate(360deg);
    }
}

.fa-futbol-spinner
{
    animation: spin 2s linear infinite;
    font-size: 50px; /* Ajusta el tamaño según tus necesidades */
    color: var(--fg-text); /* Ajusta el color según tus necesidades */
}

.select2-container--bootstrap-5 .select2-selection
{
    background-color: var(--fg-surface) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered
{
    color: white !important;
}

.select2-container--bootstrap-5
.select2-dropdown
.select2-results__options
{
    color: white;
    background-color: var(--fg-surface);
}

.select2-container--bootstrap-5 .select2-dropdown
{
    background-color: var(--fg-surface);
    border-color: var(--fg-surface);
}

@keyframes brandGlowPulse
{
    0%, 100%
    {
        filter: drop-shadow(0 0 4px rgba(var(--fg-warning-rgb), .35)) drop-shadow(0 0 10px rgba(var(--fg-warning-rgb), .25));
    }

    50%
    {
        filter: drop-shadow(0 0 8px rgba(var(--fg-warning-rgb), .55)) drop-shadow(0 0 18px rgba(var(--fg-warning-rgb), .4));
    }
}

@keyframes brandGradientShift
{
    0%
    {
        background-position: 0% 50%;
    }

    50%
    {
        background-position: 100% 50%;
    }

    100%
    {
        background-position: 0% 50%;
    }
}

@keyframes brandFireGlow
{
    0%, 100%
    {
        text-shadow: 0 0 6px rgba(var(--fg-warning-rgb), .35), 0 0 12px rgba(var(--fg-warning-rgb), .28), 0 0 20px rgba(var(--fg-warning-rgb), .18);
    }

    50%
    {
        text-shadow: 0 0 10px rgba(var(--fg-warning-rgb), .5), 0 0 18px rgba(var(--fg-warning-rgb), .4), 0 0 28px rgba(var(--fg-warning-rgb), .26);
    }
}

.fg-brand-link
{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

.fg-brand-wow
{
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    font-weight: 900;
    letter-spacing: .06rem;
    text-transform: uppercase;
    line-height: 1;
    background: linear-gradient(90deg, var(--fg-warning) 0%, var(--fg-brand-accent-1) 30%, var(--fg-brand-accent-2) 62%, var(--fg-brand-accent-3) 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: brandGlowPulse 2.1s ease-in-out infinite, brandGradientShift 4.2s ease-in-out infinite, brandFireGlow 1.8s ease-in-out infinite;
    transition: transform .22s ease, letter-spacing .22s ease;
}

.fg-brand-link:hover .fg-brand-wow
{
    transform: scale(1.035);
    letter-spacing: .14rem;
}

[data-bs-theme="light"] .fg-brand-wow
{
    -webkit-text-stroke: .75px rgba(var(--fg-shadow-rgb), .85);
    text-shadow: 0 .5px 0 rgba(var(--fg-shadow-rgb), .45), 0 1.5px 2px rgba(var(--fg-shadow-rgb), .28);
}

.fg-brand-sub
{
    display: block;
    margin-top: .05rem;
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .14rem;
    color: var(--fg-muted);
    text-align: center;
    opacity: .95;
}

[data-bs-theme="light"] .fg-brand-sub
{
    color: var(--fg-text);
    -webkit-text-stroke: .5px rgba(var(--fg-shadow-rgb), .88);
    text-shadow: 0 .5px 0 rgba(var(--fg-shadow-rgb), .5), 0 1.5px 2px rgba(var(--fg-shadow-rgb), .26);
}

.fg-app-header
{
    background: radial-gradient(circle at 8% 0%, rgba(var(--fg-warning-rgb), .2), transparent 30%), linear-gradient(135deg, var(--fg-header-start) 0%, var(--fg-header-end) 100%);
    border-bottom: 1px solid rgba(var(--fg-text-rgb), .14);
    box-shadow: 0 10px 28px rgba(var(--fg-shadow-rgb), .32);
    backdrop-filter: blur(10px);
    padding-top: .18rem;
}

.fg-header-main
{
    gap: .5rem;
    position: relative;
    min-height: 2.7rem;
    padding: .12rem .65rem .1rem .45rem;
}

.fg-header-actions
{
    gap: .28rem;
    margin-left: auto;
}

.fg-menu-button
{
    align-items: center;
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-primary) 52%, var(--fg-surface) 100%) !important;
    border: 1px solid rgba(var(--fg-text-rgb), .6) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 3px rgba(var(--fg-warning-rgb), .1), 0 8px 18px rgba(var(--fg-shadow-rgb), .26), inset 0 1px 0 rgba(var(--fg-text-rgb), .42);
    color: var(--fg-text) !important;
    display: inline-flex;
    font-weight: 900;
    gap: .32rem;
    font-size: .78rem;
    letter-spacing: .025rem;
    min-height: 2.1rem;
    overflow: hidden;
    padding: .28rem .7rem;
    position: relative;
    text-shadow: 0 1px 3px rgba(var(--fg-shadow-rgb), .36);
    text-transform: uppercase;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.fg-menu-button::before
{
    background: radial-gradient(circle, rgba(var(--fg-text-rgb), .9) 0%, rgba(var(--fg-text-rgb), .45) 34%, transparent 62%);
    content: "";
    height: 3.2rem;
    left: -2.6rem;
    opacity: .5;
    position: absolute;
    top: -1.25rem;
    transform: rotate(25deg);
    width: 1.8rem;
}

.fg-menu-button::after
{
    background: linear-gradient(90deg, transparent, rgba(var(--fg-text-rgb), .34), transparent);
    content: "";
    height: 100%;
    left: -80%;
    position: absolute;
    top: 0;
    transform: skewX(-18deg);
    transition: left .45s ease;
    width: 56%;
}

.fg-menu-button:hover
{
    border-color: rgba(var(--fg-text-rgb), .65) !important;
    box-shadow: 0 0 0 4px rgba(var(--fg-warning-rgb), .16), 0 12px 24px rgba(var(--fg-shadow-rgb), .34), 0 0 16px rgba(var(--fg-warning-rgb), .22);
    transform: translateY(-1px) scale(1.02);
}

.fg-menu-button:hover::after
{
    left: 125%;
}

.fg-menu-button:focus-visible
{
    outline: 3px solid rgba(var(--fg-text-rgb), .65);
    outline-offset: 4px;
}

.fg-menu-button .fg-menu-text
{
    position: relative;
    z-index: 1;
}

.fg-account-sphere
{
    align-items: center;
    background: radial-gradient(circle at 32% 24%, var(--fg-text) 0%, var(--fg-primary-hover) 35%, var(--fg-primary) 72%, var(--fg-surface) 100%);
    border: 1px solid rgba(var(--fg-text-rgb), .68);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(var(--fg-warning-rgb), .1), 0 8px 18px rgba(var(--fg-shadow-rgb), .3);
    color: var(--fg-bg);
    display: inline-flex;
    height: 2.1rem;
    justify-content: center;
    position: relative;
    right: auto;
    text-decoration: none;
    top: auto;
    transform: none;
    width: 2.1rem;
    z-index: 2;
}

.fg-account-sphere:hover
{
    color: var(--fg-bg);
    transform: scale(1.06);
}

.fg-account-sphere i
{
    font-size: .9rem;
}

.fg-account-sphere img
{
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.fg-header-login
{
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    z-index: 2;
}

.fg-header-login form
{
    margin: 0;
}

.fg-header-login .btn
{
    border: 1px solid rgba(var(--fg-text-rgb), .65);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(var(--fg-warning-rgb), .1), 0 8px 18px rgba(var(--fg-shadow-rgb), .3);
    font-size: .78rem;
    font-weight: 800;
    min-height: 2.1rem;
    padding-inline: .62rem;
}

.fg-header-actions #panelBell
{
    display: flex;
    align-items: center;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.fg-header-actions #btnGoalEvent
{
    border: 1px solid rgba(var(--fg-text-rgb), .18);
    background: rgba(var(--fg-surface-rgb), .1);
    color: var(--fg-text);
    margin: 0 !important;
    min-height: 2.1rem;
    padding: .28rem .55rem;
}

.fg-header-actions #btnGoalEvent .bell
{
    color: var(--fg-warning);
}

[data-bs-theme="light"] .fg-header-actions #btnGoalEvent
{
    border: 1px solid rgba(var(--fg-muted-rgb), .32);
    background: rgba(var(--fg-surface-rgb), .94);
    color: var(--fg-primary);
    box-shadow: 0 2px 10px rgba(var(--fg-muted-rgb), .14);
}

[data-bs-theme="light"] .fg-header-actions #btnGoalEvent .bell
{
    color: var(--fg-primary);
}

.fg-header-actions #messages,
.fg-header-actions #button-play
{
    display: none;
}

.fg-theme-switch
{
    display: inline-flex;
    align-items: center;
    gap: .28rem;
}

.fg-theme-btn
{
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1px solid rgba(var(--fg-text-rgb), .4);
    background: rgba(var(--fg-surface-rgb), .12);
    color: var(--fg-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

.fg-theme-btn:hover
{
    border-color: rgba(var(--fg-text-rgb), .7);
    background: rgba(var(--fg-surface-rgb), .2);
    transform: translateY(-1px);
}

.fg-theme-btn.active
{
    background: rgba(var(--fg-warning-rgb), .24);
    border-color: var(--fg-warning);
    color: var(--fg-warning);
    box-shadow: 0 0 0 2px rgba(var(--fg-warning-rgb), .22);
}

[data-bs-theme="light"] .fg-theme-btn
{
    border-color: rgba(var(--fg-muted-rgb), .28);
    background: rgba(var(--fg-surface-rgb), .88);
    color: var(--fg-primary);
}

[data-bs-theme="light"] .fg-theme-btn.active
{
    background: rgba(var(--fg-primary-rgb), .18);
    border-color: var(--fg-primary);
    color: var(--fg-primary);
    box-shadow: 0 0 0 2px rgba(var(--fg-primary-rgb), .2);
}

.fg-side-menu.offcanvas
{
    width: min(88vw, 340px);
    background: linear-gradient(180deg, var(--fg-menu-bg-start) 0%, var(--fg-menu-bg-end) 100%);
    color: var(--fg-text);
}

.fg-side-menu .offcanvas-header
{
    border-bottom: 1px solid var(--fg-border);
    color: var(--fg-text);
}

.fg-side-menu .fg-menu-title-icon
{
    color: var(--fg-menu-accent);
}

.fg-side-menu .accordion-item
{
    background: rgba(var(--fg-surface-rgb), .05);
    border: 1px solid var(--fg-border);
    border-radius: .75rem;
    overflow: hidden;
}

.fg-side-menu .accordion-button
{
    background: rgba(var(--fg-primary-rgb), .14);
    color: var(--fg-text);
    font-weight: 800;
    letter-spacing: .02rem;
}

.fg-side-menu .accordion-button.collapsed
{
    background: var(--fg-menu-item-bg);
}

.fg-side-menu .accordion-button:not(.collapsed)
{
    background: rgba(var(--fg-primary-rgb), .24);
    color: var(--fg-text);
    box-shadow: none;
}

.fg-side-menu .accordion-button::after
{
    filter: brightness(0) saturate(100%) invert(92%) sepia(17%) saturate(348%) hue-rotate(86deg) brightness(103%) contrast(102%);
}

.fg-side-menu .list-group-item
{
    align-items: center;
    background: var(--fg-menu-item-bg);
    border: 1px solid var(--fg-border);
    color: var(--fg-text);
    margin-bottom: .4rem;
    border-radius: .6rem;
}

.fg-side-menu .list-group-item:hover
{
    background: var(--fg-menu-item-hover);
    color: var(--fg-text);
}

.fg-side-menu .list-group-item span
{
    font-size: 1rem !important;
    font-weight: 700;
}

.fg-donation-box
{
    background: var(--fg-menu-item-bg);
    border: 1px solid var(--fg-border);
    border-radius: .75rem;
    padding: .75rem;
}

.fg-menu-panel
{
    background: var(--fg-menu-item-bg);
    border: 1px solid var(--fg-border);
    border-radius: .75rem;
    padding: .75rem;
}

.fg-menu-panel #panelBell
{
    width: 100%;
}

.fg-menu-panel #btnGoalEvent
{
    width: 100%;
    border: 1px solid var(--fg-border);
    background: rgba(var(--fg-surface-rgb), .08);
}

.fg-menu-panel .notifybell-messages
{
    max-width: 100%;
    color: var(--fg-text);
}

[data-bs-theme="light"] .fg-side-menu .accordion-button::after
{
    filter: brightness(0) saturate(100%) invert(23%) sepia(16%) saturate(1375%) hue-rotate(96deg) brightness(92%) contrast(95%);
}

@media (max-width: 991.98px)
{
    .content
    {
        margin-top: clamp(4.8rem, 11vh, 6.8rem);
    }

    .fg-brand-wow
    {
        font-size: clamp(.95rem, 4.5vw, 1.2rem);
        letter-spacing: .035rem;
    }

    .fg-brand-sub
    {
        display: none;
    }

    .image-logo
    {
        height: 1.9rem;
    }
}

@media (max-width: 575.98px)
{
    .content
    {
        margin-top: clamp(4.45rem, 11vh, 6.2rem);
    }

    .fg-header-main
    {
        gap: .25rem;
        justify-content: flex-start !important;
        min-height: 2.35rem;
        padding: .08rem .35rem;
    }

    .fg-header-actions
    {
        justify-content: flex-start;
        width: auto;
    }

    .fg-account-sphere
    {
        height: 1.85rem;
        width: 1.85rem;
    }

    .fg-header-login .btn
    {
        min-height: 1.85rem;
        padding-inline: .45rem;
    }

    .fg-menu-button
    {
        min-height: 1.85rem;
        padding: .18rem .58rem;
    }
}