body {
    background-color: #e8e8e8;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: #000000;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
}

#sidebar,
#main-content,
#right-panel,
#ordersContainer,
.pending-products,
.scanned-list,
textarea,
input[type="text"],
button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#queryModePopup #queryTrackingInput {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    border: 1px solid #5e17eb;
    /* Borde morado igual que #labelScanInput */
    border-radius: 5px;
}

#queryModePopup #queryErrorMessage {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#queryModePopup #closeQueryPopupBtn:hover {
    background-color: #000000;
    /* Negro al hover, igual que #closePopupBtn */
}

#queryModePopup #closeQueryPopupBtn {
    background-color: #5e17eb;
    /* Morado igual que #closePopupBtn */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    /* Igual que #closePopupBtn */
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

#queryModePopup .error-icon {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

#queryTrackingInput {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    border: 1px solid #5e17eb;
    border-radius: 5px;
}

#closeQueryPopupBtn {
    background-color: #5e17eb;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

#closeQueryPopupBtn:hover {
    background-color: #000000;
}

/* Sidebar */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: #5e17eb;
    color: white;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1000;
    border-right: 4px solid #05fa93;
}

#sidebar-switches {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#file-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    /* Permitir que los botones se ajusten en pantallas pequeñas */
}

.switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

#logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#logo {
    height: 60px;
}

#sidebarTitle h1 {
    font-size: 20px;
    margin: 0 0 20px;
    text-align: center;
    font-weight: bold;
}

.summary-content {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Espacio entre el icono y el número */
}

#headerSummary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.summaryItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
}

.summaryItem i {
    font-size: 24px;
    color: #ffffff;
}

.summaryItem span {
    font-size: 24px;
    /* Aumentamos el tamaño del número */
    font-weight: bold;
}

#totalOrders {
    color: #ff9f00;
}

#completedOrders {
    color: #05fa93;
}

.summaryItem p {
    margin: 5px 0 0 0;
    /* Espacio arriba del texto, sin margen inferior */
    font-size: 12px;
    /* Texto más pequeño para que quede compacto */
    text-align: center;
}

#sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#sidebar button {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    /* Aumentamos el padding para dar espacio al ícono */
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.5s;
    text-align: left;
    display: flex;
    /* Flex para alinear ícono y texto */
    align-items: center;
    /* Centrar verticalmente */
    gap: 10px;
    /* Espacio entre ícono y texto */
    width: 100%;
    /* Ocupar todo el ancho del sidebar */
    box-sizing: border-box;
    /* Incluir padding en el ancho */
}

#sidebar button:hover {
    background-color: #05fa93;
    color: #000000;
}

#sidebar button i {
    font-size: 14px;
    /* Tamaño del ícono */
}

#toggleInputBtn i {
    margin-right: 0;
    /* Eliminar margen, ya que ahora todos son solo íconos */
}

/* Ajustes específicos para botones con íconos */
#generateReportBtn i {
    color: #ffffff;
}

#generateProductConsumptionReportBtn i {
    color: #ffffff;
}

#generatePendingOrdersReportBtn i {
    color: #ffffff;
}

#generatePickListPdfBtn i {
    color: #ffffff;
}

#saveJsonBtn i {
    color: #ffffff;
}

#loadJsonLabel i {
    color: #000000;
}

/* Blanco porque el fondo es blanco */
#fetchFromSheetsBtn i {
    color: #ffffff;
}

#stopSheetsPollingBtn i {
    color: #ffffff;
}

#sidebar button:hover i {
    color: #000000;
    /* Íconos negros al hover para contraste con #05fa93 */
}

/* Contenido Principal */
#main-content {
    margin-left: 250px;
    padding: 20px;
    width: calc(100% - 600px);
    box-sizing: border-box;
    overflow-y: auto;
    height: 100vh;
    /* Asegurar que ocupe toda la altura */
}

#right-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background-color: #ffffff;
    border-left: 4px solid #5e17eb;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1000;
    transition: width 0.3s;
    /* Animación suave */
}

#right-panel.collapsed {
    width: 0;
    padding: 0;
    overflow: hidden;
    /* Ocultar contenido cuando está colapsado */
}

textarea,
input[type="text"] {
    width: 98%;
    padding: 10px;
    font-size: 14px;
    margin: 10px 0;
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    background-color: #ffffff;
    color: #000000;
}

#fileInput {
    margin: 0;
    /* Eliminamos el margen superior/inferior por defecto */
}

/* Contenedor de pedidos pendientes */
#pendingOrdersContainer {
    padding: 0;
    /* Reducir padding interno para aprovechar espacio */
    background-color: transparent;
    /* Sin fondo adicional */
    border-radius: 0;
    /* Sin bordes redondeados */
    box-shadow: none;
    /* Sin sombra para un diseño más limpio */
}

/* Estilo para el contenedor de pedidos */
#ordersContainer {
    margin-top: 10px;
    padding: 10px;
    border: 2px solid #5e17eb;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    /* Añadido para suavizar los bordes */
}

h3 {
    margin-bottom: 10px;
    font-size: 24px;
    color: #1f4068;
}

.order h3,
.order-header-main {
    color: #ffffff;
    background-color: #000000;
    width: fit-content;
    text-align: center;
    padding: 10px 20px;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 18px;
    margin: 5px 0;
    /* Cambiado de auto a 0 para alinear a la izquierda */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-name-title {
    font-weight: bold;
    text-transform: uppercase;
}

.order-number-badge {
    background: #5e17eb;
    color: #05fa93;
    padding: 2px 8px;
    border-radius: 8px;
    font-family: monospace;
    font-weight: bold;
    border: 1px solid #05fa93;
}

.scan-summary {
    background-color: #343434;
    padding: 10px;
    border-radius: 20px;
    color: #ffffff;
}

.pending-products {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #ddd;
}

.pending-products h4 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.pending-summary {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.pending-item {
    font-size: 14px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.pending-item-info {
    margin-bottom: 2px;
    /* Espacio entre los datos dentro de cada producto */
    font-size: calc(1em + 3px);
    /* Aumenta el tamaño de la fuente en 3px */
}

.pending-item-info strong {
    margin-right: 20px;
    /* Espacio entre la etiqueta y el dato */
}

.progress-bar {
    width: 0%;
    height: 10px;
    background-color: #05fa93;
    /* Verde para escaneado */
    border-radius: 15px;
    margin-top: 5px;
}

.pending-products ul {
    list-style-type: none;
    padding-left: 0;


}

.pending-products li {
    color: #000000;
    /* Texto negro para la lista */
    margin-top: 15px;
    background-color: #f0f0f0;
    font-size: calc(1em + 2px);
}

.pending-products li:hover {
    background-color: #daff56;
    /* Fondo rosa claro al pasar el mouse */
    cursor: pointer;
    color: #000000;
}



/* Estilo para la lista de productos escaneados */
.scanned-list {
    background-color: #f9f9f9;
    /* Fondo gris claro */
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    max-height: 300px;
    /* Establecer altura máxima */
    overflow-y: auto;
    /* Desplazamiento vertical */
}

.scanned-item {
    background-color: #d8edd4;
    /* Fondo verde claro */
    color: #155724;
    padding: 5px;
}

.scanned-item button {
    background-color: #000000;
    color: #ffffff;
    /* Texto blanco */
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
}

.scanned-item button:hover {
    background-color: #05fa93;
    /* Fondo verde claro al pasar el mouse */
    color: #000000;
}

/* Estilo para los botones de navegación */
#navButtons button {
    padding: 8px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
}

#navButtons button:hover {
    background-color: #05fa93;
    color: #000000;
}

#navButtons button:disabled {
    background-color: #777777;
    /* Color gris si el botón está deshabilitado */
    cursor: not-allowed;
}

.download-btn {
    background-color: #5e17eb;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    display: block;
    width: 200px;
    margin: 20px auto;
    /* Centrado del botón */
}

.download-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Sombra sutil al pasar el mouse */
}

@media (max-width: 768px) {

    textarea,
    input[type="text"] {
        width: 100%;
        font-size: 14px;
    }

    button {
        width: 100%;
        padding: 15px;
    }
}

h1,
h3,
h4 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    /* Sombra sutil para los encabezados */
}


/* Animación de entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== STATUS INDICATOR CHIPS ===== */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    color: white;
    border: 1.5px solid rgba(255,255,255,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    margin-left: 0;
}
.status-indicator:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
body.dark-mode .status-indicator {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Nueva clase para parpadeo */
.blinking {
    animation: chipBlink 1.2s ease-in-out infinite;
}
@keyframes chipBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.status-partial i, .status-pending i {
    animation: none;
}

.status-complete {
    background: linear-gradient(135deg, #00c853, #05fa93);
    color: #003820;
    border-color: rgba(5,250,147,0.4);
    box-shadow: 0 2px 8px rgba(5,250,147,0.3);
    border-radius: 20px;
}
body.dark-mode .status-complete {
    background: linear-gradient(135deg, #00a846, #05fa93);
    color: #001f10;
    box-shadow: 0 2px 10px rgba(5,250,147,0.45);
}

.status-partial {
    background: linear-gradient(135deg, #e65100, #ff9800);
    color: white;
    border-color: rgba(255,152,0,0.4);
    box-shadow: 0 2px 8px rgba(255,99,0,0.3);
    border-radius: 20px;
}
body.dark-mode .status-partial {
    box-shadow: 0 2px 10px rgba(255,99,0,0.5);
}

.status-pending {
    background: linear-gradient(135deg, #b71c1c, #ef5350);
    color: white;
    border-color: rgba(239,83,80,0.4);
    box-shadow: 0 2px 8px rgba(183,28,28,0.35);
    border-radius: 20px;
}
body.dark-mode .status-pending {
    box-shadow: 0 2px 10px rgba(239,83,80,0.55);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-partial i {
    animation: blink 0.5s infinite;
}



.scan-input {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Espacio entre el input y el botón */
    margin-top: 10px;
    /* Espacio superior para separarlo del encabezado */
}


/* Asegúrate de incluir FontAwesome en tu HTML para usar estos íconos */
.icon-mujer::before {
    content: "\f182";
    /* Ícono de mujer, usando el código unicode de FontAwesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 5px;
}

.icon-hombre::before {
    content: "\f183";
    /* Ícono de hombre, usando el código unicode de FontAwesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 5px;
}

#skuInput {
    padding: 10px;
    font-size: 16px;
    width: 300px;
    /* Aumentar un poco el ancho */
    border: 2px solid #5e17eb;
    /* Borde morado para destacar, coherente con el tema */
    border-radius: 5px;
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
}

#skuInput:focus {
    outline: none;
    border-color: #000000;
    /* Verde al enfocar */

}

.scan-container {
    background-color: #f9f9f9;
    /* Fondo gris claro */
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.scan-btn {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s;
    position: relative;
    /* Necesario para el tooltip */
}

.scan-btn:hover::after {
    content: "Escanear SKU";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000000;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}

.scan-btn i {
    color: #ffffff;
    /* Color personalizado para el ícono */
}

.scan-btn:hover {
    background-color: #05fa93;
    /* Verde al pasar el mouse, como otros botones */
    color: #000000;
}

.scan-btn:hover i {
    color: #000000;
    /* Cambio de color al pasar el ratón */
}

.agenda-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #ff9800;
    padding: 4px 12px;
    border-radius: 20px;
    margin-left: 0;
    border: 1.5px solid rgba(255,255,255,0.25);
    box-shadow: 0 2px 6px rgba(255,152,0,0.35);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.agenda-info:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255,152,0,0.45);
}
body.dark-mode .agenda-info {
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 2px 8px rgba(255,152,0,0.5);
}

#toggleInputBtn {
    background-color: #5e17eb;
    border: none;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s;
}

#toggleInputBtn i {
    color: #ffffff;
}

#toggleInputBtn:hover {
    background-color: #05fa93;
}

#toggleInputBtn:hover i {
    color: #000000;
}

.client-info {
    font-size: 16px;
    color: #ffffff;
    background-color: #ff9800;
    /* Fondo naranja */
    padding: 5px 10px;
    border-radius: 15px;
    margin-left: 10px;
    display: inline-block;
}

#filtersContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.filters-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item i {
    font-size: 16px;
    color: #5e17eb;
}

.filter-item label {
    font-weight: bold;
    color: #000000;
}

.filter-item select {
    padding: 5px;
    border: 1px solid #5e17eb;
    border-radius: 5px;
    background-color: #ffffff;
    color: #000000;
    width: 100%;
    font-size: 14px;
    transition: border-color 0.3s;
}

/* Modo oscuro */
body.dark-mode .filter-item label {
    color: #ffffff;
}

body.dark-mode .filter-item select {
    background-color: #444444;
    color: #ffffff;
    border: 1px solid #5e17eb;
}

body.dark-mode .filter-item select:focus {
    border-color: #00cc7a;
}

.filter-item select:focus {
    outline: none;
    border-color: #05fa93;
}

#pendingOrdersSummary {
    margin-bottom: 10px;
    font-weight: bold;
    color: #5e17eb;
    font-size: 14px;
}

.dark-mode #pendingOrdersSummary {
    color: #00cc7a;
}

#filtersContainer label {
    font-weight: bold;
    color: #000000;
}

#pendingOrdersContainer h3 {
    margin: 0 0 10px;
    font-size: 18px;
    /* Reducir tamaño */
    color: #000000;
}

.dark-mode #pendingOrdersContainer h3 {
    color: #ffffff;
}

#filtersContainer select {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #ffffff;
    color: #000000;
    width: 100%;
    font-size: 14px;
}

#pendingOrdersList {
    list-style-type: none;
    padding: 0;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

#pendingOrdersList li:hover {
    background-color: #f0f0f0;
}


/* Estilos base para los pedidos en el listado */
#pendingOrdersList li {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#pendingOrdersList li span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Colores según estado - Estilo Pastilla/Tarjeta */
#pendingOrdersList li.status-pending {
    background: #f8f9fa;
    border-left: 5px solid #9e9e9e;
    color: #333333;
    box-shadow: none;
}
body.dark-mode #pendingOrdersList li.status-pending {
    background: #162038;
    border-left: 5px solid #757575;
    color: #c8d0e8;
}


#pendingOrdersList li.status-partial {
    background: #fff8e1;
    border-left: 5px solid #ff9800;
    color: #5d4037;
}

#pendingOrdersList li.status-completed {
    background-color: #e8f5e9;
    border-left: 5px solid #4caf50;
    color: #1b5e20;
}

/* Efecto hover */
#pendingOrdersList li.status-pending:hover:not(.active-order) {
    background-color: #eeeeee;
}

#pendingOrdersList li.status-partial:hover:not(.active-order) {
    background-color: #ffecb3;
}

#pendingOrdersList li.status-completed:hover:not(.active-order) {
    background-color: #c8e6c9;
}

/* Pedido activo con mayor especificidad */
#pendingOrdersList li.active-order {
    border: 2px solid #2196f3 !important;
    border-left: 6px solid #1976d2 !important;
    background-color: #e3f2fd !important;
    color: #0d47a1 !important;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2) !important;
    z-index: 1;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(33, 150, 243, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}

/* Evitar que el hover interfiera con active-order */
#pendingOrdersList li.active-order:hover {
    background-color: #bbdefb !important;
}

.close-btn {
    background-color: #000000;
    /* Rojo para el botón de cerrar */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
}

.close-btn:hover {
    background-color: #ffffff;
    /* Rojo más oscuro al pasar el mouse */
}

/* Estilo para los mensajes de "Pedido completado" y "Pedido listo para despacho" */
.ready-message,
.completed-message {
    background-color: #5e17eb;
    /* Verde para "listo para despacho" y completado */
    color: white;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    width: 100%;
    text-transform: uppercase;
}

/* Estilo para el contenedor de búsqueda */
#searchContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-item i {
    font-size: 16px;
    color: #5e17eb;
}

/* Estilo para el campo de búsqueda */
#searchInput {
    padding: 8px;
    font-size: 14px;
    width: 100%;
    /* Se expande con el nuevo ancho del panel */
    border: 2px solid #000000;
    border-radius: 5px;
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#searchInput:focus {
    outline: none;
    border-color: #5e17eb;
}

/* Estilo para el desplegable */
#searchFilter {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #ffffff;
    color: #000;
    width: 150px;
    /* Ajustar el tamaño del desplegable */
}

.pending-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.product-image {
    width: 120px;
    /* Ancho de la imagen */
    height: 120px;
    /* Alto de la imagen */
    object-fit: cover;
    /* Asegura que la imagen se ajuste sin deformarse */
    border-radius: 10px;
    /* Bordes redondeados opcionales */
    margin-right: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Sombra para mejor visualización */
    transition: transform 0.3s ease, z-index 0.3s ease, box-shadow 0.3s ease;
    cursor: zoom-in;
    position: relative;
    z-index: 1;
    transform-origin: left center;
}

.product-image:hover {
    transform: scale(2.5);
    /* Crece al 250% */
    z-index: 1000;
    /* Flota sobre los demás elementos */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Contenedor del interruptor */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* Estilos del interruptor */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

/* Ocultar el checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Diseño del fondo del interruptor */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 24px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Indicador del interruptor */
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    transition: 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

input:checked+.slider {
    background-color: #00e676;
    border-color: #00c853;
}

input:checked+.slider:before {
    transform: translateX(19px);
}

.switch:hover .slider {
    background-color: rgba(255, 255, 255, 0.25);
}
input:checked:hover+.slider {
    background-color: #1aff8c;
}

#toggleImagesText,
#toggleAutoSkipText {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

.copy-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    margin-right: 10px;
    color: #5e17eb;
    transition: color 0.3s ease;
}

.copy-button:hover {
    color: #05fa93;
    background: none;
}


.error-icon {
    width: 200px;
    /* Tamaño más pequeño que completed-icon para no abrumar */
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

.popup-content h2 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #a94442;
}

.popup-content p {
    margin: 0 0 15px;
    font-size: 16px;
}

#labelScanInput {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    border: 1px solid #5e17eb;
    border-radius: 5px;
}

#closePopupBtn {
    background-color: #5e17eb;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

#closePopupBtn:hover {
    background-color: #000000;
}

#generatePickListBtn {
    background-color: #5e17eb;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    display: block;
    width: 200px;
    margin: 20px auto;
}

#generatePickListBtn:hover {
    background-color: #05fa93;
    color: #000000;
}

#generatePickListPdfBtn {
    background-color: #5e17eb;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    display: block;
    width: 200px;
    margin: 20px auto;
}

#generatePickListPdfBtn:hover {
    background-color: #05fa93;
    color: #000000;
}

/* Estilo para el GIF en el pop-up */
.scan-gif {
    width: 300px;
    height: 200px;
    display: block;
    margin: 10px auto;
    object-fit: contain;
    border-radius: 20px;
}

/* Ajustar el título para que no se superponga */
.popup-content h2 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #000000;
}

.dark-mode .popup-content h2 {
    color: #ffffff;
}

/* Responsive */
@media (max-width: 1024px) {
    #right-panel {
        width: 350px;
        /* Reducir un poco en pantallas medianas */
    }

    #main-content {
        width: calc(100% - 600px);
        /* Ajustar al nuevo ancho */
    }
}

@media (max-width: 768px) {
    #sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }

    #main-content {
        margin-left: 0;
        width: 100%;
        padding: 10px;
    }

    #right-panel {
        position: relative;
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 4px solid #5e17eb;
        padding: 10px;
    }

    #pendingOrdersList {
        max-height: 300px;
    }
}

/* Contenedor para el botón y la caja de archivos */
#file-input-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}


#navButtons {
    display: flex;
    gap: 5px;
}

#file-input-container button {
    background-color: #000000;
    border: none;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s;
}

#file-input-container button i {
    color: #ffffff;
}

#file-input-container button:hover {
    background-color: #05fa93;
}

#file-input-container button:hover i {
    color: #000000;
}

#toggleRightPanel,
#expandRightPanel {
    position: fixed;
    right: 350px;
    width: 24px;
    height: 36px;
    background-color: #1e2430;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.3s;
    z-index: 1001;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
}

#toggleRightPanel {
    top: calc(50% - 20px);
}

#expandRightPanel {
    top: calc(50% + 20px);
}

#toggleRightPanel:hover,
#expandRightPanel:hover {
    background-color: #334155;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}

body:not(.dark-mode) #toggleRightPanel,
body:not(.dark-mode) #expandRightPanel {
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-right: none;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.06);
}

body:not(.dark-mode) #toggleRightPanel:hover,
body:not(.dark-mode) #expandRightPanel:hover {
    background-color: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

#right-panel.collapsed + #toggleRightPanel,
#right-panel.collapsed ~ #toggleRightPanel,
body.right-panel-collapsed #toggleRightPanel,
body:has(#right-panel.collapsed) #toggleRightPanel {
    right: 0px !important;
}

#right-panel.collapsed ~ #expandRightPanel,
body.right-panel-collapsed #expandRightPanel,
body:has(#right-panel.collapsed) #expandRightPanel {
    right: 0px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#right-panel.expanded {
    width: 750px !important;
}

#right-panel.expanded ~ #toggleRightPanel,
#right-panel.expanded ~ #expandRightPanel,
body.right-panel-expanded #toggleRightPanel,
body.right-panel-expanded #expandRightPanel,
body:has(#right-panel.expanded) #toggleRightPanel,
body:has(#right-panel.expanded) #expandRightPanel {
    right: 750px !important;
}

.extended-info {
    display: none;
    font-size: 0.85em;
    margin-left: 10px;
    color: #ccc;
    font-weight: normal;
}

#right-panel.expanded .extended-info {
    display: inline-block;
}

#right-panel.expanded .extended-info span {
    padding: 3px 8px;
    border-radius: 12px;
    margin-right: 5px;
    font-weight: bold;
    font-size: 0.85em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.ext-badge-store {
    background-color: #9c27b0 !important;
    color: #ffffff !important;
}

.ext-badge-agenda {
    background-color: #009688 !important;
    color: #ffffff !important;
}

.ext-badge-op {
    background-color: #3f51b5 !important;
    color: #ffffff !important;
}


/* ===================================================
   DARK MODE BASE — Paleta Azul Noche
   Body:          #02040a  (fondo más profundo)
   Sidebar/Panel: #050914  (capa media)
   Main content:  #080c18  (contenido principal)
   Popups:        #1e1e2e  (más claro — contraste claro)
   =================================================== */

body.dark-mode {
    background-color: #02040a;
    color: #e8eaf0;
}

.dark-mode #sidebar {
    background-color: #050914;
    border-right: 4px solid #00cc7a;
}

.dark-mode #sidebar button {
    background-color: #0d162b;
    color: #d0d8f0;
}

.dark-mode #sidebar button:hover {
    background-color: #00cc7a;
    color: #000000;
}

.dark-mode #main-content {
    background-color: #080c18;
}

.dark-mode #right-panel {
    background-color: #050914;
    border-left: 4px solid #5e17eb;
}

.dark-mode #ordersContainer {
    background-color: #0c1222;
    border: 2px solid #5e17eb;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.dark-mode .order h3 {
    background-color: #162038;
    color: #e8eaf0;
}

.dark-mode .pending-products {
    background-color: #0d1a2e;
    border: 1px solid #1e3358;
}

.dark-mode .pending-item {
    background-color: #162038;
    color: #e8eaf0;
    border: 1px solid #1e3358;
}

.dark-mode .scanned-list {
    background-color: #0d1a2e;
}

.dark-mode .scanned-item {
    background-color: #2e7d32;
    color: #ffffff;
}

.dark-mode textarea,
.dark-mode input[type="text"] {
    background-color: #162038;
    color: #e8eaf0;
    text-shadow: none;
    border-color: #1e3358;
}

body.dark-mode #queryModePopup #queryTrackingInput {
    background-color: #162038;
    color: #e8eaf0;
    border: 1px solid #5e17eb;
}

body.dark-mode #queryModePopup #closeQueryPopupBtn {
    background-color: #5e17eb;
}

body.dark-mode #queryModePopup #closeQueryPopupBtn:hover {
    background-color: #162038;
}

body.dark-mode #queryTrackingInput {
    background-color: #162038;
    color: #e8eaf0;
    border: 1px solid #5e17eb;
}

body.dark-mode #closeQueryPopupBtn {
    background-color: #5e17eb;
}

body.dark-mode #closeQueryPopupBtn:hover {
    background-color: #162038;
}





/* Ajustes para modo oscuro */
body.dark-mode 

body.dark-mode 

#authQrPopup #authQrInput {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    border: 1px solid #5e17eb;
    border-radius: 5px;
}

#authQrPopup #authErrorMessage {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#authQrPopup .error-icon {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

#authQrPopup #closeAuthPopupBtn {
    background-color: #5e17eb;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

#authQrPopup #closeAuthPopupBtn:hover {
    background-color: #000000;
}

body.dark-mode #authQrPopup #authQrInput {
    background-color: #444444;
    color: #ffffff;
    border: 1px solid #5e17eb;
}

body.dark-mode #authQrPopup #closeAuthPopupBtn {
    background-color: #5e17eb;
}

body.dark-mode #authQrPopup #closeAuthPopupBtn:hover {
    background-color: #3a3a3a;
}


#assistedQuantityPopup #assistedQuantityInput {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    border: 1px solid #5e17eb;
    border-radius: 5px;
}

#assistedQuantityPopup #quantityErrorMessage {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#assistedQuantityPopup .error-icon {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

#assistedQuantityPopup #confirmQuantityBtn {
    background-color: #5e17eb;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
    transition: background-color 0.3s;
}

#assistedQuantityPopup #confirmQuantityBtn:hover {
    background-color: #05fa93;
    color: #000000;
}

#assistedQuantityPopup #closeAssistedPopupBtn {
    background-color: #5e17eb;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

#assistedQuantityPopup #closeAssistedPopupBtn:hover {
    background-color: #000000;
}

body.dark-mode #assistedQuantityPopup #assistedQuantityInput {
    background-color: #444444;
    color: #ffffff;
    border: 1px solid #5e17eb;
}

body.dark-mode #assistedQuantityPopup #confirmQuantityBtn,
body.dark-mode #assistedQuantityPopup #closeAssistedPopupBtn {
    background-color: #5e17eb;
}

body.dark-mode #assistedQuantityPopup #confirmQuantityBtn:hover {
    background-color: #00cc7a;
}

body.dark-mode #assistedQuantityPopup #closeAssistedPopupBtn:hover {
    background-color: #3a3a3a;
}

#loadJsonLabel {
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: 10px 15px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.5s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

#loadJsonLabel:hover {
    background-color: #05fa93;
    color: #000000;
}

#saveJsonBtn i,
#loadJsonLabel i {
    font-size: 14px;
    /* Tamaño del ícono un poco más grande para destacar */
}

/* Asegurar que el input siga oculto */
#loadJsonInput {
    display: none;
}

/* Multi-select dropdown styles */
.custom-multiselect .multiselect-content label:hover {
    background-color: #f5f5f5;
}

.multiselect-btn {
    user-select: none;
}

#dataLoadAuthPopup #dataLoadAuthInput {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    border: 1px solid #5e17eb;
    border-radius: 5px;
}

#dataLoadAuthPopup #dataLoadErrorMessage {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#dataLoadAuthPopup .error-icon {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

#dataLoadAuthPopup #closeDataLoadPopupBtn {
    background-color: #5e17eb;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

#dataLoadAuthPopup #closeDataLoadPopupBtn:hover {
    background-color: #000000;
}

body.dark-mode #dataLoadAuthPopup #dataLoadAuthInput {
    background-color: #444444;
    color: #ffffff;
    border: 1px solid #5e17eb;
}

body.dark-mode #dataLoadAuthPopup #closeDataLoadPopupBtn {
    background-color: #5e17eb;
}

body.dark-mode #dataLoadAuthPopup #closeDataLoadPopupBtn:hover {
    background-color: #3a3a3a;
}

#fetchFromSheetsBtn {
    padding: 10px;
    margin: 5px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

#fetchFromSheetsBtn:hover {
    background-color: #45a049;
}

#ordersContainer {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}


/* Estilo base para todos los popups */
#completedOrderMessage,
#errorContainer,
#queryModePopup,
#authQrPopup,
#assistedQuantityPopup,
#dataLoadAuthPopup,
#labelCheckPopup,
#assistedCompletePopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro semitransparente */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

/* 2. Añadir estilos específicos para el contenido (Texto, QR/RUT y Comentario) */
#assistedCompletePopup .popup-content {
    /* Hereda del selector .popup-content */
    display: flex;
    /* Asegura el apilamiento vertical */
    flex-direction: column;
    gap: 15px;
    /* Espaciado entre elementos */
}

/* 3. Estilo del campo de comentario (obligatorio) */
#assistedCommentInput {
    width: 90%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
    min-height: 80px;
    font-size: 14px;
    margin: 0 auto;
}

/* 4. Estilo del campo de QR/RUT (para centrar y destacar) */
#assistedAuthQrInput {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    margin: 0 auto;
    border: 1px solid #5e17eb;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

/* Estilos de Modo Oscuro para los nuevos inputs */
body.dark-mode #assistedCommentInput,
body.dark-mode #assistedAuthQrInput {
    background-color: #444444;
    color: #ffffff;
    border: 1px solid #5e17eb;
}

/* Contenido del popup */
#completedOrderMessage .popup-content,
#errorContainer .popup-content,
#queryModePopup .popup-content,
#authQrPopup .popup-content,
#assistedQuantityPopup .popup-content,
#dataLoadAuthPopup .popup-content,
#labelCheckPopup .popup-content {
    background-color: #ffffff;
    /* Blanco en modo claro */
    color: #000000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 600px;
    max-width: 90%;
    position: relative;
}

#completedOrderMessage .popup-content h2 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #000000;
}

/* Ajustar elementos internos popup*/
#completedOrderMessage h2,
#errorContainer h2,
#queryModePopup h2,
#authQrPopup h2,
#assistedQuantityPopup h2,
#dataLoadAuthPopup h2,
#labelCheckPopup h2 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #000000;
}

/* Estilos específicos para imágenes y texto */
#completedOrderMessage .success-gif,
#errorContainer .error-gif,
#queryModePopup .scan-gif,
#authQrPopup .scan-gif,
#assistedQuantityPopup .scan-gif,
#dataLoadAuthPopup .scan-gif,
#labelCheckPopup .scan-gif {
    width: 300px;
    height: 200px;
    display: block;
    margin: 10px auto;
    object-fit: contain;
    border-radius: 20px;
}

#completedOrderMessage #successMessageText,
#errorContainer #errorMessageText,
#queryModePopup p,
#authQrPopup p,
#assistedQuantityPopup p,
#dataLoadAuthPopup p,
#labelCheckPopup p {
    font-size: 16px;
    color: #000000;
    margin: 0;
    display: block;
}

/* Botones */
#completedOrderMessage button,
#errorContainer button,
#queryModePopup button,
#authQrPopup button,
#assistedQuantityPopup button,
#dataLoadAuthPopup button,
#labelCheckPopup button {
    background-color: #5e17eb;
    /* Morado */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

#completedOrderMessage button:hover,
#errorContainer button:hover,
#queryModePopup button:hover,
#authQrPopup button:hover,
#assistedQuantityPopup button:hover,
#dataLoadAuthPopup button:hover,
#labelCheckPopup button:hover {
    background-color: #05fa93;
    /* Verde claro al hover */
}

/* Modo oscuro popup */
body.dark-mode #completedOrderMessage .popup-content,
body.dark-mode #errorContainer .popup-content,
body.dark-mode #queryModePopup .popup-content,
body.dark-mode #authQrPopup .popup-content,
body.dark-mode #assistedQuantityPopup .popup-content,
body.dark-mode #dataLoadAuthPopup .popup-content,
body.dark-mode #labelCheckPopup .popup-content {
    background-color: #545454;
    /* Negro en modo oscuro */
    color: #ffffff;
}

