/* ========================
   Estilos Base para Inputs
   ======================== */

input.form-control,
textarea.form-control,
select.form-control {
    height: 2.1875rem;
    font-size: 1rem;
    padding: 6px 20px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--size-13);
    color: var(--color-on-surface);
    line-height: 1.2;
    width: 100%;
    transition: all var(--time-transition);
}

label {
    user-select: none;
}

label.label-select {
    width: 100%;
    margin-bottom: 0;
}

input.form-control {
    overflow: hidden;
    text-overflow: ellipsis;
}

input[type="password"].form-control {
    padding-right: 50px;
}

textarea.form-control {
    resize: none;
    border-radius: var(--size-3);
    height: 4.375rem;
    min-height: 4.375rem;
    max-height: 4.375rem;
}

::placeholder {
    color: var(--color-input-placeholder) !important;
}

label.isRequired::before {
    content: '* ';
    color: var(--color-primary);
}

div.container-label-with-icon {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

div.container-label-with-icon i {
    font-size: 1.25rem;
    margin-bottom: .5rem;
    color: var(--color-primary);
}

div.form-group {
    margin-bottom: 2.1875rem;
    position: relative;
}

div.form-group .helper-text {
    position: absolute;
    font-size: 0.875rem;
    font-style: italic;
}

div.form-group .helper-text.error {
    color: var(--color-error);
}

div.form-group .helper-text.warning {
    color: var(--color-warning);
}

div.form-group .helper-text.info {
    color: var(--color-info);
}

div.form-group .helper-text.success {
    color: var(--color-success);
}

.inputWithIcon {
    position: relative;
}

i.showPassword {
    position: absolute;
    right: var(--size-5);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--color-input-icon);
    display: flex;
    align-items: center;
    cursor: pointer;
}

i.showPassword:hover {
    color: var(--color-on-surface);
}

div.form-group label.form-label {
    color: var(--color-input-label);
    font-weight: 700;
    display: block;
}

label.form-label.label-info {
    display: flex !important;
    align-items: center;
    gap: 0.9375rem;
    font-size: 0.875rem !important;
    width: fit-content;
}

.container-inline-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5625rem;
    margin-bottom: 2.1875rem;
}

.container-inline-inputs div.form-group {
    margin-bottom: 0;
}

/* Switch */

.form-group.container-input-check {
    min-height: 2.1875rem;
    display: flex;
    align-items: center;
}

.custom-switch {
    height: 28px;
    margin: 0;
    padding-left: 3.125rem;
}

.custom-switch.disabled {
    cursor: not-allowed;
}

.custom-switch .form-check-input {
    width: 50px;
    height: 28px;
    margin-top: 0;
    margin-left: -3.125rem;
    background-color: var(--color-bg-disabled);
    background-image: none;
    border-radius: 34px;
    border: none;
    transition: background-color var(--time-transition) ease-in-out, box-shadow var(--time-transition);
    cursor: pointer;
    position: relative;
}

.custom-switch .form-check-input:focus {
    box-shadow: none !important;
}

.custom-switch .form-check-input::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-on-primary);
    border-radius: 50%;
    transition: transform var(--time-transition);
    box-shadow: var(--shadow-soft);
}

.custom-switch .form-check-input:checked {
    background-color: var(--color-primary);
}

.custom-switch .form-check-input:checked::before {
    transform: translateX(22px);
}

.custom-switch .form-check-label {
    font-size: 1rem;
    margin-left: 10px;
    color: var(--color-input-label);
    font-weight: 700;
    cursor: pointer;
}

/* Date */
div.datepicker {
    font-size: 13px;
}

div.datepicker * {
    font-size: 1em;
}

