@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css');


:root {
    --orange: #ff5900;
    --orange-dark: #cc4700;
    --purple: #9267dc;
    --purple-dark: #5d428c;
    --purple-darkest: #432f64;
    --gray: #4f4e4d;
    --gray-dark: #282726;

    --base-color: #000;
    --text-font: "Roboto", sans-serif;
    --title-font: "Sharp Slab", serif;
}

.flex-1 {
    flex: 1;
}

.flex-0 {
    flex: 0;
}

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

.text-orange {
    color: var(--orange)
}

.uv {
    background: url(https://philromeodesign.wordpress.com/wp-content/uploads/2015/05/custom_uv_diag.png) top right no-repeat;
    background-size: 100% 100%;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

body {
    background: #ffffff;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1151 768'%3E%3Cpath d='M0,505c2,0,5.1-.5,6.9-1.4,14.2-6.6,27-14.1,40.3-22.7,26.8-17.4,48.3-37.7,80.2-47.8,68-21.6,129.7-.4,197.2,5.4,56.2,4.9,107.5,0,154.5-32.7,89.1-62.1,101.2-199.1,205.3-244.1,100.4-43.4,173.8,44.6,266,53.7,2.5.6,5.6.6,7.5.6h12l4.5-.6c38-2.7,73.1-19.3,105.8-37.6,11-6.2,22.1-12.8,32.8-19.4,9.8-6,28.3-18.7,37.8-24.4s-3.3,635,0,634H0' fill='%239267db'/%3E%3Cpath d='M1151.2,383.1v384.9H.7l.3-62.2c6.7-2.1,13.5-3.7,20.1-6.1,42.6-15.8,75.5-50.2,116.9-68.8s70.7-20.4,108-17.8c103.5,7.3,192.4,81.4,300.4,46.4,91.8-29.7,133.7-122.9,237.4-128.1,66-3.3,118.3,43.3,181.6.3,55.4-37.7,70.3-103.1,138.4-134.2,15-6.8,31.1-12.1,47.5-14.3Z' fill='%237251ac'/%3E%3C/svg%3E") no-repeat center center fixed #ff5900;
    /*background-color: #bfa7e7;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0;
    height: 100%;
    min-height: 100vh;
    position: absolute;
    width: 100%;
    line-height: normal;

    font-family: "Roboto", sans-serif;
    font-size: 1rem;
}

a,
a:hover {
    text-decoration: inherit;
    color: inherit;
}

.link {
    text-decoration: underline;
    color: #9267DC;
}

.link:hover {
    text-decoration: underline;
    color: #5d428c;
}

.header {
    /*background: #ff5900;*/
    background-color: white;
    color: var(--orange);
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(58, 59, 69, 0.25);
    z-index: 10;
}

.header-logo {
    max-width: 18vw;
    max-height: 2.5rem;
}

.header-title {
    /*color: #ffffff;*/
    text-align: left;
    font-family: "Zilla Slab", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    position: relative;
}

a.btn {
    display: block;
    width: fit-content;
    color: white;
    border: 1px solid white;
    border-radius: 2rem;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
}



.form-select,
input.form-control,
.select2-container--default .select2-selection--multiple,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="color"],
input[type="range"],
.form-control.is-valid,
.was-validated .form-control:valid,
textarea,
select {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid #dddddd;
    border-radius: 6px;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.form-select:focus,
.form-control:focus,
.select2-container--default .select2-selection--multiple:has(textarea:focus),
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="color"]:focus,
input[type="range"]:focus,
input[type="checkbox"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #ff5900 !important;
    box-shadow: 0 0 8px rgba(52, 73, 94, 0.3);
}

.form-select {
    padding-right: 2rem;
}

input[type="file"] {
    --padding: 0.5rem;
    padding-top: 0;
    padding-bottom: 0;
    height: calc(2*(1.6px + var(--padding)) + 1.5rem);
}

input[type="file"]::file-selector-button {
    background-color: var(--orange);
    color: #ffffff;
    height: 100%;
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
}

input.form-control[type="file"]::file-selector-button {
    height: 130%;
}

input[type="file"]:enabled:hover::file-selector-button {
    background-color: var(--orange-dark) !important;
    color: #ffffff;
}

input[type="file"]:disabled::file-selector-button {
    background-color: #ccc; 
}

ul#select2-programs-container {
    max-width: 100%;
}

span.select2.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple {
    border: 2px solid #dddddd;
    background-color: #fff;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #e9ecef;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
    padding-left:4px
}


li.select2-selection__choice {
    margin: 2px 5px 2px 0px !important;
}

textarea.select2-search__field {
    margin-top: 0px !important;
    font-size: 1rem !important;
    font-family: 'Roboto', sans-serif !important;
    height: 1.5rem !important;
}

span.select2-search.select2-search--inline {
    display: inline-flex;
    align-items: center;
    bottom: 0px;
    max-width: 100%;
}

span.select2-selection.select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