body.dark-mode #completedOrderMessage h2,
body.dark-mode #errorContainer h2,
body.dark-mode #queryModePopup h2,
body.dark-mode #authQrPopup h2,
body.dark-mode #assistedQuantityPopup h2,
body.dark-mode #dataLoadAuthPopup h2,
body.dark-mode #labelCheckPopup h2 {
    color: #ffffff;
}

body.dark-mode #completedOrderMessage #successMessageText,
body.dark-mode #errorContainer #errorMessageText,
body.dark-mode #queryModePopup p,
body.dark-mode #authQrPopup p,
body.dark-mode #assistedQuantityPopup p,
body.dark-mode #dataLoadAuthPopup p,
body.dark-mode #labelCheckPopup p {
    color: #ffffff;
}

/* Clase para ocultar el borde del right-panel */
#right-panel.no-border {
    border-left: none !important;
    /* Eliminar borde morado */
}

body:has(#completedOrderMessage[style*="display: block"]) #right-panel {
    border-left: none !important;
}

/* Contenedor para el área de entrada */
#input-container {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* Ajustar el textarea para que no ocupe todo el espacio */
#dataInput {
    width: calc(100% - 30px);
    min-height: 100px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #5e17eb;
    border-radius: 5px;
    box-sizing: border-box;
    resize: vertical;
}

/* Estilo para el indicador de conexión a Google Sheets */
.sheets-indicator {
    font-size: 25px;
    /* Tamaño del ícono */
    margin-left: 20px;
    /* Espaciado respecto a otros elementos */
    transition: color 0.3s ease;
    /* Transición suave para el cambio de color */
    color: #ff0000;
    /* Rojo para indicar desconexión */
    cursor: default;
    margin-right: 30px;
    margin-left: auto;
    /* Asegura que se empuje al extremo derecho */
}

/* Estado conectado (verde con animación opcional) */
.sheets-indicator.connected {
    color: #009d4d;
}

.sheets-indicator.connected i {
    animation: pulse 1.5s infinite;
    /* Pulso sutil */
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}



.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.order-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.order-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.order-item input[type="checkbox"] {
    margin-right: 10px;
}

.popup-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 15px;
}

.popup-buttons button {
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}

#selectAllBtn {
    background-color: #05fa93;
    /* Verde claro */
    color: black;
}

#selectAllBtn:hover {
    background-color: #00cc77;
    /* Verde más oscuro al pasar el mouse */
}

.pickup-option {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pickup-option label {
    display: flex;
    align-items: center;
    gap: 5px;
}

#pickupOrderInput {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* PANTALLA DE SELECCIÓN DE SUCURSAL */
#branchSelectionScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #5e17eb;
    /* Fondo muy oscuro */
    z-index: 10000;
    /* Bloquea toda la app */
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(10, 10, 10);
    font-family: Arial, sans-serif;
    backdrop-filter: blur(5px);
    /* Efecto borroso de fondo */
}

.branch-content {
    text-align: center;
    background: #e0e0e0;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    max-width: 450px;
    width: 90%;
    border-top: 4px solid #05fa93;
    /* Tu color morado */
}

.branch-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
}

.branch-buttons button {
    padding: 18px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background-color: #2c2c2c;
    /* Gris oscuro */
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #333;
}

.branch-buttons button:hover:not(.btn-disabled) {
    background-color: #5e17eb;
    /* Morado al pasar el mouse */
    border-color: #5e17eb;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(94, 23, 235, 0.4);
}

.branch-buttons button i {
    font-size: 1.2em;
}

/* Estilo para Recoleta que aun no tiene ID */
.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    background-color: #252525 !important;
}

/* --- CONTENEDOR DE NOTIFICACIONES (Blindado) --- */
#notification-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    /* Aumentado para estar sobre el overlay de carga */
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* --- ESTILOS TOAST NOTIFICATION --- */
.toast-notification {
    position: fixed;
    top: -100px;
    /* Oculto arriba por defecto */
    left: 50%;
    transform: translateX(-50%);
    /* Centrado horizontal */
    background: white;
    border-left: 6px solid #ff9800;
    /* Borde naranja */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 3000;
    /* Por encima de todo */
    transition: top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    /* Efecto rebote suave */
    min-width: 300px;
}

.toast-close-btn {
    position: absolute;
    top: 5px;
    right: 8px;
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

.toast-close-btn:hover {
    color: #333;
}

.toast-icon {
    font-size: 24px;
    color: #ff9800;
}

.toast-content {
    display: flex;
    flex-direction: column;
}

.toast-title {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
}

.toast-message {
    font-size: 13px;
    color: #666;
}

#toastStatusText {
    color: #ef6c00;
}


/* --- ADAPTACIÓN A MODO OSCURO --- */
body.dark-mode .retiros-toast,
body.dark-mode .orders-toast {
    background-color: #2c2c2c !important;
    /* Fondo gris oscuro */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border-top: 1px solid #444;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
}

/* Color del texto descriptivo en modo oscuro */
body.dark-mode .toast-content-msg {
    color: #e0e0e0 !important;
}

/* Ajuste del botón de cerrar para que se vea mejor */
body.dark-mode .toast-close-btn {
    color: #888;
}

body.dark-mode .toast-close-btn:hover {
    color: #fff;
}

/* --- ESTILO PARA PEDIDOS COMPLETADOS EN NUBE (LISTA DERECHA) --- */
.cloud-completed-item {
    background: linear-gradient(to right, #e3f2fd, #bbdefb) !important;
    /* Azul muy suave */
    border-left: 5px solid #2196F3 !important;
    /* Borde azul fuerte */
    color: #0d47a1 !important;
    position: relative;
    /* Para posicionar el icono */
    padding-right: 30px !important;
    /* Espacio para el icono */
}

/* Icono de nube pequeña */
.cloud-icon-badge {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #2196F3;
    font-size: 14px;
}

/* Animación de alerta para el botón de retiros */
@keyframes pulse-alert {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(255, 152, 0, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
        transform: scale(1);
    }
}

.btn-retiro-alert {
    background-color: #ff6c40 !important;
    /* Rojo anaranjado más intenso */
    animation: pulse-alert 2s infinite;
    font-weight: bold;
    border: 2px solid rgb(248, 77, 77) !important;
}

.badge-counter {
    background-color: white;
    color: rgb(248, 77, 77);
    border-radius: 12px;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 0.9em;
    font-weight: 800;
}

/* Estado cuando NO hay retiros pendientes (Todo OK) */
.btn-retiro-clean {
    background-color: #4caf50 !important;
    /* Verde Material Design */
    color: white;
    border: 1px solid #388e3c !important;
    box-shadow: none;
    /* Sin sombra ni palpitación */
}

/* Contenedor FLEX para alinear los botones lado a lado con la misma altura */


/* Estilos comunes para ambos botones (Base) */


/* Iconos dentro de los botones */


/* --- Botón Izquierdo (Completar - Negro/Gris Oscuro) --- */






/* --- Botón Derecho (Verificar - Morado Stocka) --- */






/* Ajuste para pantallas muy pequeñas (celulares angostos) */
@media (max-width: 400px) {
    

    
}

.input-cell {
    width: 100%;
    border: 1px solid #ccc;
    padding: 4px;
    border-radius: 3px;
}

.adv-row td {
    padding: 5px;
    border-bottom: 1px solid #eee;
}

.delete-row-btn {
    background: transparent;
    border: none;
    color: red;
    cursor: pointer;
    font-weight: bold;
}

.delete-row-btn:hover {
    background-color: #ffebee;
    border-radius: 50%;
}

/* Estilos para los items del Pick List Popup */
.picklist-item-row {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.picklist-item-row:hover {
    background-color: #00708b;
}

.picklist-badge {
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: bold;
}

.badge-agenda {
    background: #eee;
    color: #333;
}

.badge-rm {
    background: #5e17eb;
    color: white;
}

.badge-region {
    background: blue;
    color: white;
}

.badge-retiro {
    background: #ff9800;
    color: white;
}

/* Agrega esto a tu CSS si no existe */
.status-cloud {
    background-color: #002d8d;
    /* Fondo Azul muy suave */
    color: #ffffff;
    /* Texto Azul fuerte */
    border-left: 5px solid #2196F3;
    /* Borde Azul */
}

.status-cloud span strong {
    color: #7cadf7;
}

/* Botón de Reportar */




/* Alerta Minimalista SAME DAY */
.sameday-banner {
    background-color: #c248fa;
    /* Fondo naranja muy pálido */
    color: #ffffff;
    /* Texto naranja oscuro y legible */
    border-left: 4px solid #5e17eb;
    /* Borde izquierdo sólido para destacar */
    padding: 8px 12px;
    /* Espacio interno moderado */
    margin: 5px 0 15px 0;
    /* Separación vertical */
    border-radius: 4px;
    /* Bordes ligeramente redondeados */
    font-size: 0.9rem;
    /* Tamaño de letra discreto pero claro */
    display: flex;
    align-items: center;
    gap: 8px;
    /* Separación entre icono y texto */
}

/* Estado Same Day Pendiente (Sin Movimientos) */
.status-sameday-pending {
    border-left: 5px solid #ff08de;
    /* Tu color violeta */
    background-color: #951cce;
    /* Un fondo violeta muy pálido */
    color: #b1b1b1;
}

/* El ícono también llevará el color */
.status-sameday-pending i {
    color: #ffffff;
    animation: pulse-icon 2s infinite;
    /* Opcional: latido suave al icono */
}

@keyframes pulse-icon {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Comentario/Observación en el detalle */
.order-observation-box {
    background-color: #f5f5f5;
    /* Gris muy claro */
    color: #666;
    /* Texto gris oscuro */
    border-left: 3px solid #bbb;
    /* Línea lateral discreta */
    padding: 6px 10px;
    margin: 5px 0 10px 0;
    font-size: 0.85em;
    /* Letra un poco más pequeña */
    font-style: italic;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 15px;
}

/* Estilos para resultados de SKU */
#skuSearchTableBody tr {
    border-bottom: 1px solid #eee;
}

#skuSearchTableBody tr:hover {
    background-color: #fff239;
}

.sku-match-highlight {
    color: #00796b;
    font-weight: bold;
}

/* Filtros especiales tipo Tab (Pestañas) en lugar de botones */
.filter-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #888;
    padding: 8px 12px;
    border-radius: 0 !important;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: none !important;
}

.filter-btn:hover {
    color: #fff;
    background: transparent !important;
    transform: translateY(-1px);
}

.filter-btn.active {
    color: #00e676 !important;
    border-bottom: 2px solid #00e676 !important;
    font-weight: bold;
    transform: none !important;
}

.filter-btn i {
    font-size: 1.1em;
}

.filter-btn.active i {
    animation: bounce 0.5s;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.order-stats-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    background: transparent;
    /* Quitamos el fondo gris del contenedor */
    padding: 0;
    border-radius: 10px;
    justify-content: space-between;
}

.stat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    /* Cada card tiene su fondo blanco */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Borde sutil */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Sombra suave para que parezcan cards */
}

.stat-card:last-child {
    border-right: none;
}

.stat-value {
    font-size: 1.4em;
    font-weight: 800;
    line-height: 1.2;
    color: #333;
}

.stat-label {
    font-size: 0.65em;
    text-transform: uppercase;
    font-weight: bold;

    margin-top: 5px;
    opacity: 0.7;
}

.stat-total {
    color: #333;
}

.stat-picked {
    color: #2e7d32;
}

.stat-pending {
    color: #ef6c00;
}

.dark-mode .stat-total {
    color: #f5f5f5;
}

/* --- ESTILOS TOAST (BASE) --- */
.retiros-toast,
.orders-toast {
    position: relative;
    pointer-events: auto;
    min-width: 300px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px 35px 15px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    /* Oculto por defecto */
    transform: translateX(100%);
    /* Fuera a la derecha */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.retiros-toast {
    border-left-color: #ff6c40;
}

/* --- CLASE PARA MOSTRAR (CORREGIDA) --- */
.retiros-toast.show,
.orders-toast.show {
    opacity: 1;
    transform: translateX(0);
    /* Entra a su posición original */
    /* SE ELIMINÓ EL LEFT: 250PX QUE CAUSABA EL ERROR */
}

/* Naranja Retiro */
.orders-toast {
    border-left-color: #5e17eb;
}

/* Morado Stocka */

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Botón de cerrar (X) */
.retiros-toast-close {
    position: absolute;
    top: 5px;
    right: 8px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 2px 5px;
    transition: color 0.2s;
}

.retiros-toast-close:hover {
    color: #ff6c40;
    /* Color naranja al pasar el mouse */
}


.retiros-toast i {
    color: #ff6c40;
    font-size: 20px;
}

.retiros-toast-content {
    display: flex;
    flex-direction: column;
}

.retiros-toast-title {
    font-weight: bold;
    font-size: 13px;
    color: #333;
    margin: 0;
}

.retiros-toast-msg {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* Modo Oscuro para el Toast */
body.dark-mode .retiros-toast {
    background: #333;
    color: white;
}

body.dark-mode .retiros-toast-title {
    color: #eee;
}

body.dark-mode .retiros-toast-msg {
    color: #ccc;
}

/* --- NOTIFICACIÓN DE PEDIDOS GENERALES --- */

.orders-toast-close {
    position: absolute;
    top: 5px;
    right: 8px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 2px 5px;
}

.orders-toast-close:hover {
    color: #5e17eb;
}

.orders-toast i {
    color: #5e17eb;
    font-size: 20px;
}

/* Modo Oscuro */
body.dark-mode .orders-toast {
    background: #333;
    color: white;
}

/* Nueva lista de productos en tarjetas */
.pending-products-list {
    list-style: none;
    padding: 5px;
    /* Reducido */
    display: flex;
    flex-direction: column;
    gap: 0px;
    /* Antes era 15px, ahora están más juntas */
}

.pending-item-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 10px;
    /* Un poco menos redondeado para ahorrar espacio */
    padding: 8px 12px;
    /* Reducido el padding vertical de 12 a 8 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
    position: relative;
    overflow: visible;
    /* Cambiado para evitar que se corte la foto en hover */
}

.dark-mode .pending-item-card {
    background: #162038;
    color: #e8eaf0;
    border-color: #1e3358;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.item-main-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 15px;
}

.item-qty-tag {
    background: #f8f9fa;
    border: 2px solid #5e17eb;
    border-radius: 8px;
    padding: 5px;
    min-width: 55px;
    /* Tamaño fijo para que todas las cantidades se alineen */
    text-align: center;
    margin-right: 15px;
    /* Espacio con la imagen */
}

.item-qty-tag small {
    font-size: 0.7em;
    display: block;
    color: #666;
    font-weight: bold;
}

.item-qty-tag strong {
    font-size: 1.4em;
    color: #000;
    font-weight: 900;
}

/* Ajuste de imagen para el nuevo orden */
.pending-item-card .product-image {
    width: 65px;
    /* Reducida un poco para que no se vea amontonado */
    height: 65px;
    margin-right: 15px;
}

.time-ago-alert {
    color: #f44336 !important;
    /* Rojo */
    font-weight: 900;
    text-decoration: underline;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* Contenedor del botón */
/* Asegura que el botón permita posicionar el globo en la esquina */
#viewRetirosBtn {
    position: relative;
    overflow: visible !important;
    /* Vital para que el globo no se corte */
}


/* Efecto opcional si hay retiros */
#viewRetirosBtn.has-retiros {
    border-left: 4px solid #ff6c40;
    /* Marca naranja lateral en el botón */
}

.caja-badge {
    background-color: #2196F3;
    /* Azul informativo */
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    border: 1px solid #1976D2;
}

.dark-mode .caja-badge {
    background-color: #0d47a1;
}

/* Estilos para el Modal de Stock */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    /* Asegura que esté por encima de todo */
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-out;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #888;
}

.modal-body table {
    width: 100%;
    border-collapse: collapse;
}

.modal-body th,
.modal-body td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para el Popup de Stock  */
.stock-lookup-container {
    color: #131313;
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 8px;
}

.dark-mode #modalTitle {
    color: #000000;
}


.stock-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 20px;
}

.stock-table th {
    background-color: #cacaca;
    color: #000000;
    padding: 12px;
    text-align: left;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stock-table tr {
    background-color: #cacaca;
    transition: background 0.3s;
}

.stock-table tr:hover {
    background-color: #d9ff00;
    color: #000000;
}

.stock-table td {
    padding: 12px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

/* Estilo para los Inputs en Modo Oscuro */
.multibox-input {
    background-color: #121212 !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 4px;
    padding: 8px;
    width: 60px;
    text-align: center;
    font-weight: bold;
    outline: none;
}

.multibox-input:focus {
    border-color: #5e17eb !important;
    box-shadow: 0 0 5px rgba(94, 23, 235, 0.5);
}

/* Contenedor de Resumen */
.multibox-summary {
    background: #252525;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.multibox-confirm-btn {
    background: #5e17eb;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.multibox-confirm-btn:disabled {
    background: #444 !important;
    color: #888 !important;
    cursor: not-allowed;
}

.multibox-confirm-btn:not(:disabled):hover {
    background: #7a3cf0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(94, 23, 235, 0.4);
}

/* Efecto de resaltado para filas locales */
.row-local-highlight {
    background-color: #05fa931a !important;
    /* Verde neón muy tenue */
    border-left: 4px solid #05fa93 !important;
    /* Barra lateral verde */
    transition: all 0.3s ease;
}

.row-local-highlight:hover {
    background-color: #d9ff00 !important;
    box-shadow: inset 0 0 10px rgba(5, 250, 147, 0.2);
}

/* Badge local con pulso suave */
.badge-local {
    background-color: #05fa93;
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75em;
    animation: soft-pulse 2s infinite;
}

@keyframes soft-pulse {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.8;
    }
}

/* Overlay de carga */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    /* Oculto por defecto */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* Por encima de todo, incluso de los modales */
    color: white;
    font-family: sans-serif;
}

/* El círculo giratorio */
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #05fa93;
    /* El verde neón de tu marca */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader-text {
    font-size: 1.2em;
    font-weight: bold;
}

/* Estilo para el nuevo GIF en el overlay de carga */
.loader-gif {
    width: 380px;
    /* Tamaño ajustable según prefieras */
    height: auto;
    margin-bottom: 20px;
    /* Espacio respecto al spinner */
    border-radius: 20px;
    /* Bordes redondeados para seguir tu estilo */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* Sombra para darle profundidad */
}

/* Ajuste opcional: podemos hacer que el spinner sea un poco más pequeño 
   si el GIF ya ocupa mucho espacio */
.loader-spinner {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.view-overlay {
    position: fixed;
    top: 0;
    left: 250px;
    /* Ancho de tu sidebar */
    width: calc(100% - 250px);
    height: 100vh;
    background: #f4f7f6;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
    transition: all 0.3s ease;
    color: #333;
}

/* Adaptación Modo Oscuro */
body.dark-mode .view-overlay {
    background: #121212;
    color: #eee;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #5e17eb;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.stock-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    padding: 5px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stat-card.urgent {
    background: #ffebee;
    color: #c62828;
}

.stat-card.info {
    background: #e3f2fd;
    color: #1565c0;
}

.stat-card.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.inventory-table-container {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.dark-mode .inventory-table-container {
    background: #1e1e1e;
}

#inventoryDashboardTable {
    width: 100%;
    border-collapse: collapse;
}

#inventoryDashboardTable th {
    text-align: left;
    padding: 12px;
    background: #5e17eb;
    color: white;
}

#inventoryDashboardTable td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

/* 1. Hacer que la cabecera de la tabla no se mueva al bajar */
#inventoryDashboardTable thead th {
    position: sticky;
    top: -20px;
    /* Se ajusta a la parte superior del contenedor */
    z-index: 10;
    background-color: #5e17eb;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 2. Estilizar el scroll para que sea más moderno */
#inventoryDashboard::-webkit-scrollbar {
    width: 10px;
}

#inventoryDashboard::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#inventoryDashboard::-webkit-scrollbar-thumb {
    background: #5e17eb;
    border-radius: 5px;
}

#inventoryDashboard::-webkit-scrollbar-thumb:hover {
    background: #4a11b8;
}

/* 3. Botón flotante "Volver Arriba" */
#backToTopStock {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1001;
    border: none;
    outline: none;
    background-color: #05fa93;
    /* Verde Stocka para que resalte */
    color: #1a1a1a;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, opacity 0.3s;
}

#backToTopStock:hover {
    transform: scale(1.1);
    background-color: #04d688;
}

.stat-card.empty-box {
    background: #e0e0e0;
    color: #424242;
}

body.dark-mode .stat-card.empty-box {
    background: #333;
    color: #bbb;
}

.btn-box-history {
    background: #f0eaff;
    border: 1px solid #5e17eb;
    color: #5e17eb;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 0.8em;
    transition: all 0.2s;
}

.btn-box-history:hover {
    background: #5e17eb;
    color: white;
}

/* Estilos para los botones de destino en derivación masiva */
.btn-dest {
    border: none;
    color: white;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1em;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-dest:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.btn-dest:active {
    transform: translateY(0);
}

.btn-dest:disabled {
    background: #ccc !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Overlay de bloqueo por desconexión de servidor */
#serverConnectionOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 99999;
    display: flex;
    /* Flex to center */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

/* =========================================
   TOAST NOTIFICATION STYLES (COMPACT TOP)
   ========================================= */
#toastNotification {
    visibility: hidden;
    min-width: auto;
    max-width: 90%;
    background-color: #e8e8e8;
    color: #000000;
    text-align: center;
    border-radius: 12px;
    padding: 12px 24px;
    position: fixed;
    z-index: 99999;
    left: 50%;
    top: -100px;
    bottom: auto;
    transform: translateX(-50%);
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#toastNotification.show {
    visibility: visible;
    opacity: 1;
    top: 30px;
}

#toastNotification i {
    color: #5e17eb;
    font-size: 1.2em;
}

/* Estilos para el dropdown de b�squeda en historial */
.search-results-dropdown {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
}

.search-result-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 0.9em;
}

.search-result-item:hover {
    background-color: #f5f5f5;
    color: #5e17eb;
    font-weight: bold;
}

.search-result-item:last-child {
    border-bottom: none;
}

/* Estilos para Alerta SLA - Ubicación ajustada para no tapar el pending order list */
.sla-toast {
    bottom: 30px;
    right: 480px;
    /* Posicionado a la izquierda del panel de 450px + margen */
    top: auto !important;
    /* Sobrescribir el top: -100px por defecto de toast-notification */
    left: auto;
    background: #fff;
    border-left: 5px solid #ff1744;
    /* Rojo vibrante */
    transform: translateY(150%);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Ajuste cuando el panel derecho está colapsado */
#right-panel.collapsed~.sla-toast {
    right: 30px;
}

.sla-toast.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.sla-toast .toast-icon i {
    color: #ff1744;
    font-size: 1.5em;
}

.sla-toast .toast-title {
    color: #ff1744;
    font-weight: bold;
    font-size: 1.1em;
}

/* --- ESPECIALES MERCADOLIBRE / FALABELLA --- */
.ml-toast {
    border-left: 5px solid #ffe600;
    /* Amaraillo ML */
}

.ml-toast i {
    color: #ffe600;
}

.falabella-toast {
    border-left: 5px solid #00642d;
    /* Verde Falabella */
}

.falabella-toast i {
    color: #00642d;
}

/* ==========================================
   DARK MODE: HISTORY LOG POPUP
   ========================================== */

/* History popup input field */
body.dark-mode #historyOrderInput {
    background-color: #444444;
    color: #ffffff;
    border: 2px solid #5e17eb;
}

/* History search button */
body.dark-mode #searchHistoryBtn {
    background-color: #5e17eb;
    color: #ffffff;
}

body.dark-mode #searchHistoryBtn:hover {
    background-color: #7c3aed;
}

/* History order info box */
body.dark-mode #historyOrderInfo {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    border-left: 5px solid #5e17eb !important;
    color: #e0e0e0 !important;
}

body.dark-mode #historyOrderInfo strong {
    color: #ffffff;
}

body.dark-mode #historyOrderInfo i {
    color: #5e17eb !important;
}

/* History table styling */
body.dark-mode #historyResultsContainer {
    border-top: 1px solid #444;
}

body.dark-mode #historyResultsContainer table thead {
    background: #3a3a3a !important;
}

body.dark-mode #historyResultsContainer table th {
    color: #ffffff !important;
    border-bottom: 2px solid #5e17eb !important;
}

body.dark-mode #historyResultsContainer table tbody tr {
    border-bottom: 1px solid #444 !important;
}

body.dark-mode #historyResultsContainer table tbody td {
    color: #e0e0e0 !important;
    border-bottom: 1px solid #444 !important;
}

/* Loading and empty states */
body.dark-mode #historyLoading,
body.dark-mode #historyEmpty {
    color: #aaa !important;
}

/* PDF download button */
body.dark-mode #downloadHistoryPdfBtn {
    background-color: #d32f2f;
    color: white;
}

body.dark-mode #downloadHistoryPdfBtn:hover {
    background-color: #b71c1c;
}

/* History popup title */
body.dark-mode #historyLogPopup h2 {
    color: #ffffff;
}

body.dark-mode #historyLogPopup h2 i {
    color: #5e17eb;
}

/* ==========================================
   DARK MODE: STATS BAR
   ========================================== */

body.dark-mode .stat-card {
    background: #111d30;
    border: 1px solid #1e3358;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

body.dark-mode .stat-value {
    color: #ffffff;
}

body.dark-mode .stat-label {
    color: #aaa;
}

/* ==========================================
   DARK MODE: RETIROS POPUP
   ========================================== */

body.dark-mode #retirosPopup .popup-content {
    background-color: #303030;
    color: #ffffff;
}

body.dark-mode #retirosPopup h2 {
    color: #ffffff;
}

body.dark-mode #retirosPopup h2 i {
    color: #ff6c40;
}

body.dark-mode #retirosPopup table {
    color: #e0e0e0;
}

body.dark-mode #retirosPopup table thead {
    background: #3a3a3a;
}

body.dark-mode #retirosPopup table th {
    color: #ffffff;
    border-bottom: 2px solid #ff6c40;
}

body.dark-mode #retirosPopup table tbody tr {
    border-bottom: 1px solid #444;
}

body.dark-mode #retirosPopup table tbody td {
    color: #e0e0e0;
    border-bottom: 1px solid #444;
}

body.dark-mode #retirosPopup button {
    background-color: #ff6c40;
    color: white;
}

body.dark-mode #retirosPopup button:hover {
    background-color: #ff8a65;
}

/* ==========================================
   COMMENT BUTTON
   ========================================== */





body.dark-mode 

body.dark-mode 

/* Comment popup dark mode */
body.dark-mode #commentPopup .popup-content {
    background-color: #303030;
    color: #ffffff;
}

body.dark-mode #commentPopup h2 {
    color: #ffffff;
}

body.dark-mode #commentPopup h2 i {
    color: #5e17eb;
}

body.dark-mode #commentPopup label {
    color: #aaa !important;
}

body.dark-mode #commentPopup #commentOrderNumber {
    color: #5e17eb !important;
}

body.dark-mode #commentTextarea {
    background-color: #444;
    color: #ffffff;
    border: 2px solid #5e17eb;
}

body.dark-mode #commentTextarea::placeholder {
    color: #888;
}



.comment-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ff1744;
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .comment-badge {
    border: 2px solid #333;
}

#commentPopup {
    z-index: 10000 !important;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

/* Estilos para el botón de eliminar y papelera */
#openTrashBtn:hover {
    background-color: #b71c1c !important;
    color: white !important;
}

#trashTableBody tr:hover {
    background-color: #ffebee;
}

.delete-order-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: #d32f2f;
    margin-left: auto;
    /* Push to right if in flex container */
    padding: 5px;
    transition: color 0.3s;
}

.delete-order-btn:hover {
    color: #b71c1c;
    transform: scale(1.1);
}

/* Estilo para el botón de eliminar aislado */
.delete-order-btn-isolated {
    background-color: #ffebee;
    /* Fondo rojo muy suave */
    border: 2px solid #ef9a9a;
    /* Borde rojo suave */
    color: #d32f2f;
    /* Icono rojo oscuro */
    border-radius: 50%;
    /* Circular */
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.delete-order-btn-isolated:hover {
    background-color: #d32f2f;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-color: #d32f2f;
}

/* Z-Index Fix para Popups */
.popup {
    z-index: 99999 !important;
    /* Asegurar que esté por encima de elementos normales */
}

#deleteAuthPopup,
#authQrPopup,
#deleteAuthErrorMessage {
    z-index: 100005 !important; /* Capa superior para autorizaciones por encima de cualquier otro modal */
}

#right-panel {
    z-index: 9000;
    /* Sidebar derecho alto pero menor que popups */
}

#sidebar {
    z-index: 8000;
    /* Sidebar izquierdo */
}


/* --- AJUSTES PARA CELULARES --- */
@media (max-width: 768px) {

    /* El menú lateral se oculta o se vuelve arriba */
    #sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }

    /* El contenedor principal ocupa todo el ancho */
    #main-content {
        margin-left: 0;
        padding: 10px;
    }

    /* Las tarjetas de productos se vuelven más grandes para tocarlas con el dedo */
    .pending-item-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
    }

    /* Los botones de acción se vuelven gigantes para el pulgar */
    

    .action-buttons-row button {
        width: 100%;
        padding: 15px;
        font-size: 1.1em;
    }
}

/* -------------------------------------
   MODO LOTE VERIFICATION INPUT STYLES
   -------------------------------------*/
.lote-verification-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

.lote-input-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 10px 15px;
    transition: all 0.2s ease;
    cursor: text;
}

body.dark-mode .lote-input-box {
    background: #424242;
    border-color: #555;
}

.lote-input-box.despachados-box {
    border-color: #5e17eb;
    background: rgba(94, 23, 235, 0.05);
}

body.dark-mode .lote-input-box.despachados-box {
    background: rgba(94, 23, 235, 0.15);
}

.lote-input-box.pendientes-box {
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.05);
}

body.dark-mode .lote-input-box.pendientes-box {
    background: rgba(244, 67, 54, 0.15);
}

.lote-input-box:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.lote-icon {
    font-size: 1.8em;
    margin-right: 15px;
}

.despachados-box .lote-icon {
    color: #5e17eb;
}

.pendientes-box .lote-icon {
    color: #f44336;
}

.lote-input-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lote-input-content label {
    font-size: 0.75em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.despachados-box .lote-input-content label {
    color: #5e17eb;
}

.pendientes-box .lote-input-content label {
    color: #f44336;
}

body.dark-mode .despachados-box .lote-input-content label {
    color: #a476f9;
}

body.dark-mode .pendientes-box .lote-input-content label {
    color: #ff7961;
}

.lote-input-content input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.4em !important;
    font-weight: bold !important;
    color: #333 !important;
    outline: none !important;
    box-shadow: none !important;
}

body.dark-mode .lote-input-content input {
    color: #fff !important;
}

.lote-input-content input::placeholder {
    color: #bbb;
    font-weight: normal;
}

/* -------------------------------------
   STOCK REQUESTS UI STYLES
   -------------------------------------*/

.tab-buttons {
    display: flex;
}

.tab-btn {
    background: #f1f1f1;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.tab-btn.active {
    background: #5e17eb;
    color: white;
    border-radius: 4px;
}

.req-status-pending {
    color: #f39c12;
    font-weight: bold;
}

.req-status-partial {
    color: #e65100;
    font-weight: bold;
}

.req-status-completed {
    color: #2ecc71;
    font-weight: bold;
}

.req-status-rejected {
    color: #e74c3c;
    font-weight: bold;
}

.req-item-row {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
    align-items: center;
}