.datepicker div.datepicker-days table tbody tr td {
    border: 1px solid var(--color-border) !important;
    border-radius: 0;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active:active {
    color: var(--color-on-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: 0;
}

.datepicker .datepicker-switch,
.datepicker table tr th.dow {
    color: var(--color-on-surface);
    font-weight: 700;
}

.datepicker table tr td.new,
.datepicker table tr td.old {
    color: var(--color-input-placeholder);
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover,
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    color: var(--color-bg-disabled);
    cursor: not-allowed;
}

.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background: var(--color-hover-medium);
}

.datepicker table tr td span.focused,
.datepicker table tr td span:hover {
    background: var(--color-hover-medium);
}

.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover:active {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 700;
}

.datepicker table tr td span.active.active.focus,
.datepicker table tr td span.active.active:focus,
.datepicker table tr td span.active.active:hover,
.datepicker table tr td span.active.disabled.active.focus,
.datepicker table tr td span.active.disabled.active:focus,
.datepicker table tr td span.active.disabled.active:hover,
.datepicker table tr td span.active.disabled:active.focus,
.datepicker table tr td span.active.disabled:active:focus,
.datepicker table tr td span.active.disabled:active:hover,
.datepicker table tr td span.active.disabled:hover.active.focus,
.datepicker table tr td span.active.disabled:hover.active:focus,
.datepicker table tr td span.active.disabled:hover.active:hover,
.datepicker table tr td span.active.disabled:hover:active.focus,
.datepicker table tr td span.active.disabled:hover:active:focus,
.datepicker table tr td span.active.disabled:hover:active:hover,
.datepicker table tr td span.active:active.focus,
.datepicker table tr td span.active:active:focus,
.datepicker table tr td span.active:active:hover,
.datepicker table tr td span.active:hover.active.focus,
.datepicker table tr td span.active:hover.active:focus,
.datepicker table tr td span.active:hover.active:hover,
.datepicker table tr td span.active:hover:active.focus,
.datepicker table tr td span.active:hover:active:focus,
.datepicker table tr td span.active:hover:active:hover {
    color: var(--color-on-primary);
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Date - TempusDominus */
.iconInputDate {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--color-border);
    transition: all var(--time-transition-fast) ease-in-out;
}

input.form-control.form-date-input {
    padding-right: 40px;
}

div.container-date {
    width: 100%;
    position: relative;
}

.container-date:focus-within .iconInputDate {
    color: var(--color-on-surface);
}

.tempus-dominus-widget.light {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-medium);
    border-radius: 0.5rem;
    margin-top: 0.0625rem !important;
    padding: 0 !important;
    width: 18.125rem;
    user-select: none;
}

.tempus-dominus-widget .toolbar {
    grid-auto-rows: unset;
    padding: 0.3125rem 0.625rem;
}

.tempus-dominus-widget .toolbar div {
    padding: 7px 10px;
    transition: all var(--time-transition-fast) ease-in-out;
}

.tempus-dominus-widget .toolbar div,
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight),
.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight),
.tempus-dominus-widget.light .date-container-months div:not(.no-highlight),
.tempus-dominus-widget.light .date-container-years div:not(.no-highlight),
.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight),
.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight),
.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight),
.tempus-dominus-widget.light .time-container-second div:not(.no-highlight) {
    text-transform: capitalize;
}

.tempus-dominus-widget .toolbar div:hover,
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget.light .date-container-months div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget.light .date-container-years div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight):not(.disabled):hover,
.tempus-dominus-widget.light .time-container-second div:not(.no-highlight):not(.disabled):hover {
    background-color: var(--color-hover-medium);
}

.tempus-dominus-widget.light .date-container-days div.disabled:hover,
.tempus-dominus-widget.light .date-container-decades div.disabled:hover,
.tempus-dominus-widget.light .date-container-months div.disabled:hover,
.tempus-dominus-widget.light .date-container-years div.disabled:hover,
.tempus-dominus-widget.light .time-container-clock div.disabled:hover,
.tempus-dominus-widget.light .time-container-hour div.disabled:hover,
.tempus-dominus-widget.light .time-container-minute div.disabled:hover,
.tempus-dominus-widget.light .time-container-second div.disabled:hover {
    background-color: transparent !important;
}

.tempus-dominus-widget.light .date-container-days div.disabled i,
.tempus-dominus-widget.light .date-container-decades div.disabled i,
.tempus-dominus-widget.light .date-container-months div.disabled i,
.tempus-dominus-widget.light .date-container-years div.disabled i,
.tempus-dominus-widget.light .time-container-clock div.disabled i,
.tempus-dominus-widget.light .time-container-hour div.disabled i,
.tempus-dominus-widget.light .time-container-minute div.disabled i,
.tempus-dominus-widget.light .time-container-second div.disabled i {
    color: var(--color-bg-disabled) !important;
}

