*,
*::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;
}

.main-content>* {
    overflow-wrap: anywhere;
}

.skeleton.no-delete-skeleton {
    min-width: fit-content;
}

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

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

body {
    margin: 0;
    font-family: Outfit Regular;
    color: var(--color-neutral-600);
    background-color: var(--color-neutral-0);
}

.btn-link-back {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

span::first-letter,
li::first-letter,
.capitalize::first-letter {
    text-transform: uppercase;
}

.not-capitalize{
    text-transform: lowercase !important;
    -webkit-box-orient: unset !important;
}

.neutral500 {
    color: var(--color-neutral-500);
}

.neutral600 {
    color: var(--color-neutral-600);
}

.neutral700 {
    color: var(--color-neutral-700);
}


.main-content-general {
    padding: 24px 3.333333333333333% 40px 24px;
    margin-left: 80px;
    height: 100%;
    /* height: 100vh; */
    /* 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;
}

.general-info .title-wh-actions article {
    margin-bottom: var(--spacing-space-1);
    min-height: var(--spacing-space-9);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.general-info .title-wh-actions article.view-apart {
    margin-bottom: 0;
}

.general-info .title-wh-actions article section {
    display: flex;
    align-items: baseline;
    column-gap: var(--spacing-space-3);
}

.general-info .title-wh-actions {
    margin-bottom: var(--spacing-space-9);
    position: relative;
}

.general-info .title-wh-actions.main-title {
    margin-bottom: var(--spacing-space-7);
}

.ctn-hidden {
    visibility: hidden;
}

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

.photo-user-table img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    overflow: hidden;
    margin-right: 4px;
    object-fit: cover;
    object-position: top center;
}

/* VISTAS VALID */
.ctn-vw-valid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100vw;
    height: 100vh;
}

.ctn-vw-valid .section-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 20px;
}

.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;
}

/* VISTA AGREGAR Y EDITAR */
.ctn-sections .ctn-section .separate {
    display: grid;
    grid-template-columns: 23.97260273972603% 568px .5fr;
    column-gap: 9.817351598173516%;
    margin-top: var(--spacing-space-3);
}

.ctn-sections .ctn-section .separate-two-columns {
    display: grid;
    grid-template-columns: 23.97260273972603% 1fr;
    column-gap: 9.817351598173516%;
    margin-top: var(--spacing-space-3);
}

.ctn-sections .ctn-section .font-title-small {
    color: var(--color-neutral-600);
}

.ctn-sections .ctn-section .separate.ctn-buttons {
    margin-top: var(--spacing-space-9);
}

.ctn-sections .ctn-section:not(:first-child) {
    margin-top: var(--spacing-space-11);
}

.ctn-sections .ctn-buttons .ctn_btns_add {
    display: flex;
    align-items: center;
}

.ctn-sections .ctn-buttons .ctn_btns_add comp-button:first-of-type {
    margin-right: var(--spacing-space-3);
}


/* MODAL CONFIRM EXIT */

.ctn_mdl {
    display: grid;
    grid-template-columns: auto 1fr;
    max-width: 390px;
    min-width: auto;
    padding: var(--spacing-space-5);
    gap: 0 var(--spacing-space-5);
    background: var(--color-neutral-0);
}

.content_icon {
    min-width: 20px;
    height: 100%
}

.ctn_icons {
    padding-top: 4px;
    height: 100%;
    position: relative;
}

.ctn_icons i {
    position: absolute;
}

.ctn_icons i:before {
    font-size: 16px;
    color: var(--color-warning-800);
}

.ctn_icons i.second-icon:before {
    font-size: 16px;
    color: var(--color-warning-600);
}

.ctn-title {
    display: flex;
    gap: var(--spacing-space-2);
    align-items: flex-start;
}

#modal_confirm .modal-dialog,
#modal_confirm .modal-content {
    width: fit-content;
}
.input-68 .icons-input {
    right: 6px;
}

#modal_confirm .modal-dialog {
    vertical-align: top;
    top: 10px;
}
.color-gray-700 {
    color: var(--color-neutral-700);
}
.radius-8 {
    border-radius: var(--spacing-space-3) !important;
}
/* MODAL CONFIRM EXIT */

/* VISTA AGREGAR Y EDITAR */

/* VISTA DETALLE */

.gap-16 {
    gap: var(--spacing-space-6);
    display: flex;
    flex-direction: column;
}

