.cabecalho-dashboard {
    align-items: center;
}

.competencia-dashboard {
    display: grid;
    min-width: 220px;
    gap: 4px;
    padding: 14px 18px;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    background: var(--cor-superficie);
    box-shadow: 0 10px 30px rgba(23, 32, 30, 0.05);
}

.competencia-dashboard span {
    color: var(--cor-secundaria);
    font-size: 0.75rem;
    font-weight: 760;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.competencia-dashboard strong {
    font-size: 1rem;
}

.cabecalho-secao {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}

.cabecalho-secao h2 {
    margin-bottom: 0;
}

.cabecalho-secao-secundaria {
    margin-top: 32px;
}

.secao-dashboard {
    margin-top: 34px;
}

.grade-indicadores {
    display: grid;
    gap: 14px;
}

.grade-financeira {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grade-operacional {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cartao-indicador {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 132px;
    padding: 19px;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    flex-direction: column;
    justify-content: space-between;
    color: var(--cor-texto);
    background: var(--cor-superficie);
    box-shadow: 0 12px 34px rgba(23, 32, 30, 0.055);
}

.cartao-indicador::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #c4cfcc;
    content: "";
}

.cartao-indicador > span {
    color: var(--cor-secundaria);
    font-size: 0.84rem;
    font-weight: 720;
}

.cartao-indicador > strong {
    margin-block: 12px 5px;
    overflow-wrap: anywhere;
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    letter-spacing: -0.035em;
}

.cartao-indicador > small {
    color: var(--cor-secundaria);
    font-size: 0.76rem;
    line-height: 1.4;
}

.destaque-positivo::before,
.destaque-saldo::before {
    background: var(--cor-primaria);
}

.destaque-negativo::before {
    background: var(--cor-perigo);
}

.valor-negativo {
    color: var(--cor-perigo);
}

.cartao-link {
    min-height: 116px;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.cartao-link:hover,
.cartao-link:focus-visible {
    border-color: #9cbdb7;
    box-shadow: 0 14px 40px rgba(23, 32, 30, 0.09);
    transform: translateY(-2px);
}

.cartao-link:focus-visible,
.link-painel:focus-visible,
.item-dashboard a:focus-visible {
    outline: 3px solid rgba(19, 111, 99, 0.25);
    outline-offset: 3px;
}

.painel-meta {
    margin-top: 14px;
    padding: 21px 23px;
}

.meta-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.valor-meta {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.valor-meta strong {
    font-size: 1.45rem;
}

.valor-meta span {
    color: var(--cor-primaria-forte);
    font-size: 1rem;
    font-weight: 780;
}

.trilha-meta {
    height: 9px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eeec;
}

.trilha-meta span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--cor-primaria);
    transition: width 300ms ease;
}

.grade-graficos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cartao-grafico {
    min-height: 330px;
    padding: 21px;
}

.titulo-grafico,
.legendas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.titulo-grafico h3 {
    margin-bottom: 0;
    font-size: 1rem;
}

.legendas {
    justify-content: flex-end;
}

.legenda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cor-secundaria);
    font-size: 0.74rem;
    font-weight: 680;
}

.legenda::before {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--cor-primaria);
    content: "";
}

.legenda-despesa::before {
    background: #d8846f;
}

.grafico {
    min-height: 240px;
    margin-top: 22px;
}

.grafico svg {
    display: block;
    width: 100%;
    height: 240px;
    overflow: visible;
}

.grafico text {
    fill: var(--cor-secundaria);
    font-family: inherit;
    font-size: 11px;
}

.grafico .total-origem {
    fill: var(--cor-texto);
    font-size: 24px;
    font-weight: 800;
}

.grafico .linha-grade {
    stroke: #e4ebe9;
    stroke-width: 1;
}

.grafico .barra-recebido {
    fill: var(--cor-primaria);
}

.grafico .barra-despesa {
    fill: #d8846f;
}

.grafico-origem {
    display: grid;
    grid-template-columns: minmax(150px, 0.75fr) 1fr;
    align-items: center;
    gap: 26px;
}

.grafico-origem svg {
    height: 205px;
}

.resumo-origem {
    display: grid;
    gap: 14px;
}

.item-origem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cor-borda);
}

.item-origem:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.item-origem span {
    color: var(--cor-secundaria);
    font-size: 0.84rem;
}

.item-origem strong {
    font-size: 1.15rem;
}

.lista-barras {
    display: grid;
    gap: 14px;
}