.tempus-dominus-widget .toolbar div i,
.tempus-dominus-widget .date-container div.calendar-header div i,
.tempus-dominus-widget .time-container-clock div i {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    color: var(--color-primary);
}

.tempus-dominus-widget .time-container-clock {
    grid-auto-rows: calc(2.1875rem - 1.14286px);
}

.tempus-dominus-widget .time-container-hour,
.tempus-dominus-widget .time-container-minute,
.tempus-dominus-widget .time-container-second {
    grid-auto-rows: calc(2.1875rem - 1.14286px);
}

.tempus-dominus-widget .time-container-clock div,
.tempus-dominus-widget .time-container-hour div,
.tempus-dominus-widget .time-container-minute div,
.tempus-dominus-widget .time-container-second div {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-on-surface);
}

.tempus-dominus-widget .time-container {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
    padding: 0.3125rem;
}

.tempus-dominus-widget .date-container div.calendar-header {
    padding: 0.3125rem;
    background-color: var(--color-primary);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    margin-bottom: 0;
}

.tempus-dominus-widget .date-container div.calendar-header div.picker-switch {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
}

.tempus-dominus-widget .date-container div.calendar-header div i {
    color: var(--color-on-primary);
    display: block;
}

.tempus-dominus-widget .date-container div.date-container-days,
.tempus-dominus-widget .date-container div.date-container-months,
.tempus-dominus-widget .date-container div.date-container-years,
.tempus-dominus-widget .date-container div.date-container-decades {
    padding: 0.3125rem;
}

.tempus-dominus-widget .date-container div.date-container-days .dow.no-highlight {
    text-transform: capitalize;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem;
}

.tempus-dominus-widget .date-container-days {
    grid-auto-columns: 2.5rem;
    grid-auto-rows: 1.875rem;
}

.tempus-dominus-widget .date-container-days .day,
.tempus-dominus-widget .date-container-months .month,
.tempus-dominus-widget .date-container-years .year,
.tempus-dominus-widget .date-container-decades .decade {
    font-size: 0.8125rem;
    color: var(--color-on-surface);
}

.tempus-dominus-widget .date-container-days .day.old,
.tempus-dominus-widget .date-container-decades .decade.old {
    color: var(--color-input-placeholder);
}

.tempus-dominus-widget .date-container-days .day.today {
    color: var(--color-primary);
    font-weight: 700;
}

.tempus-dominus-widget .date-container-days .day.today::before {
    border-width: 0 !important;
    border-color: transparent !important;
    color: transparent !important;
}

.tempus-dominus-widget .date-container-days .day.active,
.tempus-dominus-widget .date-container-months .month.active,
.tempus-dominus-widget .date-container-years .year.active,
.tempus-dominus-widget .date-container-decades .decade.active {
    text-shadow: none;
    color: var(--color-on-primary) !important;
    background-color: var(--color-primary) !important;
    cursor: default;
}

.tempus-dominus-widget .date-container-months .month.active,
.tempus-dominus-widget .date-container-years .year.active,
.tempus-dominus-widget .date-container-decades .decade.active {
    cursor: pointer;
}

.tempus-dominus-widget .date-container-days .day.disabled,
.tempus-dominus-widget .date-container-months .month.disabled,
.tempus-dominus-widget .date-container-years .year.disabled,
.tempus-dominus-widget .date-container-decades .decade.disabled {
    color: var(--color-bg-disabled) !important;
    cursor: not-allowed;
}

.tempus-dominus-widget .date-container-days .day.disabled:hover,
.tempus-dominus-widget .date-container-months .month.disabled:hover,
.tempus-dominus-widget .date-container-years .year.disabled:hover,
.tempus-dominus-widget .date-container-decades .decade.disabled:hover {
    background-color: transparent !important;
}

