:root {
    /* primary-colors */
    --gray-050: #F7F8F8;
    --gray-100: #EEEEF0;
    --gray-200: #D9DADE;
    --gray-300: #B7BAC2;
    --gray-400: #9095A0;
    --gray-500: #727885;
    --gray-600: #5C616D;
    --gray-700: #4B4F59;
    --gray-800: #41454B;
    --gray-900: #393B41;
    --gray-950: #1C1D20;
    --blue-050: #E8F7FF;
    --blue-100: #D5F0FF;
    --blue-200: #B3E1FF;
    --blue-300: #85CAFF;
    --blue-400: #56A5FF;
    --blue-500: #2F7FFF;
    --blue-600: #0C52FF;
    --blue-700: #0047FF;
    --blue-800: #0640CD;
    --blue-900: #103E9F;
    --blue-950: #0A225C;
    --yellow-050: #FFFEE7;
    --yellow-100: #FFFDC1;
    --yellow-200: #FFEF14;
    --yellow-300: #FFEA41;
    --yellow-400: #FFDB0D;
    --yellow-500: #FFCE00;
    --yellow-600: #D19800;
    --yellow-700: #A66B02;
    --yellow-800: #89540A;
    --yellow-900: #74440F;
    --yellow-950: #442304;
    --red-050: #FFF1F1;
    --red-100: #FFE1E1;
    --red-200: #FFC7C7;
    --red-300: #FFA0A0;
    --red-400: #FF5454;
    --red-500: #F83B3B;
    --red-600: #E51D1D;
    --red-700: #C11414;
    --red-800: #A01414;
    --red-900: #841818;
    --red-950: #480707;
    --green-050: #F0FEE7;
    --green-100: #DDFBCC;
    --green-200: #BEF79F;
    --green-300: #6EE339;
    --green-400: #6EE339;
    --green-500: #4CC919;
    --green-600: #38A010;
    --green-700: #2C7A11;
    --green-800: #276113;
    --green-900: #235215;
    --green-950: #0E2D06;
    --pink-050: #FEF1F6;
    --pink-100: #FEE5EF;
    --pink-200: #FFCAE0;
    --pink-300: #FF9FC4;
    --pink-400: #FF639C;
    --pink-500: #FF3F7F;
    --pink-600: #F01251;
    --pink-700: #D10539;
    --pink-800: #AD072F;
    --pink-900: #8F0C2C;
    --pink-950: #580015;
    --default-white: #FFFFFF;
    --default-black: #000000;
    /* semantic-colors */
    --text-primary: var(--gray-950);
    --text-secondary: var(--gray-700);
    --text-placeholder: var(--gray-500);
    --text-disabled: var(--gray-400);
    --text-link: var(--blue-700);
    --text-link-hover: var(--blue-900);
    --text-link-secondary: var(--gray-950);
    --text-link--secondary-hover: var(--blue-700);
    --text-error: var(--red-800);
    --text-success: var(--green-800);
    --text-warning: var(--yellow-800);
    --text-info: var(--blue-800);

    --bg-surface-primary: var(--default-white);
    --bg-surface-secondary: var(--gray-050);
    --bg-fill-brand-secondary: var(--yellow-500);
    --bg-fill-accent: var(--pink-500);
    --bg-fill-disabled: var(--gray-200);
    --bg-fill-input-primary: var(--default-white);
    --bg-fill-input-secondary: var(--gray-200);
    --bg-fill-danger: var(--red-500);
    --bg-fill-success: var(--green-500);
    --bg-fill-warning: var(--yellow-500);
    --bg-fill-info: var(--blue-500);
    --bg-fill-white: var(--default-white);
    --bg-fill-black: var(--default-black);

    --border-primary: var(--gray-300);
    --border-focus: var(--gray-900);
    --border-error: var(--red-800);
    --border-success: var(--green-800);
    --border-warning: var(--yellow-800);
    --border-info: var(--blue-800);
    --border-accent: var(--pink-800);
    --border-black: var(--gray-900);
    --btn-focus-shadow: 0, 0, 0;

    /* Theme Colors */
    --tp-theme-primary: #F0344D;
    --tp-theme-secondary: #0B3A58;
    --tp-theme-primary-gradient: linear-gradient(to right, var(--tp-theme-primary), var(--tp-theme-secondary));

    /* Brand Colors */
    --bg-fill-brand: var(--tp-theme-primary);
    --text-brand: #FFFFFF;
}

