/* ==========================================
   RESET
========================================== */

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


:root {

    --fundo: #0b0c0e;

    --sidebar: #111317;

    --superficie: #15181d;

    --superficie-2: #1b1f25;

    --borda: #262b33;

    --texto: #f1f4f8;

    --muted: #7f8998;

    --verde: #11897f;

    --verde-claro: #1aa99c;

    --verde-suave: rgba(26, 169, 156, 0.12);

    --vermelho: #dc6262;

    --amarelo: #e7b44b;
}


/* ==========================================
   GERAL
========================================== */

body {

    min-height: 100vh;

    font-family:
        'Segoe UI',
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background-color: var(--fundo);

    color: var(--texto);
}


button,
input {

    font: inherit;
}


button {

    cursor: pointer;
}


/* ==========================================
   ESTRUTURA
========================================== */

.app {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        330px
        minmax(0, 1fr);

    transition:
        grid-template-columns
        0.25s ease;
}


.app.sidebar-recolhida {

    grid-template-columns:
        62px
        minmax(0, 1fr);
}


/* ==========================================
   SIDEBAR
========================================== */

.sidebar {

    height: 100vh;

    position: sticky;

    top: 0;

    background-color: var(--sidebar);

    border-right:
        1px solid
        var(--borda);

    overflow: hidden;

    z-index: 20;
}


.sidebar-conteudo {

    width: 330px;

    height: 100%;

    padding:
        28px
        18px;

    display: flex;

    flex-direction: column;
}


.sidebar-recolhida
.sidebar-conteudo {

    opacity: 0;

    pointer-events: none;
}


.sidebar-topo {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        0
        8px
        20px;

    border-bottom:
        1px solid
        var(--borda);
}


.sidebar-icone {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    background-color:
        var(--verde-suave);

    border-radius: 10px;

    font-size: 18px;
}


.sidebar-topo strong {

    display: block;

    font-size: 16px;
}


.sidebar-topo small {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
}


/* ==========================================
   BOTÃO RECOLHER SIDEBAR
========================================== */

.botao-recolher {

    position: absolute;

    top: 25px;

    right: -1px;

    width: 34px;

    height: 40px;

    border: none;

    border-radius:
        10px
        0
        0
        10px;

    background-color:
        var(--superficie-2);

    color: var(--texto);

    font-size: 27px;

    z-index: 30;
}


.sidebar-recolhida
.botao-recolher {

    transform:
        rotate(180deg);
}


/* ==========================================
   HISTÓRICO LATERAL
========================================== */

.historico-lateral {

    flex: 1;

    margin-top: 18px;

    overflow-y: auto;

    padding-right: 5px;
}


.historico-lateral::-webkit-scrollbar {

    width: 5px;
}


.historico-lateral::-webkit-scrollbar-thumb {

    background-color:
        #30353d;

    border-radius: 10px;
}


/* ==========================================
   MÊS
========================================== */

.grupo-mes {

    margin-bottom: 8px;
}


.cabecalho-mes {

    width: 100%;

    border: none;

    background: transparent;

    display: grid;

    grid-template-columns:
        18px
        1fr
        auto;

    align-items: center;

    gap: 8px;

    padding:
        11px
        8px;

    border-radius: 9px;

    color: var(--texto);

    text-align: left;
}


.cabecalho-mes:hover {

    background-color:
        var(--superficie-2);
}


.cabecalho-mes.ativo {

    background-color:
        var(--verde-suave);
}


.seta-mes {

    color: var(--muted);

    transition:
        transform
        0.2s ease;
}


.grupo-mes.aberto
.seta-mes {

    transform:
        rotate(90deg);
}


.nome-mes {

    font-weight: 600;

    font-size: 13px;
}


.total-mes-lateral {

    color: var(--verde-claro);

    font-size: 12px;

    font-weight: 600;
}


/* ==========================================
   LANÇAMENTOS NO HISTÓRICO
========================================== */

.lancamentos-mes {

    display: none;

    padding:
        4px
        4px
        10px
        26px;
}


.grupo-mes.aberto
.lancamentos-mes {

    display: block;
}


.lancamento-lateral {

    width: 100%;

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 6px;

    border: none;

    background: transparent;

    padding:
        8px
        5px;

    border-radius: 7px;

    color: #c2c8d1;

    text-align: left;
}


.lancamento-lateral:hover {

    background-color:
        var(--superficie-2);
}


