.map{
    width: 100%;
    height: 450px;
}

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

table.dataTable th.dt-type-numeric div.dt-column-header{
    flex-direction: row !important;
}

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

.icon-badge {
    position: absolute;
    top: -8px;
    right: -5px;
    font-size: 0.65rem !important; /* Tamaño de fuente del número */
    padding: 0.2em 0.4em; /* Relleno */
}

.wh-40.administrator{
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
}

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


.dropzone {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fafafa;
	border: 2px dashed rgba(var(--bs-primary-rgb));
	cursor: pointer;
	transition: all 0.3s ease;
}
.dropzone.dz-started .dz-message {
	display: none;
}
.dropzone .dz-preview {
	margin: 10px;
	position: relative;
}
.dropzone .dz-preview img {
	width: 100%;
	border-radius: 0.5rem;
}


/* Para el offcanvas backdrop */
.offcanvas-backdrop.show {
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}


/* Tu archivo CSS */

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

/* 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 */
}


  /* --- 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;
}


/* ========================================================================= */
/* 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;
}

/* TABS */
/* Estilos para las pestañas modernas */
.modern-tabs {
    /* Fondo sutil para la barra de pestañas */
    background-color: var(--bs-light); /* O un color más personalizado */
    padding: 0.5rem;
    border-radius: 0.75rem; /* Bordes redondeados para la barra */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra suave */
    flex-wrap: nowrap; /* Evita que las pestañas se envuelvan en varias líneas */
    overflow-x: auto; /* Permite desplazamiento horizontal si hay muchas pestañas */
    -webkit-overflow-scrolling: touch; /* Suaviza el desplazamiento en móviles */
    scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
}

/* Ocultar la barra de desplazamiento en WebKit (Chrome, Safari) */
.modern-tabs::-webkit-scrollbar {
    display: none;
}

.modern-tabs .nav-item {
    margin-right: 0.5rem; /* Espacio entre pestañas */
}

.modern-tabs .nav-item:last-child {
    margin-right: 0;
}

.modern-tabs .nav-link {
    font-weight: 600; /* Texto más prominente */
    padding: 0.75rem 1.25rem; /* Más padding para una apariencia más grande */
    border-radius: 0.5rem; /* Bordes redondeados para cada pestaña */
    color: var(--bs-secondary-color); /* Color de texto predeterminado */
    transition: all 0.3s ease; /* Transiciones suaves */
    display: flex; /* Para alinear el icono y el texto */
    align-items: center;
    gap: 0.5rem; /* Espacio entre icono y texto */
}

.modern-tabs .nav-link:hover {
    color: var(--bs-primary); /* Color al pasar el ratón */
    background-color: var(--bs-white); /* Fondo blanco al pasar el ratón */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra al pasar el ratón */
}

.modern-tabs .nav-link.active {
    background-color: var(--bs-primary); /* Fondo del color primario de Bootstrap */
    color: var(--bs-white); /* Texto blanco para la pestaña activa */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra más fuerte para la activa */
    border-color: var(--bs-primary); /* Borde del mismo color */
}

/* Estilos específicos para la pestaña dinámica (con botón de cierre) */
.modern-tabs .nav-link.dynamic-tab {
    padding-right: 0.75rem; /* Menos padding a la derecha para el botón de cierre */
}

.modern-tabs .nav-link.dynamic-tab .btn-close {
    font-size: 0.7rem; /* Tamaño más pequeño para el botón de cierre */
    opacity: 0.7;
    transition: opacity 0.2s ease;
    filter: invert(1);
}

.modern-tabs .nav-link.dynamic-tab.active .btn-close {
    filter: invert(1);
}

.modern-tabs .nav-link.dynamic-tab .btn-close:hover {
    opacity: 1;
}

