:root {
  --color-primary: #0025FF;
  --color-secondary: #FFFFFF;
  --color-primary-hover: #FFFFFF;
  --color-secondary-hover: #0025FF;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 10px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

/* Global Styles */
html,
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #000;
  font-family: "Arial", Arial, Helvetica, sans-serif;
}

div.box-error {
  background: black;
  border-radius: 2em;
  min-height: 500px;
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
}

.container-fluid {
  flex: 1;
}

.loading-page {
  align-items: center;
  background: #000;
  display: flex;
  justify-content: center;
  min-height: 100vh !important;
  position: fixed;
  width: 100%;
  z-index: 5000;
}

/* Button Styles */
button.btn {
  border-radius: 30px;
  min-height: 44px;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
  border: 0 !important;
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: scale(1.1);
  transition: .3s ease-in-out;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:active {
  background-color: var(--color-secondary) !important;
  color: var(--color-primary) !important;
  border: 0 !important;
}

/**** INPUT CHECKED ****/

.form-check-input:checked {
  background-color: #0025ff;
  border-color: #0025ff;
}


/* Background Colors */
.bg-primary {
  background-color: var(--color-primary) !important;
}

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

.bg-black {
  background: #000;
}
.bg-black-opacity{
  background-color: rgb(33 37 41 / 45%) !important;
}

.bg-black-opacity-dark{
  background-color: rgb(10 10 10 / 85%) !important;
}

.bg-none{
  background: transparent !important;
}

.bg-light-blue{
  background-color: #61A1FF !important;
}
.bg-mid-blue{
  background-color: #005FFF !important;
}

.color-light-blue{
  color: #61A1FF !important;
}
.color-mid-blue{
  color: #005FFF !important;
}

.bg-light-blue{
  background-color: #61A1FF !important;
}

.bg-mid-blue{
  background-color: #005FFF !important;
}

.bg-merch{
  background-color: #275EF6 !important;
}
.bg-comida{
  background-color: #030349 !important;
}
.bg-musica{
  background-color: black !important;
}

.bg-electrical-blue, .bg-experiencia{
  background-color: #0025FF !important;
}
.bg-globe-blue, .bg-deportes{
  background-color: #0E0E96 !important;
}
.bg-dark-blue{
  background-color: #03034D !important;
}

.bg-globe-red{
  background-color: #FF1400 !important;
}

.color-black {
  color: #000;
}

.color-primary {
  color: var(--color-primary);
}

.color-gray {
  color: #828282 !important;
}
.color-red {
  color: #FF1400 !important;
}

.text-danger {
  color: #FF1400 !important;
}

.shadow-card{
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
/***** MEDIDAS DE MAXIMOS Y MINIMOS ****/

.max-width-25 {
  max-width: 25%;
}

.max-width-35 {
  max-width: 35%;
}

.max-width-45 {
  max-width: 45%;
}

.max-width-55 {
  max-width: 55%;
}

.max-width-65 {
  max-width: 65%;
}

.max-width-75 {
  max-width: 75%;
}

.max-width-85 {
  max-width: 85%;
}

.max-height-25 {
  max-height: 25vh;
}

.max-height-35 {
  max-height: 35vh;
}

.max-height-45 {
  max-height: 45vh;
}

.max-height-55 {
  max-height: 55vh;
}

.max-height-65 {
  max-height: 65vh;
}

.max-height-75 {
  max-height: 75vh;
}

.max-height-85 {
  max-height: 85vh;
}

.padding-percentage-3 {
  padding-right: 3%;
  padding-left: 3%;
}

.font-x2.pepsi-regular {
  letter-spacing: 1.2px;
}

.font-x2 {
  font-size: 1.2rem;
  letter-spacing: 1.2px;
}

.font-x3 {
  font-size: 1.4rem;
}

.font-x4 {
  font-size: 1.6rem;
}

/***** TOAST NOTIFY ****/

@keyframes slideUpAndExpand {
  0% {
    transform: translateY(100%) scaleX(0);
    opacity: 0;
  }

  50% {
    transform: translateY(-10%) scaleX(1);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scaleX(1);
  }
}

@keyframes pulseBtn {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 255, 0.7);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(0, 0, 255, 0.5);
  }

  100% {
    box-shadow: 0 0 0 rgba(0, 0, 255, 0);
  }
}