.gap_divide {
    display: grid;
    grid-template-columns: 50% 50%;
}

/* VISTA DETALLE */

/* ESTILOS NUEVO DROPDOWN */

.wrapper-dropdown {
    position: relative;
    display: flex;
    min-width: 35px;
    width: 100% !important;
    max-width: 59px;
    padding: var(--spacing-space-2) var(--spacing-space-4);
    max-height: 30px;
    border-radius: var(--spacing-space-3);
    border: 1px solid var(--color-neutral-300);
    background: var(--color-neutral-0);
    text-align: center;
    color: var(--color-neutral-400);
    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-neutral-500);
}

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

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

.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-neutral-400);
}

.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(--spacing-space-3);
    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(--spacing-space-3) var(--spacing-space-5);
    outline: 1px solid var(--color-neutral-0);
}

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

.ctn_dropdown .dropdown-wrapper li:hover {
    border-radius: var(--spacing-space-3);
    outline: 1px solid var(--color-neutral-300);
}

/*-----*/

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

.ctn_dropdown ul li:hover {
    border-radius: var(--spacing-space-3);
    outline: 1px solid var(--color-neutral-300);
}

.parent-dropdown {
    width: 100%;
    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-primary-100);
}

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

.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(--spacing-space-3);
    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(--spacing-space-3, 8px);
    color: var(--color-neutral-400);
    cursor: pointer;
    padding: var(--spacing-space-3) var(--spacing-space-5);
    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-neutral-400);
    width: 16px;
    height: 16px;
}

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

.ctn-select-input .input-select {
    display: flex;
    height: var(--spacing-space-9, 40px);
    width: 100%;
    padding: 0px 40px 0 16px;
    align-items: center;
    gap: var(--spacing-space-3, 8px);
    border-radius: 8px;
    border: 1px solid var(--color-neutral-200);
    font: var(--font-body);
    box-sizing: border-box;
    outline: none;
    background-color: transparent;
    color: var(--color-neutral-600);
    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-neutral-100);
}

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

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

.datalist-select option {
    background-color: transparent;
    font: var(--font-body);
    display: flex;
    padding: var(--spacing-space-3, 8px) var(--spacing-space-5, 16px);
    gap: var(--spacing-space-3, 8px);
    border-radius: 8px;
    color: var(--color-neutral-400);
    margin-bottom: var(--spacing-space-2, 4px);
    box-sizing: border-box;
}

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

.datalist-select option.active {
    background: var(--color-neutral-100);
    color: var(--color-neutral-400);
}

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

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

.ctn_options .text-charging {
    color: var(--color-neutral-400);
    padding: var(--spacing-space-3, 8px) var(--spacing-space-5, 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: calc(100vh - 310px);
    color: var(--color-neutral-200);
    text-align: center;
    flex: 1;
    opacity: 1;
    pointer-events: all;
    transition: opacity .2s ease-in-out;
}

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

/* ESTILO VISTA VACÍA */

/* Traceability */
.traceability {
    display: flex;
    flex-direction: column;
}

.idv-traceability {
    margin-top: var(--spacing-space-5);
}


.idv-txt-traceability {
    margin: var(--spacing-space-3) var(--spacing-space-0) var(--spacing-space-5) var(--spacing-space-0);
}

.traceability .content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-space-5);
}

.traceability comp-search {
    max-width: 568px;
}

.traceability .txt-subtitle {
    font: var(--font-body-strong);
    color: var(--color-neutral-600);
}

.view-trace-skeleton .traceability-skeleton .container-skeleton,
.traceability .traceability-skeleton .container-skeleton {
    display: grid;
    grid-template-columns: 12px 1fr;
    column-gap: 18px;
    max-width: 350px;
    margin-top: 27px;
}

.view-trace-skeleton .traceability-skeleton section:nth-of-type(2),
.traceability .traceability-skeleton section:nth-of-type(2),
.view-trace-skeleton .traceability-skeleton section:nth-of-type(3),
.traceability .traceability-skeleton section:nth-of-type(3) {
    margin-top: 37px;
}

.view-trace-skeleton .traceability-skeleton .ctn-circle span,
.traceability .traceability-skeleton .ctn-circle span {
    width: var(--spacing-space-4);
    height: var(--spacing-space-4);
    border-radius: 100%;
}

.view-trace-skeleton .traceability-skeleton .h-14,
.traceability .traceability-skeleton .h-14 {
    min-height: 14px;
}

