/* Pantalla de carga */
.cargador {
  position: absolute;
  border: 0;
  top: 5%;
  left: 5%;
  color: var(--coltextow);
  background-color: var(--colfondosemi);
  backdrop-filter: blur(5px);
  width: 90%;
  height: 90%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
  align-content: center;
  border-radius: var(--curvas);
  margin: 0;
  padding: var(--curvas);
  transition: all var(--veloanim);
  display: flex;
  transform:  scale(0);
  opacity: 0;
  visibility: hidden;
  flex-wrap: wrap;
  z-index: 1000;
} 
.cargador::before {
  content: 'CARGANDO...';
  animation: animloader 2s linear infinite;
}

.cargador > h1 {
  margin: 40px;  
}

@keyframes animloader {
  0% {
    transform: scale(0.85);
    /*opacity: 1;*/
  }
  50% {
    transform: scale(1);
    /*opacity: 0;*/
  }
  100% {
    transform: scale(0.85);
    /*opacity: 0;*/
  }
}


/* *** *** LOADER ANIMATIONS *** *** */
/* stolen from https://css-loaders.com/dots-bars/
   My favs: 7, 9, continuo7, 5 (aunque reescalarlo...)
   */
/* HTML: <div class="loader9"></div> */
.fs {
  background: rgba(0, 0, 0, 0.85);
  z-index: 555;
  position: absolute;
  width:  90%;
  height: 90%;
  border:   0;
  margin:   5%;
  padding:  0;
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: cover;
  display: None; 
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
  align-content: center;
  border-radius: 20px;
}
.loader6 {
  --c:#000;
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color: #0000;
  overflow: hidden;
  text-shadow: 0 0 var(--c),11ch 0 var(--c);
  animation: l6 2s infinite linear;
}
.loader6:before {
  content:"Cargando..."
}
@keyframes l6 {to{text-shadow:-11ch 0 var(--c),0ch 0 var(--c)}}

/* HTML: <div class="loader"></div> */
.loader48 {
  height: 15px;
  aspect-ratio: 5;
  -webkit-mask: linear-gradient(90deg,#0000 ,#000 20% 80%,#0000);
  background: radial-gradient(closest-side at 37.5% 50%,#000 94%,#0000) 0/calc(80%/3) 100%;
  animation: l48 .75s infinite linear;
  display: flex; 
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
  align-content: center;
}
@keyframes l48 {
  100% {background-position: 36.36%}
}


/* HTML: <div class="loader"></div> */
.loader29 {
  width: 9px;
  height: 9px;
  background: #000;
  color: #000;
  box-shadow: 
    -18px -9px,0 -9px,18px -9px,
    -18px  0  ,       18px  0  ,
    -18px  9px,0  9px,18px  9px,
    -18px 18px,0 18px,18px 18px;
  animation: l29 2s infinite;
}

@keyframes l29 {
  10% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px #0000,0  9px,18px  9px #0000,
     -18px 18px,0 18px,18px 18px;
  }
  20% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px #0000,
     -18px 18px #0000,0 18px,18px 18px;
  }
  30% {
   box-shadow: 
     -18px -9px,0 -9px #0000,18px -9px,
     -18px  0   #0000,       18px  0  ,
     -18px  9px,0  9px #0000,18px  9px,
     -18px 18px #0000,0 18px,18px 18px #0000;
  }
  40% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  #0000,       18px  0 #0000,
     -18px  9px,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px;
  }
  50% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  #0000,
     -18px  9px #0000,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px;
  }
  60% {
   box-shadow: 
     -18px -9px,0 -9px #0000,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px #0000,0  9px,18px  9px,
     -18px 18px #0000,0 18px,18px 18px;
  }
  70% {
   box-shadow: 
     -18px -9px,0 -9px #0000,18px -9px #0000,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px,
     -18px 18px #0000,0 18px,18px 18px;
  }
  80% {
   box-shadow: 
     -18px -9px #0000,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px #0000;
  }
  90% {
   box-shadow: 
     -18px -9px #0000,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px #0000,18px  9px,
     -18px 18px,0 18px,18px 18px #0000;
  }
}


/* HTML: <div class="loader"></div> */
.loader7{
  width: 40px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#fff 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  background-size: 8px 50%;
  animation: l7-0 1s infinite;
  position: relative;
  overflow: hidden;
}
.loader7:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  top: calc(50% - 4px);
  left: -8px;
  animation: inherit;
  animation-name: l7-1;
}