html {
    scroll-behavior: smooth;
}

main {
    background-color: var(--bg-surface-secondary);
}

body {
    font-size: 16px;
    line-height: 1.25rem;
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--text-primary);
}

/* typography */
.display_1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 4.5rem;
}

.display_2 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 4rem;
}

.display_3 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 3.5rem;
}

.headline_1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3rem;
}

.headline_2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
}

.headline_3 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
}

.headline_4 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.headline_5 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.headline_6 {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.125rem;
}

.subhead_1 {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 3rem;
}

.subhead_2 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 2.5rem;
}

.subhead_3 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2rem;
}

.subhead_4 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.subhead_5 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.subhead_6 {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.body_2 {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.caption {
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
}

/* End Typography */

/* Buttons */
.btn {
    font-size: 1rem;
    line-height: 1.25rem;
    height: 3rem;
    font-weight: 500;
    padding: .8rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    white-space: nowrap !important;
}

.btn ion-icon {
    font-size: 1.25rem;
}

.primary-btn {
    --bs-btn-color: var(--text-brand);
    --bs-btn-bg: var(--bg-fill-brand);
    --bs-btn-border-color: var(--bg-fill-brand);
    --bs-btn-hover-color: var(--text-brand);
    --bs-btn-hover-bg: var(--bg-fill-brand);
    --bs-btn-hover-border-color: var(--bg-fill-brand);
    --bs-btn-focus-shadow-rgb: var(--btn-focus-shadow);
    --bs-btn-active-color: var(--text-brand);
    --bs-btn-active-bg: var(--bg-fill-brand);
    --bs-btn-active-border-color: var(--bg-fill-brand);
    --bs-btn-disabled-color: var(--text-disabled);
    --bs-btn-disabled-bg: var(--bg-fill-disabled);
    --bs-btn-disabled-border-color: var(--border-primary);
}

/* Boton de iniciar sesion: degradado del tema */
#btn-login {
    background-color: var(--tp-theme-primary);
    background-image: var(--tp-theme-primary-gradient);
    border: none;
    transition: opacity .2s ease;
}

#btn-login:hover,
#btn-login:focus-visible {
    opacity: .9;
}

#btn-login:disabled {
    opacity: .6;
}

.outline-btn {
    --bs-btn-color: var(--tp-theme-primary);
    --bs-btn-bg: var(--bg-fill-white);
    --bs-btn-border-color: var(--tp-theme-primary);
    --bs-btn-hover-color: var(--text-brand);
    --bs-btn-hover-bg: var(--tp-theme-primary);
    --bs-btn-hover-border-color: var(--tp-theme-primary);
    --bs-btn-focus-shadow-rgb: var(--btn-focus-shadow);
    --bs-btn-active-color: var(--text-brand);
    --bs-btn-active-bg: var(--bg-fill-brand);
    --bs-btn-active-border-color: var(--bg-fill-brand);
    --bs-btn-disabled-color: var(--text-disabled);
    --bs-btn-disabled-bg: var(--bg-fill-disabled);
    --bs-btn-disabled-border-color: var(--border-primary);
}

.primary-link {
    color: var(--text-link);
}

.primary-link:hover {
    color: var(--text-link-hover);

}

.secondary-link {
    color: var(--text-link-secondary) !important;
}

.secondary-link:hover {
    color: var(--text-link--secondary-hover) !important;
}

.disabled-link {
    color: var(--text-disabled) !important;
    pointer-events: none;
    cursor: default;
}

/* End Buttons */

/* Inputs */
.row-form-control {
    /* background-color: pink; */
    width: 100%;
    display: flex;
    gap: 1.25rem;
}

.wrap-form-control {
    flex-grow: 1;
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    color: var(--text-secondary);
    font-size: .875rem;
    margin-bottom: .25rem;
}

