/**** FUENTE DE LA PAGINA ***/
@font-face {
    font-family: Messiri;
    src: url('../fonts/ElMessiri-VariableFont_wght.ttf');
    font-style: normal;
    font-weight: normal;
}

/**** DEFINICION DE COLORES ***/
:root {
    --gray: #c6c6c6;
    --blue: #00183C;
    --gray20: #36454F;
    --gold: #FFBD2E;
    --orange: #FF7900;
    --white: #FFFFFF;
    --brown: #8C5A4F;
    --black-80: #000000CC;
}

* {
    font-family: Messiri;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

input:disabled,
select:disabled,
button:disabled {
    cursor: not-allowed;
}

body {
    background-color: var(--gray) !important;
    color: var(--gray20) !important;
}

input:focus::placeholder {
    color: transparent;
}

.form-floating>textarea::placeholder,
.form-floating>input::placeholder {
    color: transparent !important;
}


footer div a:hover {
    background-size: 100% 2px;
    color: var(--gold);
}

footer div a {
    cursor: pointer;
    color: var(--gray);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

.text-dark-gray {
    color: var(--gray20) !important;
}

.dropstart .dropdown-toggle::before {
    vertical-align: 0;
}

.dropstart .dropdown-toggle::before {
    display: none !important;
    margin-right: 0 !important;
    vertical-align: auto !important;
    content: "" !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/**** DEFINICION DE ESTILOS BY ID***/
#scrollTopButton {
    position: fixed;
    bottom: 1.5rem;
    right: 0.5rem;
    display: none;
    z-index: 1030;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--gray20);
    background-color: var(--gold);
    border: 2px solid var(--gray20);
}

#scrollTopButton:hover {
    color: var(--white);
    background-color: var(--gray20);
    border: 2px solid var(--gray20);
}

#img-perfil {
    height: 10rem;
    width: 10rem;
    border: 1px solid var(--gray20);
    border-radius: 5rem;
}

#img-perfil img {
    max-height: 100%;
}

/**** DEFINICION DE ESTILOS ***/
.btn-dark-blue {
    background-color: var(--gray20) !important;
    color: var(--white) !important;
    border: 1px solid var(--gray20) !important;
}

.btn-dark-blue:hover,
.btn-gray:hover {
    background-color: var(--gold) !important;
    color: var(--gray20) !important;
    border: 1px solid var(--gold) !important;
}

.btn-gray {
    background-color: var(--gray) !important;
    color: var(--black-80) !important;
    border: 1px solid var(--gray) !important;
}

.bg-blue {
    background-color: var(--gray20);
}

.bg-dark-blue {
    background-color: var(--gray20) !important;
    color: var(--white) !important;
}

.accordion-button.bg-dark-blue::after {
    color: white !important;
    /* Cambia el color del ícono */
    filter: brightness(0) invert(1);
    /* Alternativa para forzar blanco */
}


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

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

.text-gold,
.active {
    color: var(--gold) !important;
}

.nav-link:hover {
    color: var(--orange) !important;
}

.hth-3 {
    height: 3rem;
}

.body-login {
    background-color: var(--white) !important;
    height: 100vh;
    width: 100vw;
}

.main {
    min-height: calc(100vh - (83.325px + 93px));
    background-color: var(--white);
    margin-top: 6rem;
    margin-bottom: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem;
}

.img-error {
    height: 28rem;
    max-width: 100%;
}

.text-justify {
    text-align: justify !important;
}

.contenido {
    opacity: 0;
}

.title,
.image,
.welcome-text {
    margin: 20px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

.type-of-person {
    transition: transform 0.4s;
}

.type-of-person:hover {
    transform: scale(1.1);
}

.contacto {
    text-decoration: none;
    color: var(--gray20);
}

.contacto:hover {
    color: var(--gold);
}

/********* LOADER *********/
.loader {
    height: 100vh !important;
    width: 100vw !important;
    z-index: 99999;
    background: var(--black-80);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;

}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;

}

.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

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



