/* =========================================================
   RESET E CONFIGURAÇÕES GERAIS
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: #eef2f6;
    color: #1f2937;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

/* =========================================================
   CABEÇALHO E MENU
========================================================= */

.topo {
    width: 100%;
    background: #1a1a1a; /* Um tom de preto mais suave */
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.topo-conteudo {
    width: min(1400px, 94%);
    min-height: 68px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.menu a {
    color: #ffffff;
    padding: 9px 11px;
    border-radius: 5px;
    font-size: 13px;
    transition: background 0.2s ease;
}

.menu a:hover {
    background: rgba(255, 255, 255, 0.18);
}

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

.conteudo {
    width: min(1400px, 94%);
    margin: 0 auto;
    padding: 28px 0 45px;
}

h1 {
    margin: 0 0 22px;
    color: #123c69;
    font-size: 28px;
}

h2 {
    margin: 28px 0 13px;
    color: #123c69;
    font-size: 20px;
}

h3 {
    color: #123c69;
}

/* =========================================================
   CARDS DO PAINEL (genéricos, usados fora do dashboard)
========================================================= */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 14px;
    margin-bottom: 25px;
}

.card {
    min-height: 105px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #d8e0e8;
    border-left: 5px solid #1976b9;
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(15, 39, 63, 0.08);
}

.card span {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.card strong {
    color: #123c69;
    font-size: 22px;
}

/* =========================================================
   FILTROS
========================================================= */

.filtros {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(15, 39, 63, 0.06);
}

.filtros label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================
   FORMULÁRIOS
========================================================= */

form {
    margin: 0;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    color: #1e293b;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    outline: none;
    font-size: 13px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #1976b9;
    box-shadow: 0 0 0 2px rgba(25, 118, 185, 0.13);
}

textarea {
    min-height: 90px;
    resize: vertical;
}

button,
.btn,
.btn-limpar {
    display: inline-block;
    min-height: 36px;
    padding: 9px 15px;
    color: #ffffff;
    background: #1769aa;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.1s ease;
}

button:hover,
.btn:hover {
    background: #125487;
}

button:active,
.btn:active {
    transform: translateY(1px);
}

.btn-limpar {
    color: #334155;
    background: #e2e8f0;
}

.btn-limpar:hover {
    background: #cbd5e1;
}

/* =========================================================
   TABELAS
========================================================= */

table {
    width: 100%;
    margin: 0 0 24px;
    border-collapse: collapse;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(15, 39, 63, 0.07);
}

th {
    padding: 12px 10px;
    color: #ffffff;
    background: #1769aa;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

td {
    padding: 10px;
    color: #334155;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    vertical-align: middle;
}

tbody tr:hover,
tr:hover {
    background: #f1f7fc;
}

tr:last-child td {
    border-bottom: none;
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

/* =========================================================
   FORMULÁRIOS DE PEDIDOS / GRID
========================================================= */

.formulario,
.form-card,
.painel-form {
    padding: 22px;
    background: #ffffff;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(15, 39, 63, 0.07);
}

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

.campo-completo {
    grid-column: 1 / -1;
}

/* =========================================================
   STATUS E LINHAS
========================================================= */

.status-ok {
    color: #15803d;
    font-weight: 700;
}

.status-pendente {
    color: #b45309;
    font-weight: 700;
}

.linha-atrasada {
    background: #fff1f2 !important;
}

.linha-atrasada td {
    color: #991b1b;
}

/* =========================================================
   BOTÕES PEQUENOS
========================================================= */

.btn-pequeno {
    min-height: 29px;
    padding: 5px 9px;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 19px;
    white-space: nowrap;
}

.btn-vermelho,
.btn-excluir {
    background: #c62828;
}

.btn-vermelho:hover,
.btn-excluir:hover {
    background: #991b1b;
}

.btn-salvar {
    background: #2563eb;
}

.btn-salvar:hover {
    background: #1d4ed8;
}

/* =========================================================
   CONFIGURAÇÕES (clientes, compradores, vendedores, fábricas)
========================================================= */

.grid-config {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 20px;
    align-items: start;
}

.bloco-config {
    padding: 18px;
    background: #ffffff;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 39, 63, 0.08);
}

.bloco-config h2 {
    margin-top: 0;
    margin-bottom: 14px;
    color: #123c69;
    font-size: 19px;
}

.form-adicionar {
    display: flex;
    gap: 7px;
    margin-bottom: 14px;
}

.form-adicionar input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 34px;
    min-height: 34px;
}

.btn-adicionar {
    height: 34px;
    min-height: 34px;
    padding: 6px 11px;
    font-size: 12px;
    white-space: nowrap;
}

.lista-config {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-config li {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 0;
    border-bottom: 1px solid #edf0f2;
}

.lista-config li:last-child {
    border-bottom: none;
}

.linha-cadastro {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 5px;
    margin: 0;
}

.linha-cadastro input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 29px;
    min-height: 29px;
    padding: 4px 7px;
    font-size: 12px;
}

.form-excluir {
    flex-shrink: 0;
    margin: 0;
}

.form-editar {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 5px;
    margin: 0;
}

.form-editar input[type="text"] {
    flex: 1;
    min-width: 0;
}

/* =========================================================
   ALERTAS
========================================================= */

.alerta {
    margin-bottom: 18px;
    padding: 11px 14px;
    border-radius: 5px;
    font-size: 14px;
}

.alerta.sucesso {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
}

.alerta.erro {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fca5a5;
}

/* =========================================================
   EDIÇÃO DE RECEBIMENTO E PAGAMENTO
========================================================= */

.linha-recebido {
    line-height: 1.5;
}

.acoes-recebido {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.linha-edicao {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.linha-edicao input[type="date"],
.linha-edicao input[type="number"] {
    width: 130px;
    height: 30px;
    padding: 4px 6px;
    font-size: 12px;
}

.btn-editar {
    background: #f59e0b;
}

.btn-editar:hover {
    background: #d97706;
}

.btn-limpar-pequeno {
    background: #94a3b8;
}

.btn-limpar-pequeno:hover {
    background: #64748b;
}

/* =========================================================
   RODAPÉ
========================================================= */

footer {
    margin-top: 35px;
    padding: 18px;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

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

@media (max-width: 900px) {
    .topo-conteudo {
        align-items: flex-start;
        flex-direction: column;
        padding: 15px 0;
    }

    .menu {
        justify-content: flex-start;
    }

    .grid-config,
    .grid-form,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .campo-completo {
        grid-column: auto;
    }

    table {
        min-width: 760px;
    }

    .table-container {
        overflow-x: auto;
    }
}

@media (max-width: 600px) {
    .conteudo {
        width: 92%;
        padding-top: 20px;
    }

    h1 {
        font-size: 23px;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .form-adicionar {
        align-items: stretch;
        flex-direction: column;
    }

    .form-adicionar button {
        width: 100%;
    }

    .lista-config li {
        align-items: stretch;
    }

    .linha-cadastro {
        flex-wrap: wrap;
    }

    .linha-cadastro input[type="text"] {
        width: 100%;
        flex-basis: 100%;
    }

    .linha-cadastro .btn-pequeno,
    .form-excluir .btn-pequeno {
        min-width: 65px;
    }
}

/* =========================================================
   CABEÇALHO DE PÁGINA COM BOTÃO DE AÇÃO
========================================================= */

.cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.cabecalho-pagina h1 {
    margin: 0;
}

.btn-novo-pedido {
    display: inline-block;
    padding: 10px 18px;
    color: #ffffff;
    background: #15803d;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.btn-novo-pedido:hover {
    background: #166534;
}

/* =========================================================
   RESUMO FINANCEIRO (bloco antigo, ainda usado em outras páginas)
========================================================= */

.resumo-financeiro {
    margin-top: 25px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(15, 39, 63, 0.07);
}

.resumo-financeiro h2 {
    margin-top: 0;
}

.resumo-linhas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.resumo-linhas div {
    padding: 12px;
    background: #f8fafc;
    border-radius: 6px;
}

.resumo-linhas span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.resumo-linhas strong {
    color: #123c69;
    font-size: 17px;
}

/* =========================================================
   DASHBOARD FINANCEIRO — HEADER
========================================================= */

.dashboard-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e5e7eb;
}

.dashboard-header h1 {
    margin: 0 0 5px 0;
    font-size: 28px;
    color: #111827;
}

.dashboard-subtitle {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* =========================================================
   TÍTULOS DE SEÇÃO (Financeiro, Comissões, etc.)
========================================================= */

.dashboard-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 14px 0;
    padding-left: 2px;
    color: #123c69;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.dashboard-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #d8e0e8, transparent);
}

/* =========================================================
   CARDS DO DASHBOARD — visual clean, acento colorido lateral
========================================================= */

.cards-resumo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 10px;
}

.card-resumo {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--card-accent, #94a3b8);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(15, 39, 63, 0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card-resumo:hover {
    box-shadow: 0 6px 14px rgba(15, 39, 63, 0.12);
    transform: translateY(-2px);
}

.card-resumo span {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
}

.card-resumo strong {
    font-size: 25px;
    font-weight: 800;
    color: #123c69;
    line-height: 1.2;
}

.card-resumo small {
    font-size: 11.5px;
    font-weight: 500;
    color: #94a3b8;
}

.cards-resumo-secundaria {
    margin-top: 4px;
}

/* =========================================================
   CORES DE ACENTO POR CATEGORIA
========================================================= */

/* Financeiro */
.card-a-pagar        { --card-accent: #ef4444; }
.card-a-receber       { --card-accent: #3b82f6; }
.card-antecipado      { --card-accent: #10b981; }
.card-inadimplencia   { --card-accent: #f59e0b; }

/* Comissões */
.card-comissao            { --card-accent: #8b5cf6; }
.card-comissao-pagar      { --card-accent: #ef4444; }
.card-comissao-receber    { --card-accent: #f97316; }
.card-diferenca-comissao  { --card-accent: #6366f1; }

/* Lucratividade */
.card-lucro-compra          { --card-accent: #10b981; }
.card-lucro-total           { --card-accent: #059669; }
.card-percentual-investido  { --card-accent: #f59e0b; }
.card-percentual-operacao   { --card-accent: #eab308; }

/* Indicadores Operacionais */
.card-ticket-medio         { --card-accent: #64748b; }
.card-ticket-medio-venda   { --card-accent: #334155; }
.card-margem-real          { --card-accent: #3b82f6; }
.card-acrescimos           { --card-accent: #14b8a6; }

/* =========================================================
   RESPONSIVO DO DASHBOARD
========================================================= */

@media (max-width: 1024px) {
    .cards-resumo {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .cards-resumo {
        grid-template-columns: 1fr;
    }
}

.status-parcial {
    color: #b45309;
    font-weight: 700;
}

.status-parcial + small {
    display: block;
    margin-top: 4px;
    color: #92400e;
    font-weight: 500;
}

/* =========================================================
   STATUS COLORIDOS (Pagamentos Antecipados e Parcelas)
========================================================= */

.status-ok {
    color: #15803d;
    font-weight: 700;
}

.status-aberto {
    color: #dc2626;
    font-weight: 700;
}

.status-parcial {
    color: #b45309;
    font-weight: 700;
}

.status-parcial + small,
.status-aberto + small,
.status-ok + small {
    display: block;
    margin-top: 4px;
    font-weight: 500;
    color: #6b7280;
}

/* =========================================================
   ACCORDION DE CADASTROS (configuracoes.php)
========================================================= */

.grid-config-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bloco-accordion {
    background: #ffffff;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    overflow: hidden;
}

.bloco-accordion-titulo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f8fafc;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #123c69;
    text-align: left;
}

.bloco-accordion-titulo:hover {
    background: #eef2f6;
}

.bloco-accordion-contador {
    background: #1976b9;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

.bloco-accordion-conteudo {
    padding: 18px 20px;
    border-top: 1px solid #eef2f6;
}

.link-destaque {
    color: #1769aa;
    font-weight: 700;
    text-decoration: underline;
}

.link-destaque:hover {
    color: #123c69;
}

/* =========================================================
   CARDS DE INDICADORES (index.php e parcelas.php)
========================================================= */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    color: inherit;
}

.card span {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.card strong {
    font-size: 24px;
    font-weight: 800;
    color: #123c69;
}

.card small {
    font-size: 12px;
    color: #94a3b8;
}

/* Card clicável (usado no link de Inadimplência do index) */
.card-link {
    cursor: pointer;
}

.card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: #94a3b8;
}

/* Card de alerta (inadimplência, valores vencidos) */
.card-alerta {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
}

.card-alerta span {
    color: #b91c1c;
}

.card-alerta strong {
    color: #991b1b;
}

/* Card positivo (valores recebidos, sucesso) */
.card-sucesso {
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
}

.card-sucesso span {
    color: #15803d;
}

.card-sucesso strong {
    color: #166534;
}

/* Responsivo: empilha em telas pequenas */
@media (max-width: 640px) {
    .cards {
        grid-template-columns: 1fr;
    }
}
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin: 20px 0 28px;
}

.card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.card span,
.card-resumo span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.card strong,
.card-resumo strong {
    display: block;
    margin-top: 8px;
    color: #123c69;
    font-size: 24px;
    font-weight: 800;
}

.card small,
.card-resumo small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
}

.card-alerta,
.card-inadimplencia {
    border-left: 4px solid #dc2626;
    background: #fff7f7;
}

.card-alerta strong,
.card-inadimplencia strong {
    color: #b91c1c;
}

.card-sucesso {
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
}

.card-sucesso strong {
    color: #15803d;
}

.card-link {
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.linha-atrasada {
    background: #fff7f7;
}

.texto-atraso {
    color: #b91c1c;
    font-weight: 700;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.table-container table {
    width: 100%;
    min-width: 1250px;
    border-collapse: collapse;
}

.table-container th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-container th,
.table-container td {
    padding: 12px 10px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.table-container tr:last-child td {
    border-bottom: 0;
}

.linha-edicao {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.linha-edicao input,
.table-container td input {
    max-width: 150px;
}

.acoes-recebido {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.status-ok {
    color: #15803d;
    font-weight: 800;
}

.status-pendente {
    color: #b91c1c;
    font-weight: 800;
}

.status-parcial {
    color: #b45309;
    font-weight: 800;
}

@media (max-width: 700px) {
    .cards {
        grid-template-columns: 1fr;
    }

    .filtros {
        display: flex;
        flex-direction: column;
    }

    .filtros label,
    .filtros input,
    .filtros select,
    .filtros button,
    .filtros a {
        width: 100%;
    }
}


/* Estilos para os cards de resumo */
.cards-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0 25px;
}

.card-resumo {
    display: block; /* Garante que o <a> se comporte como bloco */
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.card-resumo span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.card-resumo strong {
    display: block;
    margin-top: 8px;
    color: #123c69;
    font-size: 23px;
}

.card-resumo small {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
}

/* Estilos para cards clicáveis */
.card-link {
    color: inherit; /* Mantém a cor do texto padrão */
    text-decoration: none; /* Remove sublinhado padrão de link */
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.card-link:hover {
    color: inherit;
    text-decoration: none;
    transform: translateY(-3px); /* Efeito de "levantar" */
    border-color: #2563eb; /* Borda azul ao passar o mouse */
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
}

/* Cores específicas para cada tipo de card */
.card-a-receber {
    border-left: 4px solid #2563eb; /* Borda azul */
    background: #eff6ff; /* Fundo azul claro */
}
.card-a-receber strong {
    color: #1d4ed8;
}

.card-a-pagar {
    border-left: 4px solid #d97706; /* Borda laranja */
    background: #fffbeb; /* Fundo laranja claro */
}
.card-a-pagar strong {
    color: #b45309;
}

.card-parcelas-mes {
    border-left: 4px solid #7c3aed; /* Borda roxa */
    background: #faf5ff; /* Fundo roxo claro */
}
.card-parcelas-mes strong {
    color: #6d28d9;
}

.card-recebido-mes {
    border-left: 4px solid #16a34a; /* Borda verde */
    background: #f0fdf4; /* Fundo verde claro */
}
.card-recebido-mes strong {
    color: #15803d;
}

.card-inadimplencia {
    border-left: 4px solid #dc2626; /* Borda vermelha */
    background: #fff7f7; /* Fundo vermelho claro */
}
.card-inadimplencia strong {
    color: #b91c1c;
}

.card-sucesso { /* Usado para o card "Recebidas" */
    border-left: 4px solid #16a34a; /* Borda verde */
    background: #f0fdf4; /* Fundo verde claro */
}
.card-sucesso strong {
    color: #15803d;
}

/* Estilos para a tabela */
.tabela-container {
    overflow-x: auto; /* Permite rolagem horizontal em telas pequenas */
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.tabela-container table {
    width: 100%;
    min-width: 1200px; /* Garante que a tabela não fique muito estreita */
    border-collapse: collapse;
}

.tabela-container th,
.tabela-container td {
    padding: 11px 9px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.tabela-container th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap; /* Evita quebra de linha no cabeçalho */
}

.tabela-container tr:last-child td {
    border-bottom: 0; /* Remove borda da última linha */
}

/* Estilos para linhas atrasadas */
.linha-atrasada {
    background: #fff5f5; /* Fundo vermelho bem claro */
}

.texto-atraso {
    color: #b91c1c; /* Texto vermelho escuro */
    font-weight: 700;
}

/* Estilos para formulários de edição inline */
.linha-edicao {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.linha-edicao input,
.tabela-container td input {
    max-width: 150px; /* Limita largura dos inputs na tabela */
}

.acoes-recebido {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

/* Estilos de status */
.status-ok {
    color: #15803d; /* Verde */
    font-weight: 800;
}

.status-pendente {
    color: #b91c1c; /* Vermelho */
    font-weight: 800;
}

.status-parcial {
    color: #b45309; /* Laranja */
    font-weight: 800;
}

/* Estilos para alertas */
.alerta {
    padding: 12px 18px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.alerta.sucesso {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.alerta.erro {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.alerta.info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

/* Botões pequenos */
.btn-pequeno {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    display: inline-block;
}

.btn-pequeno:hover {
    background-color: #e0e0e0;
}

.btn-pequeno.btn-editar {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

.btn-pequeno.btn-editar:hover {
    background-color: #1d4ed8;
}

.btn-pequeno.btn-vermelho {
    background-color: #dc2626;
    color: white;
    border-color: #dc2626;
}

.btn-pequeno.btn-vermelho:hover {
    background-color: #b91c1c;
}

.btn-pequeno.btn-salvar {
    background-color: #16a34a;
    color: white;
    border-color: #16a34a;
}

.btn-pequeno.btn-salvar:hover {
    background-color: #15803d;
}

.btn-pequeno.btn-limpar-pequeno {
    background-color: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}

.btn-pequeno.btn-limpar-pequeno:hover {
    background-color: #eef2f6;
}

/* Responsividade básica */
@media (max-width: 768px) {
    .filtros {
        flex-direction: column;
    }
    .filtros label, .filtros button, .filtros .btn-limpar {
        width: 100%;
    }
    .cards-resumo {
        grid-template-columns: 1fr;
    }
}

/* Estilo para cards de informação neutra */
.card-info {
    border-left: 4px solid #60a5fa; /* Borda azul claro */
    background: #eff6ff; /* Fundo azul muito claro */
}
.card-info strong {
    color: #2563eb; /* Texto azul */
}

/* Estilo para o botão "Novo Pedido" */
.btn-novo-pedido {
    display: inline-block;
    padding: 8px 15px;
    background-color: #28a745; /* Verde */
    color: white;
    border: 1px solid #28a745;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
    margin-left: 10px; /* Espaçamento do botão "Limpar" */
    white-space: nowrap; /* Evita quebra de linha */
}

.btn-novo-pedido:hover {
    background-color: #218838; /* Verde mais escuro no hover */
    color: white;
    text-decoration: none;
}

/* Ajuste para o formulário de filtros para melhor alinhamento */
.filtros {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem linha */
    gap: 10px; /* Espaçamento entre os itens */
    align-items: flex-end; /* Alinha os itens pela base */
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.filtros label {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #495057;
}

.filtros label input,
.filtros label select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-top: 4px;
    min-width: 150px; /* Garante largura mínima para inputs/selects */
}

.filtros button,
.filtros .btn-limpar {
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.filtros button[type="submit"] {
    background-color: #007bff; /* Azul */
    color: white;
    border: 1px solid #007bff;
}

.filtros button[type="submit"]:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.filtros .btn-limpar {
    background-color: #6c757d; /* Cinza */
    color: white;
    border: 1px solid #6c757d;
}

.filtros .btn-limpar:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* Responsividade para o formulário de filtros */
@media (max-width: 768px) {
    .filtros {
        flex-direction: column;
        align-items: stretch;
    }
    .filtros label,
    .filtros button,
    .filtros .btn-limpar,
    .filtros .btn-novo-pedido {
        width: 100%;
        margin-left: 0 !important; /* Remove margin-left em telas pequenas */
    }
}

/* Estilos para o formulário de filtros */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espaçamento entre os grupos de filtros */
    align-items: flex-start; /* Alinha os grupos no topo */
    margin-bottom: 25px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.filtro-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espaçamento entre os campos dentro de um grupo */
    flex-grow: 1; /* Permite que os grupos ocupem o espaço disponível */
    align-items: flex-end; /* Alinha os campos pela base */
}

.filtros label {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #495057;
    font-weight: 600;
}

.filtros label input,
.filtros label select {
    padding: 9px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    margin-top: 5px;
    min-width: 160px; /* Garante largura mínima para inputs/selects */
    font-size: 14px;
    background-color: #ffffff;
}

.filtros label select[disabled],
.filtros label input[disabled] {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.filtro-botoes {
    display: flex;
    justify-content: center; /* Centraliza os botões */
    width: 100%; /* Ocupa toda a largura para centralizar */
    gap: 15px; /* Espaçamento entre os botões */
    margin-top: 15px; /* Espaçamento do grupo de filtros */
}

.btn-filtrar,
.btn-limpar {
    padding: 10px 25px; /* Botões maiores */
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-size: 15px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-filtrar {
    background-color: #007bff; /* Azul */
    color: white;
    border: 1px solid #007bff;
}

.btn-filtrar:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-limpar {
    background-color: #6c757d; /* Cinza */
    color: white;
    border: 1px solid #6c757d;
}

.btn-limpar:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* Responsividade para o formulário de filtros */
@media (max-width: 768px) {
    .filtros {
        flex-direction: column;
        align-items: stretch;
    }
    .filtro-grupo {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .filtros label,
    .filtros label input,
    .filtros label select,
    .filtro-botoes button,
    .filtro-botoes .btn-limpar {
        width: 100%;
        min-width: unset;
    }
    .filtro-botoes {
        flex-direction: column;
    }
}

/* =========================================================
   Filtros compactos da página de parcelas
   ========================================================= */

.page-container,
.container,
.main-container {
    padding-top: 18px;
}

.page-container h1,
.container h1,
.main-container h1 {
    margin-top: 0;
    margin-bottom: 16px;
}

/* Painel dos filtros */
.filtros {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.5fr)
        repeat(5, minmax(125px, 1fr))
        minmax(145px, 1.1fr)
        minmax(145px, 1.1fr);

    align-items: end;
    gap: 8px 10px;

    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    margin-bottom: 18px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.06);
}

/*
   Caso os campos estejam dentro de .filtro-grupo,
   eles passam a ocupar diretamente a grade.
*/
.filtros .filtro-grupo {
    display: contents;
}

/* Cada campo */
.filtros label {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-width: 0;
    margin: 0;

    color: #334155;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

/* Inputs e selects compactos */
.filtros input,
.filtros select {
    width: 100%;
    min-width: 0;
    height: 34px;
    box-sizing: border-box;

    margin-top: 4px;
    padding: 5px 8px;

    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff;

    color: #334155;
    font-size: 12px;
}

/* Campo de busca */
.filtros input[name="busca"] {
    min-width: 180px;
}

/* Campos de data */
.filtros input[type="date"] {
    min-width: 135px;
}

/* Campo de período */
.filtros select[name="periodo_pre_definido"] {
    min-width: 140px;
}

/* Campos desabilitados */
.filtros input:disabled,
.filtros select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Área dos botões */
.filtro-botoes {
    display: flex;
    align-items: end;
    justify-content: flex-start;
    gap: 7px;

    height: 34px;
    margin: 0;
}

/* Caso os botões não estejam dentro de .filtro-botoes */
.filtros > button,
.filtros > a {
    align-self: end;
}

/* Botões compactos */
.btn-filtrar,
.btn-limpar,
.filtro-botoes button,
.filtro-botoes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 34px;
    box-sizing: border-box;

    padding: 0 15px;
    border-radius: 6px;

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

/* Botão Filtrar */
.btn-filtrar,
.filtro-botoes button[type="submit"] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}

.btn-filtrar:hover,
.filtro-botoes button[type="submit"]:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* Botão Limpar */
.btn-limpar,
.filtro-botoes .btn-limpar,
.filtro-botoes a {
    border: 1px solid #64748b;
    background: #64748b;
    color: #ffffff;
}

.btn-limpar:hover,
.filtro-botoes .btn-limpar:hover,
.filtro-botoes a:hover {
    background: #475569;
    border-color: #475569;
}

/* Se o botão limpar estiver com outro nome de classe */
.filtros a[href="parcelas.php"],
.filtros a[href$="parcelas.php"] {
    height: 34px;
    padding: 0 15px;
}

/* Cards ficam mais próximos dos filtros */
.cards-resumo {
    margin-top: 0;
    margin-bottom: 18px;
    gap: 12px;
}

/* Cards um pouco mais baixos */
.card-resumo {
    min-height: 92px;
    padding: 13px 16px;
}

.card-resumo strong {
    margin-top: 5px;
    font-size: 21px;
}

.card-resumo small {
    margin-top: 5px;
    font-size: 11px;
}

/* Responsividade para telas médias */
@media (max-width: 1250px) {
    .filtros {
        grid-template-columns: repeat(4, minmax(145px, 1fr));
    }

    .filtros label:first-child {
        grid-column: span 2;
    }

    .filtro-botoes {
        grid-column: span 2;
    }
}

/* Responsividade para celular */
@media (max-width: 760px) {
    .filtros {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 12px;
    }

    .filtros .filtro-grupo {
        display: contents;
    }

    .filtros label:first-child,
    .filtro-botoes {
        grid-column: auto;
    }

    .filtros input,
    .filtros select {
        width: 100%;
    }

    .filtro-botoes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: auto;
        margin-top: 4px;
    }

    .btn-filtrar,
    .btn-limpar,
    .filtro-botoes button,
    .filtro-botoes a {
        width: 100%;
    }

    .cards-resumo {
        grid-template-columns: 1fr;
    }
}

.acoes-celula {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.tabela-container td form {
    margin-top: 6px;
}

.tabela-container td strong {
    display: inline-block;
    margin-bottom: 3px;
}

.status-ok {
    color: #15803d;
    font-weight: 800;
}

.status-pendente {
    color: #b91c1c;
    font-weight: 800;
}

.linha-edicao {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.linha-edicao input,
.tabela-container td input {
    max-width: 150px;
}

.tabela-container th:nth-child(8),
.tabela-container th:nth-child(9),
.tabela-container th:nth-child(10),
.tabela-container td:nth-child(8),
.tabela-container td:nth-child(9),
.tabela-container td:nth-child(10) {
    min-width: 170px;
}

/* Estilos para o bloco da logo no cabeçalho (padrão para desktop) */
.logo-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha à esquerda no desktop */
    justify-content: center;
    height: 100px; /* Altura do cabeçalho */
    text-decoration: none;
    color: inherit;
    white-space: nowrap; /* Evita quebra de linha */
}

/* Estilos para a imagem da logo dentro do cabeçalho (padrão para desktop) */
.logo-header img {
    height: 80px; /* Altura da imagem da logo */
    width: auto;
    max-width: 100px;
    object-fit: contain;
    margin-bottom: 1px;
}


/* =========================================================
   RESPONSIVIDADE PARA CELULAR (LOGO CENTRALIZADA)
========================================================= */

@media (max-width: 900px) {
    .topo-conteudo {
        /* O seu .topo-conteudo já tem flex-direction: column e align-items: flex-start; */
        /* Para centralizar a logo, precisamos ajustar o alinhamento do item específico */
        /* e, se necessário, o alinhamento do próprio .topo-conteudo */
        align-items: center; /* Centraliza todos os itens do topo-conteudo */
    }

    .logo-header {
        align-items: center; /* Centraliza a imagem e o texto "Finance" */
        margin: 10px 0; /* Adiciona um pouco de margem acima e abaixo da logo */
        height: auto; /* Permite que a altura se ajuste ao conteúdo */
    }

    .logo-header img {
        height: 65px; /* Aumenta um pouco a logo para celular, se desejar */
        max-width: 150px; /* Ajusta a largura máxima para celular */
    }

    .logo-header strong {
        font-size: 14px; /* Aumenta um pouco o texto "Finance" para celular */
    }
}