:root{
    /*--color1: #c90b73; #0bc9b5ff; #569bbc;*/
    --color1: #106e85;
    --colorlink: #43daff;
    --color2: #2f2f2f;
    --color3: #F4F4F5;
    --colorWindow: #3b82f680;
    --colorBg: #242424;
    --colorSoft: #F4F4F5;
    --colorTprt: #2b2a2c4d;
    --txt1: white;
    --txt2: #dbdbdb;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select:none;
    font-family: 'system-ui', 'Roboto';
}
*::-webkit-scrollbar{
    background: transparent;
    width: 8px;
    height: 8px;
}*::-webkit-scrollbar-thumb {
    background: var(--color1);
    opacity: 0.5;
    max-height: 100px;
}
a{
    color: var(--colorlink);
}
html, body {
    overscroll-behavior-y: contain; /* Bloquea el "pull-to-refresh"  para evitar el refresh en mobil*/
}

/*MODAL*/
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #ffffffb5;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    color: var(--colorBg);
    max-width: 90vw;
    width: fit-content;
    height: fit-content;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
    z-index: 9000;
    backdrop-filter: blur(6px);
}
.question{
    margin-bottom: 10px;
}
button{
    background: var(--color3);
    padding: 6px 15px;
    font-weight: 400;
    color: var(--color2);
    border: 1px solid var(--txt1);
    border-radius: 4px;
    font-size: 0.8rem;
}
button.prim{
    background: var(--color1);
    color: var(--txt1);
}
button.sec{
    background: transparent;
    border: 1px solid var(--color1);
    color: var(--color1);
}
/*loader*/
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #111;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  border: 5px solid var(--color3);
  border-top: 5px solid var(--color1);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}