/* ===========================
   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;

    }

}
/* =====================================
   RESPONSIVE PARA CELULARES
===================================== */

@media (max-width:768px){

    .container{
        padding-left:12px;
        padding-right:12px;
    }

    h2{
        font-size:1.4rem;
    }

    .card-header h5{
        font-size:1rem;
    }

    /* Indicadores del resumen */
    .indicador h3{
        font-size:1.15rem;
        font-weight:700;
        word-break:break-word;
    }

    .indicador span{
        font-size:.8rem;
    }

    /* Resumen de bancos */
    #panelSantander h4,
    #panelChile h4{
        font-size:1rem;
        font-weight:bold;
        word-break:break-word;
    }

    #panelSantander small,
    #panelChile small{
        display:block;
        font-size:.70rem;
    }

    /* Tarjetas */
    .cuota{
        padding:12px;
    }

    .cuota h5{
        font-size:1rem;
    }

    .cuota p{
        font-size:.85rem;
        margin-bottom:5px;
    }

    .btn-group{
        width:100%;
    }

    .btn-group .btn{
        width:50%;
    }

    /* Historial */
    .table{
        font-size:.80rem;
    }

    /* Modal */
    .modal-dialog{
        margin:.5rem;
    }

}
.monto{
    font-size:clamp(1rem,4vw,2rem);
    font-weight:700;
    white-space:nowrap;
}