/* ===========================
   GENERAL
=========================== */

body{
    background:#f4f6f9;
    font-family:Arial,Helvetica,sans-serif;
}

h2{
    font-weight:700;
    color:#333;
}

/* ===========================
   TARJETAS DASHBOARD
=========================== */

.indicador{
    background:#fff;
    border-radius:12px;
    padding:20px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    transition:.2s;
}

.indicador:hover{
    transform:translateY(-2px);
}

.indicador h3{
    margin:0;
    font-size:30px;
    font-weight:bold;
    color:#0d6efd;
}

.indicador span{
    color:#666;
    font-size:14px;
}

/* ===========================
   TARJETAS
=========================== */

.card{
    border:none;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.card-header{
    font-weight:bold;
    color:white;
}

.santander{
    background:#d71920;
}

.chile{
    background:#003da5;
}

/* ===========================
   CUOTAS
=========================== */

.cuota{

    border-radius:10px;

    padding:15px;

    margin-bottom:12px;

    border-left:6px solid #ccc;

    background:white;

    transition:.2s;

}

.cuota:hover{

    transform:scale(1.01);

}

.cuota h5{

    margin:0;

    font-size:18px;

    font-weight:bold;

}

.cuota p{

    margin:3px 0;

    color:#555;

}

.cuota .estado{

    font-weight:bold;

}

/* ===========================
   ESTADOS
=========================== */

.pagada{

    border-left-color:#198754;

    background:#e9f8ef;

}

.pendiente{

    border-left-color:#ffc107;

    background:#fff8df;

}

.vencida{

    border-left-color:#dc3545;

    background:#fdecec;

}

/* ===========================
   BOTONES
=========================== */

.btn{

    border-radius:8px;

}

.btn-success{

    font-weight:bold;

}

.btn-primary{

    font-weight:bold;

}

/* ===========================
   TABLA
=========================== */

.table th{

    background:#0d6efd;

    color:white;

}

.table td{

    vertical-align:middle;

}

/* ===========================
   MODAL
=========================== */

.modal-content{

    border:none;

    border-radius:12px;

}

.modal-header{

    background:#0d6efd;

    color:white;

}

.modal-title{

    font-weight:bold;

}

.form-control{

    border-radius:8px;

}

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

.badge{

    font-size:13px;

    padding:8px 10px;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

    .indicador{

        margin-bottom:15px;

    }

    .cuota{

        padding:12px;

    }

    .cuota h5{

        font-size:16px;

    }

}