.tab-content .card {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

body[data-theme="dark"] .modern-tabs {
    background-color: var(--bs-dark);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .modern-tabs .nav-link {
    color: var(--bs-secondary-color);
}

body[data-theme="dark"] .modern-tabs .nav-link:hover {
    background-color: var(--bs-gray-800);
    color: var(--bs-primary);
}

body[data-theme="dark"] .modern-tabs .nav-link.active {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

body[data-theme="dark"] .tab-content .card {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color-translucent);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}





/* 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í */
    }
}


.lista-archivos tbody td:first-child,
.lista-archivos tbody td:first-child {
    max-width: 250px; /* Ajusta el ancho máximo de la columna si es necesario */
    min-width: 150px; /* Asegura que la columna no sea demasiado pequeña */
    vertical-align: middle;
    /* QUITAMOS display: block; para que el TD mantenga su comportamiento de table-cell
       y el fondo rayado funcione correctamente. */
    /* box-sizing: border-box; también se puede quitar si no se usa display: block; */
}

/* Estilos para el contenedor flex directo dentro del TD */
.lista-archivos tbody td:first-child .d-flex,
.lista-archivos tbody td:first-child .d-flex {
    width: 100%; /* Asegura que el contenedor flex ocupe todo el ancho disponible del TD */
    /* Las propiedades d-flex y align-items-center ya vienen de Bootstrap */
}

/* Estilos para el contenedor del texto (el div.ms-2) */
.lista-archivos tbody td:first-child .ms-2,
.lista-archivos tbody td:first-child .ms-2 {
    flex-grow: 1; /* Permite que este div ocupe el espacio restante en el flex container */
    min-width: 0; /* IMPRESCINDIBLE: Permite que el elemento se encoja más allá de su contenido intrínseco
                     dentro de un flex container, lo que es necesario para que el overflow funcione. */
    overflow: hidden; /* Oculta el contenido que se desborda de este div */
}

/* Estilos para el H6 que contiene el texto real */
.lista-archivos tbody td:first-child .ms-2 h6.titulo,
.lista-archivos tbody td:first-child .ms-2 h6.titulo {
    white-space: nowrap; /* IMPRESCINDIBLE: Evita que el texto se envuelva */
    overflow: hidden; /* IMPRESCINDIBLE: Oculta el texto que se desborda del h6 */
    text-overflow: ellipsis; /* IMPRESCINDIBLE: Muestra los puntos suspensivos */
    margin-bottom: 0; /* Remueve el margen inferior por defecto de h6 si no lo necesitas */
    line-height: 1.2; /* Ajusta el interlineado si es necesario */
}


/* Opcional: Si quieres que el encabezado también se trunque visualmente */
.lista-archivos thead th:first-child,
.lista-archivos thead th:first-child {
    max-width: 250px; /* Mismo ancho que las celdas del cuerpo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    /* display: block; /* Mantener si el encabezado necesita truncamiento visual y no está en un flex */
    /* box-sizing: border-box; */
}




/* PRODUCTOS FORM */
/* --- SECCIÓN ESPECÍFICA PARA ATRIBUTOS (ENCAPSULADO) --- */

/* Contenedor principal de la sección de atributos */
.form-attribute-section {
    border: 1px solid #dee2e6; /* Borde sutil */
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px; /* Espacio superior para separarlo visualmente */
    background-color: #f8f9fa; /* Fondo ligeramente diferente (Light Theme) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra suave */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* Transición para temas */
}

/* Tarjeta individual de atributo */
.form-attribute-section .attribute-card {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px 15px; /* Padding reducido para ahorrar espacio */
    margin-bottom: 10px; /* Espacio entre atributos reducido */
    background-color: #fff; /* Fondo (Light Theme) */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); /* Sombra más sutil */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* Transición para temas */
}

/* Eliminar margen inferior del último para evitar doble espaciado con el botón */
.form-attribute-section .attribute-card:last-child {
    margin-bottom: 0;
}

