BODY.suma,  BODY.suma-login{
    font-family: "Nunito", sans-serif;
    background-color: #F0F0F0 !important;
}

.suma MAIN {
    padding-top: 32px;
    margin-bottom: 32px;
}

.suma HEADER {
    display: block;
}

.suma a, a:hover, a:active {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.suma HR {
    height: 1px;
    background-color: #6D6E73;
    border: 0;
    opacity: 1;
    margin: 20px 0;
}

.suma HR.doble {
    height: 2px;
    background-color: #6D6E73;
    border: 0;
    opacity: 1;
}

.suma H1 {
    font-size: 48px;
    line-height: 60px;
    font-weight: 700;
    text-align: left;
    color: #1F1A17;
}

.suma H2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
    text-align: left;
    color: #1F1A17;
}

.suma H3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
}

.suma H4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: #303030;
}

.suma LABEL {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    margin-bottom: 8px;
}

.suma P {
    font-size: 18px;
    font-weight: 300;
}

.suma .red-text {
    color: #E41010;
}

.suma STRONG {
    font-weight: 500;
}

.suma .text-justify {
    text-align: justify;
}

.suma .weight-600 {
    font-weight: 600;
}

.suma .weight-400 {
    font-weight: 400;
}

.suma .cursor-pointer {
    cursor: pointer;
}

/*************************/
/********** FOOTER *******/
/*************************/

.suma FOOTER {
    background-color: #1F1A17;
    padding: 8px 96px;
}

@media (max-width: 991.98px) {
    .suma FOOTER {
        padding: 8px 40px;
    }
}

@media (max-width: 575.98px) {
    .suma FOOTER {
        padding: 8px 24px;
    }
}

.suma FOOTER .logo-footer {
    width: 100%;
    max-width: 100px;
    height: auto;
}

.suma FOOTER .links {
    display: flex;
    padding: 16px 0;
}

.suma FOOTER .links div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.suma FOOTER .links div:first-child {
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid rgba(255,255,255,120);
}

.suma FOOTER A,
.suma FOOTER A:hover {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}

.suma FOOTER IMG.icono-redes {
    margin-left: 5px;
}

/*************/
/*** OTHER ***/
/*************/

.suma .m-auto {
    margin: 0 auto;
}

.w-xs-25 { width: 25% !important; }
.w-xs-50 { width: 50% !important; }
.w-xs-75 { width: 75% !important; }
.w-xs-100 { width: 100% !important; }

@media (min-width: 576px) {
    .w-sm-25 { width: 25% !important; }
    .w-sm-40 { width: 40% !important; }
    .w-sm-45 { width: 45% !important; }
    .w-sm-50 { width: 50% !important; }
    .w-sm-75 { width: 75% !important; }
    .w-sm-100 { width: 100% !important; }
}

