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

html{
    scroll-behavior: smooth;
}

body{
    max-width: 100vw;
    height: 100vh;
    scroll-behavior: smooth;
    
}

main{
    width: 100%;
    height: 100%;
}

.iconsAdmin{
  /* configuracion de estilos de los iconos administrativos */
  width: 22px;
  height: 22px;
}

.cardAdmin{
  transition: 1s ease all;
}

.cardAdmin:hover{
  box-shadow: 2px 2px 2px 2px rgba(128, 128, 128, 0.8);
}

.textLight{
  /* trabaja en conjunto con themaTextLight */
  color: white;
}

@font-face{
  font-family: "modelo1";
  src: url("/fonts/Dream MMA.ttf");
}

@font-face {
  font-family: "modelo2";
  src: url("/fonts/Bogista.ttf");
}

@font-face {
  font-family: "italica";
  src: url("/fonts/Roboto-Italic.ttf");
}

@font-face {
  font-family: "Cream Cake";
  src: url("/fonts/Cream Cake.otf");
}

/* -------------------------------- */
.text-bliss{
  color: #6f42c1;
}

.no-salto {
    white-space: nowrap; /* Evita el salto de línea */
}

.cursor-pointer{
  cursor: pointer;
}

.no-select{
  user-select: none;
}

.close{
  display: none;
}

/* --------------------------------------- */
/* Toast Solido y sin transparencia. */

#toast-container > div {
    opacity: 1 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    box-shadow: 0 0 12px #999;
}

#toast-container > :hover {
    box-shadow: 0 0 12px #000;
    opacity: 1 !important;
    cursor: pointer;
}
/* ---------------------------------------- */

.glow-on-disabled {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    background: #8f4cb3;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 6px;
    pointer-events: none; /* Desactiva cualquier interacción con el botón */
    opacity: 0.65; /* Baja la opacidad para que parezca desactivado */
    cursor: not-allowed; /* Cambia el cursor a "no permitido" */
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    background: #8f4cb3;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 6px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 6px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    background: #8f4cb3;
    left: 0;
    top: 0;
    border-radius: 6px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* ----------- fin de spinner home ...............................*/

/* HTML: <div class="loaderText"></div> */
.loaderText {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 24px;
  color: #ffffff00;
  background: linear-gradient(90deg, #9200ff calc(50% + 0.5ch),#dfdfdf 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: l7 2s infinite steps(11);
}
.loaderText:before {
  content:"Cargando ..."
}
@keyframes l7 {to{background-position: left}}

/* ---------------------find loaderText -------------------------------- */

.heartJump {
    animation: jump 1s ease;
}

@keyframes jump {
    0% {
        transform: translateY(0); /* Posición inicial */
    }
    50% {
        transform: translateY(-20px); /* Sube 20px */
    }
    100% {
        transform: translateY(0); /* Vuelve a la posición inicial */
    }
}


.spanTextArticle{
  font-family: "Cream Cake";
  font-size: 24px;
  color: beige;
}

.iconEfect .spanTextArticle{
  font-family: "Cream Cake";
  font-size: 26px;
  color: white;
  transition: 1s all ease;
}

.iconEfect .iconDepart{
  border: 1px ridge white;
  transform: rotate(0deg);
  transition: 1.5s all ease;
  user-select: none;
}

.iconEfect:hover .iconDepart{
  /* border: 2px solid black; */
  transform: rotate(360deg);
}

.iconEfect:hover .spanTextArticle{
  color: black;
}

.borderView{
    border: 1px solid rgb(197, 197, 197);
}
    
.bordering{
    border: 2px dotted violet;
}

.rowWidth{
    width: 100%;
    margin: 0;
    
}

.overflow80{
    height: 90%;
    overflow-y: auto;
    border: none;
}

.auctionsMessages{
    z-index: 200;
    position: absolute;
    top: 65px;
    
}

.auctionsMessagesSon{
  width: 60%;
}

.successBannerFront{
    z-index: 200;
    position: absolute;
    top: 65px;
}

.successBannerSon{
    width: 60%;
}

.formTransp{
  background-color: rgba(15, 0, 0, 0.5);
  color: antiquewhite;
}
.rogelio{
    background-color: rgb(184, 55, 55);
}

.rogelioLight{
    background-color: rgb(196, 64, 64);
    color: antiquewhite;
}


/* estyle of the profiles */

.anchorRRSS{
    width: 40px;
}


.contentImgs{
    flex-wrap: wrap;
    max-width: 100%;
}

/* .prevImg{
    width: 100px;
    height: 80px;
    border: 1px solid rgb(90, 5, 5);
} */

.previewMedia{
  width: 120px;
  object-fit:cover;  
}

.previewImgGallery{
  width: 100%;
  object-fit:contain;
}

.preview{
    width: 100px;
    height: 80px;
    object-fit:contain;
}

.add_photo{
  transition: 0.5s background-color ease;
}

.add_photo:hover{
  outline: 2px dotted red;
  background-color: rgb(212, 78, 78);
}

.add_photo{
    cursor: pointer;
}

.inpFile, .inpFileUpdate, .inpFileImg, .inpFileDoc {
    display: none;
}

.inpAddPhoto, .inpAddSound, .subSound, .inpAddVideo, .subVideo{
    display: none;
}

#submitAddPhotoFirst, #submitAddPhotoLast {
    display: none;
}


.invisibleBtn{
    display: none;
}

.invisibleBtnEdit{
    display: none;
}

.invisibleBtnDelete{
    display: none;
}

.invisibleBtnActive{
    display: none;
}

.btnSearcherClass{
  height: 100% !important;
  width: 80px;
}

.viewCollection{
  justify-content: center !important;
}

/* ---- efecto de sobra en los buscadores */

.btnEFECT{
  box-shadow: none;
  transition: 0.5s ease box-shadow;
}

.btnEFECT:hover{
  box-shadow: 1px 2px 2px 1px white;
}

.content{
  display: flex;
}

/* este es el efecto pulse del icono de informacion de los modales info */
.info-icon{
  animation: pulse 3s infinite;
}

@keyframes pulse{
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}


.mainMail{
  cursor: pointer;
  border: 1px solid black
}

.mainMail:hover{
  cursor: pointer;
  color: blueviolet;
  border: 1px solid blueviolet;
}

.itemOption{
  cursor: pointer;
  transition: 0.5s;
}

.itemOption:hover{
  .linkOptions{
      text-decoration: 2px underline blueviolet;
  }
}

.linkOptions{
  cursor: pointer;
  text-decoration: none;
}

.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;

color: blueviolet;
}



