@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color: #c59fd8;
    --primary-color-50: #fbf8fc;
    --primary-color-100: #f5eef9;
    --primary-color-200: #ede1f3;
    --primary-color-300: #dec9e9;
    --primary-color-400: #c59fd8;
    --primary-color-500: #b382ca;
    --primary-color-600: #9e66b7;
    --primary-color-700: #87529e;
    --primary-color-800: #5c3a69;
    --primary-color-900: #5c3a69;
    --primary-color-950: #3f214a;
    --background-primary: #DFFFF9;
    --primary-text-color: #43408f;
    --secondary-color: #281434;
    --secondary-color-00: #E3E6EA;
    --white: #FFFFFF;
    --neutral-00: #FFFFFF;
    --neutral-05: #F9F9F9;
    --neutral-20: #CDCDCD;
    --text-dark: #282828;
    --text-medium: #686868;
    --text-light: #9A9A9A;
    --text-link: #625ecd;
    --text-link-visited: #9e66b7;
    --color-dark-05: rgba(0, 0, 0, 5%);
    --color-dark-10: rgba(0,0,0, 10%);
    --feedback-info-dark: #7069FF;
    --feedback-info-medium: #9797FF;
    --feedback-info-light: #EBEBFF;
    --feedback-error-dark: #FF4444;
    --feedback-error-light: #FFD3CC;
    --special-light-dare: #FFF0DD;
    --special-dark-dare: #FF9208;
    --special-light-exercise: #FFFCDF;
    --special-dark-exercise: #EEC700;
    --special-light-text: #FFF0F0;
    --special-dark-text: #FF6666;
    --special-light-quiz: #EDEDFF;
    --special-dark-quiz: #5353FF;
    --special-light-video: #F6FFDD;
    --special-dark-video: #9FCB28;
    --special-light-infography: #CAFEF4;
    --special-dark-infography: #00957E;
    --0-25-rem: 4px;
    --0-5-rem: 8px;
    --0-75-rem: 12px;
    --1-rem: 16px;
    --1-5-rem: 24px;
    --2-rem: 32px;
    --2-5-rem: 40px;
    --3-rem: 48px;
    --4-rem: 64px;
}

html, body {
    font-family: "Poppins", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    height: 100%;
}
/* COLORS - BACKGROUND */
.background-primary{
    background-color: var(--primary-color);
}
.background-secondary {
    background-color: var(--secondary-color);
}
/* COLORS - TEXT */
.text-primary {
    color: var(--primary-color) !important;
}
.text-secondary {
    color: var(--secondary-color) !important;
}
.text-dark {
    color: var(--text-dark);
}
.text-medium {
    color: var(--text-medium);
}
.text-color-link {
    color: var(--text-link);
}
.text-link {
    color: var(--text-link);
    text-decoration: underline;
}
.text-link:visited {
    color: var(--text-link);
    text-decoration: underline;
}
/* END COLORS */
/* TEXT SIZE */
.text-largest {
    font-size: 3em;
}
.text-larger {
    font-size: 2em;
}
.text-small {
    font-size: 0.9em;
}
.text-smaller {
    font-size: 0.75em;
}
/* END TEXT SIZE */
/* LINKS */
.pdf-link {
    font-family: 'Poppins', sans-serif; /* Asegura que usa Figtree */
    font-weight: 500;                 /* Peso de la fuente: 500 (Medium) */
    font-size: 16px;                  /* Tamaño de la fuente */
    line-height: 18px;                /* Altura de la línea */
    text-decoration: underline;       /* Subrayado */
    color: var(--text-link);          /* Usar la variable CSS para el color */
}
.link-no-decoration {
    text-decoration: none;
}
/* END LINKS */
/* MARGINS */
.m-0-5rem {
    margin: var(--0-5-rem);
}
.m-1rem {
    margin: var(--1-rem);
}
.m-2rem {
    margin: var(--2-rem);
}
.mt-0-25rem {
    margin-top: var(--0-25-rem);
}
.mb-0-25rem {
    margin-bottom: var(--0-25-rem);
}
.mt-0-5rem {
    margin-top: var(--0-5-rem);
}
.mb-0-5rem {
    margin-bottom: var(--0-5-rem);
}
.mt-1rem {
    margin-top: var(--1-rem);
}
.mt-1-5rem {
    margin-top: var(--1-5-rem);
}
.mt-2rem {
    margin-top: var(--2-rem);
}
.mt-3rem {
    margin-top: var(--3-rem);
}
.mb-1rem {
    margin-bottom: var(--1-rem);
}
.mb-1-5rem {
    margin-bottom: var(--1-5-rem);
}
.mb-2rem {
    margin-bottom: var(--2-rem);
}
.mb-3rem {
    margin-bottom: var(--3-rem);
}
.ml-1rem {
    margin-left: var(--1-rem);
}
.mr-1rem {
    margin-right: var(--1-rem);
}
/* END MARGINS */
/* PROGRESS BAR */
body.questionnaire,
body.feedback,
body.signup {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.questionnaire .progress-card {
    color: var(--primary-color);
}
body.feedback .progress-card {
    color: var(--secondary-color);
}
body.questionnaire .progress-bar {
    background-color: var(--primary-color);
}
body.feedback .progress-bar {
    background-color: var(--secondary-color);
}
/* END PROGRESS BAR */
/* BUTTONS */
body.signup .btn-primary {
    padding-left: 100px;
    padding-right: 100px;
    box-shadow: rgba(0, 0, 0, 0.25) 0 4px 4px;
    margin-top: 40px;
    display: block;
}

body.questionnaire .btn-primary {
    padding-left: var(--2-rem);
    padding-right: var(--2-rem);
}

#formLogin .btn.btn-primary {
    margin: 30px auto var(--1-rem);
    display: block;
    padding: var(--1-rem) var(--2-rem);
}