.item-barra {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 2fr auto;
    align-items: center;
    gap: 12px;
}

.item-barra > span {
    overflow: hidden;
    font-size: 0.84rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trilha-barra {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eeec;
}

.trilha-barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cor-primaria);
}

.item-barra strong {
    min-width: 24px;
    text-align: right;
}

.grade-acompanhamento,
.grade-ultimos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.painel-lista,
.painel-tabela {
    min-width: 0;
}

.cabecalho-painel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--cor-borda);
}

.cabecalho-painel h2 {
    margin-bottom: 0;
}

.link-painel {
    color: var(--cor-primaria-forte);
    font-size: 0.84rem;
    font-weight: 760;
    text-decoration: none;
    white-space: nowrap;
}

.lista-dashboard {
    display: grid;
}

.item-dashboard {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--cor-borda);
}

.item-dashboard:last-child {
    border-bottom: 0;
}

.marcador-item {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: #91aaa5;
}

.marcador-urgente {
    background: var(--cor-perigo);
}

.marcador-importante,
.marcador-alta,
.marcador-atrasada {
    background: #c6782c;
}

.marcador-atencao {
    background: #d0a431;
}

.marcador-informativo {
    background: #4c82af;
}

.item-alerta {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
}

.meta-alerta {
    display: block;
    margin-top: 7px;
    color: var(--cor-secundaria);
    font-size: 0.7rem;
    font-weight: 700;
}

.botao-dispensar-alerta {
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    color: var(--cor-secundaria);
    background: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}

.botao-dispensar-alerta:hover,
.botao-dispensar-alerta:focus-visible {
    border-color: #a8c5c0;
    outline: 0;
    color: var(--cor-primaria-forte);
    background: var(--cor-primaria-suave);
}

.botao-dispensar-alerta:disabled {
    cursor: wait;
    opacity: 0.55;
}

.item-dashboard a,
.item-dashboard strong {
    color: var(--cor-texto);
    font-size: 0.91rem;
    text-decoration: none;
}

.item-dashboard p {
    margin: 4px 0 0;
    color: var(--cor-secundaria);
    font-size: 0.78rem;
    line-height: 1.45;
}

@media (max-width: 520px) {
    .item-alerta {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .botao-dispensar-alerta {
        grid-column: 2;
        justify-self: start;
    }
}

.estado-lista {
    padding: 30px 22px;
    color: var(--cor-secundaria);
    text-align: center;
}

.painel-tabela th,
.painel-tabela td {
    padding-inline: 15px;
}

.painel-tabela td {
    font-size: 0.85rem;
}

.nome-registro {
    display: block;
    color: var(--cor-texto);
    font-weight: 730;
    text-decoration: none;
}

.codigo-registro {
    display: block;
    margin-bottom: 2px;
    color: var(--cor-secundaria);
    font-size: 0.7rem;
}

.estado-vazio-compacto {
    padding: 30px 22px;
}

.selo-dashboard {
    white-space: nowrap;
}

.selo-perigo {
    color: var(--cor-perigo);
    background: var(--cor-perigo-suave);
}

@media (max-width: 980px) {
    .grade-financeira,
    .grade-operacional {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grade-acompanhamento,
    .grade-ultimos {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .cabecalho-dashboard,
    .cabecalho-secao {
        align-items: stretch;
    }

    .competencia-dashboard {
        min-width: 0;
    }

    .grade-graficos {
        grid-template-columns: 1fr;
    }

    .painel-tabela tbody {
        padding-block: 6px;
    }

    .painel-tabela tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .painel-tabela td:first-child {
        grid-column: 1 / -1;
    }

    .painel-tabela td:last-child {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .grade-financeira,
    .grade-operacional,
    .painel-tabela tbody tr {
        grid-template-columns: 1fr;
    }

    .cartao-indicador {
        min-height: 112px;
    }

    .meta-conteudo,
    .cabecalho-painel,
    .titulo-grafico {
        align-items: flex-start;
        flex-direction: column;
    }

    .valor-meta {
        justify-content: space-between;
        width: 100%;
    }

    .cartao-grafico {
        min-height: 300px;
        padding: 17px;
    }

    .grafico-origem {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .grafico-origem svg {
        height: 155px;
    }

    .item-barra {
        grid-template-columns: 1fr auto;
    }

    .trilha-barra {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .painel-tabela td,
    .painel-tabela td:first-child,
    .painel-tabela td:last-child {
        grid-column: 1;
    }
}