/* ESTILOS TEMPORALES DE MODALES PARA LO ACTUAL */

.non-actions-modal {
    pointer-events: none;
}

.non-actions-modal .modal-footer button {
    pointer-events: all;
}

.br-profile-page .btn{
    white-space: wrap;
}

.br-profile-page {
    margin: 24px 0 40px 0;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 3px;
}

.card-body {
    flex: 1 1 auto;
    padding: 0.58rem;
}

.card-title {
    margin-bottom: 0.75rem;
}

.card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link:hover {
    text-decoration: none;
}

.card-link+.card-link {
    margin-left: 1.25rem;
}

.card>.list-group:first-child .list-group-item:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.card>.list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
    border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
    border-radius: 0 0 calc(3px - 1px) calc(3px - 1px);
}

.card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}

.card-header-pills {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}

.card-img {
    width: 100%;
    border-radius: calc(3px - 1px);
}

.card-img-top {
    width: 100%;
    border-top-left-radius: calc(3px - 1px);
    border-top-right-radius: calc(3px - 1px);
}

.card-img-bottom {
    width: 100%;
    border-bottom-right-radius: calc(3px - 1px);
    border-bottom-left-radius: calc(3px - 1px);
}

@media (min-width: 576px) {
    .card-deck {
        display: flex;
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .card-deck .card {
        display: flex;
        flex: 1 0 0%;
        flex-direction: column;
        margin-right: 15px;
        margin-left: 15px;
    }
}

@media (min-width: 576px) {
    .card-group {
        display: flex;
        flex-flow: row wrap;
    }

    .card-group .card {
        flex: 1 0 0%;
    }

    .card-group .card+.card {
        margin-left: 0;
        border-left: 0;
    }

    .card-group .card:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .card-group .card:first-child .card-img-top {
        border-top-right-radius: 0;
    }

    .card-group .card:first-child .card-img-bottom {
        border-bottom-right-radius: 0;
    }

    .card-group .card:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .card-group .card:last-child .card-img-top {
        border-top-left-radius: 0;
    }

    .card-group .card:last-child .card-img-bottom {
        border-bottom-left-radius: 0;
    }

    .card-group .card:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .card-group .card:not(:first-child):not(:last-child) .card-img-top,
    .card-group .card:not(:first-child):not(:last-child) .card-img-bottom {
        border-radius: 0;
    }
}

.card-columns .card {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .card-columns {
        column-count: 3;
        column-gap: 1.25rem;
    }

    .card-columns .card {
        display: inline-block;
        width: 100%;
    }
}

/* ESTILOS TEMPORALES DE MODALES PARA LO ACTUAL */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:focus-visible {
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.non-action {
    pointer-events: none !important;
}

.actions-table {
    display: flex;
    flex-direction: row;
}

body {
    margin: 0;
    font-family: Outfit Regular;
    color: #707070;
    background-color: var(--color-neutral0);
}

.main-content-general {
    padding: 24px 3.333333333333333% 40px 24px;
    margin-left: 80px;
    height: 100%;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-content .general-info {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.ctn-hidden {
    visibility: hidden;
}

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

.photo-user-table{
    gap: 4px;
    display: flex;
}

.photo-user-table img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
    object-fit: contain;
    object-position: center;
    aspect-ratio: 1 / 1;
}

.photo-user{
    max-width: 30px;
    max-height: 30px;
    border-radius: 100%;
    background-color: var(--color-neutral0);
}
/* ESTILOS NUEVO DATATABLE */

.dataTables_length {
    display: none !important;
}

.table-wrapper .content-wrapper::-webkit-scrollbar {
    height: 8px;
    background: transparent;
    border-radius: 5.333px;
}

.dttable .ctn-flex {
    display: flex;
    align-items: center;
    gap: var(--spacing3);
}

.dttable .ctn-photo {
    overflow: hidden;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border-radius: 100%;
}

.dttable .ctn-photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.dttable table {
    width: 100%;
    clear: both;
    max-width: none;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

.dttable table thead {
    height: 56px;
}

.dttable table thead th {
    background: var(--color-neutral100);
    border-bottom: 1px solid var(--color-neutral200);
    vertical-align: middle;
    padding: var(--spacing3) !important;
    font: var(--font-label);
    color: var(--color-neutral500);
}

.dttable table thead th.sorting,
.dttable table thead th.sorting_desc,
.dttable table thead th.sorting_asc {
    cursor: pointer;
}

.dttable table thead th:first-child {
    border-radius: 8px 0px 0px 0px;
}

.dttable table thead th:last-child {
    border-radius: 0px 8px 0px 0px;
    max-width: min-content;
}

.dttable table thead th.sorting::after,
.dttable table thead td.sorting::after,
.dttable table thead th.sorting::before,
.dttable table thead td.sorting::before,
.dttable table thead th.sorting_desc::before,
.dttable table thead td.sorting_desc::before,
.dttable table thead th.sorting_asc::after,
.dttable table thead td.sorting_asc::after {
    display: none;
}

.dttable table thead th.sorting_desc::after,
.dttable table thead td.sorting_desc::after {
    font-family: 'Phosphor-Bold';
    content: "\e08e";
    color: var(--color-neutral300);
    width: 12px;
    height: fit-content;
    font-size: 14px;
    border: none;
    top: 50%;
    transform: translateY(-50%);
}

.dttable table thead th.sorting_asc::before,
.dttable table thead td.sorting_asc::before {
    font-family: 'Phosphor-Bold';
    content: "\e03e";
    color: var(--color-neutral300);
    width: 12px;
    height: fit-content;
    font-size: 14px;
    border: none;
    top: 50%;
    transform: translateY(-50%);
}

.dttable table tbody td {
    padding: var(--spacing2) var(--spacing3);
    vertical-align: middle;
    background: var(--color-neutral0);
    border-bottom: 1px solid var(--color-neutral200);
}

.dttable tbody td span.many-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

.dttable table tbody tr {
    height: 48px;
    color: var(--color-neutral400);
}

.selected td {
    background: var(--color-sky50) !important;
    border-bottom: 1px solid var(--color-sky700) !important;
    color: var(--color-sky800) !important;
}

.table-wrapper table.dataTable thead th::before,
.table-wrapper table.dataTable thead th::after {
    display: none;
}

.table-wrapper table.dataTable thead th.sorting::after,
.table-wrapper table.dataTable thead td.sorting::after,
.table-wrapper table.dataTable thead th.sorting::before,
.table-wrapper table.dataTable thead td.sorting::before,
.table-wrapper table.dataTable thead th.sorting_desc::before,
.table-wrapper table.dataTable thead td.sorting_desc::before,
.table-wrapper table.dataTable thead th.sorting_asc::after,
.table-wrapper table.dataTable thead td.sorting_asc::after {
    display: none;
}

.table-wrapper table.dataTable thead th.sorting_asc span,
.table-wrapper table.dataTable thead th.sorting_desc span {
    gap: 4px;
    display: flex;
    align-items: center;
}

.table-wrapper table.dataTable thead th.sorting_desc span::after,
.table-wrapper table.dataTable thead td.sorting_desc span::after {
    font-family: 'Phosphor-Bold';
    content: "\e08e";
    color: var(--color-neutral300);
    width: 12px;
    height: fit-content;
    font-size: 14px;
    border: none;
}

.table-wrapper table.dataTable thead th.sorting_asc span::after,
.table-wrapper table.dataTable thead td.sorting_asc span::after {
    font-family: 'Phosphor-Bold';
    content: "\e03e";
    color: var(--color-neutral300);
    width: 12px;
    height: fit-content;
    font-size: 14px;
    border: none;
}

.table-wrapper table.dataTable thead th.sorting_asc span::after {
    font-family: 'Phosphor-Bold';
    content: "\e03e";
    color: var(--color-neutral300);
    width: 12px;
    height: fit-content;
    font-size: 14px;
    border: none;
}

/*----PAGINATOR----*/

/* Eliminar */
.pagination .page-item .page-link {
    border: none;
    background: transparent
}

.paginate_table {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: var(--spacing3) var(--spacing5);
    border-radius: 8px;
    border: 1px solid var(--color-neutral100);
}

.txtPageInfo {
    font: var(--font-label);
    color: var(--color-neutral300);
    margin-right: 16px;
}

.pageInfo {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
}

.sBtnLink {
    padding: var(--spacing3);
    color: var(--color-neutral300);
    align-items: flex-start;
    gap: var(--spacing2);
    border-radius: var(--spacing3);
    background: transparent;
    border: none;
    max-width: 32px;
    min-width: 32px;
    max-height: 32px;
    min-height: 32px;
}

.sPaginate .fa-angle-right,
.sPaginate .fa-angle-left {
    width: 14px;
}

.sBtnLink:not([disabled]) {
    cursor: pointer;
}

.sBtnLink:not([disabled]):hover {
    outline: none !important;
    background-color: var(--color-neutral100);
}

.sBtnLink:not([disabled]):active {
    outline: none !important;
    background-color: var(--color-neutral200);
}

.sBtnLink:disabled {
    background-color: transparent;
    color: var(--color-neutral100);
}

.sPaginate {
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.sCurrent input:hover {
    border: 1px solid var(--color-neutral400);
}

.sCurrent input {
    border-radius: var(--spacing3, 8px);
    border: 1px solid var(--color-neutral300);
    background: var(--color-neutral0);
    height: 28px;
    width: 39px;
    padding: var(--spacing2, 4px) 0;
    text-align: center;
    font: var(--font-label);
    outline: none;
    color: var(--color-neutral500);
}

.sCurrent {
    font: var(--font-caption);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-neutral500);
}

/* Eliminar */

/*----PAGINATOR----*/

/* ESTILOS NUEVO DATATABLE */

/* ESTILOS NUEVO DROPDOWN */

.wrapper-dropdown {
    position: relative;
    display: flex;
    min-width: 35px;
    width: 100% !important;
    max-width: 59px;
    padding: var(--spacing2) var(--spacing4);
    max-height: 30px;
    border-radius: var(--spacing3);
    border: 1px solid var(--color-neutral300);
    background: var(--color-neutral0);
    text-align: center;
    color: var(--color-neutral400);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font: var(--font-label);
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.wrapper-dropdown .selected-display {
    color: var(--color-neutral500);
}

.wrapper-dropdown:hover {
    border: 1px solid var(--color-neutral400);
}

.wrapper-dropdown.active {
    border: 2px solid var(--color-sky700);
}

.wrapper-dropdown::before {
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -2px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #fff transparent;
}

.wrapper-dropdown .icon-arrow {
    font-size: 16px;
    height: 14px;
    transition: transform .1s ease-in-out;
    color: var(--color-neutral400);
}

.wrapper-dropdown.active .icon-arrow {
    transform: rotate(-180deg);
}

.ctn_dropdown .dropdown-wrapper {
    transition: 0.3s;
    margin: 0;
    list-style: none;
    z-index: 99;
    user-select: none;
    border-radius: 4px;
    padding: var(--spacing3);
    box-shadow: 0px 0px 20px 0px rgba(59, 59, 59, 0.04), 0px 2px 8px 0px rgba(59, 59, 59, 0.10);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ctn_dropdown .dropdown-wrapper li {
    cursor: pointer;
    overflow: hidden;
    padding: var(--spacing3) var(--spacing5);
    outline: 1px solid var(--color-neutral0);
}

.ctn_dropdown .dropdown-wrapper li:last-child {
    border-bottom: none;
}

.ctn_dropdown .dropdown-wrapper li:hover {
    border-radius: var(--spacing3);
    outline: 1px solid var(--color-neutral300);
}

/*-----*/

.ctn_dropdown {
    position: absolute;
    transition: opacity 0.3s ease-in-out;
    top: 0px;
    left: 0px;
}

.ctn_dropdown ul li:hover {
    border-radius: var(--spacing3);
    outline: 1px solid var(--color-neutral300);
}

.parent-dropdown {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropdown-actions {
    position: relative;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.dropdown-actions button:hover {
    background: var(--color-sky50);
}

.dropdown-actions button:active {
    background: var(--color-sky200);
}

.dropdown-actions ul,
.ctn_dropdown ul {
    position: absolute;
    top: 100%;
    right: 0;
    list-style: none;
    margin: 0;
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 36, 85, 0.04), 0px 2px 8px 0px rgba(0, 36, 85, 0.10);
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity .2s ease-in-out;
}

.dropdown-actions.open ul,
.ctn_dropdown ul {
    padding: var(--spacing3);
    width: max-content;
    height: auto;
    pointer-events: all;
    opacity: 1;
    transition: opacity .3s ease-in-out;
}

/* .dropdown-actions ul li span, */
.dropdown-actions ul li a,
/* .ctn_dropdown ul li span, */
.ctn_dropdown ul li a {
    display: flex;
    align-items: center;
    gap: var(--spacing3, 8px);
    color: var(--color-neutral400);
    cursor: pointer;
    padding: var(--spacing3) var(--spacing5);
    border-radius: 8px;
}

/* ESTILOS NUEVO DROPDOWN */

/*-----SELECT_INPUT-----*/

.ctn-select {
    position: relative;
}

.ctn-select .icon {
    position: absolute;
    top: 50%;
    right: 16px;
    pointer-events: none;
    transform: translateY(-50%);
}

.ctn-select .icon:before {
    content: "\e136";
    font-family: "Phosphor" !important;
    font-size: 16px;
    color: var(--color-neutral400, #828282);
    width: 16px;
    height: 16px;
}

.ctn-select-input label.font-label {
    padding-left: 8px;
    color: var(--color-neutral500);
    margin: 0 0 4px 0;
}

.ctn-select-input .input-select {
    display: flex;
    height: var(--spacing9, 40px);
    width: 100%;
    padding: 0px 40px 0 16px;
    align-items: center;
    gap: var(--spacing3, 8px);
    border-radius: 8px;
    border: 1px solid var(--color-neutral200, #BCBCBC);
    font: var(--font-body);
    box-sizing: border-box;
    outline: none;
    background-color: transparent;
    color: var(--color-neutral600);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.ctn-select-input .input-select:focus~.icon::before {
    content: "\f106";
}

.ctn-select-input .ctn-select:hover>.input-select {
    background-color: var(--color-neutral100, #EAEAEA);
}

.ctn-select-input .datalist-select {
    display: none;
}

.ctn_options .datalist-select {
    display: block;
    max-height: 232px;
    margin: 0;
    overflow-y: auto;
    padding: var(--spacing3, 8px);
    border-radius: 4px;
    background: var(--color-neutral0, #FFF);
    box-shadow: var(--boxshadow-1);
    box-sizing: border-box;
}

.datalist-select option {
    background-color: transparent;
    font: var(--font-body);
    display: flex;
    padding: var(--spacing3, 8px) var(--spacing5, 16px);
    gap: var(--spacing3, 8px);
    border-radius: 8px;
    color: var(--color-neutral400, #676767);
    margin-bottom: var(--spacing2, 4px);
    box-sizing: border-box;
}

.datalist-select option:last-child {
    margin-bottom: 0;
}

.datalist-select option.active {
    background: var(--color-neutral100, #EAEAEA);
    color: var(--color-neutral400, #676767);
}

.datalist-select option:hover {
    background-color: transparent;
    outline: 1px solid var(--color-neutral200);
    outline-offset: -1px;
    cursor: pointer;
}

.datalist-select::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.ctn_options .text-charging {
    color: var(--color-neutral400, #676767);
    padding: var(--spacing3, 8px) var(--spacing5, 16px);
    font: var(--font-body);
}

.ctn_options {
    position: absolute;
    transition: opacity 0.3s ease-in-out;
    top: 0;
}

/*-----SELECT_INPUT-----*/

/* ESTILO HEADER BUSCADOR */

.cl-search-filter {
    display: grid;
    grid-template-columns: 420px 1fr auto;
    grid-template-areas: "search export add";
    margin-bottom: 16px;
    align-items: center;
    gap: 8px;
    /* margin-top: 24px; */
}

.ctn-tools {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.cl-search-filter .ctn-tools div,
.ctn-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-search-filter .ctn-buttons {
    justify-self: end;
}

.cl-search-filter comp-search {
    width: 420px;
}

/* ESTILO HEADER BUSCADOR */

/* ESTILO VISTA VACÍA */

.no-data,
.ctn-loader {
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s ease-in-out;
}

.no-data.open,
.ctn-loader.open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    color: var(--color-neutral200);
    text-align: center;
    flex: 1;
    opacity: 1;
    pointer-events: all;
    transition: opacity .2s ease-in-out;
}

.no-data .font-title-m {
    margin: 0;
}

/* ESTILO VISTA VACÍA */

.ctn-breadcrumb {
    display: flex;
    margin-top: 16px;
    margin-bottom: 16px;
}

.ctn-breadcrumb .main-breadcrumb {
    color: var(--color-neutral300);
    text-overflow: ellipsis;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: 3px;
    padding-left: 3px;
    color: var(--color-neutral300);
    content: "/";
}

/* Traceability */
.traceability {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 8px;
}

.traceability .content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.traceability .content-header .txt-subtitle {
    padding: 0 0 0 40px;
}

.traceability .content-header comp-search {
    width: 396px;
}

/* Traceability */

/* timeline start */
.content-timeline {
    height: 100%;
}

.timeline {
    position: relative;
    margin: 0 0 0 38px;
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.timeline-event {
    position: relative;
}

.timeline-event::before,
.timeline-event::after {
    content: '';
    display: block;
    position: absolute;
    background-color: var(--color-neutral100);
}

.timeline_ctn:not(:last-child) .timeline-event::before {
    top: 26px;
    left: -25px;
    width: 2px;
    height: calc(100%);
}

.timeline-event::after {
    top: 16px;
    left: -24px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-neutral300);
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 0px 8px var(--color-neutral0);
}

.timeline_ctn:first-child .timeline-event:first-child::after {
    width: 14px;
    height: 14px;
    background-color: var(--color-orange600);
    box-shadow: 0px 0px 0px 4px var(--color-neutral0) !important;
}

.timeline-event.big::after {
    width: 14px;
    height: 14px;
    box-shadow: 0px 0px 0px 4px var(--color-neutral0);
}

.timeline-event.first::before {
    background-color: transparent;
}

.timeline-event-content {
    padding-top: 6px;
    position: relative;
    z-index: 1;
}

.timeline-event-content h3 {
    margin-top: 0;
}

.timeline-event-content .txt-date {
    margin: 0;
    font: var(--font-label);
    color: var(--color-neutral400);
}

.timeline-event-content .txt-user {
    margin: 0;
    font: var(--font-button);
    color: var(--color-neutral600);
    padding: var(--spacing2) 0;
}

.trace-body .txt-subtitle {
    margin: 0;
    font: var(--font-button);
    color: var(--color-neutral600);
}

.timeline-event-content .txt-body {
    margin: 0;
    font: var(--font-body);
    color: var(--color-neutral400);
    padding: 0 0 var(--spacing7) 0;
}

/* .timeline-event-content .parent-chevron {
    width: max-content;
} */

/* timeline end */
.card-box {
    margin: 15px;
    border-radius: var(--spacing3);
    box-shadow: 0px 0px 20px 0px rgba(0, 36, 85, 0.04), 0px 2px 8px 0px rgba(0, 36, 85, 0.10);
    padding: 20px !important;
}

.card-box .photo {
    width: 95px;
    height: 95px;
    border: 1px solid #D8D8D8;
    border-radius: 50%;
    margin-bottom: 20px;
    float: left;
}

.card-box .btn-photo-file {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #6FB5FB;
    color: #FFFFFF;
    font-size: 12px;
    text-align: center;
    padding-top: 3px;
    position: absolute;
    left: 80px;
}

.card-box .photo-file {
    position: absolute;
    opacity: 0;
    width: 42px;
    left: 70px;
    z-index: 1000;
}

.section-info {
    max-width: 864px;
}

.section-info .font-title-m,
.section-info .font-body {
    margin: 0;
}

.section-info .font-title-m {
    color: var(--color-neutral500);
    margin-bottom: 8px;
}

.section-info .font-body {
    color: var(--color-neutral400);
}

.target-tab {
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.target-tab-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.target-tab.active {
    height: auto;
    width: auto;
    overflow: visible;
    pointer-events: all;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    display: block;
}

.target-tab:not(.active) {
    display: none;
}

/* MODALS */

#modal_change_cpt .modal-dialog {
    max-width: 44rem;
    margin: 30px auto;
    width: 100%;
}

.icon-warning {
    background-image: url(../img/icons/Warning.svg);
    background-repeat: no-repeat;
    background-position: center;
    min-height: 24px;
    min-width: 24px;
    max-height: 24px;
    max-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-info {
    background-image: url(../img/icons/Info.svg);
    background-repeat: no-repeat;
    background-position: center;
    min-height: 24px;
    min-width: 24px;
    max-height: 24px;
    max-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}

.fade.show {
    opacity: 1;
}

.modal {
    text-align: center;
    padding: 0 32px;
}

.modal::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.modal-actions.show {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.modal-action-content {
    padding: var(--spacing5);
    background-color: var(--color-neutral0);
    border-radius: 16px;
    border: none;
}

.modal-action-content .ctn-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.modal-action-content .modal-header {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--spacing3);
    padding: 0;
    border: none;
    color: var(--color-neutral500);
    font-size: 20px;
}

.modal-action-content .modal-body {
    border: none;
    padding: var(--spacing3) 0 0 0;
}

.modal-action-content .modal-footer {
    border: none;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.modal-footer> :not(:last-child) {
    margin-right: .25rem;
}

.modal-footer> :not(:first-child) {
    margin-left: .25rem;
}

.modal-action-content .title-modal {
    display: flex;
    align-items: center;
    font: var(--font-title-s);
    color: var(--color-neutral500);
    margin: 0 0 var(--spacing2) 0 !important;
    min-height: 32px;
}

.modal-action-content .description-modal {
    font: var(--font-body);
    color: var(--color-neutral500);
    margin-right: var(--spacing7);
}

.form-modal {
    margin-top: var(--spacing5);
}

.modal-action-content .txt-body,
.modal-action-content ul li {
    margin: 0;
    font: var(--font-body);
    color: var(--color-neutral500);
}

.modal-action-content .close-modal-actions {
    position: absolute;
    top: 0;
    right: 0;
}

.modal-action-content .close-modal-actions {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    padding: 8px;
    border-radius: 8px;
    background-color: transparent;
    color: var(--color-neutral300);
}

.modal-action-content .close-modal-actions:hover {
    background-color: var(--color-neutral100);
    color: var(--color-neutral300);
}

.modal-action-content .close-modal-actions:active {
    background-color: var(--color-neutral200);
    color: var(--color-neutral300);
}

.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -25%);
}

.modal.show .modal-dialog {
    transform: translate(0, 0);
}

.modal-open .modal {
    overflow: hidden;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px auto;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    border-radius: 16px;
    outline: 0;
    gap: 16px;

    max-height: 100vh;
    overflow: hidden;
    height: 100%;
}

.modal-content form {
    padding: 0 !important;
}

.modal-content .content {
    overflow: auto;
    max-height: calc(90vh - 160px);
    margin-left: var(--spacing3);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: 0.5;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}
 
.modal-dialog {
    max-width: 576px;
    margin: 30px auto;
    width: 100%;
}

.modal-sm {
    max-width: 300px;
    width: 100%;
}

/* MODALS */

/* Autocomplete */

.ui-widget.ui-widget-content {
    border-radius: 8px;
    color: #495057;
}

.ui-menu .ui-menu-item-wrapper {
    padding: 4px 12px;
}

.ui-menu-item:first-child .ui-menu-item-wrapper.ui-state-active{
    border-radius: 8px 8px 0 0;
}

.ui-menu-item:last-child .ui-menu-item-wrapper.ui-state-active{
    border-radius: 0 0 8px 8px;
}

/* Autocomplete */


@media screen and (max-width: 1440px) {
    .ctn-breadcrumb {
        margin-top: 12px;
    }
}

@media screen and (max-width: 1366px) {
    .ctn-breadcrumb {
        margin-top: 8px;
    }
}

@media screen and (max-width: 1280px) {
    .table-wrapper .content-wrapper {
        overflow: auto hidden;
        width: 100% !important;
    }

    .table-wrapper .content-wrapper .table {
        width: max-content;
        margin-bottom: 6px;
    }

    .table-wrapper .content-wrapper .table.width-expand {
        width: -webkit-fill-available !important;
    }
    /* eliminar */
    .paginate_table {
        margin-bottom: 0;
    }
    /* eliminar */
    .ctn-tools {
        grid-area: export;
    }
/* }

@media screen and (max-width: 1080px) { */

    .main-content-general {
        padding: 80px 0 40px 0;
        margin-left: 0;
    }

    .main-content .general-info {
        padding: 0 32px;
        row-gap: 16px;
    }

    .parent-ctn-tabs{
        margin-bottom: 4px;
    }

    /* .main-content .section-info {
        margin-bottom: 8px;
    } */

    .table-wrapper .content-wrapper .table:not(.width-expand) {
        min-width: max-content;
    }

    .table-wrapper .content-wrapper::-webkit-scrollbar-track {
        margin: 0 0;
    }
    /* eliminar */
    .table-wrapper .paginate_table {
        margin: 8px 32px 0px;
    }
    /* eliminar */
    .cnt-cl-button {
        grid-area: add;
    }

    .link-back,
    .traceability,
    .ctn-breadcrumb,
    .content-forms {
        padding: 0 32px;
    }

    .cl-search-filter {
        grid-template-columns: 1fr auto;
        grid-template-areas: "search add" "export export";
        column-gap: 8px;
        row-gap: 8px;
        margin-bottom: 20px;
    }

    .cl-search-filter comp-search {
        width: auto;
    }

    .traceability .content-header {
        flex-direction: column;
        align-items: unset;
        width: 100%;
        gap: 24px;
    }

    .traceability .content-header .txt-subtitle {
        padding: 0;
    }

    .traceability .content-header comp-search {
        width: 100%;
    }

    .ctn-breadcrumb {
        margin: 20px 0 12px 0;
    }

    .cl-search-filter .ctn-buttons comp-button span {
        display: none;
    }
}

@media only screen and (max-width: 680px) {
    /* Estilos base (siempre aplican) */
    .modal-footer {
        display: flex;
        gap: 8px;
    }
    
    .modal-footer:has(> :first-child:nth-last-child(2)) {
        flex-direction: column-reverse;
    }
    
    /* Aplica 100% de ancho a TODOS los hijos directos (incluido el <a>) */
    .modal-footer > :first-child:nth-last-child(2),
    .modal-footer > :first-child:nth-last-child(2) ~ * {
        width: 100%;
        margin: 0 !important;
    }
    
    /* Fuerza que los comp-button (incluso dentro de <a>) hereden el 100% */
    .modal-footer > :first-child:nth-last-child(2) comp-button,
    .modal-footer > :first-child:nth-last-child(2) ~ * comp-button {
        width: 100%;
        display: block; /* ¡Clave para que funcione! */
    }
}

@media only screen and (max-width: 640px) {

    #signature canvas {
        min-height: 160px;
    }

    .modal {
        text-align: center;
        padding: 0 20px;
    }

    .main-content-general {
        padding: 68px 0 40px 0;
    }

    .main-content .general-info {
        padding: 0;
    }

    .no-data.open,
    .ctn-loader.open {
        padding: 20px;
    }

    .table-wrapper .content-wrapper::-webkit-scrollbar-track {
        margin: 0 0;
    }

    .table-wrapper .content-wrapper .table {
        margin-bottom: -1px;
    }
    /* eliminar */
    .table-wrapper .paginate_table {
        margin: 8px 20px 0 20px;
    }
    /* eliminar */
    .parent-ctn-tabs {
        padding: 0 20px;
        overflow-x: auto;
        display: flex;
        width: 100%;
    }

    .parent-ctn-tabs::-webkit-scrollbar {
        display: none;
    }

    .cl-search-filter {
        grid-template-columns: 1fr auto;
        grid-template-areas: "search add"
            "export export";
        column-gap: 8px;
    }

    .cl-search-filter comp-search {
        grid-area: search;
        max-width: revert;
    }

    .ctn-tools {
        grid-area: export;
        overflow: auto;
        padding: 0 20px;
    }

    .ctn-tools div {
        width: fit-content;
    }

    .ctn-tools::-webkit-scrollbar {
        display: none;
    }

    .cl-search-filter .ctn-buttons {
        grid-area: add;
        margin: 0 20px 0 0;
    }

    .cl-search-filter comp-search {
        margin: 0 0 0 20px;
    }

    .section-info {
        margin: 0 20px;
    }

    .link-back,
    .traceability,
    .ctn-breadcrumb,
    .content-forms {
        padding: 0 20px;
    }

    .cl-search-filter .ctn-buttons comp-button span {
        display: none;
    }

    .traceability {
        margin-top: 8px;
        display: flex;
        flex-direction: column;
        gap: 32px;
        margin-top: 8px;
    }

    .txt_info {
        display: none;
    }
}
/* eliminar */
@media screen and (max-width: 500px) {

    .paginate_table {
        flex-direction: column-reverse;
        gap: 8px;
        padding: 0;
        border: none;
    }

    .wrapper-dropdown {
        display: none !important;
    }

    .pageInfo {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sPaginate {
        padding: 8px 16px;
        border-radius: 8px;
        border: 1px solid var(--color-neutral100);
        width: 100%;
    }

    .modal-actions .modal-actions-dlg {
        margin: 0 20px;
    }

    .modal-lg {
        max-width: 800px;
        width: 100%;
    }
}
 /* eliminar */


.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.ctn-vw-valid .section-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 20px;
}

/* clases news */

.ctn-vw-valid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100vw;
    height: 100vh;
}
.ctn-vw-valid .section-body .ctn-info {
    max-width: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.ctn-vw-valid .footer-vw {
    width: 100%;
    display: flex;
    justify-content: center;
}
.ctn-vw-valid .footer-vw .ctn-footer {
    min-height: 140px;
    display: flex
;
    align-items: center;
}
.neutral700 {
    color: var(--color-neutral-700);
}
.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.text-center {
    text-align: center !important;
}
.mt-4 {
    margin-top: 1.5rem !important;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.d-none-force {
    display: none !important;
}