.view-trace-skeleton .traceability-skeleton .h-16,
.traceability .traceability-skeleton .h-16 {
    min-height: 16px;
}

.view-trace-skeleton .traceability-skeleton .h-18,
.traceability .traceability-skeleton .h-18 {
    min-height: 18px;
}

.view-trace-skeleton .container-skeleton .content div:nth-of-type(1),
.traceability .container-skeleton .content div:nth-of-type(1) {
    margin-bottom: 8px;
    max-width: 188px;
}

.view-trace-skeleton .container-skeleton .content div:nth-of-type(2),
.traceability .container-skeleton .content div:nth-of-type(2) {
    margin-bottom: 15px;
    max-width: 280px;
}

.view-trace-skeleton .container-skeleton .content div:nth-of-type(3),
.traceability .container-skeleton .content div:nth-of-type(3) {
    margin-bottom: 16px;
    max-width: 320px;
}

.view-trace-skeleton .container-skeleton .content div:nth-of-type(4),
.traceability .container-skeleton .content div:nth-of-type(4) {
    margin-bottom: 11px;
    max-width: 296px;
}

.view-trace-skeleton .container-skeleton .content div:nth-of-type(5),
.traceability .container-skeleton .content div:nth-of-type(5) {
    margin-bottom: 13px;
    max-width: 228px;
}

.view-trace-skeleton .container-skeleton .content div:nth-of-type(6),
.traceability .container-skeleton .content div:nth-of-type(6) {
    margin-bottom: 12px;
    max-width: 275px;
}

.view-trace-skeleton .container-skeleton .content div:nth-of-type(7),
.traceability .container-skeleton .content div:nth-of-type(7) {
    max-width: 228px;
}

.traceability .no-data.open {
    margin-top: 216px;
}

.timeline_content.no-apply-skeleton-trace {
    margin-left: 0;
}

.timeline_content.no-apply-skeleton-trace .timeline_event {
    margin-left: 38px;
}

/* Traceability */

.card-box {
    margin: 15px;
    border-radius: var(--spacing-space-3);
    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;
    align-items: center;
    gap: 12px;
}

.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;
    gap: var(--spacing-space-3);
    display: flex;
    flex-direction: column;
}

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

.section-info .font-title-medium {
    color: var(--color-neutral-500);
    margin-bottom: 8px;
}

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

.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; */
    height: 100%;
    width: auto;
    overflow: visible;
    pointer-events: all;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    display: block;
}

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

.banner-info {
    display: none;
}

.target-tabs:not(.active_element) {
    opacity: 0;
    height: 0;
    transition: opacity .2s ease-out;
}

.target-segmented:not(.active_element) {
    display: none !important;
}

.target-tabs.active_element {
    opacity: 1;
    height: auto;
    transition: opacity 5s ease-out;
}

.target-segmented.active_element {
    display: block;
}

.general-info .title-wh-actions .pop-confirm-view comp-pop-confirm {
    left: 0;
    right: 0;
}

