:root {
    --color-1: #494949;
    --color-1-1: #606060;
    --color-2: #D5D6D2;
    --color-3: #FFFFFF;
    --color-4: #3A5199;
    --color-4-1: #e8eeff;
    --color-4-2: #b0b9d6;
    --verde-1: #229739;
    --verde-2: #77DD77;
    --verde-3: #BDECB6;
    --rojo-1: #f44336;
    --rojo-2: #ff8a80;
    --rojo-3: #fae9e9;
    --gris-3: #f6f6f6;
}

* {
    font-family: Vegur, 'PT Sans', Verdana, sans-serif;
    font-size: 1.6rem;
    margin: 0;
}

*, *::before, *::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; /* 1rem = 10px */
    height: 100vh;
    margin: 0;
}

body {
  background-attachment: fixed;
  /* background-image: linear-gradient(to top, var(--color-4) 0%, #fff 50%); */
  letter-spacing: .5px;
  margin: 0;
  min-height: 100vh;
}

a, input {
    text-decoration: none;
}

button, input, fieldset, select, textarea {
    background-color: transparent;
    border: none;
    outline: none;
}

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.switch-container {
    display: flex;
    align-items: center;
    gap: 1rem;

    .switch-label {

        color: var(--color-2);
        font-style: italic;

    }

    .switch-input-lbl {
        display: inline-block;
        width: 65px;
        height: 33px;
        background: #d0d0d0;
        border-radius: 100px;
        cursor: pointer;
        position: relative;
        transition: .2s;
    }
    
    .switch-input-lbl::after {
        content: '';
        display: block;
        width: 25px;
        height: 25px;
        background: #eee;
        border-radius: 100px;
        position: absolute;
        top: 4px;
        left: 4px;
        transition: .2s;
    }
    
    .switch-input:checked + .switch-input-lbl::after {
        left: 36px;
    }
    
    .switch-input:checked + .switch-input-lbl {
        background: var(--color-4);
    }
    
    .switch-input {
        display: none;
    }

}

.switch-container.small {

    .switch-input-lbl {
        width: 4.5rem;
        height: 2.5rem;
    }

    .switch-input-lbl::after {
        width: 1.7rem;
        height: 1.7rem;
        left: .4rem;
    }

    .switch-input:checked + .switch-input-lbl::after {
        left: 2.5rem;
    }
}

.ct-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.input-icon {
    position: relative;
    
    .icon {
        align-items: center;
        cursor: pointer;
        justify-content: center;
        opacity: .4;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 2rem;

        img {
            pointer-events: none;
            width: 2rem;
        }
    }
    .icon:hover {
        opacity: .6;
    }
    
    input {
        padding-right: 1rem;
    }
    
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number]{ -moz-appearance: textfield; }
}

.modal {
    display: none;
    align-items: center;
    background-color: #4b4b4bd4;
    flex-direction: column;
    gap: 1rem;
    justify-content: start;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;

    .contenido-modal {

        display: flex;
        flex-direction: column;
        gap: 2rem;
        height: 100vh;
        width: 100%;

        .btn-cerrar-modal {
            color: white;
            cursor: pointer;
            font-size: 4rem;
            margin-right: 2rem;
            text-align: right;
        }

        .main-modal {
            margin: 0 auto;
            max-width: 95%;
            overflow: auto;
        }
        
    }
}


#loader {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;

    .rueda {
        border: 8px solid var(--color-1-1);
        border-radius: 50%;
        border-left-color: transparent;
        color: var(--color-1-1);
        height: 6rem;
        opacity: .2;
        width: 6rem;
        animation: giro 1.5s linear infinite;
    }
    
    /* HTML:    
        <div id="loader">
              <div class="rueda"></div>
        </div>
    */
}
    
@keyframes giro {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}