.btn-primary {
    color: var(--primary-text-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--4-rem);
    padding:var(--1-rem);
}
.btn.btn-primary:hover{
    background-color: var(--primary-color-500);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}
.btn.btn-primary:active,
.btn.btn-primary:focus{
    background-color: var(--primary-color);
    border-color: var(--primary-color-800);
    color: var(--secondary-color);
}
.btn.btn-primary.disabled {
    background-color: #2d6860;
    border-color: #2d6860;
}

.btn.btn-primary-alt {
    color: var(--primary-color-400);
    background-color: var(--background-primary);
    border: solid 1px var(--primary-color-400);
    border-radius: var(--4-rem);
    padding: var(--1-rem) var(--0-5-rem);
}

.btn.btn-primary-alt:hover,
.btn.btn-primary-alt:active,
.btn.btn-primary-alt:focus {
    color: var(--primary-text-color);
    background-color: var(--primary-color-200);
    border-color: var(--primary-color);
}

.btn-secondary,
.btn.btn-secondary:focus{
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background-color: var(--white);
    border-radius: var(--4-rem);
    padding:var(--1-rem);
}
.btn.btn-secondary:hover {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background-color: var(--secondary-color-00);
}

.btn-secondary:active,
.btn-secondary:active:focus{
    color: var(--white);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-assist {
    color: var(--primary-color-950);
    border-color: var(--secondary-color);
    background-color: var(--feedback-info-light);
    border-radius: var(--4-rem);
    padding: var(--1-rem);
}

.btn-assist:hover,
.btn-assist:active,
.btn-assist:active:focus{
    color: var(--secondary-color-00);
    background-color: var(--feedback-info-medium);
    border-color: var(--secondary-color);
}
.btn-collapse {
    color: var(--white);
    background-color: var(--feedback-info-dark);
    border-radius: var(--4-rem);
    padding: var(--1-rem) var(--2-rem);
}
.btn-collapse:hover {
    background-color: var(--feedback-info-light);
    color: var(--secondary-color);
    border: solid 1px var(--secondary-color);
}
.btn-collapse::before {
    font-family: "Font Awesome 6 Free", emoji;
    float: right;
    font-weight: 900;
    margin-left: var(--1-rem);
    content: "\f062";
}
.btn-collapse.collapsed::before {
    content: "\f063";
}
.btn-outline-dark {
    border-radius: var(--4-rem);
}
.br-1rem {
    border-radius: var(--1-rem) !important;
}
/* END BUTTONS */
/* RANGE FIELD */
.custom-form-range {
    width:100%;
    height:1.5rem;
    padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-color:transparent
}
.custom-form-range:focus {
    outline:0
}
.custom-form-range:focus::-webkit-slider-thumb {
    box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)
}
.custom-form-range:focus::-moz-range-thumb {
    box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)
}
.custom-form-range::-moz-focus-outer {
    border:0
}
.custom-form-range::-webkit-slider-thumb {
    width:1rem;
    height:1rem;
    margin-top:-.25rem;
    -webkit-appearance:none;
    appearance:none;
    background-color:var(--primary-color);
    border:0;
    border-radius:1rem;
    -webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.custom-form-range::-webkit-slider-thumb:active {
    background-color: var(--primary-color);
}
.custom-form-range::-webkit-slider-runnable-track {
    width:100%;
    height:.5rem;
    color:transparent;
    cursor:pointer;
    background-color:var(--bs-secondary-bg);
    border-color:transparent;
    border-radius:1rem
}
.custom-form-range::-moz-range-thumb {
    width:1rem;
    height:1rem;
    -moz-appearance:none;
    appearance:none;
    background-color: var(--primary-color);
    border:0;
    border-radius:1rem;
    -moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.custom-form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}
.custom-form-range::-moz-range-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--bs-secondary-bg);
    border-color: transparent;
    border-radius: 1rem;
}
/* END CUSTOM RANGE */