/* Estilo para el form-switch (checkbox moderno) */
.form-switch .form-check-input {
    min-width: 2.25em; /* Ancho estándar para switches de Bootstrap */
    height: 1.25em; /* Altura estándar */
    margin-right: 0.5em; /* Espacio a la derecha si no está oculta la leyenda */
    vertical-align: middle;
    cursor: pointer;
}

/* Botón "Agregar Atributo" */
.form-attribute-section + .add-attribute-btn { /* Selecciona el botón inmediatamente después de .form-attribute-section */
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1.2rem;
    font-size: 0.9rem;
    border-radius: 0.5rem; /* Bordes más redondeados */
    font-weight: 500;
}

/* Texto de ayuda/explicación */
.form-attribute-section .text-muted {
    color: #6c757d !important; /* Ajuste de color si el default de Bootstrap no es suficiente */
    font-size: 0.85rem; /* Texto de ayuda ligeramente más pequeño */
}

/* --- DARK THEME ADJUSTMENTS (ENCAPSULADO) --- */

body[data-theme="dark"] .form-attribute-section {
    background-color: #2c3136; /* FONDO DE LA SECCIÓN DE ATRIBUTOS MÁS OSCURO */
    border-color: #40464d;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* Sombra ligeramente más pronunciada */
}

body[data-theme="dark"] .form-attribute-section .attribute-card {
    background-color: #3b4249; /* FONDO DE LAS TARJETAS DE ATRIBUTO MÁS OSCURO */
    border-color: #555c63;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

/* Ajustes para los SELECT normales dentro de la sección de atributos */
body[data-theme="dark"] .form-attribute-section .form-select {
    background-color: #2c3136; /* Fondo del select en dark theme */
    border-color: #555c63;
    color: #e0e0e0; /* Texto del select en dark theme */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Flecha del select invertida */
}

body[data-theme="dark"] .form-attribute-section .form-select option {
    color: #e0e0e0; /* Opciones de select en dark theme */
    background-color: #2c3136; /* Fondo de las opciones en dark theme */
}


/* Ajustes para el switch (checkbox) en dark theme */
body[data-theme="dark"] .form-switch .form-check-input {
    background-color: #5d666e; /* Fondo del switch en dark theme (cuando no está checked) */
    border-color: #787f87; /* Borde del switch */
}
body[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: #8a2be2; /* Color de "encendido" del switch */
    border-color: #8a2be2;
}
.form-check-input.form-switch-lg {
    /* Esto es un ejemplo, puedes ajustar los valores */
    height: 1.5rem; /* Aumenta la altura del control */
    width: 3rem; /* Aumenta el ancho del control */
    transform: scale(1.1); /* Escala todo el control sin afectar la caja */
}
body[data-theme="dark"] .form-attribute-section .text-muted {
    color: #adb5bd !important; /* Texto muted en dark theme */
}

/* Botón "Agregar Atributo" en dark theme */
body[data-theme="dark"] .form-attribute-section + .add-attribute-btn {
    color: #b0b9c3;
    border-color: #b0b9c3;
    background-color: transparent; /* Asegurarse que no tenga un fondo blanco por defecto */
}
body[data-theme="dark"] .form-attribute-section + .add-attribute-btn:hover {
    background-color: #555d65;
    border-color: #555d65;
    color: #fff;
}


input[readonly]{
    color: #bcc2c7 !important;
}




/* Header / Footer pegajosos dentro del modal */
        #modalArchivos .sticky-top { top: 0; z-index: 2; }
        #modalArchivos .sticky-bottom { bottom: 0; z-index: 2; }

        /* ---------- Zona de carga (drop / click) ---------- */
        #modalArchivos .border-dashed { border: 2px dashed var(--bs-border-color); }

        #modalArchivos .dropzone-lite{
        position: relative;
        cursor: pointer;
        border: 2px dashed var(--bs-border-color);
        background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
        transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
        }
        #modalArchivos .dropzone-lite:hover{
        border-color: rgba(var(--bs-primary-rgb), .35);
        background-color: rgba(var(--bs-primary-rgb), .03);
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .075);
        }

        /* Ícono/graphic del área de carga */
        #modalArchivos .dropzone-lite .dz-graphic{
        width: 64px; height: 64px;
        display: grid; place-items: center;
        border-radius: 14px;
        background:
            radial-gradient(75% 75% at 30% 20%, rgba(var(--bs-primary-rgb), .2), transparent 70%),
            rgba(var(--bs-primary-rgb), .08);
        }
        #modalArchivos .dropzone-lite .dz-graphic i{
        font-size: 28px; color: var(--bs-primary);
        }

        /* Hacer toda la zona clickeable (input cubre el contenedor) */
        #modalArchivos .dropzone-lite input[type="file"]{
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        opacity: 0; cursor: pointer;
        }

        /* ---------- Cards / Thumbnails ---------- */
        #modalArchivos .file-card{
        border-radius: 16px; border: 0;
        box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
        transition: transform .15s ease, box-shadow .15s ease;
        }
        #modalArchivos .file-card:hover{
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
        }

        /* Contenedor de miniatura */
        #modalArchivos .file-thumb{
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        overflow: hidden;
        }

        /* Imágenes: cubrir */
        #modalArchivos .file-thumb img{
        width: 100%; height: 100%; object-fit: cover;
        }

        /* No-imágenes: bloque gris con ícono centrado */
        #modalArchivos .file-icon{
        display: flex; align-items: center; justify-content: center;
        color: rgba(0,0,0,.6);
        background:
            radial-gradient(120% 120% at 100% 0%, rgba(0,0,0,.04), transparent 60%),
            linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.06));
        }
        #modalArchivos .file-icon i{
        font-size: clamp(36px, 6vw, 56px); /* grande pero adaptable */
        opacity: .9;
        }

        /* Colores sugeridos por tipo (opcional) */
        #modalArchivos .file-icon.icon-doc i{ color: #1b6ec2; }   /* Word/Docs */
        #modalArchivos .file-icon.icon-video i{ color: #dc3545; } /* Video */
        #modalArchivos .file-icon.icon-pdf i{ color: #c5221f; }   /* PDF */
        #modalArchivos .file-icon.icon-xls i{ color: #1f7a3f; }   /* Excel */

        /* Nombre truncado a 2 líneas */
        #modalArchivos .file-name{
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        }

        /* Barra de progreso (si la usas) */
        #modalArchivos .dz-progress .progress{
        height: .5rem; border-radius: 999px;
        }

        #modalArchivos .archivo-nombre{
            display:block;           /* o .d-block en HTML */
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            max-width:100%;
        }



        /* Modal ancho XL+ (tipo container-xxl) */
.modal-dialog.modal-xxl{ width:auto; max-width:1520px; margin:1.75rem auto; }
@media (max-width:1399.98px){ .modal-dialog.modal-xxl{ max-width:1140px; } }
@media (max-width:1199.98px){ .modal-dialog.modal-xxl{ max-width:960px; } }
@media (max-width:991.98px){  .modal-dialog.modal-xxl{ max-width:720px; } }
@media (max-width:767.98px){  .modal-dialog.modal-xxl{ max-width:540px; } }
@media (max-width:575.98px){  .modal-dialog.modal-xxl{ max-width:100%; margin:0.5rem; } }

/* Alto cómodo con scroll en el body del modal */
.modal-dialog.modal-xxl.modal-dialog-scrollable .modal-content{
  max-height:90vh;
}



/* Chrome/Edge/Safari */
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 */
}



#attributesContainer {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.attribute-card {
	cursor: move;
}

.attribute-card-placeholder {
	border: 2px dashed #ccc;
	height: 60px; /* ajusta según tu card */
	background: #f8f9fa;
}



.dt-scroll-body.dt-overflow-visible{ overflow: visible !important; }