.req-item-row input[type="text"], .req-item-row input[type="number"] {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.remove-req-item-btn {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
}

.attend-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.attend-item-row:last-child {
    border-bottom: none;
}

body.dark-mode .attend-item-row {
    border-bottom: 1px solid #444;
}

body.dark-mode #requestBranchSelect, 
body.dark-mode #requestDateNeeded, 
body.dark-mode #requestNotes, 
body.dark-mode #attendCommitmentDate, 
body.dark-mode #attendComments, 
body.dark-mode .req-item-row input {
    background: #333;
    color: white;
    border: 1px solid #555;
}
/* Dark mode styles for Stock Requests UI */
.attend-status-btn { background: #f1f1f1; color: #333; }
body.dark-mode .attend-status-btn { background: #333; color: #fff; border-color: #555; }
body.dark-mode .tab-btn { background: #333; color: #fff; border-color: #555; }
body.dark-mode .tab-btn.active { background: #5e17eb; color: white; border-color: #5e17eb; }
body.dark-mode #incomingRequestsView th, body.dark-mode #outgoingRequestsView th, body.dark-mode #completedRequestsView th { background: #222 !important; border-bottom: 2px solid #444 !important; color: white; }
body.dark-mode #incomingRequestsView td, body.dark-mode #outgoingRequestsView td, body.dark-mode #completedRequestsView td { border-bottom: 1px solid #444 !important; }
body.dark-mode #attendItemsContainer { background: #222 !important; border-color: #444 !important; }
body.dark-mode #attendStockRequestPopup div[style*="background: #f9f9f9"] { background: #2a2a2a !important; border-color: #444 !important; }
body.dark-mode #attendTransportista, body.dark-mode #attendPreparador { background: #333; color: white; border: 1px solid #555; }
body.dark-mode #stockNotificationToast { 
    background: linear-gradient(135deg, #5e17eb, #4e14c2) !important; 
    color: white !important; 
    border: 1px solid #7c3aed !important;
    box-shadow: 0 4px 15px rgba(94, 23, 235, 0.4) !important;
    animation: stockPulse 2s infinite ease-in-out;
}
body.dark-mode #pendingStockReqCount {
    background: #05fa93 !important;
    color: #000 !important;
}
@keyframes stockPulse {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}


/* Deleted Requests Styles */
.req-row-deleted { opacity: 0.7; background: #fafafa; }
.req-status-deleted { background: #e0e0e0; color: #555; padding: 3px 8px; border-radius: 3px; font-size: 0.8em; }

body.dark-mode .req-row-deleted { background: #2a2a2a !important; color: #ccc; }
body.dark-mode .req-row-deleted td { border-bottom: 1px solid #444 !important; }
body.dark-mode .req-status-deleted { background: #444; color: #bbb; }
body.dark-mode #deletedRequestsView th, body.dark-mode #completedRequestsView th { background: #222 !important; border-bottom: 2px solid #444 !important; color: white; }
body.dark-mode #deletedRequestsView td, body.dark-mode #completedRequestsView td { border-bottom: 1px solid #444 !important; }

/* ==========================================
   DARK MODE: ACTIVE USER WIDGET
   ========================================== */
body.dark-mode #activeUserWidget {
    background: #2a2a2a !important;
    border-color: #444 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
}

body.dark-mode #activeUserName {
    color: #ffffff !important;
}

body.dark-mode #activeUserRut {
    color: #aaaaaa !important;
}

body.dark-mode #activeUserWidget .fa-user-circle {
    color: #8c9eff !important;
}

/* ==========================================
   FLOATING ACTION BUTTONS
   ========================================== */
.floating-action-btn {
    margin: 15px 0 15px 0;
    color: white;
    border: none;
    border-radius: 50%; /* Circle shape */
    padding: 0;
    width: 45px;
    height: 45px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s, filter 0.2s, box-shadow 0.2s;
    z-index: 1000;
}

.floating-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.4);
    filter: brightness(1.15); /* Efecto hover universal */
}

/* Specific Colors */
.btn-refresh {
    background-color: #008a45;
}
body.dark-mode .btn-refresh {
    background-color: #00b359;
    color: #121212;
}

.btn-retiros {
    background-color: #ff9800;
}
body.dark-mode .btn-retiros {
    background-color: #ffb74d;
    color: #121212;
}

.floating-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    margin: 0 !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1;
    border-radius: 50% !important;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
/* --- LOCATION REGISTRY DASHBOARD --- */
#locationRegistryPopup {
    background: #f5f7fa;
}

.registry-header {
    background: #37474f !important;
    color: white;
    padding: 15px;
    display: flex;
    align-items: center;
}

.registry-select {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #546e7a;
    background: #263238;
    color: white;
    min-width: 150px;
}

.registry-refresh-btn {
    background: #546e7a;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.registry-refresh-btn:hover {
    background: #78909c;
}

.registry-toolbar {
    padding: 15px;
    background: #ffffff;
    border-bottom: 1px solid #cfd8dc;
    display: flex;
    align-items: center;
    gap: 15px;
}

.registry-tab-btn {
    padding: 8px 15px;
    cursor: pointer;
    background: #eceff1;
    color: #546e7a;
    font-weight: bold;
    border: 1px solid #cfd8dc;
}

.registry-tab-btn:first-child {
    border-radius: 5px 0 0 5px;
}

.registry-tab-btn:last-child {
    border-radius: 0 5px 5px 0;
}

.registry-tab-btn.active {
    background: #37474f !important;
    color: white !important;
    border-color: #37474f !important;
}

.registry-search {
    flex: 1;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #cfd8dc;
    font-size: 1em;
}

.registry-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9em;
    background: white;
}

.registry-table th {
    padding: 10px;
    border-bottom: 2px solid #b0bec5;
    background: #eceff1;
    color: #37474f;
    position: sticky;
    top: 0;
    z-index: 10;
}

.registry-table td {
    padding: 8px;
    border-bottom: 1px solid #eceff1;
    color: #333;
}

.registry-filter-select {
    width: 100%;
    padding: 4px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    font-size: 0.85em;
    font-weight: normal;
}

/* --- DARK MODE FOR LOCATION REGISTRY --- */
body.dark-mode #locationRegistryPopup {
    background: #121212 !important;
}

body.dark-mode .registry-header {
    background: #1e1e1e !important;
    border-bottom: 1px solid #333;
}

body.dark-mode .registry-toolbar {
    background: #1e1e1e;
    border-bottom: 1px solid #333;
}

body.dark-mode .registry-tab-btn {
    background: #2d2d2d;
    color: #aaa;
    border-color: #444;
}

body.dark-mode .registry-tab-btn.active {
    background: #5e17eb !important; /* Brand purple color */
    color: white !important;
    border-color: #5e17eb !important;
}

body.dark-mode .registry-search {
    background: #2d2d2d;
    color: white;
    border-color: #444;
}

body.dark-mode .registry-table {
    background: #121212;
}

body.dark-mode .registry-table th {
    background: #1e1e1e;
    color: #fff;
    border-bottom: 2px solid #444;
}

body.dark-mode .registry-table td {
    color: #ddd;
    border-bottom: 1px solid #2a2a2a;
}

body.dark-mode .registry-filter-select {
    background: #333;
    color: white;
    border-color: #555;
}

.registry-filter-input {
    width: 100%;
    padding: 4px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    font-size: 0.85em;
    font-weight: normal;
    box-sizing: border-box;
}

body.dark-mode .registry-filter-input {
    background: #333;
    color: white;
    border-color: #555;
}

/* --- DARK MODE FOR STOCK MOVEMENT POPUP --- */
body.dark-mode #stockMovementPopup .modal-content {
    background: #2a2a2a !important;
}

body.dark-mode #stockMovementPopup h2 {
    color: #ffffff !important;
}

body.dark-mode #movementItemText {
    color: #bbbbbb !important;
}

body.dark-mode #stockMovementPopup label {
    color: #aaaaaa !important;
}

body.dark-mode #stockMovementPopup select,
body.dark-mode #stockMovementPopup input[type="number"],
body.dark-mode #stockMovementPopup input[type="text"] {
    background: #333333 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

body.dark-mode #movementProductInfo {
    background: #333333 !important;
    color: #eeeeee !important;
}

body.dark-mode #movementProductInfo strong {
    color: #ffffff !important;
}

/* ===================================================
   DARK MODE — Pick List Selection Popup
   =================================================== */

/* Contenedor principal */
body.dark-mode #pickListSelectionPopup .popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

/* Título */
body.dark-mode #pickListSelectionPopup .popup-content h2 {
    color: #ffffff !important;
    border-bottom: 1px solid #383860;
    padding-bottom: 10px;
}

/* Input de búsqueda */
body.dark-mode #pickListSearchInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #pickListSearchInput::placeholder {
    color: #888 !important;
}
body.dark-mode #pickListFilters .fas.fa-search {
    color: #888 !important;
}

/* Selects (Estado, Courier, Ordenar por) */
body.dark-mode #statusFilterPopup,
body.dark-mode #courierFilterPopup,
body.dark-mode #sortPickListPopup {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #sortPickListPopup {
    border-color: #7b5fc5 !important;
}

/* Labels de los filtros */
body.dark-mode #pickListFilters label {
    color: #cccccc !important;
}

/* Banner "solo pendientes" */
body.dark-mode .picklist-pending-banner {
    background: #1a2a3a !important;
    border: 1px solid #1e4a6e !important;
}
body.dark-mode .picklist-pending-label {
    color: #64b5f6 !important;
}

/* Lista de órdenes */
body.dark-mode #pickListOrders {
    background: #16161e !important;
    border-color: #383860 !important;
}

/* Items individuales */
body.dark-mode .picklist-item-row {
    border-bottom-color: #2a2a3e !important;
    color: #e0e0e0 !important;
}
body.dark-mode .picklist-item-row:hover {
    background: #2a2a4a !important;
}
body.dark-mode .order-item {
    border-bottom-color: #2a2a3e !important;
    color: #e0e0e0 !important;
}
body.dark-mode .order-item:hover {
    background: #2a2a4a !important;
}

/* Badges dentro de los items */
body.dark-mode .badge-agenda {
    background: #333355 !important;
    color: #cccccc !important;
}

/* Checkboxes */
body.dark-mode #pickListOrders input[type="checkbox"] {
    accent-color: #7b5fc5;
}

/* Botones del popup */
body.dark-mode #selectAllBtn {
    background: #00a86b !important;
    color: #001a10 !important;
}
body.dark-mode #generatePickListBtn {
    background: #7b5fc5 !important;
    color: white !important;
}
body.dark-mode #closePickListPopupBtn {
    background: #333355 !important;
    color: #cccccc !important;
    border: 1px solid #4a4a6a !important;
}
body.dark-mode #closePickListPopupBtn:hover {
    background: #4a4a6a !important;
    color: #ffffff !important;
}

/* Scrollbar dentro del popup en dark mode */
body.dark-mode #pickListOrders::-webkit-scrollbar {
    width: 6px;
}
body.dark-mode #pickListOrders::-webkit-scrollbar-track {
    background: #1e1e2e;
}
body.dark-mode #pickListOrders::-webkit-scrollbar-thumb {
    background: #4a4a6a;
    border-radius: 3px;
}

/* ===================================================
   DARK MODE — SKU Search Popup (Buscar por Producto)
   =================================================== */

body.dark-mode .sku-search-popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

/* Título */
body.dark-mode .sku-search-popup-content h2 {
    color: #26c6b4 !important;
}

/* Botón X esquina */
body.dark-mode #closeSkuSearchBtn {
    color: #888 !important;
    background: transparent !important;
}
body.dark-mode #closeSkuSearchBtn:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}

/* Input de búsqueda */
body.dark-mode #skuSearchInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #26c6b4 !important;
}
body.dark-mode #skuSearchInput::placeholder {
    color: #666 !important;
}
body.dark-mode #skuSearchInput:focus {
    box-shadow: 0 0 0 3px rgba(38,198,180,0.2) !important;
}

/* Toggle label y hint */
body.dark-mode .sku-toggle-label {
    color: #cccccc !important;
}
body.dark-mode .sku-hint-text {
    color: #666 !important;
}

/* Contenedor de resultados */
body.dark-mode #skuSearchResultsContainer {
    border-color: #383860 !important;
}

/* Header de tabla */
body.dark-mode .sku-table-head {
    background: #2a2a3e !important;
}
body.dark-mode .sku-table-head th {
    color: #a0a0cc !important;
    border-bottom: 1px solid #383860;
}

/* Filas de resultados */
body.dark-mode #skuSearchTableBody tr {
    border-bottom-color: #2a2a3e !important;
    color: #e0e0e0 !important;
}
body.dark-mode #skuSearchTableBody tr:hover {
    background-color: #2a2a4a !important;
}
body.dark-mode #skuSearchTableBody td {
    color: #e0e0e0 !important;
}

/* Highlight de coincidencia SKU */
body.dark-mode .sku-match-highlight {
    color: #26c6b4 !important;
}

/* Estado vacío */
body.dark-mode #skuSearchEmptyState {
    color: #555 !important;
}

/* Botón cerrar (footer) */
body.dark-mode .sku-search-popup-content > div:last-child button {
    background: #2a2a3e !important;
    color: #cccccc !important;
    border-color: #4a4a6a !important;
}
body.dark-mode .sku-search-popup-content > div:last-child button:hover {
    background: #383860 !important;
    color: #ffffff !important;
}

/* Scrollbar */
body.dark-mode #skuSearchResultsContainer::-webkit-scrollbar {
    width: 6px;
}
body.dark-mode #skuSearchResultsContainer::-webkit-scrollbar-track {
    background: #1e1e2e;
}
body.dark-mode #skuSearchResultsContainer::-webkit-scrollbar-thumb {
    background: #4a4a6a;
    border-radius: 3px;
}

/* ===================================================
   DARK MODE — Requerimientos de Stock (3 popups)
   =================================================== */

/* --- Popup principal: stockRequestsPopup --- */
body.dark-mode #stockRequestsPopup .popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode #stockRequestsPopup h2 {
    color: #ffffff !important;
    border-bottom: 1px solid #383860;
    padding-bottom: 10px;
}

/* Tabs */
body.dark-mode #stockRequestsPopup .tab-btn {
    background: #2a2a3e !important;
    color: #aaaacc !important;
    border: 1px solid #383860 !important;
}
body.dark-mode #stockRequestsPopup .tab-btn.active,
body.dark-mode #stockRequestsPopup .tab-btn:hover {
    background: #5e17eb !important;
    color: #ffffff !important;
    border-color: #5e17eb !important;
}

/* Botón Nueva Solicitud */
body.dark-mode #openCreateRequestBtn {
    background: #1b8a4a !important;
    color: #ffffff !important;
    border: none !important;
}
body.dark-mode #openCreateRequestBtn:hover {
    background: #25a85a !important;
}

/* Contenedores de vistas (tablas) */
body.dark-mode #incomingRequestsView,
body.dark-mode #outgoingRequestsView,
body.dark-mode #completedRequestsView,
body.dark-mode #deletedRequestsView {
    background: #16161e !important;
    border-color: #383860 !important;
}

/* Cabeceras de tabla */
body.dark-mode #stockRequestsPopup thead tr {
    background: #2a2a3e !important;
}
body.dark-mode #stockRequestsPopup thead th {
    color: #a0a0cc !important;
    border-bottom-color: #383860 !important;
}

/* Filas de tabla */
body.dark-mode #incomingRequestsTableBody tr,
body.dark-mode #outgoingRequestsTableBody tr,
body.dark-mode #completedRequestsTableBody tr,
body.dark-mode #deletedRequestsTableBody tr {
    border-bottom-color: #2a2a3e !important;
    color: #e0e0e0 !important;
}
body.dark-mode #incomingRequestsTableBody tr:hover,
body.dark-mode #outgoingRequestsTableBody tr:hover,
body.dark-mode #completedRequestsTableBody tr:hover,
body.dark-mode #deletedRequestsTableBody tr:hover {
    background: #2a2a4a !important;
}
body.dark-mode #stockRequestsPopup tbody td {
    color: #e0e0e0 !important;
}

/* Empty states */
body.dark-mode #incomingEmptyState,
body.dark-mode #outgoingEmptyState,
body.dark-mode #completedEmptyState,
body.dark-mode #deletedEmptyState {
    color: #555 !important;
}

/* Botón Cerrar (footer) */
body.dark-mode #closeStockRequestsBtn {
    background: #2a2a3e !important;
    color: #cccccc !important;
    border: 1px solid #4a4a6a !important;
}
body.dark-mode #closeStockRequestsBtn:hover {
    background: #383860 !important;
    color: #ffffff !important;
}

/* Scrollbar tablas */
body.dark-mode #incomingRequestsView::-webkit-scrollbar,
body.dark-mode #outgoingRequestsView::-webkit-scrollbar,
body.dark-mode #completedRequestsView::-webkit-scrollbar,
body.dark-mode #deletedRequestsView::-webkit-scrollbar { width: 6px; }
body.dark-mode #incomingRequestsView::-webkit-scrollbar-track,
body.dark-mode #outgoingRequestsView::-webkit-scrollbar-track,
body.dark-mode #completedRequestsView::-webkit-scrollbar-track,
body.dark-mode #deletedRequestsView::-webkit-scrollbar-track { background: #1e1e2e; }
body.dark-mode #incomingRequestsView::-webkit-scrollbar-thumb,
body.dark-mode #outgoingRequestsView::-webkit-scrollbar-thumb,
body.dark-mode #completedRequestsView::-webkit-scrollbar-thumb,
body.dark-mode #deletedRequestsView::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 3px; }

/* --- Popup: createStockRequestPopup --- */
body.dark-mode #createStockRequestPopup .popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode #createStockRequestPopup h2 {
    color: #ffffff !important;
    border-bottom: 1px solid #383860;
    padding-bottom: 10px;
}
body.dark-mode #createStockRequestPopup label {
    color: #cccccc !important;
}
body.dark-mode #editRequestInfoArea {
    background: #2a2a3e !important;
    border-color: #383860 !important;
    color: #e0e0e0 !important;
}
body.dark-mode #requestBranchSelect,
body.dark-mode #requestDateNeeded {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #requestItemsContainer {
    background: #16161e !important;
    border-color: #383860 !important;
}
body.dark-mode #requestNotes {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #addRequestItemBtn {
    background: #2a2a3e !important;
    color: #cccccc !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #addRequestItemBtn:hover {
    background: #383860 !important;
    color: #ffffff !important;
}
body.dark-mode #submitRequestBtn {
    background: #1b8a4a !important;
    color: #ffffff !important;
    border: none !important;
}
body.dark-mode #closeCreateRequestBtn {
    background: #7a1515 !important;
    color: #ffffff !important;
    border: none !important;
}

/* --- Popup: attendStockRequestPopup --- */
body.dark-mode #attendStockRequestPopup .popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode #attendStockRequestPopup h2 {
    color: #ffffff !important;
    border-bottom: 1px solid #383860;
    padding-bottom: 10px;
}
body.dark-mode #attendStockRequestPopup label {
    color: #cccccc !important;
}
/* Info box superior */
body.dark-mode .stock-info-box {
    background: #2a2a3e !important;
    border-color: #383860 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .stock-info-box strong {
    color: #ffffff !important;
}
/* Items container */
body.dark-mode #attendItemsContainer {
    background: #16161e !important;
    border-color: #383860 !important;
    color: #e0e0e0 !important;
}
/* Inputs de compromiso */
body.dark-mode #attendCommitmentDate,
body.dark-mode #attendTransportista,
body.dark-mode #attendPreparador {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
/* Textarea comentarios */
body.dark-mode #attendComments {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
/* Botones */
body.dark-mode #attendStockRequestPopup .popup-buttons button {
    border: none !important;
}
body.dark-mode #attendStockRequestPopup .popup-buttons button:first-child {
    background: #1b8a4a !important;
    color: #ffffff !important;
}
body.dark-mode #attendStockRequestPopup .popup-buttons button:last-child {
    background: #2a2a3e !important;
    color: #cccccc !important;
    border: 1px solid #4a4a6a !important;
}

/* ===================================================
   DARK MODE — Historial Logs (historyLogPopup + skuHistoryPopup)
   =================================================== */

/* --- Popup historyLogPopup --- */
body.dark-mode .history-popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode #closeHistoryLogBtn {
    color: #888 !important;
}
body.dark-mode #closeHistoryLogBtn:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}
body.dark-mode .history-popup-content h2 {
    color: #90a4ae !important;
}
body.dark-mode #historyOrderInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #historyOrderInput::placeholder { color: #555 !important; }
body.dark-mode #searchHistoryBtn {
    background: #4a5568 !important;
    color: #ffffff !important;
}
body.dark-mode #downloadHistoryPdfBtn {
    background: linear-gradient(135deg, #7a1515, #b71c1c) !important;
}
/* Info box */
body.dark-mode .history-info-box {
    background: #2a2a3e !important;
    border-color: #383860 !important;
    border-left-color: #607d8b !important;
}
body.dark-mode .history-info-box span,
body.dark-mode .history-info-box div { color: #e0e0e0 !important; }
body.dark-mode .history-info-box > div > div > span:first-child { color: #888 !important; }
/* Tabla */
body.dark-mode #historyResultsContainer {
    border-color: #383860 !important;
}
body.dark-mode .history-table-head {
    background: #2a2a3e !important;
}
body.dark-mode .history-table-head th {
    color: #a0a0cc !important;
    border-bottom-color: #383860 !important;
}
body.dark-mode #historyTableBody tr:hover { background: #2a2a4a !important; }
body.dark-mode #historyTableBody td { border-bottom-color: #2a2a3e !important; }
body.dark-mode .hist-date-cell { color: #aaaacc !important; }
body.dark-mode .hist-items { color: #b0b8d0 !important; }
body.dark-mode .hist-detail { color: #9090aa !important; }
body.dark-mode #historyLoading { color: #666 !important; }
body.dark-mode #historyEmpty { color: #555 !important; }
body.dark-mode #historyResultsContainer::-webkit-scrollbar { width: 6px; }
body.dark-mode #historyResultsContainer::-webkit-scrollbar-track { background: #1e1e2e; }
body.dark-mode #historyResultsContainer::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 3px; }

/* --- Popup skuHistoryPopup --- */
body.dark-mode #skuHistoryPopup .popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode #skuHistoryPopup .close-btn { color: #888 !important; }
body.dark-mode #skuHistoryPopup h2 { color: #80cbc4 !important; }
body.dark-mode #skuHistoryInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #skuHistoryInput::placeholder { color: #555 !important; }
body.dark-mode #searchSkuHistoryBtn { background: #37474f !important; color: #ffffff !important; }
body.dark-mode #downloadSkuExcelBtn { background: #1b5e20 !important; }
body.dark-mode #downloadSkuPdfBtn { background: #7a1515 !important; }
body.dark-mode #skuHistoryResultsContainer { border-top-color: #383860 !important; }
body.dark-mode #skuHistoryResultsContainer thead { background: #2a2a3e !important; }
body.dark-mode #skuHistoryResultsContainer thead th {
    color: #a0a0cc !important;
    border-bottom-color: #383860 !important;
}
body.dark-mode #skuHistoryTableBody tr:hover { background: #2a2a4a !important; }
body.dark-mode #skuHistoryTableBody td { border-bottom-color: #2a2a3e !important; color: #cccccc !important; }
body.dark-mode #skuHistoryLoading { color: #666 !important; }
body.dark-mode #skuHistoryEmpty { color: #555 !important; }
body.dark-mode #skuHistoryResultsContainer::-webkit-scrollbar { width: 6px; }
body.dark-mode #skuHistoryResultsContainer::-webkit-scrollbar-track { background: #1e1e2e; }
body.dark-mode #skuHistoryResultsContainer::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 3px; }

/* ===================================================
   DARK MODE — Impresion Masiva de Etiquetas (bulkLabelPopup)
   =================================================== */

body.dark-mode .bulk-label-popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode .bulk-label-popup-content h2 {
    color: #b39ddb !important;
}
/* Botón cerrar */
body.dark-mode .bulk-label-popup-content > button:first-of-type {
    color: #888 !important;
}
body.dark-mode .bulk-label-popup-content > button:first-of-type:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}
/* Filtros */
body.dark-mode #bulkLabelAgendaFilter,
body.dark-mode #bulkLabelSearchInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #bulkLabelSearchInput::placeholder { color: #555 !important; }
body.dark-mode .bulk-label-popup-content label { color: #aaaacc !important; }
/* Botones Todas/Ninguna */
body.dark-mode .bulk-label-popup-content div[style*="gap: 8px; padding-bottom"] button:first-child {
    background: #1565c0 !important;
}
body.dark-mode .bulk-label-popup-content div[style*="gap: 8px; padding-bottom"] button:last-child {
    background: #424242 !important;
}
/* Tabla container */
body.dark-mode #bulkLabelTableContainer {
    border-color: #383860 !important;
}
/* Thead fijo morado - se mantiene bien en dark */
body.dark-mode .bulk-label-thead { background: #4a148c !important; }
/* Filas */
body.dark-mode #bulkLabelTableBody tr { border-bottom-color: #2a2a3e !important; }
body.dark-mode #bulkLabelTableBody td { color: #d0d0e8 !important; }
body.dark-mode #bulkLabelTableBody tr:hover { background: #2a2a4a !important; }
/* Fila seleccionada */
body.dark-mode #bulkLabelTableBody tr[style*="rgba(103,58,183"] {
    background: rgba(103,58,183,0.18) !important;
}
/* Empty state */
body.dark-mode #bulkLabelEmpty { color: #555 !important; }
/* Scrollbar */
body.dark-mode #bulkLabelTableContainer::-webkit-scrollbar { width: 6px; }
body.dark-mode #bulkLabelTableContainer::-webkit-scrollbar-track { background: #1e1e2e; }
body.dark-mode #bulkLabelTableContainer::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 3px; }
/* Footer */
body.dark-mode .bulk-label-popup-content > div:last-child {
    border-top-color: #383860 !important;
}
body.dark-mode #bulkLabelSelectedCount { color: #b39ddb !important; }
body.dark-mode #bulkLabelTotalCount { color: #555 !important; }
/* Botón Cancelar del footer */
body.dark-mode .bulk-label-popup-content > div:last-child > div button:first-child {
    background: #2a2a3e !important;
    color: #cccccc !important;
    border-color: #4a4a6a !important;
}
body.dark-mode .bulk-label-popup-content > div:last-child > div button:first-child:hover {
    background: #383860 !important;
    color: #ffffff !important;
}

/* Dark mode para nuevos filtros del bulkLabelPopup */
body.dark-mode #bulkLabelStatusFilter,
body.dark-mode #bulkLabelOperatorFilter,
body.dark-mode #bulkLabelComercioFilter {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}

/* ===================================================
   DARK MODE — Retiros Popup (retirosPopup)
   =================================================== */

body.dark-mode .retiros-popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode .retiros-popup-content h2 {
    color: #b39ddb !important;
}
body.dark-mode #closeRetirosPopupBtn {
    color: #888 !important;
}
body.dark-mode #closeRetirosPopupBtn:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}
/* Filtros */
body.dark-mode #searchRetiroInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #searchRetiroInput::placeholder { color: #555 !important; }
body.dark-mode #filterRetiroEstado {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode .retiros-popup-content label { color: #aaaacc !important; }
/* Tabla */
body.dark-mode .retiros-popup-content > div[style*="flex: 1"] {
    border-color: #383860 !important;
}
body.dark-mode .retiros-thead {
    background: #2a2a3e !important;
}
body.dark-mode .retiros-thead th {
    color: #a0a0cc !important;
    border-bottom-color: #383860 !important;
}
body.dark-mode #retirosTableBody tr { border-bottom-color: #2a2a3e !important; }
body.dark-mode #retirosTableBody td { color: #d0d0e8 !important; }
body.dark-mode #retirosTableBody tr:hover { background: rgba(94,23,235,0.12) !important; }
/* Barra de progreso en dark */
body.dark-mode #retirosTableBody div[style*="background:#eee"] {
    background: #383860 !important;
}
body.dark-mode #retirosTableBody span[style*="color:#888"] {
    color: #666 !important;
}
/* Empty state */
body.dark-mode #retirosEmpty { color: #555 !important; }
/* Scrollbar */
body.dark-mode .retiros-popup-content > div[style*="flex: 1"]::-webkit-scrollbar { width: 6px; }
body.dark-mode .retiros-popup-content > div[style*="flex: 1"]::-webkit-scrollbar-track { background: #1e1e2e; }
body.dark-mode .retiros-popup-content > div[style*="flex: 1"]::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 3px; }
/* Footer */
body.dark-mode .retiros-popup-content > div:last-child {
    border-top-color: #383860 !important;
}
body.dark-mode #retirosCount { color: #b39ddb !important; }
body.dark-mode #closeRetirosFooterBtn {
    background: #2a2a3e !important;
    color: #cccccc !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #closeRetirosFooterBtn:hover {
    background: #383860 !important;
    color: #ffffff !important;
}

/* ===================================================
   DARK MODE — Paleta Azul Noche: elementos residuales
   Cubre tarjetas de producto, qty-tag, barra de
   escáner, y demás recuadros con gris antiguo
   =================================================== */

/* Item cantidad tag */
body.dark-mode .item-qty-tag {
    background: #0d1a2e !important;
    border-color: #5e17eb !important;
    color: #e8eaf0 !important;
}

/* Cantidad de ítem (número grande) */
body.dark-mode .item-qty-number {
    color: #e8eaf0 !important;
}

/* Imagen placeholder del producto */
body.dark-mode .product-image-placeholder {
    background: #111d30 !important;
    border-color: #1e3358 !important;
    color: #445577 !important;
}

/* Zona de escaneo / barra superior */
body.dark-mode .scan-input-area,
body.dark-mode .label-scan-zone,
body.dark-mode #labelScanArea,
body.dark-mode .scan-bar-wrapper {
    background: #050914 !important;
    border-color: #1e3358 !important;
}

/* Input de escaneo */
body.dark-mode #labelScanInput,
body.dark-mode .label-scan-input {
    background: #111d30 !important;
    color: #e8eaf0 !important;
    border-color: #5e17eb !important;
}

/* Stat-card segunda capa (totales arriba) */
body.dark-mode .stat-card {
    background: #111d30 !important;
    border: 1px solid #1e3358 !important;
}
body.dark-mode .stat-value { color: #e8eaf0 !important; }
body.dark-mode .stat-label { color: #7a90b0 !important; }

/* Barra de acciones inferior (Cierre Asistido, etc.) */
body.dark-mode .order-actions-bar,
body.dark-mode .actions-bar,
body.dark-mode #actionsBar {
    background: #050914 !important;
    border-top-color: #1e3358 !important;
}

/* Contenedor de items pendientes */
body.dark-mode .pending-products,
body.dark-mode #itemsContainer,
body.dark-mode .items-container {
    background: #0d1a2e !important;
    border-color: #1e3358 !important;
}

/* Pending-item (fila individual) ya definida arriba como #162038,
   forzamos con !important para ganar sobre reglas anteriores */
body.dark-mode .pending-item {
    background-color: #162038 !important;
    border-color: #1e3358 !important;
    color: #e8eaf0 !important;
}

/* Pending-item-card (tarjeta grande de producto) */
body.dark-mode .pending-item-card {
    background: #162038 !important;
    border-color: #1e3358 !important;
    color: #e8eaf0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

/* Nombre de producto */
body.dark-mode .item-name,
body.dark-mode .product-name,
body.dark-mode .pending-item-card strong {
    color: #ccd6f0 !important;
}

/* SKU y detalles secundarios */
body.dark-mode .item-sku,
body.dark-mode .item-details,
body.dark-mode .sku-badge {
    color: #7a90b0 !important;
}

/* ===================================================
   DARK MODE — Lista de Pedidos (panel derecho)
   Corrige hover invisible y estados de color
   =================================================== */

/* Hover general (que causaba blanco sobre blanco) */
body.dark-mode #pendingOrdersList li:hover {
    background-color: #1e2d44 !important;
}

/* Estado: Pendiente */
body.dark-mode #pendingOrdersList li.status-pending {
    background: #162038 !important;
    border-left: 5px solid #546e7a !important;
    color: #c8d0e8 !important;
}
body.dark-mode #pendingOrdersList li.status-pending:hover:not(.active-order) {
    background-color: #1e2d44 !important;
    color: #e8eaf0 !important;
}