.tempus-dominus-widget .date-container-days .day.range-start,
.tempus-dominus-widget .date-container-days .day.range-end,
.tempus-dominus-widget .date-container-days .day.range-start:hover,
.tempus-dominus-widget .date-container-days .day.range-end:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    text-shadow: none !important;
    font-weight: 700;
}

.tempus-dominus-widget .date-container-days .day.range-in {
    background-color: var(--color-primary-hover) !important;
    color: var(--color-on-primary) !important;
    text-shadow: none !important;
    box-shadow: -5px 0 0 var(--color-primary-hover), 5px 0 0 var(--color-primary-hover);
}

/* Tel */
.container-tel div.iti {
    width: 100%;
    display: block;
}

.container-tel .iti__selected-country-primary {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.iti__search-input {
    font-size: 0.875rem;
    padding: 0.3125rem 0.625rem;
    height: 1.875rem;
    border: 1px solid var(--color-border);
    color: var(--color-on-surface);
}

.iti__search-input:active,
.iti__search-input:focus-visible,
.iti__search-input:focus,
.iti__search-input:hover {
    outline: none;
}

.iti__search-input:active,
.iti__search-input:focus-visible,
.iti__search-input:focus {
    border-color: var(--color-on-surface);
}

.iti__country-name,
.iti__dial-code {
    font-size: 14px;
}

.iti.disabled-style button.iti__selected-country {
    cursor: not-allowed;
}

.iti.disabled-style .iti__selected-dial-code {
    color: var(--color-text-disabled) !important;
}

/* Color */
div.form-group.form-color {
    display: flex;
    align-items: center;
    gap: 1rem;
}

div.form-group.form-color label {
    margin: 0;
}

input.form-color-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

input.form-color-input::-webkit-color-swatch {
    border-radius: 0.5rem;
    border: none;
}

input.form-color-input::-moz-color-swatch {
    border-radius: 0.5rem;
    border: none;
}

/* Range */
div.input-range-container {
    display: flex;
    align-items: center;
    gap: 25px;
}

div.input-range-container span {
    font-size: 0.875rem;
    font-weight: 700;
    min-width: 30px;
    text-align: center;
}

input[type="range"] {
    font-size: 1rem;
    width: 100%;
}

input[type="range"] {
    color: var(--color-primary);
    --thumb-height: 1.125em;
    --track-height: 0.125em;
    --track-color: rgba(var(--color-backdrop-rgb), 0.2);
    --brightness-hover: 180%;
    --brightness-down: 80%;
    --clip-edges: 0.125em;
}

input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
}

input[type="range"]:active {
    cursor: grabbing;
}

input[type="range"]:disabled {
    filter: grayscale(1);
    opacity: 0.3;
    cursor: not-allowed;
}

input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    position: relative;
}

input[type="range"]::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;

    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));

    filter: brightness(100%);
    clip-path: polygon(100% -1px,
            var(--clip-edges) -1px,
            0 var(--clip-top),
            -100vmax var(--clip-top),
            -100vmax var(--clip-bottom),
            0 var(--clip-bottom),
            var(--clip-edges) 100%,
            var(--clip-further) var(--clip-further));
}

input[type="range"]:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
    appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    background: #fff0;
}

input[type="range"]::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
}

input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    background: var(--track-color);
}

input[type="range"]::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
}

/* Autocomplete */
div.container-autocomplete-list {
    position: relative;
    width: 100%;
}

div.container-autocomplete-list ul.ui-menu * {
    transition: all ease-in-out 0.1s;
}

div.container-autocomplete-list ul.ui-menu {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    border-radius: 0.5rem;
    top: 0.3125rem !important;
    list-style: none;
    padding: 0;
    position: absolute !important;
    width: 100% !important;
}

div.container-autocomplete-list ul li.ui-menu-item {
    border-radius: 0.5rem;
    padding: 0;
}

div.container-autocomplete-list div.autocomplete-container-list {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
}

div.container-autocomplete-list div.autocomplete-item {
    width: 100%;
    display: flex;
    align-items: center;
}