[class*="back"].active comp-button button,
.btn-back.active comp-button button {
    background: var(--color-primary-200, #D8F0FE) !important;
    color: var(--color-primary-700, #164FA1) !important;
}

.view-actions {
    display: none !important;
}

.ctn-breadcrumb-skeleton {
    margin: 16px 0;
}

/* empty con btn trace */
.no-data-trace{
    display: grid !important;
    position: relative;
}

.no-data-trace .btn-trace-general{
    position: absolute;
    right: 0;
    top: 14px;
}
/* empty con btn trace */

@media screen and (max-width: 1280px) {
    .general-info .title-wh-actions {
        margin-bottom: var(--spacing-space-7);
    }

    .general-info .title-wh-actions.main-title {
        margin-bottom: var(--spacing-space-5);
    }

    .general-info .title-wh-actions.main-title.without-tabs {
        margin-bottom: var(--spacing-space-6);
    }

    .view-actions {
        display: flex !important;
    }

    .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;
    }

    .main-content .ctn-sections {
        padding: 0 var(--spacing-space-8);
    }

    .ctn-sections .ctn-section:not(:first-child) {
        margin-top: var(--spacing-space-10);
    }

    .ctn-sections .ctn-section .separate,
    .ctn-sections .ctn-section .separate-two-columns {
        grid-template-columns: auto;
        row-gap: var(--spacing-space-7);
    }

    .separate-d-none {
        display: none;
    }

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

    .main-content .ctn-breadcrumb,
    .main-content .general-info {
        padding: 0 32px;
    }

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

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

    .cnt-cl-button {
        grid-area: add;
    }

    .link-back,
    .traceability,
    .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 comp-search {
        width: 100%;
        max-width: unset;
    }

    .idv-txt-traceability {
        margin: var(--spacing-space-5) var(--spacing-space-0);
    }

    .ctn-breadcrumb-skeleton {
        margin: 20px 0 16px 0;
        padding: 0 32px;

    }

    .no-data-trace .btn-trace-general{
        top: 10px;
        right: 32px;
    }

    /* VISTA AGREGAR Y EDITAR */

    .ctn-sections .ctn-buttons .ctn_btns_add {
        flex-direction: row-reverse;
    }
    
    .ctn-sections .ctn-buttons .ctn_btns_add comp-button:first-of-type {
        margin-right: var(--spacing-space-0);
        margin-left: var(--spacing-space-3);
    }


    /* VISTA AGREGAR Y EDITAR */
}

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

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

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

    .general-info .title-wh-actions {
        margin-bottom: var(--spacing-space-5);
    }

    .general-info .title-wh-actions .pop-confirm-view {
        margin: 0 var(--spacing-space-6);
    }

    .general-info .title-wh-actions .pop-confirm-view comp-pop-confirm {
        left: var(--spacing-space-6);
        right: var(--spacing-space-6);
    }

    .general-info .title-wh-actions article {
        margin: 0 var(--spacing-space-6) var(--spacing-space-3) var(--spacing-space-6);
    }

    .section-info {
        margin: 0 var(--spacing-space-6) var(--spacing-space-0) var(--spacing-space-6);
    }

    .banner-info {
        margin: 0 var(--spacing-space-6) var(--spacing-space-5) var(--spacing-space-6);
    }

    .banner-info.banner-without-tabs {
        margin-bottom: var(--spacing-space-6);
    }

    .banner-info.banner-actions {
        margin-bottom: var(--spacing-space-7);
    }

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

    .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;
    }

    .main-content .ctn-breadcrumb {
        padding: 0;
        margin: 20px 20px 16px 20px;
    }

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

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

    .traceability {
        display: flex;
        flex-direction: column;
    }

    .txt_info {
        display: none;
    }

    *::-webkit-scrollbar {
        width: 0 !important;
    }

    .idv-txt-traceability {
        margin: var(--spacing-space-5) var(--spacing-space-0);
    }

    .banner-info.banner-visible {
        display: block;
    }

    .main-content .ctn-sections {
        padding: 0 var(--spacing-space-6);
    }

    .ctn-sections .ctn-section:not(:first-child) {
        margin-top: var(--spacing-space-10);
    }

    /* Traceability */

    .traceability .container-skeleton .content div:nth-of-type(1) {
        max-width: 169px;
    }

    .traceability .container-skeleton .content div:nth-of-type(2) {
        max-width: 251px;
    }

    .traceability .container-skeleton .content div:nth-of-type(3) {
        max-width: 287px;
    }

    .traceability .container-skeleton .content div:nth-of-type(4) {
        max-width: 265px;
    }

    .traceability .container-skeleton .content div:nth-of-type(5) {
        max-width: 204px;
    }

    .traceability .container-skeleton .content div:nth-of-type(6) {
        max-width: 247px;
    }

    .traceability .container-skeleton .content div:nth-of-type(7) {
        max-width: 204px;
    }

    .traceability .no-data.open {
        margin-top: 136px;
    }
    .no-data-trace .btn-trace-general{
        top: 10px;
        right: 20px;
    }
    /* Traceability */

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

    .general-info .title-wh-actions.main-title.without-tabs {
        margin-bottom: var(--spacing-space-5);
    }

    /* VISTA AGREGAR Y EDITAR */

    .ctn-sections .ctn-buttons .ctn_btns_add {
        display: block !important;
        width: 100%;
    }

    .ctn-sections .ctn-buttons .ctn_btns_add comp-button {
        width: 100%;
    }

    .ctn-sections .ctn-buttons .ctn_btns_add comp-button:first-of-type {
        margin-right: var(--spacing-space-0);
        margin-left: var(--spacing-space-0);
        margin-bottom: var(--spacing-space-3);
    }

    /* VISTA AGREGAR Y EDITAR */

    /* VISTA DETALLE */
    
    .gap_divide {
        grid-template-columns: 1fr;
    }

    /* VISTA DETALLE */

}

