#modal-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 5050;
	display: none;
}

#preloader-content {
	background-color: #fff;
	padding: 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

[data-theme=dark] #preloader-content {
	background-color: #333;
}

[data-theme=dark] #preloader-content .modal-body{
	color: #FFF;
}

.cursor-pointer {
    cursor: pointer;
}
.cursor-move {
    cursor: move;
}

.sortable-ghost {
	opacity: 0.7;
	background: #f8f9fa;
	border: 2px dashed #0d6efd;
}

.sortable-drag {
	cursor: grabbing;
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15)!important;
}




.was-validated .no-validation-style:valid, .no-validation-style.is-valid{
    border-color: var(--bs-border-color); /* Restablece el color del borde */
    background-image: none; /* Elimina el ícono de verificación */
    padding-right: var(--bs-form-control-padding-x); /* Restablece el padding-right */
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: inherit !important;
}
/* También necesitamos ocultar el texto de validación exitosa */
.no-validation-style ~ .valid-feedback {
    display: none;
}

.notification-menu p{
    line-height: 18px !important;
}



/* ========================================================================= */
/* CSS COMPLETO para paginación de jQuery DataTables */
/* ========================================================================= */
/* Ajustes específicos para los iconos de Anterior y Siguiente si se muestran */
.dt-layout-start{
	padding: 15px 0 25px 40px;
}
.dt-layout-end{
	padding: 15px 40px 25px 0;
}

.dt-info{
	font-size: 12px !important;
	font-weight: 500px !important;
}
.dt-scroll-body.dt-overflow-visible{ overflow: visible !important; }
table.dataTable th.dt-type-numeric div.dt-column-header{
    flex-direction: row !important;
}

/* Estilo de Cebra para el Tema Claro (por defecto) */
/* Un blanco muy suave y un blanco ligeramente roto */
.table.dataTable tbody tr:nth-child(odd) {
    background-color: #ffffff; /* Un gris muy, muy claro (como bg-light de Bootstrap, pero más sutil) */
}

.table.dataTable tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* Blanco puro */
}

/* Estilo de Cebra para el Tema Oscuro */
/* Tonos de gris muy oscuros para mantener la sobriedad */
body[data-theme="dark"] .table.dataTable tbody tr:nth-child(odd) {
    background-color: #2c2c2c; /* Un gris oscuro, ligeramente más claro */
}

body[data-theme="dark"] .table.dataTable tbody tr:nth-child(even) {
    background-color: #222222; /* Un gris oscuro más profundo, casi negro */
}

/* Asegura que el color de texto sea claro en el tema oscuro para contraste */
body[data-theme="dark"] .table.dataTable tbody tr {
    color: #e9ecef; /* Un gris muy claro para el texto */
}

/* Opcional: Para el color de texto en el tema claro si no lo tienes ya definido */
.table.dataTable tbody tr {
    color: #212529; /* Negro muy oscuro para el texto en el tema claro */
}

.select2-results .select2-option-level-0 {
    font-weight: bold; /* Categorías principales en negrita */
}
.select2-results .select2-option-level-1 {
    padding-left: 20px !important; /* Indentar subcategorías */
}
.select2-results .select2-option-level-2 {
    padding-left: 40px !important; /* Indentar sub-subcategorías */
}
.was-validated .form-control:invalid + .select2 .select2-selection{
    border-color: #dc3545!important;
}
.was-validated .form-control:valid + .select2 .select2-selection{
    border-color: #28a745!important;
}
*:focus{
  outline:0px;
}



.search-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background: linear-gradient(180deg, rgba(238,241,245,.85), #fff);
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}

.search-banner-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.search-banner-right{ display:flex; align-items:center; gap:8px; }

.search-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-weight:900;
  font-size:13px;
  max-width: 100%;
}

.search-pill-label{ opacity:.85; font-weight:800; }
.search-pill-query{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 520px;
}

.search-muted{ color: rgba(0,0,0,.55); font-size:12px; font-weight:700; }
.search-btn{ border-radius:12px; font-weight:800; }

@media (max-width: 768px){
  .search-muted{ display:none; }
  .search-pill-query{ max-width: 220px; }
}