/***** FONDOS DE CONTENIDO *****/
.back-info {
    background-image: url('../img/nosotros.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.back-admin {
    background-image: url('../img/login.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /*filter: grayscale(100%) brightness(100%) contrast(50%)*/
}

/***** estilos del scroll *****/
*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

*::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 4px;
}

*::-webkit-scrollbar-track {
    background: var(--gray);
    border-radius: 4px;
}


/*----- ESTILOS PANEL -----*/
/* Estilos del menu */
.menu-dashboard {
    width: 80px;
    height: 100vh;
    background: var(--gray20);
    padding: 15px;
    transition: width .3s ease;
    font-size: 20px;
    color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
}

.top-menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.top-menu .logo {
    display: flex;
    align-items: center;
    display: none;
}

.top-menu .toggle {
    width: 30px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.top-menu .toggle i {
    font-size: 35px;
}

/* usuario */
.user {
    margin-top: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user i {
    font-size: 35px;
}

.user .user-name {
    padding-left: 10px;
    display: none;
}

/* enlaces */
.menu {
    max-height: 85% !important;
    overflow-y: auto;
}

.menu .enlace {
    width: 100%;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.menu .enlace:hover {
    background: var(--gold);
}

.menu .enlace i {
    font-size: 30px;
}

.menu .enlace span {
    display: none;
    transition: display .3s ease;
}

.menu .enlace.activo {
    background: var(--gold);
    color: var(--gray20) !important;
}


/* menu abierto */
.menu-dashboard.open {
    width: 250px;
    font-size: 15px;
}

.menu-dashboard.open .top-menu .logo {
    display: block;
}

.top-menu .logo img {
    width: 100px;
    transition: width .3s ease;
    /*filter: hue-rotate(0) saturate(0) brightness(100);*/
}

.menu-dashboard.open .user-name,
.menu-dashboard.open .menu .enlace span {
    display: block;
}

.menu-dashboard.open .menu .enlace {
    justify-content: start;
    padding-left: 20px;
}

.menu-dashboard.open .menu .enlace span {
    padding-left: 10px
}

.menu-dashboard.open .menu {
    max-height: 75%;
    padding-right: 5px;
}

/***** Estilos de menu cerrado aparece las etiquetas *****/
.spn-user {
    background: var(--gold);
    position: fixed;
    left: -100%;
    height: 3rem;
    width: 12rem;
    border-radius: 0 5rem 5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray20);
    opacity: 0;
    transition: all 300ms ease;
}

.spn-user:before {
    content: '';
    position: absolute;
    left: -2.2rem;
    width: 0;
    height: 0;
    /* esta es la parte importante */
    border: transparent solid 1.4rem;
    border-right-color: var(--gold);
}

.user:hover>.spn-user {
    left: 5rem;
    opacity: 1;
}

.spn-menu {
    background: var(--gold);
    color: var(--gray20);
    position: fixed;
    left: -100%;
    height: 3rem;
    width: 12rem;
    border-radius: 0 5rem 5rem 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: left 300ms ease;
}

.spn-menu:before {
    content: '';
    position: absolute;
    left: -2.2rem;
    width: 0;
    height: 0;
    /* esta es la parte importante */
    border: transparent solid 1.4rem;
    border-right-color: var(--gold);
}

.menu .enlace:hover>.spn-menu {
    left: 5rem;
    opacity: 1;
}

.menu-dashboard.open .user>.spn-user,
.menu-dashboard.open .enlace>.spn-menu {
    display: none !important;
}

.notification {
    height: 55px;
    width: 55px;
    background: transparent;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification.si {
    background: red;
}

.notification img {
    height: 50px !important;
    width: 50px !important;
    cursor: pointer;
}

.unread {
    color: var(--dorado) !important;
    position: relative;
}

.unread:before {
    position: absolute;
    content: '';
    background: red;
    height: 5px;
    width: 5px;
    border-radius: 100%;
    left: 7px;
    top: 14px;
}

.panel-header {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100vw - 80px);
    height: 60px;
    transition: width .3s ease;
}

.content {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100vw - 80px);
    height: calc(100vh - 60px);
    transition: width .3s ease;
}

.menu-dashboard.open~.content,
.menu-dashboard.open~.panel-header {
    width: calc(100vw - 250px);
}

.dia {
    width: 14.2% !important;
}

.dia-body {
    height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
}

/********************** Estilos de cambio de foto ******************/
#sub-img-perfil,
#sub-img {
    height: 300px;
    width: 300px;
    border: 1px solid var(--gray20);
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type=file] {
    display: none;
}

.upload-demo .upload-demo-wrap,
.upload-demo .upload-result,
.upload-demo.ready .upload-msg {
    display: none;
}

.upload-demo.ready .upload-demo-wrap {
    display: block;
}

.upload-demo.ready .upload-result {
    display: inline-block;
}

.upload-demo-wrap {
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

/***** NAV PILL  *****/
.nav-item-tab {
    background: var(--gray20);
    border-radius: 10px 10px 0px 0px;
    margin-right: 2px;
    padding: 10px 10px 5px 10px;
}

.nav-item-tab:hover {
    background: var(--gold);
}

/* Cambiar el color del nav-item-tab si contiene un hijo con la clase .select */
.nav-item-tab:has(.nav-link-tab.select) {
    background: var(--gold);
}

.nav-link-tab {
    text-decoration: none;
    color: var(--white);
}

.nav-link-tab.select {
    color: var(--gray20);
}


/***** estilos calendario *****/

#calendar table {
    border: 1px solid var(--gray20);
}

#calendar thead tr th {
    border: 1px solid var(--gray20);
    background: var(--gray20)
}