/* Estado: Parcial */
body.dark-mode #pendingOrdersList li.status-partial {
    background: #1e1a0e !important;
    border-left: 5px solid #ff9800 !important;
    color: #ffcc80 !important;
}
body.dark-mode #pendingOrdersList li.status-partial:hover:not(.active-order) {
    background-color: #2a2210 !important;
    color: #ffe0b2 !important;
}

/* Estado: Completado (azul que se mencionó) */
body.dark-mode #pendingOrdersList li.status-completed {
    background: #0a1628 !important;
    border-left: 5px solid #1565c0 !important;
    color: #82b1ff !important;
}
body.dark-mode #pendingOrdersList li.status-completed:hover:not(.active-order) {
    background-color: #0e1e36 !important;
    color: #bbdefb !important;
}

/* Pedido activo (actualmente seleccionado) */
body.dark-mode #pendingOrdersList li.active-order {
    border: 2px solid #5e17eb !important;
    border-left: 6px solid #7c4dff !important;
    background-color: #1a0a3e !important;
    color: #e0d0ff !important;
    box-shadow: 0 4px 12px rgba(94,23,235,0.35) !important;
}
body.dark-mode #pendingOrdersList li.active-order:hover {
    background-color: #21104a !important;
    color: #ede0ff !important;
}

/* Texto span dentro de cada li */
body.dark-mode #pendingOrdersList li span {
    color: inherit !important;
}

/* ===================================================
   DARK MODE — Cierre Asistido (assistedCompletePopup)
   =================================================== */

body.dark-mode .assisted-complete-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
/* Titulo */
body.dark-mode .assisted-complete-content h2 {
    color: #b39ddb !important;
}
/* Boton cerrar */
body.dark-mode #closeAssistedCompletePopupBtn {
    color: #888 !important;
}
body.dark-mode #closeAssistedCompletePopupBtn:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}
/* Info box pedido (GIF + numero) */
body.dark-mode .assisted-complete-content > div[style*="rgba(94,23,235,0.06)"] {
    background: rgba(94,23,235,0.12) !important;
    border-color: rgba(94,23,235,0.35) !important;
}
body.dark-mode .assisted-complete-content > div[style*="rgba(94,23,235,0.06)"] div[style*="color: #888"] {
    color: #7a90b0 !important;
}
body.dark-mode .assisted-complete-content > div[style*="rgba(94,23,235,0.06)"] div[style*="margin-top: 4px"] {
    color: #7a90b0 !important;
}
/* Modo lote group */
body.dark-mode .assisted-lote-group {
    background: rgba(94,23,235,0.1) !important;
    border-color: rgba(94,23,235,0.4) !important;
}
body.dark-mode .assisted-lote-group p {
    color: #7a90b0 !important;
}
/* Label comentario */
body.dark-mode .assisted-complete-content label {
    color: #9090bb !important;
}
/* Textarea comentario */
body.dark-mode #assistedCommentInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #assistedCommentInput::placeholder {
    color: #555 !important;
}
/* Input QR/RUT */
body.dark-mode #assistedAuthQrInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #7c4dff !important;
}
body.dark-mode #assistedAuthQrInput::placeholder {
    color: #555 !important;
}
/* Icono QR */
body.dark-mode .assisted-complete-content div[style*="position: relative"] i.fa-qrcode {
    color: #b39ddb !important;
}
/* Error message */
body.dark-mode #assistedAuthErrorMessage {
    background: rgba(244,67,54,0.15) !important;
    border-color: rgba(244,67,54,0.4) !important;
}
/* Lote inputs */
body.dark-mode #assistedLoteDespachadosInput,
body.dark-mode #assistedLotePendientesInput,
body.dark-mode #deleteAuthInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}

/* Tambien aplicar dark mode a los otros popups de autorizacion que comparten estilos */
body.dark-mode #authQrPopup .popup-content,
body.dark-mode #assistedQuantityPopup .popup-content,
body.dark-mode #dataLoadAuthPopup .popup-content,
body.dark-mode #deleteAuthPopup .popup-content,
body.dark-mode #labelCheckPopup .popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}
body.dark-mode #authQrPopup h2,
body.dark-mode #assistedQuantityPopup h2,
body.dark-mode #dataLoadAuthPopup h2,
body.dark-mode #deleteAuthPopup h2,
body.dark-mode #labelCheckPopup h2 {
    color: #b39ddb !important;
}
body.dark-mode #authQrPopup p,
body.dark-mode #assistedQuantityPopup p,
body.dark-mode #dataLoadAuthPopup p,
body.dark-mode #deleteAuthPopup p,
body.dark-mode #labelCheckPopup p {
    color: #aaaacc !important;
}

body.dark-mode #deleteAuthQrInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4a6a !important;
}

/* ===================================================
   DARK MODE — Popup Reportar Faltante (pendingWithCommentPopup)
   =================================================== */

body.dark-mode .pending-comment-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode .pending-comment-content h2 {
    color: #ff8a50 !important;
}
/* Boton cerrar */
body.dark-mode #closePendingCommentBtn {
    color: #888 !important;
}
body.dark-mode #closePendingCommentBtn:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}
/* Info box pedido */
body.dark-mode .pending-comment-content > div[style*="rgba(230,81,0,0.07)"] {
    background: rgba(230,81,0,0.12) !important;
    border-color: rgba(230,81,0,0.35) !important;
}
body.dark-mode .pending-comment-content > div[style*="rgba(230,81,0,0.07)"] div[style*="color: #999"] {
    color: #7a90b0 !important;
}
body.dark-mode .pending-comment-content > div[style*="rgba(230,81,0,0.07)"] div[style*="color: #777"] {
    color: #8888aa !important;
}
body.dark-mode #pendingOrderNumberSpan {
    color: #ff8a50 !important;
}
/* Chips informativos */
body.dark-mode .pending-comment-content > div[style*="gap: 8px"] span:nth-child(1) {
    background: rgba(21,101,192,0.18) !important;
    border-color: rgba(21,101,192,0.45) !important;
    color: #82b1ff !important;
}
body.dark-mode .pending-comment-content > div[style*="gap: 8px"] span:nth-child(2) {
    background: rgba(230,81,0,0.18) !important;
    border-color: rgba(230,81,0,0.45) !important;
    color: #ffb74d !important;
}
body.dark-mode .pending-comment-content > div[style*="gap: 8px"] span:nth-child(3) {
    background: rgba(183,28,28,0.18) !important;
    border-color: rgba(183,28,28,0.45) !important;
    color: #ef9a9a !important;
}
/* Label motivo */
body.dark-mode .pending-comment-content label {
    color: #9090bb !important;
}
/* Textarea */
body.dark-mode #pendingCommentInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #pendingCommentInput::placeholder {
    color: #555 !important;
}
body.dark-mode #pendingCommentInput:focus {
    border-color: #ff8a50 !important;
}
/* Hint texto */
body.dark-mode .pending-comment-content div[style*="color: #aaa"] {
    color: #555 !important;
}
/* Footer botones */
body.dark-mode .pending-comment-content > div:last-child {
    border-top-color: #383860 !important;
}
body.dark-mode #cancelPendingCommentBtn {
    color: #aaa !important;
    border-color: #4a4a6a !important;
}
body.dark-mode #cancelPendingCommentBtn:hover {
    background: #2a2a3e !important;
    color: #fff !important;
}
body.dark-mode #confirmPendingCommentBtn {
    box-shadow: 0 3px 12px rgba(230,81,0,0.5) !important;
}

/* ===================================================
   MODERN ACTION BUTTONS (Cierre, Verificar, Comentario, Pendiente)
   =================================================== */
.action-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
    align-items: stretch;
}

.complete-manually-btn,
.verify-label-btn,
.comment-btn,
.report-issue-btn {
    flex: 1 1 auto;
    min-width: calc(25% - 12px);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.complete-manually-btn i,
.verify-label-btn i,
.comment-btn i,
.report-issue-btn i {
    font-size: 1.1em;
}

/* Hover base effect */
.complete-manually-btn:hover,
.verify-label-btn:hover,
.comment-btn:hover,
.report-issue-btn:hover {
    transform: translateY(-2px);
}

.complete-manually-btn:active,
.verify-label-btn:active,
.comment-btn:active,
.report-issue-btn:active {
    transform: translateY(1px);
}

/* 1. Cierre Asistido (Azul sólido) */
.complete-manually-btn {
    background-color: #0277bd;
    color: #fff;
}
.complete-manually-btn:hover {
    background-color: #0288d1;
    box-shadow: 0 4px 12px rgba(2, 119, 189, 0.4);
}

/* 2. Verificar Etiqueta (Morado sólido) */
.verify-label-btn {
    background-color: #6a1b9a;
    color: #fff;
}
.verify-label-btn:hover {
    background-color: #7b1fa2;
    box-shadow: 0 4px 12px rgba(106, 27, 154, 0.4);
}

/* 3. Comentarios (Gris-Azulado sólido) */
.comment-btn {
    background-color: #546e7a;
    color: #fff;
}
.comment-btn:hover {
    background-color: #607d8b;
    box-shadow: 0 4px 12px rgba(84, 110, 122, 0.4);
}

/* 4. Marcar como Pendiente (Naranja sólido) */
.report-issue-btn {
    background-color: #e65100;
    color: #fff;
}
.report-issue-btn:hover {
    background-color: #ef6c00;
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.4);
}

/* ---------------- DARK MODE BUTTONS ---------------- */
body.dark-mode .complete-manually-btn {
    background-color: #01579b;
    border: 1px solid rgba(2, 119, 189, 0.4);
}
body.dark-mode .complete-manually-btn:hover {
    background-color: #0277bd;
    box-shadow: 0 4px 15px rgba(2, 119, 189, 0.25);
}

body.dark-mode .verify-label-btn {
    background-color: #4a148c;
    border: 1px solid rgba(106, 27, 154, 0.4);
}
body.dark-mode .verify-label-btn:hover {
    background-color: #6a1b9a;
    box-shadow: 0 4px 15px rgba(106, 27, 154, 0.25);
}

body.dark-mode .comment-btn {
    background-color: #37474f;
    border: 1px solid rgba(84, 110, 122, 0.4);
}
body.dark-mode .comment-btn:hover {
    background-color: #455a64;
    box-shadow: 0 4px 15px rgba(84, 110, 122, 0.25);
}

body.dark-mode .report-issue-btn {
    background-color: #bf360c;
    border: 1px solid rgba(230, 81, 0, 0.4);
}
body.dark-mode .report-issue-btn:hover {
    background-color: #d84315;
    box-shadow: 0 4px 15px rgba(230, 81, 0, 0.25);
}

/* Reponsive behavior */
@media (max-width: 650px) {
    .action-buttons-row {
        flex-direction: column;
    }
    .complete-manually-btn,
    .verify-label-btn,
    .comment-btn,
    .report-issue-btn {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* ===================================================
   DARK MODE — Popup Edición Avanzada (advancedEditPopup)
   =================================================== */

body.dark-mode .advanced-edit-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

/* Cabecera */
body.dark-mode .advanced-edit-content h2 {
    color: #b388ff !important;
}
body.dark-mode .advanced-edit-content > div:first-child {
    border-bottom-color: rgba(179, 136, 255, 0.2) !important;
}
body.dark-mode .version-badge {
    background: rgba(179, 136, 255, 0.15) !important;
    color: #d1c4e9 !important;
    border-color: rgba(179, 136, 255, 0.3) !important;
}

/* Inputs de información general */
body.dark-mode .adv-input-group label {
    color: #90a4ae !important;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 5px;
    display: inline-block;
}
body.dark-mode .adv-input-group input {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4a6a !important;
    border-radius: 8px;
    padding: 10px;
}
body.dark-mode .adv-input-group input:focus {
    border-color: #b388ff !important;
    outline: none;
}

/* Estilos compartidos inputs light/dark (estructura) */
.adv-input-group {
    display: flex;
    flex-direction: column;
}
.adv-input-group label {
    font-size: 0.85em;
    font-weight: 700;
    color: #555;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.adv-input-group input {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 0.95em;
}

/* Tabla de Productos */
body.dark-mode .adv-table-container {
    border-color: #383860 !important;
    background: #232336 !important;
}
body.dark-mode .adv-items-table thead {
    background: #311b92 !important; /* Morado muy oscuro */
}
body.dark-mode .adv-items-table th {
    color: #d1c4e9 !important;
    padding: 12px 10px;
    font-weight: 600;
}
.adv-items-table th {
    padding: 12px 10px;
    background: #5e17eb;
    color: white;
}

/* Filas dinámicas en la tabla */
body.dark-mode .adv-row td {
    border-bottom-color: #383860 !important;
    padding: 8px;
}
body.dark-mode .input-cell {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4a6a !important;
    padding: 8px;
    border-radius: 6px;
}
body.dark-mode .input-cell:focus {
    border-color: #b388ff !important;
}

/* Botones inferiores */
body.dark-mode .advanced-edit-content > div:last-child {
    border-top-color: #383860 !important;
}

body.dark-mode .add-product-btn {
    background: #00897b !important;
}
body.dark-mode .add-product-btn:hover {
    background: #00796b !important;
}

body.dark-mode #cancelAdvancedEditBtn {
    border-color: #4a4a6a !important;
    color: #aaa !important;
}
body.dark-mode #cancelAdvancedEditBtn:hover {
    background: #2a2a3e !important;
    color: #fff !important;
}

body.dark-mode #saveAdvancedEditBtn {
    background: #6200ea !important;
    box-shadow: 0 4px 12px rgba(98, 0, 234, 0.4) !important;
}
body.dark-mode #saveAdvancedEditBtn:hover {
    background: #7c4dff !important;
}

/* Estilizar scrollbar de la tabla */
body.dark-mode .adv-table-container::-webkit-scrollbar { width: 8px; height: 8px; }
body.dark-mode .adv-table-container::-webkit-scrollbar-track { background: #1e1e2e; }
body.dark-mode .adv-table-container::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 4px; }

/* ===================================================
   DARK MODE — Popup Error (errorContainer)
   =================================================== */

body.dark-mode .error-popup-content {
    background: #1e1e2e !important;
    border: 1px solid #383860 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

body.dark-mode .error-popup-content h2 {
    color: #ef5350 !important;
}

body.dark-mode .error-popup-content .error-icon-wrapper {
    background: rgba(239, 83, 80, 0.15) !important;
    border-color: rgba(239, 83, 80, 0.3) !important;
}
body.dark-mode .error-popup-content .error-icon-wrapper i {
    color: #ef5350 !important;
}

body.dark-mode .error-popup-content #errorMessageText {
    color: #e0e0e0 !important;
}

body.dark-mode #closeErrorBtn {
    background: #d32f2f !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4) !important;
}
body.dark-mode #closeErrorBtn:hover {
    background: #e53935 !important;
}

/* ===================================================
   MODERN SCANNED ITEMS LIST
   =================================================== */

.scanned-list {
    background-color: #f5f6f8; /* Fondo claro suave */
    padding: 12px;
    margin-top: 15px;
    border-radius: 12px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scanned-item {
    background-color: #ffffff;
    border: 1px solid #c8e6c9;
    border-left: 4px solid #4caf50;
    padding: 10px 14px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.1s;
}

.scanned-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scanned-title {
    font-size: 0.95em;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.scanned-badge {
    background: #e8eaed;
    color: #4a4a4a;
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.scanned-meta {
    font-size: 0.8em;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: monospace;
}

.scanned-time {
    color: #95a5a6;
}

.scanned-actions {
    display: flex;
    gap: 8px;
}

.scanned-actions button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.scanned-actions .lookup-btn {
    background: #e3f2fd;
    color: #1976d2;
}
.scanned-actions .lookup-btn:hover {
    background: #1976d2;
    color: white;
}

.scanned-actions .remove-btn {
    background: #ffebee;
    color: #d32f2f;
}
.scanned-actions .remove-btn:hover {
    background: #d32f2f;
    color: white;
}

/* ===================================================
   DARK MODE — SCANNED ITEMS LIST
   =================================================== */

body.dark-mode .scanned-list {
    background-color: #1a1a2e; /* Fondo super oscuro del contenedor */
    border-color: #2a2a3e;
}

body.dark-mode .scanned-item {
    background-color: #24243e; /* Fondo del ítem individual */
    border: 1px solid #383854;
    border-left: 4px solid #00c853; /* Verde brillante */
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

body.dark-mode .scanned-title {
    color: #e0e0e0;
}

body.dark-mode .scanned-badge {
    background: #383854;
    color: #aeb4c4;
}

body.dark-mode .scanned-meta {
    color: #8c93a8;
}

body.dark-mode .scanned-time {
    color: #6a738c;
}

body.dark-mode .scanned-actions .lookup-btn {
    background: rgba(25, 118, 210, 0.2);
    color: #64b5f6;
}
body.dark-mode .scanned-actions .lookup-btn:hover {
    background: #1976d2;
    color: white;
}

body.dark-mode .scanned-actions .remove-btn {
    background: rgba(211, 47, 47, 0.2);
    color: #ef5350;
}
body.dark-mode .scanned-actions .remove-btn:hover {
    background: #d32f2f;
    color: white;
}

/* ===================================================
   DARK MODE — Popup Verificar Etiqueta (labelCheckPopup)
   =================================================== */

body.dark-mode .label-check-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

body.dark-mode .label-check-content h2 {
    color: #b388ff !important;
}

body.dark-mode .label-check-content > div:first-child {
    border-bottom-color: rgba(179, 136, 255, 0.2) !important;
}

body.dark-mode .label-check-content .instruction-box {
    background: rgba(179, 136, 255, 0.1) !important;
    border-left-color: #b388ff !important;
    color: #d1c4e9 !important;
}
body.dark-mode .label-check-content .instruction-box strong {
    color: #e040fb !important;
    background: rgba(224, 64, 251, 0.15) !important;
}

body.dark-mode .label-check-content #labelScanInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4a6a !important;
}
body.dark-mode .label-check-content #labelScanInput:focus {
    border-color: #b388ff !important;
    outline: none;
}

body.dark-mode .label-check-content .pickup-option {
    background: #232336 !important;
    border: 1px solid #383860 !important;
}
body.dark-mode .label-check-content .pickup-option label {
    color: #90a4ae !important;
}
body.dark-mode .label-check-content #pickupOrderInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4a6a !important;
}
body.dark-mode .label-check-content #pickupOrderInput:focus {
    border-color: #b388ff !important;
    outline: none;
}

body.dark-mode .label-check-content #popupErrorMessage {
    background: rgba(239, 83, 80, 0.15) !important;
    border: 1px solid rgba(239, 83, 80, 0.3) !important;
}
body.dark-mode .label-check-content #popupErrorMessage span {
    color: #ef5350 !important;
}

body.dark-mode .label-check-content #closePopupBtn:hover {
    color: #fff !important;
    background: #383860 !important;
}

/* SOBRESCRIBIR .scanned-info para que sea una sola fila horizontal */
.scanned-info {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 15px !important;
    flex-wrap: wrap; /* En caso de que la pantalla sea muy pequeña */
}

.scanned-title {
    margin-bottom: 0 !important;
}

.scanned-meta {
    margin-top: 0 !important;
}

/* ===================================================
   DARK MODE — Popup Buscar Pedido (queryModePopup)
   =================================================== */

body.dark-mode .query-mode-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

body.dark-mode .query-mode-content h2 {
    color: #00e676 !important;
}

body.dark-mode .query-mode-content > div:first-child {
    border-bottom-color: rgba(0, 230, 118, 0.2) !important;
}

body.dark-mode .query-mode-content .scan-gif {
    /* La imagen en sí tiene fondo blanco, el div que la rodea lo adaptamos */
}
body.dark-mode .query-mode-content > div:nth-child(2) > div:first-child {
    background: #e0e0e0 !important; /* Mantenemos fondo claro para el GIF para que se vea bien */
    box-shadow: 0 4px 15px rgba(0,230,118,0.15) !important;
}

body.dark-mode .query-mode-content > div:nth-child(2) > div:last-child {
    color: #b0bec5 !important;
}
body.dark-mode .query-mode-content strong {
    color: #00e676 !important;
}

body.dark-mode .query-mode-content #queryTrackingInput {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4a6a !important;
}
body.dark-mode .query-mode-content #queryTrackingInput:focus {
    border-color: #00e676 !important;
    outline: none;
}

body.dark-mode .query-mode-content #queryErrorMessage {
    background: rgba(239, 83, 80, 0.15) !important;
    border: 1px solid rgba(239, 83, 80, 0.3) !important;
}
body.dark-mode .query-mode-content #queryErrorMessage span {
    color: #ef5350 !important;
}

body.dark-mode .query-mode-content #closeQueryPopupBtn:hover {
    color: #fff !important;
    background: #383860 !important;
}

/* ===================================================
   OVERRIDE: Resaltado del item actual a escanear
   =================================================== */

/* Aseguramos que el primer elemento pendiente (el que toca escanear) tenga un resaltado elegante */
.pending-products-list .pending-item-card:first-child {
    background-color: #fffde7 !important; /* Amarillo pastel muy suave */
    border: 1px solid #fff59d !important;
    border-left: 5px solid #fbc02d !important; /* Borde izquierdo indicador */
    box-shadow: 0 4px 12px rgba(251, 192, 45, 0.15) !important;
    transform: scale(1.01);
    transition: all 0.3s ease;
    z-index: 1;
}

body.dark-mode .pending-products-list .pending-item-card:first-child {
    background-color: rgba(251, 192, 45, 0.1) !important; /* Fondo oscuro tintado de amarillo */
    border: 1px solid rgba(251, 192, 45, 0.3) !important;
    border-left: 5px solid #fdd835 !important;
    box-shadow: 0 4px 12px rgba(253, 216, 53, 0.15) !important;
}

/* Para garantizar que los demás no se pinten */
.pending-products-list .pending-item-card:not(:first-child) {
    transform: scale(1);
    border-left-width: 1px !important;
}

/* ===================================================
   OVERRIDE: Efecto Hover en items de productos pendientes
   =================================================== */

/* Deshacer el estilo forzado al primer hijo que puse por error */
.pending-products-list .pending-item-card:first-child {
    background-color: #ffffff !important;
    border: 1px solid #eee !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
    transform: none;
    z-index: auto;
}
body.dark-mode .pending-products-list .pending-item-card:first-child {
    background-color: #162038 !important;
    border-color: #1e3358 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* APLICAR el color elegante AL PASAR EL CURSOR (HOVER) a CUALQUIER item */
.pending-products-list .pending-item-card:hover {
    background-color: #fffde7 !important; /* Amarillo pastel muy suave */
    border: 1px solid #fff59d !important;
    border-left: 5px solid #fbc02d !important; /* Borde mostaza */
    box-shadow: 0 4px 12px rgba(251, 192, 45, 0.15) !important;
    transform: scale(1.01);
    transition: all 0.2s ease;
    z-index: 1;
    cursor: default; /* O pointer si hace algo al clickear */
}

body.dark-mode .pending-products-list .pending-item-card:hover {
    background-color: rgba(251, 192, 45, 0.1) !important; /* Fondo oscuro tintado */
    border: 1px solid rgba(251, 192, 45, 0.3) !important;
    border-left: 5px solid #fdd835 !important;
    box-shadow: 0 4px 12px rgba(253, 216, 53, 0.15) !important;
}

/* ===================================================
   DARK MODE — Popup Papelera de Reciclaje (trashPopup)
   =================================================== */

body.dark-mode .trash-popup-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

body.dark-mode .trash-popup-content h2 {
    color: #ef5350 !important;
}

body.dark-mode .trash-popup-content > div:first-child {
    border-bottom-color: rgba(239, 83, 80, 0.2) !important;
}

body.dark-mode .trash-popup-content p {
    color: #90a4ae !important;
}

body.dark-mode .trash-popup-content .trash-table-container {
    border-color: #383860 !important;
    background: #1e1e2e !important;
}

body.dark-mode .trash-popup-content .trash-table thead {
    background: #232336 !important;
}

body.dark-mode .trash-popup-content .trash-table th {
    border-bottom: 2px solid #383860 !important;
    color: #b0bec5 !important;
}

body.dark-mode .trash-popup-content .trash-table td {
    border-bottom: 1px solid #383860 !important;
    color: #cfd8dc !important;
}

body.dark-mode .trash-popup-content .trash-table tbody tr:hover {
    background: rgba(239, 83, 80, 0.05) !important;
}

body.dark-mode .trash-popup-content #trashEmptyState {
    color: #546e7a !important;
}

body.dark-mode .trash-popup-content #closeTrashPopupBtn {
    background: #383860 !important;
    color: #e0e0e0 !important;
    border: 1px solid #4a4a6a !important;
}

body.dark-mode .trash-popup-content #closeTrashPopupBtn:hover {
    background: #4a4a6a !important;
    color: white !important;
}

/* ===================================================
   DARK MODE — Popup Eliminacion Masiva (bulkDeletePopup)
   =================================================== */

body.dark-mode .bulk-delete-content {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border: 1px solid #383860;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

body.dark-mode .bulk-delete-content h2 {
    color: #ef5350 !important;
}

body.dark-mode .bulk-delete-content > div:first-child {
    border-bottom-color: rgba(239, 83, 80, 0.2) !important;
}

body.dark-mode .bulk-delete-content .instruction-box {
    background: rgba(239, 83, 80, 0.05) !important;
    border-left-color: #ef5350 !important;
    color: #cfd8dc !important;
}
body.dark-mode .bulk-delete-content .instruction-box strong {
    color: #ff8a80 !important;
}

body.dark-mode .bulk-delete-content .bulk-options-container {
    background: #232336 !important;
    border: 1px solid #383860 !important;
}
body.dark-mode .bulk-delete-content .bulk-options-container label {
    color: #90a4ae !important;
}

body.dark-mode .bulk-delete-content .bulk-preview-box {
    background: rgba(255, 152, 0, 0.1) !important;
    border: 1px solid rgba(255, 152, 0, 0.3) !important;
}
body.dark-mode .bulk-delete-content .bulk-preview-box i {
    color: #ffb74d !important;
}
body.dark-mode .bulk-delete-content .bulk-preview-box p:first-child {
    color: #ffb74d !important;
}
body.dark-mode .bulk-delete-content .bulk-preview-box #bulkPreviewCount {
    color: #ffe0b2 !important;
}

body.dark-mode .bulk-delete-content #closeBulkDeletePopupBtn:hover {
    color: #fff !important;
    background: #383860 !important;
}

body.dark-mode .bulk-delete-content button[onclick="executeBulkDelete()"]:hover {
    background: #b71c1c !important;
}

/* ===================================================
   MODERN SIDEBAR BUTTONS
   =================================================== */

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.sidebar-btn {
    background: rgba(255, 255, 255, 0.1) !important; /* Fondo translúcido sobre el morado */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-left: 4px solid var(--btn-theme-color, #fff) !important;
    border-radius: 8px;
    padding: 12px 15px !important;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95em;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
}

.sidebar-btn i {
    color: var(--btn-theme-color, #fff) !important;
    font-size: 1.2em;
    width: 22px;
    text-align: center;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.3));
}

.sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-left-width: 6px !important;
}

.sidebar-btn:active {
    transform: translateX(2px);
}

/* Variables de color para cada tema */
.theme-orange { --btn-theme-color: #ffb74d; }
.theme-teal { --btn-theme-color: #69f0ae; }
.theme-purple { --btn-theme-color: #ea80fc; }
.theme-cyan { --btn-theme-color: #18ffff; }
.theme-grey { --btn-theme-color: #cfd8dc; }
.theme-darkgrey { --btn-theme-color: #90a4ae; }
.theme-blue { --btn-theme-color: #82b1ff; }
.theme-deeppurple { --btn-theme-color: #b388ff; }
.theme-red { --btn-theme-color: #ff8a80; }
.theme-darkred { --btn-theme-color: #ff5252; }
.theme-pink { --btn-theme-color: #ff80ab; }
.theme-lightblue { --btn-theme-color: #84ffff; }

/* Dark mode overrides (sidebar is very dark #050914) */
body.dark-mode .sidebar-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: 4px solid var(--btn-theme-color) !important;
}

body.dark-mode .sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

/* ===================================================
   MODERN GLOBAL SCROLLBAR
   =================================================== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #b0bec5 transparent;
}

body.dark-mode * {
    scrollbar-color: #4a4a6a transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #78909c;
}

/* Scrollbar en Modo Oscuro */
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #4a4a6a;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6a6a8a;
}

/* ===================================================
   ALERT BANNERS (Bloqueos de Pedidos)
   =================================================== */

.alert-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    animation: slideInDown 0.3s ease-out;
}

.alert-banner .alert-icon {
    font-size: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-banner .alert-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.alert-banner .alert-text strong {
    font-size: 1.1em;
}

.alert-banner .alert-text span {
    font-size: 0.9em;
    opacity: 0.8;
}

/* Incongruencia (Naranja) */
.incongruence-banner {
    background: #fff3e0;
    color: #e65100;
    border-left: 5px solid #ff9800;
}

/* Completado (Rojo/Rosado) */
.completed-banner {
    background: #ffebee;
    color: #c62828;
    border-left: 5px solid #ef5350;
}

/* DARK MODE OVERRIDES */
body.dark-mode .incongruence-banner {
    background: rgba(230, 81, 0, 0.1) !important;
    color: #ffb74d !important;
    border-left: 5px solid #ff9800 !important;
    border: 1px solid rgba(255, 152, 0, 0.2);
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.15);
}

body.dark-mode .completed-banner {
    background: rgba(198, 40, 40, 0.1) !important;
    color: #ef9a9a !important;
    border-left: 5px solid #ef5350 !important;
    border: 1px solid rgba(239, 83, 80, 0.2);
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.15);
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   MODERN RIGHT SIDEBAR (Search & Filters)
   =================================================== */

/* Búsqueda */
.search-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.search-item:focus-within {
    border-color: #5e17eb;
    box-shadow: 0 0 0 3px rgba(94, 23, 235, 0.15);
}

.search-item i {
    color: #5e17eb;
    font-size: 1.1em;
}

#searchInput {
    padding: 10px !important;
    font-size: 0.95em !important;
    width: 100%;
    outline: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #333333;
}

/* Botones de Navegación (Flechas) y Crear Pedido en 1 sola fila */
#navButtons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    width: 100% !important;
}

/* Flecha Anterior (Anterior - Chevrons) */
#navButtons button:nth-child(1) {
    order: 1 !important;
    flex: 0 0 38px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95em !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
}

/* Flecha Siguiente (Siguiente - Chevrons) */
#navButtons button:nth-child(2) {
    order: 2 !important;
    flex: 0 0 38px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95em !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-left: none !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
}

/* Botón Crear Pedido */
#navButtons #openCreateOrderModalBtn,
#navButtons button:nth-child(3) {
    order: 3 !important;
    flex: 1 !important;
    height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 0.88em !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
}

/* Modo Claro por defecto */
body:not(.dark-mode) #navButtons button:nth-child(1),
body:not(.dark-mode) #navButtons button:nth-child(2) {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body:not(.dark-mode) #navButtons button:nth-child(1):hover:not(:disabled),
body:not(.dark-mode) #navButtons button:nth-child(2):hover:not(:disabled) {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #2563eb !important;
    transform: translateY(-1px);
}

body:not(.dark-mode) #navButtons button:nth-child(1):disabled,
body:not(.dark-mode) #navButtons button:nth-child(2):disabled {
    opacity: 0.4 !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
}

body:not(.dark-mode) #navButtons #openCreateOrderModalBtn {
    background: #16a34a !important;
    color: #ffffff !important;
    border: 1px solid #15803d !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
}

body:not(.dark-mode) #navButtons #openCreateOrderModalBtn:hover:not(:disabled) {
    background: #15803d !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.35) !important;
}