/* Ajustes para el borde del Select2 dentro de un input-group */

/* 1. Resetear el border-radius del lado izquierdo del Select2 */
.input-group .select2-container--default .select2-selection--single {
    /* Mantén tus estilos de altura y padding aquí */
    height: auto;
    padding: 14px 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    border: var(--bs-border-width) solid var(--bs-border-color);
    /* **NUEVO**: Eliminar el border-radius en la esquina superior e inferior izquierda */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    /* Asegurar que el borde izquierdo no tenga un color duplicado si el botón lo tiene */
    /* Puedes probar con border-left: none; si lo anterior no es suficiente, pero con border-radius a 0 suele bastar. */
}

/* 2. Asegurarse de que el borde derecho del botón esté presente y el Select2 se una a él */
/* Esto es más una confirmación del comportamiento de Bootstrap, no un cambio directo. */
/* El botón debe tener rounded-end-0 o no tener rounded-start-0 para fusionarse correctamente */
/* Tu botón ya tiene `btn btn-outline-secondary` que se encargará de su propio borde */

/* 3. Ajuste de ancho para Select2 cuando está dentro de un input-group */
.input-group .select2-container--default {
    width: calc(100% - 38px) !important;
}

/* 4. Ajustes para que Select2 coincida con la altura de form-select de Bootstrap */
.select2-container--default .select2-selection--single {
    height: auto;
    padding: 14px 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    display: flex;
    align-items: center;
    right: 0.75rem;
    width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: -3px;
}

/* --- Select2 Dark Theme Adjustments (Globales, ya que Select2 se renderiza fuera de tu div) --- */
/* Estas reglas deben ser más generales o se aplicarán a cualquier Select2 en la página */

body[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: #2c3136; /* Fondo del campo de selección de Select2 */
    border-color: #555c63; /* Borde del campo de selección */
    color: #e0e0e0; /* Color del texto seleccionado */
}

body[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e0e0e0; /* Color del texto del valor seleccionado */
}

body[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: #e0e0e0; /* Color de la flecha del dropdown */
}

/* Estilos para el dropdown (cuando se abre Select2) */
body[data-theme="dark"] .select2-container--default .select2-dropdown {
    background-color: #2c3136; /* Fondo del menú desplegable */
    border-color: #555c63; /* Borde del menú desplegable */
}

/* Estilos para el campo de búsqueda dentro del dropdown */
body[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: #3b4249; /* Fondo del input de búsqueda */
    border-color: #555c63; /* Borde del input de búsqueda */
    color: #e0e0e0; /* Color del texto en el input de búsqueda */
}
body[data-theme="dark"] .select2-search--dropdown .select2-search__field::placeholder {
    color: #a0a8b1; /* Placeholder del input de búsqueda */
}


/* Estilos para las opciones de resultado */
body[data-theme="dark"] .select2-container--default .select2-results__option {
    color: #e0e0e0; /* Color del texto de las opciones */
}

/* Estilos para la opción resaltada (hover o navegación con teclado) */
body[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #8a2be2; /* Color de fondo cuando se resalta una opción */
    color: #ffffff; /* Color del texto cuando se resalta */
}

/* Estilos para la opción seleccionada (si ya está marcada) */
body[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #495057; /* Fondo de la opción ya seleccionada */
    color: #e0e0e0; /* Color del texto de la opción ya seleccionada */
}

/* Para el caso de Select2 múltiple (si lo usas en el futuro) */
body[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #2c3136;
    border-color: #555c63;
}
body[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #5d666e;
    border-color: #787f87;
    color: #e0e0e0;
}
body[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #e0e0e0;
}
body[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #dc3545;
}