.form-control,
.form-select {
    width: 100%;
    height: 3rem;
    padding: .5rem 1rem;
    font-size: 1rem;
    line-height: 1.25rem;
    color: var(--text-primary);
    background-color: var(--bg-fill-input-primary);
    border: 1px solid var(--border-primary);
    border-radius: .5rem;
}

.form-control:focus,
.form-select:focus {
    color: var(--text-primary);
    background-color: var(--bg-fill-input-primary);
    border-color: var(--border-focus);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--btn-focus-shadow), .25);
}

.form-check {
    /* background-color: yellow; */
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    margin-right: 0;
    vertical-align: middle;
    background-color: var(--bg-fill-white);
    border: 1px solid var(--border-primary);
    border-radius: .25rem;
}

.form-check-input:checked {
    background-color: var(--tp-theme-primary);
    border-color: var(--bg-fill-brand);
}

.form-check-input:focus {
    border-color: var(--border-focus);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--btn-focus-shadow), .25);
}

.form-check-label {
    color: var(--text-primary);
    font-size: 1rem;
}

.invalid-feedback {
    /* display: block; */
    color: var(--text-error);
    font-size: .875rem;
    margin-top: .25rem;
}

/* End inputs */

/* Login */
.container-login {
    /* background-color: var(--bg-fill-brand); */
    display: flex;
    justify-content: center;
    min-height: 95dvh;
}

.container-login--img {
    width: 100%;
    background-image: url('../images/fondos/bg-login.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.logo-login {
    width: 10rem;
    height: auto;
    border-radius: .25rem;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    -ms-border-radius: .25rem;
    -o-border-radius: .25rem;
}

.container-login--form {
    /* background-color: var(--bg-fill-success); */
    width: 100%;
    min-height: 100%;
    padding: 1.5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
}

.form-login {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;

    .primary-link {
        text-align: center;
        align-self: center;
        margin-top: 1rem;
    }
}

.form-group {
    margin-bottom: 1rem;
    text-align: left;
}

.form-group label {
    color: var(--text-secondary);
    margin-bottom: .25rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    align-items: bottom;
}

/* Toggle-password */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper .form-control {
    padding-right: 2.5rem;
}

.toggle-password-icon {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.toggle-password-icon:hover {
    color: var(--text-primary);
}



/* End toggle password */

.header-form {
    text-align: center;
}

/* End login */

/* Footer */
.footer-prize {
    background-color: var(--tp-theme-primary);
    border-top: none;
    color: var(--text-brand);
}

.footer-prize .headline_5,
.footer-prize p {
    color: var(--text-brand);
}

/* secondary-link usa !important en su color, hay que igualarlo aqui */
.footer-prize .secondary-link,
.footer-prize .secondary-link:hover {
    color: var(--text-brand) !important;
}

.footer-prize .secondary-link:hover {
    text-decoration: underline;
}

/* Logo en blanco para que se vea sobre el color primario */
.footer-prize .footer-content > img {
    filter: brightness(0) invert(1);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem 0;
    gap: 10rem;
}

.footer-info {
    /* background-color: lavender; */
    width: 100%;
    display: flex;
    gap: 2.5rem;
}

.footer-column {
    flex: 1;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        margin-bottom: 1rem;
    }
}

/* End footer */

/* Modals */
.modal-prize {
    .modal-content {
        border-radius: 1rem;
        border: 1px solid var(--border-black); 
    }

    .modal-body {
        padding: 1.5rem;

        h1 {
            margin-bottom: 1rem;
        }
    }

    .modal-footer {
        padding: 1.5rem;

        button {
            margin: 0;
            width: 100%;
        }
    }

    .modal-dialog {
        --bs-modal-width: 400px;
    }
}

.icon-modal {
    color: var(--bg-fill-success);
    font-size: 3.5rem;
}

.modal-footer-btns-v {
    flex-direction: column;
    gap: .5rem;
}

/* End modals */

/* Crear nueva contraseña */
.container-base {
    display: flex;
    justify-content: center;
    min-height: 95dvh;
}
/* End crear nueva contraseña */