div.container-autocomplete-list div.autocomplete-item-info {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

div.container-autocomplete-list div.autocomplete-item-info.autocomplete-with-state {
    padding-right: 100px;
    position: relative;
}

div.container-autocomplete-list div.autocomplete-item-info.autocomplete-with-state .badge-status {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0.75rem;
    font-style: italic;
    padding: 0.3125rem 0.9375rem;
    border-radius: 50px;
    font-weight: 700;
}

div.container-autocomplete-list .item-info {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    margin-bottom: 0.3125rem;
}

div.container-autocomplete-list .item-info.item-subinfo,
div.container-autocomplete-list .item-info.item-subinfo * {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--color-input-placeholder);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

div.container-autocomplete-list .item-info.item-subinfo b {
    font-weight: 700;
}

div.container-autocomplete-list .item-info.item-subinfo i {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    color: var(--color-input-placeholder);
}

div.container-autocomplete-list div.ui-state-active {
    background: var(--color-hover-medium);
    border: 0px none;
    cursor: pointer;
}

div.container-autocomplete-list li.ui-menu-item:first-child div.ui-state-active {
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

div.container-autocomplete-list li.ui-menu-item:last-child div.ui-state-active {
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

div.container-autocomplete-list div.ui-state-active .item-info {
    color: var(--color-primary);
}

div.container-autocomplete-list div.ui-state-active .item-info.item-subinfo,
div.container-autocomplete-list div.ui-state-active .item-info.item-subinfo i {
    color: var(--color-on-surface);
}

/* Radio Switch */
div.container-radio-switch {
    border-radius: 10px;
    padding: 0.25rem 0.5rem;
    background-color: var(--color-bg-disabled);
    display: flex;
    align-items: center;
    width: fit-content;
    gap: var(--size-2);
}

div.container-radio-switch .radio-option {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    border-radius: var(--size-2);
    width: 12.5rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    font-size: 1rem;
    justify-content: center;
    cursor: pointer;
    transition: all ease-in-out var(--time-transition-fast);
}

div.container-radio-switch .radio-option:not(.active):hover {
    background-color: var(--color-hover-light);
    color: var(--color-on-surface);
}

div.container-radio-switch .radio-option:not(.active):active {
    background-color: var(--color-hover-medium);
}

div.container-radio-switch .radio-option.active {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
}

.container-switch-options {
    margin-top: 1.5625rem;
}

.container-switch-options .container-option {
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
}

.container-switch-options .container-option .container-info {
    display: flex;
    flex-direction: column;
}

.container-switch-options .container-option .container-info .title-container {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
}

/* Inputs Choice */
.choices {
    margin-bottom: 0;
    font-size: 1rem;
}

div.choices:not(.is-focused):hover {
    box-shadow: var(--shadow-hover);
}

.choices__list--multiple .choices__item {
    border-radius: 12px;
    padding-left: 12px;
    padding-right: 8px;
    font-size: 0.75rem;
    font-weight: normal;
    margin-right: 4px;
    margin-bottom: 4px;
    background-color: var(--color-primary);
    border: 0 none;
    color: var(--color-on-primary);
}

.choices__list--multiple .choices__item[data-deletable] {
    padding-right: 8px;
}

.choices__list--multiple .choices__item.is-highlighted {
    background-color: var(--color-primary-hover);
    border: 0 none;
}

.choices.is-disabled .choices__item {
    cursor: not-allowed;
    color: var(--color-text-disabled);
}

.choices:has(.choices__input.input-error) {
    border-color: var(--color-error);
    box-shadow: var(--shadow-error);
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
    max-height: 12.5rem;
}

.choices__list--single .choices__item {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Inputs Choice: Select One */
div.choices[data-type*=select-one] {
    border-radius: var(--size-13);
    transition: box-shadow var(--time-transition);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
}

div.choices[data-type*=select-one] div.choices__inner {
    height: 2.1875rem;
    min-height: 2.1875rem;
    padding: 0 !important;
    font-size: 1rem;
    border: 0 none;
    border-radius: var(--size-13);
    color: var(--color-on-surface);
    line-height: 1.2;
    width: 100%;
    margin: 0 !important;
    transition: border-color var(--time-transition);
}

div.choices[data-type*=select-one].is-open {
    border-color: var(--color-white);
}

div.choices[data-type*=select-one].is-open div.choices__inner {
    background-color: var(--color-surface);
    border: 1px solid var(--color-on-surface);
    border-radius: 12px 12px 0 0;
}

div.choices[data-type*=select-one].is-open.is-flipped div.choices__inner {
    border-radius: 0 0 12px 12px;
}

div.choices[data-type*=select-one] div.choices__inner div.choices__list--single {
    background-color: var(--color-surface);
    padding: 6px 20px;
    min-height: 2.1875rem;
    max-height: 2.1875rem;
    display: flex;
    align-items: center;
}

div.choices[data-type*=select-one].is-disabled div.choices__inner div.choices__list--single {
    background-color: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.choices[data-type*=select-one]::after {
    border-color: var(--color-on-surface) transparent transparent;
    right: 1rem;
}

.choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent var(--color-on-surface);
}

.choices[data-type*=select-one].is-disabled::after {
    border-color: var(--color-text-disabled) transparent transparent;
}

.choices[data-type*=select-one].is-open .choices__list--dropdown,
.choices[data-type*=select-one].is-open .choices__list[aria-expanded] {
    border-color: var(--color-on-surface);
    background-color: var(--color-surface);
}

.choices[data-type*=select-one] .choices__input {
    padding: 6px 20px;
    border-color: var(--color-border);
    background-color: var(--color-surface);
    font-size: 0.875rem;
    color: var(--color-on-surface);
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__item,
.choices[data-type*=select-one] .choices__list[aria-expanded] .choices__item {
    padding: 6px 15px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices[data-type*=select-one] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    color: var(--color-primary);
    background-color: var(--color-hover-light);
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__item--selectable.is-selected,
.choices[data-type*=select-one] .choices__list[aria-expanded] .choices__item--selectable.is-selected {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
    cursor: default;
}

/* Inputs Choice: Select Multiple y Text */
div.choices[data-type*=select-multiple],
div.choices[data-type*=text] {
    border-radius: var(--size-1);
    transition: all var(--time-transition);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

.choices[data-type*=select-multiple].is-focused:not(.is-open),
.choices[data-type*=text].is-focused:not(.is-open) {
    border-color: var(--color-on-surface);
}

div.choices[data-type*=select-multiple] div.choices__inner,
div.choices[data-type*=text] div.choices__inner {
    background-color: var(--color-surface);
    min-height: 4.375rem;
    padding: 6px 7px !important;
    font-size: 1rem;
    border: 0 none;
    border-radius: var(--size-1);
    color: var(--color-on-surface);
    line-height: 1.2;
    width: 100%;
    margin: 0 !important;
    transition: border-color var(--time-transition);
}

.choices[data-type*=select-multiple].is-open .choices__list--dropdown,
.choices[data-type*=select-multiple].is-open .choices__list[aria-expanded],
.choices[data-type*=text].is-open .choices__list--dropdown,
.choices[data-type*=text].is-open .choices__list[aria-expanded] {
    border-color: var(--color-on-surface);
    background-color: var(--color-surface);
}

div.choices[data-type*=select-multiple].is-open,
div.choices[data-type*=text].is-open {
    border-color: var(--color-white);
}

div.choices[data-type*=select-multiple].is-open div.choices__inner,
div.choices[data-type*=text].is-open div.choices__inner {
    background-color: var(--color-surface);
    border: 1px solid var(--color-on-surface);
    border-radius: 4px 4px 0 0;
}

div.choices[data-type*=select-multiple].is-open.is-flipped div.choices__inner,
div.choices[data-type*=text].is-open.is-flipped div.choices__inner {
    border-radius: 0 0 4px 4px;
}

.choices[data-type*=select-multiple] .choices__list--dropdown .choices__item,
.choices[data-type*=select-multiple] .choices__list[aria-expanded] .choices__item,
.choices[data-type*=text] .choices__list--dropdown .choices__item,
.choices[data-type*=text] .choices__list[aria-expanded] .choices__item {
    padding: 6px 15px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    font-style: italic;
}

.choices[data-type*=select-multiple] .choices__list--dropdown .choices__item *,
.choices[data-type*=select-multiple] .choices__list[aria-expanded] .choices__item *,
.choices[data-type*=text] .choices__list--dropdown .choices__item *,
.choices[data-type*=text] .choices__list[aria-expanded] .choices__item * {
    font-size: 0.875rem;
    color: var(--color-on-surface);
    font-style: italic;
}

.choices[data-type*=select-multiple] .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices[data-type*=select-multiple] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.choices[data-type*=text] .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices[data-type*=text] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    color: var(--color-primary);
    background-color: var(--color-hover-light);
}

div.choices[data-type*=select-multiple] div.choices__inner .choices__input,
div.choices[data-type*=text] div.choices__inner .choices__input {
    font-size: 0.875rem;
    color: var(--color-on-surface);
    padding: 4px 6px;
    background-color: var(--color-surface);
    margin: 0;
}

div.choices[data-type*=text] div.choices__inner .choices__input {
    padding: 4px 0 4px 2px;
}

.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
    padding-left: 20px;
    border-left: 1px solid var(--color-on-primary);
    opacity: 1;
}

/* Panel Validación Contraseña */
.passwordInfo {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--color-on-surface);
    background-color: var(--color-hover-medium);
    position: absolute;
    width: 250px;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    display: none;
    right: 10px;
    top: 50px;
    z-index: 2;
}

.passwordInfo span.spanTitlePasswordInfo {
    display: block;
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.passwordInfo ul.ulListValidationsPasswordInfo {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.passwordInfo ul.ulListValidationsPasswordInfo li {
    display: flex;
    align-items: center;
    margin-bottom: 0.625rem;
}

.passwordInfo ul.ulListValidationsPasswordInfo li i {
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.passwordInfo ul.ulListValidationsPasswordInfo li.invalid i::before {
    content: "\F623" !important;
    color: var(--color-error);
}

.passwordInfo ul.ulListValidationsPasswordInfo li.valid i::before {
    content: "\F26B" !important;
    color: var(--color-success);
}

.passwordInfo ul.ulListValidationsPasswordInfo li span.spanMsgItem {
    font-style: italic;
    font-size: 0.6875rem;
}

.passwordInfo::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 45%;
    width: 0;
    height: 0;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent var(--color-hover-medium);
}

/* ========================
   Estados del Input
   ======================== */

input.form-control:hover,
select.form-control:hover,
textarea.form-control:hover {
    box-shadow: var(--shadow-hover);
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    box-shadow: none;
    border-color: var(--color-on-surface);
    color: var(--color-on-surface);
}

input.form-control:-moz-focusring {
    color: var(--color-on-surface);
    text-shadow: none !important;
}

input.form-control:disabled,
input.form-control[readonly]:not(.form-date-input),
textarea.form-control:disabled,
textarea.form-control[readonly]:not(.form-date-input) {
    background-color: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

input.form-control:disabled:focus,
input.form-control[readonly]:not(.form-date-input):focus,
textarea.form-control:disabled:focus,
textarea.form-control[readonly]:not(.form-date-input):focus {
    border: 1px solid var(--color-bg-disabled);
}

textarea.form-control.input-error,
input.form-control.input-error {
    border-color: var(--color-error);
    box-shadow: var(--shadow-error);
}

textarea.form-control.input-success,
input.form-control.input-success {
    border-color: var(--color-success);
    box-shadow: var(--shadow-success);
}

/* ========================
   Responsive Design (Media Queries)
   ======================== */

/* De 577px a 1199px */
@media (min-width: 577px) and (max-width: 1199px) {
    div.datepicker div.datepicker-days {
        font-size: 12px;
    }
}

/* De 991px para abajo */
@media (max-width: 991px) {

    .custom-switch,
    .custom-switch .form-check-input {
        height: 24px;
    }

    .custom-switch .form-check-input::before {
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 3px;
    }

    .custom-switch .form-check-input:checked::before {
        transform: translateX(24px);
    }
}

/* De 576px para abajo */
@media (max-width: 576px) {
    div.datepicker div.datepicker-days {
        font-size: 11px;
    }
}

/* De 450px para abajo */
@media (max-width: 450px) {
    .container-inline-inputs {
        flex-direction: column;
    }
}