/* ===================================================================
   PEDIDOS - Sistema de Gestión de Pedidos
   Colores Corporativos SG Informática
   =================================================================== */

/* =================================================================== 
   PALETA DE COLORES CORPORATIVOS SG INFORMÁTICA
   
   Primario (Azul SG):     #007da5  - Información, acciones principales
   Primario Oscuro:        #006b8d  - Bordes, hover states
   Gris Corporativo:       #88898d  - Texto secundario, iconos
   Tinta (Negro):          #1d1d1b  - Texto principal, headers
   Superficie:             #f3f5f6  - Fondos, áreas neutras
   
   Estados Semánticos:
   Éxito/Cerrado:          #198754  - Verde Bootstrap
   Advertencia/Pendiente:  #ffc107  - Amarillo Bootstrap
   Peligro/Urgente:        #dc3545  - Rojo Bootstrap
   Info:                   #0dcaf0  - Cyan Bootstrap (secundario)
   Púrpura:                #8b5cf6  - Color para estados intermedios
   =================================================================== */

/* Color púrpura para estados intermedios (fechas de entrega) */
.text-purple {
    color: #8b5cf6 !important;
}

.bg-purple {
    background-color: #8b5cf6 !important;
}

.bg-purple.bg-opacity-10 {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

/* ===================================================================
   TIPOGRAFÍA - Jerarquía Visual Tipo Odoo
   Fuente: Roboto (Google Fonts)
   =================================================================== */

/* Títulos principales */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: var(--sg-brand-ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Título de página principal */
h3.h4 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sg-brand-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

/* Texto principal - tamaño optimizado */
/* Nota: Los estilos del NavMenu usan !important para sobrescribir esto */
body, p, span, div {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.5;  
    
}

/* Texto secundario */
.text-muted, .small {
    font-size: 0.8125rem !important; /* 13px */
    color: var(--sg-brand-gray) !important;
    line-height: 1.4;
}

/* Texto muy pequeño */
small {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1.3;
}

/* Números y valores monetarios */
.fw-bold, .text-primary {
    font-weight: 600 !important;
}

/* Precios y totales grandes */
.display-6, .fw-bold.text-primary {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Badges - texto más legible */
.badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
    letter-spacing: 0.02em;
}

/* Botones - texto más claro */
.btn {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.btn-sm {
    font-size: 0.8125rem;
}

/* Móvil - tamaños ajustados para legibilidad */
@media (max-width: 767px) {
    h3.h4 {
        font-size: 1.5rem;
    }
    
    body, p, span, div {
        font-size: 0.9375rem; /* Mantener 15px en móvil */
    }
    
    .text-muted, .small {
        font-size: 0.8125rem !important;
    }
    
    small {
        font-size: 0.6875rem !important; /* 11px */
    }
}

/* ===================================================================
   VISOR DE FOTOS (LIGHTBOX)
   =================================================================== */

/* Modal principal del lightbox */
.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    background-color: rgba(29, 29, 27, 0.95); /* sg-brand-ink con transparencia */
}

/* Animación de entrada del lightbox */
.modal.show .modal-content {
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Botones de navegación del lightbox */
.btn.rounded-circle:hover {
    opacity: 1 !important;
    transform: scale(1.1);
    background-color: var(--sg-brand-primary) !important;
    border-color: var(--sg-brand-primary-dark) !important;
    color: white !important;
}

/* ===================================================================
   ESTILOS RESPONSIVE - MÓVILES (Estilo Odoo)
   =================================================================== */

@media (max-width: 767px) {
    /* Fondo general móvil */
    body {
        background-color: var(--sg-brand-surface);
    }

    /* ===============================================================
       NAVEGACIÓN POR PESTAÑAS
       =============================================================== */
    
    .nav-tabs {
        border-bottom: 2px solid #dee2e6;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .nav-tabs .nav-link {
        border: none;
        color: var(--sg-brand-gray);
        padding: 0.75rem 0.5rem;
        transition: all 0.2s;
        position: relative;
        overflow: hidden;
    }

    /* Efecto ripple al tocar */
    .nav-tabs .nav-link:active::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: rgba(0, 125, 165, 0.1); /* sg-brand-primary con transparencia */
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        animation: ripple 0.6s ease-out;
    }

    @keyframes ripple {
        to {
            transform: translate(-50%, -50%) scale(2);
            opacity: 0;
        }
    }

    .nav-tabs .nav-link.active {
        color: var(--sg-brand-primary);
        border-bottom: 2px solid var(--sg-brand-primary);
        background: transparent;
        font-weight: 600;
    }

    .nav-tabs .nav-link i {
        font-size: 1.25rem;
    }

    /* ===============================================================
       CARDS SIN BORDES EN MÓVIL
       =============================================================== */
    
    .card.border-0 {
        border-radius: 0;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-bottom: 1px solid #e9ecef !important;
    }

    .card.border-0 .card-body {
        background: white;
    }

    /* ===============================================================
       FAB - BOTÓN FLOTANTE DE ACCIÓN
       =============================================================== */
    
    .btn.rounded-circle {
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 12px rgba(0, 125, 165, 0.4); /* Sombra con color primario */
        background-color: var(--sg-brand-primary) !important;
        border-color: var(--sg-brand-primary-dark) !important;
    }

    .btn.rounded-circle:active {
        transform: scale(0.95);
        box-shadow: 0 2px 8px rgba(0, 125, 165, 0.3);
    }

    /* ===============================================================
       HEADER STICKY - Tipografía mejorada
       =============================================================== */
    
    .sticky-top {
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Número de pedido en header sticky */
    .sticky-top .fw-bold.small {
        font-size: 0.875rem !important;
        font-weight: 700 !important;
        color: var(--sg-brand-ink);
        letter-spacing: 0.01em;
    }

    /* Cliente en header sticky */
    .sticky-top .small.text-muted {
        font-size: 0.75rem !important;
        color: var(--sg-brand-gray) !important;
    }

    /* Total en header sticky */
    .sticky-top .fw-bold.text-primary {
        font-size: 1rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em;
    }

    /* Pendiente en header sticky */
    .sticky-top .small.text-warning {
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
    }

    /* ===============================================================
       OPTIMIZACIÓN DE ESPACIOS Y SCROLL
       =============================================================== */
    
    .container-fluid {
        padding-bottom: 80px; /* Espacio para FAB */
    }

    /* Scroll suave en secciones */
    .d-md-none[style*="overflow-y"] {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Mejorar scroll de galería de fotos */
    .row.g-2 {
        max-height: calc(100vh - 280px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Animación de entrada de contenido */
    .d-block.d-md-block {
        animation: fadeIn 0.3s ease-in;
    }

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

    /* ===============================================================
       MEJORA DE TARJETAS DE ARTÍCULOS
       =============================================================== */
    
    .border-bottom:last-child {
        border-bottom: none !important;
    }

    .border-bottom {
        transition: background-color 0.2s;
    }

    .border-bottom:active {
        background-color: var(--sg-brand-surface);
    }
}

/* ===================================================================
   SOMBRAS CORPORATIVAS
   =================================================================== */

.shadow-md-sm {
    box-shadow: 0 1px 3px rgba(0, 125, 165, 0.15); /* Sombra con tinte azul */
}

/* ===================================================================
   COLORES DE ESTADO - BADGES Y ALERTAS
   =================================================================== */

/* Badge Cerrado - Verde éxito */
.badge.bg-success {
    background-color: #198754 !important;
}

/* Badge Activo - Azul SG */
.badge.bg-primary {
    background-color: var(--sg-brand-primary) !important;
}

/* Badge Urgente - Rojo peligro */
.badge.bg-danger {
    background-color: #dc3545 !important;
}

/* Badge 2ª Mano - Gris secundario */
.badge.bg-secondary {
    background-color: var(--sg-brand-gray) !important;
}

/* Badge Fotos/Advertencia - Amarillo */
.badge.bg-warning {
    background-color: #ffc107 !important;
    color: var(--sg-brand-ink) !important;
}

/* ===================================================================
   HEADERS DE CARDS - Colores corporativos y tipografía mejorada
   =================================================================== */

/* Tipografía de headers */
.card-header {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.75rem 1rem;
}

/* Header Info - Azul SG principal */
.card-header.bg-primary {
    background-color: var(--sg-brand-primary) !important;
    border-color: var(--sg-brand-primary-dark) !important;
    color: white !important;
}

/* Header Éxito/Totales - Azul corporativo SG */
.card-header.bg-success {
    background-color: var(--sg-brand-primary) !important;
    border-color: var(--sg-brand-primary-dark) !important;
    color: white !important;
}

/* Header Info secundaria - Azul corporativo SG */
.card-header.bg-info {
    background-color: var(--sg-brand-primary) !important;
    border-color: var(--sg-brand-primary-dark) !important;
    color: white !important;
}

/* Header Fotos - Azul corporativo SG */
.card-header.bg-warning {
    background-color: var(--sg-brand-primary) !important;
    border-color: var(--sg-brand-primary-dark) !important;
    color: white !important;
}

/* Asegurar que h5, h6 e iconos en cabeceras también sean blancos */
.card-header.bg-primary h5,
.card-header.bg-primary h6,
.card-header.bg-primary i,
.card-header.bg-success h5,
.card-header.bg-success h6,
.card-header.bg-success i,
.card-header.bg-info h5,
.card-header.bg-info h6,
.card-header.bg-info i,
.card-header.bg-warning h5,
.card-header.bg-warning h6,
.card-header.bg-warning i {
    color: white !important;
}

/* Contenido de cards con mejor tipografía */
.card-body {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.card-body .fw-bold {
    font-weight: 600;
}

.card-body small,
.card-body .text-muted {
    font-size: 0.8125rem !important;
    color: var(--sg-brand-gray) !important;
}

/* ===================================================================
   BOTONES - Colores corporativos
   =================================================================== */

.btn-primary {
    background-color: var(--sg-brand-primary) !important;
    border-color: var(--sg-brand-primary-dark) !important;
    color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--sg-brand-primary-dark) !important;
    border-color: #005a75 !important;
}

.btn-outline-primary {
    color: var(--sg-brand-primary) !important;
    border-color: var(--sg-brand-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--sg-brand-primary) !important;
    border-color: var(--sg-brand-primary-dark) !important;
    color: white !important;
}

/* ===================================================================
   TEXTOS - Colores semánticos
   =================================================================== */

.text-primary {
    color: var(--sg-brand-primary) !important;
}

.text-muted {
    color: var(--sg-brand-gray) !important;
}

/* Texto de pendiente en amarillo/advertencia */
.text-warning {
    color: #ffc107 !important;
}

/* Texto de éxito en verde */
.text-success {
    color: #198754 !important;
}

/* ===================================================================
   LINKS CLICKEABLES
   =================================================================== */

a.text-primary:hover {
    color: var(--sg-brand-primary-dark) !important;
    text-decoration: underline;
}

/* ===================================================================
   IMÁGENES DE GALERÍA
   =================================================================== */

img[style*="cursor: pointer"]:hover {
    opacity: 0.9;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

/* ===================================================================
   ESTILOS TIPO ODOO - Badges con Iconos
   =================================================================== */

.badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.badge-odoo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.badge-odoo:hover {
    background-color: #e9ecef;
    border-color: var(--sg-brand-primary);
    box-shadow: 0 2px 4px rgba(0, 125, 165, 0.1);
}

.badge-odoo .badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
}

.badge-odoo .badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    gap: 0.125rem;
}

.badge-odoo .badge-text > span:first-child {
    font-size: 0.6875rem; /* 11px - etiqueta */
    font-weight: 600;
    color: var(--sg-brand-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-odoo .badge-text small {
    font-size: 0.875rem !important; /* 14px - valor */
    font-weight: 600;
    color: var(--sg-brand-ink);
    margin-top: 0;
    line-height: 1.2;
}

/* Variantes de badges Odoo */
.badge-cliente .badge-icon {
    background-color: #e3f2fd;
    color: #1976d2;
}

.badge-pedido .badge-icon {
    background-color: #fff3e0;
    color: #f57c00;
}

.badge-entrega .badge-icon {
    background-color: #e8f5e9;
    color: #388e3c;
}

/* ===================================================================
   BARRA DE ACCIONES TIPO ODOO
   =================================================================== */

.action-bar-odoo {
    padding: 0.75rem;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.action-bar-odoo .btn {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.action-bar-odoo .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.action-bar-odoo .btn-primary {
    background-color: var(--sg-brand-primary);
    border-color: var(--sg-brand-primary);
}

.action-bar-odoo .vr {
    width: 1px;
    height: 38px;
    background-color: #dee2e6;
    margin: 0 0.5rem;
}

/* ===================================================================
   MINIATURAS DE PRODUCTOS
   =================================================================== */

/* Miniatura en móvil */
.product-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--sg-brand-gray);
}

/* Miniatura en grid de desktop */
.product-thumbnail-grid {
    width: 40px;
    height: 40px;
    border-radius: 0.25rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--sg-brand-gray);
    margin: 0 auto;
}

/* ===================================================================
   LÍNEAS DE PEDIDO - Tipografía mejorada para móvil
   =================================================================== */

/* Tarjeta de línea de pedido */
.border-bottom.p-2 {
    padding: 0.875rem !important;
    transition: background-color 0.15s;
}

.border-bottom.p-2:hover {
    background-color: rgba(0, 125, 165, 0.02);
}

/* Referencia del producto */
.border-bottom.p-2 .fw-bold.text-primary.small {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    margin-bottom: 0.25rem;
}

/* Descripción del producto */
.border-bottom.p-2 .small.mb-1 {
    font-size: 0.8125rem !important;
    color: var(--sg-brand-ink);
    line-height: 1.4;
    margin-bottom: 0.5rem !important;
}

/* Datos numéricos (cantidad, precio, total) */
.border-bottom.p-2 .d-flex.justify-content-between.small {
    font-size: 0.75rem !important;
    color: var(--sg-brand-gray);
}

.border-bottom.p-2 .d-flex.justify-content-between.small strong {
    font-weight: 700;
    color: var(--sg-brand-ink);
    font-size: 0.8125rem;
}

.border-bottom.p-2 .d-flex.justify-content-between.small .text-success strong {
    color: #198754 !important;
    font-size: 0.875rem !important;
}

/* ===================================================================
   CABECERAS DE SYNCFUSION GRID - Colores Corporativos (SOLO PEDIDOS)
   =================================================================== */

/* Cabeceras del grid - Azul corporativo */
.pedidos-page .e-grid .e-headercell {
    background-color: var(--sg-brand-primary, #007da5) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    border-color: var(--sg-brand-primary-dark, #006b8d) !important;
    padding: 12px 16px !important;
}

/* Contenido de texto en cabecera */
.pedidos-page .e-grid .e-headercell .e-headertext,
.pedidos-page .e-grid .e-headercell .e-headercelldiv {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Iconos de ordenamiento - Visibles en blanco */
.pedidos-page .e-grid .e-headercell .e-sortfilterdiv,
.pedidos-page .e-grid .e-headercell .e-sortnumber {
    color: #ffffff !important;
}

.pedidos-page .e-grid .e-headercell .e-icon-ascending::before,
.pedidos-page .e-grid .e-headercell .e-icon-descending::before {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Flechas de ordenamiento más visibles */
.pedidos-page .e-grid .e-headercell .e-ascending .e-icon-ascending,
.pedidos-page .e-grid .e-headercell .e-descending .e-icon-descending {
    opacity: 1 !important;
    color: #ffffff !important;
}

/* Icono de filtro en cabecera */
.pedidos-page .e-grid .e-headercell .e-filterbar-cell .e-input,
.pedidos-page .e-grid .e-headercell .e-filterbarcell {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.pedidos-page .e-grid .e-headercell .e-filterbar-cell .e-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Icono de filtro (embudo) - MUY VISIBLE */
.pedidos-page .e-grid .e-headercell .e-filtermenudiv .e-icons,
.pedidos-page .e-grid .e-headercell .e-filtermenudiv,
.pedidos-page .e-grid .e-headercell .e-icon-filter {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 14px !important;
}

/* Botón de filtro hover */
.pedidos-page .e-grid .e-headercell .e-filtermenudiv:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px;
}

/* Asegurar que el icono de embudo sea clickeable y visible */
.pedidos-page .e-grid .e-headercell .e-filtermenudiv .e-btn-icon {
    color: #ffffff !important;
}

.pedidos-page .e-grid .e-headercell .e-filtermenudiv .e-btn-icon::before {
    color: #ffffff !important;
}

/* Hover en cabeceras */
.pedidos-page .e-grid .e-headercell:hover {
    background-color: var(--sg-brand-primary-dark, #006b8d) !important;
}

/* Estilos específicos para iconos de ordenamiento y filtros */
.pedidos-page .e-grid .e-icon-ascending,
.pedidos-page .e-grid .e-icon-descending,
.pedidos-page .e-grid .e-filtermenudiv,
.pedidos-page .e-grid .e-sortfilterdiv .e-icons,
.pedidos-page .e-grid .e-headercelldiv .e-icons {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Asegurar visibilidad de todos los iconos en cabecera */
.pedidos-page .e-grid .e-headercell .e-icons::before {
    color: #ffffff !important;
}

/* Indicador numérico de ordenamiento */
.pedidos-page .e-grid .e-headercell .e-sortnumber {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Input de filtro en barra de filtro */
.pedidos-page .e-grid .e-filterbar .e-filterbarcell .e-input-group {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.pedidos-page .e-grid .e-filterbar .e-filterbarcell .e-input-group input {
    color: #ffffff !important;
    font-weight: 500;
}

/* Placeholder más visible */
.pedidos-page .e-grid .e-filterbar .e-filterbarcell .e-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ===================================================================
   MENÚ DE FILTROS (Contains, Starts with, etc.) - SOLO PEDIDOS
   =================================================================== */

/* Popup del menú de filtros */
.pedidos-page .e-grid .e-filter-popup,
.pedidos-page .e-grid .e-flmenu-popup {    
    border: 2px solid var(--sg-brand-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 125, 165, 0.2) !important;
}

/* Items del menú de filtros */
.pedidos-page .e-grid .e-filter-popup .e-menu-item,
.pedidos-page .e-grid .e-flmenu-popup .e-menu-item {
    color: var(--sg-brand-ink, #1d1d1b) !important;
    font-weight: 500;
    padding: 8px 16px;
}

/* Hover en items del menú */
.pedidos-page .e-grid .e-filter-popup .e-menu-item:hover,
.pedidos-page .e-grid .e-flmenu-popup .e-menu-item:hover {
    background-color: rgba(0, 125, 165, 0.1) !important;
    color: var(--sg-brand-primary) !important;
}

/* Item seleccionado */
.pedidos-page .e-grid .e-filter-popup .e-menu-item.e-selected,
.pedidos-page .e-grid .e-flmenu-popup .e-menu-item.e-selected {
    background-color: var(--sg-brand-primary) !important;
    color: #ffffff !important;
}

/* Iconos en el menú de filtros */
.pedidos-page .e-grid .e-filter-popup .e-menu-item .e-icons,
.pedidos-page .e-grid .e-flmenu-popup .e-menu-item .e-icons {
    color: currentColor !important;
}

/* Inputs en el diálogo de filtro */
.pedidos-page .e-grid .e-filter-popup .e-input-group,
.pedidos-page .e-grid .e-flmenu-popup .e-input-group {
    border-color: #dee2e6 !important;
}

.pedidos-page .e-grid .e-filter-popup .e-input-group input,
.pedidos-page .e-grid .e-flmenu-popup .e-input-group input {
    color: var(--sg-brand-ink) !important;
}

/* Botones en el diálogo de filtro */
.pedidos-page .e-grid .e-filter-popup .e-btn,
.pedidos-page .e-grid .e-flmenu-popup .e-btn {
    font-weight: 500;
}

.pedidos-page .e-grid .e-filter-popup .e-primary,
.pedidos-page .e-grid .e-flmenu-popup .e-primary {
    background-color: var(--sg-brand-primary) !important;
    border-color: var(--sg-brand-primary) !important;
    color: #ffffff !important;
}

/* ===================================================================
   PAGINACIÓN DE SYNCFUSION GRID - Colores Corporativos
   =================================================================== */

/* Contenedor de paginación */
.e-grid .e-pager {
    background-color: #ffffff;
    border-top: 2px solid var(--sg-brand-primary);
    padding: 0.75rem 1rem;
    font-family: 'Roboto', sans-serif;
}

/* Botones de página */
.e-grid .e-pager .e-numericitem,
.e-grid .e-pager .e-prevpagediv,
.e-grid .e-pager .e-nextpagediv,
.e-grid .e-pager .e-firstpage,
.e-grid .e-pager .e-lastpage {
    /*border: 1px solid #dee2e6;
    border-radius: 0.25rem;*/
    color: var(--sg-brand-primary);
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Hover en botones de página */
.e-grid .e-pager .e-numericitem:hover,
.e-grid .e-pager .e-prevpagediv:hover,
.e-grid .e-pager .e-nextpagediv:hover,
.e-grid .e-pager .e-firstpage:hover,
.e-grid .e-pager .e-lastpage:hover {
    background-color: var(--sg-brand-primary);
    color: white;
    border-color: var(--sg-brand-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 125, 165, 0.2);
}

/* Página activa */
.e-grid .e-pager .e-numericitem.e-currentitem {
    background-color: var(--sg-brand-primary) !important;
    color: white !important;
    border-color: var(--sg-brand-primary-dark) !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 125, 165, 0.3);
}

/* Botones deshabilitados */
.e-grid .e-pager .e-disable,
.e-grid .e-pager .e-numericitem.e-disable {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #f8f9fa !important;
    color: var(--sg-brand-gray) !important;
    border-color: #dee2e6 !important;
}

.e-grid .e-pager .e-disable:hover {
    transform: none;
    box-shadow: none;
}

/* Selector de tamaño de página */
.e-grid .e-pager .e-pagesizes {
    color: var(--sg-brand-ink);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
}

.e-grid .e-pager .e-pagesizes:hover {
    border-color: var(--sg-brand-primary);
}

/* Texto de información de página */
.e-grid .e-pager .e-parentmsgbar {
    color: var(--sg-brand-gray);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Iconos de navegación */
.e-grid .e-pager .e-icon-first,
.e-grid .e-pager .e-icon-prev,
.e-grid .e-pager .e-icon-next,
.e-grid .e-pager .e-icon-last {
    color: var(--sg-brand-primary);
}

.e-grid .e-pager .e-disable .e-icon-first,
.e-grid .e-pager .e-disable .e-icon-prev,
.e-grid .e-pager .e-disable .e-icon-next,
.e-grid .e-pager .e-disable .e-icon-last {
    color: var(--sg-brand-gray);
}

/* Responsive - móvil */
@media (max-width: 767px) {
    .e-grid .e-pager {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .e-grid .e-pager .e-numericitem,
    .e-grid .e-pager .e-prevpagediv,
    .e-grid .e-pager .e-nextpagediv {
        min-width: 32px;
        height: 32px;
        padding: 0.25rem;
    }
}

/* ===================================================================
   MEJORAS DE DISEÑO COMPACTO
   =================================================================== */

/* Reducir espaciado en cards */
@media (min-width: 768px) {
    .card-header {
        padding: 0.5rem 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Espaciado reducido en listas de definición */
    dl dt {
        margin-bottom: 0.25rem;
    }
    
    dl dd {
        margin-bottom: 0.75rem;
    }
}

/* ===================================================================
   ENLACES A AMAZON SELLER CENTRAL
   =================================================================== */

/* Enlace de pedido de Amazon */
.pedidos-page .e-grid a[href*="sellercentral.amazon"] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.pedidos-page .e-grid a[href*="sellercentral.amazon"]:hover {
    background-color: rgba(0, 125, 165, 0.1);
    transform: translateX(2px);
}

.pedidos-page .e-grid a[href*="sellercentral.amazon"] .bi-amazon {
    font-size: 1.125rem;
}

.pedidos-page .e-grid a[href*="sellercentral.amazon"] .bi-box-arrow-up-right {
    opacity: 0.6;
    font-size: 0.75rem;
}

.pedidos-page .e-grid a[href*="sellercentral.amazon"]:hover .bi-box-arrow-up-right {
    opacity: 1;
}

/* ===================================================================
   NAVEGACIÓN ENTRE PEDIDOS
   =================================================================== */

/* Contenedor de navegación */
.pedidos-navegacion {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* Botones de navegación con flechas */
.btn-nav-pedido {
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--sg-brand-primary);
    background-color: white;
    color: var(--sg-brand-primary);
    transition: all 0.2s ease;
    font-size: 1.75rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-nav-pedido:hover:not(:disabled) {
    background-color: var(--sg-brand-primary);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 6px 12px rgba(0, 125, 165, 0.4);
}

.btn-nav-pedido:active:not(:disabled) {
    transform: scale(0.95);
}

.btn-nav-pedido:disabled {
    border-color: #dee2e6;
    color: #adb5bd;
    background-color: #f8f9fa;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Contador de posición */
.pedidos-contador {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sg-brand-ink);
    min-width: 80px;
    text-align: center;
}

/* Flechas más grandes y vistosas */
.btn-nav-pedido .bi-chevron-left,
.btn-nav-pedido .bi-chevron-right {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.btn-sm .bi-chevron-left,
.btn-sm .bi-chevron-right {
    font-size: 0.875rem;
}

/* Responsive: Móvil */
@media (max-width: 767px) {
    .pedidos-navegacion {
        gap: 0.5rem;
        padding: 0.375rem 0.75rem;
        background-color: white;
        border: 2px solid var(--sg-brand-primary);
    }
    
    .btn-nav-pedido {
        width: 40px;
        height: 40px;
        border: 2px solid var(--sg-brand-primary);
        background-color: var(--sg-brand-primary);
        color: white;
        box-shadow: 0 2px 4px rgba(0, 125, 165, 0.3);
    }
    
    .btn-nav-pedido:hover:not(:disabled) {
        transform: scale(1.05);
    }
    
    .btn-nav-pedido:disabled {
        background-color: #e9ecef;
        border-color: #ced4da;
        color: #adb5bd;
        box-shadow: none;
    }
    
    .pedidos-contador {
        font-size: 0.875rem;
        min-width: 60px;
        font-weight: 600;
    }
    
    .btn-nav-pedido .bi-chevron-left,
    .btn-nav-pedido .bi-chevron-right {
        font-size: 1.5rem;
    }
}

/* ===================================================================
   RESPONSIVE - Ajustes para pantallas pequeñas
   =================================================================== */

@media (max-width: 991px) {
    .action-bar-odoo {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-bar-odoo .btn {
        width: 100%;
        justify-content: center;
    }
    
    .action-bar-odoo .vr {
        display: none !important;
    }
}

/* ===================================================================
   BARRA DE BÚSQUEDA GLOBAL - Toolbar del Grid
   =================================================================== */

/* Toolbar contenedor */
.pedidos-page .e-grid .e-toolbar {
    background-color: #f8f9fa !important;
    border-bottom: 2px solid var(--sg-brand-primary) !important;    
    min-height: 48px !important;
}

/* Caja de búsqueda */
.pedidos-page .e-grid .e-search {
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.9375rem !important;
    font-family: 'Roboto', sans-serif !important;
    transition: all 0.2s ease !important;
}

.pedidos-page .e-grid .e-search:focus {
    border-color: var(--sg-brand-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 125, 165, 0.15) !important;
    outline: none !important;
}

/* Input de búsqueda */
.pedidos-page .e-grid .e-searchinput {
    font-size: 0.9375rem !important;
    font-family: 'Roboto', sans-serif !important;
    color: var(--sg-brand-ink) !important;
}

.pedidos-page .e-grid .e-searchinput::placeholder {
    color: var(--sg-brand-gray) !important;
    opacity: 0.7 !important;
}

/* Icono de búsqueda */
.pedidos-page .e-grid .e-search .e-search-icon {
    color: var(--sg-brand-primary) !important;
    font-size: 1.125rem !important;
}

/* Botón de limpiar búsqueda */
.pedidos-page .e-grid .e-search .e-clear-icon {
    color: var(--sg-brand-gray) !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.pedidos-page .e-grid .e-search .e-clear-icon:hover {
    color: var(--sg-brand-primary) !important;
    opacity: 1 !important;
}

/* Wrapper de búsqueda */
.pedidos-page .e-grid .e-toolbar-item.e-search-wrapper {
    margin-right: auto !important;
    max-width: 400px !important;
    width: 100% !important;
}

/* Responsive - Búsqueda en móvil */
@media (max-width: 768px) {
    .pedidos-page .e-grid .e-toolbar-item.e-search-wrapper {
        max-width: 100% !important;
    }
    
    .pedidos-page .e-grid .e-search {
        width: 100% !important;
    }
}

/* ===================================================================
   ESCÁNER DE CÓDIGO DE BARRAS
   =================================================================== */

/* Botones en la barra de filtros */
.pedidos-page .card-body .btn {
    min-width: 42px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
}

.pedidos-page .card-body .btn i {
    font-size: 1.125rem;
}

/* Botón de búsqueda principal */
.pedidos-page .btn-primary {
    background-color: var(--sg-brand-primary);
    border-color: var(--sg-brand-primary);
}

.pedidos-page .btn-primary:hover {
    background-color: var(--sg-brand-primary-dark);
    border-color: var(--sg-brand-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 125, 165, 0.2);
}

/* Botón de escáner */
.pedidos-page .btn-outline-primary {
    border-color: var(--sg-brand-primary);
    color: var(--sg-brand-primary);
    transition: all 0.2s ease;
}

.pedidos-page .btn-outline-primary:hover {
    background-color: var(--sg-brand-primary);
    border-color: var(--sg-brand-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 125, 165, 0.2);
}

/* Badge de código escaneado */
.pedidos-page .badge.bg-success {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.625rem;
    align-self: flex-end;
    margin-bottom: 0.25rem;
}

/* Modal de escáner */
#barcode-reader {
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
}

#barcode-reader video {
    width: 100%;
    height: auto;
    display: block;
}

#barcode-reader canvas {
    width: 100%;
    height: auto;
    display: block;
}

/* Canvas de QuaggaJS */
#barcode-reader .drawingBuffer {
    position: absolute;
    top: 0;
    left: 0;
}

/* Responsive - Escáner en móvil */
@media (max-width: 768px) {
    .pedidos-page .btn-outline-primary span {
        display: none;
    }
    
    #barcode-reader {
        min-height: 300px;
    }
}

/* ===================================================================
   PEDIDO DETALLE - PATRÓN VISUAL TIPO ODOO
   =================================================================== */

/* Labels estilo Odoo: uppercase, pequeño, espaciado */
.odoo-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

/* Navegación entre pedidos */
.pedidos-navegacion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

.pedidos-contador {
    font-size: 0.875rem;
    color: #6c757d;
    min-width: 50px;
    text-align: center;
}

.btn-nav-pedido {
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: #6c757d;
    border-radius: 0.25rem;
}

.btn-nav-pedido:hover:not(:disabled) {
    background-color: #e9ecef;
    color: #212529;
}

.btn-nav-pedido:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Barra de acciones tipo Odoo */
.action-bar-odoo {
    background-color: #f8f9fa;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

/* Badges tipo Odoo */
.badge-odoo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    font-weight: 500;
}

.badge-odoo .badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #e9ecef;
}

.badge-odoo .badge-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.badge-odoo .badge-text span:first-child {
    font-size: 0.7rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-odoo .badge-text small {
    font-size: 0.875rem;
    color: #212529;
}

.badge-cliente .badge-icon { 
    background-color: #cfe2ff; 
    color: #084298; 
}

.badge-pedido .badge-icon { 
    background-color: #e7f1ff; 
    color: #052c65; 
}

.badge-entrega .badge-icon { 
    background-color: #fff3cd; 
    color: #664d03; 
}

/* Thumbnails de productos */
.product-thumbnail {
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.product-thumbnail-grid {
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    margin: 0 auto;
}

/* Header sticky móvil - z-index */
.pedido-header-mobile {
    z-index: 1020;
}

/* Icono pequeño en header móvil */
.pedido-mobile-icon {
    font-size: 0.9rem;
}

/* Contenedor de líneas con scroll en móvil */
.lineas-scroll-mobile {
    max-height: 500px;
    overflow-y: auto;
}

/* Imagen de foto con altura fija */
.foto-thumbnail {
    height: 150px;
    object-fit: cover;
    cursor: pointer;
}

/* Botón de eliminar foto compacto */
.btn-eliminar-foto {
    line-height: 1;
}

.btn-eliminar-foto .bi-trash {
    font-size: 0.875rem;
}

/* Nombre de archivo truncado */
.foto-filename {
    font-size: 0.7rem;
}

/* Botón de descarga de foto */
.btn-descargar-foto {
    font-size: 0.75rem;
}

.btn-descargar-foto .bi-download {
    font-size: 0.75rem;
}

/* Modales y overlays */
.modal-foto-viewer {
    background-color: rgba(0, 0, 0, 0.95);
}

.modal-foto-viewer .modal-dialog {
    max-width: 95vw;
    max-height: 95vh;
}

.modal-foto-viewer .modal-body {
    max-height: 80vh;
}

.modal-foto-imagen {
    max-height: 80vh;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.modal-camara-overlay {
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-camara-video {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
}

.modal-zpl-viewer {
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-zpl-body {
    min-height: 400px;
}

.modal-zpl-imagen {
    max-width: 100%;
    background-color: white;
}

.modal-zpl-loader {
    height: 400px;
}

/* JSON response viewer */
.json-response-viewer {
    max-height: 300px;
    overflow-y: auto;
}

.json-response-pre {
    white-space: pre-wrap;
    word-break: break-all;
}

/* Botones de navegación en visor de fotos */
.foto-nav-button {
    width: 50px;
    height: 50px;
    opacity: 0.8;
    z-index: 1000;
}

/* Canvas de captura oculto */
#canvasCaptura {
    display: none;
}

/* Modal dialog para visor de fotos */
.modal-foto-viewer .modal-dialog {
    max-width: 95vw;
    max-height: 95vh;
}

/* Body del visor de fotos */
.modal-foto-viewer-body {
    max-height: 80vh;
}




/* ===================================================================
   COLORES CORPORATIVOS - BOTONES Y BADGES
   =================================================================== */

/* Botón primario con color corporativo SG — mantenido por compatibilidad, global en app.css */
.btn-sg-primary {
    background-color: var(--sg-brand-primary, #007da5) !important;
    border-color: var(--sg-brand-primary, #007da5) !important;
    color: white !important;
}

.btn-sg-primary:hover {
    background-color: #00586f !important;
    border-color: #00586f !important;
}

.btn-sg-primary:disabled {
    background-color: #7fc4d9 !important;
    border-color: #7fc4d9 !important;
    opacity: 0.7;
}

.badge-sg-primary {
    background-color: var(--sg-brand-primary, #007da5) !important;
    color: white !important;
}

/* Grid headers con color corporativo */
.pedidos-page .e-grid .e-headercell {
    background-color: var(--sg-brand-primary, #007da5) !important;
    color: white !important;
    font-weight: 600;
}

.pedidos-page .e-grid .e-headercell .e-headercelldiv {
    color: white !important;
}

.pedidos-page .e-grid .e-icon-filter {
    color: white !important;
}

.pedidos-page .e-grid .e-sortfilterdiv .e-icons {
    color: white !important;
}

/* Dropdown de estado con color corporativo en selección */
.e-dropdownlist.e-popup .e-list-item.e-active {
    background-color: var(--sg-brand-primary, #007da5) !important;
    color: white !important;
}

/* Badge bg-purple personalizado */
.bg-purple {
    background-color: #6f42c1 !important;
}

/* ===================================================================
   DETAIL TEMPLATE - LÍNEAS DE PEDIDO
   =================================================================== */

.detail-template-container {
    padding: 16px;
    background-color: #f8f9fa;
    border-left: 4px solid var(--sg-brand-primary, #007da5);
    margin: 8px 0;
}

.detail-header {
    background-color: var(--sg-brand-primary, #007da5);
    color: white;
    padding: 10px 16px;
    margin: -16px -16px 16px -16px;
    border-radius: 4px 4px 0 0;
}

.detail-header h6 {
    color: white !important;
    font-weight: 600;
    margin: 0;
}

.detail-lines-table {
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 0;
}

.detail-lines-table thead {
    background-color: #e8f4f8;
    color: var(--sg-brand-primary, #007da5);
}

.detail-lines-table thead th {
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 2px solid var(--sg-brand-primary, #007da5);
    padding: 10px 12px;
}

.detail-lines-table tbody tr {
    transition: background-color 0.2s;
}

.detail-lines-table tbody tr:hover {
    background-color: #e8f4f8;
}

.detail-lines-table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 0.875rem;
}

.detail-lines-table tfoot {
    background-color: #e8f4f8;
    font-weight: 600;
}

.detail-lines-table tfoot td {
    padding: 12px;
    font-size: 0.95rem;
    border-top: 2px solid var(--sg-brand-primary, #007da5);
}

.descripcion-linea {
    max-width: 400px;
    word-wrap: break-word;
}

/* ===================================================================
   PAGER PERSONALIZADO
   =================================================================== */

.custom-pager-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-top: 2px solid var(--sg-brand-primary, #007da5);
    gap: 16px;
}

.pager-info {
    color: var(--sg-brand-gray);
    font-size: 0.875rem;
    font-weight: 500;
}

.pager-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pager-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pager-input-group label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--sg-brand-gray);
    white-space: nowrap;
}

.pager-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid #c5e3ed;
    border-radius: 4px;
    text-align: center;
    font-size: 0.875rem;
}

.pager-input:focus {
    outline: none;
    border-color: var(--sg-brand-primary, #007da5);
    box-shadow: 0 0 0 2px rgba(0, 125, 165, 0.1);
}

.pager-nav-btn {
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #c5e3ed;
    background-color: white;
    color: var(--sg-brand-primary, #007da5);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pager-nav-btn:hover:not(:disabled) {
    background-color: var(--sg-brand-primary, #007da5);
    color: white;
    border-color: var(--sg-brand-primary, #007da5);
    transform: translateY(-1px);
}

.pager-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pager-nav-btn i {
    font-size: 1rem;
}

@media (max-width: 768px) {
    .custom-pager-container {
        flex-direction: column;
        gap: 12px;
    }
    
    .pager-info {
        order: 2;
    }
    
    .pager-controls {
        order: 1;
    }
}