:root{
    /* COLORS */
    --white: #ffffff;
    --cultured: hsl(225, 20%, 96%);
    --onyx: hsl(207, 8%, 21%);;
	--gray-white: #F2F2F2;
	--gray: #333333;
	--gray-medium: #999999;
    --gray-strong: #cbcbcb;
    --gray-semi-strong: #F6F5F6;
	--black: #000000;
    --white-a20: hsla(0, 0%, 100%, 0.2);
    --purple: #8D57AB;
    --dark-purple: #673D7E;
    --full-gray: #222224;
    --nocturnal-plum: #120925;
    --coal: #282828;

    /* BORDER */
    --border-1: 22px;
    --border-3: 6px;

    /* FONT SIZES */
    --fs-1: 4.349rem;
    --fs-2: 2.892rem;
    --fs-3: 1.563rem;
    --fs-4: 1.128rem;
    --fs-5: 0.957rem;
    --fs-6: 0.837rem;
    --fs-major: 3.759rem;

    /* MARGINS */
    --margin-section: 100px;
    --margin-3: 50px;
    --margin-4: 20px;
    --margin-5: 12px;
    --margin-6: 8px;

    /* LINE HEIGHTS */
    --lh-1: 2esm;

    /* FONTS */
    --ff-cabin: "Cabin", sans-serif;
    --ff-vietnam: "Be Vietnam Pro", sans-serif;

    --fw-600: 600;
    --fw-500: 500;
    --fw-400: 400;

    /* SHADOWS */
    --shadow-1: 1px 1px 2px 1px rgba(255, 255, 255, 0.2);
    --shadow-2: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar{
	width: 10px;
}

::-webkit-scrollbar-thumb{
	background-color: var(--gray);
}

*, *::after, *::before{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	font-family: var(--ff-vietnam);
	scroll-behavior: smooth;
}

body{
    background-color: var(--white);
}

a{
    text-decoration: none;
    color: var(--onyx);
}

ul{
    list-style: none;
}

.--icon-box, .--big-icon{
    user-select: none; /* Previene la selección de texto en la mayoría de los navegadores */
    -webkit-user-select: none; /* Para navegadores basados en WebKit */
    -moz-user-select: none; /* Para navegadores basados en Gecko */
    -ms-user-select: none; /* Para Internet Explorer */
}

.--icon-box{
    font-variation-settings: 'wght' 300;
    filter: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(1343%) hue-rotate(169deg) brightness(93%) contrast(85%);
    font-weight: var(--fw-500);
    font-size: 24px;
}

.--big-icon{
    font-variation-settings: 'wght' 300;
    filter: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(1343%) hue-rotate(169deg) brightness(93%) contrast(85%);
    width: 34px;
    height: 34px;
}

/* Default clases */
.--link{
    font-size: var(--fs-5);
    font-weight: var(--fw-600);
    color: var(--onyx);
}

.--button{
    position: relative;
    background: var(--gray);
    color: var(--white);
    padding: 15px 25px 15px 25px;
    border-radius: var(--border-3);
    width: fit-content;
}

.--button-full-size{
    text-align: center;
    width: 100%;
}

.--section{
    padding-block: var(--margin-section);
}

.--section-2{
    padding-block: calc(var(--margin-section)/2);
}

.--section-2-top{
    padding-top: calc(var(--margin-section)/2);
}

.--section-2-bottom{
    padding-bottom: calc(var(--margin-section)/2);
}

.--inline-container{
    display: flex;
    align-items: center;
    gap: 8px;
}

.--block-container{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.--button-default-hover:hover{
    transition: .1s ease-in-out;
    background-color: var(--purple);
    cursor: pointer;
}

.--inline-between{
    justify-content: space-between;
}

.--responsive-inline-centered{
    justify-content: initial;
}

.--responsive-block-centered{
    align-items: initial;
}

.--card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 24px;
    border-radius: var(--border-3);
    background-color: var(--white);
    box-shadow: var(--shadow-2);
    height: 100%;
}

.--header-button{
    width: 225px;
    padding-block: 10px;
    padding-inline: 25px;
    background-color: var(--gray-semi-strong);
    border-radius: var(--border-3);
}

.--header-button-no-style{
    background-color: initial;
    color: var(--gray-strong);
}

.--header-button-no-style > div > span{
    color: var(--gray-strong);
}

.--header-button-no-style > div > a{
    color: var(--gray-strong);
}

.--section-mini-margin{
    margin-block: var(--margin-4);
}

.--element-mini-margin{
    margin-block: var(--margin-4);
}

.--element-micro-margin{
    margin-block: var(--margin-5);
}

.--clickable{
    cursor: pointer;
}

.--clickable-text{
    cursor: text;
}

.--medium-word-limiter{
    width: 46ch;
}

.--self-centered{
    margin-inline: auto;
}

.--margin-inline{
    margin-inline: 24px;
}

.--text-centered{
    text-align: center;
}

.--two-cards-block{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.--two-cards-inline{
    display: flex;
    align-items: center;
    gap: 15px;
}

.--no-stroke{
    font-weight: var(--fw-400);
}

.--stroke{
    font-weight: var(--fw-600);
}

.--description-transparent{
    color: var(--gray-medium);
    font-size: var(--fs-5);
}

.--header-more{    
    display: flex;
    justify-content: space-between;
    margin-block-end: var(--margin-5);
}

.--sinopsis{
    font-size: var(--fs-4);
}

.--menu-container{
    position: relative;
}

.--extended-menu{
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: var(--white);
    width: 225px;
    padding: 24px;
    top: 38px;
    left: -190px;
    z-index: 5;
    gap: 8px;
    box-shadow: var(--shadow-2);
    border-radius: var(--border-3);
}

.--extended-menu > span{
    display: flex;
    align-items: center;
    color: var(--onyx);
    gap: 8px;
}

.--padded-icon{
    padding: 8px;
    margin-bottom: var(--margin-5);
}

.--trending-up{
    filter: brightness(0) saturate(100%) invert(24%) sepia(65%) saturate(7148%) hue-rotate(92deg) brightness(105%) contrast(108%);
}

.--trending-down{
    filter: brightness(0) saturate(100%) invert(18%) sepia(79%) saturate(7012%) hue-rotate(357deg) brightness(103%) contrast(114%);
}

.--svg-white{
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(5%) hue-rotate(140deg) brightness(105%) contrast(100%);
    transition: .1s ease-in-out;
}

.--svg-black{
    filter: brightness(0) saturate(100%) invert(15%) sepia(3%) saturate(2936%) hue-rotate(165deg) brightness(88%) contrast(80%);
    transition: .1s ease-in-out;
}

.--svg-gray-strong{
    filter: brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(0%) hue-rotate(178deg) brightness(96%) contrast(83%);
}

.--rotated{
    transform: rotate(90deg);
}

.--limited-container-height{
    max-height: 225px;
    overflow: auto;
}

.--mini-bar::-webkit-scrollbar{
	width: 4px;
}

.--irregular-container-left{
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 22px;
}

.--irregular-container-right{
    display: grid;
    grid-template-columns: 275px 1fr;
    gap: 22px;
}

.--two-cards-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.--three-cards-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
}

.--four-cards-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 22px;
}

