.error{
    background-color:red;
    color:white;
    margin-bottom: auto;
    margin-top: auto;
    border: 1px solid rgba(0,0,0,.125);

}

/* =========================================
   ESTILOS DEL DROPDOWN (Consistente con tu Navbar)
   ========================================= */

/* Contenedor del menú desplegable */
.dropdown-menu {
    position: absolute;
    z-index: 9999 !important;
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.05); /* Borde casi invisible */
    border-radius: 16px; /* Bordes redondeados pero no circulares como el nav-link */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Sombra más profunda para dar elevación */
    padding: 0.5rem; /* Espacio interno para que los items no toquen los bordes */
    margin-top: 10px !important; /* Separación del botón principal */
    min-width: 200px;
    transition: all 0.3s ease;
}

/* Items individuales dentro del menú */
.dropdown-item {
    color: #64748b !important; /* El mismo gris pizarra de tus nav-links */
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: 10px; /* Redondeado suave para el efecto hover */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

/* Efecto Hover en los items (Copiando el estilo de tus nav-links) */
.dropdown-item:hover {
    background-color: #f1f5f9 !important; /* Gris clarito */
    color: #0d6efd !important; /* Texto azul */
    transform: translateX(5px); /* Desplazamiento lateral sutil en lugar de hacia arriba */
}

/* Estado Activo dentro del dropdown */
.dropdown-item.active, .dropdown-item:active {
    background-color: rgba(13, 110, 253, 0.1) !important;
    color: #0d6efd !important;
    font-weight: 700;
}

/* Ajuste para la flechita del dropdown si la usas */
.dropdown-toggle::after {
    vertical-align: middle;
    margin-left: 0.5rem;
    opacity: 0.7;
}

/* Solo aplica si el elemento es un <button> con esa clase */
#BtnValidate {
    background-color: #28a745;
    color: #ffffff;
    border: 1px solid #218838;
    cursor: pointer; /* Cambia el cursor a una mano */
}

/* Botón de envío al ERP - Máxima visibilidad */
button#BtnPublish {
    background-color: #064e3b; /* Verde esmeralda muy oscuro */
    color: #ffffff;
    border: 1px solid #022c22;
    font-weight: 600;
    cursor: pointer;
}

button#BtnPublish:hover {
    background-color: #022c22; /* Tono casi negro-verdoso */
    border-color: #011a14;
}

button#BtnPublish:active {
    background-color: #011a14; /* El punto más oscuro de la gama */
}

.ko{
    background-color:#FF0065;
    color:white;
    margin-bottom: auto;
    margin-top: auto;
    border: 1px solid rgba(0,0,0,.125);

}
.ok{
    background-color:#7FFF7F;
    color:white;
    margin-bottom: auto;
    margin-top: auto;
    border: 1px solid rgba(0,0,0,.125);

}
/* =========================================
   ESTILOS DEL NAVBAR (Menú Principal)
   ========================================= */

/* Sombra suave para toda la barra de navegación */
.navbar {
    background-color: #ffffff !important; /* Asegura fondo blanco limpio */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* Sombra muy sutil abajo */
    padding: 0.8rem 1rem; /* Un poco más de aire */
}

/* Estilo base de los enlaces del menú */
.navbar-nav .nav-link {
    color: #64748b !important; /* Tu color gris pizarra estándar */
    font-weight: 600;
    padding: 0.6rem 1.2rem !important; /* Botones más anchos */
    margin: 0 4px; /* Separación entre botones */
    border-radius: 50px; /* Bordes totalmente redondos (Píldora) */
    transition: all 0.3s ease; /* Animación suave */
}

/* Cuando pasas el ratón por encima (Hover) */
.navbar-nav .nav-link:hover {
    background-color: #f1f5f9; /* Gris muy clarito */
    color: #0d6efd !important; /* Texto azul */
    transform: translateY(-1px); /* Se eleva un milímetro */
}


/* CUANDO EL BOTÓN ESTÁ ACTIVO (Estilo Transparente) */
.navbar-nav .nav-link.active {
    /* Fondo azul con 15% de opacidad (Muy transparente) */
    background-color: rgba(13, 110, 253, 0.15);
    
    /* Texto en azul sólido (Importante para que se lea bien sobre fondo claro) */
    color: #0d6efd !important; 
    
    /* Un borde muy sutil para definirlo mejor */
    /* border: 1px solid rgba(13, 110, 253, 0.2); */
    
    /* Quitamos la sombra fuerte y dejamos el efecto de elevación sutil */
    box-shadow: none; 
    transform: translateY(-1px);
    font-weight: 700; /* Un poco más negrita para resaltar */
}

/* Ajuste para el Logo */
.navbar-brand img {
    height: 40px; /* O el tamaño que prefieras */
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.15); /* Efecto zoom sutil en el logo */
}


