@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

/*- FONTS -*/
/* Open Sans - Mantenemos las clases originales pero con Open Sans */
/* Blinker (ahora Open Sans) */
.blin-thin{font-family: "Open Sans", sans-serif;font-weight: 300;font-style: normal;}
.blin-extra{font-family: "Open Sans", sans-serif;font-weight: 300;font-style: normal;}
.blin-light{font-family: "Open Sans", sans-serif;font-weight: 300;font-style: normal;}
.blin-reg{font-family: "Open Sans", sans-serif;font-weight: 400;font-style: normal;}
.blin-semi{font-family: "Open Sans", sans-serif;font-weight: 600;font-style: normal;}
.blin-bold{font-family: "Open Sans", sans-serif;font-weight: 700;font-style: normal;}
.blin-ita{font-family: "Open Sans", sans-serif;font-weight: 400;font-style: italic;}
.blin-black{font-family: "Open Sans", sans-serif;font-weight: 800;font-style: normal;}

/* DM Sans (ahora Open Sans) */
.dm-thin{font-family: "Open Sans", sans-serif;font-weight: 300;font-style: normal;}
.dm-extra{font-family: "Open Sans", sans-serif;font-weight: 300;font-style: normal;}
.dm-light{font-family: "Open Sans", sans-serif;font-weight: 300;font-style: normal;}
.dm-reg{font-family: "Open Sans", sans-serif;font-weight: 400;font-style: normal;}
.dm-med{font-family: "Open Sans", sans-serif;font-weight: 600;font-style: normal;}
.dm-semi{font-family: "Open Sans", sans-serif;font-weight: 600;font-style: normal;}
.dm-bold{font-family: "Open Sans", sans-serif;font-weight: 700;font-style: normal;}
.dm-black{font-family: "Open Sans", sans-serif;font-weight: 800;font-style: normal;}

/* Fuente por defecto para toda la aplicación */
body, html {
    font-family: "Open Sans", sans-serif;
}

/*- FONT SIZE -*/
.fz-12{font-size: 12px;}
.fz-14{font-size: 14px;}
.fz-16{font-size: 16px;}
.fz-18{font-size: 18px;}
.fz-20{font-size: 20px;}
.fz-22{font-size: 22px;}
.fz-24{font-size: 25px;}
.fz-26{font-size: 25px;}
.fz-28{font-size: 25px;}
.fz-30{font-size: 30px;}
.fz-35{font-size: 35px;}
.fz-40{font-size: 40px;}
.fz-50{font-size: 50px;}
.fz-60{font-size: 60px;}

