input[type="password"]::-webkit-textfield-decoration-container {
    display: none;
}

input[type="password"]::-ms-reveal {
    display: none;
}

/* estilos input text */
comp-input {
    display: grid;
    width: 100%;
    height: max-content;
}

comp-input .header-input {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 0px var(--spacing-space-2, 4px);
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
}

comp-input .header-input,
comp-input .header-input .ctn-label,
comp-text-area .ctn-label {
    gap: var(--spacing-space-2);
}

comp-input .header-input .ctn-label,
comp-text-area .ctn-label {
    display: flex;
    align-items: center;
}

comp-input label {
    font: var(--font-caption-medium-strong);
    letter-spacing: var(--letter-spacing-1);
    margin: 0;
}

comp-input .ctn-input {
    position: relative;
    width: 100%;
    margin: var(--spacing-space-2) 0 var(--spacing-space-1) 0;
}

comp-input input {
    display: flex;
    height: var(--spacing-space-9, 40px);
    width: 100%;
    padding: var(--spacing-space-3) var(--spacing-space-9) var(--spacing-space-3) var(--spacing-space-4);
    align-items: center;
    gap: var(--spacing-space-3, 8px);
    border-radius: var(--spacing-space-3, 8px);
    border: 1px solid var(--color-neutral-400, #8CA2B5);
    font: var(--font-body);
    box-sizing: border-box;
    outline: none;
    background-color: transparent;
    overflow: hidden;
    color: var(--color-neutral-700, #314254);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

comp-input .ctn-helper-text{
    padding-left: var(--spacing-space-2, 4px);
}

comp-input .ctn-helper-text .helper-text,
comp-input .ctn-helper-text label{
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium);
    padding: 0;
    letter-spacing: var(--letter-spacing-1);
    display: inline;
    margin: 0;
    width: 100%;
}

comp-input .ctn-helper-text .helper-text.error,
comp-input .ctn-helper-text label.error{
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

comp-input .ctn-helper-text .helper-text.error i,
comp-input .ctn-helper-text label.error i{
    display: flex;
    align-items: center;
    color: var(--color-danger-600);
    padding-top: 2px;
    width: 16px;
}

comp-input .ctn-helper-text .helper-text.error i::before,
comp-input .ctn-helper-text label.error i::before{
    font-size: 16px;
}

comp-input .ctn-helper-text .helper-text.hide {
    display: none;
}

comp-input .ctn-helper-text:has(.date-info:not(.hide)) .helper-text.error:not(.date-info) {
    display: none;
}

comp-input[security] .ctn-helper-text .helper-text,
comp-input[security] .ctn-helper-text label{
    max-height: 100px;
    opacity: 1;
    transition: max-height 0.3s ease-in;
}

comp-input[security] .ctn-helper-text .helper-text.hide {
    display: block;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.2s ease-out, opacity 0.3s ease-out;
}

comp-input:has(input.error) .helper-text:not(.error),
comp-input:has(.date-info:not(.hide)) .helper-text:not(.error),
comp-input:has(input:disabled) .helper-text.error,
comp-input:has(input:read-only) .helper-text.error{
    display: none;
}

comp-input input::placeholder {
    font: var(--font-body);
    color: var(--color-neutral-400);
    transition: color .1s ease-in-out;
}

comp-input:not(.active) input:not(:disabled):not(.error):hover {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: -2px;
}

comp-input input:not(:focus):hover::placeholder {
    color: var(--color-neutral-500, #566A80);
}

comp-input[type~="date"] input:hover::placeholder,
comp-input[type~="dateText"] input:hover::placeholder {
    color: var(--color-neutral-400);
}

comp-input.active label,
comp-text-area.active label {
    color: var(--color-primary-600, #0E55B9);
}

comp-input .icons-input {
    position: absolute;
    width: fit-content;
    display: flex;
    gap: var(--spacing-space-3);
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    color: var(--color-neutral-500);
    pointer-events: none;
}

comp-input .icons-input i::before {
    font-size: 20px;
}

comp-input .icons-input:has(.password-icon-button) {
    right: 8px;
}

comp-input .password-icon-button {
    pointer-events: all;
}

.ctn-security {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-space-3);
    color: var(--color-neutral-500);
    width: 100%;
    margin-top: var(--spacing-space-1);
    

    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: max-height 0.2s ease-out, opacity 0.3s ease-out;
}

.ctn-security.show{
    max-height: 300px; 
    opacity: 1; 
    transition: max-height 0.3s ease-in;
}

.ctn-security ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctn-security .caption-type-sec{
    color: var(--color-neutral-500);
    text-align: right;
    font: var(--font-caption-small);
    letter-spacing: var(--letter-spacing-1);
}

.ctn-security .header-security {
    padding: 0 var(--spacing-space-2);
    display: grid;
    align-items: center;
    grid-template-columns: 1fr minmax(60px, auto);
    gap: var(--spacing-space-4);
}

.header-security ul {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-space-3);
}

.header-security ul li {
    border-radius: var(--border-radius-corner-s, 4px);
    background: var(--color-neutral-200, #D5DFEC);
    height: var(--spacing-space-2);
}

.header-security ul li.weak {
    background: var(--color-danger-600, #D82525);
}

.header-security ul li.medium {
    background: var(--color-warning-600, #F4A504);
}

.header-security ul li.strong {
    background: var(--color-success-600, #20B351);
}

.header-security ul li.very-strong {
    background: var(--color-primary-600, #0E55B9);
}

.content-security .checkitems-password {
    margin-top: var(--spacing-space-4);
}

.content-security .checkitems-password li {
    display: flex;
    align-items: center;
    gap: var(--spacing-space-2);
    margin-bottom: var(--spacing-space-2);
}

.content-security .checkitems-password i::before {
    color: var(--color-neutral-500);
    font-size: 16px;
}

.content-security .checkitems-password i.icon-checked,
.content-security .checkitems-password li.check i.icon-no-checked {
    display: none;
}

.content-security .checkitems-password li.check i.icon-checked {
    display: block;
}

.content-security .checkitems-password i.icon-checked::before {
    color: var(--color-success-600);
}

.content-security .checkitems-password i.icon-error-security {
    display: none;
    width: 16px;
    height: 16px;
}

.content-security .checkitems-password i.icon-error-security::before {
    color: var(--color-danger-600);
}

comp-input:has(input.error) .checkitems-password li:not(.check) .icon-error-security {
    display: inline-block;
}

comp-input:has(input.error) .checkitems-password li:not(.check) .icon-no-checked::before {
    color: var(--color-danger-600);
}

comp-input input.error {
    padding-right: var(--spacing-space-11);
    outline: 2px solid var(--color-danger-600, #D82525);
    outline-offset: -2px;
}

comp-input input:active,
comp-input input:focus,
comp-input input:focus-visible {
    outline: 2px solid var(--color-primary-600, #0E55B9);
    outline-offset: -2px;
}

comp-input input.error~i {
    display: inline-block !important;
}

comp-input input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
}

comp-input input.error~label {
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-400);
    margin-top: 2px;
}

comp-input input:disabled::placeholder {
    color: var(--color-neutral-400);
}

comp-input.disabled input,
comp-input.disabled input.error {
    cursor: not-allowed !important;
    border: none;
    color: var(--color-neutral-400);
    border-radius: var(--spacing-space-3, 8px);
    border: 1px solid var(--color-neutral-300, #B7C9DF);
    background: var(--color-neutral-100, #F3F4F7);
    outline: none;
    outline-offset: 0;
}

comp-input.disabled .icons-input{
    color: var(--color-neutral-400);
}

comp-input input[readonly]{
    border: none;
    border-bottom: 1px solid var(--color-neutral-300, #B7C9DF);
    border-radius: 0;
}


/* Estilos Text Area  */

comp-text-area {
    display: flex;
    flex-direction: column;
    width: 100%;
}

comp-text-area .ctn-label {
    padding: 0 var(--spacing-space-2, 4px);
}

comp-text-area .ctn-label .optional {
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
}

comp-text-area label {
    font: var(--font-caption-medium-strong);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-500, #566A80);
}

comp-text-area .suggestion {
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-500, #566A80);
    padding: 0 var(--spacing-space-2, 4px);
    margin: var(--spacing-space-2, 4px) 0;
}

comp-text-area textarea {
    position: relative;
    padding: var(--spacing-space-3, 8px) var(--spacing-space-4, 12px);
    border-radius: var(--spacing-space-3, 8px);
    outline: 1px solid var(--color-neutral-400, #8CA2B5);
    border: none;
    overflow: hidden auto;
    color: var(--color-neutral-700, #314254);
    box-sizing: border-box;
    resize: none;
    height: 100%;
    width: 100%;
    background-color: transparent;
    font: var(--font-body);
    min-height: 7rem;
    outline-offset: -1px;
}

comp-text-area.resize-vertical textarea {
    resize: vertical;
}

comp-text-area textarea::placeholder {
    font: var(--font-body);
    color: var(--color-neutral-400, #8CA2B5);
}

comp-text-area textarea:hover {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: -2px;
}

comp-text-area textarea:hover::placeholder {
    color: var(--color-neutral-500, #566A80);
}

comp-text-area textarea .icon-error {
    display: none;
}

comp-text-area textarea.error {
    padding-right: var(--spacing-space-9);
    outline: var(--spacing-space-1, 2px) solid var(--color-danger-600, #D82525);
    outline-offset: -2px;
}

comp-text-area textarea:focus-visible {
    outline: 2px solid var(--color-primary-600, #0E55B9);
    outline-offset: -2px;
}

comp-text-area textarea.error~.icon-error {
    display: flex;
    color: var(--color-danger-600, #D82525);
    font-size: 20px;
}

comp-text-area .ctn-text-area {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    margin-bottom: var(--spacing-space-1, 2px);
}

comp-text-area i {
    display: none;
    position: absolute;
    top: var(--spacing-space-3);
    right: var(--spacing-space-4);
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

comp-text-area .div-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-space-3, 8px);
    padding: 0 var(--spacing-space-2, 4px);
}

comp-text-area .div-footer.hide {
    display: none;
}

comp-text-area:has(textarea.error) .div-footer,
comp-text-area:has(textarea:disabled) .div-footer,
comp-text-area[readonly] .div-footer{
    display: grid;
}

comp-text-area .ctn-helper-text .helper-text,
comp-text-area .ctn-helper-text label{
    color: var(--color-neutral-500);
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    margin: 0;
    padding: 0;
    display: inline;
}

comp-text-area .ctn-helper-text .helper-text.error{
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

comp-text-area .ctn-helper-text .helper-text.error i{
    position: static;
    display: flex;
    align-items: center;
    color: var(--color-danger-600);
    padding-top: 2px;
    width: 16px;
    height: unset;
}

comp-text-area .ctn-helper-text .helper-text.error i::before{
    font-size: 16px;
}

comp-text-area:has(textarea.error) .helper-text:not(.error){
    display: none;
}

comp-text-area .counter {
    display: flex;
    align-items: center;
    font: var(--font-caption-small);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-600, #425567);
}

comp-text-area textarea::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

comp-text-area.disabled .counter {
    color: var(--color-neutral-400, #8CA2B5);
}

comp-text-area.disabled textarea {
    cursor: not-allowed !important;
    color: var(--color-neutral-500);
    border: 1px solid var(--color-neutral-300, #B7C9DF);
    background: var(--color-gray-100, #F3F4F7);
    resize: none;
    outline: none;
}

comp-text-area.disabled textarea::placeholder {
    color: transparent;
}

comp-text-area.disabled textarea:hover::placeholder {
    color: transparent;
}

comp-text-area.disabled textarea:hover::placeholder {
    color: var(--color-neutral-400, #8CA2B5);
}

comp-text-area textarea::-webkit-scrollbar-corner {
    display: none;
}

comp-text-area textarea::-webkit-scrollbar-track {
    margin: var(--spacing-space-2) 0;
}

comp-text-area textarea::-webkit-resizer {
    appearance: none;
}

comp-text-area.resize-vertical .ctn-text-area::before {
    content: "\ed3a";
    font-family: "Phosphor" !important;
    font-size: 12px;
    position: absolute;
    right: 2px;
    bottom: 2px;
    color: var(--color-neutral-700);
    pointer-events: none;
    z-index: 2;
    height: 12px;
    width: 12px;
}

comp-text-area.resize-vertical textarea::-webkit-scrollbar-track {
    margin: var(--spacing-space-2) 0 var(--spacing-space-4) 0;
}

comp-text-area[readonly] textarea{
    border: 0;
    outline: none;
    border-bottom: 1px solid var(--color-neutral-300, #B7C9DF);
    border-radius: 0;
}

comp-text-area[readonly] textarea:hover{
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: -2px;
}

comp-text-area[readonly] textarea:focus-visible {
    outline: 2px solid var(--color-primary-600, #0E55B9);
    outline-offset: -2px;
}

/* Estilos select 2 */

.ctn-comp-select2 {
    width: 100%;
}

.ctn-comp-select2 .select2-container {
    border-radius: var(--spacing-space-3, 8px);
}

.ctn-label-select {
    display: flex;
    gap: var(--spacing-space-2, 4px);
    margin-bottom: var(--spacing-space-2, 4px);
    padding-left: 4px;
}

.ctn-label-select .comp-select2-label {
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium-strong);
    letter-spacing: var(--letter-spacing-1);
    margin-bottom: unset;
}

.ctn-label-select .optional {
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
}

.ctn-comp-select2:has(select:disabled) .comp-select2-label,
.ctn-comp-select2:has(select:disabled) .optional,
.ctn-comp-select2:has(select:disabled) .result-text {
    color: var(--color-neutral-500);
}

.ctn-comp-select2:has(select:disabled) .comp-select2-label {
    pointer-events: none;
}

.ctn-comp-select2 .helper-text {
    display: none;
    padding-left: var(--spacing-space-2, 4px);
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    margin-top: 2px;
}

.ctn-comp-select2:has(select.error) .helper-text,
.ctn-comp-select2:has(select:disabled) .helper-text{
    display: flex;
}

.ctn-comp-select2:has(select.error) .helper-text:not(.error){
    display: none !important;
}

.ctn-comp-select2 span.error,
.ctn-comp-select2 label.error {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    margin-top: 2px;
    padding-left: 4px;
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-500);
    width: 100%;
}

.ctn-comp-select2 span.error i,
.ctn-comp-select2 label.error i{
    display: flex;
    align-items: center;
    color: var(--color-danger-600);
    padding-top: 2px;
    width: 16px;
}

.ctn-comp-select2 span.error i::before,
.ctn-comp-select2 label.error i::before{
    font-size: 16px;
}

.ctn-comp-select2 .ctn-input-select {
    position: relative;
}

.ctn-comp-select2 .ctn-input-select.skeleton {
    height: 40px;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    height: var(--spacing-space-9, 40px);
    min-height: var(--spacing-space-9, 40px);
    background: transparent;
    border-radius: var(--spacing-space-3, 8px);
    border: 1px solid var(--color-neutral-400, #8CA2B5);
    box-sizing: border-box;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 0;
    color: var(--color-neutral-300);
    height: 100%;
    box-sizing: border-box;
    font: var(--font-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: var(--spacing-space-3, 8px) var(--spacing-space-9, 40px) var(--spacing-space-3, 8px) var(--spacing-space-4, 12px);
    min-height: 40px;
    max-height: 40px;
    white-space: revert;
}

.select2-container .select2-search--inline .select2-search__field {
    margin: 0;
}

.select2-container:not(.select2-container--open):hover .select2-selection--single,
.select2-container:not(.select2-container--open):hover .select2-selection--multiple{
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: -2px;
}

.select2-container.select2-container--open input.select2-search__field{
    cursor: text;
    pointer-events: all;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.select2-selection__arrow,
.select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single:before,
.select2-container--default .select2-selection--multiple:before {
    content: "\e136";
    font-family: "Phosphor" !important;
    font-size: 20px;
    color: var(--color-neutral-600);
    position: absolute;
    top: 50%;
    right: var(--spacing-space-4);
    transform: translateY(-50%);
    cursor: pointer;
}

.select2-container--open .select2-selection--single:before,
.select2-container--open .select2-selection--multiple:before {
    content: "\e13c";
}

.select2-dropdown {
    padding: 0;
    border-radius: var(--border-radius-corner-s, 4px) !important;
    background: var(--color-neutral-0, #FFF);
    box-shadow: var(--boxshadow-3);
    border: none;
    outline: none;
}

.select2-results__options {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    box-sizing: border-box;
}

.select2-results__options::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0.25rem;
}

.select2-results__options::-webkit-scrollbar-button {
    background-color: transparent;
    height: 0;
    width: 0.25rem;
}

.select2-results__options::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: var(--border-radius-corner-md, 8px);
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: var(--color-neutral-300, #B7C9DF);
    border-radius: var(--border-radius-corner-md, 8px);
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-400, #8CA2B5);
}

.select2-results__options::-webkit-scrollbar-thumb:active {
    background: var(--color-neutral-400, #8CA2B5);
}

.select2-results__options::-webkit-scrollbar-track {
    background: var(--color-neutral-100, #F3F4F7);
}

.select2-results__options::-webkit-scrollbar-track:active {
    border: 0.5px solid var(--color-neutral-200, #D5DFEC);
    background: var(--color-neutral-100, #F3F4F7);
}

.select2-container--default .select2-results>.select2-results__options {
    display: grid;
    max-height: 304px;
    padding: 0 4px;
    margin: 4px 4px 4px 0;
}

.select2-container--default .select2-results>.select2-results__options:has(.option-double-line) {
    max-height: 406px;
}

.select2-results__option {
    position: relative;
    padding: 0 var(--spacing-space-3) 0 var(--spacing-space-4);
    height: 36px;
    border-radius: var(--spacing-space-3, 8px);
    color: var(--color-neutral-500);
    font: var(--font-body);
    line-height: 36px; 
    box-sizing: border-box;
    margin: 0;
    max-height: 48px;
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.select2-results__option:has(.option-double-line){
    height: 48px;
}

.select2-results__option:active {
    background: var(--color-neutral-200, #D5DFEC);
}

.select2-container--default .select2-dropdown:not(.select2-autocomplete-dropdown.single) .select2-results__option[aria-selected=true] {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-200);
    padding-right: 30px;
    justify-content: space-between;
    display: list-item;
}

.select2-container--default .select2-results__option .option-double-line {
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-height: 48px;
    justify-content: center;
}

.select2-container--default .select2-results__option .option-double-line *{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select2-container--default .select2-results__option .option-double-line .line {
    display: none;
}

.select2-container--default .select2-dropdown:not(.select2-autocomplete-dropdown.single) .select2-results__option[aria-selected=true]::after {
    position: absolute;
    right: var(--spacing-space-3);
    top: 50%;
    transform: translateY(-50%);
    content: "\e184";
    font-size: 20px;
    font-family: "Phosphor" !important;
    color: var(--color-primary-600, #0E55B9);
}

.select2-container--default .select2-dropdown.select2-autocomplete-dropdown.single .select2-results__option[aria-selected=true]{
    background-color: var(--color-neutral-0);
}

.select2-container--default .select2-results__option[aria-selected=false]:hover,
.select2-container--default .select2-results__option[aria-selected=false]:active {
    outline: none;
    border: none;
}

.select2-container--default .select2-results__option[aria-selected=false]:hover,
.select2-container--default .select2-autocomplete-dropdown.single .select2-results__option[aria-selected=true]:hover {
    background: var(--color-neutral-100, #F3F4F7) !important;
    color: var(--color-neutral-600, #425567) !important;
    border: 1px solid var(--color-neutral-200, #D5DFEC);
}

.select2-container--default .select2-results__option[aria-selected=false]:active {
    background: var(--color-neutral-200, #D5DFEC) !important;
    color: var(--color-neutral-600, #425567) !important;
}

.select2-container--default .select2-dropdown:not(.select2-autocomplete-dropdown.single) .select2-results__option[aria-selected=true]:hover {
    outline: 1px solid var(--color-primary-300, #B2DFFE);
    outline-offset: -1px;
    background: var(--color-primary-200, #D8F0FE);
}

.select2-container--default .select2-dropdown:not(.select2-autocomplete-dropdown.single) .select2-results__option[aria-selected=true]:active {
    background: var(--color-primary-300, #B2DFFE);
}


.select2-results__option:hover.select2-results__message,
.select2-results__option:active.select2-results__message,
.select2-results__option.select2-results__message {
    pointer-events: none;
}

.select2-results__option .letters-option-highlighted{
    font: var(--font-body-strong);
}

.select2-results__option[aria-selected=false] .letters-option-highlighted{
    color: var(--color-neutral-600);
}

.select2-container--default .select2-search--inline .select2-search__field {
    font: var(--font-body);
    color: var(--color-neutral-700, #314254);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--color-neutral-400, #8CA2B5);
    font: var(--font-body);
}

.select2-container--default .select2-search--inline .select2-search__field:disabled::placeholder {
   opacity: 0;
}

.select2-container--default.select2-container--open.select2-container--below .select2-dropdown--below {
    top: auto !important;
    bottom: 100% !important;
    transform: translateY(-100%);
}

.select2-selection {
    background-color: transparent !important;
}

.select2-selection__rendered {
    display: none;
}

.select2-search__field {
    pointer-events: none;
}

.select2-selection__rendered .result-text {
    color: var(--color-neutral-700, #314254);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

.select2-selection__rendered .result-text .option-double-line>* {
    font: var(--font-body) !important;
}

.select2-selection__rendered .select2-search.select2-search--inline .select2-search__field {
    padding: 0;
}

.select2-container.select2-container--disabled .select2-selection--single,
.select2-container.select2-container--disabled .select2-selection--multiple,
.select2-container--default.select2-container--focus.select2-container--disabled .select2-selection--multiple {
    border: 1px solid var(--color-neutral-300, #B7C9DF);
    cursor: default;
    pointer-events: none;
}

.select2-container--disabled {
    background: var(--color-neutral-100, #F3F4F7);
    cursor: not-allowed !important;
    pointer-events: revert;
}

.select2-container--disabled:hover {
    background: var(--color-neutral-100, #F3F4F7);
}

.select2-container--disabled:hover .select2-selection{
    border: 1px solid var(--color-neutral-300, #B7C9DF);
    outline: none !important;
}

.select2-container--disabled .selection .select2-selection--single .select2-selection__rendered {
    color: var(--color-neutral-500);
}

.select2-container--disabled .selection .select2-selection--multiple .select2-selection__rendered {
    color: var(--color-neutral-500);
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    display: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: none;
}

.select2-results__options::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.ctn-comp-select2:has(.select2-search__field:focus) .comp-select2-label,
.ctn-comp-select2.focus .comp-select2-label {
    color: var(--color-primary-600, #0E55B9);
}

.ctn-comp-select2:has(.select2-search__field:focus):has(.select2-autocomplete) .helper-text,
.ctn-comp-select2:has(.select2-search__field:focus):has(.select2-autocomplete-multiple) .helper-text,
.ctn-comp-select2.focus:has(.select2-autocomplete) .helper-text,
.ctn-comp-select2.focus:has(.select2-autocomplete-multiple) .helper-text{
    display: flex;
}

.ctn-comp-select2:has(.select2-search__field:focus):has(.select2-autocomplete):has(.helper-text.error) .helper-text:not(.error),
.ctn-comp-select2:has(.select2-search__field:focus):has(.select2-autocomplete-multiple):has(.helper-text.error) .helper-text:not(.error),
.ctn-comp-select2.focus:has(.select2-autocomplete):has(.helper-text.error) .helper-text:not(.error),
.ctn-comp-select2.focus:has(.select2-autocomplete-multiple):has(.helper-text.error) .helper-text:not(.error){
    display: flex;
}

.ctn-comp-select2 select.error~.select2-container .select2-selection--single,
.ctn-comp-select2 select.error~.select2-container .select2-selection--multiple {
    outline: 2px solid var(--color-danger-600, #D82525);
    outline-offset: -2px;
    border-radius: var(--spacing-space-3, 8px) !important;
}

.ctn-comp-select2.focus .select2.select2-container .select2-selection--single,
.ctn-comp-select2.focus .select2.select2-container .select2-selection--multiple,
.ctn-comp-select2.focus .select2-container--default.select2-container--focus .select2-selection--multiple,
.ctn-comp-select2:has(.select2-search__field:focus) .select2-container--default.select2-container--focus .select2-selection--multiple{
    outline: 2px solid var(--color-primary-600, #0E55B9);
    outline-offset: -2px;
    border-radius: var(--spacing-space-3, 8px) !important;
}

select.error~.select2-container .select2-selection__rendered {
    padding-right: var(--spacing-space-11);
}

.ctn-comp-select2 .select2-container .select2-search,
.ctn-comp-select2 .select2-container .select2-search input {
    width: 100% !important;
}

.ctn-comp-select2 .select2-container .select2-search.hidden_search {
    color: transparent !important;
    background: transparent !important;
    pointer-events: none !important;
    width: 0 !important;
}

.ctn-input-select.select2-autocomplete .select2-search__field,
.ctn-input-select.select2-autocomplete-multiple .select2-search__field {
    pointer-events: all;
}

.ctn-input-select.select2-autocomplete .select2-selection__rendered,
.ctn-input-select.select2-autocomplete-multiple .select2-selection__rendered {
    cursor: text;
}

.select2-container--default .select2-results__option.focused {
    outline: 2px solid var(--color-neutral-400) !important;
    outline-offset: -2px !important;
    z-index: 1 !important;
}

.select2-results__option.loading-results,
.select2-results__option.select2-results__option--load-more{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-neutral-500) !important;
    font: var(--font-body) !important;
    background: var(--color-neutral-0) !important;
    cursor: default !important;
}

.select2-container--default .select2-results__option[aria-disabled=true]{
    background: var(--color-neutral-100);
    color: var(--color-neutral-400);
    cursor: not-allowed;
}

@media (max-width: 1279px) {

    .select2-container--default .select2-results>.select2-results__options {
        display: grid;
        max-height: 236px;
        margin: 0;
        padding: 4px;
    }

    .select2-container--default .select2-results>.select2-results__options:has(.option-double-line) {
        max-height: 308px;
    }
}

/* Uploader */
comp-input-file {
    width: 100%;
    display: flex;
    flex-direction: column;
}

comp-input-file .ctn-files:not(:empty) {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-space-3, 8px);
    border-radius: var(--border-radius-corner-md);
    border: 1px solid var(--color-neutral-200, #D5DFEC);
    overflow: hidden;
}

comp-input-file[hide_ctn_input="true"] .ctn-files:not(:empty) {
    margin-top: 0px;
}

comp-input-file .ctn-helper-text {
    display: flex;
    gap: var(--spacing-space-2);
    align-items: start;
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-600);
}

comp-input-file .ctn-helper-text:not(:empty) {
    margin-top: var(--spacing-space-2);
}

comp-input-file .ctn-helper-text i {
    color: var(--color-danger-600);
    font-size: 16px;
    margin-top: var(--spacing-space-1);
}

comp-input-file .ctn-helper-text label {
    color: var(--color-neutral-600, #425567);
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    margin-top: 0px!important;
    padding-left: 0px!important;
    display: flex;
    align-items: center;
    gap: 4px;
}
comp-input-file input.error ~ .ctn-input-file{
    border-radius: var(--border-radius-corner-md, 8px);
    border: 1px dashed var(--color-danger-600, #D82525);
    background: var(--color-danger-100, #FFF1F0);
}

comp-input-file .ctn-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-space-2);
    padding-left: var(--spacing-space-2);
    margin-bottom: var(--spacing-space-2);
}

comp-input-file .suggestion-text {
    padding-left: var(--spacing-space-2);
}

comp-input-file .label {
    font: var(--font-caption-medium-strong);
    letter-spacing: var(--letter-spacing-1);
}

comp-input-file .optional,
comp-input-file .suggestion-text {
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
}

comp-input-file .label,
comp-input-file .optional,
comp-input-file .suggestion-text {
    color: var(--color-neutral-500, #566A80);
}

comp-input-file .ctn-input-file {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-space-7, 24px);
    gap: var(--spacing-space-3, 8px);
    border-radius: var(--border-radius-corner-md, 8px);
    border: 1px dashed var(--color-neutral-400, #8CA2B5);
    background: var(--color-neutral-100, #F3F4F7);
    cursor: pointer;
    width: 100%;
    height: 94px;
}

comp-input-file .ctn-input-file.droping {
    border: 1px dashed var(--color-primary-600, #0E55B9);
    background: var(--color-primary-200, #D8F0FE);
}

comp-input-file .ctn-input-file:hover {
    background: var(--color-neutral-200, #D5DFEC);
}

comp-input-file .ctn-input-file:active {
    border: 1px dashed var(--color-neutral-600, #425567);
    background: var(--color-neutral-200, #D5DFEC);
}

comp-input-file .ctn-input-file:focus-visible {
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400, #8CA2B5);
    outline: none;
}

comp-input-file .ctn-input-file i {
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-corner-xxl, 24px);
    padding: var(--spacing-space-2, 4px);
    max-width: 24px;
    max-height: 24px;
}

comp-input-file[multiple] .ctn-input-file i,
comp-input-file[max_size] .ctn-input-file i {
    align-self: flex-start;
}

comp-input-file .ctn-input-file i:before,
comp-input-file .ctn-input-file .title-uploader{
    color: var(--color-neutral-500, #566A80);
}
comp-input-file .ctn-input-file .subtitle-uploader{
    color: var(--color-neutral-600);
}

comp-input-file .ctn-input-file:hover i:before,
comp-input-file .ctn-input-file:hover .title-uploader,
comp-input-file .ctn-input-file:hover .subtitle-uploader {
    color: var(--color-neutral-600, #425567);
}

comp-input-file .ctn-input-file:active i:before,
comp-input-file .ctn-input-file:active .title-uploader,
comp-input-file .ctn-input-file:active .subtitle-uploader {
    color: var(--color-neutral-800, #263645);
}

comp-input-file .ctn-input-file i:before {
    font-size: 22px;
}

comp-input-file .ctn-input-file .title-uploader {
    font: var(--font-body-strong);
    text-decoration: underline;
    margin: 0 0 var(--spacing-space-1) 0;
}

comp-input-file .ctn-input-file.droping .title-uploader {
    color: var(--color-primary-600, #0E55B9);
}

comp-input-file .ctn-input-file .subtitle-uploader {
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    margin: 0;
}

comp-input-file .ctn-input-file.droping i,
comp-input-file .ctn-input-file.droping .subtitle-uploader {
    display: none !important;
}

comp-input-file .ctn-input-file .title-uploader,
comp-input-file .ctn-input-file .subtitle-uploader {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

comp-input-file[disabled] .ctn-input-file {
    border: 1px dashed var(--color-neutral-300, #B7C9DF);
    background: var(--color-neutral-100, #F3F4F7);
    cursor: not-allowed !important;
}

comp-input-file[disabled] .suggestion-text,
comp-input-file[disabled] .ctn-input-file i::before,
comp-input-file[disabled] .ctn-input-file .title-uploader,
comp-input-file[disabled] .ctn-input-file .subtitle-uploader,
comp-input-file[disabled] .ctn-label .label,
comp-input-file[disabled] .ctn-label .optional,
comp-input-file[disabled] .ctn-input-file-button .subtitle-uploader{
    color: var(--color-neutral-400, #8CA2B5);
}

comp-input-file[disabled] .ctn-input-file:focus-visible {
    box-shadow: none;
}

comp-input-file .ctn-input-file.dragover {
    border: var(--spacing1, 2px) dashed var(--color-neutral-400);
    background: var(--color-neutral-100);
}

comp-input-file .ctn-input-file i,
comp-input-file .ctn-input-file .ctn-file-info {
    pointer-events: none;
}

comp-input-file .non-events-input-file,
comp-input-file .non-events-input-file >*,
comp-input-file .non-events-input-file button{
    pointer-events: none !important;
}

.ctn-file-info-button{
    display: flex;
    gap: 8px;

}

@media (max-width:1280px){

    .ctn-file-info-button comp-button:not(.ctn-go-camera){
        flex: 1;
    }
}

@media (max-width: 1279px) {

    comp-input-file .ctn-input-file:hover {
        background: var(--color-neutral-100, #F3F4F7);
    }

    comp-input-file .ctn-input-file:hover i:before,
    comp-input-file .ctn-input-file:hover .title-uploader,
    comp-input-file .ctn-input-file:hover .subtitle-uploader {
        color: var(--color-neutral-500, #566A80);
    }

}


@media (max-width: 640px) {
    comp-input-file .ctn-input-file {
        padding: var(--spacing-space-6, 20px);
    }
}

@media (max-width: 360px) {
    comp-input-file .ctn-input-file {
        padding: var(--spacing5, 16px) var(--spacing7, 24px);
        height: 60px;
        min-width: unset;
    }
}

/* File Box */
comp-file-box {
    width: 100%;
}

comp-file-box[download] {
    cursor: pointer;
}

comp-file-box .ctn-file-box , comp-file-box .ctn-file-box-dinamic {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas: 'icon info action';
    align-items: center;
    width: 100%;
    height: 64px;
    padding: var(--spacing-space-4, 12px);
    border-radius: var(--border-radius-corner-md, 8px);
    gap: var(--spacing-space-3, 8px);
}
comp-file-box .ctn-file-box .ctn-loader,
comp-file-box .ctn-file-box .ctn-icon 
comp-file-box .ctn-file-box-dinamic .ctn-loader,
comp-file-box .ctn-file-box-dinamic .ctn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-space-4, 12px);
    grid-area: icon;
    min-width: 40px;
    min-height: 40px;
    height: auto;
    width: auto;
    opacity: 1;
    transition: unset;
    max-width: 40px;
    max-height: 40px;
}

comp-file-box .ctn-file-box .ctn-icon 
comp-file-box .ctn-file-box-dinamic .ctn-icon {
    border-radius: var(--border-radius-corner-md, 8px);
    border: 1px solid var(--color-neutral-200, #D5DFEC);
    background: var(--color-neutral-100, #F3F4F7);
    width: auto;
    height: auto;
    opacity: 1;
    pointer-events: unset;
    transition: unset;
}

/*Dinamic buttton comp-box states*/
.ctn-file-box-dinamic{
    outline: none;
    background: var(--color-neutral-0, #FFF);
    border: none;
    cursor: pointer;
}
.suggestion-text{
    margin-bottom: 4px;
}
comp-file-box[type='dynamic'][active] .ctn-file-box-dinamic{
    box-shadow: 0px 0px 0px 2px var(--color-primary-600, #0E55B9);
}
comp-file-box[type='dynamic']:not([active]) .ctn-file-box-dinamic{
    border-radius: var(--border-radius-corner-md, 8px);
    box-shadow: 0px 0px 0px 1px var(--color-neutral-200, #8CA2B5);
}
comp-file-box[type='dynamic']:not([active]) .ctn-file-box-dinamic:hover{
    box-shadow: 0px 0px 0px 1px var(--color-neutral-300, #8CA2B5);
    background: var(--color-neutral-100, #F3F4F7);
}
comp-file-box[type='dynamic']:not([active]) .ctn-file-box-dinamic:active{
    box-shadow: 0px 0px 0px 2px var(--color-gray-400, #8CA2B5);
    background: var(--color-neutral-100, #F3F4F7);
}
comp-file-box[type='dynamic']:not([active]) .ctn-file-box-dinamic:not(:active):focus{
    background: var(--color-neutral-0, #FFF);
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400, #8CA2B5);
}
comp-file-box[type='dynamic']:not([active]) .ctn-file-box-dinamic.selected{
    background: var(--color-neutral-0, #FFF)!important;
    box-shadow: 0px 0px 0px 2px var(--color-primary-600, #8CA2B5)!important;
}

comp-file-box .ctn-file-box .ctn-image-box,
comp-file-box .ctn-file-box-dinamic .ctn-image-box{
    padding: 0px;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
comp-file-box .ctn-file-box .ctn-image-box img,
comp-file-box .ctn-file-box-dinamic .ctn-image-box img{
   object-fit: cover;
   width: 100%;
   height: 100%;
}

comp-file-box .ctn-file-box .ctn-loader comp-progress,
comp-file-box .ctn-file-box-dinamic .ctn-loader comp-progress {
    width: auto;
    height: auto;
    max-height: 20px;
}

comp-file-box .helper-text {
    padding-left: var(--spacing-space-2);
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
}

comp-file-box:not([loading]) .ctn-icon {
    border-radius: var(--border-radius-corner-md, 8px);
    border: 1px solid var(--color-neutral-200, #D5DFEC);
    background: var(--color-neutral-100, #F3F4F7);
}

comp-file-box .ctn-icon i {
    font-size: 16px;
}

comp-file-box .ctn-info-file {
    grid-area: info;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: start;
}

comp-file-box .box-file-action {
    grid-area: action;
}

comp-file-box i.icon-type {
    font-size: 16px;
    color: var(--color-neutral-600);
}

comp-file-box i.icon-type.icon-error {
    color: var(--color-danger-600);
    font-size: 20px;
}

comp-file-box .title-file {
    word-break: break-all;
    margin: 0;
    color: var(--color-neutral-500, #566A80);
    font: var(--font-body)
}

comp-file-box .other-info {
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

comp-file-box comp-button {
    margin-left: auto;
}

comp-file-box comp-progress[data-type='bar']:not([data-label])[completed] .progress-percentage, comp-progress[data-type='bar']:not([data-label])[percentage] .progress-percentage{
    min-width: 30px!important;
    margin-left: unset!important;
}

comp-file-box .other-info-progress{
    width: 100%;
}

.cl-icon-warning{
    color: var(--color-warning-600) !important;
}  

.ph-duotone.cl-icon-warning::before{
    color: var(--color-warning-600) !important;
    opacity: 1 !important;
}  

.ph-duotone.cl-icon-warning::after{
    color: var(--color-warning-800) !important;
}  

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comp-file-box {
    opacity: 0;  /* Inicialmente invisible */
    transform: translateY(10px); /* Leve desplazamiento hacia abajo */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.comp-file-box.show {
    opacity: 1;
    transform: translateY(0);
}

.comp-file-box {
    transition: opacity 0.2s ease-out, transform 0.3s ease-out;
}

.comp-file-box.removing {
    opacity: 0;
    transform: translateY(-10px);
}



/* Estilos adicionales para el autocomplete */

.select2-autocomplete .select2-container--default .select2-selection--single:before,
.select2-autocomplete .select2-container--default .select2-selection--multiple:before,
.select2-autocomplete-multiple .select2-container--default .select2-selection--single:before,
.select2-autocomplete-multiple .select2-container--default .select2-selection--multiple:before {
    display: none !important;
}

.select2-results__option.option-tag-single{
    display: none !important;
}

.ctn-comp-select2:has(.select2-autocomplete) select~.icon-error,
.ctn-comp-select2:has(.select2-autocomplete-multiple) select~.icon-error {
    right: var(--spacing-space-4);
}

.ctn-comp-select2:has(.helper-text.error) .helper-text.limit-chars{
    display: none;
}

.select2-autocomplete .select2-container--default .select2-selection__rendered,
.select2-autocomplete .select2-container .select2-selection__rendered,
.select2-autocomplete-multiple .select2-container--default .select2-selection__rendered,
.select2-autocomplete-multiple .select2-container .select2-selection__rendered {
    padding: 8px 12px;
}

/* VIEW ALLOWED FORMATS */
.action-view-formats {
    margin: var(--spacing-space-3, 8px) var(--spacing-space-0, 0) var(--spacing-space-4, 12px) var(--spacing-space-0, 0);
    display: flex;
    flex-direction: column;
}

.action-view-formats .info-view-formats {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-space-2);
    color: var(--color-neutral-500, #566A80);
    padding-left: var(--spacing-space-2);
    font: var(--font-caption-medium-strong);
    letter-spacing: var(--letter-spacing-1);
    gap: var(--spacing-space-7, 24px);
}

.action-view-formats .view-allowed-formats {
    opacity: 0;
    max-height: 0;
    height: auto;
    pointer-events: none;
    transition: max-height .25s ease-in-out, opacity .1s ease-in-out;
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium);
}

.action-view-formats.showing .view-allowed-formats {
    opacity: 1;
    max-height: 500px;
    height: auto;
    pointer-events: all;
    transition: max-height .25s ease-in-out, opacity .25s ease-in-out .1s;
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium);
}

.action-view-formats .icon-view-allowed-formats {
    font-size: var(--spacing-space-6, 20px);
    transform: rotate(0deg);
    transition: transform .25s ease-in-out;
}

.action-view-formats.showing .icon-view-allowed-formats {
    transform: rotate(-180deg);
    transition: transform .25s ease-in-out;
}

/* VIEW ALLOWED FORMATS */