ul.select2-selection__rendered {
    margin: 0px !important;
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

button:not(.select2 button),
input[type="file"]::file-selector-button {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    /*padding: 0.75rem 1.75rem;*/
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    user-select: none;
    /*margin-top: 0.5rem;*/
}

button:focus,
.btn:focus {
    outline: 3px solid #ff5900 !important;
    outline-offset: 2px;
    box-shadow: none;
}

.swal-popup-custom .swal2-html-container {
    font-weight: normal;
    text-align: justify;
}

.swal-btn-confirm,
.swal-btn-deny {
    color: #FFFFFF;
}

.swal-btn-confirm {
    background-color: #28a745;
}

.swal-btn-confirm:hover {
    background-color: #218838;
    border: 1px solid transparent;
    color: #FFFFFF;
}

.swal-btn-deny {
    background-color: #dc3545;
}

.swal-btn-deny:hover {
    background-color: #c82333;
    border: 1px solid transparent;
    color: #FFFFFF;
}

.btnReplace {
    min-width: 0;
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    display: inline-block;
}


.btn-logout {
    border: 0.5px solid #ffffff;
}

.btn-purple {
    background-color: var(--purple);
    color: #ffffff;
}

.btn-purple:hover {
    background-color: var(--purple-dark);
    color: #ffffff;
}

.btn-purple-dark,
.btnShow {
    background-color: var(--purple-dark);
    color: #ffffff;

    &:hover {
        background-color: #68479c;
        color: #ffffff;
    }
}

.btn-orange,
.btnReplace,
.btn#edit {
    background-color: var(--orange);
    color: #ffffff;

    &:hover {
        background-color: var(--orange-dark);
        color: #ffffff;
    }
}
.btnReplace:disabled,
.btnReplace.disabled{
    background-color: #d1d1d1 !important;
    color: #7a7a7a !important;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}

.btn-secondary {
    background-color: #7f8891;
}


.btn-orange.hover-white:hover {
    color: #ff5900!important;
    background-color: #fff !important;
    border: 1px solid #ff5900;
}

.hover-white:hover {
    background-color: #fff !important;
}



.hover-text-orange:hover {
    color: #ff5900;
}


.wrapper {
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}


.container {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
    align-self: stretch;
    position: relative;
    flex: 1;
    justify-content: flex-start;
    overflow: auto;
    padding: 1rem;
    padding-top: 1.5rem;
}

.subcontainer {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
    align-self: stretch;
    position: relative;
    flex: 1;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    margin: auto;

    background-color: white;
    border-radius: 1rem;
}


.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 0 2rem 1.5rem;
    flex: 1;
}

div {
    max-width:100%
}

@media (max-width: 690px) {
    .container {
        padding-top: 1rem;
    }

    .content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


.content-box {
    box-shadow: 0 0.25rem 0.5rem rgba(58, 59, 69, 0.1);
    background: #ffffff;
    border-radius: 1rem;
    border: 1.5px solid #e9ecef;
    display: flex;
}

.padding {
    padding: 2rem;
}

h1,
h2,
h3,
h4,
h5,
.heading {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 5px;
}

.h6 {
    font-family: 'Zilla Slab', serif;
    font-size: 1.1em;
    font-weight: 700;
}

.form-group {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
}

.form-label {
    font-family: 'Zilla Slab', serif;
    font-weight: 500;
}

.zilla {
    font-family: 'Zilla Slab', serif;
}

label {
    font-family: 'Zilla Slab', serif;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: #000000;
}

.heading {
    text-align: center;
    align-self: stretch;
    position: relative;
    font-size: 2rem;
    line-height: 0.7;
    padding: 1.3rem 0;
    background-color: var(--purple-dark);
    color: white;
    margin: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.subheading {
    font-size: 57%;
}

.heading-icon {
    position: absolute;
    right: 3rem;
    bottom: 0;
    color: hsl(262deg 35% 50%);
    font-size: 4.5rem;
    mix-blend-mode: lighten;
}


.list-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    overflow: hidden;
}

.step {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    background: #ffffff;

    border: 0px solid #e9ecef;
    border-width: 0 0 1.5px 0;
}

.row-step {
    padding: .5rem 1rem .5rem 1.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    position: relative;
    text-align: center;
}

.step:last-child {
    border-width: 0px;
}

.row-step>div {
    display: flex;
    gap: .625rem;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
}


.row-step-arrow {
    font-size: 1.25em;
    flex: 0 !important;
    padding-left: 1rem;
}

.inactive .row-step-arrow span {
    color: transparent;

}

.highlighted-text {
    border-radius: 2rem;
    padding: .25rem .5rem;
    text-align: center;
    flex-shrink: 0;
    position: relative;
}

.highlighted-text.ok {
    background: #1ecab8;
}

.highlighted-text.wait {
    background: #fbb624;
}

.highlighted-text.bad {
    background: #f93b7a;
    color: white;
}

.inactive .row-step {
    color: #b1b1b1;
}

.inactive {
    pointer-events: none;
    cursor: default;
}



.message-box {
    border-radius: .5rem;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 100%;
}

.message-box.warning {
    background: #f93b7a;
    color: #ffffff;
}

.message-box>svg {
    position: relative;
    overflow: visible;
    flex: 1;
    min-width: 0;
    height: 5rem;
    align-self: flex-start;
    margin: 1rem;
    max-width: fit-content;
}

.message-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    text-align: center;
    flex: 1;
}

