/*=====
FONTES
=======*/

/*inter*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*Google Sans*/
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

/*Poppins*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

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



/*===================
CONFIGURAÇOES GLOBAIS
=====================*/
:root{
    --background-gradient: linear-gradient(90deg, rgba(22, 93, 251, 1) 0%,rgba(86, 58, 251, 0.91) 50%,rgba(150, 22, 250, 1) 100%);  
    --background-gradient-2: linear-gradient(90deg, rgba(0, 166, 64, 1) 0%,rgba(16, 96, 248, 1) 100%);
    --background: #f3f6ff;
    --background-icon: #567bfc;
    --background-1: white;

    --body-template-cards: linear-gradient(180deg, #ffffff 0%, #f8fafc 30%, #f1f5f9 100%);
    --text-color1: #ffffff;
    --borda-cor-cards: #e5e7eb;
    --gap-icons: 1rem;

    --cor-tecnologia: #ff6900;
}

/* RESET E CONFIGURAÇÕES GLOBAIS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* evita que o elemento saia quando adicionar padding e bordas*/
}

/* Por causa do reset global o dialog perde a configuração padrao, entao tenho que fazer ela manualmente*/
dialog{
    margin: auto;
}
dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
}

html{ font-size: 62.5%;} /* vai deixar 1 rem = 10 px*/

body{
    font-family: 'Open Sans', sans-serif;
    background: var(--background);
}

.conteiner-principal{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 80%;
    height: 100vh;
    padding: 2rem;
    margin:  0 auto;


}

/*===================================
CONFIGURAÇOES DO CABEÇALHO DO SISTEMA
=====================================*/

.cabeçalho{
    width: 100%;
}

.titulo{
    display: flex;
    align-items: center;
    
    padding: 3.2rem;
    margin-bottom: 3.2rem;
    gap: var(--gap-icons);
    border-radius: 15px;
    
    background: var(--background-gradient);
 
}

.icon-dumbbell {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 5.8rem;
    height: 5.8rem;

    border-radius: 10px;
    background-color: var(--background-icon);
}

.paragrafo-titulo{

    color: var(--text-color1) ;
}

.paragrafo-titulo h1{
    font-size: 2.4rem;
}

.paragrafo-titulo p{
    font-size: 1.8rem;
}

/*============================
Configuraçao do dashboard
==============================*/
.conteiner-dashboard{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    margin: 2rem 0;
}

.card-dashboard{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 1rem;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    background: var(--background-1);
}

.card-dashboard h2{
    font-size: 1.4rem;
    font-weight: 400;
}

.qtn-disciplina, .qtn-horas-estudadas, .qtn-progresso, .qtn-completas{
    font-size: 2.4rem;
    font-weight: 800;
}

.espaço{
    margin-left: 0.15rem;
}

.back-icon{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 3.8rem;
    height: 3.8rem;

    border-radius: 10px;
    background: #f1f5f9;
}

.botao-nova-disciplina{
    margin-bottom: 3.2rem;
}

/* CSS de todos os botoes pra abrir o modal pra nova disciplina*/
.cadastro-modal{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-icons);

    font-size: 1.60rem;
    border: none;
    border-radius: 10px;
    padding: 1.4rem 2.4rem;

    color: var(--text-color1);
    background: var(--background-gradient);

    cursor: pointer;
}


/*=====================================
CONFIGURAÇOES DO CONTEUDO DA DISCIPLINA
=======================================*/
.conteudo{
    width: 100%;
}

.nenhuma-disciplina{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
    padding: 6.4rem;
    gap: 2rem;

    border: 2px solid #e5e7eb;
    border-radius: 15px;

    background-color: var(--background-1);
}

.icon-nenhuma-disciplina{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 96px;
    height: 96px;

    border-radius: 15px;
    background: #ede9ff;

}

.nenhuma-disciplina h2{
    font-size: 2rem;
    text-align: center;
}

.nenhuma-disciplina p{
    font-size: 1.6rem;
    text-align: center;
}

/*============================= 
CSS DA CONFIGURAÇÃO DO TEMPLATE
===============================*/

.grid-template{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    padding: 20px 0; /*====== apenas temporario======*/
}

.card-disciplina{

    width: 100%;
    max-height: 100%;

    border: 1px solid var(--borda-cor-cards);
    border-radius: 15px;

    
}

.header-disciplina{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    padding: 1.6rem 2rem;
    border-radius: 15px 15px 0 0; /*Sem essa configuraçao o head disciplina vai sobrepor o card-disciplina*/

    background-color: #fff3e3;
}

.icon-materia{
    display: flex;
    justify-content: center;
    align-items: center;

    gap: var(--gap-icons);
}

.grupo{
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 1rem 1.6rem;
    border-radius: 10px;

    background: var(--cor-tecnologia);
}

.area-estudada{
    font-size: 1.2rem;
    color: var(--text-color1);
}

.icon-template{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 3.8rem;
    height: 3.8rem;

    border-radius: 7px;
    background: rgba(255, 255, 255, 0.35);
}

.nome-materia{
    font-size: 1.4rem;
    font-weight: 500;
}

.nome-professor{
    font-size: 1.2rem;
}

.horas-disciplina{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    gap: 1rem;

    margin-bottom: 1.6rem;
}

.horas-disciplina p{
    font-size: 1.2rem;
    font-weight: 600;
}

