* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

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

/*Fontes utilizadas: Mulish, Montserrat*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/*Textos, cores e gradientes*/
:root {
    --font-montserrat: "Montserrat", serif;
    --font-mulish: "Mulish", serif;

    /*Fontes*/


    --h1: 600 2.4rem/1.5 var(--font-montserrat);
    --h2: 600 2.0rem/1.5 var(--font-montserrat);
    --h3: 600 1.8rem/1.5 var(--font-montserrat);
    --h4: 600 1.4em/1.5 var(--font-montserrat);
    --titulo-aula: 600 1.4rem/1.5 var(--font-montserrat);
    --subtitulo: 500 1.8rem/1.5 var(--font-montserrat);
    --paragrafo: 500 1.6rem/1.5 var(--font-mulish);
    --label: 600 1.6rem/1.5 var(--font-mulish);
    /*Line Height?*/
    --paragrafo-pequeno: 400 1.4rem/1.5 var(--font-mulish);
    --paragrafo-extra-pequeno: 400 1.2rem/1.5 var(--font-mulish);
    /*Line Height?*/
    --fonte-da-imagem-texto: 400 1.6rem/1.5 var(--font-mulish);

    /*Cores Principais*/
    --verde-claro: #28B66A;
    --esmeralda-transparencia-10: #51E19C1A;
    --verde-secundario: #1E9E59;
    --verde-principal: #078742;
    --verde-escuro: #005A27;
    --vermelho-logo: #AB0101;
    --engenharia-laranja: #E63B38;
    --background-plataforma: #FCFCFC;
    --preto: #2C2C2C;
    --preto-medio: #575757;
    --branco: #FFFFFF;
    --preto-rico: #0D1B1E;
    --cinza-claro: #f2f2f2;
    --cinza: #E1E1E1;
    --cinza-escuro: #8F8F8F;
    --branco: #FFFFFF;
    --cinza-placeholder: #6C6C6C;


    /*Cores Português*/
    --portugues-claro: #31B0FF;
    --portugues-escuro: #10589A;
    --portugues-principal: #1572C9;




    /*Cores Matemática*/
    --matematica-claro: #FFAB7E;
    --matematica-escuro: #E26A23;
    --matematica-principal: #F8803F;


    /*Cores Produção Textual*/
    --producaotextual-claro: #4ED362;
    --producaotextual-escuro: #008241;
    --producaotextual-principal: #1E9E59;

    /*Cores Estudo Eficiente*/
    --estudoeficiente-claro: #AF69DB;
    --estudoeficiente-escuro: #501475;
    --estudoeficiente-principal: #7119A8;

    /* Cores História */
    --historia-claro: #A57862;
    --historia-escuro: #533424;
    --historia-principal: #7D5846;

    /* Cores Geografia */
    --geografia-claro: #FFE343;
    --geografia-escuro: #CD8C01;
    --geografia-principal: #EFC108;

    /* Cores Química */
    --quimica-claro: #FF9CAC;
    --quimica-escuro: #9E3B4B;
    --quimica-principal: #E35C72;

    /* Cores Física */
    --fisica-claro: #93DBD1;
    --fisica-escuro: #139986;
    --fisica-principal: #4CC0AF;

    /* Cores Biologia */
    --biologia-claro: #A8D166;
    --biologia-escuro: #648C24;
    --biologia-principal: #85B931;

    /*Variáveis cores principais disciplinas com filter para edição de SVG via img e FILTER CSS*/
    --branco-filter: brightness(0) saturate(100%) invert(79%) sepia(100%) saturate(0%) hue-rotate(150deg) brightness(108%) contrast(100%);
    --portugues-principal-filter: brightness(0) saturate(100%) invert(32%) sepia(38%) saturate(3837%) hue-rotate(194deg) brightness(89%) contrast(84%);;
    --matematica-principal-filter: brightness(0) saturate(100%) invert(61%) sepia(15%) saturate(4650%) hue-rotate(334deg) brightness(103%) contrast(94%);;
    --producaotextual-principal-filter: brightness(0) saturate(100%) invert(47%) sepia(88%) saturate(388%) hue-rotate(95deg) brightness(89%) contrast(92%);
    --estudoeficiente-principal-filter: brightness(0) saturate(100%) invert(17%) sepia(54%) saturate(5612%) hue-rotate(273deg) brightness(75%) contrast(99%);;

    --historia-principal-filter: brightness(0) saturate(100%) invert(34%) sepia(47%) saturate(368%) hue-rotate(335deg) brightness(94%) contrast(89%);
    --geografia-principal-filter: brightness(0) saturate(100%) invert(64%) sepia(91%) saturate(1129%) hue-rotate(8deg) brightness(109%) contrast(94%);
    --quimica-principal-filter: brightness(0) saturate(100%) invert(57%) sepia(92%) saturate(2760%) hue-rotate(314deg) brightness(93%) contrast(91%);
    --fisica-principal-filter:  brightness(0) saturate(100%) invert(72%) sepia(49%) saturate(447%) hue-rotate(121deg) brightness(85%) contrast(86%);
    --biologia-principal-filter: brightness(0) saturate(100%) invert(68%) sepia(41%) saturate(631%) hue-rotate(41deg) brightness(87%) contrast(99%);

    /*Cores em filter*/
    --cinza-escuro-filter: brightness(0) saturate(100%) invert(59%) sepia(1%) saturate(1438%) hue-rotate(42deg) brightness(98%) contrast(87%);
    --verde-principal-filter: brightness(0) saturate(100%) invert(33%) sepia(94%) saturate(5755%) hue-rotate(147deg) brightness(94%) contrast(94%);
    --preto-filter: brightness(0) saturate(100%) invert(17%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    --branco-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    
    /*Erros e Sucesso no sistema*/
    --erroinputbackground: #EBC8C4;
    --sucessobackground: #DEF2D6;
    --iconesosucessopopup: #5C7054;

    /*Questões e alternativas*/

    --qcorreto: #0DB45A;
    --qincorreto: #FF4444;
    --qpadrao: #676767;

    /*Gradientes*/
    --gradiente-cards: linear-gradient(163deg, #1E9E59 37.2%, #0B3820 146.74%);
    --gradiente-principal: linear-gradient(165deg, #078742 37.12%, #144D2E 231.92%);
    --gradiente-partiuIF: linear-gradient(90deg, #ED9911 0%, #CA5D0F 41.83%, #89380C 99.04%);;

    /*Sombras Padrões*/
    --sombra-padrao: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);
    --sombra-questoes: 0px 2px 3px 0px rgba(0, 0, 0, 0.20);

    --borda: 1px solid var(--cinza);

    /*STATUS EDITAIS/EXAMES DE SELEÇÃO*/
    --status-publicado: #4CAF50;
    --status-em-andamento: #FACF43;
    --status-encerrado: #F44336;
    --status-cancelado: #9E9E9E;
    --status-retificado: #2196F3;
    --status-edicao: #c4da00;
}

label{
    font: var(--label) !important;
    color: var(--preto);
}
/*Formatação de texto*/
html {
    font-size: 62.5%;
}

h1 {
    font: var(--h1);
}

body{
    background-color: var(--background-plataforma) !important;
}

h2 {
    font: var(--h2);
}

h3 {
    font: var(--h3);
}

h4 {
    font: var(--h4);
}
p {
    font: var(--paragrafo);
}

.texto-pequeno {
    font: var(--paragrafo-pequeno);
}

label {
    font-size: 1.6rem;
}

a {
    text-decoration: none;
}

/*Botoes */

.btn-padrao {
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-style: none;
    border-radius: 10px;
    border-bottom: 4px solid #005A27;
    background-color: #1E9E59;
    font-family: var(--font-montserrat);
    color: white;
    transition: all 300ms ease-in;
    cursor: pointer;
}

.btn-padrao.desativado {
    border-radius: 10px;
    border-bottom: 4px solid var(--cinza-escuro);
    background-color: var(--cinza);
    font-family: var(--font-montserrat);
    color: var(--qpadrao);
}

.btn-padrao.excluir {
    border-radius: 10px;
    border-bottom: 4px solid var(--vermelho-logo);
    background-color: var(--qincorreto);
    font-family: var(--font-montserrat);
    color: var(--branco);
}


button:hover {
    cursor: pointer;
}

.titulo {
    position: relative; /* referência para o position absolute do link */
}

.link-seta-voltar {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: var(--verde-principal);
    border-radius: 50%;
    top: 50%; /* coloca no meio da altura da .titulo */
    left: 0; /* se quiser colar no lado esquerdo */
    transform: translateY(-50%); /* ajusta para o centro exato */

}

.icone-seta {
    width: 30px;
    display: block;
    transform: rotate(90deg); /* gira 180° no sentido horário */
}

.titulo {
    display: flex;
    align-items: center;
}

.titulo h2 {
    margin: 0 auto;
    color: var(--verde-principal);
    padding: 3rem 0;
}

.titulo-pagina {
    display: flex;
    width:100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}




/*MODAL*/

.alerta-modal {
    width: 70px;
}


/*Style geral das páginas (SIDEBAR, MAIN E ASIDE)*/

body {
    display: grid;
}

@media (min-width: 900px) {
    html {
        font-size: 70%;
    }
}

/*Headers*/
header.mobile {
    position: sticky;
    top: 0;
    width: 100%;
    height: max-content;
    background-color: white;
    padding: 2rem 3rem 1.5rem 3rem;
    box-shadow: var(--sombra-padrao);
    z-index: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-header-mobile {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-verde-principal {
    filter: var(--verde-principal-filter)
}
.notificacao-header-mobile {
    width:  32px;
}

header.mobile .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.mobile .logo {
    width: 10rem;
}

header.mobile .perfil {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    border: 2px solid var(--verde-principal);
    object-fit: cover;
}

header .desktop {
    display: none;
}

/*Article*/
article {
    overflow: scroll;
    padding: 0;
}



article::-webkit-scrollbar {
    width: 5px;
    margin-right: 0.1rem;
    /* width of the entire scrollbar */
}

article::-webkit-scrollbar-track {
    background: rgba(255, 166, 0, 0);
    /* color of the tracking area */
}

article::-webkit-scrollbar-thumb {
    background-color: var(--background-plataforma);
    /* color of the scroll thumb */
    border-radius: 20px;
    /* roundness of the scroll thumb */
    border: 1px solid rgba(255, 166, 0, 0);
    /* creates padding around scroll thumb */
}



article {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-bottom: 3rem;
    padding-right: 2rem;
}

@media (max-width: 1099px) {

    article {
        height: 100%;
        padding-top: 1rem;
        padding-right: 0;
    }
}



/*Asides*/

aside {
    grid-area: aside;
    padding: 40px;
}

/*main*/
main {
    padding: 3rem 3rem 3rem 3rem;
    display: grid !important;
    overflow: scroll;
    overflow-x: hidden; /* esconde a horizontal */
    padding-bottom: 0rem !important;
}

@media (min-width: 1100px) {
    main {
        grid-template-columns: 1fr auto;
    }

}

@media (min-width: 475px) {
    main {
        padding-bottom: 3rem;
    }
}


/* Olhinhos */


#icone-olho-fechado {
    background-color: transparent;
    border: 0px;
    cursor: pointer;
}

#icone-olho-aberto {
    background-color: transparent;
    border: 0px;
    cursor: pointer;
}

.button-background-transparente {
    background-color: transparent;
}

.button-border-none {
    border: 0px;
}

/*Aside acompanhamento DIREITO*/

.opcao {
    width: 100%;
}

.acompanhamento {
    width: 100%;
}

.progress {
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
}


progress.cor-principal::-webkit-progress-bar {
    background-color: var(--cinza);
}

progress.cor-principal::-webkit-progress-value {
    background-color: var(--producaotextual-principal);
}



progress {
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
}


progress::-webkit-progress-value {
    background-color: var(--producaotextual-claro);
}








/*Input de texto cinza*/



.input-cinza {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.8rem;
}

.label-cinza {
    width: 100%;
    font: var(--h3);
    color: var(--preto-rico);
}


input.input-texto-cinza {
    width: 100%;
    height: 5.1rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    border-radius: 8.046px;
    border-top: 1px solid var(--cinza-placeholder);
    border-right: 1px solid var(--cinza-placeholder);
    border-bottom: 3px solid var(--cinza-placeholder);
    border-left: 1px solid var(--cinza-placeholder);
    background-color: #FFFFFF;

}

.input-texto-cinza::placeholder {
    font: var(--paragrafo-desktop);
    color: var(--cinza-placeholder);
}

/*Caixas de erro e sucesso */

.error-input {
    font: var(--paragrafo-pequeno);
    align-self: start;
    color: var(--engenharia-laranja);
}



/*CSS PADRÕES*/
.display-none {
    display: none;
}


/*Desktop Layout*/
@media (min-width: 1100px) {
    body {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "sidebar";
    }


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

    .sidebar {
        grid-area: sidebar;
    }

    header .desktop {
        display: block;
    }

    header.desktop {
        width: 100%;
    }

    header.mobile {
        display: none !important;
    }




    .card-pagina-horizontal {
        justify-content: start;
    }

    article::-webkit-scrollbar-thumb {
        background-color: var(--verde-principal);
        border-radius: 20px;
        border: 1px solid rgba(255, 166, 0, 0);
    }


}


@media only screen and (orientation: landscape)  {

    article {
        padding-top: 1rem;
        transition: transform 0.3s ease-in-out;
    }
}


button.tesoura-questão img {
    width: 16px;
}

.lingua-portuguesa-filter-icon {
    filter: var(--portugues-principal-filter);
}

.matematica-filter-icon {
    filter: var(--matematica-principal-filter);
}

.producaotextual-filter-icon {
    filter: var(--producaotextual-principal-filter);
}

.estudo-eficiente-filter-icon {
    filter: var(--estudoeficiente-principal-filter);
}

.historia-filter-icon {
    filter: var(--historia-principal-filter);
}

.geografia-filter-icon {
    filter: var(--geografia-principal-filter);
}

.quimica-filter-icon {
    filter: var(--quimica-principal-filter);
}

.fisica-filter-icon {
    filter: var(--fisica-principal-filter);
}

.biologia-filter-icon {
    filter: var(--biologia-principal-filter);
}

.width-24px {
    width: 24px;
}

.icone-apagar-padrao {
    border: 2px solid var(--qincorreto);
    border-radius: 8px;
    padding: 8px;
}

@media (max-width: 1100px ) {
    body {
        display: block;
    }
}

/*Offline alert*/
.offline-alert {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 10;
    background-color: var(--branco);
    box-shadow: var(--sombra-padrao);
    padding: 8px;
    color: var(--cinza-escuro);
    border-radius: 8px;
}

.offline-alert img {
    filter: var(--cinza-escuro-filter);
    width: 16px;
}