@import url(./vars.css);
@import url(./mediaqueries.css);

body {
    background-color: var(--cor-1);
    font-size: 1rem;
    font-family: var(--fonte);
    font-weight: 700;
}

/* Header */

.cabecalho {
    background-color: var(--cor-1);
    top: 0;
    position: fixed;
    width: 100vw;
}

.container__cabecalho {
    display: flex;
    margin: 2rem auto 0.5rem 1rem;
}

.cabecalho__conteudo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.img_medica {
    width: 3rem;
    border-radius: 50%;
}

.texto__cabecalho {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cabecalho__titulo {
    margin-bottom: 0;
    color: var(--cor-2);
    font-size: 1.37rem;
}

.cabecalho__status {
    margin-top: 0;
    color: var(--cor-3);
    font-size: 0.87rem;
    font-weight: 400;
}

/* Main */

.principal {
    margin: 8rem 1rem 4rem 1rem;
}

.conteudo__pacientes,
.container__pacientes-diarios {
    display: flex;
    flex-direction: column;
}

.dia-da-semana {
    padding: 0.5rem auto 0.5rem 1rem;
    font-weight: 700;
    color: var(--cor-2);
}

.container__cards {
    display: flex;
    flex-direction: column;
    padding: 0 1rem 1rem 1rem;
}

.card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.info_paciente-sobre {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.img_paciente {
    width: 2.5rem;
    border-radius: 50%;
}

.info_paciente-sobre-texto {
    display: flex;
    flex-direction: column;
    margin: 0 auto 0 1rem;
}

.nome_paciente {
    font-size: 0.87rem;
    color: var(--cor-2);
}

.tipo_consulta {
    font-size: 0.75rem;
    color: var(--cor-3);
    font-weight: 400;
}

.horario-e-botoes {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    gap: 0.5rem;
}

.horario {
    color: var(--cor-2);
    font-size: 0.75rem;
    font-weight: 500;
}

.botoes-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ligacao,
.endereco {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: none;
}

.ligacao{
    min-width: 50%;
    max-width: 85%;
}

.video,
.audio,
.endereco {
    font-weight: 500;
    font-size: 0.87rem;
}

.video {
    color: var(--cor-1);
    background-color: var(--cor-5);
}

.audio {
    border: 2px solid var(--cor-6);
    color: var(--cor-2);
}

.endereco {
    background-color: var(--cor-4);
    color: var(--cor-1);
    padding: 0.75rem 2.87rem;
    width: 100%;
}

.overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}

.cadastro {
    right: 0;
    bottom: 4.62rem;
    position: fixed;
}

.cadastro__container__conteudo{
    position: relative;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.botao-cadastro{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -1rem 0;
}

.botao-cadastro-texto{
    color: var(--cor-2);
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: right;
}

.local{
    display: flex;
    margin-bottom: -1.75rem;
}

.texto-cad{
    background-color: var(--cor-1);
    border-radius: 20px;
    padding: 0.12rem 0.5rem;
}

.plus-rotulo{
    display: flex;
    justify-content: right;
    right: 0;
}

#btns-cad {
    display: none;
}

.plus {
    display: block;
    margin-bottom: 0.25rem;
}

.plus-botao {
    display: none;
}

.cadastro__container:has(.plus-botao:checked) #btns-cad {
    display: block;
}

.plus-botao:checked ~ .overlay {
    display: block;
}

.cadastro-2{
    display: none;
}

/* Footer */

.rodape {
    background-color: var(--cor-1);
    bottom: 0;
    right: 0;
    position: fixed;
    width: 100vw;
}

.rodape__container {
    padding: 0.5rem;
}

.rodape__container__conteudo {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.rodape-botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.img-calendario,
.img-menu {
    width: 1.25rem;
}

.img-clientes {
    width: 1.5rem;
}

.img-relatorios {
    width: 0.87rem;
}

.nome-botao {
    color: var(--cor-2);
    font-weight: 400;
}

.consultas {
    color: var(--cor-4);
}