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

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

:root{

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --success:#22c55e;
    --danger:#ef4444;
    --warning:#f59e0b;

    --background:#f4f7fb;
    --card:#ffffff;

    --text:#1e293b;
    --text-light:#64748b;

    --border:#e2e8f0;

    --shadow:
        0 8px 24px rgba(15,23,42,.06);

    --radius:16px;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--background);
    color:var(--text);

}

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

.sidebar{

    position:fixed;

    left:0;
    top:0;

    width:260px;
    height:100vh;

    background:#111827;

    color:white;

    padding:35px;

    display:flex;
    flex-direction:column;

}

.logo{

    margin-bottom:50px;

}

.logo h2{

    font-size:28px;
    font-weight:700;

}

.logo span{

    color:#94a3b8;

    font-size:14px;

}

.sidebar nav{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.sidebar nav a{

    text-decoration:none;
    color:#d1d5db;

    padding:14px 18px;

    border-radius:12px;

    transition:.25s;

    display:flex;
    align-items:center;
    gap:12px;

}

.sidebar nav a:hover{

    background:#1f2937;

}

.sidebar nav a.active{

    background:var(--primary);

    color:white;

}

/* ============================================
   MAIN
============================================ */

main{

    margin-left:260px;

    padding:40px;

}

/* ============================================
   HEADER
============================================ */

header{

    display:flex;

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

    margin-bottom:35px;

}

header h1{

    font-size:34px;

    font-weight:700;

}

header p{

    color:var(--text-light);

    margin-top:5px;

}

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

.btn-primary{

    background:var(--primary);

    color:white;

    border:none;

    padding:14px 26px;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

}

.btn-secondary{

    background:white;

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

    color:var(--text);

    padding:11px 18px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

}

.btn-secondary:hover{

    background:#f8fafc;

}

/* ============================================
   CARDS RESUMO
============================================ */

.summary{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-bottom:35px;

}

.card{

    background:var(--card);

    padding:25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.card h3{

    font-size:15px;

    color:var(--text-light);

    font-weight:500;

}

.card span{

    display:block;

    margin-top:12px;

    font-size:28px;

    font-weight:700;

}

.card.destaque{

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:white;

}

.card.destaque h3{

    color:white;

}

/* ============================================
   GRID PRINCIPAL
============================================ */

.container-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

    margin-bottom:30px;

}

/* ============================================
   PANELS
============================================ */

.panel{

    background:white;

    border-radius:18px;

    padding:28px;

    margin-bottom:28px;

    box-shadow:var(--shadow);

}

.panel h2{

    font-size:22px;

    margin-bottom:25px;

}

.panel-title{

    display:flex;

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

    margin-bottom:25px;

}

/* ============================================
   RESUMO LATERAL
============================================ */

.resume-box{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.resume-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    background:#f8fafc;

    border-radius:12px;

}

.resume-item span{

    color:var(--text-light);

}

.resume-item strong{

    font-size:18px;

}

/* ============================================
   SCROLL
============================================ */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:50px;

}

::-webkit-scrollbar-track{

    background:#f1f5f9;

}
/* ============================================
   INPUTS
============================================ */

.input-group{

    display:flex;
    flex-direction:column;

    margin-bottom:22px;

}

.input-group label{

    font-size:14px;
    font-weight:500;
    color:var(--text-light);

    margin-bottom:8px;

}

.input-group input,
.input-group select{

    width:100%;

    height:50px;

    padding:0 18px;

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

    border-radius:12px;

    outline:none;

    font-size:15px;

    transition:.25s;

    background:white;

}

.input-group input:focus,
.input-group select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}


/* ============================================
   TABELA
============================================ */

table{

    width:100%;

    border-collapse:collapse;

}

thead{

    background:#f1f5f9;

}

thead th{

    text-align:left;

    padding:16px;

    font-size:14px;

    color:var(--text-light);

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

}

tbody td{

    padding:16px;

    border-bottom:1px solid #edf2f7;

    transition:.2s;

}

tbody tr{

    transition:.2s;

}

tbody tr:hover{

    background:#f8fafc;

}

/* ============================================
   BADGES
============================================ */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.badge.ato{

    background:#dcfce7;
    color:#166534;

}

.badge.mensal{

    background:#dbeafe;
    color:#1d4ed8;

}

.badge.semestral{

    background:#ede9fe;
    color:#6d28d9;

}

.badge.anual{

    background:#ffedd5;
    color:#c2410c;

}

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

button{

    font-family:'Poppins',sans-serif;

}

button:active{

    transform:scale(.98);

}

/* ============================================
   ANIMAÇÕES
============================================ */

.card,
.panel,

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:1300px){

    .summary{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:1050px){

    .container-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:900px){

    .sidebar{

        width:90px;
        padding:25px 15px;

    }

    .sidebar .logo span{

        display:none;

    }

    .sidebar h2{

        font-size:20px;

    }

    .sidebar a{

        justify-content:center;

    }

    .sidebar a i{

        font-size:20px;

    }

    .sidebar a{

        font-size:0;

    }

    main{

        margin-left:90px;

    }

}

@media(max-width:700px){

    header{

        flex-direction:column;
        align-items:flex-start;
        gap:20px;

    }

    .summary{

        grid-template-columns:1fr;

    }

    main{

        padding:20px;

    }

}

@media(max-width:500px){

    .panel{

        padding:18px;

    }

    header h1{

        font-size:24px;

    }

    .card span{

        font-size:22px;

    }

    table{

        display:block;
        overflow-x:auto;

    }

}
.parcela-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.parcela-header h3{

    margin:0;

}

.parcela-remover{

    background:#ef4444;

    color:white;

    border:none;

    width:35px;

    height:35px;

    border-radius:8px;

    cursor:pointer;

}

.parcela-remover:hover{

    background:#dc2626;

}

/* ============================================
   NOVO LAYOUT FLUXO (LISTA HORIZONTAL)
============================================ */
.fluxo-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fluxo-linha {
    display: flex;
    align-items: flex-end; /* Garante que os inputs fiquem na mesma linha do botão */
    gap: 15px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px 20px;
    transition: .25s;
}

.fluxo-linha:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,.03);
}

.campo-grupo {
    display: flex;
    flex-direction: column;
}

/* Tamanhos proporcionais para cada coluna */
.campo-grupo:nth-child(1) { flex: 1.5; } /* Tipo */
.campo-grupo:nth-child(2) { flex: 0.8; } /* Qtd */
.campo-grupo:nth-child(3) { flex: 1.5; } /* Valor */
.campo-grupo:nth-child(4) { flex: 1.5; } /* Data */

.campo-grupo label {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 6px;
    font-weight: 500;
}

.campo-grupo input,
.campo-grupo select {
    height: 42px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    outline: none;
    background: white;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    transition: .2s;
}

.campo-grupo input:focus,
.campo-grupo select:focus {
    border-color: var(--primary);
}

.btn-remover-linha {
    height: 42px;
    width: 42px;
    border-radius: 8px;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: .2s;
}

.btn-remover-linha:hover {
    background: #ef4444;
    color: white;
}

/* Adaptação para celular (empilha as opções se a tela for pequena) */
@media(max-width: 768px) {
    .fluxo-linha {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-remover-linha {
        width: 100%;
        margin-top: 10px;
    }
}