/* MAIN SECTION */
.--content{
    display: grid;
    grid-template-columns: 280px 1fr;
}

.--dashboard{
    padding-block-start: var(--margin-4);
    max-width: 975px;
}

.--dashboard-header{
    margin-block-end: var(--margin-6);
}

.--title{
    font-size: var(--fs-3);
    font-weight: var(--fw-500);
    color: var(--coal);
    margin-block-end: 4px;
}

.--desc{
    color: var(--nocturnal-plum);
    font-size: var(--fs-5);
}

.--cards-container{
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-block-end: 0;
}

.--no-margin{
    margin-block: 0;
    margin-inline: 0;
}

/* TABLE */
.--table{
    height: 100%;
    overflow-y: auto;
}

.--table::-webkit-scrollbar{
	width: 4px;
}

.--table::-webkit-scrollbar-thumb{
	background-color: var(--gray);
}

.--columns-list, .--product-list{
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--margin-5);
}

.--columns-list{
    padding-block: var(--margin-5);
    border-top: 1px solid rgba(153, 153, 153, 0.2);
    border-bottom: 1px solid rgba(153, 153, 153, 0.2);
}

.--columns-list > h3{
    font-size: var(--fs-5);
    font-weight: var(--fw-400);
    color: var(--gray-medium);
    text-align: center;
}

.--product-list{
    position: relative;
    margin-block: var(--margin-5);
    padding-block: var(--margin-5);
}

.--product-list::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    width: 95%;
    height: 100%;
    border-bottom: 1px solid rgba(153, 153, 153, 0.2);
    margin-inline: auto;
}

.--product-list > p{
    text-align: center;
    color: var(--coal);
    max-width: 175px;
    overflow-x: auto;
}

@media (max-width: 600px){
    .--table{
        display: flex;
        align-items: center;
        gap: 25px;
    }

    .--columns-list, .--product-list{
        grid-template-columns: none;
    }

    .--three-cards-container{
        grid-template-columns: 1fr;
    }
}

.--font-white{
    color: var(--white);
}

.--font-black{
    color: var(--onyx);
}

.--svg-circle{
    background-color: var(--purple);
    border-radius: var(--border-3);
    padding: 8px;
}

.--absolute-centered{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 450px;
    height: fit-content;
    z-index: 2;
}

.--invisible{
    display: none;
}

.--black-icon{
    filter: brightness(0%);
}

.--full-size{
    width: 100%;
    height: 100%;
}

.--full-screen{
    height: 100svh;
    width: 100svw;
}

.--hidden{
    display: none;
    height: 0px;
    overflow: hidden;
}

@media (max-width: 1200px){
    .--three-cards-container, .--four-cards-container{
        grid-template-columns: repeat(2, 1fr);
    }

    .--responsive-inline-centered{
        justify-content: center;
    }
}

@media (max-width: 750px){
    .--two-cards-container, .--three-cards-container, .--four-cards-container{
        grid-template-columns: 1fr;
    }
}