/* Modo Oscuro */
body.dark-mode #navButtons button:nth-child(1),
body.dark-mode #navButtons button:nth-child(2) {
    background: #162038 !important;
    color: #ffffff !important;
    border: 1px solid #2a3a5c !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode #navButtons button:nth-child(1):hover:not(:disabled),
body.dark-mode #navButtons button:nth-child(2):hover:not(:disabled) {
    background: #1e2d44 !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    transform: translateY(-1px);
}

body.dark-mode #navButtons button:nth-child(1):disabled,
body.dark-mode #navButtons button:nth-child(2):disabled {
    opacity: 0.35 !important;
    background: #0d162b !important;
    color: #475569 !important;
    border-color: #1e3358 !important;
    cursor: not-allowed !important;
}

body.dark-mode #navButtons #openCreateOrderModalBtn {
    background: #10b981 !important;
    color: #ffffff !important;
    border: 1px solid #059669 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

body.dark-mode #navButtons #openCreateOrderModalBtn i {
    color: #ffffff !important;
}

body.dark-mode #navButtons #openCreateOrderModalBtn:hover:not(:disabled) {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45) !important;
}

/* Filtros */
#filtersContainer {
    gap: 12px !important;
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px dashed #eee;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 5px 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.filter-item:hover {
    border-color: #b388ff;
}

.filter-item i {
    color: #5e17eb !important;
    font-size: 1.1em !important;
    width: 20px;
    text-align: center;
}

.filter-item select {
    border: none !important;
    background: transparent !important;
    width: 100%;
    padding: 8px 0 !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    color: #444 !important;
    outline: none !important;
    cursor: pointer;
}

/* Dark Mode Overrides */
body.dark-mode .search-item {
    background: #1e1e2e !important;
    border-color: #383860 !important;
}

body.dark-mode .search-item:focus-within {
    border-color: #00cc7a !important;
    box-shadow: 0 0 0 3px rgba(0, 204, 122, 0.15) !important;
}

body.dark-mode .search-item i {
    color: #00cc7a !important;
}

body.dark-mode #searchInput {
    color: #e0e0e0 !important;
}

body.dark-mode #navButtons button {
    background: #2a2a3e !important;
    color: #b0bec5 !important;
    border-color: #383860 !important;
}

body.dark-mode #navButtons button:hover:not(:disabled) {
    background: #383860 !important;
    color: #fff !important;
    border-color: #00cc7a !important;
}

body.dark-mode #filtersContainer {
    border-top-color: #383860;
}

body.dark-mode .filter-item {
    background: #1e1e2e !important;
    border-color: #383860 !important;
}

body.dark-mode .filter-item:hover {
    border-color: #00cc7a !important;
}

body.dark-mode .filter-item i {
    color: #00cc7a !important;
}

body.dark-mode .filter-item select {
    color: #e0e0e0 !important;
}
body.dark-mode .filter-item select option {
    background: #1e1e2e;
    color: #e0e0e0;
}

/* ===================================================
   URGENT BADGE (Pedidos Atrasados >24h)
   =================================================== */

.urgent-clock-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff1744;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 0 5px rgba(255, 23, 68, 0.6);
    border: 2px solid #232336; /* Color de fondo base para recorte */
    z-index: 10;
    animation: pulseRed 2s infinite;
}

body.dark-mode .urgent-clock-badge {
    border-color: #1e1e2e;
}

@keyframes pulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(255, 23, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 23, 68, 0);
    }
}

/* ===================================================
   URGENT MAIN ICON (Pedidos Atrasados >24h)
   =================================================== */

.urgent-main-icon {
    color: #ff1744 !important;
    font-size: 1.15em !important;
    animation: pulseRedText 1.5s infinite;
    filter: drop-shadow(0 0 3px rgba(255, 23, 68, 0.5));
}

@keyframes pulseRedText {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===================================================
   DASHBOARD CARD: ATRASADOS (Light & Dark mode)
   =================================================== */

/* Modo Claro (Fondo morado) */
.overdue-icon {
    color: #ff7676; /* Rojo más pastel/suave para contrastar en morado */
    animation: pulseRedText 2s infinite;
}
.overdue-count {
    font-size: 1.2em; 
    font-weight: bold; 
    color: #ffffff; 
    text-shadow: 0 0 8px rgba(255, 118, 118, 0.8);
}
.overdue-label {
    font-size: 0.7em; 
    color: #ffffff; 
    opacity: 0.85;
}

/* Modo Oscuro */
body.dark-mode .overdue-icon {
    color: #ff1744;
}
body.dark-mode .overdue-count {
    color: #ff1744;
    text-shadow: none;
}
body.dark-mode .overdue-label {
    color: #ccc;
    opacity: 1;
}

/* ===================================================
   REDISENO: CAJA DE NOTAS / OBSERVACIONES
   =================================================== */

.order-observation-box {
    background: rgba(255, 171, 0, 0.15) !important;
    border-left: 4px solid #ffab00 !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    margin: 10px 0 15px 0 !important;
    color: #e65100 !important; /* Texto en modo claro */
    font-size: 0.9em !important;
    font-style: normal !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    box-shadow: 0 2px 8px rgba(255, 171, 0, 0.1) !important;
    border-top: 1px solid rgba(255, 171, 0, 0.2) !important;
    border-right: 1px solid rgba(255, 171, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 171, 0, 0.2) !important;
}

.order-observation-box i {
    color: #ffab00 !important;
    font-size: 1.2em !important;
    margin-top: 2px !important;
}

/* Modo Oscuro */
body.dark-mode .order-observation-box {
    background: rgba(255, 193, 7, 0.1) !important;
    color: #ffd54f !important; /* Texto claro en modo oscuro */
    border-left-color: #ffc107 !important;
    border-top: 1px solid rgba(255, 193, 7, 0.15) !important;
    border-right: 1px solid rgba(255, 193, 7, 0.15) !important;
    border-bottom: 1px solid rgba(255, 193, 7, 0.15) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .order-observation-box i {
    color: #ffc107 !important;
}

/* ===================================================
   SLA TOAST REDESIGN (Light & Dark Mode)
   =================================================== */

.sla-toast {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-left: 6px solid #ff1744 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(255, 23, 68, 0.25), 0 0 0 1px rgba(255, 23, 68, 0.1) !important;
    padding: 16px 20px !important;
}

.sla-toast .toast-icon {
    background: linear-gradient(135deg, #ff1744, #d50000) !important;
    color: white !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2em !important;
    box-shadow: 0 4px 10px rgba(255, 23, 68, 0.4) !important;
    flex-shrink: 0 !important;
}

.sla-toast .toast-title {
    color: #d50000 !important;
    font-weight: 800 !important;
    font-size: 1.05em !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
}

.sla-toast .toast-message {
    color: #444 !important;
    font-size: 0.9em !important;
    margin-top: 4px !important;
}

.sla-toast .toast-close-btn {
    color: #999 !important;
    background: rgba(0,0,0,0.05) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.sla-toast .toast-close-btn:hover {
    background: #ff1744 !important;
    color: white !important;
}

/* Modo Oscuro */
body.dark-mode .sla-toast {
    background: rgba(30, 30, 46, 0.95) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 23, 68, 0.2) !important;
}

body.dark-mode .sla-toast .toast-title {
    color: #ff5252 !important; /* Rojo un poco mǭs claro para contraste oscuro */
}

body.dark-mode .sla-toast .toast-message {
    color: #ccc !important;
}

body.dark-mode .sla-toast .toast-close-btn {
    color: #aaa !important;
    background: rgba(255,255,255,0.05) !important;
}

body.dark-mode .sla-toast .toast-close-btn:hover {
    background: #ff1744 !important;
    color: white !important;
}

/* ===================================================
   VIRTUAL DERIVATION BOX (Light & Dark Mode)
   =================================================== */

.virtual-derivation-box {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.virtual-derivation-box .derivation-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.virtual-derivation-box .header-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: rgba(94, 23, 235, 0.1) !important;
    color: #5e17eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5em !important;
    flex-shrink: 0 !important;
}

.virtual-derivation-box .header-text h4 {
    margin: 0 0 4px 0 !important;
    color: #333 !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
}

.virtual-derivation-box .header-text p {
    margin: 0 !important;
    color: #666 !important;
    font-size: 0.85em !important;
}

.virtual-derivation-box .derivation-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.virtual-derivation-box .btn-dest {
    flex: 1 !important;
    min-width: 140px !important;
    padding: 12px 15px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

.virtual-derivation-box .btn-nunoa {
    background: #4caf50 !important;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important;
}
.virtual-derivation-box .btn-nunoa:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4) !important; }

.virtual-derivation-box .btn-lareina {
    background: #5e17eb !important;
    box-shadow: 0 4px 12px rgba(94, 23, 235, 0.3) !important;
}
.virtual-derivation-box .btn-lareina:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(94, 23, 235, 0.4) !important; }

.virtual-derivation-box .btn-recoleta {
    background: #2196f3 !important;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3) !important;
}
.virtual-derivation-box .btn-recoleta:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(33, 150, 243, 0.4) !important; }

/* Estado Derivado */
.virtual-derivation-box.derived-state {
    background: rgba(33, 150, 243, 0.05) !important;
    border: 1px solid rgba(33, 150, 243, 0.3) !important;
    align-items: center !important;
    text-align: center !important;
}

.virtual-derivation-box .derivation-status {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

.virtual-derivation-box .status-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #2196f3 !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5em !important;
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3) !important;
}

.virtual-derivation-box .status-text strong {
    display: block !important;
    color: #1565c0 !important;
    font-size: 1.1em !important;
    margin-bottom: 4px !important;
}
.virtual-derivation-box .status-text span {
    color: #555 !important;
    font-size: 0.9em !important;
}

.virtual-derivation-box .btn-reactivate {
    background: white !important;
    border: 1px solid #ccc !important;
    color: #666 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 0.85em !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.virtual-derivation-box .btn-reactivate:hover {
    background: #f5f5f5 !important;
    color: #333 !important;
    border-color: #999 !important;
}

/* Modo Oscuro */
body.dark-mode .virtual-derivation-box {
    background: #232336 !important;
    border-color: #33334d !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .virtual-derivation-box .header-icon {
    background: rgba(142, 36, 170, 0.2) !important;
    color: #b388ff !important;
}
body.dark-mode .virtual-derivation-box .header-text h4 {
    color: #fff !important;
}
body.dark-mode .virtual-derivation-box .header-text p {
    color: #aaa !important;
}

body.dark-mode .virtual-derivation-box.derived-state {
    background: rgba(33, 150, 243, 0.05) !important;
    border-color: rgba(33, 150, 243, 0.2) !important;
}
body.dark-mode .virtual-derivation-box .status-text strong {
    color: #64b5f6 !important;
}
body.dark-mode .virtual-derivation-box .status-text span {
    color: #bbb !important;
}

body.dark-mode .virtual-derivation-box .btn-reactivate {
    background: transparent !important;
    border-color: #444 !important;
    color: #aaa !important;
}
body.dark-mode .virtual-derivation-box .btn-reactivate:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
}

/* ===================================================
   SERVER CONNECTION ERROR OVERLAY
   =================================================== */

#serverConnectionOverlay {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 99999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.server-error-modal {
    background: #1e1e2e;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255, 51, 51, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modalPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.server-error-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    background: rgba(255, 51, 51, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.server-error-icon-wrapper i {
    font-size: 3em;
    color: #ff3333;
    z-index: 2;
}

.server-error-icon-wrapper .pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #ff3333;
    animation: serverPulse 2s infinite;
    opacity: 0;
}

@keyframes serverPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.server-error-modal h2 {
    color: #ff5252;
    margin: 0 0 10px 0;
    font-size: 1.6em;
    letter-spacing: 1px;
    font-weight: 800;
}

.server-error-subtitle {
    color: #fff;
    font-size: 1.15em;
    margin: 0 0 8px 0;
}

.server-error-warning {
    color: #aaa;
    font-size: 0.95em;
    margin: 0 0 25px 0;
}

.server-error-solution {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.server-error-solution .solution-title {
    margin: 0 0 8px 0;
    color: #00e676;
    font-weight: bold;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.server-error-solution .solution-desc {
    margin: 0;
    color: #ddd;
    font-size: 0.95em;
    line-height: 1.4;
}

.server-error-solution strong {
    color: #fff;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.btn-retry-connection {
    background: linear-gradient(135deg, #ff1744, #d50000);
    color: white;
    padding: 14px 30px;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(255, 23, 68, 0.4);
}

.btn-retry-connection:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 23, 68, 0.6);
}

.btn-retry-connection:active {
    transform: translateY(1px);
}

/* Soporte Claro/Oscuro (el modal de error en sí siempre debería ser oscuro para dar sensación de emergencia, pero ajustamos un poco el fondo del overlay) */
body:not(.dark-mode) #serverConnectionOverlay {
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-mode) .server-error-modal {
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 0 1px rgba(255, 51, 51, 0.1);
}

/* ===================================================
   LOGIN SCREEN REDESIGN (Light & Dark Mode)
   =================================================== */

.login-screen-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #f4f7fa; /* Light mode bg */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s, background 0.3s;
    padding: 20px;
    box-sizing: border-box;
}

