@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');



:root{
    
    --body-font: 'Plus Jakarta Sans', sans-serif;
    --most-bigger-font-size: 3rem;
    --biggest-font-size: 2.25rem;
    --bigger-font-size: 1.55rem;
    --big-font-size: 1.35rem;
    --medium-font-size: 1.25rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --title-font-size: .8rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    --smallest-font-size: .65rem;
    --border-size: 2px;

    --font-medium: 500;
    --font-semi-bold: 600;

    --z-tooltip: 10;
    --z-fixed: 100;


    --body-color: #f5f5f5;
    --table-selected: #2b55ff;  
    /*--body-color: #FAFBFF;*/
    --input-color: #efefef;
    --notif: #FFFFFF;
    --title-color: #051f1d;
    --title-color-2: #e1e1e1;
    --label-color: #1e1e1e;
    --label-color-2: #e1e1e1;
    --text-color: #212121;
    --checkbox: #cacaca;
    --text-color-2: #888888;
    --base: hsl(0, 0%, 95%);
    /*--border: linear-gradient(135deg, #F4EEFF, #FBFCDB);*/
    --border: linear-gradient(135deg, #F9F586, #96FBC4);
    --border-color: #04101b;
    --border-color-2: #e0dcdc;
    --border-color-3: #cad2d3;
    --border-color-4: #e0e0e0;
    --border-table: #EDEDED;
    --variant: #F57327;
    --variant-alt: #F57327a3;
    --shadow: #646464;
    --shadow-2: #ffffff;
    --error: #f6dada;
    --error-label: #f64a4a;
    /*--menu: hsl(227, 20%, 9%);*/
    --menu: #ffffff;
    --selected-li: hsla(228, 3%, 64%, 0.163);
    --selected-menu: #F1F1F1;
    --hovered-li: hsla(231, 3%, 59%, 0.12);
    --hovered-row: hsla(231, 3%, 59%, 0.12);
    --bg: #0f0f0f;
    --tooltip: #1e1e1e;

}

.dark-theme{
    --body-color: #0f0f0f;
    --input-color: #202020;
    --menu: #171717;

    --title-color: #051f1d;
    --text-color: #ededed;
    --text-color-2: #707070;
    --border-color-4: #363636;

    --error-label: #f64a4a;

    --label-color-2: #e1e1e1;
    --label-color: #1e1e1e;
}


@media screen and (min-width: 1024px) {
    :root {
        --biggest-font-size: 2.3rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --title-font-size: .8rem;
        --small-font-size: .875rem;
        --smaller-font-size: .76rem;
        --smallest-font-size: .71rem;
    }
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 100dvh;
    height: 100%;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color) !important;
    color: var(--text-color);
    line-height: 1.5lh;
    transition: 0.5s;
}
html {
    scroll-behavior: smooth;
}
::-webkit-scrollbar {
    width: .3rem;
    border-radius: .5rem;
    background-color: var(--container-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll);
    border-radius: .5rem;
}


::-webkit-scrollbar-thumb:hover {
    background-color: hsl(228, 8%, 54%);
}

*::selection {
    background: var(--variant-alt);
    color: var(--text-color);
}

/* Firefox */
*::-moz-selection {
    background: var(--variant-alt);
    color: var(--text-color);
}

*:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}


input{
    outline: none;
    font-size: var(--small-font-size);
    color: var(--text-color-2);
    transition: 0.3s all ease;
}
input::placeholder{
    color: var(--text-color-2);
}
input:focus{
    color: var(--text-color);
}

input:focus::placeholder{
    color: transparent;
}

input[type=number] {
    -moz-appearance: textfield !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

main{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 38% 62%;
    grid-auto-flow: dense;
}
.cube-bg{
    position: relative;
    padding-bottom: 6rem;
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
    background: var(--body-color);
    gap: 75px;
    z-index: 1;
    overflow: hidden;
}
.cube-txt{
    padding: 2rem 8rem;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.c-t-card{
    position: relative;
    padding: 1rem 2.5rem;
    width: 100%;
    height: fit-content;
    color: var(--text-color);
}
.c-t-card .quote{
    position: absolute;
    content: '';
    top: -1rem;
    left: 0rem;
    font-size: var(--most-bigger-font-size);
    color: var(--variant);
    z-index: 1;
}
.c-t-card h2{
    position: relative;
    font-style: italic;
    font-weight: 400;
    font-size: var(--h1-font-size);
    line-height: 1.5lh;
    z-index: 2;
}

.tools{
    position: absolute;
    top: 2rem;
    left: 2rem;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1rem;
    z-index: 99;
}
.logo {
    display: flex;
}
.logo img{
    width: 40px;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color-4);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, border-color 0.3s;
}
.theme-toggle-btn svg {
    width: 1rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    stroke: var(--text-color);
    transition: color 0.3s ease;
}

.form-slider{
    position: relative;
    max-width: calc(400px + 4rem);
}


.form-slider .swiper-slide{
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
}
.form-slider .swiper-slide .slide-wrap{
    position: relative;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 3rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: 0.3s all ease-in-out;
    transition-delay: 0s;
}
.form-slider .swiper-slide .slide-wrap.active{
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    transition-delay: 0.2s;
}

.login-form{
    position: relative;
    padding: 4rem;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--menu);
    border-right: 1px solid var(--border-color-4);
    animation: light 4s linear infinite;
    z-index: 2;
}

