:root {


  --gris-h: 0; --gris-s: 7%; --gris-l: 50%;
  --amarillo-h: 52;--amarillo-s: 95%;--amarillo-l: 63%;
  --marron-h: 30;--marron-s: 45%;--marron-l: 52%;
  --marronAnaranjado-h: 29;--marronAnaranjado-s: 76%;--marronAnaranjado-l: 52%;
  --naranja-h: 29;--naranja-s: 98%;--naranja-l: 52%;
  --cyan-h: 187;--cyan-s: 79%;--cyan-l: 40%;


  --gris: var(--gris-h), var(--gris-s), var(--gris-l);
  --gris-d5: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 5%);
  --gris-d10: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 10%);
  --gris-d15: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 15%);
  --gris-d20: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 20%);
  --gris-d25: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 25%);
  --gris-d30: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 30%);
  --gris-d35: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 35%);
  --gris-d40: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 40%);
  --gris-d45: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 45%);
  --gris-d50: var(--gris-h), var(--gris-s), calc(var(--gris-l) - 50%);
  --gris-l5: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 5%);
  --gris-l10: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 10%);
  --gris-l15: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 15%);
  --gris-l20: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 20%);
  --gris-l25: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 25%);
  --gris-l30: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 30%);
  --gris-l35: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 35%);
  --gris-l40: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 40%);
  --gris-l45: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 45%);
  --gris-l50: var(--gris-h), var(--gris-s), calc(var(--gris-l) + 50%);

  --amarillo: var(--amarillo-h), var(--amarillo-s), var(--amarillo-l);
  --amarillo-d5: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 5%);
  --amarillo-d10: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 10%);
  --amarillo-d15: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 15%);
  --amarillo-d20: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 20%);
  --amarillo-d25: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 25%);
  --amarillo-d30: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 30%);
  --amarillo-d35: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 35%);
  --amarillo-d40: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 40%);
  --amarillo-d45: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 45%);
  --amarillo-d50: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) - 50%);
  --amarillo-l5: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 5%);
  --amarillo-l10: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 10%);
  --amarillo-l15: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 15%);
  --amarillo-l20: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 20%);
  --amarillo-l25: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 25%);
  --amarillo-l30: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 30%);
  --amarillo-l35: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 35%);
  --amarillo-l40: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 40%);
  --amarillo-l45: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 45%);
  --amarillo-l50: var(--amarillo-h), var(--amarillo-s), calc(var(--amarillo-l) + 50%);
  
  --marron: var(--marron-h), var(--marron-s), var(--marron-l);
  --marron-d5: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 5%);
  --marron-d10: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 10%);
  --marron-d15: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 15%);
  --marron-d20: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 20%);
  --marron-d25: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 25%);
  --marron-d30: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 30%);
  --marron-d35: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 35%);
  --marron-d40: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 40%);
  --marron-d45: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 45%);
  --marron-d50: var(--marron-h), var(--marron-s), calc(var(--marron-l) - 50%);
  --marron-l5: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 5%);
  --marron-l10: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 10%);
  --marron-l15: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 15%);
  --marron-l20: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 20%);
  --marron-l25: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 25%);
  --marron-l30: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 30%);
  --marron-l35: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 35%);
  --marron-l40: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 40%);
  --marron-l45: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 45%);
  --marron-l50: var(--marron-h), var(--marron-s), calc(var(--marron-l) + 50%);

  --marronAnaranjado: var(--marronAnaranjado-h), var(--marronAnaranjado-s), var(--marronAnaranjado-l);
  --marronAnaranjado-d5: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 5%);
  --marronAnaranjado-d10: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 10%);
  --marronAnaranjado-d15: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 15%);
  --marronAnaranjado-d20: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 20%);
  --marronAnaranjado-d25: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 25%);
  --marronAnaranjado-d30: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 30%);
  --marronAnaranjado-d35: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 35%);
  --marronAnaranjado-d40: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 40%);
  --marronAnaranjado-d45: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 45%);
  --marronAnaranjado-d50: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) - 50%);
  --marronAnaranjado-l5: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 5%);
  --marronAnaranjado-l10: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 10%);
  --marronAnaranjado-l15: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 15%);
  --marronAnaranjado-l20: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 20%);
  --marronAnaranjado-l25: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 25%);
  --marronAnaranjado-l30: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 30%);
  --marronAnaranjado-l35: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 35%);
  --marronAnaranjado-l40: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 40%);
  --marronAnaranjado-l45: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 45%);
  --marronAnaranjado-l50: var(--marronAnaranjado-h), var(--marronAnaranjado-s), calc(var(--marronAnaranjado-l) + 50%);

  --naranja: var(--naranja-h), var(--naranja-s), var(--naranja-l);
  --naranja-d5: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 5%);
  --naranja-d10: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 10%);
  --naranja-d15: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 15%);
  --naranja-d20: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 20%);
  --naranja-d25: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 25%);
  --naranja-d30: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 30%);
  --naranja-d35: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 35%);
  --naranja-d40: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 40%);
  --naranja-d45: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 45%);
  --naranja-d50: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) - 50%);
  --naranja-l5: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 5%);
  --naranja-l10: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 10%);
  --naranja-l15: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 15%);
  --naranja-l20: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 20%);
  --naranja-l25: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 25%);
  --naranja-l30: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 30%);
  --naranja-l35: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 35%);
  --naranja-l40: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 40%);
  --naranja-l45: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 45%);
  --naranja-l50: var(--naranja-h), var(--naranja-s), calc(var(--naranja-l) + 50%);

  --cyan: var(--cyan-h), var(--cyan-s), var(--cyan-l);
  --cyan-d5: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 5%);
  --cyan-d10: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 10%);
  --cyan-d15: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 15%);
  --cyan-d20: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 20%);
  --cyan-d25: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 25%);
  --cyan-d30: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 30%);
  --cyan-d35: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 35%);
  --cyan-d40: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 40%);
  --cyan-d45: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 45%);
  --cyan-d50: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) - 50%);
  --cyan-l5: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 5%);
  --cyan-l10: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 10%);
  --cyan-l15: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 15%);
  --cyan-l20: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 20%);
  --cyan-l25: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 25%);
  --cyan-l30: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 30%);
  --cyan-l35: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 35%);
  --cyan-l40: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 40%);
  --cyan-l45: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 45%);
  --cyan-l50: var(--cyan-h), var(--cyan-s), calc(var(--cyan-l) + 50%);

}