.login-container {
    display: flex;
    align-items: stretch;
    gap: 0; /* Changed from gap to 0 so they join in the middle */
    justify-content: center;
    max-width: 900px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.login-media-box {
    background: #e8e8e8;
    flex: 1 1 50%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.login-media-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

.login-form-box {
    background: #ffffff;
    padding: 50px 40px;
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

.login-logo-wrapper {
    margin-bottom: 25px;
}

.login-logo {
    max-height: 70px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.login-form-box h2 {
    color: #1e1e2e;
    margin: 0 0 10px 0;
    font-size: 1.8em;
    font-weight: 800;
}

.login-subtitle {
    color: #666;
    margin-bottom: 30px;
    font-size: 0.95em;
    line-height: 1.5;
}

.login-form-box .input-group {
    position: relative;
    margin-bottom: 8px;
}

.login-form-box input {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    text-align: center;
    outline: none;
    background: #fcfcfc;
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-weight: 600;
    letter-spacing: 1px;
}

.login-form-box input:focus {
    border-color: #5e17eb;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(94, 23, 235, 0.1);
}

.rut-hint {
    color: #999;
    font-size: 0.8em;
    margin-bottom: 25px;
}

.btn-login {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    background: linear-gradient(135deg, #00e676, #00b25c);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 15px rgba(0, 230, 118, 0.3);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 230, 118, 0.4);
}

.btn-login:active {
    transform: translateY(1px);
}

.login-error-msg {
    color: #ff1744;
    margin-top: 20px;
    font-size: 0.9em;
    font-weight: 600;
    background: rgba(255, 23, 68, 0.1);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Modo Oscuro */
body.dark-mode .login-screen-overlay {
    background: #12121a;
}

body.dark-mode .login-container {
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
}

body.dark-mode .login-form-box {
    background: #1e1e2e;
}

body.dark-mode .login-media-box {
    background: #181825;
}

body.dark-mode .login-media-box img {
    filter: brightness(0.9);
}

body.dark-mode .login-form-box h2 {
    color: #ffffff;
}

body.dark-mode .login-subtitle {
    color: #aaa;
}

body.dark-mode .login-form-box input {
    background: #2a2a3f;
    border-color: #3f3f5a;
    color: #ffffff;
}

body.dark-mode .login-form-box input:focus {
    border-color: #00e676;
    box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.1);
}

@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }
    .login-media-box {
        min-height: 200px;
        flex: none;
    }
}

/* ===================================================
   BRANCH SELECTION SCREEN (Light & Dark Mode)
   =================================================== */

.branch-selection-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #f4f7fa;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s, background 0.3s;
    padding: 20px;
    box-sizing: border-box;
}

.branch-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.branch-card h2 {
    color: #1e1e2e;
    margin: 0 0 10px 0;
    font-size: 1.6em;
    font-weight: 800;
}

.branch-subtitle {
    color: #666;
    margin-bottom: 25px;
    font-size: 0.95em;
    line-height: 1.5;
}

.branch-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.btn-branch {
    width: 100%;
    padding: 16px;
    font-size: 1.05em;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
}

.btn-branch:hover {
    transform: translateY(-2px);
}

.btn-branch:active {
    transform: translateY(1px);
}

.btn-branch-lareina {
    background: #5e17eb;
    box-shadow: 0 4px 15px rgba(94, 23, 235, 0.3);
}
.btn-branch-lareina:hover { box-shadow: 0 6px 20px rgba(94, 23, 235, 0.4); }

.btn-branch-nunoa {
    background: #4caf50;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.btn-branch-nunoa:hover { box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4); }

.btn-branch-virtual {
    background: #ffd600;
    color: #333;
    box-shadow: 0 4px 15px rgba(255, 214, 0, 0.3);
}
.btn-branch-virtual:hover { box-shadow: 0 6px 20px rgba(255, 214, 0, 0.4); }

.btn-branch-disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
}
.btn-branch-disabled:hover {
    transform: none;
}

.branch-card .version-text {
    margin: 0;
    color: #aaa;
    font-size: 0.8em;
}

/* Modo Oscuro */
body.dark-mode .branch-selection-overlay {
    background: #12121a;
}

body.dark-mode .branch-card {
    background: #1e1e2e;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
}

body.dark-mode .branch-card h2 {
    color: #ffffff;
}

body.dark-mode .branch-subtitle {
    color: #aaa;
}

body.dark-mode .btn-branch-disabled {
    background: #2a2a3f;
    color: #666;
}

/* ===================================================
   LOGIN IMAGES TOGGLE (Light/Dark Mode)
   =================================================== */

.login-img-dark {
    display: none !important;
}

body.dark-mode .login-img-light {
    display: none !important;
}

body.dark-mode .login-img-dark {
    display: block !important;
}

/* ===================================================
   SUCCESS POPUP (Light & Dark Mode)
   =================================================== */

.success-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.success-modal {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 450px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2), 0 0 0 1px rgba(0, 230, 118, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modalPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    background: rgba(0, 230, 118, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.success-icon-wrapper i {
    font-size: 3.5em;
    color: #00e676;
    z-index: 2;
}

.pulse-ring-success {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #00e676;
    animation: successPulse 2s infinite;
    opacity: 0;
}

@keyframes successPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

.success-modal h2 {
    color: #1e1e2e;
    margin: 0 0 10px 0;
    font-size: 1.8em;
    font-weight: 800;
}

.success-subtitle {
    color: #555;
    font-size: 1.1em;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

.success-gif-container {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    max-width: 150px;
}

.success-gif-container img.success-gif {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

.btn-success-close {
    background: linear-gradient(135deg, #00e676, #00b25c);
    color: white;
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 230, 118, 0.3);
    min-width: 150px;
}

.btn-success-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 230, 118, 0.4);
}

/* Modo Oscuro */
body.dark-mode .success-overlay {
    background: rgba(0, 0, 0, 0.85);
}

body.dark-mode .success-modal {
    background: #1e1e2e;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(0, 230, 118, 0.1);
}

body.dark-mode .success-modal h2 {
    color: #ffffff;
}

body.dark-mode .success-subtitle {
    color: #aaa;
}

body.dark-mode .success-gif-container img.success-gif {
    mix-blend-mode: screen;
}

/* ===================================================
   MODERN COMMENTS POPUP (Light & Dark Mode)
   =================================================== */

.modern-comment-modal {
    background: #ffffff;
    border-radius: 16px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modern-comment-modal .modal-header {
    background: rgba(94, 23, 235, 0.05);
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(94, 23, 235, 0.1);
}

.modern-comment-modal .modal-header h2 {
    margin: 0;
    color: #5e17eb;
    font-size: 1.4em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-close-modal {
    background: transparent;
    border: none;
    color: #888;
    font-size: 1.2em;
    cursor: pointer;
    transition: color 0.2s;
    padding: 5px;
}
.btn-close-modal:hover { color: #ff3333; }

.modern-comment-modal .modal-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-order-info {
    font-size: 1.1em;
    color: #555;
    background: #f4f7fa;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
}
.comment-order-info strong { color: #5e17eb; }

.comment-history-list {
    max-height: 200px;
    overflow-y: auto;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #eee;
}

.comment-input-area label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.modern-comment-modal textarea {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1em;
    resize: vertical;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    background: #ffffff;
    color: #333;
}

.modern-comment-modal textarea:focus {
    border-color: #5e17eb;
    box-shadow: 0 0 0 4px rgba(94, 23, 235, 0.1);
}

.modern-comment-modal .modal-footer {
    padding: 20px 25px;
    background: #fafafa;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-modal-cancel {
    background: #e0e0e0;
    color: #555;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}
.btn-modal-cancel:hover { background: #d0d0d0; color: #333; }

.btn-modal-submit {
    background: linear-gradient(135deg, #8e24aa, #5e17eb);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(94, 23, 235, 0.3);
}
.btn-modal-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(94, 23, 235, 0.4); }

/* Modo Oscuro */
body.dark-mode .modern-comment-modal {
    background: #1e1e2e;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
}

body.dark-mode .modern-comment-modal .modal-header {
    background: rgba(94, 23, 235, 0.1);
    border-bottom-color: rgba(94, 23, 235, 0.2);
}

body.dark-mode .modern-comment-modal .modal-header h2 { color: #b388ff; }

body.dark-mode .btn-close-modal { color: #aaa; }
body.dark-mode .btn-close-modal:hover { color: #ff5252; }

body.dark-mode .comment-order-info {
    background: #2a2a3f;
    color: #ccc;
}
body.dark-mode .comment-order-info strong { color: #b388ff; }

body.dark-mode .comment-history-list {
    background: #232336;
    border-color: #33334d;
}

body.dark-mode .comment-input-area label { color: #ccc; }

body.dark-mode .modern-comment-modal textarea {
    background: #232336;
    border-color: #3f3f5a;
    color: #eee;
}
body.dark-mode .modern-comment-modal textarea:focus {
    border-color: #b388ff;
    box-shadow: 0 0 0 4px rgba(179, 136, 255, 0.15);
}

body.dark-mode .modern-comment-modal .modal-footer {
    background: #181825;
    border-top-color: #2a2a3f;
}

body.dark-mode .btn-modal-cancel {
    background: #33334d;
    color: #ccc;
}
body.dark-mode .btn-modal-cancel:hover { background: #444466; color: #fff; }

/* ===================================================
   FIX SUCCESS GIF CROPPING
   =================================================== */

.success-gif-container {
    margin-bottom: 20px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    overflow: visible !important;
    background: transparent !important;
}

.success-gif-container img.success-gif {
    max-width: 150px !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
    mix-blend-mode: multiply;
    margin: 0 auto !important;
}

body.dark-mode .success-gif-container img.success-gif {
    mix-blend-mode: screen;
}

/* ===================================================
   ROUNDED CORNERS FOR ALL POPUP GIFS
   =================================================== */

.error-gif, .success-gif, .scan-gif {
    border-radius: 16px !important;
    overflow: hidden !important;
    /* Para navegadores que requieren esto para que el border-radius funcione en img/videos */
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    mask-image: radial-gradient(white, black) !important;
}

/* Y si están dentro de contenedores: */
.success-gif-container {
    border-radius: 16px !important;
}

/* ===================================================
   STOCK NOTIFICATION BANNER (Light & Dark Mode)
   =================================================== */

.stock-notification-modern {
    background: linear-gradient(135deg, #651fff, #5e17eb);
    color: white;
    padding: 12px 18px;
    border-radius: 12px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    box-shadow: 0 6px 15px rgba(94, 23, 235, 0.4);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stock-notification-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(94, 23, 235, 0.5);
}

.sn-icon-area {
    font-size: 1.5em;
    animation: bellRing 2s infinite;
    transform-origin: top center;
}

@keyframes bellRing {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.sn-text-area {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sn-title {
    font-weight: 800;
    font-size: 1.05em;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.sn-subtitle {
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
}

.sn-count-badge {
    background: #00e676;
    color: #1e1e2e;
    font-size: 1.2em;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: inline-block;
    line-height: 1.2;
}

.sn-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.2em;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.sn-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Modo Oscuro (se ve igual de bien porque el morado contrasta perfectamente, solo ajustamos sombra) */
body.dark-mode .stock-notification-modern {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

/* ===================================================
   ENLARGE POPUP GIFS
   =================================================== */

.error-gif, .success-gif, .scan-gif {
    max-width: 260px !important;
    width: 100% !important;
    height: auto !important;
}

.success-gif-container {
    max-width: 260px !important;
}

/* ===================================================
   FLOATING STOCK BUTTON
   =================================================== */

.btn-stock {
    background-color: #5e17eb !important;
    position: relative;
}

.btn-stock:hover {
    background-color: #4a0bbd !important;
}

.stock-floating-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #00e676;
    color: #1e1e2e;
    font-size: 0.5em;
    font-weight: 900;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 2px solid white;
}

body.dark-mode .stock-floating-badge {
    border-color: #1e1e2e;
}

/* ===================================================
   ENLARGE SUCCESS GIF SPECIFICALLY
   =================================================== */

.success-gif-container {
    max-width: 320px !important;
    width: 100% !important;
    margin: 10px auto 20px auto !important;
}

img.success-gif {
    max-width: 100% !important;
    width: 280px !important;
    height: auto !important;
    transform: scale(1.3);
    transform-origin: center;
}

/* ===================================================
   ALPHA DISPATCH MODAL (Light & Dark Mode)
   =================================================== */

.modern-alpha-modal {
    background: #ffffff;
    border-radius: 16px;
    width: 95%;
    max-width: 650px;
    height: 85vh;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modern-alpha-modal .modal-header {
    background: rgba(233, 30, 99, 0.05); /* Color e91e63 suavizado */
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(233, 30, 99, 0.1);
}

.modern-alpha-modal .modal-header h2 {
    margin: 0;
    color: #e91e63;
    font-size: 1.4em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modern-alpha-modal .modal-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    gap: 15px;
}

.alpha-subtitle {
    color: #666;
    margin: 0;
    font-size: 0.95em;
}

.alpha-filters {
    display: flex;
    gap: 10px;
}

.alpha-search-input {
    flex: 2;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.95em;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: #fff;
    color: #333;
}

.alpha-search-input:focus {
    border-color: #e91e63;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
}

.alpha-dropdown-container {
    flex: 1;
}

.alpha-dropdown-btn {
    padding: 10px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 0.9em;
    height: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.alpha-dropdown-btn:hover {
    border-color: #bbb !important;
}

.alpha-dropdown-content {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    margin-top: 5px;
    padding: 5px 0 !important;
    z-index: 1000 !important;
}

.alpha-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 15px !important;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.2s;
    color: #444;
}

.alpha-checkbox-label:hover {
    background: #f9f9f9 !important;
}

.alpha-checkbox-label:last-child {
    border-bottom: none !important;
}

.alpha-order-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 10px;
    background: #fdfdfd;
}

/* Modificamos el item de la lista que se genera por JS sutilmente vía CSS */
.alpha-order-list > div {
    border-bottom: 1px solid #eee !important;
    padding: 10px !important;
    border-radius: 6px;
    transition: background 0.2s;
}
.alpha-order-list > div:hover {
    background: #f1f5fb !important;
}

.btn-alpha-secondary {
    background: #f0f4f8;
    color: #1565C0;
    border: 1px solid #bbdefb;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-alpha-secondary:hover {
    background: #e3f2fd;
}

.btn-alpha-primary {
    background: linear-gradient(135deg, #ff4081, #e91e63);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
}

.btn-alpha-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4);
}

/* Modo Oscuro */
body.dark-mode .modern-alpha-modal {
    background: #1e1e2e;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
}

body.dark-mode .modern-alpha-modal .modal-header {
    background: rgba(233, 30, 99, 0.1);
    border-bottom-color: rgba(233, 30, 99, 0.2);
}

body.dark-mode .modern-alpha-modal .modal-header h2 { color: #ff80ab; }
body.dark-mode .alpha-subtitle { color: #aaa; }

body.dark-mode .alpha-search-input {
    background: #232336;
    border-color: #3f3f5a;
    color: #eee;
}
body.dark-mode .alpha-search-input:focus {
    border-color: #ff80ab;
    box-shadow: 0 0 0 3px rgba(255, 128, 171, 0.15);
}

body.dark-mode .alpha-dropdown-btn {
    background: #232336 !important;
    border-color: #3f3f5a !important;
    color: #eee;
}

body.dark-mode .alpha-dropdown-content {
    background: #2a2a3f !important;
    border-color: #444466 !important;
}

body.dark-mode .alpha-checkbox-label {
    color: #ccc;
    border-bottom-color: #33334d !important;
}
body.dark-mode .alpha-checkbox-label:hover {
    background: #33334d !important;
}

body.dark-mode .alpha-order-list {
    background: #232336;
    border-color: #3f3f5a;
}
body.dark-mode .alpha-order-list > div {
    border-bottom-color: #33334d !important;
    color: #eee;
}
body.dark-mode .alpha-order-list > div:hover {
    background: #2a2a3f !important;
}

body.dark-mode .btn-alpha-secondary {
    background: #232336;
    color: #90caf9;
    border-color: #3f3f5a;
}
body.dark-mode .btn-alpha-secondary:hover {
    background: #2a2a3f;
    border-color: #90caf9;
}

/* ===================================================
   FIX SLA TOAST ICON COLOR
   =================================================== */

.sla-toast .toast-icon i {
    color: white !important;
}

body.dark-mode .sla-toast .toast-icon i {
    color: white !important;
}

/* ===================================================
   FIX ALPHA MODAL FOOTER ALIGNMENT
   =================================================== */

.modern-alpha-modal .modal-footer {
    padding: 20px 25px;
    background: #fafafa;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

body.dark-mode .modern-alpha-modal .modal-footer {
    background: #181825;
    border-top-color: #2a2a3f;
}

/* Para empujar el botón "Todos" a la izquierda y el resto a la derecha */
.modern-alpha-modal .modal-footer #alphaSelectAllBtn {
    margin-right: auto;
}

/* ===================================================
   FIX ALPHA DROPDOWN POSITIONING
   =================================================== */

.alpha-dropdown-container {
    position: relative !important;
}

.alpha-dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* ===================================================
   COMMENT HISTORY ITEMS (Light & Dark Mode)
   =================================================== */

.comment-history-item {
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    font-size: 0.95em;
}

.comment-history-header {
    font-weight: bold;
    color: #5e17eb;
    font-size: 0.85em;
    margin-bottom: 2px;
}

.comment-history-branch {
    color: #aaa;
    font-weight: normal;
}

.comment-history-body {
    color: #333;
    line-height: 1.4;
}

body.dark-mode .comment-history-item {
    border-bottom-color: #33334d;
}

body.dark-mode .comment-history-header {
    color: #9d5cff;
}

body.dark-mode .comment-history-branch {
    color: #777;
}

body.dark-mode .comment-history-body {
    color: #eee;
}

/* ===================================================
   FIX COMMENT BADGE CLIPPING
   =================================================== */

.comment-btn {
    position: relative !important;
    overflow: visible !important;
}

.report-issue-btn {
    overflow: visible !important; /* Por si en el futuro lleva un badge */
}

/* ===================================================
   COMPACT SIDEBAR FILTERS
   =================================================== */

#filtersContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.filter-item {
    margin-bottom: 0 !important; /* Reset old margin */
}

.compact-filter {
    padding: 6px 12px !important;
    min-height: 34px !important;
}

.compact-filter select {
    font-size: 0.85em !important;
}

.compact-filter i {
    font-size: 0.9em !important;
}

/* ===================================================
   ENHANCE ACTIVE ORDER HIGHLIGHT
   =================================================== */

/* LIGHT MODE ACTIVE ORDER */
#pendingOrdersList li.active-order {
    border: 3px solid #2196f3 !important;
    border-left: 8px solid #1565C0 !important;
    background-color: #e3f2fd !important;
    color: #0d47a1 !important;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.5) !important;
    transform: scale(1.02);
    margin: 5px 0;
    z-index: 10;
    position: relative;
    font-weight: bold;
}

/* DARK MODE ACTIVE ORDER */
body.dark-mode #pendingOrdersList li.active-order {
    border: 3px solid #b388ff !important;
    border-left: 8px solid #9d5cff !important;
    background-color: #2a1461 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(157, 92, 255, 0.6) !important;
    transform: scale(1.02);
    margin: 5px 0;
    z-index: 10;
    position: relative;
    font-weight: bold;
}

/* Asegurar que la lista sea el offsetParent de los li para calcular el scroll correctamente */
#pendingOrdersList {
    position: relative;
}

/* ===================================================
   SKU BADGE STYLES (Light & Dark Mode)
   =================================================== */

.sku-badge {
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 700;
    color: #4a148c;
    background-color: #f3e5f5;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e1bee7;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.8);
}

.sku-badge i {
    color: #8e24aa;
    font-size: 0.9em;
    opacity: 0.8;
}

body.dark-mode .sku-badge {
    color: #ede0ff;
    background-color: #27144d;
    border-color: #452485;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

body.dark-mode .sku-badge i {
    color: #b388ff;
}

/* ===================================================
   MODERN SCAN BAR
   =================================================== */

.modern-scan-container {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1.5;
    min-width: 300px;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

.modern-scan-input-wrapper {
    display: flex;
    flex: 1;
    align-items: center;
}

.modern-scan-input {
    flex: 1;
    border: 2px solid #5e17eb;
    border-right: none;
    padding: 12px 15px;
    border-radius: 8px 0 0 8px;
    font-size: 1.1em;
    outline: none;
    transition: all 0.3s;
}

.modern-scan-input:focus {
    box-shadow: 0 0 0 3px rgba(94, 23, 235, 0.2);
}

.modern-scan-btn {
    background: #5e17eb;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 1.1em;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: background 0.3s;
}

.modern-scan-btn:hover {
    background: #4a11c0;
}

.modern-lote-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(94, 23, 235, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px dashed #5e17eb;
    white-space: nowrap;
}

.lote-toggle-text {
    font-size: 0.95em;
    color: #5e17eb;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}

/* DARK MODE */
body.dark-mode .modern-scan-container {
    background: #181825;
    border-color: #2a2a3e;
}

body.dark-mode .modern-scan-input {
    background: #1f1f33;
    border-color: #9d5cff;
    color: #ffffff;
}

body.dark-mode .modern-scan-input:focus {
    box-shadow: 0 0 0 3px rgba(157, 92, 255, 0.2);
}

body.dark-mode .modern-scan-btn {
    background: #9d5cff;
    color: #181825;
}

body.dark-mode .modern-scan-btn:hover {
    background: #b388ff;
}

body.dark-mode .modern-lote-toggle {
    background: rgba(157, 92, 255, 0.1);
    border-color: #9d5cff;
}

body.dark-mode .lote-toggle-text {
    color: #9d5cff;
}

/* ===================================================
   MODERNIZE STATUS INDICATORS (TAGS)
   =================================================== */

.status-indicator {
    border-radius: 6px !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 0.85em !important;
    padding: 3px 8px !important;
    letter-spacing: 0px !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
}

body.dark-mode .status-indicator {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5) !important;
    border-color: rgba(255,255,255,0.1) !important;
    filter: brightness(0.9) contrast(1.1);
}

/* ===================================================
   MODERNIZE STATUS INDICATORS (ONLY FOR PRODUCTS)
   =================================================== */

/* Revert previous global overrides by restoring original values for general status-indicators */
.status-indicator {
    border-radius: 20px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    border: none !important;
    padding: 4px 12px !important;
}

/* Apply new rounded square design ONLY to product tags (inside the list) */
#pendingOrdersList .item-main-details .status-indicator {
    border-radius: 6px !important;
    font-family: inherit !important; /* Volver a la fuente original */
    font-size: 0.85em !important;
    padding: 3px 8px !important;
    letter-spacing: 0px !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
}

body.dark-mode #pendingOrdersList .item-main-details .status-indicator {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5) !important;
    border-color: rgba(255,255,255,0.1) !important;
    filter: brightness(0.9) contrast(1.1);
}

/* ===================================================
   FIX PRODUCT TAGS SHAPE
   =================================================== */

.product-tag {
    border-radius: 6px !important;
    font-family: inherit !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

body.dark-mode .product-tag {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* ===================================================
   MÓDULO IMPORTADOR: HOJA DE CÁLCULO EDITABLE Y ALERTAS (CLARO/OSCURO)
   =================================================== */

/* Ajuste preventivo para el botón de cerrar en el Flexbox */
#closeImportModalBtn {
    align-self: flex-end !important;
    background-color: #ff5252 !important; /* Rojo premium */
    color: white !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    transition: background 0.15s ease !important;
}

#closeImportModalBtn:hover {
    background-color: #d32f2f !important;
}

/* --- MODO CLARO (Default) --- */

#importOrdersPopup .popup-content {
    background-color: #ffffff !important;
    color: #37474f !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid #cfd8dc !important;
}

#importOrdersPopup h2 {
    color: #2e7d32 !important; /* Título verde esmeralda */
    margin-bottom: 10px;
    font-weight: 700;
}

#importPasteArea {
    background-color: #ffffff !important;
    color: #37474f !important;
    border: 1.5px solid #cfd8dc !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important;
}

#importPasteArea:focus {
    border-color: #2e7d32 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06), 0 0 0 3px rgba(46, 125, 50, 0.15) !important;
}

#importOrdersPopup p {
    color: #546e7a !important;
}

.spreadsheet-container {
    overflow: auto;
    border: 1px solid #cfd8dc !important;
    border-radius: 10px;
    background: #f8f9fa !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.05) !important;
}

.spreadsheet-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', 'Outfit', sans-serif;
    color: #37474f !important; /* Texto oscuro para alto contraste */
}

.spreadsheet-table th {
    background: linear-gradient(135deg, #1565c0, #0d47a1) !important; /* Azul premium */
    color: #ffffff !important;
    font-weight: 600;
    padding: 10px 12px;
    border: 1px solid #0d47a1 !important;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.spreadsheet-table td {
    padding: 9px 12px;
    border: 1px solid #e0e0e0 !important;
    background-color: #ffffff !important;
    transition: all 0.1s ease;
    font-weight: 500;
}

/* Filas alternadas en modo claro */
.spreadsheet-table tr:nth-child(even) td {
    background-color: #f7f9fa !important;
}

.spreadsheet-table td[contenteditable="true"]:hover {
    background-color: #eceff1 !important;
}

.spreadsheet-table td[contenteditable="true"]:focus {
    background-color: #e3f2fd !important; /* Azul suave */
    box-shadow: inset 0 0 0 2px #1976d2 !important;
    color: #0d47a1 !important;
}

/* --- MODO OSCURO --- */

body.dark-mode #importOrdersPopup .popup-content {
    background-color: #1a1e29 !important; /* Gris azulado muy oscuro */
    color: #eceff1 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode #importOrdersPopup h2 {
    color: #69f0ae !important; /* Neón verde-teal */
}

body.dark-mode #importPasteArea {
    background-color: #11141d !important;
    color: #eceff1 !important;
    border: 1.5px solid rgba(255,255,255,0.1) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4) !important;
}

body.dark-mode #importPasteArea:focus {
    border-color: #69f0ae !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 0 3px rgba(105, 240, 174, 0.15) !important;
}

body.dark-mode #importOrdersPopup p {
    color: #b0bec5 !important;
}

body.dark-mode .spreadsheet-container {
    background: #11141d !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

body.dark-mode .spreadsheet-table {
    color: #eceff1 !important; /* Texto claro de alto contraste */
}

body.dark-mode .spreadsheet-table th {
    background: linear-gradient(135deg, #1e2538, #11141d) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

body.dark-mode .spreadsheet-table td {
    border: 1px solid rgba(255,255,255,0.06) !important;
    background-color: #1a1e29 !important;
}

/* Filas alternadas en modo oscuro */
body.dark-mode .spreadsheet-table tr:nth-child(even) td {
    background-color: #212635 !important;
}

body.dark-mode .spreadsheet-table td[contenteditable="true"]:hover {
    background-color: #282e3f !important;
}

body.dark-mode .spreadsheet-table td[contenteditable="true"]:focus {
    background-color: rgba(105, 240, 174, 0.08) !important; /* Teal suave */
    box-shadow: inset 0 0 0 2px #69f0ae !important;
    color: #ffffff !important;
}

/* ===================================================
   ALERTAS Y ERRORES DE ALTO CONTRASTE (CLARO Y OSCURO)
   =================================================== */

/* Celdas Críticas - MODO CLARO */
.spreadsheet-table td.cell-error-critical,
.spreadsheet-table tr td.cell-error-critical {
    background-color: #ffebee !important; /* Rojo suave */
    border: 1.5px solid #d32f2f !important;
    color: #c62828 !important; /* Texto rojo oscuro */
}

/* Celdas Críticas - MODO OSCURO */
body.dark-mode .spreadsheet-table td.cell-error-critical,
body.dark-mode .spreadsheet-table tr td.cell-error-critical {
    background-color: rgba(239, 83, 80, 0.38) !important; /* Rojo traslúcido de alto contraste */
    border: 2px solid #ef5350 !important; /* Borde más notorio */
    color: #ffebee !important; /* Texto claro legible */
}

/* Advertencias (Duplicados) - MODO CLARO */
.spreadsheet-table td.cell-error-warning,
.spreadsheet-table tr td.cell-error-warning {
    background-color: #fff3e0 !important; /* Naranja suave */
    border: 1.5px solid #f57c00 !important;
    color: #e65100 !important; /* Texto naranja oscuro */
}

/* Advertencias (Duplicados) - MODO OSCURO */
body.dark-mode .spreadsheet-table td.cell-error-warning,
body.dark-mode .spreadsheet-table tr td.cell-error-warning {
    background-color: rgba(255, 167, 38, 0.35) !important; /* Naranja traslúcido de alto contraste */
    border: 2px solid #ffb74d !important; /* Borde más notorio */
    color: #fff8e1 !important; /* Texto claro legible */
}


/* ===================================================
   TOOLTIPS DINÁMICOS DE ERROR
   =================================================== */

[data-error-tooltip] {
    position: relative !important;
}

/* Forzar que la celda con hover tenga un z-index superior a la cabecera sticky */
.spreadsheet-table td[data-error-tooltip]:hover {
    z-index: 999999 !important;
}

[data-error-tooltip]:hover::after {
    content: attr(data-error-tooltip);
    position: absolute;
    top: 115%; /* Renderizado abajo de la celda para evitar recorte superior */
    left: 0; /* Alineado a la izquierda para evitar recorte lateral */
    background: #d32f2f !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    z-index: 1000000 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    pointer-events: none !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

[data-error-tooltip].cell-error-warning:hover::after {
    background: #e65100 !important;
}

/* ===================================================
   MENÚ CONTEXTUAL SPREADSHEET (NUEVO)
   =================================================== */

.spreadsheet-context-menu {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    padding: 6px 0 !important;
    width: 220px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9em !important;
    color: #eceff1 !important;
}

/* Modo claro para menú contextual */
body:not(.dark-mode) .spreadsheet-context-menu {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #cfd8dc !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    color: #37474f !important;
}

.context-menu-item {
    padding: 8px 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: background 0.15s ease !important;
    font-weight: 500 !important;
}

.context-menu-item i {
    width: 18px !important;
    text-align: center !important;
}

.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

body:not(.dark-mode) .context-menu-item:hover {
    background: #e3f2fd !important;
    color: #0d47a1 !important;
}

/* ===================================================
   SOPORTE PARA ARRASTRAR Y PEGAR ESTILO SPREADSHEET
   =================================================== */
.spreadsheet-table td {
    position: relative !important;
}

/* Tirador de Autofill (cuadradito flotante estilo Excel/Sheets) */
.autofill-handle {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background-color: #1976d2 !important; /* Azul en modo claro */
    border: 1.5px solid #ffffff !important;
    cursor: crosshair;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border-radius: 2px;
}

body.dark-mode .autofill-handle {
    background-color: #69f0ae !important; /* Verde-teal neón en modo oscuro */
    border: 1.5px solid #1a1e29 !important;
}

/* Resaltado de selección al arrastrar */
.spreadsheet-table td.autofill-highlight {
    background-color: rgba(25, 118, 210, 0.15) !important;
    box-shadow: inset 0 0 0 1px #1976d2 !important;
}

body.dark-mode .spreadsheet-table td.autofill-highlight {
    background-color: rgba(105, 240, 174, 0.15) !important;
    box-shadow: inset 0 0 0 1px #69f0ae !important;
}

/* ===================================================
   Z-INDEX FIX PARA DÍALOGOS DE SWEETALERT2
   =================================================== */
.swal2-container {
    z-index: 1000000 !important; /* Asegurar que esté por encima de popups con z-index: 99999 */
}

/* ===================================================
   SELECCIÓN DE FILAS Y COLUMNAS (SPREADSHEET STYLE)
   =================================================== */
.spreadsheet-table td.row-selected {
    background-color: rgba(25, 118, 210, 0.18) !important;
    box-shadow: inset 0 1px 0 #1976d2, inset 0 -1px 0 #1976d2 !important;
}

body.dark-mode .spreadsheet-table td.row-selected {
    background-color: rgba(105, 240, 174, 0.18) !important;
    box-shadow: inset 0 1px 0 #69f0ae, inset 0 -1px 0 #69f0ae !important;
}

.spreadsheet-table td.column-selected,
.spreadsheet-table th.column-selected {
    background-color: rgba(25, 118, 210, 0.18) !important;
    box-shadow: inset 1px 0 0 #1976d2, inset -1px 0 0 #1976d2 !important;
}

body.dark-mode .spreadsheet-table td.column-selected,
body.dark-mode .spreadsheet-table th.column-selected {
    background-color: rgba(105, 240, 174, 0.18) !important;
    box-shadow: inset 1px 0 0 #69f0ae, inset -1px 0 0 #69f0ae !important;
}

/* Cursor e interacciones en cabeceras de fila y columna */
.row-index-selector {
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.row-index-selector:hover {
    background-color: #37474f !important;
    color: #ffffff !important;
}

body.dark-mode .row-index-selector:hover {
    background-color: #455a64 !important;
    color: #ffffff !important;
}

.spreadsheet-table th[data-field] {
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.15s ease;
}

.spreadsheet-table th[data-field]:hover {
    background: linear-gradient(135deg, #1976d2, #1565c0) !important;
}

body.dark-mode .spreadsheet-table th[data-field]:hover {
    background: linear-gradient(135deg, #2c354a, #1a1e29) !important;
}

/* Botón flotante para eliminar fila o limpiar columna */
.floating-delete-btn {
    position: absolute;
    background: linear-gradient(135deg, #ff5252, #e53935) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.floating-delete-btn:hover {
    background: linear-gradient(135deg, #e53935, #d32f2f) !important;
    transform: translateY(-1px) scale(1.02);
}

.floating-delete-btn:active {
    transform: translateY(0) scale(0.98);
}







/* ===================================================
   FIX LOCATION REGISTRY LAYOUT & DARK MODE BUTTON
   =================================================== */

/* Permitir scroll horizontal si la tabla es muy ancha (evita que se corte la derecha) */
#locationRegistryPopup .inventory-table-container {
    overflow-x: auto !important;
}

/* Forzar contraste blanco para el botón de cerrar en modo oscuro */
body.dark-mode #locationRegistryPopup .close-dashboard-btn {
    color: #ffffff !important;
}

/* ===================================================
   ADMIN DASHBOARD & USER MANAGEMENT PREMIUM STYLES
   =================================================== */

/* Eye toggle for password */
.password-toggle-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
    font-size: 1.1rem;
    z-index: 10;
}
.password-toggle-btn:hover {
    color: #5e17eb;
}
body.dark-mode .password-toggle-btn:hover {
    color: #05fa93;
}

/* Sidebar button */
.theme-dashboard {
    background: linear-gradient(135deg, #5e17eb, #8c52ff) !important;
    color: white !important;
    border: 1px solid #7c3aed !important;
    box-shadow: 0 4px 10px rgba(94, 23, 235, 0.25) !important;
}
.theme-dashboard:hover {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(94, 23, 235, 0.4) !important;
}

/* Container Dashboard */
#dashboardAdminView {
    padding: 10px 5px;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.db-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 15px;
}
body.dark-mode .db-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.db-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #1e1e2e, #5e17eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.dark-mode .db-header h2 {
    background: linear-gradient(135deg, #ffffff, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.db-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-controls .db-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none; /* Evita que los botones se encojan y rompan el texto */
}
.db-select {
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
}
body.dark-mode .db-select {
    background: #1e1e2e;
    color: #fff;
    border-color: #383860;
}
.db-select:focus {
    border-color: #5e17eb;
}
.db-btn-refresh {
    background: #f1f2f6;
    color: #333;
    border: 1px solid #dcdde1;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}
body.dark-mode .db-btn-refresh {
    background: #2a2a3e;
    color: #fff;
    border-color: #383860;
}
.db-btn-refresh:hover {
    background: #5e17eb;
    color: white;
    border-color: #5e17eb;
}

/* Tabs */
.db-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 5px;
}
body.dark-mode .db-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
.db-tab-btn {
    padding: 12px 24px;
    background: transparent;
    border: none;
    color: #777;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}
body.dark-mode .db-tab-btn {
    color: #aaa;
}
.db-tab-btn.active {
    color: #5e17eb;
}
body.dark-mode .db-tab-btn.active {
    color: #05fa93;
}
.db-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #5e17eb;
    border-radius: 3px;
}
body.dark-mode .db-tab-btn.active::after {
    background: #05fa93;
}

/* KPI Grid */
.db-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.db-kpi-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
}
body.dark-mode .db-kpi-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.db-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}
.db-kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}
.db-kpi-info {
    display: flex;
    flex-direction: column;
}
.db-kpi-label {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}
.db-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e1e2e;
    line-height: 1.2;
}
body.dark-mode .db-kpi-value {
    color: #ffffff;
}

/* Branch Grid */
.db-section-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 30px 0 15px 0;
    color: #1e1e2e;
}
body.dark-mode .db-section-title {
    color: #ffffff;
}
.db-branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.db-branch-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
    transition: transform 0.3s, box-shadow 0.3s;
}
body.dark-mode .db-branch-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}
.db-branch-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}
.db-branch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.db-branch-name {
    font-weight: 800;
    font-size: 1.15rem;
    color: #1e1e2e;
}
body.dark-mode .db-branch-name {
    color: #ffffff;
}
.db-branch-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
}
.db-branch-status.active {
    background: rgba(0, 230, 118, 0.12);
    color: #00e676;
}
.db-branch-progress-container {
    margin: 15px 0;
}
.db-branch-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 5px;
}
.db-branch-progress-bar {
    height: 8px;
    width: 100%;
    background: #f1f2f6;
    border-radius: 10px;
    overflow: hidden;
}
body.dark-mode .db-branch-progress-bar {
    background: #2a2a3e;
}
.db-branch-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #5e17eb, #00e676);
    border-radius: 10px;
    transition: width 0.6s ease-out;
}
.db-branch-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
body.dark-mode .db-branch-stats {
    border-top-color: rgba(255, 255, 255, 0.05);
}
.db-branch-stat-item {
    display: flex;
    flex-direction: column;
}
.db-branch-stat-label {
    font-size: 0.75rem;
    color: #888;
}
.db-branch-stat-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}
body.dark-mode .db-branch-stat-val {
    color: #fff;
}

/* Charts Grid */
.db-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}
@media (max-width: 500px) {
    .db-charts-grid {
        grid-template-columns: 1fr;
    }
}
.db-chart-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
}
body.dark-mode .db-chart-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}
.db-chart-title {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #1e1e2e;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.dark-mode .db-chart-title {
    color: #ffffff;
}
.db-chart-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
}

/* Tables Section */
.db-table-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
    margin-bottom: 30px;
}
body.dark-mode .db-table-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}
.db-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}
.db-table-wrapper {
    overflow-x: auto;
}
.db-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 1em;
}
.db-table th {
    padding: 14px 16px;
    background: #f8f9fa;
    color: #333;
    font-weight: 700;
    border-bottom: 2px solid rgba(0,0,0,0.06);
}
body.dark-mode .db-table th {
    background: #2a2a3e;
    color: #fff;
    border-bottom: 2px solid rgba(255,255,255,0.06);
}
.db-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: #444;
}
body.dark-mode .db-table td {
    border-bottom-color: rgba(255,255,255,0.05);
    color: #ddd;
}
.db-table tbody tr:hover {
    background: rgba(0,0,0,0.01);
}
body.dark-mode .db-table tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

/* Badges for roles and status */
.role-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
}
.role-badge.admin {
    background: rgba(94, 23, 235, 0.12);
    color: #5e17eb;
    border: 1px solid rgba(94, 23, 235, 0.3);
}
body.dark-mode .role-badge.admin {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.3);
}
.role-badge.picker {
    background: rgba(0, 150, 136, 0.12);
    color: #009688;
    border: 1px solid rgba(0, 150, 136, 0.3);
}
body.dark-mode .role-badge.picker {
    background: rgba(5, 250, 147, 0.12);
    color: #05fa93;
    border-color: rgba(5, 250, 147, 0.3);
}

/* CRUD Actions */
.db-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
    margin-right: 5px;
}
.db-action-btn.edit {
    color: #2196f3;
}
.db-action-btn.edit:hover {
    background: rgba(33, 150, 243, 0.1);
}
.db-action-btn.delete {
    color: #f44336;
}
.db-action-btn.delete:hover {
    background: rgba(244, 67, 54, 0.1);
}
.db-action-btn.password {
    color: #ff9800;
}
.db-action-btn.password:hover {
    background: rgba(255, 152, 0, 0.1);
}

/* Modal Form Styles */
.db-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 20000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}
.db-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    animation: modalSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.dark-mode .db-modal-content {
    background: #1e1e2e;
    color: white;
    border: 1px solid #383860;
}
@keyframes modalSlide {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.db-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 12px;
}
body.dark-mode .db-modal-header {
    border-bottom-color: rgba(255,255,255,0.06);
}
.db-modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
}
.db-modal-close {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #888;
    padding: 5px;
    border-radius: 6px;
    transition: background 0.2s;
}
.db-modal-close:hover {
    background: rgba(0,0,0,0.05);
    color: #333;
}
body.dark-mode .db-modal-close:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

.db-form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-form-group label {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #777;
    letter-spacing: 0.5px;
}
body.dark-mode .db-form-group label {
    color: #aaa;
}
.db-input {
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px !important;
    outline: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s;
    background: #fcfcfc;
    color: #333;
}
body.dark-mode .db-input {
    background: #2a2a3e;
    color: white;
    border-color: #383860;
}
.db-input:focus {
    border-color: #5e17eb;
}
body.dark-mode .db-input:focus {
    border-color: #05fa93;
}

.db-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}
.db-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
    text-align: center;
}
.db-btn.primary {
    background: #5e17eb;
    color: white;
    box-shadow: 0 4px 10px rgba(94, 23, 235, 0.25);
}
.db-btn.primary:hover {
    background: #7c3aed;
}
body.dark-mode .db-btn.primary {
    background: #00cc7a;
    color: #000;
    box-shadow: 0 4px 10px rgba(0, 204, 122, 0.25);
}
body.dark-mode .db-btn.primary:hover {
    background: #05fa93;
}
.db-btn.secondary {
    background: #f1f2f6;
    color: #333;
    border: 1px solid #dcdde1;
}
body.dark-mode .db-btn.secondary {
    background: #2a2a3e;
    color: #fff;
    border-color: #383860;
}
.db-btn.secondary:hover {
    background: #e4e7eb;
}
body.dark-mode .db-btn.secondary:hover {
    background: #383858;
}

/* User search / actions toolbar */
.db-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.db-search-box {
    position: relative;
    max-width: 300px;
    width: 100%;
}
.db-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}
.db-search-box input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border-radius: 10px;
    border: 1px solid #ddd;
    outline: none;
    font-size: 0.9em;
    box-sizing: border-box;
}
body.dark-mode .db-search-box input {
    background: #2a2a3e;
    color: white;
    border-color: #383860;
}
.db-btn-add {
    background: #5e17eb;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(94, 23, 235, 0.25);
    transition: all 0.3s;
}
body.dark-mode .db-btn-add {
    background: #00cc7a;
    color: #000;
    box-shadow: 0 4px 10px rgba(0, 204, 122, 0.25);
}
.db-btn-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(94, 23, 235, 0.35);
}
body.dark-mode .db-btn-add:hover {
    background: #05fa93;
    box-shadow: 0 6px 12px rgba(5, 250, 147, 0.35);
}

/* Style for active user widget */
.db-user-widget {
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(94, 23, 235, 0.15);
    margin-bottom: 15px;
    transition: all 0.3s;
}
body.dark-mode .db-user-widget {
    background: #1e1e2e;
    border: 1px solid #383860;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.db-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-user-avatar {
    font-size: 2.5em;
    color: #5e17eb;
}
body.dark-mode .db-user-avatar {
    color: #a78bfa;
}
.db-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.db-user-name {
    color: #2c3e50;
    font-weight: bold;
    font-size: 1.05em;
    line-height: 1.2;
}
body.dark-mode .db-user-name {
    color: #eee;
}
.db-user-rut {
    color: #7f8c8d;
    font-size: 0.85em;
}
body.dark-mode .db-user-rut {
    color: #aaa;
}
.db-user-info .role-badge {
    margin-top: 4px !important;
    font-size: 0.7em !important;
}

.db-user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-user-action-btn {
    position: relative;
    background: rgba(94, 23, 235, 0.05);
    color: #5e17eb;
    border: 1px solid rgba(94, 23, 235, 0.1);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    font-size: 1em;
}
.db-user-action-btn:hover {
    background: #5e17eb;
    color: white;
    border-color: #5e17eb;
}
body.dark-mode .db-user-action-btn {
    background: #2a2a3e;
    color: #a78bfa;
    border-color: #383860;
}
body.dark-mode .db-user-action-btn:hover {
    background: #00e676;
    color: #000;
    border-color: #00e676;
}
.db-user-action-btn.logout-btn {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.2);
}
.db-user-action-btn.logout-btn:hover {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

/* =========================================================================
   ESTILOS ADICIONALES PARA EL CONTROL DE AGENDAS CRÍTICAS (LÍMITE 13:00 HRS)
   ========================================================================= */

/* Banner de Alerta */
.db-alert-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-size: 0.95em;
    line-height: 1.5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    animation: slideDown 0.4s ease-out;
}
.db-alert-banner.success {
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid rgba(0, 230, 118, 0.3);
    color: #00b0ff;
}
body:not(.dark-mode) .db-alert-banner.success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
}
.db-alert-banner.warning {
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #f44336;
    animation: pulseBorderRed 2s infinite;
}
body:not(.dark-mode) .db-alert-banner.warning {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    color: #c62828;
}

.db-alert-banner.info {
    background: rgba(2, 119, 189, 0.08);
    border: 1px solid rgba(2, 119, 189, 0.3);
    color: #29b6f6;
}
body:not(.dark-mode) .db-alert-banner.info {
    background: #e1f5fe;
    border: 1px solid #b3e5fc;
    color: #0277bd;
}

@keyframes pulseBorderRed {
    0% { border-color: rgba(244, 67, 54, 0.3); box-shadow: 0 4px 15px rgba(244, 67, 54, 0.05); }
    50% { border-color: rgba(244, 67, 54, 0.8); box-shadow: 0 4px 20px rgba(244, 67, 54, 0.25); }
    100% { border-color: rgba(244, 67, 54, 0.3); box-shadow: 0 4px 15px rgba(244, 67, 54, 0.05); }
}

/* Grid de sucursales en paralelo */
.db-priority-branches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

/* Card de sucursal */
.db-priority-branch-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body:not(.dark-mode) .db-priority-branch-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.db-priority-branch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(94, 23, 235, 0.15);
}