#notifyContainer.toast {
  animation: slideUpAndExpand 1s ease forwards;
  bottom: 4%;
  position: fixed;
  right: 1%;
  border-radius: 10px;
  background: black;
  border: 1px solid;
  transform: translateX(-50%);
  /* Ajustar para centrar */
  z-index: 200000;
  /* Asegúrate de que esté por encima de otros elementos */
  box-shadow: rgb(0 0 0 / 60%) 0px 20px 25px -5px, rgb(0 0 0 / 4%) 0px 10px 10px -5px;
}

button.btn-notify,
button.btn-modal-close {
  background: #0025ff;
  border-radius: 50%;
  position: absolute;
  right: 2%;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 0;
}

button.btn-notify {
  animation: pulseBtn 1.5s infinite;
}


#notifyContainer .toast-header {
  background-color: black;
  /* Color de fondo negro */
  color: white;
  /* Texto blanco */
  border: 0;
  padding: .75rem 2rem;
  border-radius: 10px 10px 0 0;
}

#notifyContainer .toast-body {
  background-color: black;
  /* Color de fondo negro */
  color: white;
  /* Texto blanco */
  border: 0 !important;
  border-radius: 0 0px 10px 10px;
  padding: 0 2rem 1rem;
}




/*----- CURSORES -----*/

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}


/****** MEDIA QUERIES *******/

/***** TELEFONOS Y TABLETAS PEQUEÑAS PORTRAIT *****/
@media only screen and (max-width: 1020px) and (orientation: portrait) {

  .sm-width-100{
    width: 100%;
    margin-bottom: 0.5em;
  }
  .mx-auto-mobile {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .mx-mobile-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .px-mobile-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-mobile-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;

  }

  .mx-mobile-1 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .my-mobile-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-mobile-1 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .mx-mobile-2 {
    margin-right: 2 !important;
    margin-left: 2 !important;
  }

  .my-mobile-2 {
    margin-top: 2 !important;
    margin-bottom: 2 !important;
  }

  .my-mobile-small {
    margin-bottom: .5rem !important;
    margin-top: .5rem !important;
  }

  .mt-mobile-4 {
    margin-top: 1.5rem !important;
  }

  .mb-mobile-4 {
    margin-bottom: 1.5rem !important;
  }

  .block-mobile {
    display: block !important;
  }

  .text-center-mobile {
    text-align: center !important;
  }

  .w-100-mobile {
    width: 100% !important;
  }

  .column-reverse-mobile {
    flex-direction: column-reverse !important;
  }

  .margin-y-small {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
  }

  .padding-y-small {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
  }

  .margin-left-none {
    margin-left: 0 !important;
  }

  .w-15{
    width: 15% !important
  }
  .w-35{
    width: 35% !important
  }
  .w-65{
    width: 65% !important
  }
  .w-85{
    width: 85% !important
  }
}

/****** SOLO TELEFONOS ****/
@media only screen and (max-width: 480px) {}

/***** TABLETS PEQUEÑAS ****/
@media only screen and (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {}

/***** TABLETS PEQUEÑAS LANDSCAPE ****/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

/**** CASO PARTICULAR IPAD PRO VERTICAL *****/
@media only screen and (min-width: 1020px) and (max-width: 1024px) and (orientation: portrait) {}

/***** TABLETS GRANDES LANDSCAPE ****/
@media only screen and (min-width: 1025px) and (max-width: 1280px) and (orientation: landscape) {
  
  .margin-y-small {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
  }

  .margin-left-none {
    margin-left: 0 !important;
  }
}

/***** MEDIA QUERIES ADICIONALES *****/
@media only screen and (min-width: 1900px) {

  .max-width-25 {
    max-width: 15%;
  }

  .max-width-35 {
    max-width: 25%;
  }

  .max-width-45 {
    max-width: 35%;
  }

  .max-width-55 {
    max-width: 45%;
  }

  .max-width-65 {
    max-width: 55%;
  }

  .max-width-75 {
    max-width: 65%;
  }

  .max-width-85 {
    max-width: 75%;
  }
}