.horas-estudadas, .horas-restantes, .horas-total{
    font-size: 1.6rem;
    font-weight: 800;
}

.body-template{
    padding: 2.5rem;
    background: var(--background-1);

    border-radius: 0 0 15px 15px; /*Sem essa configuraçao o body template vai sobrepor o card-disciplina*/
}

.estudadas, .restantes, .total{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding: 1.2rem;
    border-radius: 10px;

    background: var(--body-template-cards);

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0; 
}   

.progresso-disciplina{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;

    margin-bottom: 1.2rem;
    gap: 0.8rem;
}

.texto-titulo{
    display: flex;
    justify-content: space-between;
}

.texto-titulo p{
    font-size: 1.2rem;
}


.barra-progresso{
    width: 100%;
    height: 1.2rem;
    
    border-radius: 20px;
    background: rgb(222, 222, 222);

    box-shadow:        inset 0 2px 6px rgba(107, 114, 128, 0.4),0 4px 6px -1px rgba(0, 0, 0, 0.1);/* vai criar uma sombra interna na barra*/

    overflow: hidden; 
    display: block;
}

.preenchimento {
    width: 0%; 
    height: 100%;
    background-color: #2d1b4d; 
    transition: width 0.5s ease-in-out; /* vai fazer uma pequena animação */
}
.btn-edicao{
    display: flex;
    align-items: center;
    gap: 1rem; 
    margin-top: 1.5rem;
}

.registrar-hora{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    
    /* Faz ele ocupar todo o espaço disponível à esquerda */
    flex-grow: 1; 
    
    height: 4.5rem; /* Altura fixa para alinhar com os outros */
    border: none;
    border-radius: 10px;
    background: var(--cor-tecnologia);
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
}

.btn-curto{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 4.5rem; 
    height: 4.5rem;
    
    /* e pra impidir que o flexbox estique o botão */
    flex-shrink: 0; 

    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    cursor: pointer;
}


/*===========
 CSS DO MODAL 
 ============*/

.conteiner-modal{
    min-width: 25%;
    max-height: 100%;

    border: none;
    border-radius: 10px;
}

.header-modal{
    background: var(--background-gradient);
}

.header-modal-2{
    background: var(--background-gradient-2);
}

.disciplina-gravada{
    display: flex;
    flex-direction: column;

    gap: 1rem;
    padding: 1.6rem;
    border: 1px solid #dbeafe;
    border-radius: 12px;

    background: #f7f6ff;
}

.disciplina-gravada p{
    font-size: 1.2rem;
}

.disciplina-usuario{
    font-size: 1.6rem;
}

.header-modal, .header-modal-2{
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 2.4rem;

}

.icon-modal, .title-icon{
    display: flex;
    justify-content: center;
    align-items: center;

    gap: var(--gap-icons);
}

.title-modal{
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color1);
}

.bloco-icon{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 38px;
    height: 38px;

    border-radius: 5px;

    background: var(--background-icon) ;
}

.btn-close{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.09);

    cursor: pointer;
}

/*===================
CSS do FOOTER
======================*/
.footer{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    gap: 2rem;
    padding: 1rem;
    margin-top: 3rem;

    border-top: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    background: var(--background-1);
}

.footer p{
    font-size: 1.3rem;
    font-weight: 500;
}

.footer a{
    text-decoration: none;

}

.footer a:visited {
    text-decoration: none;
    color: blue;
}

/*===================
CSS do form do modal
======================*/

.modal-form, .modal-form-2{
    padding: 2.4rem;
}

.modal-body{
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2rem;

    margin-bottom: 2rem;

}

.modal-body-2{
    display: flex;
    flex-direction: column;

    gap: 2rem;

    margin-bottom: 2rem;
    
}

.form-nome, .form-professor, .form-horario, .form-area, .form-registrar-horario{
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    gap: 0.5rem;

    font-size: 1.4rem;
}

input, select{
    padding: 1rem 1.4rem;

    border: 1px solid rgb(166, 166, 166);
    border-radius: 12px;
}

.modal-footer, .modal-footer-2{
    display: flex;
    justify-content: space-around;
}

.cancelar-form, .gravar-form, .gravar-horario{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 49%;
    font-size: 1.4rem;
    font-weight: 300;

    padding: 0.6rem 1rem;
    border-radius: 10px;

    cursor: pointer;
}

.cancelar-form{
    border: 1px solid rgb(166, 166, 166);
    background: none;
}

.gravar-form{
    border: none;
    background: var(--background-gradient);
    
    color: var(--text-color1);

    gap: var(--gap-icons);
}

.gravar-horario{
    border: none;
    background: var(--background-gradient-2);
    
    color: var(--text-color1);

    gap: var(--gap-icons);
}


/*==========================================
    RESPONSIVIDADE PARA DISPOSITIVOS MOVEIS
============================================*/

@media (max-width: 768px) {
.conteiner-principal{
    width: 100%;
    padding-top: 1rem;
    padding: 0 1rem;
    margin:  0 auto;
    overflow-x: hidden;


}

.titulo{

    padding: 1.6rem;
    gap: 0.5rem;
}

.paragrafo-titulo h1{
    font-size: 1.8rem;
}

.paragrafo-titulo p{
    font-size: 1.4rem;
}

.conteiner-dashboard{
    display: grid;
    grid-template-columns: repeat(2, 1fr) ;
    gap: 1rem;

}

.grid-template{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

}
}