@keyframes light {
    0%{
        box-shadow: -5px 0px 18px -1px var(--border-color-4);
    }
    50%{
        box-shadow: 2px 0px 18px -1px var(--border-color-4);
    }
    100%{
        box-shadow: -5px 0px 18px -1px var(--border-color-4);
    }
}

.login-form .error-text{
    width: 100%;
    text-align: left;
    color: var(--error-label);
    font-weight: 600;
}

.login-form footer{
    font-weight: 400;
    font-size: var(--small-font-size);
}
.login-form footer a{
    color: #4766ff;
}

.form-slider .swiper-slide .slide-wrap a{
    font-weight: 600;
    font-size: var(--small-font-size);
}
.form-slider .swiper-slide .slide-wrap a:hover{
    cursor: pointer;
}

.l-f-layout{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4rem;
    z-index: 2;
}

.l-f-text{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
}
.l-f-text h2{
    font-weight: 600;
}
.l-f-text h2 .bx{
    position: relative;
    left: -4px;
    color: var(--variant);
    font-size: var(--h1-font-size);
}
.l-f-text p{
    font-size: var(--small-font-size);
    color: var(--text-color-2);
}
.login-form form{
    height: 100%;
}
.login-form .l-f-container{
    height: fit-content;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
}

.login-form .i-field{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}
.i-field span{
    font-weight: 600;
}
.i-field input{
    position: relative;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 45px;
    border: 1px solid var(--border-color-4);
    border-radius: 8px;
    background: var(--input-color);
    gap: 0.5rem;
}
.i-field input:focus{
    background: var(--menu);
}
.dark-theme .i-field input:focus{
    background: var(--body-color);
}
.i-field .f-multi-input{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.i-field .f-multi-input input[type=number]{
    text-align: center;
    font-size: var(--normal-font-size);
    font-weight: 600;
}

.button{
    position: relative;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 45px;
    border: 1px solid var(--border-color-4);
    border-radius: 8px;
    gap: 0.5rem;

    font-family: var(--body-font);
    font-size: var(--normal-font-size);

    transition: 0.3s all ease;
}
.button:hover{
    cursor: pointer;
    background: var(--input-color);
}
.button.disabled{
    background: var(--body-color);
    color: var(--text-color-2);
}
.button.disabled:hover{
    cursor: not-allowed;
    background: initial;
    opacity: 0.9;
}
.button.primary{
    border: 1px solid var(--variant);
    background: var(--variant);
    color: var(--label-color);
    font-weight: 600;
}
.button.primary:hover{
    background: var(--variant-alt);
    backdrop-filter: blur(10px);
}


.button.secundary{
    background: var(--menu);
}
.button.secundary:hover{
    background: var(--input-color);
}

.button p{
    font-weight: 600;
}



@media screen and (max-width: 1300px) {
    main{
        grid-template-columns: 50% 50%;
    }
}

@media screen and (max-width: 1024px) {
    main{
        grid-template-columns: repeat(1, 100%);
    }
    .cube-bg{
        position: absolute;
        justify-content: end;
        padding-bottom: 8rem;
        background: var(--menu);
        gap: 50px;
    }
    .cube-bg .row{
        gap: 230px;
        transform: scale(0.3);
    }
    .cube-txt{
        display: none;
    }
    .login-form{
        padding: 2rem;
        background: linear-gradient(0deg, transparent 10%, var(--menu) 50%);
    }
    .l-f-text h2 .bx{
        left: -4px;
        font-size: var(--biggest-font-size);
    }
}

@media screen and (max-width: 560px) {
    .cube-bg{
        padding-bottom: 7rem;
        gap: 45px;
    }
    .cube-bg .row{
        transform: scale(0.25);
    }
    .login-form{
        padding: 1rem 0rem;
        background: linear-gradient(0deg, transparent 10%, var(--menu) 40%);
    }
    .l-f-layout{
        gap: 2rem;
    }
    .form-slider{
        max-width: 100%;
    }
    .form-slider .swiper-slide .slide-wrap{
        padding: 2rem 1.5rem;
        gap: 1.5rem;
    }
    .tools{
        top: 1.5rem;
        left: 1.5rem;
    }
}