#main-container{
  max-width: 1700px;
  background: hsl(var(--gris-l50)) ;
}

.caja{
  box-shadow: 0px 1px 4px 0px hsl(var(--gris-l25));
  padding: 10px 5px !important;
  border-radius: 5px;
  margin-bottom: 10px;
  background: hsl(var(--gris-l50));
  position: relative !important;
}


.bg-gris{
  background: hsl(var(--gris-l40)) ;
}

body{
  background-color: hsl(var(--gris-l50));
  overflow-x: hidden !important;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.visibility-hidden{
  visibility: hidden;
}

.sin-azul{
  outline: none !important;
  box-shadow: none !important;
}

button.btn-tipo1 {
  background-color: hsl(var(--amarillo)) !important;
  color: black !important;
  padding: 10px;
  border-radius: 50px;
  border: none !important;
  font-weight: bold;
}

button.btn-tipo1:hover {
  background-color: hsl(var(--amarillo-d15)) !important;
}

button.btn-tipo1:active {
  background-color: hsl(var(--amarillo-d20)) !important;
}

button.btn-tipo2 {
  background-color: hsl(var(--cyan)) !important;
  color: white !important;
  padding: 10px;
  border-radius: 50px;
  border: none !important;
  font-weight: bold;
}

button.btn-tipo2:hover {
  background-color: hsl(var(--cyan-d25)) !important;
}

button.btn-tipo2:active {
  background-color: hsl(var(--cyan-d50)) !important;
}

button.btn-tipo3 {
  background-color: hsl(var(--marron)) !important;
  color: white !important;
  padding: 10px;
  border-radius: 10px;
  border: none !important;
  font-weight: 500;
}

button.btn-tipo3:hover {
  background-color: hsl(var(--marron-d5)) !important;
}

button.btn-tipo3:active {
  background-color: hsl(var(--marron-d15)) !important;
}


h1{
  font-size: 24pt;
  color: hsl(var(--cyan-d5));
}

.mensajeError{
  color: rgb(116, 35, 35)
}

.cursor-pointer{
  cursor: pointer  !important;
}

.smooth{
  transition: all 0.1s ease-in-out;
}