/* --- Estilos para pantallas grandes (desktop/laptop) --- */
/*
  Las clases de Bootstrap ya manejan la disposición en escritorio.
  Estos estilos son para asegurar el tamaño deseado en desktop.
*/
/* --- Media Query para pantallas pequeñas (móviles) --- */
@media (max-width: 767.98px) { /* Bootstrap's 'md' breakpoint es 768px */

    /* Contenedor principal de la fila: ahora apila verticalmente las dos columnas */
    .row.mt-2.justify-content-between {
        flex-direction: column; /* Apila las dos columnas (crear y exportar) */
        align-items: center; /* Centra horizontalmente ambas columnas */
        /* Eliminamos el margin-bottom aquí si lo tenías, ya que las columnas tendrán sus propios margins */
    }

    /* Columna del botón "Crear": ocupa casi todo el ancho y se centra */
    .dt-layout-start.col-md-auto.me-auto {
        width: 90%; /* Ocupa la mayor parte del ancho */
        max-width: 350px; /* Ancho máximo para que no se estire demasiado en tablets grandes */
        margin-right: auto !important; /* Anula el me-auto de Bootstrap para centrar */
        margin-left: auto !important; /* Asegura el centrado */
        margin-bottom: 20px; /* Espacio debajo del botón de crear para separarlo */
        /* Aseguramos que el contenido dentro de esta columna también se centre si es un bloque */
        display: flex; /* Usamos flexbox para centrar el botón dentro de su columna */
        justify-content: center; /* Centra horizontalmente el botón */
        align-items: center; /* Centra verticalmente si el botón fuera más pequeño que el contenedor */
        padding: 15px 0 0;
    }

    /* Botón "Crear producto genérico": hazlo grande y de ancho completo dentro de su contenedor */
    .btn-add {
        width: 100%; /* Ocupa el 100% del ancho de su contenedor .dt-layout-start */
        font-size: 18px; /* Hazlo más grande */
        padding: 15px 0; /* Aumenta el padding vertical para hacerlo más alto */
        display: block; /* Asegura que sea un bloque para que width: 100% funcione */
    }

    /* Columna de los botones de exportación: centra el grupo horizontalmente */
    .dt-layout-end.col-md-auto.ms-auto {
        width: 90%; /* Ocupa la mayor parte del ancho */
        max-width: 350px; /* Ancho máximo */
        margin-left: auto !important; /* Anula el ms-auto de Bootstrap para centrar */
        margin-right: auto !important; /* Asegura el centrado */
        margin-bottom: 20px; /* Espacio después de los botones de exportación */
        /* Aseguramos que el contenido (el grupo de botones) dentro de esta columna también se centre */
        display: flex; /* Hacemos que esta columna use flexbox */
        justify-content: center; /* Centra horizontalmente el .dt-buttons */
        align-items: center; /* Centra verticalmente el .dt-buttons */
    }

    /* Grupo de botones de exportación: Mantiene la fila y centra sus elementos */
    /* Ya tienen display: flex por btn-group de Bootstrap, solo necesitamos centrar */
    .dt-buttons.btn-group {
        /* No uses flex-direction: column aquí */
        /* justify-content: center;  Esto ya lo hace el padre .dt-layout-end. */
        /* gap: 5px; Si quieres un poco más de espacio entre ellos en móvil */
        flex-wrap: wrap; /* Permitir que los botones de exportación pasen a la siguiente línea si no caben en una pantalla muy pequeña */
    }

    /* Botones de exportación individuales: ajustar tamaño, no cambiarlos a 100% de ancho */
    .dt-buttons .btn {
        /* Mantienen el tamaño definido en desktop o lo ajustas si quieres un poco más grandes */
        font-size: 14px; /* Mantener el tamaño original o un poco más grande */
        padding: 8px 15px; /* Mantener el padding original o ajustar */
        /* No uses width: 100% ni display: block aquí */
    }
}



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

/* Firefox */
input[type=number][step="0.01"],
input[type=number][step="0.1"] { -moz-appearance: textfield; }

/* Poner Select2 "dentro" del input-group como un form-control */
.input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;   /* truco de Bootstrap para que crezca bien */
}






















  /* --- Clases para alinear los checkboxes horizontalmente dentro de .checkbox-wrapper-33 --- */

/* Por defecto: distribuye el espacio uniformemente entre los elementos (como justify-content-between) */
/* Si solo tienes dos elementos, este los pegará a los extremos. Si tienes más, los espaciará. */
.checkbox-wrapper-33.align-space-between {
    justify-content: space-between;
    gap: initial; /* Asegura que no haya un 'gap' fijo si estás usando space-between */
}