/* 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-neutral-100);
        width: 100%;
    }

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

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

/* eliminar */

/* SKELETON PLANTILLAS */
.main-content:not(.viewing) {
    /* visibility: hidden; */
    height: 0;
    overflow: hidden;
    max-height: 0;
    pointer-events: none;
    /* display: none !important; */
}

.main-content.viewing {
    /* visibility: visible; */
}

.main-content.traceability-skeleton {
    position: absolute;
    z-index: 2;
    background: var(--color-gray-0);
    height: 100%;
    width: -webkit-fill-available;
}

[class*='-view-skeleton'].viewing .skeleton:not(.checkbox):not([class*='button']:not(.searcher)) {
    height: fit-content;
    /* width: fit-content; */
}

.skeleton.w-fit {
    width: fit-content;
}

.apply-skeleton.skeleton.w-fit {
    width: fit-content;
}

.section-info.skeleton {
    margin-bottom: 8px !important;
}

.section-info.only-mobile {
    display: none !important;
}

/* PLANTILLA MAIN */

.header-table-skeleton {
    display: grid;
    grid-template-areas:
        "searcher buttons button";
    grid-template-columns: 420px 1fr 168px;
    gap: 8px;
    margin-bottom: 20px;
    align-items: center;
}

.view-main-skeleton.searcher {
    grid-area: searcher;
}

.comp-search-table.searcher.skeleton {
    height: 40px !important;
    width: 100% !important;
}

.tools-table-skeleton {
    grid-area: button;
    height: 40px !important;
}

.buttons-main-skeleton {
    grid-area: buttons;
}

.checkbox.skeleton {
    width: 20px;
    height: 20px;
}

.button-main-compact.skeleton {
    height: 40px;
    width: 40px;
}

.button-compact.skeleton {
    height: 32px;
    width: 32px;
}

.buttons-main-skeleton {
    display: flex;
    flex-direction: row;
    height: 28px;
    gap: 8px;
    align-items: center;
}

.buttons-main-skeleton span {
    width: 96px;
    height: 28px;
}

/* PLANTILLA MAIN */

/* PLANTILLA ADD-EDIT */
.gap-skeleton-add-edit {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

/* PLANTILLA ADD-EDIT */

/* PLANTILLA TRACE */
.view-trace-skeleton .title-wh-actions {
    margin-bottom: var(--spacing-space-5);
}

.view-trace-skeleton .searcher {
    max-width: 568px;
}

/* PLANTILLA TRACE */


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

    /* PLANTILLA MAIN */
    .header-table-skeleton {
        grid-template-areas:
            "searcher button"
            "buttons buttons";
        grid-template-columns: 1fr 168px;
        padding: 0 32px;
        margin-bottom: 20px;
    }

    /* PLANTILLA MAIN */

    /* PLANTILLA ADD-EDIT */
    .viewing:not(.no-skeleton) .title-wh-actions {
        margin-bottom: var(--spacing-space-7);
    }

    .viewing .info-skeleton {
        width: 100%;
    }

    /* PLANTILLA ADD-EDIT */

    /* PLANTILLA TRACE */
    .view-trace-skeleton .traceability-skeleton .container-skeleton,
    .traceability .traceability-skeleton .container-skeleton {
        margin-left: 38px;
    }

    .view-trace-skeleton .searcher {
        max-width: -webkit-fill-available;
    }

    /* PLANTILLA TRACE */
}

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

    /* PLANTILLA MAIN */
    .header-table-skeleton {
        grid-template-columns: 1fr 40px;
        padding: 0 20px;
        margin-bottom: 20px;
    }

    .section-info.only-mobile {
        display: unset !important;
    }

    /* PLANTILLA MAIN */

    .main-content.traceability-skeleton .apply-skeleton-trace{
        padding-right: var(--spacing-space-6);
    }

    .view-trace-skeleton .comp-search-table.searcher {
        margin-left: var(--spacing-space-6);
        margin-right: var(--spacing-space-6);
    }

    .view-trace-skeleton .traceability-skeleton .container-skeleton,
    .traceability .traceability-skeleton .container-skeleton {
        margin-left: 26px;
    }
}

/* SKELETON PLANTILLAS */