.theme-dark {
        --tblr-body-bg: #1B1D26;
        --tblr-card-bg: #1e293b;
        --tblr-border-color: #2c3c56;
        --tblr-border-color-light: #253249;
        color: #fafbfc;
        background-color: var(--tblr-body-bg);
    }


    .theme-dark .alert:not(.alert-important), 
    .theme-dark .card, 
    .theme-dark .card-footer, 
    .theme-dark .card-stacked::after, 
    .theme-dark .dropdown-menu, 
    .theme-dark .footer:not(.footer-transparent), 
    .theme-dark .modal-content, 
    .theme-dark .modal-header,
    .theme-dark .modal-body,
    .theme-dark .navbar,
    .theme-dark .example {
        background-color: #262A36;
    }

    .theme-dark .tox .tox-menubar,
    .theme-dark .tox:not(.tox-tinymce-inline) .tox-editor-header,
    .theme-dark .tox .tox-toolbar-overlord,
    .theme-dark .tox .tox-toolbar__primary {
        background-color: #262A36!important;
    }
    
    .theme-dark .modal-backdrop {
        background-color: #000;
    }
    .theme-dark .modal-backdrop.show {
        opacity: .4;
    }

    .theme-dark #content-data-list .bg-white,
    .theme-dark .table-responsive .bg-white {
        background-color: #262a36 !important;
    }

    .theme-dark .text-muted,
    .theme-dark .breadcrumb a {
        color:#c6cbd5 !important;
    }
 
    .theme-dark .resizer {
        border-right: 1px solid #303440;
    }

    .theme-dark #content-head {
        background-color: #262A36;
        border-bottom: 1px solid #303440;
    }
    
    .theme-dark .bg-white,
    .theme-dark .background-kanban,
    .theme-dark .empty {
        background-color: var(--tblr-body-bg)!important;
    }
    .theme-dark #resizeMe > thead > tr > th {
        background:var(--tblr-body-bg)!important;
        color: white!important;
    }
    .theme-dark #productos-detalles > thead > tr > th, 
    .theme-dark #detalles-cuotas > thead > tr > th,
    .theme-dark #tabla-detalle-series > thead > tr > th,
    .theme-dark #ventas-cuotas > thead > tr > th {
        background:var(--tblr-body-bg)!important;
        color: white !important;
    }
    .buscador-en-tabla {
        position: sticky;
        top: 0px;
        z-index: 9;
        background: var(--tblr-body-bg) !important;
    }
    .theme-dark .nav-link.active {
        background:var(--tblr-body-bg)!important;
        color: white!important;
    }
    .theme-dark .nav-link:hover {
        color: teal!important;
    }

    .theme-dark .btn-light {
        background:transparent !important;
        color: white !important;
    }

    .theme-dark .btn-light:hover{
        background:transparent !important;
        color: white!important;    
    }
    .theme-dark .toast {
        background: transparent!important;
    }

    .theme-dark .form-check-input:not(:checked), 
    .theme-dark .form-control, 
    .theme-dark .form-file-text, 
    .theme-dark .form-imagecheck-figure::before, 
    .theme-dark .form-select, 
    .theme-dark .form-selectgroup-check, 
    .theme-dark .form-selectgroup-label,
    .theme-dark .custom-select {
        background-color: #262a36;
        border-color: #ccc;
    }
    .theme-dark .form-check-input:checked{
        background-color: teal;
    }
    .theme-dark .form-control::file-selector-button,
    .theme-dark select option {
        background-color:#262A36;
    }

    .theme-dark .form-control:hover::file-selector-button{
        background-color:#272F46!important;
    }

    .theme-dark .custom-select {
        color: #fafbfc;
    }

    .theme-dark .form-control:focus,
    .theme-dark .tagContainer:focus-within {
        color: inherit;
        border-color: #00806E;
        outline: 0;
    }

    .tagContainer:focus-within {
        color: inherit;
        border-color: #90b5e2;
    }

    .theme-dark .card-body+.card-body {
        border-top: 1px solid #303440;
    }

    .theme-dark .steps-green .step-item::after, .theme-dark .steps-green .step-item::before {
        background-color: teal;
    } 

    .steps-counter .step-item.active ~ .step-item::before {
        background: #f3f5f5 ;
    }
    
    .theme-dark .steps-green .step-item.active::before {
        color: inherit;
        border-color: teal;
    }

    .step-item.active ~ .step-item::after, .step-item.active ~ .step-item::before {
        background: #f3f5f5;
    }
    
    .theme-dark .modal-blur {
        backdrop-filter: none;
        background: #00000070;
    }

    .navbar {
        min-height: auto;
    }

    .nav.nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto; /* Permite desplazamiento horizontal */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Para una mejor experiencia en dispositivos táctiles */
        padding-right: 15px; /* Ajusta este valor según sea necesario */
        box-sizing: content-box; /* Asegura que el padding no afecte el tamaño total del contenedor */
    }
    
    .nav.nav-tabs > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    }
    
    .form-group {
        min-height: calc(2.25rem + 2px);
    }

    @media not print {
        .theme-dark .card {
            border: 1px solid rgba(98,105,118,.16);
            border-top-color: rgba(98, 105, 118, 0.16);
            border-right-color: rgba(98, 105, 118, 0.16);
            border-bottom-color: rgba(98, 105, 118, 0.16);
            border-left-color: rgba(98, 105, 118, 0.16);
        }
    }

    .without-steps .step-item::after, .without-steps .step-item::before {
        background: #c4c4c4;
    }

    @media print {
        .page{
            overflow: visible!important;
            height: 100%!important;
            padding-bottom: 20px;
        }
        .overflow-auto {
            overflow: inherit!important;
        }
        body {
            background: #fff;
        }

        @page {
            size: 210mm 297mm;
            margin: 0mm 0mm 0mm 0mm;
            orphans: 0;
            widows: 0;
        }
        
        .card{
            box-shadow: none;
        }

        #contabilidad, body {
            font-size: 10px!important;
        }

        .icon {
            display: none;
        }
        .table>:not(caption)>*>* {
            padding:0px;
        }

    }

    .modal-content, .modal-body {
        background-color: white;
    }

    .tox-promotion { /*Quitar publicidad de Tinymice*/
        display: none!important;
        visibility: hidden;
    } 

    
    
    #adjunto {
        border:2px solid #eee;
    }


    .theme-dark .tox-tinymce,
    .theme-dark #adjunto {
        border: 1px solid #eee!important;
    }

    .tab-content .tox-tinymce {
        border: 1px!important;
        border-radius: 0px!important;
    }

    
    #log-hidden > .tox-tinymce {
        height:60px;
    }

    .navbar-dark {
        background: #46b29d;
    }

    .navbar-light {
        background: #46b29d;
    }

    .navbar .navbar-nav .nav-link {
        color: #ffffffd9!important;
    }

    .navbar-expand-md .navbar-light .nav-item.active::after, .navbar-expand-md.navbar-light .nav-item.active::after {
        content: "";
        /* position: absolute; */
        left: 0;
        right: 0;
        bottom: -.25rem;
        border: 0 solid beige;
            border-bottom-width: 0px;
        border-bottom-width: 3px;
    }

    .navbar .navbar-nav .nav-link.show {
        color: #ffffffd9;
    }
    .navbar .navbar-nav .nav-link:hover{
        color: white;
    }
    .navbar .navbar-nav .active > .nav-link{
        color: white;
    }

    .content-section {
        display: contents;
    }

    #content-data-edit {
        overflow: auto;
        /* Aqui vamos a probar si no se rompe en dispositivos mobiles */
        display: flex;
        flex-direction: column;
        height: 100%;
        /* Fin de prueba */
    }

    #content-data-list {
        flex: 1 1 100%; 
        position: relative; 
        overflow: auto;
    }

    #content-data-kanban {
        flex: 1 1 100%; 
        position: relative; 
        overflow: auto;
        padding: 8px;
        overflow-x: hidden!important;
    }

    #content-head {
        background: white;
        border-bottom: 1px solid #C9CCD2;
        padding: 10px;
    }
    
    /*Esto posiciona el encabezado de las tablas de manera fija para aplicar scroll */
    .card-table thead {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .kanban-header-sticky {
        z-index:9;
        background-color:var(--tblr-body-bg);
    }
    
    .kanban-hover {
        background-color: #e6f2f3 !important;
        box-shadow: -1px 0px 0px 0px #0080802e inset, 1px 0px 0px 0px #0080802e inset;
        min-height: calc(100dvh - 158px);
    }
    
    .kanban-hover > .kanban-header-sticky {
        background-color: #e6f2f3 !important;
    }

    .theme-dark .kanban-hover {
        background-color: #17373b !important;
        box-shadow: -1px 0px 0px 0px #02c7b5 inset, 1px 0px 0px 0px #02c7b5 inset;
    }

    .theme-dark .kanban-hover > .kanban-header-sticky {
        background-color: #17373b !important;
    }
    
    .kanban-hover-red {
        background-color: #f7f1f3!important;
        box-shadow: inset 2px 0 0 #d44c59, inset -2px 0 0 #d44c59;
        min-height: calc(100dvh - 158px);
    }
    .kanban-hover-red > .kanban-header-sticky {
        background-color: #f7f1f3!important;
    }
    .theme-dark .kanban-hover-red {
        background-color: #231e27 !important;
        box-shadow: inset 2px 0 0 #b83232, inset -2px 0 0 #b83232;
    }

    .theme-dark .kanban-hover-red > .kanban-header-sticky {
        background-color: #231e27 !important;
    }

    .kanban-hover-yellow {
        background-color:#f8f5ee!important;
        box-shadow: inset 2px 0 0 #e99d00, inset -2px 0 0 #e99d00;   
        min-height: calc(100dvh - 158px);     
    }
    .kanban-hover-yellow > .kanban-header-sticky {
        background-color:#f8f5ee!important;
    }
    .theme-dark .kanban-hover-yellow {
        background-color: #252324 !important;
        box-shadow: inset 2px 0 0 #e99d00, inset -2px 0 0 #e99d00;
    }

    .theme-dark .kanban-hover-yellow > .kanban-header-sticky {
        background-color: #252324 !important;
    }

    .kanban-hover-green {
        background-color: #eff6f2!important;
        box-shadow: inset 2px 0 0 #28a745, inset -2px 0 0 #28a745;
        min-height: calc(100dvh - 158px);
    }
    .kanban-hover-green > .kanban-header-sticky {
        background-color: #eff6f2!important;
    }
    .theme-dark .kanban-hover-green {
        background-color: #1b2629 !important;
        box-shadow: inset 2px 0 0 #1dc959, inset -2px 0 0 #1dc959;
    }

    .theme-dark .kanban-hover-green > .kanban-header-sticky {
        background-color: #1b2629 !important;
    }


    #resizeMe > thead > tr > th{
            background: white!important;
            color: #091124 !important;
            font-weight: bolder;
            text-transform: capitalize;
            font-size: 0.8rem;   
    }
    #resizeMe > thead > tr {
        box-shadow: rgba(149, 157, 165, 0.69) 0px 1px 3px;
    }
    #resizeMe > tfoot {
        font-weight: bolder;
        /* box-shadow: rgba(149, 157, 165, 0.69) 0px 1px 3px; */
    }

    .list-group-search{
        padding: 10px!important;
    }

    .table th {
        position: relative;
    } 

    .tr-selected {
        background-color: #8080801c;
    }

    tr.fila:hover td{
        --tblr-table-accent-bg: transparent!important;
    }
    .bg-none {
        --tblr-table-accent-bg: transparent!important;
    }
    .bg-none:hover {
        --tblr-table-accent-bg: transparent!important;
    }
    .bg-none > td {
        --tblr-table-accent-bg: transparent!important;
    }

    .table-hover>tbody>tr.no-hover>td:hover {
        --tblr-table-accent-bg: transparent!important;
    }
    
    #productos-detalles > thead, #detalles-cuotas > thead{
        box-shadow: rgba(149, 157, 165, 0.69) 0px 2px 5px;
    }

    #productos-detalles > thead > tr > th, #detalles-cuotas > thead > tr > th{
        background: white;
        color: #091124;
    }

    .columns-dropdown-optional {
        position: absolute;
        top: 0;
        left: auto;
        bottom: auto;
        right: 0;
        z-index:3;
        min-height: 38px;
        background:var(--tblr-body-bg);
    }

    .btn-columns-dropdown {
        padding-left:2px;
        padding-right:2px; 
        border:none;
    }

    .resizer {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        cursor: col-resize;
        user-select: none;
        /* border-right: 1px solid #0000001f; */
        border-right:1px solid #e0e0e0;
    }

    .resizer:hover, .resizing {
        cursor: col-resize;  
    }

    .resizable {
        border: 1px solid gray;
        height: 100px;
        width: 100px;
        position: relative;

    }

    .tbody-resizing{
        opacity: 0.5;
        transition: 500ms;
    }

    .max-length {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    body {
        background:var(--tblr-body-bg) /* #f5f7fb */;
    }

    .page {
        min-height: 100dvh;
    }

    .background-kanban, .empty {
        background:var(--tblr-body-bg) /* #f5f7fb */;
    }

    .page-wrapper .page-header {
        margin: 0px;
    }

    .form-control:disabled, .form-control[readonly],.custom-select:disabled,.custom-select[readonly],.span-disabled {
        background-color: transparent;
        opacity: 1;
        border-color: #d9dbde;
        color:#626976;
    }

    .form-control, .custom-select {
        border-color: #808080a6;
    }

    .list-group-item.select {
        z-index: 2;
        color: #fff;
        background-color: #f0f0f09c;
    }

    .list-group-item-selected {
        background-color: teal;
        width: 10px;
        height: 100%;
        z-index: 10;
        position: absolute;
        right: 0;
        top: 0;
    }

    .list-group-item-button-selected {
        z-index: 10;
        position: absolute;
        right: 0;
        bottom: 0;
        margin-right: 10px;
        margin-bottom: 1rem;
    }

    .form-help {
        position: absolute;
        top: 10px;
        left: -18px;
    }

    .card-header {
        min-height: 59px;
    }

    .btn-primary{
        --tblr-btn-color: #46b29d;
        --tblr-btn-color-interactive: #49a08f;
        --tblr-btn-color-text: #fafbfc;
    }
    .card {
        box-shadow: rgba(30, 41, 59, 0.2) 0 5px 10px 0;
    } 

    .page{
        font-size: 12px;
    }

    .status {
        height: 25px;
    }

    .external-link{
        margin-left: -10px;
        margin-top: auto;
        margin-bottom: auto;
    }

    .border-none {
        border: none;
        text-align: end;
        padding: 5px 0px;
        -webkit-padding-end: 12px;
    }

    .border-width-2 {
        border-bottom-width: 2px;
    }
    .is-invalid {
        background-image: none!important;
    }
    .is-invalid:focus{
        box-shadow: none!important;
    }
    .custom-select.form-control-border, .form-control.form-control-border {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: inherit;
        height: calc(2.25rem + 2px);
        padding-left: 0px;
    }

    .custom-select {
        display: inline-block;
        width: 100%;
        height: calc(2.25rem + 2px);
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        vertical-align: middle;
        background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat;
            border-top-color: rgb(206, 212, 218);
            border-top-style: solid;
            border-top-width: 1px;
            border-right-color: rgb(206, 212, 218);
            border-right-style: solid;
            border-right-width: 1px;
            border-bottom-width: 2px;
            border-left-color: rgb(206, 212, 218);
            border-left-style: solid;
            border-left-width: 1px;
        border-radius: .25rem;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .editable > .custom-select.form-control-border, .editable > .form-control.form-control-border{
        text-align: inherit;
        margin: -.5rem 0px;
        padding: 0px;
    }

    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        margin: 0; 
    }

    input[type=number] { 
        -moz-appearance:textfield; 
        appearance: textfield;
    }

    .filter-select{
        display: inline-flex;
        align-items: center;
        padding: 0px 5px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    
    .list-group > li:focus-visible , .list-group > li:hover, .list-hover{
        background: #46b29d;
        color: white;
        outline: none;
    }

    .body-list-activities {
        width: 450px;
    }

    .form-select {
        color: inherit!important;
    }

    .btn-lite{
        padding: 2px 6px;
    }

    .btn-light {
        color: #46b29d;
    }

    .btn-light:hover{
        color: #49a08f;
    }

    .btn-ajustado {
        height: fit-content;
        padding: 2px 10px 2px 0px;
        font-size: 0.7rem;
        background-color: transparent;
    }

    .btn-ajustado > .icon {
        height: 1.5em; 
        width: auto;
    }

    .btn-sm{
        border-radius: 6px;
    }

    .breadcrumb {
        font-size: 1.5em;
    } 

    .xs-group-kanban{
        min-width:332px; 
        max-width: 332px;
        background-color: var(--tblr-body-bg);
    }

    .xs-group-kanban.collapsed {
        min-width: 4rem;
        width: 4rem;
        border: white;
    }

    .xs-group-kanban.collapsed::before {
        content: "\2194";
        font-size: 2em;
        margin: 0;
        margin-bottom: 0px;
        position: relative;
        left: 30%;
        cursor: pointer;
        top: 10px;
    }

    .uncollapsed::before
    {
        content: "\2190";
        font-size: 1.5em;
        position: absolute;
        cursor: pointer;
        top: -7px;
        left: 30px;
    }

    .xs-group-kanban.collapsed [d-keyproduct], 
    .xs-group-kanban.collapsed .progress,
    .xs-group-kanban.collapsed .icon-tabler-square-plus {
        display: none;
    }

    .xs-group-kanban.collapsed h3 {
        margin: 0;
        margin-bottom: 0px;
        position: relative;
        top: 7rem;
        left: 90%;
        transform: translate(-50%, -50%) rotate(-90deg);
        white-space: nowrap;
        min-width: 10rem;
        text-align: end;
    }

    .xs-group-kanban.collapsed .total {
        margin: 0;
        margin-bottom: 0px;
        position: absolute;
        top: 6rem;
        left: 55%;
        transform: translate(-50%, -50%) rotate(-90deg);
        white-space: nowrap;
        min-width: 10rem;
        text-align: end;
    }

    #content-data-kanban > .mh-100 {
        max-height: none !important;
    }

    @media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio:0) {
        select:focus,
        textarea:focus,
        input:focus {
            font-size: 16px;
        }

        .xs-group-kanban{
            scroll-snap-align: center;
            overflow-y: scroll;
            overflow-x: hidden;
            min-width:90%; 
            max-width: 90%;
            scroll-snap-align: center;
        }

        .o_kanban_record{
            margin-left: -1.7em;
            margin-right: -1.165em;
        } 
        
        .row-pad {
            padding-right: 0px!important;
            padding-left:  0px!important;
        }

        .o_kanban_record > .row > .pb-3{
            padding-bottom: 0px!important;
        }

        .background-kanban{
            padding-top: 0px!important;
            padding-bottom: 0px!important;
        }

        .page {
            /* height: 100%!important; */
            height: auto;
        }
        #content-data-edit {
            overflow-x: hidden!important;
        }
        #content-data-edit > .container-xl {
            padding-right: 0px;
            padding-left: 0px;
            /* overflow-x: hidden!important; */
            flex: 1;
        }
        .body-list-activities {
            width: 100%!important;
            position: fixed;
            left: 0;
            height:100vh;
        }

        #content-data-kanban > .mh-100 {
            max-height: 100%!important;
        }
    }

    @media (max-width: 767.98px){
        .navbar-expand-md .navbar-collapse .dropdown-menu {
            background: #72c8b8;
            color: white;
        }
        .navbar .navbar-toggler {
            color: white;
            border-color: transparent;
        }

    }

    .atajo-hide {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s linear;
        position: absolute;
        right: 4.5%;
        margin-left: 20px;
    }

    .atajo-add>.atajo-text {
        margin-right: 20px;
    }

    .atajo-add>a {
        text-decoration: none;
        color: inherit;
    }

    .atajo-add:hover > .atajo-hide  {
        visibility: visible;
        opacity: 1;
        color: white;
        border-radius: 50%;
        background-color: #46b29d;
    }


    #spinner {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 10000;
        background: rgba(255,255,255,.5);
    }

    #cargandoPos {
        background: var(--tblr-body-bg);
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 100000;
        top: 0;
        left: 0;
    }
    .lds-facebook {
        display: block;
        position: relative;
        width: 80px;
        height: 80px;
        margin: auto;
        margin-top: 20%;
    }
    .lds-facebook div {
        display: inline-block;
        position: absolute;
        left: 8px;
        width: 16px;
        background:#46b29d;
        animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    }
    .lds-facebook div:nth-child(1) {
        left: 8px;
        animation-delay: -0.24s;
    }
    .lds-facebook div:nth-child(2) {
        left: 32px;
        animation-delay: -0.12s;
    }
    .lds-facebook div:nth-child(3) {
        left: 56px;
        animation-delay: 0;
    }
    @keyframes lds-facebook {
        0% {
            top: 8px;
            height: 64px;
        }
        50%, 100% {
            top: 24px;
            height: 32px;
        }
    }

    .tabla-sin-padding td {
        min-height: 40px;
        height: 40px;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .tabla-sin-padding tr:not(:focus-within) input:not([type="checkbox"]),
    .tabla-sin-padding tr:not(:focus-within) select {
        border:none; /* Estilo de borde cuando el tr no tiene el foco */
    }

    #content-data-list td {
        height: 37px;
    }


    .list-group-item-focus{
        background: #80808014;
    }

    .contact-nombre {
        min-width: 350px!important;
        max-width: 350px!important;
        width: 350px!important;
        word-wrap: break-word;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .w-contact {
        width: 300px;
        min-width: 300px;
    }
    .w-comprobante {
        width: 250px;
    }
    .w-fecha {
        width: 150px;
    }
    .w-codigo {
        width: 100px;
    }
    .w-importe {
        width: 170px;
        max-width: 170px;
    }

    .logs-changes {
        font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    }

    .logs-changes > p {
        margin-bottom: 0px!important;
    }

    .avatar > img {
        max-height: 100%;
    }

    .sortable-drag {
        opacity: 1!important;   
        transform: rotate(-3deg);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    .sortable-ghost {
        opacity: 0!important;
    }

    .bg-brown {
        color:#fff;
        background-color:#806248;
    }
    .show-color {
        display: none;
    }

    .show_color_hov:hover .show-color {
        display: block;
    }

    .no-color::before {
        content: "";
        position: absolute;
        top: -2px;
        left: 10px;
        bottom: auto;
        right: auto;
        display: block;
        width: 1px;
        height: 30px;
        transform: rotate(45deg);
        background-color: red;
    }
    
    .ribbon-wrap.ribbon-xl {
        height: 180px;
        width: 180px;
    }
    .ribbon-wrap {
        height: 70px;
        overflow: hidden;
        position: absolute;
        right: -2px;
        top: -2px;
        width: 70px;
        z-index: 10;
        pointer-events: none; /* Permite interactuar con elementos debajo */
    }
    .ribbon-wrap .ribbon::after {
        right: 0;
    }
    .ribbon-wrap .ribbon::after, .ribbon-wrap .ribbon::before {
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 3px solid #9e9e9e;
        bottom: -3px;
        content: "";
        position: absolute;
    }
    .ribbon-wrap .ribbon::before {
        left: 0;
    }

    .ribbon-wrap.ribbon-xl .ribbon {
        right: 4px;
        top: 47px;
        width: 240px;
    }
    .ribbon-wrap .ribbon {
        box-shadow: 0 0 3px rgba(0,0,0,.3);
        font-size: .8rem;
        line-height: 100%;
        padding: .375rem 0;
        position: relative;
        right: -2px;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0,0,0,.4);
        text-transform: uppercase;
        top: 10px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 90px;
    }

    .tagContainer {
        border-bottom: 1px solid #ccc;
        display: flex;
        cursor: text;
        min-height: 38px;
        position: relative;
        border-bottom-width: 2px; /*Esto para igualar a las clases de border-width-2*/
        font-size: .875rem;
    }

    .suggestionsContainer {
        position: absolute;
        top: 100%;
        left: 0;
        width: 90%;
        max-width: 600px;
        background-color: var(--tblr-card-bg);
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: none;
        margin-top: 2px;
        z-index: 11;
    }

    .tag {
        border-radius: 5px;
        padding: 3px 6px;
        margin: 2px;
        cursor: pointer;
    }

    .tag:hover {
        background-color: #e0e0e05c;
    }

    .tag-unique:hover {
        background-color:var(--tblr-card-bg);
    }

    .tag-filter{
        padding: 0!important;
        display: inline-flex;
    }

    .suggestionsContainer .tag {
        border-radius: 0px;
        margin: 0px;
    }

    .selected {
        background-color: #e0e0e05c;
    }

    .tagsWrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
        width: 100%;
    }

    .tagsWrapper .tag {
        border: 1px solid #ccc;
        cursor: default;
    }

    .tagsWrapper .tag-unique {
        border: none!important;
        display: ruby;
        padding: 0;
    }

    .searchInput {
        border: none;
        outline: none;
        padding: 0;
        margin: 0;
        width: auto;
        display: inline-block;
        min-height: 31px;
        margin-left: 5px;
        background: transparent;
        color: inherit;
        align-self: end; 
        flex-grow: 1;
        width: 10px; /*Esto arregla el problema de que haga un salto de linea inesperado*/
    }

    .filterIcon {
        /* Estilos para el icono */
        margin-left: auto; /* Ajusta la posición a la derecha del contenedor */
        align-self: center;
    }
    
    button[data-check=true]::after {
        content: "\2713";
        color: green;
        margin-left: 5px;
    }
    
    button[data-check=false]::after {
        margin-left: 5px;
    }

    .btn-outline-primary {
        --tblr-btn-color: #46b29d;
    }

    .oi-close::before {
        content: '\00d7';
        font-family: sans-serif;
        font-weight: bold;
    }
    .o_facet_remove {
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
    .o_facet_remove:hover {
        color: red;
    } 

    .tag-unique .oi-close::before {
        content: '\270E';
        font-family: sans-serif;
        font-weight: bold;
        transform: rotateY(180deg);
        color: teal;
    }

    .alerta-notificacion {
        background-color:rgb(255, 238, 204); 
        color:rgb(142, 90, 0);
    }

    .theme-dark .alerta-notificacion {
        background-color: #572b2b;
        color:aliceblue;
    }

    .email-enviado::after {
        content: '\2709';
        font-family: sans-serif;
        transform: rotateY(180deg);
        color: teal;
        font-size: 18px;
        vertical-align: middle;
        margin-left: 5px;
    }

    :root {
        --tblr-bg-surface:var(--tblr-white);
        --tblr-bg-surface-secondary:var(--tblr-gray-100);
        --tblr-bg-surface-tertiary:var(--tblr-gray-50);
        --tblr-bg-surface-dark:var(--tblr-dark);
        --tblr-bg-forms:var(--tblr-bg-surface);
        /* --tblr-primary-lt:#e9f0f9; */
        --tblr-primary-lt:#d9fdd3;
        --tblr-primary-lt-rgb:233,240,249;
    }
    .chat-bubbles {
        display:flex;
        flex-direction:column;
        gap:1rem
    }
    .chat-bubble {
        background:var(--tblr-bg-surface-secondary);
        border-radius:8px;
        padding:10px;
        position:relative
    }
    .chat-bubble-me {
        background-color:var(--tblr-primary-lt);
        box-shadow:none
    }
    .chat-bubble-title {
        margin-bottom:.25rem
    }
    .chat-bubble-author {
        font-weight:600
    }
    .chat-bubble-date {
        color:var(--tblr-secondary)
    }
    .chat-bubble-body>:last-child {
        margin-bottom:0
    }
    .reply-action{
        position:absolute;
        top: 7px;
        right: 7px;
        display:inline-flex; 
        align-items:center; 
        justify-content:center;
        padding:.25rem .4rem; font-size:.8rem; line-height:1;
        border-radius:.5rem; border:1px solid rgba(0,0,0,.08);
        cursor:pointer;
        opacity:0; pointer-events:none; transform:translateY(-2px);
        transition:opacity .15s ease, transform .15s ease, background .15s ease;
    }
    .chat-bubble:hover .reply-action,
    .chat-bubble:focus-within .reply-action{
        opacity:1; pointer-events:auto; transform:translateY(0);
    }
    .reply-action:hover{ 
        background: gray;
        color: white;
    }


    .wa-chat {
        background-image: url('../static/bg-chat-tile-dark.png');
        background-color:#efeae230;
        position: relative;
    }

    .theme-dark .wa-chat {
        background-image: linear-gradient(rgba(0, 0, 0, 0.88), rgba(17, 17, 15, 0.77)), url('../static/bg-chat-tile-dark.png');
        background-color: #000;
        position: relative;
    }

    .theme-dark .chat-bubble {
        background: #2e3f51 !important;
    }

    .theme-dark .chat-bubble-me {
        background-color: #005c4b!important;
        box-shadow: none;
    }

    .chat-canales {
        width: 100%;
        padding: 5px;
        border-radius: 10px;
    }

    .chat-canales:hover {
        background-color: rgba(32,107,196,.06);
    }

    code { /*Estilo para el whatsapp*/
        background-color: #f0f0f0;
        font-family: monospace;
        padding: 2px 4px;
        border-radius: 4px;
    }


    .resizable-chat {
        transition: all 0.3s ease;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #fff;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0,0,0,0.15);
    }

    .chat-normal {
        width: 350px;
        height: 350px;
    }

    .chat-expandido {
        width: 600px;
        height: 700px;
    }

    .chat-minimizado {
        height: 59px !important;
        overflow: hidden;
    }

    .resaltar-chat-respondido-temp {
        background-color: #acfb9f !important;
        transition: background-color 0.5s ease;
    }

    .theme-dark .resaltar-chat-respondido-temp {
        background-color: #02a688 !important;
        transition: background-color 0.5s ease;
    }

    .sticky-date {
        position: sticky;
        top: 0;
        z-index: 10;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .mini-chat-wrapper {
        position: fixed;
        bottom: 5px;
        right: 20px;
        display: flex;
        flex-direction: row-reverse;
        gap: 10px;
        z-index: 9999;
        padding: 0 10px;

        /* 💡 Agregá esto: */
        pointer-events: none;
    }

    .mini-chat-wrapper > * {
        pointer-events: auto;
    }

    .theme-dark .chat-canales:hover {
        background: #ffffff2b;
    }

    #qr {
        height: 280px;
        width: auto;
        max-width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #qr img {
        max-height: 100%;
        max-width: 100%;
        height: auto;
        width: auto;
    }

    .seccion-conversaciones {
        height: calc(100dvh - 130px);
    }

    @keyframes spin360 { 
        to { 
            transform: rotate(360deg);
        }
    }

    .send-spinner{
        width: 20px; height: 20px;
        border: 2px solid currentColor;
        border-right-color: transparent;   /* “hueco” */
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        animation: spin360 .75s linear infinite;
    }

    a[data-sending="1"] {
        pointer-events: none;
        opacity: .85; /* evita nuevos clics */
    }

    @media (max-width: 768px) {
        .wa-chat {
            padding-bottom: 105px;
        }
        .chat-bubble {
            padding: 5px 8px;
        }
        .chat-expandido {
            width: 100%;
            height: 100%;
        }
        .mini-chat-wrapper {
            right: 0px;
        }
        /* Ocultar el autor en mensajes recibidos */
        .chat-bubble:not(.chat-bubble-me) .chat-bubble-author {
            display: none;
        }

        /* Mostrar el autor en tus propios mensajes (si querés mostrarlo) */
        .chat-bubble-me .chat-bubble-author {
            font-size: 0.8em;
            display: block; /* Asegura que se vea */
        }
    }
    .theme-dark .slash-item {
        color: #fafbfc;
    }
    .slash-menu{
        position:fixed;
        z-index:99999;
        max-height:260px;
        overflow:auto;
        background-color: var(--tblr-card-bg);
        border:1px solid #e5e7eb;
        border-radius:.5rem;
        box-shadow:0 10px 20px rgba(0,0,0,.08)
    }
    .slash-item{
        display:block;
        width:100%;
        text-align:left;
        padding:.5rem .75rem;
        border:0;
        background-color: var(--tblr-card-bg);
        cursor:pointer
    }
    .slash-item.active,.slash-item:hover{
        background-color: #e0e0e05c;
    }
    .slash-item .t{
        font-size:.85rem;
        font-weight:600
    }
    .slash-item .d{
        font-size:.75rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis
    }