.lancamento-data {

    font-size: 11px;

    color: var(--muted);
}


.lancamento-local {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 12px;
}


.lancamento-valor {

    font-size: 11px;

    font-weight: 600;

    color: var(--texto);
}


.total-final-mes {

    display: flex;

    justify-content:
        space-between;

    margin-top: 7px;

    padding:
        10px
        5px
        2px;

    border-top:
        1px dashed
        #30353d;

    color: var(--muted);

    font-size: 11px;
}


.total-final-mes strong {

    color: var(--verde-claro);

    font-size: 12px;
}


/* ==========================================
   CONTEÚDO PRINCIPAL
========================================== */

.conteudo-principal {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding:
        36px
        40px
        60px;
}


/* ==========================================
   CABEÇALHO
========================================== */

.cabecalho {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    min-height: 62px;

    margin-bottom: 28px;
}


.cabecalho-texto {

    text-align: center;
}


.cabecalho h1 {

    font-size: 29px;

    letter-spacing:
        -0.5px;
}


.cabecalho p {

    margin-top: 7px;

    color: var(--muted);

    font-size: 14px;
}


.mes-atual {

    position: absolute;

    right: 0;

    top: 50%;

    transform:
        translateY(-50%);

    padding:
        9px
        14px;

    background-color:
        var(--superficie);

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

    border-radius: 9px;

    color: #b6bfcb;

    font-size: 13px;
}


/* ==========================================
   CARDS FINANCEIROS
========================================== */

.cards-financeiros {

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr;

    gap: 14px;

    margin-bottom: 18px;
}


.card-financeiro {

    min-height: 130px;

    background-color:
        var(--superficie);

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

    border-radius: 16px;

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;
}


.card-financeiro.destaque {

    background:
        linear-gradient(
            135deg,
            #0d776f,
            #11968a
        );

    border: none;
}


.card-financeiro span {

    color: #9ca5b2;

    font-size: 13px;
}


.card-financeiro.destaque span,
.card-financeiro.destaque small {

    color:
        rgba(
            255,
            255,
            255,
            0.8
        );
}


.card-financeiro strong {

    font-size: 29px;

    margin:
        8px
        0;
}


.card-financeiro.destaque strong {

    font-size: 39px;
}