@keyframes l7-0 {
 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 30%, 8px 30%}
}

@keyframes l7-1 {
 20%  {left:0px}
 40%  {left:calc(50%  - 4px)}
 60%  {left:calc(100% - 8px)}
 80%,
 100% {left:100%}
}

/* HTML: <div class="loader"></div> */
.loader19 {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  color: #854f1d;
  background: radial-gradient(farthest-side, currentColor calc(100% - 6px),#0000 calc(100% - 5px) 0);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px));
  border-radius: 50%;
  animation: l19 2s infinite linear;
}
.loader19::before,
.loader19::after {    
  content: "";
  grid-area: 1/1;
  background:
    linear-gradient(currentColor 0 0) center,
    linear-gradient(currentColor 0 0) center;
  background-size: 100% 10px,10px 100%;
  background-repeat: no-repeat;
}
.loader19::after {
   transform: rotate(45deg);
}

@keyframes l19 { 
  100%{transform: rotate(1turn)}
}


/* HTML: <div class="loader"></div> */
.loadercontinuo7 {
  width: 120px;
  height: 20px;
  -webkit-mask: linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
  background:
   linear-gradient(#000 0 0) left -25% top 0 /20% 100% no-repeat
   #ddd;
  animation: lc7 1s infinite steps(6);
}
@keyframes lc7 {
    100% {background-position: right -25% top 0}
}


/* HTML: <div class="loader"></div> */
.loader2 {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 0 #0004;
  animation: l2 1.5s infinite linear;
  position: relative;
}
.loader2:before,
.loader2:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 #0004;
  animation: inherit;
  animation-delay: -0.5s;
}
.loader2:after {
  animation-delay: -1s;
}
@keyframes l2 {
    100% {box-shadow: 0 0 0 40px #0000}
}


/* HTML: <div class="loader"></div> */
.loader5 {
  width: 80px;
  height: 40px;
  border-radius: 100px 100px 0 0;
  position: relative;
  overflow: hidden;
}
.loader5:before {
  content: "";
  position: absolute;
  inset: 0 0 -100%;
  background: 
    radial-gradient(farthest-side,#ffd738 80%,#0000) left 70% top    20%/15px 15px,
    radial-gradient(farthest-side,#020308 92%,#0000) left 65% bottom 19%/12px 12px,
    radial-gradient(farthest-side,#ecfefe 92%,#0000) left 70% bottom 20%/15px 15px,
    linear-gradient(#9eddfe 50%,#020308 0);
  background-repeat: no-repeat;
  animation: l5 2s infinite;
}
@keyframes l5 {
  0%,20%   {transform: rotate(0)}
  40%,60%  {transform: rotate(.5turn)}
  80%,100% {transform: rotate(1turn)}
}


/* HTML: <div class="loader"></div> */
.loader9 {
  display: inline-flex;
  gap: 10px;
}
.loader9:before,
.loader9:after {
  content: "";
  height: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    linear-gradient(#222 0 0) top/100% 0% no-repeat,
    radial-gradient(farthest-side,#000 95%,#0000) 50%/8px 8px no-repeat
    #fff;
  animation: l9 4s infinite ease-in;
}
@keyframes l9 {
  0%  {background-size:100% 0%,8px 8px;background-position:top, 50% 50%}
  80% {background-size:100% 70%,8px 8px;background-position:top, 50% 70%}
  84%,
  100%{background-size:100% 0%,8px 8px;background-position:top, 50% 50%}
}


/* HTML: <div class="loader"></div>
  PERFECT FOR SEARCHING  */
.loader4 {
  width: 180px;
  height: 22px;
  box-shadow: 0 3px 0 #fff;
  display: grid;
}
.loader4:before,
.loader4:after{
  content: "";
  grid-area: 1/1;
  background: radial-gradient(circle closest-side,var(--c,red) 92%,#0000) 0 0/calc(100%/4) 100%;
  animation: l4 1s infinite linear;
}
.loader4:after{
  --c: #000; 
  background-color: #fff;
  box-shadow: 0 -2px 0 0 #fff;
  clip-path: inset(-2px calc(50% - 10px));
}
@keyframes l4 {
    100% {background-position: calc(100%/3) 0}
}