.message-body p {
    max-height: 8rem;
    overflow: auto;
    text-align: justify;
    padding-right: 1em;
}

.message-text {
    max-width: 38rem;
    text-align: justify;
}

.message-date {
    text-align: right;
}

/*new style*/
.message-box {
    position: relative;
    padding: 0.5rem 1rem;
    margin: 0 auto 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    max-width: 80ch;
}

.message-box.warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

svg.exclamation-triangle path {
    fill: currentColor;
}

.message-body>*:first-child {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    font-size: 1.5rem;
}

.message-box>svg {
    margin: auto;
}

/**/



.form-check-input:checked {
    background-color: #ff5900;
    border-color: #ff5900;
}

.editing .form-check-input:checked {
    background-color: #9267DC;
    border-color: #9267DC;
}

input[type="checkbox"]:checked:disabled,
input[type="checkbox"]:checked:disabled~label {
    opacity: 1;
}

label.checkbox-label,
label.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    color: #4f4e4d;
}

input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
    width: 1.1em;
    height: 1.1em;
    accent-color: #ff5900;
    margin: 0;
}

/* info personal */


.input-message {
    width: 100%;
    margin-top: .25rem;
    color: #93989f;
}

.input-message,
.invalid-feedback,
#form div {
    font-size: 90%;
}

.profile-pic-wrapper {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}




.uploadProfileInput {
    width: 0px;
    height: 0px;
    position: absolute;
}



.infopersonal-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    position: relative;
}

.form-fields {
    display: flex;
    flex-direction: row;
    gap: 2.625rem;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

/*
form span.text-danger,
form .input-message,
form,
.editing .editButton,
.deleteButton {
    display: none;
}


.editing span.text-danger,
.editing .input-message,
.editButton,
.editing,
.editing .deleteButton {
    display: inline-block;
}*/

.hidden {
    display: none;
}


#formContainer {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}


.custom-file-button {
    input[type="file"] {
        margin-left: -2px !important;

        &::-webkit-file-upload-button {
            display: none;
        }

        &::file-selector-button {
            display: none;
        }
    }
}

.editing .custom-file-button {
    input[type="file"] {
        margin-left: -2px !important;

        &::-webkit-file-upload-button {
            display: initial;
        }

        &::file-selector-button {
            display: initial;
        }
    }

    button {
        display: none;
    }
}


.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-button {
    background-color: #fff;
    border-color: #ddd;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f8f8;
    color: #495057;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.hover-slide-icon * {
    transition: padding 0.3s, width 0.3s, opacity 0.3s;
}

.hover-slide-icon span {
    padding: 0 0.5em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hover-slide-icon:hover span {
    padding: 0 0 0 1em;
}

.hover-slide-icon:hover i {
    padding-left: 0.5em;
    padding-right: 0;
}

.hide-icon i {
    width: 0;
    overflow: hidden;
    opacity: 0;
}

.hide-icon:hover i {
    width: 1.5em;
    opacity: 1;
}

/* sidebar */

.nav-sidebar {
    margin-top: 1.5rem;
    flex: 1;
    max-width: 16.35rem;
}

.nav-sidebar>ul {
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.sidebar-row {
    background: #ffffff;
    border-radius: 0rem 2rem 2rem 0rem;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
}

.sidebar-row a {
    padding: .5rem 1.5rem;
    flex: 1;
}

.sidebar-row a:hover,
.step:hover {
    background: #E9ECEF;
}

.sidebar-row a:active,
.step:active {
    background: #dbdee0;
}

.sidebar-row.active a {
    background: #ff5900;
    color: #ffffff;
    font-weight: 600;
    pointer-events: none;
}

.menu-btn {
    display: none;
}

.container {
    max-width: 100%;
}

.nav-sidebar {

    display: none;
}

@media (max-width: 1199.98px) {
    .menu-btn {
        display: inline-block;
    }


    .nav-sidebar {
        position: absolute;
        z-index: 10;
        margin: 0;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100%;
        background-color: #ff5900;
        color: white;
        overflow-y: auto;
        transition: left 0.3s ease;
        padding-top: 20px;
    }

    .nav-sidebar.active {
        left: 0;
    }

    .sidebar-row {
        background: none;
        border-radius: 0;
    }

    .sidebar-row a:hover {
        background: #E9ECEF;
        color: #ff5900;
    }

    .sidebar-row a:active {
        background: #dbdee0;
    }

    .sidebar-row.active a {
        background: #ffffff;
        color: #ff5900;
    }


}

/*
@media (max-width: 768px) {
    html {
        font-size: 80%;
    }

}*/

.custom-feedback {
    display: none;
    /* Ocultar el mensaje de error por defecto */
    width: 100%;
    margin-top: .25rem;
    font-size: 16px;
    color: #dc3545;
    /* Rojo para el mensaje de error */
}

.is-invalid {
    border-color: red;
}