/* Alineación al inicio (izquierda) con un espacio fijo entre ellos */
.checkbox-wrapper-33.align-start-gap {
    justify-content: flex-start;
    gap: 1.5em; /* Puedes ajustar este valor si quieres un espacio diferente */
}

/* Alineación al centro con un espacio fijo entre ellos */
.checkbox-wrapper-33.align-center-gap {
    justify-content: center;
    gap: 1.5em; /* Puedes ajustar este valor */
}

/* Alineación al final (derecha) con un espacio fijo entre ellos */
.checkbox-wrapper-33.align-end-gap {
    justify-content: flex-end;
    gap: 1.5em; /* Puedes ajustar este valor */
}

/* --- Fin de las clases de alineación --- */

/* El resto del CSS de .checkbox-wrapper-33 y sus hijos */
/* (Asegúrate de que la definición base de .checkbox-wrapper-33 tenga 'display: flex' y 'flex-wrap: wrap') */

.checkbox-wrapper-33 {
    --s-xsmall: 0.625em;
    --s-small: 1.2em;
    --border-width: 1px;
    --c-primary: #5F11E8;
    --c-primary-20-percent-opacity: rgb(95 17 232 / 20%);
    --c-primary-10-percent-opacity: rgb(95 17 232 / 10%);
    --t-base: 0.4s;
    --t-fast: 0.2s;
    --e-in: ease-in;
    --e-out: cubic-bezier(.11,.29,.18,.98);

    /* BASE FLEXBOX - ¡IMPORTANTE! */
    display: flex; /* DEBE ESTAR SIEMPRE AQUÍ */
    flex-wrap: wrap; /* DEBE ESTAR SIEMPRE AQUÍ */
    /* Por defecto, si no se usa ninguna de las clases de alineación, se puede definir un comportamiento base aquí.
       Por ejemplo, un justify-content: flex-start; o un gap.
       Para este ejemplo, las clases de alineación sobrescribirán cualquier 'justify-content' o 'gap' base. */
}

.checkbox-wrapper-33 .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.checkbox-wrapper-33 .checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0 !important;
}

.checkbox-wrapper-33 .checkbox + .checkbox {
    margin-top: 0 !important;
}

.checkbox-wrapper-33 .checkbox__symbol {
    display: inline-block;
    display: flex;
    margin-right: calc(var(--s-small) * 0.7);
    border: var(--border-width) solid var(--c-primary);
    position: relative;
    border-radius: 0.1em;
    width: 1.5em;
    height: 1.5em;
    transition: box-shadow var(--t-base) var(--e-out), background-color var(--t-base);
    box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);
}

.checkbox-wrapper-33 .checkbox__symbol:after {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 0.25em;
    height: 0.25em;
    background-color: var(--c-primary-20-percent-opacity);
    opacity: 0;
    border-radius: 3em;
    transform: scale(1);
    transform-origin: 50% 50%;
}

.checkbox-wrapper-33 .checkbox .icon-checkbox {
    width: 1em;
    height: 1em;
    margin: auto;
    fill: none;
    stroke-width: 3;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    color: var(--c-primary);
    display: inline-block;
}

.checkbox-wrapper-33 .checkbox .icon-checkbox path {
    transition: stroke-dashoffset var(--t-fast) var(--e-in);
    stroke-dasharray: 30px, 31px;
    stroke-dashoffset: 31px;
}

.checkbox-wrapper-33 .checkbox__textwrapper {
    margin: 0;
}

.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol:after {
    -webkit-animation: ripple-33 1.5s var(--e-out);
    animation: ripple-33 1.5s var(--e-out);
}

.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol .icon-checkbox path {
    transition: stroke-dashoffset var(--t-base) var(--e-out);
    stroke-dashoffset: 0px;
}

.checkbox-wrapper-33 .checkbox__trigger:focus + .checkbox__symbol {
    box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity);
}

@-webkit-keyframes ripple-33 {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: scale(20);
    }
}

@keyframes ripple-33 {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: scale(20);
    }
}

/* --- CSS para la animación de "sacudida" del offcanvas --- */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.offcanvas.shake {
    animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}