/* QUESTIONNAIRES */
body.signup input.form-check-input,
body.questionnaire .form-check-input {
    width: 1.5em;
    height: 1.5em;
    margin-top: 0;
    margin-right: 0.5em;
}
body.questionnaire .form-check {
    display: flex;
}
body.signup .form-check input[type="checkbox"],
body.signup .form-check input[type="radio"],
body.questionnaire .form-check input[type="radio"] {
    accent-color: var(--text-light);
}
body.signup .form-check:hover input[type="checkbox"],
body.signup .form-check:hover input[type="radio"],
body.questionnaire .form-check:hover input[type="radio"] {
    accent-color: var(--text-medium);
}
body.signup .form-check input[type="checkbox"]:checked,
body.signup .form-check input[type="radio"]:checked,
body.questionnaire .form-check input[type="radio"]:checked {
    accent-color: var(--text-link);
    background-color: var(--text-link);
}
body.questionnaire .form-check input[type="radio"]:checked ~ label {
    color: var(--text-link);
}
body.signup .form-check-label {
    display: flow-root;
}
body.questionnaire .form-check-label {
    display: flex;
    margin-bottom: 1rem;
}
/* END QUESTIONNAIRES */

/* NEW STYLES */

#main-split {
    height: 100vh;
}

#main-split > div {
    height:100vh;
}

body.signup div.split-left,
body.feedback div.split-left{
    background-color: var(--primary-color);
}
body.questionnaire div.split-left {
    background-color: var(--secondary-color);
}
.split-left {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 20px 50px;
}

.split-right {
    padding: 50px 70px;
    overflow: auto;
    background-color: #F9F9F9;
}

body.signup .consent-container {
    height: 350px;
    overflow-y: scroll;
    margin-bottom: var(--1-rem);
    border: none;
}

body.signup div.signup-check {
    color: var(--text-medium);
    border-bottom: solid 1px #D9D9D9;
    padding: var(--1-rem);
}

body.signup div.form-field legend {
    color: var(--text-medium);
}

body.signup div.form-field {
    margin-top: var(--1-5-rem);
}
body.signup div.form-field label {
    margin-left: var(--1-rem);
}
body.signup div.form-field input {
    padding-left: var(--1-rem);
}

body.signup div.signup-result {
    background-color: #E3E6EA;
    padding: var(--1-rem);
}

body.signup div.signup-done-buttons .btn-primary {
    padding-left: 0;
    padding-right: 0;
}
div.signup-done-buttons {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));;
    grid-gap: var(--0-5-rem);
    width: 100%;
}


div.signup-done-buttons button {

}

.centered-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
}

.signup-congrats {
    background-color: #FFFFFF;
    border-radius: 8px;
    text-align: center;
    padding: var(--4-rem) var(--2-rem);
    max-width: 650px;
    overflow: auto;
}

.signup-congrats .download-icon {
    margin: var(--1-5-rem) 0;
}

#accordionDownload .card.card-body {
    border: none;
}


/* QUESTIONNAIRES STYLES */

/* END QUESTIONNAIRES STYLES */

#formLogin img.logo {
    display: block;
    width: 50% !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

#formLogin label {
    padding-left: var(--1-rem);
}

#formLogin .text-link {
    display: block;
    margin: 0 auto;
}

.img-centered {
    margin: 0 auto;
    display: block;
}

div.pass-field span#password_toggle,
div.pass-field span.password_toggle {
    position: absolute;
    top: 18px;
    right: 15px;
    color: var(--text-light);
    cursor: pointer;
}

.modal-content {
    border: none;
}
.modal-header {
    border-bottom-color: var(--color-dark-10);
}

.modal-header.no-border {
    border-bottom-color: transparent;
}
.modal-body {
    padding: var(--1-rem);
}
.modal-footer {
    border-top-color: var(--color-dark-10);
}

.modal-footer.no-border {
    border-top-color: transparent;
}


@media (max-width: 991px) {
    #main-split > div {
        height: auto;
    }

    #main-split > div.split-left {
        min-height: 270px;
    }

    body.signup .split-left > * {
        margin-top: var(--1-5-rem);
        margin-bottom: var(--1-5-rem);
    }
}

@media (max-width: 767px) {

    .signup-congrats {
        max-width: 90%;
    }
}

/* END NEW STYLES */