/* Headers con degradado */
.db-priority-branch-header {
    padding: 20px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.db-priority-branch-header h3 {
    margin: 0;
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white !important;
}
.db-priority-branch-header.nunoa {
    background: linear-gradient(135deg, #5e17eb, #1e88e5);
}
.db-priority-branch-header.reina {
    background: linear-gradient(135deg, #00b8d4, #1e88e5);
}
.db-priority-branch-header.virtual {
    background: linear-gradient(135deg, #8e24aa, #5e17eb);
}

.db-priority-badge-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white !important;
}

/* Body y estadísticas */
.db-priority-branch-body {
    padding: 20px;
}
.db-priority-stats-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.db-priority-stats-row .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.db-priority-stats-row .stat-item .label {
    font-size: 0.75em;
    color: #777;
    text-transform: uppercase;
    font-weight: bold;
}
.db-priority-stats-row .stat-item .val {
    font-size: 1.15em;
    font-weight: 800;
}
.db-priority-stats-row .stat-item .val.pending {
    color: #ef5350;
}
.db-priority-stats-row .stat-item .val.completed {
    color: #26a69a;
}
.db-priority-stats-row .stat-item .val.pct {
    color: #5e17eb;
}
body.dark-mode .db-priority-stats-row .stat-item .val.pct {
    color: #05fa93;
}

/* Barra de progreso de prioridad */
.db-priority-progress-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 25px;
}
body.dark-mode .db-priority-progress-bar {
    background: rgba(255, 255, 255, 0.05);
}
.db-priority-progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, #5e17eb, #00e676);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Contenedor de lista de pedidos */
.db-priority-orders-list-container {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 15px;
}
body.dark-mode .db-priority-orders-list-container {
    border-top-color: rgba(255, 255, 255, 0.05);
}
.db-priority-orders-list-container h4 {
    margin: 0 0 12px 0;
    font-size: 0.9em;
    color: #5e17eb;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}
body.dark-mode .db-priority-orders-list-container h4 {
    color: #05fa93;
}

.db-priority-orders-list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 5px;
}
.db-priority-orders-list::-webkit-scrollbar {
    width: 4px;
}
.db-priority-orders-list::-webkit-scrollbar-thumb {
    background: rgba(94, 23, 235, 0.3);
    border-radius: 10px;
}

/* Item de pedido de prioridad */
.db-priority-order-item {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
body.dark-mode .db-priority-order-item {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.03);
}
.db-priority-order-item:hover {
    background: rgba(94, 23, 235, 0.05);
    border-color: rgba(94, 23, 235, 0.2);
    transform: translateX(3px);
}
body.dark-mode .db-priority-order-item:hover {
    background: rgba(5, 250, 147, 0.05);
    border-color: rgba(5, 250, 147, 0.2);
}

.db-priority-order-item .left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.db-priority-order-item .left .num {
    font-weight: bold;
    font-size: 0.9em;
    color: #1e1e2e;
}
body.dark-mode .db-priority-order-item .left .num {
    color: #fff;
}
.db-priority-order-item .left .info {
    font-size: 0.78em;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-priority-order-item .right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-priority-empty {
    text-align: center;
    padding: 25px 10px;
    color: #999;
    font-size: 0.85em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.db-priority-empty i {
    font-size: 1.5em;
    color: #26a69a;
}

/* Ocultar botones flotantes en la vista del Dashboard Admin */
body.dashboard-active .floating-action-btn {
    display: none !important;
}

/* Botón de limpiar filtros en Registro de Ubicaciones */
.registry-clear-filters-btn {
    background: #e53935;
    color: white !important;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    height: 38px;
    box-sizing: border-box;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.1s ease;
}
.registry-clear-filters-btn:hover {
    background: #d32f2f;
}
.registry-clear-filters-btn:active {
    transform: scale(0.97);
}
body.dark-mode .registry-clear-filters-btn {
    background: #c62828;
}
body.dark-mode .registry-clear-filters-btn:hover {
    background: #b71c1c;
}

/* Estilos de barra de progreso para Control de Pedidos por Agenda */
.db-agenda-progress-bar {
    flex-grow: 1;
    height: 8px;
    background: #f1f2f6;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
body.dark-mode .db-agenda-progress-bar {
    background: #2a2a3e;
}
.db-agenda-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* --- ESTILOS DE REDISEÑO PARA REGISTRO DE UBICACIONES DE STOCK --- */
.registry-table th.col-action, .registry-table td.col-action {
    width: 9%;
    min-width: 90px;
    text-align: center;
}
.registry-table th.col-container, .registry-table td.col-container {
    width: 10%;
    min-width: 85px;
    text-align: center;
}
.registry-table th.col-sku, .registry-table td.col-sku {
    width: 15%;
    min-width: 120px;
    font-family: monospace;
    font-size: 0.95em;
    letter-spacing: -0.3px;
}
.registry-table th.col-type, .registry-table td.col-type {
    width: auto;
    min-width: 140px;
}
.registry-table th.col-talla, .registry-table td.col-talla {
    width: 8%;
    min-width: 60px;
    text-align: center;
}
.registry-table th.col-qty, .registry-table td.col-qty {
    width: 8%;
    min-width: 75px;
    text-align: center;
}
.registry-table th.col-manga, .registry-table td.col-manga {
    width: 10%;
    min-width: 85px;
    text-align: center;
}
.registry-table th.col-cuello, .registry-table td.col-cuello {
    width: 12%;
    min-width: 95px;
    text-align: center;
}
.registry-table th.col-color, .registry-table td.col-color {
    width: 12%;
    min-width: 110px;
    text-align: center;
}

/* Efecto hover premium y redondeo de filas */
.registry-table tbody tr {
    transition: background-color 0.15s ease;
}
.registry-table tbody tr:hover {
    background-color: rgba(94, 23, 235, 0.05) !important;
}
body.dark-mode .registry-table tbody tr:hover {
    background-color: rgba(0, 230, 118, 0.05) !important;
}

/* Ajustes de estilo para el botón Mover */
.registry-table td.col-action button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
    transition: all 0.2s ease;
}
.registry-table td.col-action button:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.35);
}

/* Rediseño de inputs y selects de filtros de columna */
.registry-filter-select, .registry-filter-input {
    width: 100%;
    padding: 5px 8px !important;
    border: 1px solid #cfd8dc;
    border-radius: 6px !important;
    background-color: #ffffff;
    font-size: 0.82em !important;
    font-weight: normal;
    outline: none;
    margin-top: 6px;
    box-sizing: border-box;
    transition: all 0.15s ease;
}
.registry-filter-select:focus, .registry-filter-input:focus {
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
}
body.dark-mode .registry-filter-select, body.dark-mode .registry-filter-input {
    background-color: #26262b;
    border-color: #44444a;
    color: #ffffff;
}
body.dark-mode .registry-filter-select:focus, body.dark-mode .registry-filter-input:focus {
    border-color: #00e676;
    box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.15);
}

/* Encabezados modernos y limpios */
.registry-table th {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.82em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #cbd5e1;
    padding: 12px 10px;
}
body.dark-mode .registry-table th {
    background: #1e1e24;
    color: #94a3b8;
    border-bottom: 2px solid #334155;
}

/* --- ESTILOS MODERNOS PARA POPUP MOVER --- */
.modern-mover-popup {
    max-width: 450px !important;
    width: 95vw;
    padding: 24px !important;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: left !important;
}
body.dark-mode .modern-mover-popup {
    background: #1e1e24;
    border: 1px solid #333;
}
.modern-mover-popup h2 {
    margin-top: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4em;
    border-bottom: 2px solid rgba(0,0,0,0.05);
    padding-bottom: 12px;
    margin-bottom: 15px;
}
body.dark-mode .modern-mover-popup h2 {
    color: #e0e0e0;
    border-bottom-color: rgba(255,255,255,0.05);
}
.mover-subtitle {
    color: #2196f3;
    font-size: 0.95em;
    margin-bottom: 18px;
    font-weight: bold;
    text-align: center;
}
body.dark-mode .mover-subtitle {
    color: #64b5f6;
}
.mover-form-group {
    margin-bottom: 15px;
}
.mover-form-group label {
    font-weight: 600;
    font-size: 0.85em;
    color: #555;
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
body.dark-mode .mover-form-group label {
    color: #aaa;
}
.mover-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    box-sizing: border-box;
    font-size: 0.95em;
    transition: all 0.2s ease;
}
.mover-input:focus {
    border-color: #2196f3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}
body.dark-mode .mover-input {
    background: #2a2a30;
    border-color: #444;
    color: #eee;
}
body.dark-mode .mover-input:focus {
    border-color: #00e676;
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15);
}
.btn-mover-new {
    background: #2196f3;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-mover-new:hover {
    background: #1976d2;
}
.mover-info-box {
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 0.85em;
    margin-bottom: 15px;
    border-left: 4px solid #2196f3;
    line-height: 1.5;
}
body.dark-mode .mover-info-box {
    background: #2a2a30;
    color: #ccc;
    border-left-color: #00e676;
}
.mover-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 25px;
}
.btn-mover-save {
    background: #4caf50;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    flex: 1;
    font-size: 1em;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-mover-save:hover {
    background: #43a047;
}
.btn-mover-cancel {
    background: #f44336;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    flex: 1;
    font-size: 1em;
    transition: background 0.2s;
}
.btn-mover-cancel:hover {
    background: #e53935;
}

/* --- ESTILOS PARA BADGES DE ESTADO DE CONTENEDOR --- */
.state-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.82em;
    font-weight: 700;
    white-space: nowrap;
}
/* Vacío (Alerta Rojo) */
.state-badge.state-empty {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}
body.dark-mode .state-badge.state-empty {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #b91c1c;
}
/* Disponible (Azul) */
.state-badge.state-available {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}
body.dark-mode .state-badge.state-available {
    background: #0c4a6e;
    color: #38bdf8;
    border-color: #0284c7;
}
/* Cerrada (Verde de Stock) */
.state-badge.state-closed {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
body.dark-mode .state-badge.state-closed {
    background: #14532d;
    color: #86efac;
    border-color: #15803d;
}
/* Abierta */
.state-badge.state-open {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}
body.dark-mode .state-badge.state-open {
    background: #78350f;
    color: #fde68a;
    border-color: #d97706;
}

/* Multi-step styling */
.mover-step {
    animation: fadeInStep 0.3s ease;
}
@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.step-label {
    font-size: 0.82em;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 12px;
}
/* Action cards */
.mover-action-cards {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.mover-action-card {
    flex: 1;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
}
body.dark-mode .mover-action-card {
    border-color: #334155;
    background: #1e293b;
}
.mover-action-card:hover {
    transform: translateY(-2px);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
.mover-action-card.selected {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
body.dark-mode .mover-action-card.selected {
    border-color: #00e676;
    background: rgba(0, 230, 118, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.25);
}
.mover-action-card span {
    font-weight: 700;
    font-size: 1.05em;
    color: #1e293b;
}
body.dark-mode .mover-action-card span {
    color: #f8fafc;
}
.mover-action-card small {
    display: block;
    font-weight: 400;
    font-size: 0.78em;
    color: #64748b;
    margin-top: 4px;
}
/* Icons inside cards */
.action-icon-ingreso {
    font-size: 2.2em;
    color: #3b82f6;
}
body.dark-mode .action-icon-ingreso {
    color: #60a5fa;
}
.action-icon-retiro {
    font-size: 2.2em;
    color: #f59e0b;
}
/* Step action buttons */
.mover-step-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 30px;
}
.btn-mover-next {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
}
.btn-mover-next:hover {
    background: #2563eb;
}
.btn-mover-back {
    background: #64748b;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
}
.btn-mover-back:hover {
    background: #475569;
}
/* Quantity Emphasis Box */
.qty-emphasis-box {
    padding: 14px;
    border-radius: 8px;
    font-size: 0.92em;
    line-height: 1.5;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.qty-emphasis-box.emphasis-ingreso {
    background: rgba(59, 130, 246, 0.08);
    border-left: 4px solid #3b82f6;
    color: #1e3a8a;
}
body.dark-mode .qty-emphasis-box.emphasis-ingreso {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.15);
}
.qty-emphasis-box.emphasis-retiro {
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid #f59e0b;
    color: #78350f;
}
body.dark-mode .qty-emphasis-box.emphasis-retiro {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.15);
}
.qty-highlight {
    font-size: 1.3em;
    font-weight: 800;
    margin: 0 4px;
}

/* Suggestions list inside Step 2 */
.mover-suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 99;
}
body.dark-mode .mover-suggestions-list {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.sku-suggestion-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.88em;
    text-align: left;
}
body.dark-mode .sku-suggestion-item {
    border-bottom-color: #334155;
}
.sku-suggestion-item:last-child {
    border-bottom: none;
}
.sku-suggestion-item:hover {
    background: #f1f5f9;
}
body.dark-mode .sku-suggestion-item:hover {
    background: #334155;
}
.sku-sug-header {
    color: #1e293b;
    font-weight: 700;
}
body.dark-mode .sku-sug-header {
    color: #f8fafc;
}
.sku-sug-body {
    color: #64748b;
    margin-top: 3px;
}
body.dark-mode .sku-sug-body {
    color: #94a3b8;
}

/* --- ESTILOS PARA POPUP CREAR PEDIDO MANUAL --- */
.manual-order-table thead {
    background: #f1f5f9;
    color: #475569;
}
body.dark-mode .manual-order-table thead {
    background: #2a2a30;
    color: #e0e0e0;
    border-bottom: 2px solid #334155;
}
body.dark-mode .manual-order-table {
    border-color: rgba(255,255,255,0.1) !important;
}
.totu-display-box {
    background: rgba(46, 125, 50, 0.08);
    border-left: 4px solid #2e7d32;
}
body.dark-mode .totu-display-box {
    background: rgba(0, 230, 118, 0.1);
    border-left-color: #00e676;
}
body.dark-mode .totu-display-box > div:first-child {
    color: #999 !important;
}
body.dark-mode #newOrderTotuDisplay {
    color: #00e676 !important;
}

/* --- ESTILOS NEÓN Y GLASSMORPHISM (CREAR PEDIDO) --- */
.create-order-title {
    color: #2e7d32;
}
body.dark-mode .create-order-title {
    color: #4ade80 !important;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

/* Rediseño del borde y sombra del modal general para dark mode */
body.dark-mode .modern-mover-popup {
    background: linear-gradient(145deg, #1e1e24, #1a1a20) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(74, 222, 128, 0.05) !important;
}

/* Totu Box con efecto neón/cristal */
body.dark-mode .totu-display-box {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.15), rgba(0, 230, 118, 0.05)) !important;
    border: 1px solid rgba(0, 230, 118, 0.3) !important;
    border-left: 4px solid #00e676 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(0, 230, 118, 0.05) !important;
    backdrop-filter: blur(5px);
}
body.dark-mode #newOrderTotuDisplay {
    color: #4ade80 !important;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.6) !important;
}

/* Botones de acción */
.btn-mover-save {
    background: #2e7d32 !important;
    box-shadow: none !important;
}
.btn-mover-save:hover {
    background: #1b5e20 !important;
    transform: translateY(-1px);
}
body.dark-mode .btn-mover-save {
    background: #2e7d32 !important;
    box-shadow: none !important;
    color: white !important;
}
body.dark-mode .btn-mover-save:hover {
    background: #43a047 !important;
    box-shadow: none !important;
    filter: brightness(1.1);
}

/* Inputs de vidrio esmerilado en modo oscuro */
body.dark-mode .mover-input {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}
body.dark-mode .mover-input:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15), inset 0 0 10px rgba(74, 222, 128, 0.1) !important;
}

/* Fix para opciones del select en modo oscuro */
body.dark-mode .mover-input option {
    background-color: #1e1e24;
    color: #eee;
}

/* Tabla más integrada */
body.dark-mode .manual-order-table thead {
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* =========================================================================
   MÓDULO: PUNTO DE RETIRO (RETIRO EN TIENDA)
   ========================================================================= */

/* Filtros */
.pr-filters-panel {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

body.dark-mode .pr-filters-panel {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.pr-search-box {
    position: relative;
    width: 100%;
}

.pr-search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.pr-search-box input {
    width: 100%;
    padding: 12px 12px 12px 42px;
    border: 1px solid #cfd8dc;
    border-radius: 10px;
    font-size: 0.95em;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

body.dark-mode .pr-search-box input {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.pr-search-box input:focus {
    border-color: #5e17eb;
    box-shadow: 0 0 0 3px rgba(94, 23, 235, 0.15);
}

body.dark-mode .pr-search-box input:focus {
    border-color: #00e676;
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15);
}

.pr-select-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

@media (max-width: 768px) {
    .pr-select-group {
        grid-template-columns: 1fr;
    }
}

.pr-filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pr-filter-item label {
    font-size: 0.855em;
    font-weight: 700;
    color: #546e7a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.dark-mode .pr-filter-item label {
    color: #90a4ae;
}

.pr-filter-item select, .pr-filter-item input[type="date"] {
    padding: 10px 12px;
    border: 1px solid #cfd8dc;
    border-radius: 8px;
    font-size: 0.9em;
    background: #ffffff;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-mode .pr-filter-item select, body.dark-mode .pr-filter-item input[type="date"] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.pr-filter-item select:focus, .pr-filter-item input[type="date"]:focus {
    border-color: #5e17eb;
}

body.dark-mode .pr-filter-item select:focus, body.dark-mode .pr-filter-item input[type="date"]:focus {
    border-color: #00e676;
}

body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.2s;
}

body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Badges de Estado del Punto de Retiro */
.pr-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.8em;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
}

.pr-badge.pendiente,
.pr-badge.listo {
    background: rgba(255, 152, 0, 0.12);
    color: #e65100;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

body.dark-mode .pr-badge.pendiente,
body.dark-mode .pr-badge.listo {
    background: rgba(255, 152, 0, 0.08);
    color: #ffb74d;
    border-color: rgba(255, 152, 0, 0.2);
}

.pr-badge.no-preparado {
    background: rgba(156, 39, 176, 0.12);
    color: #8e24aa;
    border: 1px solid rgba(156, 39, 176, 0.3);
}

body.dark-mode .pr-badge.no-preparado {
    background: rgba(186, 104, 200, 0.08);
    color: #ba68c8;
    border-color: rgba(186, 104, 200, 0.2);
}

.pr-badge.entregado {
    background: rgba(76, 175, 80, 0.12);
    color: #1b5e20;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

body.dark-mode .pr-badge.entregado {
    background: rgba(76, 175, 80, 0.08);
    color: #81c784;
    border-color: rgba(76, 175, 80, 0.2);
}

.pr-badge.cancelado {
    background: rgba(244, 67, 54, 0.12);
    color: #b71c1c;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

body.dark-mode .pr-badge.cancelado {
    background: rgba(244, 67, 54, 0.08);
    color: #e57373;
    border-color: rgba(244, 67, 54, 0.2);
}

/* Animaciones y Clases Extra */
.clickable-stat {
    cursor: pointer;
}

.clickable-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(94, 23, 235, 0.1) !important;
}

body.dark-mode .clickable-stat:hover {
    box-shadow: 0 12px 24px rgba(0, 230, 118, 0.1) !important;
}

/* Pulsing dot para pedidos pendientes de retiro */
.pulse-dot-orange {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #ff9800;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
    animation: prPulseOrange 1.6s infinite;
}

@keyframes prPulseOrange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(255, 152, 0, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
    }
}

/* Fix Global para todas las opciones de desplegables (select) en Modo Oscuro */
body.dark-mode select option {
    background-color: #1e1e24 !important;
    color: #eee !important;
}

/* Fix Global para Popups de SweetAlert2 en Modo Oscuro */
body.dark-mode .swal2-popup {
    background: #1e1e2e !important;
    color: #eee !important;
    border: 1px solid #383860;
}
body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
    color: #eee !important;
}
body.dark-mode .swal2-input,
body.dark-mode .swal2-textarea,
body.dark-mode .swal2-select,
body.dark-mode .swal2-radio {
    background: #2a2a3e !important;
    color: #eee !important;
    border-color: #444 !important;
}
body.dark-mode .swal2-input:focus,
body.dark-mode .swal2-textarea:focus {
    border-color: #00e676 !important;
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15) !important;
}
/* Estilo dinámico para la caja de info (nota de correo) */
.email-preview-info {
    border: 1px solid #e0d9f6;
    padding: 12px;
    border-radius: 8px;
    background-color: #fcfbff;
    font-size: 0.82em;
    color: #555;
    line-height: 1.4;
}
body.dark-mode .email-preview-info {
    border: 1px solid #383860;
    background-color: rgba(255,255,255,0.02);
    color: #aaa;
}
body.dark-mode .email-preview-info i {
    color: #a78bfa !important;
}

/* =========================================================================
   NOTIFICATION SYSTEM STYLES
   ========================================================================= */

/* 1. Top Bar Banner */
.notification-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #ff9800;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 0.95em;
    transition: all 0.3s ease;
}

.notification-top-bar-content {
    flex-grow: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.notification-top-bar-close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.6em;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    line-height: 1;
    padding: 0 5px;
}

.notification-top-bar-close:hover {
    opacity: 1;
}

/* Layout adjustments when top bar is visible */
body.has-top-bar {
    --top-bar-actual-height: 40px;
}
body.has-top-bar #sidebar {
    top: var(--top-bar-actual-height) !important;
    height: calc(100% - var(--top-bar-actual-height)) !important;
}
body.has-top-bar #main-content {
    margin-top: var(--top-bar-actual-height) !important;
    height: calc(100vh - var(--top-bar-actual-height)) !important;
}
body.has-top-bar #right-panel {
    top: var(--top-bar-actual-height) !important;
    height: calc(100% - var(--top-bar-actual-height)) !important;
}

/* 2. Sidebar Bell Indicator Badge */
.notification-badge {
    background-color: #e74c3c;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.8em;
    font-weight: bold;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 15px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    line-height: 1.2;
}

/* 3. Notifications Center Modal Card styles */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-card {
    background: #f8f9fa;
    border-left: 4px solid #5e17eb;
    border-radius: 8px;
    padding: 12px 15px;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    color: #333333;
}

.notification-card.unread {
    background: #f0ebfa;
    border-left-color: #00e676;
    box-shadow: 0 2px 6px rgba(94, 23, 235, 0.08);
}

.notification-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.8em;
    color: #777;
}

.notification-card-title {
    font-weight: bold;
    font-size: 1.05em;
    color: #2c3e50;
    margin-bottom: 6px;
    padding-right: 20px;
}

.notification-card-message {
    font-size: 0.9em;
    line-height: 1.45;
    color: #555;
    word-break: break-word;
}

.notification-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.btn-notif-read {
    background: transparent;
    border: 1px solid #5e17eb;
    color: #5e17eb;
    font-size: 0.78em;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-notif-read:hover {
    background: #5e17eb;
    color: white;
}

.notification-dot {
    width: 8px;
    height: 8px;
    background-color: #00e676;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 15px;
}

/* 4. Dark Mode overrides */
body.dark-mode .notification-card {
    background: #191b2a;
    color: #e0e0e0;
    border-left-color: #5e17eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.dark-mode .notification-card.unread {
    background: #201e33;
    border-left-color: #00e676;
}

body.dark-mode .notification-card-title {
    color: #ffffff;
}

body.dark-mode .notification-card-message {
    color: #b5b5c3;
}

body.dark-mode #notificationsModal .db-modal-content {
    background: #111322;
    color: white;
    border: 1px solid #2a2e45;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

body.dark-mode #notificationsModal .db-modal-header {
    border-bottom-color: #2a2e45;
}

body.dark-mode #unreadNotificationsText {
    color: #aaa !important;
}

body.dark-mode .db-modal-close {
    color: #aaa !important;
}

body.dark-mode .db-modal-close:hover {
    color: #fff !important;
}

/* LOGÍSTICA INVERSA STYLES */
.rl-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}
.rl-badge.cambio {
    background: rgba(156, 39, 176, 0.15);
    color: #e040fb;
    border: 1px solid rgba(156, 39, 176, 0.3);
}
.rl-badge.devolucion {
    background: rgba(233, 30, 99, 0.15);
    color: #ff4081;
    border: 1px solid rgba(233, 30, 99, 0.3);
}

body.dark-mode .rl-badge.cambio {
    background: rgba(186, 104, 200, 0.22);
    color: #e040fb;
    border-color: rgba(186, 104, 200, 0.45);
}
body.dark-mode .rl-badge.devolucion {
    background: rgba(244, 143, 177, 0.22);
    color: #ff80ab;
    border-color: rgba(244, 143, 177, 0.45);
}

/* Tooltip or additional styles if needed */
.rl-prod-list {
    font-family: monospace;
    font-size: 0.85em;
    background: rgba(255,255,255,0.04);
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 200px;
    word-break: break-all;
    white-space: pre-wrap;
}
body.dark-mode .rl-prod-list {
    background: rgba(0,0,0,0.2);
    color: #e0e0f5;
}

/* PUNTO DE VENTA STYLES */
.pv-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}
.pv-badge.boleta {
    background: rgba(2, 136, 209, 0.15);
    color: #29b6f6;
    border: 1px solid rgba(2, 136, 209, 0.3);
}
.pv-badge.factura {
    background: rgba(245, 124, 0, 0.15);
    color: #ffa726;
    border: 1px solid rgba(245, 124, 0, 0.3);
}

body.dark-mode .pv-badge.boleta {
    background: rgba(2, 136, 209, 0.22);
    color: #4fc3f7;
    border-color: rgba(2, 136, 209, 0.45);
}
body.dark-mode .pv-badge.factura {
    background: rgba(245, 124, 0, 0.22);
    color: #ffb74d;
    border-color: rgba(245, 124, 0, 0.45);
}

.pv-pay-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
}
.pv-pay-badge.efectivo {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}
.pv-pay-badge.debito {
    background: rgba(33, 150, 243, 0.15);
    color: #64b5f6;
}
.pv-pay-badge.credito {
    background: rgba(33, 150, 243, 0.15);
    color: #64b5f6;
}
.pv-pay-badge.transferencia {
    background: rgba(156, 39, 176, 0.15);
    color: #ba68c8;
}
.pv-pay-badge.otro {
    background: rgba(158, 158, 158, 0.15);
    color: #e0e0e0;
}

#headerFiltersBtn.active i {
    color: #05fa93 !important;
}

/* ==========================================================================
   VISTA DE PEDIDOS PREMIUM - 2 COLUMNAS (VISUAL 2.0)
   ========================================================================== */
.order-layout-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 20px;
    margin-top: 10px;
}

.order-left-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-right-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Invertir el orden de las columnas en la cuadrícula */
.order-layout-wrapper.inverted-panels {
    grid-template-columns: 1.3fr 1fr;
}

.order-layout-wrapper.inverted-panels .order-left-column {
    grid-column: 2;
    grid-row: 1;
}

.order-layout-wrapper.inverted-panels .order-right-column {
    grid-column: 1;
    grid-row: 1;
}

/* Tarjeta Premium Unificada */
.premium-card {
    background: rgba(30, 27, 75, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease;
}

.premium-card:hover {
    border-color: rgba(5, 250, 147, 0.15) !important;
}

/* Tarjeta de Estado Gigante Destacada */
.order-status-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.02) !important;
    border-left: 5px solid #757575 !important;
}

.order-status-card.status-complete {
    border-left-color: #05fa93 !important;
    background: rgba(5, 250, 147, 0.03) !important;
}

.order-status-card.status-partial {
    border-left-color: #ff9800 !important;
    background: rgba(255, 152, 0, 0.03) !important;
}

.order-status-card.status-pending {
    border-left-color: #b71c1c !important;
    background: rgba(183, 28, 28, 0.03) !important;
}

.order-status-card.status-derived {
    border-left-color: #ff9800 !important;
    background: rgba(255, 152, 0, 0.03) !important;
}

.order-status-card.status-retirada {
    border-left-color: #7b1fa2 !important;
    background: rgba(123, 31, 162, 0.03) !important;
}

.status-icon-big {
    font-size: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.status-complete .status-icon-big {
    color: #05fa93;
    background: rgba(5, 250, 147, 0.1);
}

.status-partial .status-icon-big {
    color: #ff9800;
    background: rgba(255, 152, 0, 0.1);
}

.status-pending .status-icon-big {
    color: #ef5350;
    background: rgba(239, 83, 80, 0.1);
}

.status-derived .status-icon-big {
    color: #ff9800;
    background: rgba(255, 152, 0, 0.1);
}

.status-retirada .status-icon-big {
    color: #ab47bc;
    background: rgba(171, 71, 188, 0.1);
}

.status-text-container {
    display: flex;
    flex-direction: column;
}

.status-label-small {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
}

.status-value-big {
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Fila de Badges Metadatos */
.order-badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.order-badge-row .status-indicator {
    padding: 4px 10px !important;
    font-size: 0.8em !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Tooltip de Verificación */
.verif-tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

.verif-tooltip-container .verif-info-icon {
    font-size: 0.9em;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.verif-tooltip-container:hover .verif-info-icon {
    opacity: 1;
    color: #05fa93;
}

.verif-tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: #110f27;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-align: center;
    border-radius: 8px;
    padding: 8px 12px;
    position: absolute;
    z-index: 10000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    font-size: 0.78em;
    font-weight: 500;
    line-height: 1.35;
    pointer-events: none;
}

.verif-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #110f27 transparent transparent transparent;
}

.verif-tooltip-container:hover .verif-tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -4px);
}

/* Timeline Info: Creador, fecha y contador */
.order-timeline-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.82em;
    opacity: 0.85;
}

.timeline-info-row i {
    width: 14px;
    text-align: center;
    color: #05fa93;
}

.timeline-info-row strong {
    color: #ffffff;
}

/* Grilla de Datos de Contacto y Despacho */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.82em;
}

.contact-item-full {
    grid-column: span 2;
}

.contact-item-label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.45;
}

.contact-item-value {
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    word-break: break-all;
}

.contact-item-value i {
    color: #05fa93;
    font-size: 0.9em;
    width: 14px;
    text-align: center;
}

/* Ajustes compactos para scanner */
.order-right-column .modern-scan-container {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 6px !important;
}

.order-right-column .modern-scan-input {
    padding: 6px 10px !important;
    font-size: 0.9em !important;
    height: 32px !important;
    box-sizing: border-box !important;
}

.order-right-column .modern-scan-btn {
    padding: 6px 12px !important;
    font-size: 0.9em !important;
    height: 32px !important;
    box-sizing: border-box !important;
}

/* Estilos uniformes y premium para los botones de herramientas rápidas del pedido */
.tool-btn {
    color: #b0bec5 !important; /* Plateado premium uniforme */
    transition: all 0.2s ease-in-out !important;
}

/* Hover en Modo Claro */
.tool-btn:hover {
    background: rgba(94, 23, 235, 0.06) !important;
    border-color: rgba(94, 23, 235, 0.2) !important;
    color: #5e17eb !important; /* Púrpura de la marca en modo claro */
}

/* Hover en Modo Oscuro */
body.dark-mode .tool-btn:hover {
    background: rgba(5, 250, 147, 0.08) !important;
    border-color: rgba(5, 250, 147, 0.25) !important;
    color: #05fa93 !important; /* Verde Stocka brillante en modo oscuro */
}

.tool-btn.delete-btn {
    color: #ff5252 !important; /* Solo el botón de eliminar queda en rojo */
}

.tool-btn.delete-btn:hover {
    background: rgba(255, 82, 82, 0.1) !important;
    border-color: rgba(255, 82, 82, 0.25) !important;
    color: #ff5252 !important;
}

/* Ajustes globales del número de pedido (Badge superior derecho) */
.order-number-badge {
    font-size: 1.35em !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    background: rgba(94, 23, 235, 0.1) !important;
    border: 1px solid rgba(94, 23, 235, 0.25) !important;
    color: #5e17eb !important;
    font-family: monospace !important;
}

body.dark-mode .order-number-badge {
    background: rgba(94, 23, 235, 0.15) !important;
    border: 1px solid #05fa93 !important;
    color: #05fa93 !important;
}

/* Botones de Acción Global en forma de Tarjetas (Fila Inferior) */
.action-buttons-row {
    display: flex;
    gap: 12px !important;
    margin-top: 15px !important;
    width: 100%;
}

.action-card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 16px 12px !important;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex: 1;
    color: #e2e8f0 !important;
    font-family: inherit;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
    outline: none;
}

.action-card-btn i {
    font-size: 1.6em !important;
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.action-card-btn span {
    font-size: 0.85em !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
}

/* Hover de Cierre Asistido (Azul) */
.action-card-btn.complete-manually-btn:hover {
    background: rgba(33, 150, 243, 0.08) !important;
    border-color: #2196f3 !important;
    color: #2196f3 !important;
    box-shadow: 0 6px 12px rgba(33, 150, 243, 0.2) !important;
}

.action-card-btn.complete-manually-btn:hover i {
    color: #2196f3 !important;
    transform: scale(1.1);
    opacity: 1;
}

/* Hover de Verificar Etiqueta (Púrpura) */
.action-card-btn.verify-label-btn:hover {
    background: rgba(124, 77, 255, 0.08) !important;
    border-color: #7c4dff !important;
    color: #7c4dff !important;
    box-shadow: 0 6px 12px rgba(124, 77, 255, 0.2) !important;
}

.action-card-btn.verify-label-btn:hover i {
    color: #7c4dff !important;
    transform: scale(1.1);
    opacity: 1;
}

/* Hover de Comentarios (Verde Stocka) */
.action-card-btn.comment-btn:hover {
    background: rgba(5, 250, 147, 0.08) !important;
    border-color: #05fa93 !important;
    color: #05fa93 !important;
    box-shadow: 0 6px 12px rgba(5, 250, 147, 0.2) !important;
}

.action-card-btn.comment-btn:hover i {
    color: #05fa93 !important;
    transform: scale(1.1);
    opacity: 1;
}

/* Hover de Marcar como Pendiente (Naranja) */
.action-card-btn.report-issue-btn:hover {
    background: rgba(255, 87, 34, 0.08) !important;
    border-color: #ff5722 !important;
    color: #ff5722 !important;
    box-shadow: 0 6px 12px rgba(255, 87, 34, 0.2) !important;
}

.action-card-btn.report-issue-btn:hover i {
    color: #ff5722 !important;
    transform: scale(1.1);
    opacity: 1;
}

/* Estilo del Badge de Comentarios dentro de la carta */
.action-card-btn .comment-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff5252;
    color: white;
    font-size: 0.72em;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    padding: 2px;
    box-sizing: border-box;
}

/* Agrandar la cantidad del producto a preparar */
.item-qty-tag {
    min-width: 62px !important;
    height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}
.item-qty-tag strong {
    font-size: 1.8em !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    color: inherit !important;
}
.item-qty-tag small {
    font-size: 0.7em !important;
    margin-bottom: 2px !important;
    color: inherit !important;
    opacity: 0.8 !important;
}

/* ==========================================================================
   VISUAL 2.0 RESPONSIVE COMPACT LAYOUT FOR NOTEBOOKS / LAPTOPS
   ========================================================================== */