.slick-prev{
  z-index: 20;
  left: 30px;
  opacity: 0.5;
}


.slick-next{
  z-index: 20;
  right: 40px;
  opacity: 0.5;
}

.slick-prev:before, .slick-next:before{
  /* Tamaño de icono para mover */
  font-size: 35px;
}

.elementPaginate{
  display: flex;
  justify-content: end;
  /* vista desktop */
}


/* 
a {
  color: #9200ff !important;
}

a:hover {
  color: #7b00cc !important;  Un poco más oscuro al pasar el mouse 
}
 */

.nav-link {
  color: #9200ff;
}

.nav-link.active {
  color: #ffffff; /* Color diferente para el estado activo */
  background-color: #9200ff; /* Fondo para el estado activo */
} 



.btnBlissenet{
  background-color: #9200ff;
  color: #ffffff;
}

.alert-bliss{
  background-color: rgb(239, 219, 255);
  color: #450279;
  border-left: 5px solid #450279;
}

/* end footer */


/* estilos del contenedor fixed no user  */
.containerFixedSinUser {
  display: flex;
  justify-content:  flex-end;
}

.fixedSinUser{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  border-radius: 5px;
 /*  background-color: rgba(255, 255, 255, 0.7); */
 /*  border: 1px solid white; */
  width: 200px;
  height: auto;
}


  @keyframes lightbul {
    0% {
      color: #dbb003;
    }
    50% {
      color: #161100;
    }
    100% {
      color: #dbb003;
    }
  }

  .lightbulbAnimation {
    animation: lightbul 3s infinite; /* Cambia 3s por la duración que prefieras */
  }


/*   #btnXSinUser:hover #bi-x-move {
    transform: rotate(180deg);
  } */

  #btnXSinUser #bi-x-move{
    transform: rotate(0deg);
    transition: 1s ease;
  }

  #btnXSinUser:hover #bi-x-move{
    transform: rotate(90deg);
  }

/*  Media queries */
@media screen and (min-width: 500px) and (max-width: 991px){
/* :::::: navi-simple Tablet :::::: */

  #navHead{
    padding: 5px 0px !important;
  }

  .navSon{
    /* este es el contenedor interno del nav padre */
    margin: 10px 0px !important;
    width: 100% !important;
  }

  .contentThemesSesion{
    width: 100% !important;
    margin: 0 !important;
  }
  
  .themes{
    /* este es el boton de los temas */
    margin: 0px !important;
  }

  .login{
    margin-right: 10px !important;
  }
   
  .contentSearchMain{
    margin: 10px 0px !important;
   
  } 

  .formSearch{
    width: 100% !important;
  }

  .contentSearch{
    width: 100% !important;
    border-radius: 5px !important;
    height: 100% !important;
  }

  .usernameMain{
    margin: 0px !important;
  }

  .publications{
    margin: 0 !Important;
  }

  .viewCollection{
    height: 100%;
    background-color: #fff5cb;
    justify-content: center !important;
  
  }

  .contentSelectPlaces{
    width: 100% !important;
  }

  .btnSearcherClass{
    height: 100% !important;
    width: 80px;
  }

  .content{
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  

  .elementPaginate{
    display: flex;
    justify-content: end;
    /* vista tablet */
  }
    
}
    

@media screen and (min-width: 290px) and (max-width: 499px){
/* :::::: navi-simple smarphone:::::: */
    #navHead{
        padding: 5px 0px !important;
    }

  .navSon{
    /* este es el contenedor interno del nav padre */
    margin: 10px 0px !important;
    width: 100% !important;
  }

  .contentThemesSesion{
    width: 100% !important;
    margin: 0 !important;
  }
  
  .themes{
    /* este es el boton de los temas */
    margin: 0px !important;
  }

  .login{
    margin-right: 10px !important;
  }

  .contentSearchMain{
    margin: 10px 0px !important;
  }

  .formSearch{
    width: 100% !important;
  }

  .contentSearch{
    width: 100% !important;
  }

  .usernameMain{
    margin: 0px !important;
  }

  .publications{
    margin: 0 !Important;
  }

  .viewCollection{
    height: 100%;
    background-color: #fff5cb;
    justify-content: center !important;
  
  }

  .contentSelectPlaces{
    width: 100% !important;
  }

  .btnSearcherClass{
    height: 100% !important;
    width: 80px;
  }

  .content{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .elementPaginate{
    display: flex;
    justify-content: center;
    /* vista movil */
  }

  .slick-prev{
    opacity: 0;
  }


  .slick-next{
    opacity: 0;
  }
    /* :::::::::::::::::: */

    
}

/* pagina de ejemplos de css geniales para botones y componente */
/* https://css-loaders.com/ */
/* https://prismic.io/blog/css-button-animations */