#calendar thead tr th a {
    text-decoration: none;
    color: var(--white);
}

.fc-daygrid-day-number {
    color: var(--blue);
    text-decoration: none;
}

.fc-day-today {
    background: var(--gold) !important;
}

.fc-event {
    cursor: pointer;
    transition: transform 0.4s;
}

.fc-event:hover {
    transform: scale(0.9);
}

/***** FIN estilos calendario *****/

/***** RESPONSIVE *****/

/***** TABLET *****/
@media (max-width: 768px) {

    * {
        font-size: 15px;
    }

    .type-of-person img {
        width: 10rem !important;
        height: 10rem !important;
    }
}

/* CELULAR */
@media (max-width: 576px) {

    * {
        font-size: 13px;
    }

    #book-stant {
        display: none;
    }

    #ImgUser {
        display: none !important;
    }

    #mesa-img,
    #mesa-body {
        text-align: center !important;
    }

    .type-of-person img {
        width: 7rem !important;
        height: 7rem !important;
    }

    .div-img,
    .img-donacion {
        display: none !important;
    }

    .nav-item-tab a {
        font-size: 11px !important;

    }

    .nav-item-tab {

        margin-right: 1px !important;
        padding: 5px 5px 2.5px 5px;
    }

    .main {
        margin-top: 7rem !important;
    }

    .card-donacion {
        height: 13rem !important;
    }
}


/* Cambiar color del círculo del cluster */
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: var(--gold) !important;
    border: 2px solid var(--gold) !important;
    color: var(--gray20) !important;
    box-shadow: none !important;
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: RGBA(255, 189, 46, 0.5) !important;
}

/** button blog**/
#show-more hr {
    margin-bottom: 10px;
}

.linea-gris {
    position: relative;
}

.linea-gris::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: transparent;
    /* Inicialmente transparente */
    z-index: 10;
}

/* Cambiar el color de la línea cuando el collapse está visible */
.linea-gris:has(#show-more.collapse.show)::before {
    background-color: var(--gray20) !important;
}

#show-more {
    position: relative;
    z-index: 11;
    /* Asegura que el div esté encima de la línea */
}

.btn-soporte {
    outline: none !important;
    border: 1px solid var(--gray20) !important;
    border-radius: 15px;
    background-color: var(--gray20) !important;
    color: var(--gold) !important;
}

.btn-soporte:hover,
.btn-soporte:active {
    outline: none !important;
    border: 1px solid var(--gold) !important;
    border-radius: 15px !important;
    background-color: var(--gold) !important;
    color: var(--gray20) !important;
}


/** RADIO BUTTONS  & CHECBOX CUSTOMS**/
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    display: none;
}

.radio label,
.checkbox label {
    color: var(--gray20);
    padding: 5px 15px 5px 61px;
    display: inline-block;
    position: relative;
    font-size: 1.5em;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: 100%;
}

.radio label:hover,
.checkbox label:hover {
    background-color: RGBA(54, 69, 79, .2);
}

.radio label:before,
.checkbox label:before {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background: none;
    border: 3px solid var(--gray20);
    border-radius: 50%;
    position: absolute;
    left: 17px;
    top: 6px;
}

.checkbox label::before {
    border-radius: 5px;
}

.radio input[type="radio"]:checked+label,
.checkbox input[type="checkbox"]:checked+label {
    padding: 5px 15px;
    background: var(--gray20);
    border-radius: 2px;
    color: var(--white);
    border: 2px solid var(--gray20);
    border-radius: 5px;
}

.radio input[type="radio"]:checked+label:before,
.checkbox input[type="checkbox"]:checked+label:before {
    display: none;
}