@media (max-width: 1366px) {
    #right-panel:not(.collapsed):not(.expanded) {
        width: 320px !important;
    }
    body:not(.right-panel-collapsed):not(.right-panel-expanded) #main-content {
        width: calc(100% - 320px) !important;
    }
    #toggleRightPanel, #expandRightPanel {
        right: 320px;
    }
    .order-layout-wrapper {
        gap: 12px !important;
    }
    .premium-card {
        padding: 10px !important;
    }
    .order-status-card {
        gap: 10px !important;
    }
    .status-icon-big {
        font-size: 1.6em !important;
        width: 36px !important;
        height: 36px !important;
    }
    .status-value-big {
        font-size: 0.95em !important;
    }
    .order-badge-row .status-indicator {
        padding: 3px 8px !important;
        font-size: 0.75em !important;
    }
    .order-observation-box {
        font-size: 0.82em !important;
        padding: 6px 10px !important;
        margin-top: 4px !important;
    }
    .order-contact-box {
        padding: 6px 8px !important;
        font-size: 0.82em !important;
        border-radius: 6px !important;
    }
    .modern-scan-container {
        padding: 5px 6px !important;
        border-radius: 8px !important;
        gap: 6px !important;
    }
    .modern-scan-input {
        padding: 6px 10px !important;
        font-size: 0.9em !important;
    }
    .modern-scan-btn {
        padding: 6px 10px !important;
        font-size: 0.9em !important;
    }
    .item-qty-tag {
        min-width: 50px !important;
        height: 44px !important;
    }
    .item-qty-tag strong {
        font-size: 1.5em !important;
    }
    .item-qty-tag small {
        font-size: 0.6em !important;
    }
    .action-card-btn {
        padding: 10px 8px !important;
        gap: 6px !important;
        border-radius: 8px !important;
    }
    .action-card-btn i {
        font-size: 1.3em !important;
    }
    .action-card-btn span {
        font-size: 0.75em !important;
    }
}





.pv-pay-badge.otro {
    background: rgba(158, 158, 158, 0.15);
    color: #e0e0e0;
}

/* ==========================================================================
   VISUAL 2.0 OVERRIDES & NEW STYLES
   ========================================================================== */

#sidebar {
    display: none !important;
}

#main-content {
    margin-left: 0 !important;
    margin-top: 64px !important;
    width: calc(100% - 350px);
    height: calc(100vh - 64px) !important;
    box-sizing: border-box;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.right-panel-collapsed #main-content,
body:has(#right-panel.collapsed) #main-content {
    width: 100% !important;
}

body.right-panel-expanded #main-content,
body:has(#right-panel.expanded) #main-content {
    width: calc(100% - 750px) !important;
}

#right-panel {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
}

.view-overlay {
    top: 64px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 64px) !important;
}

/* Header styles */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: #1e1b4b;
    border-bottom: 2px solid #05fa93;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 1100;
    color: #ffffff;
    font-family: inherit;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo-link {
    display: flex;
    align-items: center;
}

.header-logo {
    height: 32px;
    vertical-align: middle;
}

.header-branch-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(94, 23, 235, 0.2);
    border: 1px solid #05fa93;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.85em;
    color: #05fa93;
    font-weight: 600;
}

.header-branch-icon {
    font-size: 0.95em;
}

.header-branch-change-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.9em;
    transition: color 0.2s;
    margin-left: 4px;
    display: flex;
    align-items: center;
}

.header-branch-change-btn:hover {
    color: #05fa93;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-action-btn, .header-menu-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.header-action-btn:hover, .header-menu-btn:hover {
    background: rgba(5, 250, 147, 0.1);
    border-color: #05fa93;
    color: #05fa93;
}

.header-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.header-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 4px;
}

/* Dropdown Menus */
.header-menu-container {
    position: relative;
}

.header-dropdown {
    position: absolute;
    top: 48px;
    right: 0;
    background: #15132c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 3px solid #05fa93;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    padding: 16px;
    width: 320px;
    box-sizing: border-box;
    z-index: 1200;
    display: none;
    animation: fadeInDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-section-title {
    font-size: 0.78em;
    text-transform: uppercase;
    font-weight: 700;
    color: #05fa93;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 12px 0;
}

/* Navigation Grid inside Dropdown */
#navigationDropdown {
    width: 440px;
}

.navigation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dropdown-nav-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82em;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    width: 100%;
}

.dropdown-nav-btn i {
    font-size: 1.1em;
    width: 16px;
    text-align: center;
}

.dropdown-nav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    color: #000000;
}

/* Theme colors for dropdown nav buttons */
.dropdown-nav-btn.theme-orange:hover { background-color: #ff9800; }
.dropdown-nav-btn.theme-teal:hover { background-color: #009688; }
.dropdown-nav-btn.theme-purple:hover { background-color: #9c27b0; }
.dropdown-nav-btn.theme-cyan:hover { background-color: #00bcd4; }
.dropdown-nav-btn.theme-grey:hover { background-color: #9e9e9e; }
.dropdown-nav-btn.theme-darkgrey:hover { background-color: #607d8b; }
.dropdown-nav-btn.theme-blue:hover { background-color: #2196f3; }
.dropdown-nav-btn.theme-deeppurple:hover { background-color: #673ab7; }
.dropdown-nav-btn.theme-red:hover { background-color: #f44336; }
.dropdown-nav-btn.theme-darkred:hover { background-color: #b71c1c; }
.dropdown-nav-btn.theme-pink:hover { background-color: #e91e63; }
.dropdown-nav-btn.theme-lightblue:hover { background-color: #03a9f4; }
.dropdown-nav-btn.theme-dashboard:hover { background-color: #00e676; }

/* Tools Dropdown Switches */
.dropdown-switches-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dropdown-switches-container .switch-container {
    justify-content: space-between;
    width: 100%;
    color: #ffffff;
}

.dropdown-switches-container .switch-container span {
    font-size: 0.88em;
}

.dropdown-actions-container button {
    background: #5e17eb;
    border: 1px solid transparent;
    color: #ffffff;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.dropdown-actions-container button:hover {
    background: #4a11c0;
}

/* Stats Dropdown (Hover) */
#statsDropdown {
    width: 360px;
    right: auto;
    left: -120px;
}

.stat-dropdown-trigger:hover .stat-dropdown-content {
    display: block;
}

.dropdown-progress-section {
    padding: 4px 0;
}

.dropdown-progress-title {
    font-size: 0.82em;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
}

.dropdown-progress-bar-wrapper {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    height: 8px;
    width: 100%;
    margin-bottom: 6px;
    overflow: hidden;
}

.dropdown-progress-bar {
    background: #00e676;
    height: 100%;
    width: 0%;
    transition: width 0.5s;
}

.login-form-box {
    background: #ffffff;
    padding: 50px 40px;
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

.login-theme-toggle-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1em;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 0;
}

.login-theme-toggle-btn:hover {
    background: #e2e8f0;
    color: #5e17eb;
    border-color: #5e17eb;
    transform: scale(1.08);
}

body.dark-mode .login-theme-toggle-btn {
    background: #2a2a3f;
    border-color: #3f3f5a;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.dark-mode .login-theme-toggle-btn:hover {
    background: #383850;
    color: #05fa93;
    border-color: #05fa93;
}

.dropdown-progress-text {
    font-size: 0.76em;
    color: #bbb;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stats-grid .stat-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.stats-grid .stat-box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.stats-grid .stat-box.active {
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid #00e676;
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.2);
}

.stats-grid .stat-box.overdue-stat-box.active {
    background: rgba(255, 23, 68, 0.08);
    border: 1px solid #ff1744;
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.2);
}

.stat-number {
    font-size: 1.15em;
    font-weight: 700;
    color: #ffffff;
}

.stat-label {
    font-size: 0.72em;
    color: #ccc;
}

/* User Dropdown Profile styles */
#userDropdown {
    width: 280px;
}

#userDropdown .db-user-widget {
    display: flex;
    flex-direction: column;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

#userDropdown .db-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

#userDropdown .db-user-avatar {
    font-size: 2.2em;
    color: #05fa93;
}

#userDropdown .db-user-info {
    display: flex;
    flex-direction: column;
}

#userDropdown .db-user-name {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.92em;
}

#userDropdown .db-user-rut {
    font-size: 0.78em;
    color: #aaa;
}

#userDropdown .db-user-actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

#userDropdown .db-user-action-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    transition: all 0.2s;
    width: 100%;
    position: relative;
}

#userDropdown .db-user-action-btn:hover {
    background: rgba(5, 250, 147, 0.08);
    border-color: #05fa93;
    color: #05fa93;
}

#userDropdown .db-user-action-btn .notification-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #ff1744;
    color: #ffffff;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.72em;
    font-weight: bold;
}

.header-logout-btn {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.2);
    color: #f44336;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    width: 100%;
    margin-top: 5px;
}

.header-logout-btn:hover {
    background: #f44336;
    color: #ffffff;
    border-color: #f44336;
}

/* Dark mode adjustment for main-header */
body.dark-mode #main-header {
    background-color: #0e0c1f;
}

body.dark-mode .header-dropdown {
    background: #0b0a18;
}

/* User Widget inside right panel is removed, but just in case: */
.db-user-widget {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Special Filters Pill Buttons styling */
.special-filters-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #444444;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dark-mode .filter-pill {
    color: #bbbbbb;
}

.filter-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #333333;
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .filter-pill:hover {
    color: #ffffff;
}

.filter-pill.active {
    background: rgba(5, 250, 147, 0.1) !important;
    border-color: #05fa93 !important;
    color: #05fa93 !important;
    box-shadow: 0 2px 6px rgba(5, 250, 147, 0.15) !important;
}

/* Header Avatar button styling */
.header-avatar-btn {
    padding: 6px !important;
    border-radius: 50% !important;
}

.header-avatar-btn i {
    font-size: 1.8em;
    color: #05fa93;
}

/* Responsive headers */
@media (max-width: 900px) {
    .header-action-btn .btn-text,
    .header-menu-btn .btn-text {
        display: none;
    }
    .header-action-btn, .header-menu-btn {
        padding: 8px 10px;
    }
}

/* ==========================================================================
   OPTIMIZACIÓN DE TAMAÑOS DE TEXTO (LETRAS MÁS PEQUEÑAS Y COMPACTAS V2.0)
   ========================================================================== */
/* Reducir tamaño de letra del detalle del pedido (columna izquierda) */
.client-name-title {
    font-size: 1.05em !important;
}

.order-number-badge {
    font-size: 1.15em !important; /* Más compacto y balanceado */
    padding: 3px 8px !important;
}

.status-label-small {
    font-size: 0.65em !important;
}

.status-value-big {
    font-size: 1.0em !important;
}

.order-badge-row .status-indicator {
    padding: 3px 8px !important;
    font-size: 0.75em !important;
}

.order-observation-box {
    font-size: 0.78em !important;
    padding: 8px 12px !important;
}

.timeline-info-row {
    font-size: 0.78em !important;
}

.contact-grid {
    gap: 8px !important;
}

.contact-item {
    font-size: 0.78em !important;
}

.contact-item-label {
    font-size: 0.68em !important;
}

.contact-item-value {
    font-size: 0.88em !important;
}

/* Reducir tamaño de letra de productos y lista derecha */
.pending-item-card {
    font-size: 0.85em !important; /* Reducir todo el texto de la tarjeta del producto */
    padding: 8px 10px !important;
}

.scanned-item {
    font-size: 0.82em !important;
    padding: 6px 8px !important;
}

.order-right-column .stat-card {
    padding: 6px 10px !important;
}

.order-right-column .stat-value {
    font-size: 1.2em !important;
}

.order-right-column .stat-label {
    font-size: 0.65em !important;
}

/* Reducir tamaño de letra del listado de pedidos (sidebar derecho) */
#pendingOrdersList li {
    font-size: 11.5px !important;
    padding: 6px 8px !important;
}

#pendingOrdersList li.active-order {
    font-size: 12px !important;
    padding: 8px 10px !important;
}

/* Fila de progreso y etiquetas de Agenda y Operador en listado lateral */
.order-card-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-top: 3px !important;
}

.order-card-progress {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    margin-right: 2px !important;
}

#pendingOrdersList li span.order-tag-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    padding: 1.5px 5px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    border-width: 1px !important;
    border-style: solid !important;
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    cursor: default !important;
    user-select: none !important;
    box-shadow: none !important;
}

/* Colores suaves / Muted para Agendas (Modo Oscuro por defecto) */
.tag-agenda-rm { background: rgba(139, 92, 246, 0.16) !important; border-color: rgba(139, 92, 246, 0.35) !important; color: #c4b5fd !important; }
.tag-agenda-region { background: rgba(59, 130, 246, 0.16) !important; border-color: rgba(59, 130, 246, 0.35) !important; color: #93c5fd !important; }
.tag-agenda-stk { background: rgba(16, 185, 129, 0.16) !important; border-color: rgba(16, 185, 129, 0.35) !important; color: #6ee7b7 !important; }
.tag-agenda-meli { background: rgba(245, 158, 11, 0.16) !important; border-color: rgba(245, 158, 11, 0.35) !important; color: #fcd34d !important; }
.tag-agenda-retiro { background: rgba(168, 85, 247, 0.16) !important; border-color: rgba(168, 85, 247, 0.35) !important; color: #d8b4fe !important; }
.tag-agenda-falabella { background: rgba(74, 222, 128, 0.16) !important; border-color: rgba(74, 222, 128, 0.35) !important; color: #86efac !important; }
.tag-agenda-sameday { background: rgba(244, 63, 94, 0.16) !important; border-color: rgba(244, 63, 94, 0.35) !important; color: #fda4af !important; }
.tag-agenda-nextday { background: rgba(14, 165, 233, 0.16) !important; border-color: rgba(14, 165, 233, 0.35) !important; color: #7dd3fc !important; }
.tag-agenda-centroenvio { background: rgba(20, 184, 166, 0.16) !important; border-color: rgba(20, 184, 166, 0.35) !important; color: #5eead4 !important; }
.tag-agenda-flex { background: rgba(236, 72, 153, 0.16) !important; border-color: rgba(236, 72, 153, 0.35) !important; color: #f472b6 !important; }

/* Colores suaves / Muted para Operadores (Modo Oscuro por defecto) */
.tag-op-flex { background: rgba(236, 72, 153, 0.16) !important; border-color: rgba(236, 72, 153, 0.35) !important; color: #f472b6 !important; }
.tag-op-alpha { background: rgba(239, 68, 68, 0.16) !important; border-color: rgba(239, 68, 68, 0.35) !important; color: #fca5a5 !important; }
.tag-op-bluexpress { background: rgba(56, 189, 248, 0.16) !important; border-color: rgba(56, 189, 248, 0.35) !important; color: #7dd3fc !important; }
.tag-op-chilexpress { background: rgba(249, 115, 22, 0.16) !important; border-color: rgba(249, 115, 22, 0.35) !important; color: #fdba74 !important; }
.tag-op-starken { background: rgba(34, 197, 94, 0.16) !important; border-color: rgba(34, 197, 94, 0.35) !important; color: #86efac !important; }
.tag-op-stockax { background: rgba(168, 85, 247, 0.16) !important; border-color: rgba(168, 85, 247, 0.35) !important; color: #d8b4fe !important; }
.tag-op-enviame { background: rgba(99, 102, 241, 0.16) !important; border-color: rgba(99, 102, 241, 0.35) !important; color: #a5b4fc !important; }
.tag-op-centroenvio { background: rgba(20, 184, 166, 0.16) !important; border-color: rgba(20, 184, 166, 0.35) !important; color: #5eead4 !important; }
.tag-op-falabella { background: rgba(132, 204, 22, 0.16) !important; border-color: rgba(132, 204, 22, 0.35) !important; color: #bef264 !important; }
.tag-op-meli { background: rgba(245, 158, 11, 0.16) !important; border-color: rgba(245, 158, 11, 0.35) !important; color: #fcd34d !important; }
.tag-op-sucursal { background: rgba(244, 63, 94, 0.16) !important; border-color: rgba(244, 63, 94, 0.35) !important; color: #fda4af !important; }
.tag-op-porpagar { background: rgba(251, 146, 60, 0.16) !important; border-color: rgba(251, 146, 60, 0.35) !important; color: #fed7aa !important; }

/* Paleta genérica suave para elementos dinámicos */
.tag-generic-0 { background: rgba(59, 130, 246, 0.16) !important; border-color: rgba(59, 130, 246, 0.35) !important; color: #93c5fd !important; }
.tag-generic-1 { background: rgba(16, 185, 129, 0.16) !important; border-color: rgba(16, 185, 129, 0.35) !important; color: #6ee7b7 !important; }
.tag-generic-2 { background: rgba(245, 158, 11, 0.16) !important; border-color: rgba(245, 158, 11, 0.35) !important; color: #fcd34d !important; }
.tag-generic-3 { background: rgba(168, 85, 247, 0.16) !important; border-color: rgba(168, 85, 247, 0.35) !important; color: #d8b4fe !important; }
.tag-generic-4 { background: rgba(20, 184, 166, 0.16) !important; border-color: rgba(20, 184, 166, 0.35) !important; color: #5eead4 !important; }
.tag-generic-5 { background: rgba(244, 63, 94, 0.16) !important; border-color: rgba(244, 63, 94, 0.35) !important; color: #fda4af !important; }

/* Ajustes de alto contraste para Modo Claro */
body:not(.dark-mode) .tag-agenda-rm { color: #6d28d9 !important; background: rgba(139, 92, 246, 0.1) !important; border-color: rgba(139, 92, 246, 0.28) !important; }
body:not(.dark-mode) .tag-agenda-region { color: #1d4ed8 !important; background: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.28) !important; }
body:not(.dark-mode) .tag-agenda-stk { color: #047857 !important; background: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.28) !important; }
body:not(.dark-mode) .tag-agenda-meli { color: #b45309 !important; background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.28) !important; }
body:not(.dark-mode) .tag-agenda-retiro { color: #7e22ce !important; background: rgba(168, 85, 247, 0.1) !important; border-color: rgba(168, 85, 247, 0.28) !important; }
body:not(.dark-mode) .tag-agenda-falabella { color: #15803d !important; background: rgba(74, 222, 128, 0.1) !important; border-color: rgba(74, 222, 128, 0.28) !important; }
body:not(.dark-mode) .tag-agenda-sameday { color: #be123c !important; background: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.28) !important; }
body:not(.dark-mode) .tag-agenda-nextday { color: #0369a1 !important; background: rgba(14, 165, 233, 0.1) !important; border-color: rgba(14, 165, 233, 0.28) !important; }
body:not(.dark-mode) .tag-agenda-centroenvio { color: #0f766e !important; background: rgba(20, 184, 166, 0.1) !important; border-color: rgba(20, 184, 166, 0.28) !important; }
body:not(.dark-mode) .tag-agenda-flex { color: #be185d !important; background: rgba(236, 72, 153, 0.1) !important; border-color: rgba(236, 72, 153, 0.28) !important; }

body:not(.dark-mode) .tag-op-flex { color: #be185d !important; background: rgba(236, 72, 153, 0.1) !important; border-color: rgba(236, 72, 153, 0.28) !important; }
body:not(.dark-mode) .tag-op-alpha { color: #b91c1c !important; background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.28) !important; }
body:not(.dark-mode) .tag-op-bluexpress { color: #0369a1 !important; background: rgba(56, 189, 248, 0.1) !important; border-color: rgba(56, 189, 248, 0.28) !important; }
body:not(.dark-mode) .tag-op-chilexpress { color: #c2410c !important; background: rgba(249, 115, 22, 0.1) !important; border-color: rgba(249, 115, 22, 0.28) !important; }
body:not(.dark-mode) .tag-op-starken { color: #15803d !important; background: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.28) !important; }
body:not(.dark-mode) .tag-op-stockax { color: #6d28d9 !important; background: rgba(168, 85, 247, 0.1) !important; border-color: rgba(168, 85, 247, 0.28) !important; }
body:not(.dark-mode) .tag-op-enviame { color: #4338ca !important; background: rgba(99, 102, 241, 0.1) !important; border-color: rgba(99, 102, 241, 0.28) !important; }
body:not(.dark-mode) .tag-op-centroenvio { color: #0f766e !important; background: rgba(20, 184, 166, 0.1) !important; border-color: rgba(20, 184, 166, 0.28) !important; }
body:not(.dark-mode) .tag-op-falabella { color: #4d7c0f !important; background: rgba(132, 204, 22, 0.1) !important; border-color: rgba(132, 204, 22, 0.28) !important; }
body:not(.dark-mode) .tag-op-meli { color: #b45309 !important; background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.28) !important; }
body:not(.dark-mode) .tag-op-sucursal { color: #be185d !important; background: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.28) !important; }
body:not(.dark-mode) .tag-op-porpagar { color: #c2410c !important; background: rgba(251, 146, 60, 0.1) !important; border-color: rgba(251, 146, 60, 0.28) !important; }

body:not(.dark-mode) .tag-generic-0 { color: #1d4ed8 !important; background: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.28) !important; }
body:not(.dark-mode) .tag-generic-1 { color: #047857 !important; background: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.28) !important; }
body:not(.dark-mode) .tag-generic-2 { color: #b45309 !important; background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.28) !important; }
body:not(.dark-mode) .tag-generic-3 { color: #7e22ce !important; background: rgba(168, 85, 247, 0.1) !important; border-color: rgba(168, 85, 247, 0.28) !important; }
body:not(.dark-mode) .tag-generic-4 { color: #0f766e !important; background: rgba(20, 184, 166, 0.1) !important; border-color: rgba(20, 184, 166, 0.28) !important; }
body:not(.dark-mode) .tag-generic-5 { color: #be123c !important; background: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.28) !important; }

.order-card-cloud-text {
    font-size: 9.5px !important;
    opacity: 0.85 !important;
}

.order-card-obs-icon {
    font-size: 10px !important;
    margin-left: 2px !important;
    color: #ffb300 !important;
}

/* Reducir botones de acción tipo tarjeta (fila inferior) */
.action-card-btn {
    padding: 12px 8px !important;
    gap: 6px !important;
}

.action-card-btn i {
    font-size: 1.3em !important;
}

.action-card-btn span {
    font-size: 0.76em !important;
}

/* Estilos para la Alerta SLA (Bárnner de advertencia superior) */
.sla-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(239, 83, 80, 0.08) !important;
    border: 1px solid rgba(239, 83, 80, 0.25) !important;
    border-left: 5px solid #ef5350 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
    animation: pulseSlaBorder 2s infinite alternate;
}

.sla-banner-icon {
    font-size: 1.3em;
    color: #ef5350;
    margin-top: 2px;
}

.sla-banner-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sla-banner-title {
    font-size: 0.82em !important;
    font-weight: 700;
    color: #ef5350;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sla-banner-message {
    font-size: 0.78em !important;
    color: #ffffff;
    opacity: 0.9;
    line-height: 1.35;
}

@keyframes pulseSlaBorder {
    0% {
        border-color: rgba(239, 83, 80, 0.25);
        box-shadow: 0 0 4px rgba(239, 83, 80, 0.05);
    }
    100% {
        border-color: rgba(239, 83, 80, 0.5);
        box-shadow: 0 0 10px rgba(239, 83, 80, 0.15);
    }
}

/* Estilos de badge de comercio */
.commerce-badge {
    background-color: rgba(5, 250, 147, 0.1) !important;
    color: #05fa93 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 0.78em !important;
    border: 1px solid rgba(5, 250, 147, 0.2) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

body.dark-mode .commerce-badge {
    background-color: rgba(5, 250, 147, 0.15) !important;
}

/* Estilos para los botones Modo Consulta y Pick List en el Sidebar */
.sidebar-extra-actions {
    display: flex;
    gap: 8px;
    margin: 8px 0;
    width: 100%;
}

.sidebar-action-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease-in-out !important;
}

.sidebar-action-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Estado activo para Modo Consulta en Modo Oscuro */
body.dark-mode .sidebar-action-btn#sidebarQueryModeBtn.active {
    background: rgba(5, 250, 147, 0.12) !important;
    border-color: #05fa93 !important;
    color: #05fa93 !important;
    box-shadow: 0 0 10px rgba(5, 250, 147, 0.2) !important;
}

/* Hover de generar Pick List (PDF) en Modo Oscuro */
body.dark-mode .sidebar-action-btn#sidebarGeneratePickListBtn:hover {
    background: rgba(244, 67, 54, 0.15) !important;
    border-color: #f44336 !important;
    color: #ff8a80 !important;
}

/* Forzar que la cabecera y los menús desplegables queden por encima del side bar (z-index: 9000) */
#main-header {
    z-index: 12000 !important;
}

.header-dropdown {
    z-index: 13000 !important;
}

/* ===================================================
   OPTIMIZACIÓN DE MODO CLARO (WCAG High Contrast)
   =================================================== */

/* 1. Fondo global y contenedores principales */
body:not(.dark-mode) {
    background-color: #f1f5f9;
    color: #0f172a;
}

body:not(.dark-mode) #main-content {
    background-color: #f8fafc;
}

body:not(.dark-mode) #right-panel {
    background-color: #ffffff;
    border-left: 2px solid #e2e8f0;
}

body:not(.dark-mode) #ordersContainer {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 2. Tarjetas Unificadas (.premium-card) */
body:not(.dark-mode) .premium-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

body:not(.dark-mode) .premium-card:hover {
    border-color: #94a3b8 !important;
}

body:not(.dark-mode) .client-name-title {
    color: #0f172a !important;
}

body:not(.dark-mode) .client-icon {
    color: #475569 !important;
}

body:not(.dark-mode) .order-number-badge {
    background-color: #f1f5f9 !important;
    color: #5e17eb !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px;
    padding: 3px 10px;
}

/* 3. Botones de herramientas del pedido (Copiar, Editar, Historial, Imprimir, Repick, Derivar, Eliminar) */
body:not(.dark-mode) .order-tools-row .tool-btn {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

body:not(.dark-mode) .order-tools-row .tool-btn:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
}

/* 4. Alerta SLA (.sla-banner) */
body:not(.dark-mode) .sla-banner {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    border-left: 5px solid #dc2626 !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08) !important;
}

body:not(.dark-mode) .sla-banner-icon {
    color: #dc2626 !important;
}

body:not(.dark-mode) .sla-banner-title {
    color: #991b1b !important;
}

body:not(.dark-mode) .sla-banner-message {
    color: #7f1d1d !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* 5. Caja de Observaciones / Notas (.order-observation-box) */
body:not(.dark-mode) .order-observation-box {
    background: #fffbe6 !important;
    border: 1px solid #ffe58f !important;
    border-left: 4px solid #d97706 !important;
    color: #78350f !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.08) !important;
}

body:not(.dark-mode) .order-observation-box i {
    color: #d97706 !important;
}

body:not(.dark-mode) .order-observation-box strong {
    color: #78350f !important;
}

/* 6. Timeline y Verificación (.order-timeline-card) */
body:not(.dark-mode) .timeline-info-row {
    color: #334155 !important;
}

body:not(.dark-mode) .timeline-info-row strong {
    color: #0f172a !important;
}

body:not(.dark-mode) .timeline-info-row i {
    color: #059669 !important;
}

body:not(.dark-mode) .timeline-info-row i.urgent {
    color: #dc2626 !important;
}

body:not(.dark-mode) .timeline-duration-text.urgent {
    color: #dc2626 !important;
}

/* 7. Datos de Contacto y Despacho (.contact-grid) */
body:not(.dark-mode) .contact-grid-title {
    color: #0f172a !important;
}

body:not(.dark-mode) .contact-grid-title i {
    color: #2563eb !important;
}

body:not(.dark-mode) .contact-item-label {
    color: #64748b !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

body:not(.dark-mode) .contact-item-value {
    color: #0f172a !important;
}

body:not(.dark-mode) .contact-item-value i {
    color: #2563eb !important;
}

/* 8. Badges de Comercio, Agenda y Operador */
body:not(.dark-mode) .commerce-badge {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

body:not(.dark-mode) .order-badge-row .status-indicator {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 9. Productos a Preparar */
body:not(.dark-mode) .order-right-column h3,
body:not(.dark-mode) .order-right-column .section-header {
    color: #0f172a !important;
}

body:not(.dark-mode) .pending-products {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

body:not(.dark-mode) .pending-item,
body:not(.dark-mode) .pending-item-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

body:not(.dark-mode) .item-name,
body:not(.dark-mode) .product-name,
body:not(.dark-mode) .pending-item-card strong {
    color: #0f172a !important;
}

body:not(.dark-mode) .item-sku,
body:not(.dark-mode) .item-details,
body:not(.dark-mode) .sku-badge {
    color: #475569 !important;
}

body:not(.dark-mode) .attr-badge,
body:not(.dark-mode) .variant-badge {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

/* 10. Botones de Acción Global en forma de Tarjetas (Pie de Pedido) */
body:not(.dark-mode) .action-card-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

body:not(.dark-mode) .action-card-btn span {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Hovers con colores por acción en Modo Claro */
body:not(.dark-mode) .action-card-btn.complete-manually-btn i {
    color: #2563eb !important;
    opacity: 1 !important;
}
body:not(.dark-mode) .action-card-btn.complete-manually-btn:hover {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

body:not(.dark-mode) .action-card-btn.verify-label-btn i {
    color: #7c3aed !important;
    opacity: 1 !important;
}
body:not(.dark-mode) .action-card-btn.verify-label-btn:hover {
    background: #f5f3ff !important;
    border-color: #7c3aed !important;
    color: #6d28d9 !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15) !important;
}

body:not(.dark-mode) .action-card-btn.comment-btn i {
    color: #059669 !important;
    opacity: 1 !important;
}
body:not(.dark-mode) .action-card-btn.comment-btn:hover {
    background: #ecfdf5 !important;
    border-color: #059669 !important;
    color: #047857 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15) !important;
}

body:not(.dark-mode) .action-card-btn.mark-pending-btn i {
    color: #dc2626 !important;
    opacity: 1 !important;
}
body:not(.dark-mode) .action-card-btn.mark-pending-btn:hover {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
    color: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15) !important;
}

/* 11. Panel Derecho: Buscador, Filtros y Lista de Pedidos */
body:not(.dark-mode) #right-panel input[type="text"],
body:not(.dark-mode) #searchPendingOrders {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

body:not(.dark-mode) #right-panel input[type="text"]::placeholder {
    color: #94a3b8 !important;
}

body:not(.dark-mode) .sidebar-action-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
}

/* Modo Consulta en Modo Claro - Alto Contraste */
body:not(.dark-mode) .sidebar-action-btn#sidebarQueryModeBtn {
    background: #ffffff !important;
    border: 1px solid #10b981 !important;
    color: #047857 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1) !important;
}

body:not(.dark-mode) .sidebar-action-btn#sidebarQueryModeBtn i {
    color: #059669 !important;
}

body:not(.dark-mode) .sidebar-action-btn#sidebarQueryModeBtn:hover {
    background: #f0fdf4 !important;
    border-color: #059669 !important;
    color: #065f46 !important;
}

body:not(.dark-mode) .sidebar-action-btn#sidebarQueryModeBtn.active {
    background: #ecfdf5 !important;
    border: 2px solid #059669 !important;
    color: #065f46 !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
}

body:not(.dark-mode) .sidebar-action-btn#sidebarQueryModeBtn.active i {
    color: #047857 !important;
}

/* Pick List (PDF) en Modo Claro - Alto Contraste */
body:not(.dark-mode) .sidebar-action-btn#sidebarGeneratePickListBtn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body:not(.dark-mode) .sidebar-action-btn#sidebarGeneratePickListBtn i {
    color: #dc2626 !important;
}

body:not(.dark-mode) .sidebar-action-btn#sidebarGeneratePickListBtn:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15) !important;
}

body:not(.dark-mode) .sidebar-action-btn#sidebarGeneratePickListBtn:hover i {
    color: #b91c1c !important;
}

body:not(.dark-mode) #pendingOrdersList li {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

body:not(.dark-mode) #pendingOrdersList li:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

body:not(.dark-mode) #pendingOrdersList li.active-order {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 1px #3b82f6 !important;
}

body:not(.dark-mode) #pendingOrdersList li strong,
body:not(.dark-mode) #pendingOrdersList li .order-title {
    color: #0f172a !important;
}

body:not(.dark-mode) #pendingOrdersList li .order-subtext {
    color: #475569 !important;
}

/* 12. Modales / Popups en Modo Claro */
body:not(.dark-mode) .popup-content {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

body:not(.dark-mode) .popup-content h2,
body:not(.dark-mode) .popup-content h3 {
    color: #0f172a !important;
}

body:not(.dark-mode) .popup-content input[type="text"],
body:not(.dark-mode) .popup-content textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}