@media (min-width: 768px) {
    .w-md-25 { width: 25% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-60 { width: 60% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-100 { width: 100% !important; }
}

@media (min-width: 992px) {
    .w-lg-25 { width: 25% !important; }
    .w-lg-50 { width: 50% !important; }
    .w-lg-75 { width: 75% !important; }
    .w-lg-90 { width: 90% !important; }
    .w-lg-100 { width: 100% !important; }
}

@media (min-width: 1200px) {
    .w-xl-25 { width: 25% !important; }
    .w-xl-50 { width: 50% !important; }
    .w-xl-75 { width: 75% !important; }
    .w-xl-100 { width: 100% !important; }
}


/*************/
/*** AUTOGESTION ***/
/*************/
/*** Suma ***/
HEADER{
    box-shadow: 0px 10px 10px 0px #00000040 !important;

}

body.suma > header {
    position: relative;
    z-index: 1100;
    background: #fff;
    isolation: isolate;
}

.menu-autogestion .container-fluid {
    padding-left: 80px;
    padding-right: 80px; 
}

.login-portada{ width:300px; max-width:100%; height:auto; }

.login-alert {
    font-weight: 300;
    font-size: 14px;
    color: #FFFFFF !important;
    border-radius: 10px;
    padding: 12px;
    background-color: #E84D4D !important;
    box-shadow: 0px 2px 2px 0px #00000040;
}

.login-alert.success {
    background-color: #2F80ED !important;
}

.contrasena-incorrecta p{
    font-size: 18px;
    font-weight: 400;
    color:#E41010;
    padding-left: 20px;
}

.login-alert strong{
    font-weight: 500;
    color: #FFFFFF;
}

.form-login .form-control{
    height:56px; border-radius:12px;
    border:1px solid #E0E0E0;
    box-shadow:0 4px 4px #00000040;
}

.form-login .form-label{ font-weight:300; font-size:24px; color:#303030; }

.suma-login {
    padding-top: 32px;
    margin-bottom: 32px;
}

.ingresar-login{
    box-shadow: 0px 2px 4px 0px #00000040;
    font-size: 20px !important;
    font-weight: 600 !important;
}
.btn.ingresar-login:hover,
.btn.ingresar-login:active,
.btn.ingresar-login:focus,
.btn.ingresar-login:focus-visible,
.btn.ingresar-login.active,
.btn-check:focus + .btn.ingresar-login{
    background-color: #E41010;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
}

.loan-kv dt, .loan-kv dd { margin-bottom: 0; }

.status-text{
    font-weight: 400;
    font-size: 16px;
}

.status-text.activo{ color:#2F80ED; }
.status-text.cancelado{ color:#9E9E9E; }
.status-text.vencido{ color:#C93131; }

.cancelar-cambio{
    font-size: 20px !important;
}

.login-portada{
    width: 300px;
}

.form-login input{
    opacity: 1;
    border-radius: 12px;
    height: 48px;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.form-login label{
    font-weight: 300;
    font-size: 24px;
    color: #303030;
}

.form-login button {
    width: 131px;
    height: 40px;
    border-radius: 10px;
    background-color: #E41010;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
}

.form-login .recuperar{
    font-size: 18px;
    color: #303030;
}

.form-login .simular{
    background-color: #1F1A17;
    box-shadow: 0px 2px 4px 0px #00000040;
    margin-top: 20px !important;
    max-width: 200px;
    border-radius: 10px;
}

.recuperar-dni{
    font-weight: 300;
    font-size: 20px;

}

.menu-autogestion{
    height: 90px;
    box-shadow: 0px 10px 10px 0px #00000040;
}

.menu-autogestion A{
    font-weight: 700;
    font-size: 14px;
    color:#1F1A17;
}
/**** carrousel ****/

#carouselSuma,
#carouselSuma .carousel-inner,
#carouselSuma .carousel-item,
#carouselSuma picture,
#carouselSuma img {
    position: relative;
    z-index: 0 !important;
}

#carouselSuma .carousel-item::after {
    z-index: 0 !important;
    pointer-events: none;
}


carousel-inner {
    position: relative;
    width: 100%;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0px 10px 10px 0px #00000040;
}

.carousel-indicators-container {
    position: relative;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.carousel-indicators-container button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #F0F0F0;
    transition: opacity 0.3s ease;
    margin: 24px 6px 0 6px;
    padding: 0;
    cursor: pointer;
    border: 0.5px solid #1F1A17;
}

.carousel-indicators-container button:hover {
    opacity: 1;
}

.carousel-indicators-container button.active {
    width: 11px;
    height: 11px;
    border: 1px solid #1F1A17;
    background-color: #E41010;
}


/*** Form Cambio Contraseña ***/

.cambio-contrasena LABEL{
        font-size: 20px;
}

/* Mis prestamos */
.mis-prestamos h2{
    font-weight: 700;
    color: #232323;
}
.mis-prestamos ARTICLE{
    border-radius: 17px;
    border: #FFFFFF !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
}

/* Card */
.loan-card{ border-radius: 12px; }
.loan-card .card-body{ padding: 20px 22px; }

.loan-card .fs-3{ font-size: 1.75rem !important; }

.status-dot{
    display:inline-block;
    width:8px; height:8px;
    border-radius:50%;
    margin: 0 6px 2px 8px;
}

.status-dot.activo{ background:#2F80ED; }
.status-dot.cancelado{ background:#9E9E9E; }
.status-dot.vencido{ background:#C93131; }

.bloque-finalizado{background-color: #F7F7F7 !important;}

.prestamo-tel{
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #303030 !important;
}
.cuotas{
    font-weight: 400 !important;
    font-size: 24px !important;
}
.estado-prestamo{
    font-size: 16px !important;
    font-weight: 300;
}

.inicio-cuota{
    font-size:36px;
}
.fecha-prestamo{
    font-weight: 400 !important;
    font-size: 16px !important;
}
.mis-prestamos-detalle .fecha-prestamo{
    font-weight: 300 !important;
}
.fecha-prestamo SPAN{
    font-weight: 200;
}

.col-izq-detalle{
    text-align: left !important;
}

.link-ver-todo{ color:#E41010 !important; text-decoration:none;}
.link-ver-todo:hover{ text-decoration:underline; }

.loan-detail{ border-radius: 14px; }

.loan-kv dt{ font-weight: 400; }
.loan-kv dd{ margin:0; }

/*** PRESTAMOS - DETALLE ***/
.prestamos-detalle{
    border-radius: 16px !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
}

.campos-prestamos{
    color: #303030 !important;
    font-weight: 400 !important;
    font-size: 16px;
}

.datos-prestamo{
    color: #303030 !important;
    font-weight: 300 !important;
}

.pago-tranferencia{
    font-weight: 500;
}

/*** Perfil ***/
.perfil .back-link{
    font-weight: 400;
    font-size: 16px;
    color: #1F1A17;
}
.perfil .back-link:hover{
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* tarjetas con radio 16 y sombra suave tipo diseño */
.profile-card{
    border-radius:16px !important;
    box-shadow:0 4px 16px #00000026 !important; /* 0x26 ≈ 15% */
}
.perfil section{
    border-radius: 16px;
    box-shadow: 0px 2px 2px 0px #00000040;
}
.perfil-card {
    border-radius: 16px;
    padding: 16px 24px 16px 24px;
}

.perfil h1{
    font-weight: 700 !important;
    font-size: 32px;
}
.perfil h2{
    font-weight: 600;
    font-size: 24px;
}
.perfil .datos{
    font-weight: 300;
    font-size: 20px;
    color: #303030 !important;
}
.perfil .datos-perfil{
    font-weight: 500;
    font-size: 20px !important;
    color: #303030 !important;

}


/**** MOBILE CAROUSEL ****/
@media (max-width: 767.98px) {

    .menu-autogestion .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
    .banner-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    #carouselSuma {
        margin-top: 0 !important;
        max-width: 100%;
    }

    #carouselSuma,
    #carouselSuma .carousel-inner,
    #carouselSuma .carouselAutogestion,
    #carouselSuma .carouselAutogestion picture,
    #carouselSuma .carouselAutogestion img {
        border-radius: 0 !important;
        overflow: visible;
    }
    .carousel-item img {
        width: 100% !important;
        height: auto;
    }
}

/*** MODAL ***/

.modal-suma { max-width: 720px; margin: 0 auto; }
.modal-suma .divider { border: 0; border-bottom: 2px solid #E5E7EB; } /* gris suave */
.estado-link { color: #1E90FF; text-decoration: none; font-weight: 600; }
.estado-link:hover { text-decoration: underline; }
.btn-close.custom-close{
    --bs-btn-close-bg: url("../images/Vector.svg");
    width: 2rem;
    height: 2rem;
    opacity: 1;
    background-size: 1rem 1rem;
}
.btn-close.custom-close:hover,
.btn-close.custom-close:focus{ opacity:.85; }
#modalPrestamo .btn-close.custom-close{
    z-index: 1060;
    pointer-events: auto;
}

.modal-suma { max-width: 720px; }

/* Look del contenedor del modal */
#modalPrestamo .modal-content{
    border-radius: 16px !important;
    box-shadow: 0 4px 16px #00000040 !important;
    border: 0;
    overflow: hidden;
    background-clip: padding-box;
}

#modalPrestamo .btn-close.custom-close{
    z-index: 1;
}
#modalPrestamo .loan-detail{
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

#modalPrestamo .modal-content{ overflow: visible; }
/*** MOBILE PRESTAMO ***/
@media (max-width: 991.98px){
    .display-6{ font-size: 1.75rem; }
}