.card-financeiro small {

    color: var(--muted);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ==========================================
   BOTÃO FOTO
========================================== */

.botao-foto {

    min-height: 78px;

    background-color:
        var(--superficie);

    border:
        2px dashed
        #343b46;

    border-radius: 14px;

    padding:
        18px
        22px;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    cursor: pointer;

    transition:
        0.2s ease;
}


.botao-foto:hover {

    border-color:
        var(--verde-claro);

    background-color:
        #171b20;
}


.botao-foto > span {

    font-size: 21px;
}


.botao-foto strong {

    display: block;

    font-size: 14px;
}


.botao-foto small {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
}


.foto {

    display: none;
}


/* ==========================================
   REVISÃO
========================================== */

.revisao {

    margin-bottom: 18px;
}


.comprovante-revisao {

    background-color: #ffffff;

    color: #55657d;

    padding: 20px;

    border-radius: 15px;

    max-width: 600px;

    margin: 0 auto;
}


.comprovante-revisao
.categoria {

    margin-bottom: 5px;
}


.comprovante-revisao
small {

    display: block;

    margin-top: 4px;
}


.itens {

    margin-top: 14px;

    line-height: 1.8;

    color: #465872;

    font-size: 14px;
}


.total-nota {

    margin-top: 14px;

    padding-top: 12px;

    border-top:
        1px dashed
        #cad3df;

    font-weight: 600;
}


.aviso-validacao {

    margin-top: 12px;

    padding: 10px;

    border-radius: 8px;

    background-color:
        #fff3d5;

    color: #8b6715;

    font-size: 13px;
}


.acoes-revisao {

    display: flex;

    gap: 9px;

    margin-top: 15px;
}


.btn-confirmar,
.btn-cancelar {

    border: none;

    border-radius: 8px;

    padding:
        10px
        16px;

    font-weight: 600;
}


.btn-confirmar {

    background-color:
        var(--verde);

    color: #ffffff;
}


.btn-cancelar {

    background-color:
        #e8ecf2;

    color: #516078;
}


/* ==========================================
   PAINÉIS / GRÁFICOS
========================================== */

.area-graficos {

    display: grid;

    grid-template-columns:
        1fr
        1.35fr;

    gap: 14px;

    margin-bottom: 14px;
}


.painel {

    background-color:
        var(--superficie);

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

    border-radius: 16px;

    padding: 20px;
}


.painel-titulo {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    margin-bottom: 20px;
}


.painel h2 {

    font-size: 15px;
}


.painel-titulo p {

    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;
}


/* ==========================================
   DONUT
========================================== */

.categoria-grafico-area {

    display: flex;

    align-items: center;

    gap: 30px;
}


.grafico-donut {

    width: 150px;

    min-width: 150px;

    height: 150px;

    border-radius: 50%;

    background-color:
        #252a31;

    position: relative;

    display: grid;

    place-items: center;
}


.grafico-donut::after {

    content: "";

    position: absolute;

    width: 92px;

    height: 92px;

    border-radius: 50%;

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


.grafico-centro {

    position: relative;

    z-index: 2;

    text-align: center;
}


.grafico-centro small {

    color: var(--muted);

    display: block;

    font-size: 11px;
}


.grafico-centro strong {

    display: block;

    margin-top: 4px;

    font-size: 15px;
}


.legenda-categorias {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 9px;
}


.legenda-item {

    display: grid;

    grid-template-columns:
        10px
        1fr
        auto;

    align-items: center;

    gap: 8px;

    font-size: 12px;
}


.legenda-cor {

    width: 8px;

    height: 8px;

    border-radius: 50%;
}


.legenda-item span {

    color: #acb5c1;
}


.legenda-item strong {

    color: var(--texto);
}


/* ==========================================
   GRÁFICO MESES
========================================== */

.grafico-meses {

    height: 185px;

    display: flex;

    align-items: flex-end;

    gap: 10px;

    overflow-x: auto;

    padding:
        20px
        4px
        0;
}


.barra-mes {

    min-width: 48px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: center;

    gap: 5px;
}


.barra-valor {

    font-size: 9px;

    color: var(--muted);
}


.barra {

    width: 23px;

    min-height: 3px;

    background:
        linear-gradient(
            180deg,
            var(--verde-claro),
            var(--verde)
        );

    border-radius:
        6px
        6px
        2px
        2px;
}


.barra-mes small {

    color: var(--muted);

    font-size: 10px;
}


/* ==========================================
   DETALHE COMPROVANTE
========================================== */

.detalhe-comprovante {

    min-height: 130px;
}


.detalhe-vazio {

    min-height: 90px;

    display: grid;

    place-items: center;

    text-align: center;

    color: var(--muted);

    font-size: 13px;
}


.detalhe-topo {

    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.detalhe-topo small {

    color: var(--muted);

    display: block;

    margin-top: 4px;
}


.detalhe-total {

    font-size: 20px;

    color: var(--verde-claro);
}


.detalhe-item {

    display: flex;

    justify-content:
        space-between;

    padding:
        7px
        0;

    border-bottom:
        1px solid
        var(--borda);

    color: #aab3bf;

    font-size: 13px;
}


.detalhe-rodape {

    display: flex;

    justify-content:
        space-between;

    padding-top: 14px;

    margin-top: 10px;

    font-weight: 600;
}


/* ==========================================
   RESPONSIVO
========================================== */

@media (max-width: 950px) {

    .app {

        display: block;
    }


    .sidebar {

        position: relative;

        width: 100%;

        height: auto;

        border-right: none;

        border-bottom:
            1px solid
            var(--borda);
    }


    .sidebar-conteudo {

        width: 100%;

        max-height: 380px;
    }


    .sidebar-recolhida
    .sidebar {

        height: 58px;
    }


    .botao-recolher {

        right: 15px;

        top: 9px;

        border-radius: 8px;
    }


    .conteudo-principal {

        padding:
            25px
            18px
            50px;
    }


    .cards-financeiros {

        grid-template-columns:
            1fr;
    }


    .area-graficos {

        grid-template-columns:
            1fr;
    }


    .categoria-grafico-area {

        flex-direction: column;
    }
}


@media (max-width: 550px) {

    .cabecalho {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        gap: 12px;

        min-height: auto;
    }


    .cabecalho-texto {

        width: 100%;

        text-align: center;
    }


    .mes-atual {

        position: static;

        transform: none;
    }


    .card-financeiro.destaque
    strong {

        font-size: 32px;
    }
}