/*- COLORS -*/
/* Blanco */
.col-blanco{color: #ffffff;}
.back-blanco{background-color: #ffffff;}
button.back-blanco:focus{background-color: #ffffff;}
/* Negro */
.col-negro{color: #000000;}
.back-negro{background-color: #000000;}
button.back-negro:focus{background-color: #000000;}
/* Gris */
.col-gris{color: #737373;}
.back-gris{background-color: #737373;}
button.back-gris:focus{background-color: #737373;}
/* Morado */
.col-mor{color: #5c348c !important;}
.back-mor{background-color: #5c348c !important;}
button.back-mor:focus{background-color: #5c348c !important;}
/* Morado Claro */
.col-mor-cla{color: #b99edb;}
.back-mor-cla{background-color: #b99edb;}
button.back-mor-cla:focus{background-color: #b99edb;}
/* Rojo */
.col-mor{color: #5c348c;}
.back-mor{background-color: #5c348c;}
button.back-mor:focus{background-color: #5c348c;}
/* Cafe */
.col-cafe{color: #b4946d;}
.back-cafe{background-color: #b4946d;}
button.back-cafe:focus{background-color: #b4946d;}

html, body{overflow-x: hidden;}

/*- BUTTTONS -*/
button.back-mor.dm-bold.col-blanco{border-radius: 20px;}
button.back-mor.dm-bold.col-blanco:hover{background-color: #401b64;color: #fff;}

/*- INPUTS -*/
input.blin-reg.col-gris{border: none;border-bottom: solid 2px #c1c1c1;border-radius: 0;background-color: transparent;}
input.blin-reg.col-gris:focus{box-shadow: none;}
.mb-3 .input-group span.input-group-text{border: none;border-bottom: solid 2px #c1c1c1;border-radius: 0;background-color: transparent;color: #737373;}
.mb-3 .input-group-custom span.input-group-text{border: 1px solid #ced4da !important;border-bottom: 1px solid #ced4da !important;border-radius: 0.375rem 0 0 0.375rem !important;background-color: #e9ecef !important;color: #000 !important;}
.mb-3 .input-group-custom .form-control{border: 1px solid #ced4da !important;border-radius: 0 !important;background-color: #fff !important;color: #000 !important;}
.mb-3 .input-group-custom .btn{border: 1px solid #ced4da !important;border-radius: 0 0.375rem 0.375rem 0 !important;background-color: #fff !important;color: #6c757d !important;}
input[type="checkbox"].form-check-input{border-radius: 0;border: solid 2px #c1c1c1;}
input[type="checkbox"].form-check-input:checked{background-color: #57595c;}
input[type="checkbox"].form-check-input:focus{box-shadow: none;}

/*- A -*/
a.aStyle{text-decoration: none;}
a.aStyle:hover{color: initial;text-decoration: underline;}
a.back-mor.dm-bold.col-blanco{border-radius: 20px; padding: 6px 35px;}
a.back-mor.dm-bold.col-blanco:hover{background-color: #401b64;color: #fff;}

/*- SELECT -*/
.js-example-basic-single{width: 100%;}
/* Cambiar el fondo y color de letra del select */
.select2-container--default .select2-selection--single {background-color: #f0f0f0;color: #333;font-family: "Open Sans", sans-serif; font-weight: 400;border-radius: 5px;border: 1px solid #ccc;}
/* Cambiar el estilo del dropdown */
.select2-container--default .select2-results__option {background-color: #f0f0f0;color: #333;font-family: "Open Sans", sans-serif; font-weight: 400;}
/* Cambiar el estilo del dropdown cuando está seleccionado */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color: #5c348c;color: #fff;}
.select2-search__field{font-family: "Open Sans", sans-serif; font-weight: 400;color: #737373;}

/*- FILE -*/
input[type="file"].file_customize{display: none;}
label.file_customize{display: flex;align-items: center;margin: 25px 0 5px 0;}
label.file_customize span{display: flex;background-color: #dbdbda;width: 80px;height: 80px;justify-content: center;align-items: center;border-radius: 50%;font-size: 35px;}
label.file_customize p{margin: 0 0 0 3%;font-size: 20px;}
label.file_customize:hover{cursor: pointer}
div#file-name{margin: 25px 0 50px 0;}

/*- CARD -*/
.card-paola{background-color: #ffffff;padding: 5%;margin: 30px auto 15px auto;box-shadow: 0 0 5px rgba(0, 0, 0, 0.21);border-radius: 25px;display: flex;justify-content: center;align-items: center;height: 300px;}
.card-paola-content{background-color: #ffffff;padding: 40px 5% 5% 5%;margin: 30px auto 15px auto;box-shadow: 0 0 5px rgba(0, 0, 0, 0.21);border-radius: 25px;position: relative;}
.card-paola-content.content-btns{height: 130px;display: flex;}
.card-paola-content.content-btns.periodico-content{padding: 25px 5% 5% 5%;}
.card-paola-content.content-btns.periodico-content button{height: 80px;}
.card-paola-content.content-btns.estado-content{height: auto;display: block !important;padding: 20px 5%;}
.card-paola-content.content-btns .row{width: 100%;align-items: center;}
.card-paola-content.content-btns .col-12{display: flex;justify-content: center;align-items: center;}
.card-paola-content.content-btns a.btn{}
.card-paola-content button.btn-back{position: absolute;color: #fff;top: 0;right: 0;border-radius: 0 25px 0 5px;padding: 6px 2%;}
.card-paola-content button.btn-back:hover{color: #fff;}

/*- TABLE -*/
#titSimulador{position: relative;width: 10%;}
#titSimulador span{display: block;padding: 15px 2% 0 2%;writing-mode: vertical-rl;text-orientation: upright;text-align: center;font-size: 26px;font-weight: 600;}

/*- CHART -*/
.responsive-chart {width: 100%; max-width: 800px;height: auto; aspect-ratio: 16/9;}

/* PLACE HOLDER *
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #000000; font-family: 'Roboto', sans-serif; font-weight: 600; }  /* WebKit *
input::-moz-placeholder, textarea::-moz-placeholder { color: #000000; font-family: 'Roboto', sans-serif; font-weight: 600; } /* Firefox 19+ */

/*- TEXT RIGHT TEXT JUSTIFY -*/
.t-justify{text-align: justify;}

body{background-color: #f8f8f8;}

body main{padding-bottom: 100px;padding-left: 15vw;}
body main.logoutContent{padding-left: 0; padding-bottom: 0;}

/*- Info Profile -*/
#infoProfile{}
#infoProfile .row .col-12{position: relative;}
/* Barra after eliminada - causaba sobreposición con el medallero */
/* #infoProfile .row .col-12:after{content: '';background-color: #c1c1c1;position: absolute;bottom: 10%;left: 5%;width: 90%;height: 3px;} */
#infoProfile .row .col-12 > .d-flex{margin-bottom: 20px;}
#infoProfile .row .col-12 > .d-flex figure{width: 20%;}
#infoProfile .row .col-12 > .d-flex figure div{width: 85px;height: 85px;background-repeat: no-repeat;background-position: center;background-size: cover;border-radius: 50%;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2){line-height: 15px;padding: 10px 2% 0 2%;width: 70%;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) h3{margin-bottom: 0;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) aside{position: relative;top: -10px;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) aside i{}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) aside p{position: relative;left: 5%;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) aside p span{}
#infoProfile .row .col-12 > .d-flex .dropdown{width: 10%;}
#infoProfile .row .col-12 > .d-flex .dropdown button{font-size: 25px;color: #737373;background-color: transparent;border: none;padding: 10px 0;}
#infoProfile .row .col-12 > .d-flex .dropdown button:hover{}
#infoProfile .row .col-12 > .d-flex .dropdown button:after{display: none;}
#infoProfile .row .col-12 > .d-flex .dropdown button i{}
#infoProfile .row .col-12 > .row .col-4 aside{background-color: #e8e8e8;text-align: center;padding: 15px 0 5px 0;border-radius: 20px;margin-bottom: 80px;}
#infoProfile .row .col-12 > .row .col-4 aside span{display: flex;background-color: #dbdbda;width: 80px;margin: auto;height: 80px;justify-content: center;align-items: center;border-radius: 50%;}
#infoProfile .row .col-12 > .row .col-4 aside span i{font-size: 34px;color: #737373;}
#infoProfile .row .col-12 > .row .col-4 aside h5{margin: 20px 0 7px 0;}
#infoProfile .row .col-12 > .row .col-4 aside p{}

#btnResultados{position: absolute;top: 0;right: 0%;}
#btnResultados:hover{color: #ffffff;}

#btnActualizar{position: absolute;top: 0;right: 1%;}
#btnActualizar:hover{color: #ffffff;}

/*- Menú -*/
#menuBladeDesktop{position: fixed;left: 0;width: 15vw;background-color: #e8e8e8;height: 100vh;}
#menuBladeDesktop .row .col-12.p-0 > ul{padding: 0;}
#menuBladeDesktop .row .col-12.p-0 > ul li{list-style: none;padding: 5px 4%;border-bottom: solid 1px #535353;}
#menuBladeDesktop .row .col-12.p-0 > ul li:hover{}
#menuBladeDesktop .row .col-12.p-0 > ul li a{text-decoration: none;font-size: 14px; color: #4f4e4e;}
#menuBladeDesktop .row .col-12.p-0 > ul li a:after{}
#menuBladeDesktop .row .col-12.p-0 > ul li:last-child a:after{}
#menuBladeDesktop .row .col-12.p-0 > ul li:not(:nth-child(2)):hover a{color: #5c348c;font-weight: bold;}
#menuBladeDesktop .row .col-12.p-0 > ul li.active a{color: #5c348c;font-weight: bold;}
#menuBladeDesktop .row .col-12.p-0 > ul li a i{}
#menuBladeDesktop .row .col-12 ul li aside p{margin: 0;position: relative;left: 5px;top: -4px;}
#menuBladeDesktop .row .col-12.p-0 ul li:nth-child(2) .dropdown{top: 10px;right: 6%;}
#menuBladeDesktop .row .col-12.p-0 ul li:nth-child(2) .dropdown button{font-size: 12px;padding: 2px 6px;}
#menuBladeDesktop .row .col-12.p-0 ul.dropdown-menu li:hover a{font-weight: normal;color: #4f4e4e;}


/* Media Querys */

/* Dashboard: escritorio - mismo aspecto que móvil, contenido centrado y ancho adecuado */
@media(min-width: 768px) {
    .dashboard-container .dashboard-title-responsive {
        margin-bottom: 30px;
    }
    .dashboard-container .dashboard-title-responsive .title-line-1 {
        font-family: "Open Sans", sans-serif;
        font-weight: 900;
        font-size: 38px;
        color: #5c348c;
        line-height: 1.2;
        margin-bottom: 2px;
    }
    .dashboard-container .dashboard-title-responsive .title-line-2 {
        font-family: "Open Sans", sans-serif;
        font-weight: 900;
        font-size: 48px;
        color: #5c348c;
        line-height: 1.1;
        letter-spacing: -1.5px;
    }
    .dashboard-container .dashboard-buttons-container {
        background-color: transparent;
        padding: 0;
        margin: 0 auto 20px auto;
        box-shadow: none;
        border-radius: 0;
    }
    .dashboard-container .dashboard-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background-color: #e8e8e8;
        color: #333333;
        padding: 12px 24px;
        margin-bottom: 20px;
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.3s ease;
        font-family: "Open Sans", sans-serif;
    }
    .dashboard-container .dashboard-button:last-child {
        margin-bottom: 0;
    }
    .dashboard-container .dashboard-button:hover {
        background-color: #d8d8d8;
        text-decoration: none;
        color: #333333;
    }
    .dashboard-container .dashboard-button .button-text {
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: #333333;
        text-align: left;
        flex: 1;
        padding-right: 12px;
    }
    .dashboard-container .dashboard-button .button-icon {
        width: 32px;
        height: 32px;
        object-fit: contain;
        flex-shrink: 0;
    }
    .dashboard-container .dashboard-frase-container {
        background-color: transparent;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .dashboard-container .frase-icon-foco {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }
    .dashboard-container .frase-content-wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }
    .dashboard-container .frase-quote-open,
    .dashboard-container .frase-quote-close {
        flex-shrink: 0;
    }
    .dashboard-container .frase-quote-open { align-self: flex-start; margin-top: -8px; }
    .dashboard-container .frase-quote-close { align-self: flex-end; margin-top: 8px; }
    .dashboard-container .frase-content { flex: 1; max-width: 100%; }
    .dashboard-container .frase-icon-quote {
        width: 36px;
        height: 36px;
        object-fit: contain;
    }
    .dashboard-container .frase-text {
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 1.6;
        margin: 0;
        padding: 0 10px;
    }
    .dashboard-container .frase-author {
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        font-size: 14px;
        font-style: italic;
        color: #737373;
        margin: 0;
        margin-top: 8px;
    }
}

@media(min-width: 1390px) {

}

@media(max-width:767px){
    body main{padding-left: 2%; padding-right: 2%; padding-bottom: 90px;}

    #infoProfile .row .col-12 > .d-flex div h3{font-size: 25px;}
    #infoProfile .row .col-12 > .d-flex div aside p{font-size: 16px;}
    #infoProfile .row .col-12 > .d-flex figure div{width: 70px;height: 70px;margin-top: 8px;}

    /*- TABLES -*/
    #titSimulador{width: 15%;}
    #titSimulador span{font-size: 20px;}
    table .montoInversion{font-size: 20px;}

    /*- CARDS -*/
    .card-paola-content{padding: 25px 5% 5% 5%;}
    .card-paola-content.content-btns{height: auto;display: block;}
    .card-paola-content.content-btns .row{width: auto;}
    .card-paola-content.content-btns a.btn{margin-bottom: 20px;}
    .card-paola-content.content-btns > .row .col-12:last-child a.btn{margin-bottom: 0;}
    .card-paola-content.content-btns.periodico-content button{height: auto;}

    /*- Dashboard Buttons Responsive -*/
    .dashboard-buttons-container{
        margin-bottom: 20px;
    }
    .dashboard-button{
        padding: 5px 18px;
        margin-bottom: 20px;
    }
    .dashboard-button .button-text{
        font-size: 17px;
    }
    .dashboard-button .button-icon{
        width: 28px;
        height: 28px;
    }

    #btnResultados{position: relative;top: 0;right: 0;}
    #btnActualizar{right: 3%;top: 40px;}
    #h2TitleDiagnostico{margin-bottom: 20px;}

    /*- Header Responsive -*/
    .header-responsive{
        background-color: transparent;
        padding: 12px 15px 0 15px;
        box-shadow: none;
        margin-top: -15px;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 25px;
        width: calc(100% + 30px);
        position: relative;
        z-index: 10;
    }
    .logo-responsive{
        max-width: 110px;
        height: auto;
        margin-left: 0;
        margin-top: 0;
    }
    .btn-header-icon{
        padding: 6px 8px;
        border: none;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s ease;
    }
    .btn-header-icon:hover{
        opacity: 0.7;
    }
    .btn-header-icon:active{
        opacity: 0.5;
    }
    .header-icon-img{
        width: 24px;
        height: 24px;
        object-fit: contain;
    }
    .header-divider{
        margin: 12px 0 8px 0;
        border-color: #e0e0e0;
        border-width: 1px;
        opacity: 0.5;
    }
    .user-name-responsive{
        color: #000000;
        font-size: 16px;
        margin: 0;
        padding-left: 0;
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
    }

    /*- Dashboard Title Responsive -*/
    .dashboard-title-responsive{
        margin-bottom: 30px;
    }
    .dashboard-title-responsive .title-line-1{
        font-family: "Open Sans", sans-serif;
        font-weight: 900;
        font-size: 38px;
        color: #5c348c;
        line-height: 1.2;
        margin-bottom: 2px;
    }
    .dashboard-title-responsive .title-line-2{
        font-family: "Open Sans", sans-serif;
        font-weight: 900;
        font-size: 48px;
        color: #5c348c;
        line-height: 1.1;
        letter-spacing: -1.5px;
    }

    /*- Dashboard Buttons Responsive -*/
    .dashboard-buttons-container{
        background-color: transparent;
        padding: 0;
        margin: 0 auto 20px auto;
        box-shadow: none;
        border-radius: 0;
    }
    .dashboard-button{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background-color: #e8e8e8;
        color: #333333;
        padding: 5px 20px;
        margin-bottom: 20px;
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.3s ease;
        font-family: "Open Sans", sans-serif;
    }
    .dashboard-button:last-child{
        margin-bottom: 0;
    }
    .dashboard-button:hover{
        background-color: #d8d8d8;
        text-decoration: none;
        color: #333333;
    }
    .dashboard-button .button-text{
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: #333333;
        text-align: left;
        flex: 1;
        padding-right: 12px;
    }
    .dashboard-button .button-icon{
        width: 32px;
        height: 32px;
        object-fit: contain;
        flex-shrink: 0;
    }

    /*- Dashboard Frase Responsive -*/
    .dashboard-frase-container{
        background-color: transparent;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .frase-icon-foco{
        width: 40px;
        height: 40px;
        object-fit: contain;
    }
    .frase-content-wrapper{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }
    .frase-quote-open{
        flex-shrink: 0;
        align-self: flex-start;
        margin-top: -8px;
    }
    .frase-quote-close{
        flex-shrink: 0;
        align-self: flex-end;
        margin-top: 8px;
    }
    .frase-content{
        flex: 1;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .frase-icon-quote{
        width: 36px;
        height: 36px;
        object-fit: contain;
    }
    .frase-text{
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 1.6;
        margin: 0;
        padding: 0 10px;
    }
    .frase-author{
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        font-size: 14px;
        font-style: italic;
        color: #737373;
        margin: 0;
        margin-top: 8px;
    }

    /*- Menú Responsive -*/
    #menuBlade{
        position: fixed;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 30px);
        max-width: 500px;
        background-color: #fff;
        box-shadow: 0 0px 6px rgb(0,0,0,0.92);
        border-radius: 50px;
        z-index: 99;
        padding: 8px 0;
    }
    #menuBlade .row .col-12 ul{
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    #menuBlade .row .col-12 ul li{
        list-style: none;
        flex: 1;
        text-align: center;
    }
    #menuBlade .row .col-12 ul li a{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        text-decoration: none;
        transition: opacity 0.2s ease;
    }
    #menuBlade .row .col-12 ul li a:hover{
        opacity: 0.7;
        text-decoration: none;
    }
    #menuBlade .row .col-12 ul li a:after{
        display: none;
    }
    .menu-icon-img{
        width: 28px;
        height: 28px;
        object-fit: contain;
    }
}