/* Formularios */
 :root {--bs-body-bg: #f8f9fa;}
 .clsFormToolbar {
    background-color: #ffffff;
    border-bottom: 2px solid #e9ecef;
    padding: 1rem 1.5rem;
    margin-bottom: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.clsFormTitle {
    font-weight: 700;
    color: #334155;
    margin: 0;
    font-size: 1.5rem;
}
.clsField {transition: all 0.2s ease;}
.clsFieldReadOnly {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
}
.clsFieldReadWrite {border-left: 3px solid #0d6efd;}

/* Estado Inicial / Validado (Verde) */
.clsValid {
    background-color: #d4edda !important; /* Verde suave */
    border: 1px solid #28a745 !important;
    color: #155724;
}

/* Estado Error (Rojo) */
.clsError {
    background-color: #f8d7da !important; /* Rojo suave */
    border: 1px solid #dc3545 !important;
    color: #721c24;
}

/* Estado Warning (Amarillo - Opcional para error:0) */
.clsWarning {
    background-color: #fff3cd !important;
    border: 1px solid #ffc107 !important;
    color: #856404;
}


.clsBadgeEstado {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}
.Invisible {display:none !important}

.clsBadgeTokens{
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    background-color: #63c5da; color: #241571;
}

/* 1. Definición de colores comunes (Solo texto y negrita) */
/* Pendiente: Ambar/Naranja (Espera) */
.txtEstado_10, .clsEstado_10 { color: #92400e; font-weight: bold; } 

/* Enviado: Azul (En camino al ERP, proceso intermedio) */
.txtEstado_20, .clsEstado_20 { color: #1e40af; font-weight: bold; } 

/* Modificado: Violeta (Atención, los datos no coinciden) */
.txtEstado_30, .clsEstado_30 { color: #6b21a8; font-weight: bold; } 

/* Procesado: Verde (Finalizado con éxito) */
.txtEstado_100, .clsEstado_100 { color: #15803d; font-weight: bold; } 


/* 2. Definición de Fondos (Solo para las clases clsEstado) */
.clsEstado_10  { background-color: #fef3c7; padding: 4px 8px; border-radius: 4px; }
.clsEstado_20  { background-color: #dbeafe; padding: 4px 8px; border-radius: 4px; }
.clsEstado_30  { background-color: #f3e8ff; padding: 4px 8px; border-radius: 4px; }
.clsEstado_100 { background-color: #dcfce7; padding: 4px 8px; border-radius: 4px; }
/* Mantenemos tu base y añadimos la transición para que el movimiento sea suave */
.clsBtnAction { 
    width: 44px; 
    height: 44px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease-in-out; /* Crucial para la suavidad */
}

/* Comportamiento al pasar el ratón (Sombra y Elevación) */
.clsBtnAction:hover {
    transform: translateY(-3px); /* El botón "sube" 3 píxeles */
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    filter: brightness(90%); /* Lo oscurece un poco sin importar qué color tenga debajo */
}

/* Comportamiento al hacer clic (Efecto de pulsado) */
.clsBtnAction:active {
    transform: translateY(1px); /* El botón "baja" al presionarlo */
    box-shadow: none; /* Desaparece la sombra para simular contacto con el fondo */
}
.clsDivVertical {
    width: 1px;
    height: 28px;
    background-color: #cbd5e1;
    margin: 0 15px;
}
label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.4rem;
}
.clsTable thead th { background-color: #f8f9fa; font-size: 0.8rem; text-transform: uppercase; color: #666; border-bottom: 2px solid #eee; }

tbody{
    font-size:12px;
}

.clsBuscarToolbar {
    background-color: #f1f3f5;
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.clsSelectableRow {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.clsSelectableRow:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

.clsSelectableRow.clsTableActive {
    background-color: #e7f1ff !important;
    border-left: 4px solid #0d6efd;
}

.image-container {

    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    background-color: #e9ecef;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-container:hover img {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-weight: 600;
}

.image-container:hover .image-overlay {
    opacity: 1;
}

.modal-xl {
    max-width: 90%;
}

#PagesLoader {display: none;}

.badge-tag {
    font-size: 0.75rem;
    margin-right: 5px;
}

        /* Vista previa ampliada */
#preview-frame {
    max-height: 80vh;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}
.clsRemoveAdv{
    color:#FF0065!important;
}
.clsDivSeparator{
    height:10px;
}
        



/* Estilo base de la notificación */
.floating-notification {
    width: 320px;
    position: fixed; /* Posición fija desde el inicio */
    z-index: 1050;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    display: none; /* Se muestra con fadeIn */
}

/* Estado durante el arrastre */
.ui-draggable-dragging {
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    opacity: 0.95;
    cursor: grabbing !important;
}

.notification-header {
    padding: 5px;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: grab;
    user-select: none;
}

.notification-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.notification-body {
    padding: 16px;
    font-size: 0.88rem;
    color: #4b5563;
    line-height: 1.5;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

/* Funcionalidad de minimizar */
.minimized {
    width: 240px;
}
.minimized .notification-body {
    display: none;
}
.notif-success .status-dot { background: #10b981; }
.notif-info .status-dot { background: #3b82f6; }
.notif-warning .status-dot { background: #f59e0b; }
.notif-danger .status-dot { background: #ef4444; }
.action-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.2rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
}
.action-btn:hover {
    background-color: #f3f4f6;
    color: #111827;
}
.btn-close-notif:hover {
    background-color: #fee2e2;
    color: #dc2626;
}

#spinner { visibility:hidden; } 
body.busy .spinner { visibility:visible !important; }
#MnuPreferences{
    cursor:pointer;
}

/* Para que la X sea más bonita al pasar el ratón */
.alert-dismissible .btn-close:hover, 
.alert-dismissible .close:hover {
    opacity: 1 !important;
    transform: scale(1.1);
    transition: all 0.2s;
}

/* Mejora el diseño de la lista dentro de la alerta */
.alert ul li {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.clsPdfViewer{
    height:405px;
}
.clsRowLast{
    cursor:pointer;
}
table.dataTable thead > tr > th {
    padding-left: 30px !important;
    padding-right: initial !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    left: 8px !important;
    right: auto !important;
}