/* ====== Base ====== */
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:#6D6E73; border:0; opacity:1; margin:20px 0; }
.suma HR.doble{ height:2px; background:#6D6E73; border:0; opacity:1; }

.suma H1{ font-size:48px; line-height:60px; font-weight:700; color:#1F1A17; }
.suma H2{ font-size:32px; line-height:44px; font-weight:700; color:#1F1A17; }
.suma H3{ font-size:24px; line-height:32px; font-weight:500; }
.suma H4{ font-size:20px; line-height:20px; font-weight:700; color:#303030; }

.suma LABEL{ font-size:24px; font-weight:400; line-height:32px; margin-bottom:8px; }
.suma P{ font-size:18px; font-weight:300; }
.suma STRONG{ font-weight:500; }
.suma .red-text{ color:#E41010; }
.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:#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,.47); }
.suma FOOTER A, .suma FOOTER A:hover{ color:#fff; font-size:12px; font-weight:400; }
.suma FOOTER IMG.icono-redes{ margin-left:5px; }

/* ====== Chips / Filtros ====== */
.chip{
    font-size:14px; font-weight:600; border-radius:6px; white-space:nowrap;
    padding:4px 8px; background:#fff; border:1px solid rgba(31,26,23,1);
    letter-spacing:.02em; transition:background .15s,color .15s,border-color .15s;
}
.chip--active{ color:#fff; background:#1F1A17; }
.puede-renovar strong{ color:#E41010; }

/* ====== Utilidades ancho ====== */
.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; }
}

/* ====== Autogestión ====== */
HEADER{ box-shadow:0 10px 10px 0 #00000040 !important; }
body.suma > header{ position:relative; z-index:1000; 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:#fff!important; border-radius:10px; padding:12px;
    background:#E84D4D!important; box-shadow:0 2px 2px 0 #00000040;
}
.login-alert.success{ background:#2F80ED!important; }
.contrasena-incorrecta p{ font-size:18px; font-weight:400; color:#E41010; padding-left:20px; }
.login-alert strong{ font-weight:500; color:#fff; }

.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:0 2px 4px #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:#E41010; color:#fff; }

.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; }
.form-login input{ opacity:1; border-radius:12px; height:48px; box-shadow:0 4px 4px #00000040; }
.form-login label{ font-weight:300; font-size:24px; color:#303030; }
.form-login button{
    width:131px; height:40px; border-radius:10px; background:#E41010; font-weight:700; font-size:20px;
    color:#fff; border:none; cursor:pointer;
}
.form-login .recuperar{ font-size:18px; color:#303030; }
.form-login .simular{ background:#1F1A17; box-shadow:0 2px 4px #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:0 10px 10px 0 #00000040; }
.menu-autogestion A{ font-weight:700; font-size:14px; color:#1F1A17; }

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

/* FIX: faltaba el punto (.) para que aplique a Bootstrap */
.carousel-inner{ position:relative; width:100%; }

.carousel-item img{
    width:100%; height:100%; object-fit:cover; box-shadow:0 10px 10px 0 #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:#F0F0F0; transition:opacity .3s; margin:24px 6px 0; padding:0; cursor:pointer; border:.5px solid #1F1A17;
}
.carousel-indicators-container button:hover{ opacity:1; }
.carousel-indicators-container button.active{ width:11px; height:11px; border:1px solid #1F1A17; background:#E41010; }

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

/* ====== Cards / Préstamos ====== */
.mis-prestamos h2{ font-weight:700; color:#232323; }
.mis-prestamos ARTICLE{ border-radius:17px; border:#fff!important; box-shadow:0 4px 4px 0 #00000040!important; }

.loan-card .card { border-radius:16px; }
.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:#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; }

/* ====== Detalle / Modal principal ====== */
.modal-suma{ max-width:720px; margin:0 auto; }
.modal-suma .divider{ border:0; border-bottom:2px solid #E5E7EB; }
.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; }

#modalPrestamo .modal-content{
    border-radius:16px!important; box-shadow:0 4px 16px #00000040!important; border:0; overflow:hidden; background-clip:padding-box;
}
#modalPrestamo .loan-detail{ box-shadow:none!important; border-radius:0!important; margin:0!important; }

/* ====== Modal renovación flotante ====== */
.modal-renovacion .modal-dialog{
    position:fixed; margin:0!important; transform:translateX(-50%)!important; max-width:none!important; width:auto; box-sizing:border-box;
}
.modal-renovacion .modal-content{ width:100%; border-radius:16px; margin-top:15%!important; }
.modal-renovacion H1{ font-weight:600; font-size:24px; }
.modal-renovacion P{ font-size:14px; }
.modal-renovacion A{ background:#E41010; color:#fff; }
.modal-renovacion .text-end{ text-align:center!important; }
.modal-renovacion #btnRenovarAhora{
    display:block; width:max-content; margin:0 auto; background:#E41010; border-color:#E41010;
}
.modal-renovacion #btnRenovarAhora:hover{ filter:brightness(.92); }

#modalRenovacion{ background:transparent!important; pointer-events:none; z-index:1065; }
#modalRenovacion .modal-dialog{ pointer-events:auto; position:fixed; margin:0!important; }
#modalRenovacion.pass-thru{ background:transparent!important; pointer-events:none; z-index:1065; }
#modalRenovacion.pass-thru .modal-dialog{ pointer-events:auto; }

/* ====== Form Renovación ====== */
.renovacion-wrap{ background:#EFEFEF; }
.renovacion-head{ position:relative; }
.renov-avatar{
    position:absolute; width:48px; height:48px; border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,.15); object-fit:cover; background:#fff;
}
.renov-avatar--left{ right:52%; top:38px; transform:translateX(50%); }
.renov-avatar--right{ right:0; top:38px; }

.renov-control{ border-radius:10px!important; border:1px solid #E0E0E0!important; box-shadow:0 2px 6px rgba(0,0,0,.12)!important; }
.renov-prefix{ border:1px solid #E0E0E0; border-right:0; background:#fff; border-radius:10px 0 0 10px; }

.renov-btn{ font-weight:600; border-radius:10px; font-size:20px!important; background:#E41010!important; }
.renove-cancelar{ font-weight:400; font-size:20px; }

.renovacion-wrap .form-label{ color:#303030; font-weight:400; font-size:20px; }
.renovacion-head h1{ font-weight:700; color:#232323; font-size:24px; }
.renovacion-head p{ font-weight:300; }
.form-error {
    font-weight: 400;
    font-size: 18px;
    color: #E41010;
}

/* === SELECT con barra (#303030) + flecha externa === */
:root{ --suma-h:56px; } /* alto unificado en renovación */

select.form-select.select-suma{
    --bs-form-select-bg-img:none;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    height:var(--suma-h);
    background-image:
            linear-gradient(#303030,#303030),
            url("../images/arrow-down.svg");
    background-repeat:no-repeat,no-repeat;
    background-size:1px 60%, 16px 16px;
    background-position: calc(100% - 2.75rem) 50%, calc(100% - 1rem) 50%;
    padding-right:3.75rem!important;
    border-radius:10px!important; border:1px solid #E0E0E0!important; background-color:#fff;
}
select.form-select.select-suma:focus{
    background-image:
            linear-gradient(#303030,#303030),
            url("../images/arrow-up.svg");
    border-color:#C8C8C8!important;
    box-shadow:0 0 0 .2rem rgba(228,16,16,.08), 0 2px 6px rgba(0,0,0,.12)!important;
}
/* oculta flecha IE/Edge antiguo */
select.form-select.select-suma::-ms-expand{ display:none; }

/* === Input de dinero con $ embebido (angosto) === */

/* Prefijo $ fijo */



/* Sombra uniforme y alto para controles de la sección */
.renovacion-wrap .form-control,
.renovacion-wrap .form-select,
.renov-control,
.select-suma,
.money-suma{
    height:var(--suma-h);
    box-shadow:0 3px 3px 0 #00000040!important;
}

/* Mensaje de error (estilo maqueta) */
.form-error{
    margin-top:10px; color:#E41010; font-size:28px; line-height:1.3; font-weight:600;
}

/* Asegura border + shadow rojos cuando hay error */
.form-control.is-invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545) !important;
    border: 1px solid #E41010 !important;
}

.form-control.is-valid,
.form-control.is-invalid {
    background-image: none !important;
    padding-right: .75rem;
}


#montoError{ display:none; }

.form-control.is-valid,
.form-control.is-invalid{ background-image:none !important; }



/* ====== Perfil ====== */
.perfil .back-link{ font-weight:400; font-size:16px; color:#1F1A17; }
.perfil .back-link:hover{ color:inherit; text-decoration:none; cursor:pointer; }
.profile-card{ border-radius:16px!important; box-shadow:0 4px 16px #00000026!important; }
.perfil section{ border-radius:16px; box-shadow:0 2px 2px 0 #00000040; }
.perfil-card{ border-radius:16px; padding: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; }

/*** RENOVACION - CONFIRMACION ***/

.renovacion-confirmacion H2{
    font-weight: 700;
    font-size: 24px;
}

.renovacion-confirmacion P{
    font-weight: 600;
    font-size: 16px;
}

.renovacion-confirmacion A{
    font-size: 16px;
    border-radius: 10px !important;
    color: #FFFFFF;
    background-color: #1F1A17;
}

.renovacion-confirmacion a:hover,
.renovacion-confirmacion a:focus,
.renovacion-confirmacion a:active{
    color: #FFFFFF !important;
    background-color: #1F1A17 !important;
}
.renovar-btn:hover{
    color: #FFFFFF !important;
    background-color: #E41010 !important;
}


/* ====== Responsive avatares ====== */
@media (max-width:991.98px){
    .renov-avatar--left{ right:auto; left:calc(50% - 24px); top:-14px; }
    .renov-avatar--right{ display:none; }
}
@media (max-width:575.98px){
    .renovacion-wrap{ padding-top:24px; }
    .renov-avatar--left{ display:none; }
}