/* Variables globales */
:root {
    --primary-color: #4CAF50;
    --primary-hover: #45a049;
    --secondary-color: #2196F3;
    --secondary-hover: #0b7dda;
    --danger-color: #dc3545;
    --light-bg: #f8f9fa;
    --border-color: #dee2e6;
    --text-color: #333;
    --text-muted: #6c757d;
    --shadow: 0 0 10px rgba(0,0,0,0.1);
    --radius: 4px;
    --transition: all 0.2s ease-in-out;
    
    /* Colores de estado */
    --status-pending-bg: #ffebee;
    --status-pending-color: #dc3545;
    --status-progress-bg: #fff3cd; /* Amarillo claro */
    --status-progress-color: #856404; /* Naranja oscuro */
    --status-completed-bg: #d4edda;
    --status-completed-color: #155724;
    --status-delivered-bg: #1565c0;
    --status-delivered-color: white;
    --status-parked-bg: #d1ecf1; /* Azul claro */
    --status-parked-color: #0c5460; /* Azul oscuro */
    --primary-red: #dd3333;
    --primary-red-dark: #bb2222;
    --primary-red-light: #ff4444;
    --text-light: #ffffff;
    --shadow-soft: 0 4px 6px rgba(221, 51, 51, 0.1);
    --shadow-strong: 0 8px 15px rgba(221, 51, 51, 0.2);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset y estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: #f5f5f5;
}

/* Sobrescritura agresiva de estilos del tema */
body.page-template-default #content,
body.page-template-default .container,
body.page-template-default .container-wrap,
body.page-template-default #page-header-bg,
body.page-template-default .row,
body.page-template-default .wpb_row,
body.page-template-default .main-content,
body.page-template-default .post-area,
body.page-template-default article.post .content-inner,
body.page-template-default .container-wrap[data-nav-pos="after_project_2"],
body.page-template-default .container-wrap[data-nav-pos="after_project"],
body.page-template-default .container-wrap[data-tab-pos="fullwidth"],
body.page-template-default .container-wrap[data-tab-pos="fullwidth_centered"],
body.page-template-default .container-wrap[data-tab-pos="left"],
body.page-template-default .container-wrap[data-tab-pos="right"] {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ajustes específicos para la página SAT */
body[class*="sat"] .container,
.container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ocultar elementos del tema que puedan interferir */
body.page-template-default #header-space,
body.page-template-default #header-outer,
body.page-template-default #footer-outer,
body.page-template-default .page-header-no-bg,
body.page-template-default #slide-out-widget-area-bg,
body.page-template-default #slide-out-widget-area {
    display: none !important;
}

/* Layout principal */
#sgt-panel {
    width: auto;
    margin: 0;
    padding: 0;
}

#sgt-content {
    background: white;
    padding: 1rem;
    margin: 0;
    border-radius: 0;
    min-height: calc(100vh - 60px); /* Altura total menos el header */
}

/* Header y navegación */
.sgt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: white;
    border-bottom: 1px solid var(--border-color);
    margin: 0;
}

.sgt-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sgt-logo {
    max-height: 40px;
    width: auto;
}

.sgt-header h2 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin: 0;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .sgt-logo {
        max-height: 30px;
    }
    
    .sgt-header-left {
        gap: 10px;
    }
}

/* Tabla principal */
.sgt-table-container {
    width: 100%;
    margin: 0;
    padding: 0 2rem;
}

.sgt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.sgt-table th,
.sgt-table td {
    padding: 12px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.sgt-table td:not(.sgt-acciones):not(.sgt-estado) {
    cursor: pointer;
    position: relative;
}

/* Filtros */
.sgt-filter-section {
    padding: 1rem 2rem;
    margin: 0;
    background: white;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.sgt-filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Estilos de botones de acción */
.sgt-btn {
    padding: 4px 6px; /* Reducido el padding */
    font-size: 12px; /* Reducido el tamaño de fuente */
    border-radius: 4px;
    min-width: auto; /* Eliminar ancho mínimo */
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.sgt-btn-edit {
    background: #17a2b8;
    color: white;
}

.sgt-btn-delete {
    background: #dc3545;
    color: white;
}

.sgt-btn:hover {
    transform: scale(1.2) !important;

}

.sgt-btn:active {
    transform: scale(0.95) !important;
}

.sgt-btn i {
    font-size: 1.4rem !important;
}

/* Contenedor de botones de acción */
.sgt-action-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

/* Ajustes responsive */
@media (max-width: 1200px) {
    .sgt-table-container {
        padding: 0 1rem;
    }
    
    .sgt-header,
    .sgt-filter-section {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .sgt-table th,
    .sgt-table td {
        padding: 0.75rem;
    }
    
    .sgt-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Estilos para el dashboard */
.sgt-dashboard {
    background: white;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Ajustes para la tabla */
.sgt-table th {
    background: var(--light-bg);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sgt-table tr:hover {
    background-color: rgba(0,0,0,0.02);
}

/* Estilos para los botones de filtro - DEFINICIÓN PRINCIPAL */
.sgt-filter-buttons .sgt-filter-btn {
     padding: 10px 18px !important;
    border: none !important;
    border-radius: 10px !important;
    background: #444444 !important;    /* Color por defecto */
    color: #ffffff !important;         /* Texto blanco */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    margin-right: 10px !important;
    font-size: 14px !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.sgt-filter-buttons .sgt-filter-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    border-radius: 10px !important;
}

.sgt-filter-buttons .sgt-filter-btn:hover {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.sgt-filter-buttons .sgt-filter-btn:hover::before {
    opacity: 1 !important;
}

/* Colores específicos para cada botón de filtro */
.sgt-filter-buttons .sgt-filter-btn[data-filter="todos"] {
    background: #444444 !important;    /* Gris oscuro para "Todos" */
    color: white !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="pendiente"] {
    background: var(--status-pending-bg) !important;    /* Amarillo para "Pendiente" */
    color: var(--status-pending-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="en_progreso"] {
    background: var(--status-progress-bg) !important;    /* Azul para "En Progreso" */
    color: var(--status-progress-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="completado"] {
    background: var(--status-completed-bg) !important;    /* Verde para "Completado" */
    color: var(--status-completed-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="entregado"] {
    background: var(--status-delivered-bg) !important;    /* Gris oscuro para "Entregado" */
    color: var(--status-delivered-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="aparcado"] {
    background: var(--status-parked-bg) !important;    /* Gris para "Aparcado" */
    color: var(--status-parked-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="en_camino"] {
    background: var(--status-progress-bg) !important;
    color: var(--status-progress-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="en_tienda"] {
    background: var(--status-parked-bg) !important;
    color: var(--status-parked-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="completada"] {
    background: #2e7d32 !important;
    color: white !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="alta_prioridad"] {
    background: #c62828 !important;
    color: white !important;
}

.sgt-filter-buttons .sgt-filter-btn.active {
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px) !important;
    position: relative !important;
    font-weight: 600 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Indicador para el botón activo */
.sgt-filter-buttons .sgt-filter-btn.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40% !important;
    height: 3px !important;
    background-color: currentColor !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Asegurar que los colores específicos para cada botón se apliquen correctamente */
.sgt-filter-buttons .sgt-filter-btn[data-filter="completado"].active::after {
    background-color: var(--status-completed-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="entregado"].active::after {
    background-color: white !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="aparcado"].active::after {
    background-color: white !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="pendiente"].active::after {
    background-color: var(--status-pending-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="en_progreso"].active::after {
    background-color: var(--status-progress-color) !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="todos"].active::after {
    background-color: white !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="completada"].active::after {
    background-color: white !important;
}

.sgt-filter-buttons .sgt-filter-btn[data-filter="alta_prioridad"].active::after {
    background-color: white !important;
}

.sgt-filter-buttons .sgt-filter-btn i {
    font-size: 1rem !important;
    color: inherit !important;
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 6px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    min-width: 24px !important;
    text-align: center !important;
}

.sgt-filter-buttons .sgt-filter-btn:hover i {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1) rotate(-5deg) !important;
}

.sgt-filter-buttons .sgt-filter-btn .sgt-count {
    background: rgba(255, 255, 255, 0.3) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    margin-left: 5px !important;
    font-weight: bold !important;
    color: inherit !important;
    display: inline-block !important;
    min-width: 28px !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.sgt-filter-buttons .sgt-filter-btn.active .sgt-count {
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Ajustes para el botón de nuevo SAT */
.sgt-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* Estilos unificados para el botón nuevo SAT */
.sgt-new-sat-button,
#sgt-new-sat.sgt-new-sat-button {
    /* Colores y gradientes */
    background: linear-gradient(135deg, #dd3333 0%, #cc2222 100%) !important;
    color: white !important;
    
    /* Dimensiones y espaciado */
    padding: 12px 24px !important;
    border-radius: 12px !important;
    
    /* Tipografía */
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    
    /* Flexbox */
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    
    /* Efectos y transiciones */
    cursor: pointer !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 6px rgba(221, 51, 51, 0.2), 
                0 1px 3px rgba(221, 51, 51, 0.1) !important;
    
    /* Posicionamiento */
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    margin-bottom: 20px;
}

/* Efecto de brillo */
.sgt-new-sat-button::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%) !important;
    transition: all 0.3s ease-in-out !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

/* Estados hover y active */
.sgt-new-sat-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(221, 51, 51, 0.3),
                0 2px 4px rgba(221, 51, 51, 0.2) !important;
    background: linear-gradient(135deg, #bb2222 0%, #aa1111 100%) !important;
}

.sgt-new-sat-button:hover::before {
    opacity: 1 !important;
}

.sgt-new-sat-button:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(221, 51, 51, 0.2) !important;
}

/* Estilos del icono */
.sgt-new-sat-button i {
    font-size: 1.2rem !important;
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 6px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.sgt-new-sat-button:hover i {
    transform: rotate(180deg) !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Estilos para botones secundarios */
.sgt-secondary-button {
    /* Colores y fondo */
    background: white !important;
    color: var(--secondary-color) !important;
    border: 2px solid var(--secondary-color) !important;

    /* Dimensiones y espaciado */
    padding: 12px 24px !important;
    border-radius: 12px !important;

    /* Tipografía */
    font-weight: 600 !important;
    font-size: 0.95rem !important;

    /* Flexbox */
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;

    /* Efectos y transiciones */
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.1) !important;
}

.sgt-secondary-button:hover {
    background: var(--secondary-color) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3) !important;
}

.sgt-secondary-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2) !important;
}

.sgt-secondary-button i {
    font-size: 1.1rem !important;
    transition: transform 0.2s ease !important;
}

.sgt-secondary-button:hover i {
    transform: scale(1.1) !important;
}

/* Estilos mejorados para los botones de estado */
.sgt-status-button {
    padding: 8px 15px !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.3s ease-in-out !important;
    font-weight: 500 !important;
    min-width: 140px !important; /* Asegurar un ancho mínimo */
    justify-content: center !important; /* Centrar el contenido */
}

/* Colores específicos para cada estado */
.sgt-status-button.pendiente {
    background: var(--status-pending-bg) !important;
    color: var(--status-pending-color) !important;
}

.sgt-status-button.en_progreso {
    background: var(--status-progress-bg) !important;
    color: var(--status-progress-color) !important;
}

.sgt-status-button.completado {
    background: var(--status-completed-bg) !important;
    color: var(--status-completed-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.sgt-status-button.entregado {
    background: var(--status-delivered-bg) !important;
    color: var(--status-delivered-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.sgt-status-button:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

/* Animación para resaltar la actualización de estado */
@keyframes highlight-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(0,128,0,0.5); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

.highlight-update {
    animation: highlight-animation 2s ease-in-out;
}

@keyframes highlight-animation {
    0% { background-color: rgba(76, 175, 80, 0.2); }
    50% { background-color: rgba(76, 175, 80, 0.7); }
    100% { background-color: transparent; }
}

/* Estilos específicos para la celda de reparación actualizada */
.sgt-reparacion.highlight-update .sgt-text-ellipsis {
    font-weight: bold;
    color: #0d6efd;
}

/* Iconos */
.sgt-icon {
    font-size: 12px; /* Reducido para que coincida con el botón */
    transition: all 0.2s;
}

.sgt-icon:hover {
    transform: scale(1.1);
}

.sgt-icon.fa-whatsapp {
    color: #25d366 !important;
}

.sgt-icon.fa-whatsapp:hover {
    color: #128c7e !important;
}

/* Estilos de formulario moderno */
.sgt-modern-input,
.sgt-modern-textarea,
.sgt-modern-select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: var(--transition) !important;
    background: white !important;
}

.sgt-modern-input:focus,
.sgt-modern-textarea:focus,
.sgt-modern-select:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
    outline: none !important;
}

.sgt-modern-textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

/* Loader */
.sgt-loader-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 200px !important;
    width: 100% !important;
}

.sgt-loader {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #f3f3f3 !important;
    border-radius: 50% !important;
    border-top-color: var(--danger-color) !important;
    animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error messages */
.error {
    color: var(--danger-color) !important;
    padding: 15px !important;
    border-radius: var(--radius) !important;
    background: rgba(220, 53, 69, 0.1) !important;
    margin: 10px 0 !important;
}

/* Loading spinner */
.loading-spinner {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
    border-top-color: white !important;
    animation: spin 0.8s linear infinite !important;
    margin-right: 8px !important;
}

/* Estilos generales */
#sgt-panel {
    font-family: 'Arial', sans-serif;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Menú de navegación moderno */
#sgt-menu {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-strong);
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 70px; /* Aumentado de 50px a 70px */
    overflow: visible;
}

/* Botón hamburguesa para móviles */
.sgt-mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    background: var(--primary-red);
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(221, 51, 51, 0.3);
    transition: var(--transition-smooth);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
}

.sgt-mobile-menu-toggle:hover {
    background: var(--primary-red-dark);
    transform: scale(1.05);
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: var(--transition-smooth);
    border-radius: 2px;
}

/* Animación del botón hamburguesa cuando está activo */
.sgt-mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.sgt-mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.sgt-mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.sgt-menu-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: none;
    margin: 8px 8px 8px 0;
}

.sgt-menu-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);
    transition: var(--transition-smooth);
    border-radius: 8px;
    z-index: 1;
}

.sgt-menu-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sgt-menu-btn:hover::before {
    transform: translateY(0);
}

.sgt-menu-btn.active {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    font-weight: 600;
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(1px);
}

.sgt-menu-btn i {
    font-size: 1.1rem;
    transition: var(--transition-smooth);
    background: rgba(255, 255, 255, 0.1);
    padding: 6px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-right: 8px;
    width: auto;
    text-align: center;
    min-width: 24px;
}

.sgt-menu-btn:hover i {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(255, 255, 255, 0.2);
}

.sgt-menu-btn.active i {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Indicador de sección activa */
.sgt-menu-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 3px;
    background: var(--text-light);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Botón dividido para pedidos */
.sgt-menu-btn-split {
    display: flex;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    overflow: visible;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    margin: 12px 12px 12px 0;
}

.sgt-menu-btn-split::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.sgt-menu-btn-left {
    background: transparent;
    border: none;
    border-radius: 0;
    flex: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: none;
    position: relative;
    overflow: visible;
    margin: 0 8px 0 0;
}

.sgt-menu-btn-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sgt-menu-btn-right {
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 50px;
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: visible;
    margin: 0 8px 0 0;
}

.sgt-menu-btn-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sgt-menu-btn-split:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.sgt-menu-btn-split:hover::before {
    opacity: 1;
}

.sgt-menu-btn-left:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
}

.sgt-menu-btn-left:hover::before {
    opacity: 1;
}

.sgt-menu-btn-right:hover {
    background: transparent;
}

.sgt-menu-btn-right:hover::before {
    opacity: 1;
}

.sgt-menu-btn-left.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
    transform: none;
    box-shadow: none;
    font-weight: 600;
    position: relative;
}

.sgt-menu-btn-left.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 1) 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.8);
}

/* Responsive design para el menú */
@media (max-width: 768px) {
    /* Mostrar botón hamburguesa */
    .sgt-mobile-menu-toggle {
        display: flex;
    }
    
    /* Ocultar menú por defecto en móviles */
    #sgt-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 80px 20px 20px;
        margin-top: 0;
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
        z-index: 1000;
    }
    
    /* Mostrar menú cuando está activo */
    #sgt-menu.active {
        left: 0;
    }
    
    /* Overlay para cerrar el menú */
    #sgt-menu.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 280px;
        width: calc(100vw - 280px);
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
    
    .sgt-menu-btn {
        width: 100%;
        justify-content: flex-start;
        padding: 1rem;
        margin-bottom: 0.5rem;
        border-radius: 12px;
        font-size: 1rem;
        text-align: left;
    }
    
    .sgt-menu-btn i {
        margin-right: 12px;
        width: 20px;
        text-align: center;
    }

    .sgt-menu-btn.active::after {
        display: none;
    }
    
    /* Ajustar contenido principal */
    #sgt-content {
        margin-top: 0;
        padding-top: 80px;
    }
}

/* Contenido principal */
#sgt-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* Tablas */
.sgt-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}


.sgt-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    cursor: pointer;
}

.sgt-table th:hover {
    background-color: #e6e6e6;
}

.sgt-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.sgt-table tr:hover {
    background-color: #f5f5f5;
}

/* Botones */
.sgt-btn {
    padding: 4px 6px; /* Reducido el padding */
    font-size: 12px; /* Reducido el tamaño de fuente */
    border-radius: 4px;
    min-width: auto; /* Eliminar ancho mínimo */
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.sgt-btn:hover {
    transform: scale(1.05);
}

.sgt-btn:active {
    transform: scale(0.95);
}

.sgt-btn-primary {
    background-color: #4CAF50;
    color: white;
}

.sgt-btn-primary:hover {
    background-color: #45a049;
}


.sgt-btn-delete {
    background: #dc3545;
    color: white;
}

.sgt-btn-delete:hover {
    background-color: #da190b;
}

/* Botones de acción en tablas */
.sgt-edit-btn,
.sgt-delete-btn {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    min-height: 36px;
}

.sgt-edit-btn {
    background: #2196F3;
    color: white;
}

.sgt-edit-btn:hover {
    background: #0b7dda;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}

.sgt-delete-btn {
    background: #f44336;
    color: white;
}

.sgt-delete-btn:hover {
    background: #da190b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

.sgt-edit-btn:active,
.sgt-delete-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.sgt-print-btn {
    padding: 8px 12px;
    min-width: 36px;
    min-height: 36px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(140deg, #06b6d4, #2563eb);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.sgt-print-btn i {
    pointer-events: none;
    font-size: 16px;
}

.sgt-print-btn:hover {
    background: linear-gradient(140deg, #0ea5e9, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}

.sgt-print-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.sgt-print-btn.loading {
    opacity: 0.7;
    cursor: progress;
    box-shadow: none;
}

/* Formularios */
form[id^="sgt-form-"] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

form[id^="sgt-form-"] input[type="text"],
form[id^="sgt-form-"] input[type="number"],
form[id^="sgt-form-"] input[type="email"],
form[id^="sgt-form-"] input[type="tel"],
form[id^="sgt-form-"] input[type="date"],
form[id^="sgt-form-"] input[type="datetime-local"],
form[id^="sgt-form-"] select,
form[id^="sgt-form-"] textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}

form[id^="sgt-form-"] textarea {
    height: 100px;
    resize: vertical;
}

form[id^="sgt-form-"] button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

form[id^="sgt-form-"] button[type="submit"]:hover {
    background-color: #45a049;
}

/* Búsqueda */
#sgt-search {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}

/* Paginación */
.sgt-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.sgt-page-btn {
    padding: 5px 10px;
    margin: 0 2px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.3s;
}

.sgt-page-btn:hover {
    background-color: #e6e6e6;
}

.sgt-page-btn.active {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

/* Responsive design */
@media (max-width: 768px) {
    #sgt-menu {
        flex-direction: column;
    }
    
    .sgt-menu-btn {
        margin-bottom: 10px;
    }
    
    .sgt-table {
        font-size: 14px;
    }
    
    .sgt-table th, .sgt-table td {
        padding: 8px;
    }
    
    .sgt-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}


/* Estilos para la búsqueda de clientes */
.sgt-cliente-search {
    position: relative;
    margin-bottom: 15px;
}

#sgt-cliente-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.sgt-cliente-result {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.sgt-cliente-result:hover {
    background-color: #f5f5f5;
}

/* Ajustes para el formulario SAT */
#sgt-form-sat input[type="text"],
#sgt-form-sat input[type="datetime-local"],
#sgt-form-sat textarea {
    width: 100%;
    margin-bottom: 10px;
}

#sgt-form-sat textarea {
    height: 100px;
}

/* Estilos para el Modal */
.sgt-modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Estilo del Formulario en el Modal */
.swal2-input-group,
.swal2-form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.swal2-input-group i,
.swal2-form-group label {
    width: 30px;
    text-align: center;
    color: #333;
    margin-right: 15px; /* Aumentar el margen derecho */
    font-size: 18px; /* Tamaño del icono */
}

.swal2-form-group label {
    width: 120px;
}

.swal2-form-group input,
.swal2-form-group textarea,
.swal2-form-group select {
    width: calc(100% - 60px); /* Ajuste para compensar el tamaño del icono y margen */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    background-color: #f9f9f9;
    transition: border-color 0.3s;
}

.swal2-form-group input:focus,
.swal2-form-group textarea:focus,
.swal2-form-group select:focus {
    border-color: #4CAF50;
    outline: none;
}

.swal2-form-group textarea {
    resize: vertical;
}

/* Botón de Confirmar en el Modal */
.swal2-confirm {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.swal2-confirm:hover {
    background-color: #45a049;
}

/* Botón de Cancelar en el Modal */
.swal2-cancel {
    background-color: #f44336;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.swal2-cancel:hover {
    background-color: #da190b;
}


.sgt-icon {
    font-size: 24px;
    color: #007bff;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    margin-left: 10px;
}

.sgt-icon:hover {
    transform: scale(1.2);
    color: #0056b3;
}

.sgt-button {
    display: flex;
    align-items: center;
    background-color: #28a745;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-left: 10px;
}

.sgt-button-icon {
    font-size: 20px;
    margin-right: 5px;
}

.sgt-button:hover {
    background-color: #218838;
    transform: scale(1.05);
}

.sgt-status-button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.sgt-status-button[data-current-status="pendiente"] {
    background-color: var(--status-pending-bg) !important;
    color: var(--status-pending-color) !important;
}

.sgt-status-button[data-current-status="en_progreso"] {
    background-color: #17a2b8;
    color: #fff;
}

.sgt-status-button[data-current-status="completado"] {
    background-color: #28a745;
    color: #fff;
}

.sgt-status-button[data-current-status="entregado"] {
    background-color: var(--status-delivered-bg);
    color: var(--status-delivered-color);
}

.sgt-status-button:hover {
    opacity: 0.8;
}

.sgt-icon {
    font-size: 24px;
    color: #007bff;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    margin-right: 10px;
}

.sgt-icon:hover {
    transform: scale(1.2);
    color: #0056b3;
}

.fab.fa-whatsapp {
    color: #25d366;
}

.fab.fa-whatsapp:hover {
    color: #128c7e;
}

.sgt-filter-buttons {
    margin-bottom: 20px;
}



/* Estilos para el modal de edición de SAT */
.sgt-modal-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sgt-modal-popup {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 0;
}

.sgt-modal-header {
    background: #ce2838;
    color: white;
    border-radius: 15px 15px 0 0;
    padding: 20px;
}

.sgt-modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

.sgt-modal-content {
    padding: 30px;
}

.sgt-edit-form {
    max-width: 800px;
    margin: 0 auto;
}

.sgt-form-section {
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.sgt-form-section h3 {
    color: #1e293b;
    font-size: 1.2rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-form-section h3 i {
    color: #4f46e5;
}

.sgt-input-group {
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-input-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 8px;
    color: #4f46e5;
}

.sgt-modern-input,
.sgt-modern-textarea,
.sgt-modern-select {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.sgt-modern-input:focus,
.sgt-modern-textarea:focus,
.sgt-modern-select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    outline: none;
}

.sgt-modern-textarea {
    min-height: 100px;
    resize: vertical;
}

.sgt-modern-button {
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.sgt-button-primary {
    background: #4f46e5;
    color: white;
}

.sgt-button-primary:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

.sgt-button-secondary {
    background: #f1f5f9;
    color: #64748b;
}

.sgt-button-secondary:hover {
    background: #e2e8f0;
}

.sgt-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.sgt-modern-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.sgt-cliente-result {
    padding: 12px 15px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sgt-cliente-result:hover {
    background-color: #f8fafc;
}

.sgt-cliente-result:last-child {
    border-bottom: none;
}

.sgt-action-icon {
    cursor: pointer;
    color: #4f46e5;
    font-size: 1.2rem;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.sgt-action-icon:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .sgt-modern-form {
        padding: 10px;
    }

    .sgt-form-section {
        padding: 15px;
    }

    .sgt-input-group {
        flex-direction: column;
        align-items: stretch;
    }

    .sgt-input-icon {
        width: 100%;
        height: 30px;
        margin-bottom: 5px;
    }

    .sgt-form-actions {
        flex-direction: column;
    }

    .sgt-modern-button {
        width: 100%;
        justify-content: center;
    }
}

/* Estilos para el formulario moderno */
.sgt-modern-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.sgt-form-section {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.sgt-form-section h3 {
    color: #1e293b;
    font-size: 1.2rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-form-section h3 i {
    color: #4f46e5;
}

.sgt-input-group {
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-input-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 8px;
    color: #4f46e5;
}

.sgt-modern-input,
.sgt-modern-textarea,
.sgt-modern-select {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.sgt-modern-input:focus,
.sgt-modern-textarea:focus,
.sgt-modern-select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    outline: none;
}

.sgt-modern-textarea {
    min-height: 100px;
    resize: vertical;
}

.sgt-modern-button {
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.sgt-button-primary {
    background: #4f46e5;
    color: white;
}

.sgt-button-primary:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

.sgt-button-secondary {
    background: #f1f5f9;
    color: #64748b;
}

.sgt-button-secondary:hover {
    background: #e2e8f0;
}

.sgt-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.sgt-modern-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.sgt-cliente-result {
    padding: 12px 15px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sgt-cliente-result:hover {
    background-color: #f8fafc;
}

.sgt-cliente-result:last-child {
    border-bottom: none;
}

.sgt-action-icon {
    cursor: pointer;
    color: #4f46e5;
    font-size: 1.2rem;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.sgt-action-icon:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .sgt-modern-form {
        padding: 10px;
    }

    .sgt-form-section {
        padding: 15px;
    }

    .sgt-input-group {
        flex-direction: column;
        align-items: stretch;
    }

    .sgt-input-icon {
        width: 100%;
        height: 30px;
        margin-bottom: 5px;
    }

    .sgt-form-actions {
        flex-direction: column;
    }

    .sgt-modern-button {
        width: 100%;
        justify-content: center;
    }
}

/* Ajustes específicos para columnas de la tabla SAT */
.sgt-averia .sgt-text-ellipsis,
.sgt-reparacion .sgt-text-ellipsis {
    white-space: normal; /* Permite que el texto ocupe varias líneas */
    overflow: visible; /* Muestra todo el contenido */
    text-overflow: clip; /* Elimina los puntos suspensivos */
    max-width: none; /* Elimina cualquier restricción de ancho máximo */
    width: auto; /* Permite que la columna se expanda según el contenido */
}

.sgt-precio {
    width: 1%; /* Hace que la columna ocupe el mínimo espacio necesario */
    white-space: nowrap; /* Mantiene el precio en una sola línea */
}

/* Definición general para sgt-text-ellipsis que se mantiene para otras columnas */
.sgt-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estilos para pantallas de inicio de sesión y acceso denegado */
.sgt-login-required,
.sgt-access-denied {
    max-width: 500px;
    margin: 50px auto;
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sgt-login-required h3,
.sgt-access-denied h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--text-color);
}

.sgt-login-required p,
.sgt-access-denied p {
    margin-bottom: 20px;
    color: var(--text-muted);
}

.sgt-login-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: white !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.sgt-login-button:hover {
    background-color: var(--primary-hover);
    text-decoration: none;
}

.sgt-login-required i,
.sgt-access-denied i {
    margin-right: 8px;
}

.sgt-access-denied h3 i {
    color: var(--danger-color);
}

.sgt-login-required h3 i {
    color: var(--secondary-color);
}

/* Estilos para la edición en línea */
.sgt-inline-edit {
    width: 100%;
    padding: 8px;
    border: 2px solid var(--secondary-color);
    border-radius: var(--radius);
    font-size: 14px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.3);
    transition: var(--transition);
}

.sgt-inline-edit:focus {
    outline: none;
    border-color: var(--secondary-hover);
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
}

textarea.sgt-inline-edit {
    min-height: 80px;
    resize: vertical;
}

.sgt-update-success {
    animation: success-flash 1.5s ease;
}

@keyframes success-flash {
    0% { background-color: transparent; }
    30% { background-color: rgba(76, 175, 80, 0.3); }
    100% { background-color: transparent; }
}

.sgt-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(33, 150, 243, 0.3);
    border-radius: 50%;
    border-top-color: var(--secondary-color);
    animation: spin 1s linear infinite;
    margin: 0 auto;
}


.sgt-table td:not(.sgt-acciones):not(.sgt-estado):hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 150, 243, 0.1);
    pointer-events: none;
}


/* Anular el estilo de layout constrained */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important; /* Anula el valor de max-width */
    width: 100% !important; /* Establece el ancho al 100% */
}

/* Anular específicamente el estilo del tema para el contenedor principal */
.wp-site-blocks > .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
    width: 100% !important;
}

/* Asegurarse de que los contenedores principales también tengan ancho completo */
.wp-site-blocks,
.entry-content,
.wp-block-post-content,
.alignwide,
.alignfull,
.wp-block-group,
.wp-block-cover__inner-container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Estilos para el campo de búsqueda */
.sgt-search-section {
    margin: 1rem 0;
    padding: 0 1rem;
}

.sgt-search-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.sgt-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.sgt-search-input-wrapper:focus-within {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.sgt-search-icon {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
    font-size: 16px;
}

.sgt-search-input {
    width: 100%;
    padding: 12px 40px 12px 45px;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--text-color);
    background: transparent;
}

.sgt-search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.sgt-clear-search-btn {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.sgt-clear-search-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--danger-color);
}

/* Estilos para resultados resaltados */
.sgt-highlight {
    background-color: rgba(255, 255, 0, 0.3);
    padding: 2px;
    border-radius: 2px;
}

/* Estilos responsivos para el campo de búsqueda */
@media (max-width: 768px) {
    .sgt-search-container {
        max-width: 100%;
    }
    
    .sgt-search-input {
        font-size: 14px;
        padding: 10px 40px 10px 40px;
    }
    
    .sgt-search-icon {
        font-size: 14px;
    }
}

/* Estilos para el contador de resultados de búsqueda */
.sgt-search-results-count {
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

@media (max-width: 768px) {
    .sgt-search-results-count {
        font-size: 12px;
    }
}

/* Estilos para el diseño de dos columnas en los formularios */
.sgt-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 100%;
}

@media (max-width: 768px) {
    .sgt-form-grid {
        grid-template-columns: 1fr;
    }
}

.sgt-form-column {
    display: flex;
    flex-direction: column;
}

.sgt-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.sgt-modern-form {
    max-width: 100%;
    margin: 0 auto;
    padding: 15px;
}

.sgt-form-section {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    height: 100%;
}

.sgt-modern-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Validación de campos requeridos */
.sgt-input-group {
    position: relative;
    margin-bottom: 15px;
}

.sgt-input-group::before {
    position: absolute;
    top: 12px;
    right: 10px;
    font-weight: bold;
    z-index: 2;
}

/* Campos requeridos inválidos */
.sgt-input-group:has(input:required:invalid)::before,
.sgt-input-group:has(textarea:required:invalid)::before,
.sgt-input-group:has(select:required:invalid)::before {
    content: "*";
    color: var(--danger-color);
}

.sgt-modern-input:required:invalid,
.sgt-modern-textarea:required:invalid,
.sgt-modern-select:required:invalid {
    border-left: 3px solid var(--danger-color) !important;
}

.sgt-input-group:has(input:required:invalid) .sgt-input-icon,
.sgt-input-group:has(textarea:required:invalid) .sgt-input-icon,
.sgt-input-group:has(select:required:invalid) .sgt-input-icon {
    color: var(--danger-color);
}

/* Campos requeridos válidos - MODIFICADO: eliminado el checkmark ✓ */
.sgt-input-group:has(input:required:valid)::before,
.sgt-input-group:has(textarea:required:valid)::before,
.sgt-input-group:has(select:required:valid)::before {
    content: "";  /* Cambiado de "✓" a vacío para eliminar el checkmark */
    color: var(--primary-color);
}

.sgt-modern-input:required:valid,
.sgt-modern-textarea:required:valid,
.sgt-modern-select:required:valid {
    border-left: 3px solid var(--primary-color) !important;
}

.sgt-input-group:has(input:required:valid) .sgt-input-icon,
.sgt-input-group:has(textarea:required:valid) .sgt-input-icon,
.sgt-input-group:has(select:required:valid) .sgt-input-icon {
    color: var(--primary-color);
}

/* Efecto focus para campos requeridos */
.sgt-modern-input:required:focus,
.sgt-modern-textarea:required:focus,
.sgt-modern-select:required:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
}

/* Mensaje de validación en hover */
.sgt-input-group:has(input:required:invalid):hover::after,
.sgt-input-group:has(textarea:required:invalid):hover::after,
.sgt-input-group:has(select:required:invalid):hover::after {
    content: "Este campo es obligatorio";
    position: absolute;
    top: -30px;
    right: 0;
    background: var(--danger-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
}

/* Animación de shake para campos inválidos al intentar enviar */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

.sgt-validate-shake:invalid {
    animation: shake 0.3s ease-in-out;
    border-color: var(--danger-color) !important;
}

/* Estilos para el checkbox "Ninguno" */
.sgt-input-with-checkbox {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.sgt-checkbox-wrapper {
    display: flex;
    margin-top: 5px;
}

.sgt-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    background-color: #f5f5f5;
    padding: 4px 10px;
    border-radius: 15px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sgt-checkbox-label:hover {
    background-color: #e9e9e9;
    transform: translateY(-1px);
}

.sgt-checkbox {
    margin-right: 5px;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.sgt-checkbox:checked + span {
    color: #007bff;
    font-weight: 500;
}

.sgt-checkbox-label:has(.sgt-checkbox:checked) {
    background-color: #e6f2ff;
    border: 1px solid #b8daff;
    box-shadow: 0 1px 3px rgba(0, 123, 255, 0.2);
}


/* Estilos generales de la tabla */
        .sgt-table-container {
            width: 100%;
            overflow-x: auto;
            margin: 0;
            padding: 0;
        }

        .sgt-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
            font-size: 0.9em;
        }

        .sgt-table th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #444;
        }



        /* Estilos para el header */
        .sgt-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 0;
        }

        /* Estilos para los botones de filtro */
        .sgt-filter-section {
            margin-bottom: 20px;
            padding: 0;
        }

        .sgt-filter-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }



        /* Estilos para los botones de estado */
        .sgt-status-button {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s;
        }

        .sgt-status-button.pendiente {
            background: var(--status-pending-bg) !important;
            color: var(--status-pending-color) !important;
        }

        .sgt-status-button.en_progreso {
            background: #b8daff;
            color: #004085;
        }

        .sgt-status-button.completado {
            background: #c3e6cb;
            color: #155724;
        }

        .sgt-status-button.entregado {
            background: var(--status-delivered-bg);
            color: var(--status-delivered-color);
        }

        /* Estilos para los botones de acción */
        .sgt-action-buttons {
            display: flex;
            gap: 4px; /* Reducido de gap por defecto */
            justify-content: center;
        }

        .sgt-btn {
            padding: 4px 6px; /* Reducido el padding */
            font-size: 12px; /* Reducido el tamaño de fuente */
            border-radius: 4px;
            min-width: auto; /* Eliminar ancho mínimo */
        }

        /* Animación de resaltado */
        @keyframes highlightRow {
            0% { 
                background-color: transparent;
            }
            20% { 
                background-color: rgba(255, 255, 0, 0.3);
            }
            80% { 
                background-color: rgba(255, 255, 0, 0.3);
            }
            100% { 
                background-color: transparent;
            }
        }

        .sgt-table tr.highlight-update {
            animation: highlightRow 2s ease-in-out;
        }

        /* Estilos para los iconos */
        .sgt-icon {
            cursor: pointer;
            color: #6c757d;
            transition: color 0.2s;
        }

        .sgt-icon:hover {
            color: #007bff;
        }

        /* Estilos para campos requeridos - solo cuando están vacíos (inválidos) */
        .sgt-modern-input:required:invalid,
        .sgt-modern-textarea:required:invalid,
        .sgt-modern-select:required:invalid {
            border-left: 3px solid #dc3545 !important;
        }

        /* Cuando los campos requeridos son válidos (tienen contenido) */
        .sgt-modern-input:required:valid,
        .sgt-modern-textarea:required:valid,
        .sgt-modern-select:required:valid {
            border-left: 3px solid #28a745 !important; /* Borde verde para indicar éxito */
        }

        /* Cambiar color del icono solo cuando el campo es inválido */
        .sgt-input-group:has(input:required:invalid) .sgt-input-icon,
        .sgt-input-group:has(textarea:required:invalid) .sgt-input-icon, 
        .sgt-input-group:has(select:required:invalid) .sgt-input-icon {
            color: #dc3545;
        }

        /* Cambiar color del icono cuando el campo es válido */
        .sgt-input-group:has(input:required:valid) .sgt-input-icon,
        .sgt-input-group:has(textarea:required:valid) .sgt-input-icon,
        .sgt-input-group:has(select:required:valid) .sgt-input-icon {
            color: #28a745;
        }

        /* Asterisco rojo solo para campos inválidos */
        .sgt-input-group:has(input:required:invalid)::before,
        .sgt-input-group:has(textarea:required:invalid)::before,
        .sgt-input-group:has(select:required:invalid)::before {
            content: "*";
            color: #dc3545;
            position: absolute;
            top: 8px;
            right: 10px;
            font-weight: bold;
        }

        /* No mostrar checkmark para campos válidos - MODIFICADO */
        .sgt-input-group:has(input:required:valid)::before,
        .sgt-input-group:has(textarea:required:valid)::before,
        .sgt-input-group:has(select:required:valid)::before {
            content: "";  /* Cambiado de "✓" a vacío para eliminar el checkmark */
            color: #28a745;
            position: absolute;
            top: 8px;
            right: 10px;
        }

        .sgt-input-group {
            position: relative;
        }

        /* Estilos específicos para el modal en dos columnas */
        .swal2-popup.sgt-modal-popup {
            width: 80%;
            max-width: 1000px;
            padding: 1.5rem;
        }

        .sgt-edit-form .sgt-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .sgt-edit-form .sgt-form-column {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .sgt-edit-form .sgt-form-section {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .sgt-edit-form .sgt-modern-textarea {
            min-height: 120px;
            resize: vertical;
        }

        /* Diseño responsivo para tabla en dispositivos móviles */
        @media (max-width: 767px) {
            /* Estilos para la tabla como tarjetas */
            .sgt-table, .sgt-table tbody, .sgt-table tr {
                display: block;
                width: 100%;
            }
            
            /* Ocultar cabeceras de tabla */
            .sgt-table thead {
                display: none;
            }
            
            /* Convertir cada fila en una tarjeta */
            .sgt-table tr {
                margin-bottom: 20px;
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.1);
                position: relative;
                overflow: hidden;
            }
            
            /* Añadir indicador de estado en la parte superior de la tarjeta */
            .sgt-table tr::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 6px;
            }
            
            .sgt-table tr[data-status="pendiente"]::before {
                background-color: #ffc107;
            }
            
            .sgt-table tr[data-status="en_progreso"]::before {
                background-color: #007bff;
            }
            
            .sgt-table tr[data-status="completado"]::before {
                background-color: #28a745;
            }
            
            .sgt-table tr[data-status="entregado"]::before {
                background-color: var(--status-delivered-bg);
            }
            
            /* Estilo para cada celda */
            .sgt-table td {
                display: flex;
                padding: 10px 15px;
                text-align: left;
                border-bottom: 1px solid #f0f0f0;
                white-space: normal;
            }
            
            /* Añadir etiquetas a cada celda */
            .sgt-table td::before {
                content: attr(data-label);
                width: 120px;
                font-weight: bold;
                color: #6c757d;
                margin-right: 10px;
                flex-shrink: 0;
            }
            
            /* Contenido de la celda */
            .sgt-table td > * {
                flex: 1;
                word-wrap: break-word;
                overflow-wrap: break-word;
                line-height: 1.4;
            }
            
            /* Estilos específicos para campos que necesitan mejor formato */
            .sgt-table td.sgt-telefono,
            .sgt-table td.sgt-marca-modelo {
                align-items: flex-start;
            }

            .sgt-table td.sgt-marca-modelo {
                max-width: 120px;
                white-space: normal !important;
            }

            .sgt-table td.sgt-telefono > *,
            .sgt-table td.sgt-marca-modelo > * {
                white-space: normal;
                word-break: break-word;
                overflow-wrap: break-word;
            }
            
            /* Estilo para la primera fila (ID y Cliente) */
            .sgt-table td.sgt-id {
                font-weight: bold;
                font-size: 1.1em;
                background-color: #f8f9fa;
                border-radius: 8px 8px 0 0;
                margin-top: 6px; /* Espacio para el indicador de estado */
            }
            
            /* Estilo especial para los textos con ellipsis */
            .sgt-table .sgt-text-ellipsis {
                max-width: none;
                overflow: visible;
                text-overflow: clip;
                white-space: normal;
            }
            
            /* Estilos para los botones de estado y acciones */
            .sgt-table .sgt-estado,
            .sgt-table .sgt-acciones {
                justify-content: flex-start;
                padding: 15px;
                border-bottom: none;
            }
            
            /* Hacer los botones más grandes para facilitar el toque */
            .sgt-table .sgt-btn,
            .sgt-table .sgt-status-button {
                padding: 10px 15px;
                margin-right: 10px;
                font-size: 1em;
            }
            
            /* Asegurar que los botones de acción sean visibles */
            .sgt-table .sgt-action-buttons {
                width: 100%;
                justify-content: flex-start;
            }
            
            /* Botones especiales */
            .sgt-table .sgt-btn {
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            /* Ajustar el botón de WhatsApp y ver detalles */
            .sgt-table .sgt-icon {
                font-size: 1.2em;
                margin-right: 10px;
            }
            
            /* Estilos para la sección de cliente */
            .sgt-table .sgt-cliente {
                display: flex;
                flex-direction: column;
                padding-top: 15px;
            }
            
            .sgt-table .sgt-cliente-info {
                display: flex;
                flex-direction: column;
            }
            
            .sgt-table .sgt-cliente-actions {
                display: flex;
                margin-top: 10px;
            }
        }

        /* Responsive generales */
        @media (max-width: 1200px) {
            .sgt-text-ellipsis {
                max-width: 150px;
            }
        }

        @media (max-width: 992px) {
            .sgt-text-ellipsis {
                max-width: 120px;
            }
        }

        @media (max-width: 768px) {
            .sgt-edit-form .sgt-form-grid {
                grid-template-columns: 1fr;
            }
            
            .swal2-popup.sgt-modal-popup {
                width: 95%;
                padding: 1rem;
            }
            
            /* Ajustes para botones de filtro */
            .sgt-filter-buttons {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 10px;
                -webkit-overflow-scrolling: touch;
            }
            
            .sgt-filter-btn {
                flex: 0 0 auto;
                white-space: nowrap;
                padding: 8px 12px !important;
                font-size: 12px !important;
                border-radius: 8px !important;
                gap: 6px !important;
            }
            
            .sgt-filter-btn i {
                padding: 4px !important;
                font-size: 0.9rem !important;
            }
            
            .sgt-filter-btn .sgt-count {
                padding: 2px 6px !important;
                font-size: 0.75rem !important;
                min-width: 20px !important;
            }
            
            .sgt-pedidos-tienda-button {
                padding: 10px 16px !important;
                font-size: 12px !important;
                border-radius: 8px !important;
                gap: 6px !important;
            }
            
            .sgt-pedidos-tienda-button i {
                padding: 4px !important;
                font-size: 14px !important;
            }
            
            /* Ajuste para cabecera responsiva */
            .sgt-header {
                flex-direction: column;
                align-items: stretch;
            }
            
            .sgt-header h2 {
                margin-bottom: 15px;
            }
            
            .sgt-actions {
                display: flex;
                justify-content: flex-start;
            }
        }

        /* Añadir !important para forzar los colores */
        .sgt-has-acc {
            color: #28a745 !important;
        }

        .sgt-no-acc {
            color: #dc3545 !important;
        }

        /* Quitar el hover de la columna ACC */
        .sgt-acc-indicator {
            cursor: default;
        }

        .sgt-acc-indicator:hover {
            background-color: transparent;
            transform: none;
        }

/* Estilos específicos para la sección de clientes */
.sgt-new-cliente-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: var(--primary-red);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    z-index: 1;
}

.sgt-new-cliente-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: var(--transition-smooth);
    z-index: -1;
}

.sgt-new-cliente-button:hover {
    background-color: var(--primary-red-dark);
    box-shadow: var(--shadow-strong);
    transform: translateY(-2px);
}

.sgt-new-cliente-button:hover::before {
    left: 100%;
}

.sgt-new-cliente-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-soft);
}

.sgt-new-cliente-button i {
    margin-right: 8px;
    font-size: 16px;
    transition: var(--transition-smooth);
}

.sgt-new-cliente-button:hover i {
    transform: rotate(90deg);
}

/* Estilos responsive para la tabla de clientes */
@media (max-width: 767px) {
    #sgt-table-clientes, 
    #sgt-table-clientes tbody, 
    #sgt-table-clientes tr {
        display: block;
        width: 100%;
    }
    
    #sgt-table-clientes thead {
        display: none;
    }
    
    #sgt-table-clientes tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        box-shadow: var(--shadow);
        position: relative;
        padding: 10px;
        background-color: white;
    }
    
    #sgt-table-clientes td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border: none;
        border-bottom: 1px solid var(--border-color);
        text-align: right;
        position: relative;
    }
    
    #sgt-table-clientes td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        margin-right: 10px;
        flex: 1;
        color: var(--text-muted);
    }
    
    #sgt-table-clientes td.sgt-id {
        background-color: var(--light-bg);
        font-weight: bold;
        border-radius: 4px 4px 0 0;
    }
    
    #sgt-table-clientes .sgt-acciones {
        border-bottom: none;
        justify-content: center;
    }
    
    #sgt-table-clientes .sgt-btn {
        margin: 5px;
        padding: 8px 15px;
    }
    
    #sgt-table-clientes .sgt-action-buttons {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    #sgt-table-clientes .sgt-icon {
        font-size: 18px;
        margin-right: 5px;
    }
}

/* Estilos para las fechas en la tabla */
.sgt-fechas {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sgt-fecha-entrada,
.sgt-fecha-salida {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    flex-wrap: wrap;
}

.sgt-fecha-entrada .sgt-fecha-content,
.sgt-fecha-salida .sgt-fecha-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}

.sgt-fecha-entrada small,
.sgt-fecha-salida small {
    color: #666;
    font-size: 0.85em;
    font-weight: 500;
    opacity: 1;
}

.sgt-tiempo-transcurrido {
    font-size: 0.85em;
    color: #666;
    margin-top: 2px;
}

.sgt-tiempo-transcurrido i {
    color: #888;
    margin-right: 4px;
}

@media screen and (max-width: 768px) {
    .sgt-fechas {
        gap: 2px;
    }
    
    .sgt-fecha-entrada,
    .sgt-fecha-salida {
        font-size: 0.85em;
    }
    
    .sgt-fecha-entrada small,
    .sgt-fecha-salida small {
        font-size: 0.8em;
    }
    
    .sgt-tiempo-transcurrido {
        font-size: 0.8em;
    }
}

/* Estado aparcado */
.sgt-status-button.aparcado {
    background-color: #9e9e9e;
    color: white;
    opacity: 0.8;
}

.sgt-status-button.aparcado:hover {
    background-color: #9e9e9e;
    opacity: 0.8;
    cursor: not-allowed;
}

/* Ocultar filas aparcadas por defecto */
.sgt-row[data-status="aparcado"] {
    display: none;
    background-color: #f5f5f5;
}

/* Mostrar filas aparcadas solo cuando se selecciona específicamente */
.show-aparcados .sgt-row[data-status="aparcado"] {
    display: table-row;
}

/* Estilo especial para la fila aparcada cuando se muestra */
.sgt-row[data-status="aparcado"] td {
    color: #666;
}

/* Estilos para la columna ACC */
.sgt-acc-indicator {
    min-width: 120px !important;
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
}

.sgt-acc-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    pointer-events: none !important;
}

.sgt-acc-text {
    font-size: 0.9em !important;
    color: var(--text-color) !important;
    line-height: 1.4 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.sgt-has-acc {
    color: #28a745 !important;
    font-size: 1.1em !important;
    pointer-events: none !important;
}

.sgt-no-acc {
    color: #dc3545 !important;
    font-size: 1.1em !important;
    pointer-events: none !important;
}

/* Prevenir cualquier interacción con la columna ACC */
.sgt-table td.sgt-acc-indicator,
.sgt-table td.sgt-acc-indicator * {
    pointer-events: none !important;
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.sgt-table td.sgt-acc-indicator:hover,
.sgt-table td.sgt-acc-indicator:active,
.sgt-table td.sgt-acc-indicator:focus {
    background-color: transparent !important;
    outline: none !important;
}

/* Estilos para los elementos de actualización automática */
.refresh-controls {
    display: flex;
    align-items: center;
    margin: 10px 0;
    position: absolute;
    right: 20px;
    top: 10px; /* Ajustar posición superior */
    transform: none; /* Eliminar transformación */
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#refresh-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#refresh-button:hover {
    background-color: #388E3C;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

#refresh-button.refreshing {
    pointer-events: none;
    opacity: 0.7;
}

#refresh-button.refreshing i {
    animation: spin 1s linear infinite;
}

.auto-refresh-toggle {
    display: flex;
    align-items: center;
    margin-left: 15px;
    cursor: pointer;
    user-select: none;
    color: #333;
    font-size: 14px;
    background: #f0f0f0;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.auto-refresh-toggle:hover {
    background: #e0e0e0;
    border-color: #ccc;
}

.auto-refresh-toggle input {
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Estilo para resaltar las filas actualizadas */
.highlight-update {
    animation: highlight-animation 2s ease-in-out;
}

@keyframes highlight-animation {
    0% { background-color: rgba(76, 175, 80, 0.2); }
    50% { background-color: rgba(76, 175, 80, 0.7); }
    100% { background-color: transparent; }
}

.sgt-new-producto-button,
.sgt-new-venta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    background: var(--primary-red);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    z-index: 1;
}

.sgt-new-producto-button::before,
.sgt-new-venta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: var(--transition-smooth);
    z-index: -1;
}

.sgt-new-producto-button:hover,
.sgt-new-venta-button:hover {
    background: var(--primary-red-dark);
    box-shadow: var(--shadow-strong);
    transform: translateY(-2px);
}

.sgt-new-producto-button:hover::before,
.sgt-new-venta-button:hover::before {
    left: 100%;
}

.sgt-new-producto-button:active,
.sgt-new-venta-button:active {
    transform: translateY(0);
}

.sgt-new-producto-button i,
.sgt-new-venta-button i {
    margin-right: 8px;
    font-size: 16px;
    transition: var(--transition-smooth);
}

.sgt-new-producto-button:hover i,
.sgt-new-venta-button:hover i {
    transform: rotate(90deg);
}

/* Indicador para el botón activo - Regla reforzada para mayor especificidad */
body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60% !important; /* Aumentado de 40% a 60% */
    height: 4px !important; /* Aumentado de 3px a 4px */
    background-color: currentColor !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.3) !important; /* Añadido sombra para mejor visibilidad */
}

/* Mejorando el sombreado del botón activo para mayor visibilidad */
body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn.active {
    box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
    transform: translateY(-3px) !important; /* Aumentado de -2px a -3px */
    position: relative !important;
    font-weight: 700 !important; /* Aumentado a negrita para mejor visibilidad */
    border: 2px solid rgba(0, 0, 0, 0.2) !important; /* Borde más oscuro */
    filter: brightness(0.9) !important; /* Un poco más oscuro para mejor contraste */
}

/* Colores específicos para los indicadores de cada tipo de botón de filtro - Versión mejorada */
body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="aparcado"].active::after {
    background-color: #495057 !important; /* Color más oscuro para mejor contraste */
    height: 5px !important; /* Un poco más gruesa */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="completado"].active::after {
    background-color: #0d6e31 !important; /* Verde oscuro para mejor contraste */
    height: 5px !important; /* Más grosor para mayor visibilidad */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; /* Sombra más oscura */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="entregado"].active::after {
    background-color: #212529 !important; /* Negro/gris muy oscuro para mejor contraste */
    height: 5px !important; /* Más grosor para mayor visibilidad */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; /* Sombra más oscura */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="todos"].active::after {
    background-color: #212529 !important; /* Negro/gris muy oscuro para mejor contraste */
    height: 5px !important; /* Más grosor para mayor visibilidad */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; /* Sombra más oscura */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="pendiente"].active::after {
    background-color: var(--status-pending-color) !important;
    height: 5px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="en_progreso"].active::after {
    background-color: var(--status-progress-color) !important;
    height: 5px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ajuste específico para botones con fondos claros */
body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="pendiente"].active {
    border-color: rgba(220, 53, 69, 0.6) !important; /* Borde más visible y relacionado con el color rojo */
}

body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="en_progreso"].active {
    border-color: rgba(0, 64, 133, 0.6) !important; /* Borde más visible y relacionado con el color */
}

/* Ajuste específico para botones con fondos oscuros */
body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="completado"].active {
    filter: brightness(0.85) !important; /* Más oscuro para mejor contraste con la línea */
    border-color: rgba(255, 255, 255, 0.4) !important; /* Borde claro para botones oscuros */
}

body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="entregado"].active {
    filter: brightness(0.85) !important; /* Más oscuro para mejor contraste con la línea */
    border-color: rgba(255, 255, 255, 0.4) !important; /* Borde claro para botones oscuros */
}

body #sgt-panel .sgt-dashboard .sgt-filter-section .sgt-filter-buttons .sgt-filter-btn[data-filter="todos"].active {
    filter: brightness(0.85) !important; /* Más oscuro para mejor contraste con la línea */
    border-color: rgba(255, 255, 255, 0.4) !important; /* Borde claro para botones oscuros */
}

/* Fix para indicadores de filtros - Reglas adicionales con selectores más simples */
.sgt-filter-btn[data-filter="completado"].active::after {
    background-color: #0d6e31 !important;
    height: 5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.sgt-filter-btn[data-filter="entregado"].active::after {
    background-color: #212529 !important;
    height: 5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.sgt-filter-btn[data-filter="todos"].active::after {
    background-color: #212529 !important;
    height: 5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    display: none !important;
}

#wpadminbar {
    display: none !important;
}

html {
    margin-top: 0 !important;
}

/* Estilos específicos para el botón Nuevo Pedido */
.sgt-new-pedido-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sgt-new-pedido-button:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.sgt-new-pedido-button i {
    font-size: 16px;
}

/* Estilos para el modal de pedidos */
.sgt-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 20px;
    overflow: auto;
}

.sgt-modal-content {
    background-color: #fff;
    margin: 50px auto;
    padding: 20px;
    border-radius: 8px;
    max-width: 800px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    animation: modalFadeIn 0.3s ease-in-out;
}

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

.sgt-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
}

.sgt-close:hover {
    color: #333;
}


.sgt-form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    gap: 20px;
}

.sgt-form-group {
    flex: 1;
    min-width: 200px;
    margin-bottom: 15px;
}

.sgt-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.sgt-form-group input,
.sgt-form-group select,
.sgt-form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.sgt-form-group input:focus,
.sgt-form-group select:focus,
.sgt-form-group textarea:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.sgt-cliente-search-container {
    position: relative;
}

.sgt-cliente-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.sgt-clientes-results {
    display: none;
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.sgt-cliente-result {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.sgt-cliente-result:hover {
    background-color: #f5f5f5;
}

.sgt-cliente-info-display {
    margin-top: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border-left: 3px solid #4CAF50;
}

.sgt-selected-cliente {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.sgt-submit-btn,
.sgt-cancel-btn {
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.sgt-submit-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
}

.sgt-submit-btn:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.sgt-cancel-btn {
    background-color: #6c757d;
    color: white;
}

.sgt-cancel-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

/* Estilo para cuando no hay datos */
.sgt-no-data {
    color: #999;
    font-style: italic;
}

/* Estilos específicos para el modal de pedidos */
.sgt-pedido-modal-container {
    z-index: 1060 !important;
}

.sgt-pedido-modal-popup {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
    max-width: 400px !important;
    padding: 0 !important;
}

.sgt-pedido-modal-header {
    border-bottom: 1px solid #eee !important;
    padding: 16px !important;
}

.sgt-pedido-modal-title {
    font-size: 1.5rem !important;
    text-align: center !important;
    color: #333 !important;
}

.sgt-pedido-modal-content {
    padding: 20px !important;
}

.sgt-pedido-form-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.sgt-pedido-input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.sgt-pedido-input-icon {
    position: absolute !important;
    left: 12px !important;
    color: #666 !important;
    font-size: 16px !important;
    z-index: 1 !important;
}

.sgt-pedido-modern-input {
    width: 100% !important;
    padding: 12px 12px 12px 40px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background: #f8f9fa !important;
}

.sgt-pedido-modern-input:focus {
    outline: none !important;
    border-color: #2196F3 !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
    background: #fff !important;
}

.sgt-pedido-btn {
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.sgt-pedido-btn i {
    font-size: 16px !important;
}

.sgt-pedido-btn-primary {
    background: #2196F3 !important;
    color: white !important;
}

.sgt-pedido-btn-primary:hover {
    background: #1976D2 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2) !important;
}

.sgt-pedido-btn-secondary {
    background: #f8f9fa !important;
    color: #666 !important;
    border: 1px solid #ddd !important;
}

.sgt-pedido-btn-secondary:hover {
    background: #e9ecef !important;
    color: #333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* Estilos para campos requeridos */
.sgt-pedido-modern-input:required {
    border-left: 3px solid #2196F3 !important;
}

.sgt-pedido-modern-input:required:invalid {
    border-left: 3px solid #f44336 !important;
}

.sgt-pedido-modern-input:required:valid {
    border-left: 3px solid #4CAF50 !important;
}

/* Responsive */
@media (max-width: 480px) {
    .sgt-pedido-modal-popup {
        margin: 10px !important;
        width: calc(100% - 20px) !important;
    }
    
    .sgt-pedido-btn {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
}

/* Estilos para el contenedor de resultados de búsqueda de clientes */
.sgt-pedido-no-results {
    padding: 20px !important;
    text-align: center !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    margin: 10px 0 !important;
    border: 1px solid #eee !important;
}

.sgt-pedido-no-results p {
    color: #666 !important;
    margin-bottom: 15px !important;
    font-size: 14px !important;
}

.sgt-pedido-nuevo-cliente-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: #2196F3 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.sgt-pedido-nuevo-cliente-btn:hover {
    background: #1976D2 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2) !important;
}

.sgt-pedido-nuevo-cliente-btn i {
    font-size: 16px !important;
}

/* ===== CONTADORES UNIFICADOS ===== */
/* Clase base para todos los contadores - TODOS usan el mismo diseño y efecto */
.pedido-count,
.sgt-pedidos-tienda-counter,
.tarea-count,
.mantenimiento-count,
.sgt-almacen-counter {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
    z-index: 15;
}

/* Cuando tienen contenido (clase has-count) - aparecen con animación de pulso */
.pedido-count.has-count,
.sgt-pedidos-tienda-counter,
.tarea-count.has-count,
.mantenimiento-count.has-count {
    opacity: 1;
    transform: scale(1);
    animation: pulse-alert 2s infinite;
}

/* Contadores en el menú con mayor z-index */
.sgt-menu-btn .pedido-count,
.sgt-menu-btn-left .pedido-count,
.sgt-menu-btn[data-section="tareas"] .tarea-count,
.sgt-menu-btn[data-section="mantenimientos"] .mantenimiento-count,
.sgt-menu-btn-right .sgt-pedidos-tienda-counter {
    z-index: 25;
}

/* Animación de pulso para todos los contadores */
@keyframes pulse-alert {
    0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 71, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
}

/* Efectos hover y active para todos los contadores */
.sgt-menu-btn:hover .pedido-count,
.sgt-menu-btn:hover .tarea-count,
.sgt-menu-btn:hover .mantenimiento-count,
.sgt-menu-btn:hover .sgt-almacen-counter,
.sgt-menu-btn-right:hover .sgt-pedidos-tienda-counter {
    transform: translateY(-1px) scale(1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.sgt-menu-btn:active .pedido-count,
.sgt-menu-btn:active .tarea-count,
.sgt-menu-btn:active .mantenimiento-count,
.sgt-menu-btn:active .sgt-almacen-counter,
.sgt-menu-btn-right:active .sgt-pedidos-tienda-counter {
    transform: translateY(0) scale(1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Badges minimalistas de tareas por usuario en el botón del menú */
/* ====== BADGES ESPECTACULARES DE TAREAS ====== */
.sgt-menu-btn[data-section="tareas"] {
    position: relative;
    padding-right: 4rem;
    overflow: visible;
}

.sgt-menu-btn[data-section="tareas"] .tareas-badges {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    z-index: 15;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.sgt-menu-btn[data-section="tareas"] .tarea-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    padding: 0;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: 
        0 0 20px rgba(255,255,255,0.3),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* Efecto brillante animado */
.sgt-menu-btn[data-section="tareas"] .tarea-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: rotate(45deg) translateX(-200%);
    transition: transform 0.6s ease-in-out;
    pointer-events: none;
}

/* Glow exterior */
.sgt-menu-btn[data-section="tareas"] .tarea-badge::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: inherit;
    z-index: -1;
    filter: blur(4px);
    opacity: 0.7;
}

/* Colores coherentes con el diseño Mediafix */
.sgt-menu-btn[data-section="tareas"] .tarea-badge.badge-leo { 
    background: linear-gradient(135deg, #dd3333 0%, #cc2222 50%, #bb2222 100%);
    box-shadow: 
        0 0 20px rgba(221, 51, 51, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 4px 15px rgba(221, 51, 51, 0.3);
}

.sgt-menu-btn[data-section="tareas"] .tarea-badge.badge-ana { 
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 50%, #388e3c 100%);
    box-shadow: 
        0 0 20px rgba(76, 175, 80, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 4px 15px rgba(76, 175, 80, 0.3);
}

.sgt-menu-btn[data-section="tareas"] .tarea-badge.badge-adri { 
    background: linear-gradient(135deg, #2196F3 0%, #0b7dda 50%, #1565c0 100%);
    box-shadow: 
        0 0 20px rgba(33, 150, 243, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 4px 15px rgba(33, 150, 243, 0.3);
}

/* Animaciones al hover del botón padre */
.sgt-menu-btn[data-section="tareas"]:hover .tarea-badge {
    transform: scale(1.15) rotate(5deg);
    animation: pulseGlow 2s ease-in-out infinite alternate;
}

.sgt-menu-btn[data-section="tareas"]:hover .tarea-badge::before {
    transform: rotate(45deg) translateX(200%);
}

/* Animación de pulso y brillo */
@keyframes pulseGlow {
    0% { 
        box-shadow: 
            0 0 20px rgba(255,255,255,0.3),
            inset 0 1px 0 rgba(255,255,255,0.6),
            inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    100% { 
        box-shadow: 
            0 0 30px rgba(255,255,255,0.6),
            inset 0 1px 0 rgba(255,255,255,0.8),
            inset 0 -1px 0 rgba(0,0,0,0.2),
            0 0 40px currentColor;
    }
}

/* Efecto especial cuando hay tareas (número > 0) */
.sgt-menu-btn[data-section="tareas"] .tarea-badge:not(:empty) {
    animation: jewelShine 3s ease-in-out infinite;
}

@keyframes jewelShine {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.05) rotate(2deg); }
}

/* Responsive - Badges espectaculares en móvil */
@media (max-width: 768px) {
    .sgt-menu-btn[data-section="tareas"] {
        padding-right: 3.5rem;
    }
    
    .sgt-menu-btn[data-section="tareas"] .tareas-badges {
        right: 25px;
        gap: 2px;
        filter: drop-shadow(0 1px 6px rgba(0,0,0,0.4));
    }
    
    .sgt-menu-btn[data-section="tareas"] .tarea-badge {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        font-weight: 600;
        border: 1.5px solid rgba(255,255,255,0.4);
    }
    
    /* Reducir intensidad de efectos en móvil para mejor rendimiento */
    .sgt-menu-btn[data-section="tareas"] .tarea-badge::after {
        filter: blur(2px);
    }
    
    .sgt-menu-btn[data-section="tareas"]:hover .tarea-badge {
        transform: scale(1.1) rotate(3deg);
    }
}

/* Ajuste para que la descripción en tablas se muestre en múltiples líneas */
.sgt-table td.sgt-descripcion {
    white-space: pre-line !important; /* Cambiado de 'normal' a 'pre-line' para respetar saltos de línea */
    word-break: break-word !important; /* Permite que palabras largas se rompan y pasen a la siguiente línea */
    /* Si se desea un ancho máximo específico para esta columna, se puede añadir aquí: */
    /* max-width: 300px; */
}

/* Prevenir scroll del body cuando el menú móvil está abierto */
body.menu-open {
    overflow: hidden;
}

/* Mejorar la experiencia táctil en móviles */
@media (max-width: 768px) {
    /* Asegurar que el contenido no se superponga con el botón hamburguesa */
    #sgt-content {
        padding-top: 80px;
    }
    
    /* Mejorar el área táctil de los botones del menú */
    .sgt-menu-btn {
        min-height: 50px;
        touch-action: manipulation;
    }
    
    /* Añadir separación visual entre botones */
    .sgt-menu-btn:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Animaciones suaves para el menú */
#sgt-menu {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mejorar la accesibilidad del botón hamburguesa */
.sgt-mobile-menu-toggle:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Asegurar que el menú se vea bien en pantallas muy pequeñas */
@media (max-width: 480px) {
    #sgt-menu {
        width: 100vw;
        left: -100vw;
    }
    
    #sgt-menu.active::before {
        display: none;
    }
    
    .sgt-mobile-menu-toggle {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        z-index: 957;
    }
    
    .hamburger-line {
        width: 22px;
    }
}

/* Estilos para tablets y pantallas medianas */
@media (max-width: 1024px) and (min-width: 769px) {
    #sgt-menu {
        padding: 0.6rem 1.5rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .sgt-menu-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .sgt-menu-btn i {
        font-size: 1rem;
        padding: 4px;
        margin-right: 6px;
    }
}


/* Desplegable para móviles */
.sgt-filter-dropdown {
    display: none;
    position: relative;
    width: 100%;
}

.sgt-filter-dropdown-toggle {
    width: 100%;
    padding: 12px 16px;
    background: #444444;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sgt-filter-dropdown-toggle:hover {
    background: #333333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.sgt-filter-dropdown-toggle i {
    transition: transform 0.3s ease;
}

.sgt-filter-dropdown.open .sgt-filter-dropdown-toggle i {
    transform: rotate(180deg);
}

/* Debug temporal - quitar después de verificar */
.sgt-filter-dropdown.open .sgt-filter-dropdown-toggle {
    background: #FF6B6B !important; /* Color rojo para debug */
    border: 2px solid #FFD93D !important; /* Borde amarillo para debug */
}

.sgt-filter-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden;
}

.sgt-filter-dropdown.open .sgt-filter-dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
}

.sgt-filter-dropdown-item {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease;
    font-size: 14px;
    min-height: 44px; /* Para mejor accesibilidad táctil en móviles */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sgt-filter-dropdown-item:last-child {
    border-bottom: none;
}

.sgt-filter-dropdown-item:hover {
    background-color: #f5f5f5;
}

.sgt-filter-dropdown-item.active {
    background-color: #e3f2fd;
    color: #1976d2 !important; /* Forzar color azul para elementos activos */
    font-weight: 600;
}

.sgt-filter-dropdown-item i {
    width: 20px;
    text-align: center;
}

.sgt-filter-dropdown-item .sgt-count {
    margin-left: auto;
    background: rgba(0,0,0,0.1);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
}

.sgt-filter-dropdown-item.active .sgt-count {
    background: rgba(25, 118, 210, 0.2);
    color: #1976d2;
}

/* Responsive - Mostrar desplegable en móviles */
@media (max-width: 768px) {
    .sgt-filter-section {
        padding: 1rem;
    }
    
    .sgt-filter-buttons {
        display: none;
    }
    
    .sgt-filter-dropdown {
        display: block;
    }
}

/* Colores específicos para los elementos del desplegable */
.sgt-filter-dropdown-item[data-filter="todos"] {
    color: #444444;
}

.sgt-filter-dropdown-item[data-filter="pendiente"] {
    color: #856404; /* Amarillo oscuro */
}

.sgt-filter-dropdown-item[data-filter="en_progreso"] {
    color: #004085; /* Azul oscuro */
}

.sgt-filter-dropdown-item[data-filter="completado"] {
    color: #155724; /* Verde oscuro para mejor visibilidad */
}

.sgt-filter-dropdown-item[data-filter="entregado"] {
    color: #495057; /* Gris oscuro para mejor visibilidad */
}

.sgt-filter-dropdown-item[data-filter="aparcado"] {
    color: #6c757d; /* Gris medio */
}

.sgt-filter-dropdown-item[data-filter="en_camino"] {
    color: #e65100; /* Naranja oscuro */
}

.sgt-filter-dropdown-item[data-filter="en_tienda"] {
    color: #6a1b9a; /* Morado oscuro */
}

/* Colores para el botón desplegable según el filtro activo - Mejorados */
.sgt-filter-dropdown-toggle[data-active-filter="todos"] {
    background: #444444 !important;
    color: white !important;
}

.sgt-filter-dropdown-toggle[data-active-filter="pendiente"] {
    background: #ffc107 !important; /* Amarillo más visible */
    color: #212529 !important; /* Texto oscuro para contraste */
}

.sgt-filter-dropdown-toggle[data-active-filter="en_progreso"] {
    background: #007bff !important; /* Azul más visible */
    color: white !important;
}

.sgt-filter-dropdown-toggle[data-active-filter="completado"] {
    background: #28a745 !important; /* Verde más visible */
    color: white !important;
}

.sgt-filter-dropdown-toggle[data-active-filter="entregado"] {
    background: #6c757d !important; /* Gris más visible */
    color: white !important;
}

.sgt-filter-dropdown-toggle[data-active-filter="aparcado"] {
    background: #adb5bd !important; /* Gris claro */
    color: #212529 !important; /* Texto oscuro para contraste */
}

.sgt-filter-dropdown-toggle[data-active-filter="en_camino"] {
    background: #ff9800 !important;
    color: white !important;
}

.sgt-filter-dropdown-toggle[data-active-filter="en_tienda"] {
    background: #9c27b0 !important;
    color: white !important;
}

/* Animación suave para el desplegable */
.sgt-filter-dropdown-menu {
    transform: translateY(-10px);
    opacity: 0;
}

.sgt-filter-dropdown.open .sgt-filter-dropdown-menu {
    transform: translateY(0);
    opacity: 1;
}

/* Mejorar la visibilidad del contador en el botón desplegable */
.sgt-current-filter .sgt-count {
    background: rgba(255, 255, 255, 0.3) !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    margin-left: 8px !important;
    min-width: 24px !important;
    text-align: center !important;
    display: inline-block !important;
}

/* Colores específicos para elementos activos del desplegable */
.sgt-filter-dropdown-item.active[data-filter="todos"] {
    background-color: #f5f5f5;
    color: #444444 !important;
}

.sgt-filter-dropdown-item.active[data-filter="pendiente"] {
    background-color: #ffebee;
    color: #dc3545 !important;
}

.sgt-filter-dropdown-item.active[data-filter="en_progreso"] {
    background-color: #cce5ff;
    color: #004085 !important;
}

.sgt-filter-dropdown-item.active[data-filter="completado"] {
    background-color: #d4edda;
    color: #155724 !important;
}

.sgt-filter-dropdown-item.active[data-filter="entregado"] {
    background-color: #e2e3e5;
    color: #495057 !important;
}

.sgt-filter-dropdown-item.active[data-filter="aparcado"] {
    background-color: #f8f9fa;
    color: #6c757d !important;
}

.sgt-filter-dropdown-item.active[data-filter="en_camino"] {
    background-color: #fff3e0;
    color: #e65100 !important;
}

.sgt-filter-dropdown-item.active[data-filter="en_tienda"] {
    background-color: #f3e5f5;
    color: #6a1b9a !important;
}

.sgt-filter-dropdown-item[data-filter="completada"] {
    color: #2e7d32 !important;
}

.sgt-filter-dropdown-item[data-filter="alta_prioridad"] {
    color: #c62828 !important;
}

.sgt-filter-dropdown-toggle[data-active-filter="completada"] {
    background-color: #e8f5e8;
    color: #2e7d32 !important;
}

.sgt-filter-dropdown-toggle[data-active-filter="alta_prioridad"] {
    background-color: #ffebee;
    color: #c62828 !important;
}

.sgt-filter-dropdown-item.active[data-filter="completada"] {
    background-color: #e8f5e8;
    color: #2e7d32 !important;
}

.sgt-filter-dropdown-item.active[data-filter="alta_prioridad"] {
    background-color: #ffebee;
    color: #c62828 !important;
}

/* ===== ESTILOS PARA PEDIDOS DE TIENDA ===== */

/* Botón Pedidos Tienda */
.sgt-pedidos-tienda-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 10px;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sgt-pedidos-tienda-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.sgt-pedidos-tienda-button:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6b5797 100%);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5), 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sgt-pedidos-tienda-button:hover::before {
    opacity: 1;
}

.sgt-pedidos-tienda-button:active {
    background: linear-gradient(135deg, #4c63d2 0%, #5f4e8c 100%);
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sgt-pedidos-tienda-button i {
    font-size: 16px;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sgt-pedidos-tienda-button:hover i {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1) rotate(-5deg);
}

/* Los estilos de .sgt-pedidos-tienda-counter están definidos en la sección "CONTADORES UNIFICADOS" */
.sgt-pedidos-tienda-counter.hidden {
    display: none;
}

/* Modal Principal de Pedidos Tienda */
.sgt-pedidos-tienda-modal-content {
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    background: white;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}

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

.sgt-modal-header {
    background: #f8f9fa;
    padding: 20px 25px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sgt-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #495057;
}

.sgt-modal-header h3 i {
    font-size: 20px;
    color: #dc3545;
}

.sgt-close {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sgt-close:hover {
    background: #e9ecef;
    color: #495057;
}

/* Body del Modal */
.sgt-modal-body {
    padding: 25px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Acciones del Modal */
.sgt-pedidos-tienda-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sgt-add-pedido-tienda-btn,
.sgt-clear-completed-btn {
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sgt-add-pedido-tienda-btn {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.sgt-add-pedido-tienda-btn:hover {
    background: #218838;
    border-color: #1e7e34;
}

.sgt-clear-completed-btn {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.sgt-clear-completed-btn:hover {
    background: #c82333;
    border-color: #bd2130;
}

/* Estadísticas */
.sgt-pedidos-tienda-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.sgt-stat-item {
    background: #f8f9fa;
    padding: 16px 20px;
    border-radius: 6px;
    text-align: center;
    flex: 1;
    min-width: 120px;
    border: 1px solid #e9ecef;
}

.sgt-stat-label {
    display: block;
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sgt-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #495057;
}

/* Lista de Pedidos */
.sgt-pedidos-tienda-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sgt-pedido-tienda-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
}

.sgt-pedido-tienda-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #667eea;
    transition: all 0.2s ease;
}

.sgt-pedido-tienda-item:hover {
    border-color: #667eea;
    background: #f8f9ff;
}

.sgt-pedido-tienda-item:hover::before {
    width: 4px;
    background: #5a6fd8;
}

.sgt-pedido-tienda-item.completado {
    background: #f8fff9;
    border-color: #28a745;
    opacity: 0.8;
}

.sgt-pedido-tienda-item.completado::before {
    background: #28a745;
}

/* Header del Item */
.sgt-pedido-tienda-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px 12px 20px;
    margin-bottom: 0;
}

.sgt-pedido-tienda-item-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
}

.sgt-pedido-tienda-checkbox-wrapper {
    position: relative;
    margin-top: 2px;
}

.sgt-pedido-tienda-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.sgt-pedido-tienda-content {
    flex: 1;
    min-width: 0;
}

.sgt-pedido-tienda-producto-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sgt-pedido-tienda-producto-icon {
    width: 36px;
    height: 36px;
    background: #dc3545;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.sgt-pedido-tienda-item.completado .sgt-pedido-tienda-producto-icon {
    background: #28a745;
}

.sgt-pedido-tienda-producto-info {
    flex: 1;
    min-width: 0;
}

.sgt-pedido-tienda-producto {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 4px 0;
    line-height: 1.3;
    word-wrap: break-word;
}

.sgt-pedido-tienda-item.completado .sgt-pedido-tienda-producto {
    text-decoration: line-through;
    color: #6c757d;
}

.sgt-pedido-tienda-cantidad-prioridad {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sgt-pedido-tienda-cantidad {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #e7f1ff;
    color: #0066cc;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.sgt-pedido-tienda-cantidad i {
    font-size: 11px;
}

/* Prioridades */
.sgt-pedido-tienda-prioridad {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sgt-pedido-tienda-prioridad i {
    font-size: 10px;
}

.sgt-pedido-tienda-prioridad.urgente {
    background: #ffe6e6;
    color: #dc3545;
}

.sgt-pedido-tienda-prioridad.alta {
    background: #fff3e0;
    color: #fd7e14;
}

.sgt-pedido-tienda-prioridad.media {
    background: #e7f1ff;
    color: #007bff;
}

.sgt-pedido-tienda-prioridad.baja {
    background: #e8f5e8;
    color: #28a745;
}

/* Acciones del Item */
.sgt-pedido-tienda-item-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.sgt-pedido-tienda-edit-btn,
.sgt-pedido-tienda-delete-btn {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 13px;
    background: #f8f9fa;
}

.sgt-pedido-tienda-edit-btn {
    color: #17a2b8;
    border-color: #e9ecef;
}

.sgt-pedido-tienda-edit-btn:hover {
    background: #e7f6f8;
    border-color: #17a2b8;
}

.sgt-pedido-tienda-delete-btn {
    color: #dc3545;
    border-color: #e9ecef;
}

.sgt-pedido-tienda-delete-btn:hover {
    background: #ffe6e6;
    border-color: #dc3545;
}

/* Detalles del Item */
.sgt-pedido-tienda-item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 20px 18px 20px;
    margin-top: 0;
    border-top: 1px solid #f1f3f4;
    background: #fafbfc;
    font-size: 13px;
}

.sgt-pedido-tienda-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #495057;
    background: white;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    min-width: 0;
    flex: 1;
    min-width: 140px;
}

.sgt-pedido-tienda-detail i {
    width: 14px;
    text-align: center;
    color: #667eea;
    font-size: 13px;
    flex-shrink: 0;
}

.sgt-pedido-tienda-detail-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sgt-pedido-tienda-detail-label {
    font-weight: 500;
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.sgt-pedido-tienda-detail-value {
    color: #2c3e50;
    font-weight: 500;
    word-wrap: break-word;
}

/* Fecha de creación */
.sgt-pedido-tienda-fecha {
    position: absolute;
    bottom: 8px;
    left: 16px;
    background: #f8f9fa;
    color: #6c757d;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #e9ecef;
}

.sgt-pedido-tienda-item.completado .sgt-pedido-tienda-fecha {
    background: #e8f5e8;
    color: #28a745;
    border-color: #c3e6cb;
}

/* Modal de Formulario */
.sgt-pedido-tienda-form-content {
    max-width: 600px;
    width: 95%;
    background: white;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}

/* Formulario */
.sgt-modern-form {
    padding: 0;
}

.sgt-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.sgt-form-group {
    flex: 1;
    min-width: 0;
}

.sgt-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #495057;
    font-size: 14px;
}

.sgt-form-group input,
.sgt-form-group select,
.sgt-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.sgt-form-group input:focus,
.sgt-form-group select:focus,
.sgt-form-group textarea:focus {
    outline: none;
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.sgt-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Acciones del Formulario */
.sgt-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    margin: 0 -25px -25px -25px;
}

.sgt-submit-btn,
.sgt-cancel-btn {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 90px;
}

.sgt-submit-btn {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.sgt-submit-btn:hover {
    background: #218838;
    border-color: #1e7e34;
}

.sgt-cancel-btn {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
}

.sgt-cancel-btn:hover {
    background: #5a6268;
    border-color: #545b62;
}

/* Estado Vacío */
.sgt-no-pedidos {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.sgt-no-pedidos i {
    font-size: 48px;
    margin-bottom: 16px;
    color: #dee2e6;
}

.sgt-no-pedidos p {
    font-size: 16px;
    margin-bottom: 4px;
    color: #495057;
    font-weight: 500;
}

.sgt-no-pedidos small {
    font-size: 14px;
    color: #6c757d;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sgt-pedidos-tienda-modal-content {
        width: 98%;
        max-height: 95vh;
        margin: 10px;
    }

    .sgt-modal-header,
    .sgt-modal-body {
        padding: 16px;
    }

    .sgt-pedidos-tienda-stats {
        display: none;
    }

    .sgt-stat-item {
        min-width: auto;
        padding: 12px 16px;
    }

    .sgt-pedido-tienda-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px 10px 16px;
    }

    .sgt-pedido-tienda-item-actions {
        align-self: flex-end;
    }

    .sgt-pedido-tienda-item-details {
        flex-direction: column;
        gap: 8px;
        padding: 0 16px 14px 16px;
    }

    .sgt-form-row {
        flex-direction: column;
        gap: 12px;
    }

    .sgt-pedidos-tienda-form-content {
        width: 98%;
        margin: 10px;
    }

    .sgt-modal-header,
    .sgt-form-actions {
        padding: 12px 16px;
    }

    .sgt-form-actions {
        flex-direction: column;
    }

    .sgt-pedidos-tienda-button {
        padding: 8px 12px;
        font-size: 13px;
    }

    .sgt-pedidos-tienda-actions {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .sgt-modal-header h3 {
        font-size: 18px;
    }

    .sgt-pedidos-tienda-stats {
        display: none;
    }

    .sgt-pedidos-tienda-actions {
        flex-direction: column;
        gap: 8px;
    }

    .sgt-pedido-tienda-item-header {
        padding: 12px 14px 8px 14px;
    }

    .sgt-pedido-tienda-item-details {
        padding: 0 14px 12px 14px;
    }

    .sgt-pedido-tienda-produto {
        font-size: 15px;
    }

    .sgt-pedido-tienda-producto-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* Animaciones suaves */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ESTILOS PARA ALMACÉN MÓVIL ===== */

/* Botón solo visible en móviles */
.sgt-menu-btn-mobile-only {
    display: none;
}

/* En escritorio: ocultar botón móvil */
@media (min-width: 769px) {
    .sgt-menu-btn-mobile-only {
        display: none !important;
    }
}

/* En móviles: mostrar botón móvil */
@media (max-width: 768px) {
    .sgt-menu-btn-mobile-only {
        display: flex !important;
        width: 100%;
        justify-content: flex-start;
        padding: 1rem;
        margin-bottom: 0.5rem;
        border-radius: 12px;
        font-size: 1rem;
        text-align: left;
    }
    
    .sgt-menu-btn-mobile-only i {
        margin-right: 12px;
        width: 20px;
        text-align: center;
    }
}

/* Los estilos de .sgt-almacen-counter están definidos en la sección "CONTADORES UNIFICADOS" */
.sgt-almacen-counter.hidden {
    display: none;
}

/* Modal del almacén móvil */
.sgt-almacen-mobile-modal-content {
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    background: white;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}

/* Estadísticas del almacén */
.sgt-almacen-mobile-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.sgt-almacen-mobile-stats .sgt-stat-item {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    min-width: 80px;
}

.sgt-almacen-mobile-stats .sgt-stat-label {
    display: block;
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-weight: 500;
}

.sgt-almacen-mobile-stats .sgt-stat-value {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #495057;
}

/* Lista de items del almacén */
.sgt-almacen-mobile-list {
    max-height: 60vh;
    overflow-y: auto;
}

.sgt-almacen-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}

.sgt-almacen-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.sgt-almacen-item.completado {
    background: #f8f9fa;
    opacity: 0.7;
}

.sgt-almacen-item.completado .sgt-almacen-item-nombre {
    text-decoration: line-through;
    color: #6c757d;
}

/* Header del item */
.sgt-almacen-item-header {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
}

.sgt-almacen-item-check {
    position: relative;
    flex-shrink: 0;
    padding: 5px; /* Área táctil más grande */
}

.sgt-almacen-item-checkbox {
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.sgt-almacen-item-checkbox + label {
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin: auto;
}

.sgt-almacen-item-checkbox + label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.2s ease;
    line-height: 1;
}

.sgt-almacen-item-checkbox:checked + label {
    background: #28a745;
    border-color: #28a745;
}

.sgt-almacen-item-checkbox:checked + label::after {
    transform: translate(-50%, -50%) scale(1);
}

.sgt-almacen-item-checkbox + label:hover {
    border-color: #28a745;
    transform: scale(1.05);
}

.sgt-almacen-item-check:active {
    transform: scale(0.95);
}

/* Contenido del item */
.sgt-almacen-item-content {
    flex: 1;
    min-width: 0;
}

.sgt-almacen-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.sgt-almacen-item-title i {
    color: #667eea;
    font-size: 16px;
    flex-shrink: 0;
}

.sgt-almacen-item-nombre {
    font-weight: 600;
    color: #2c3e50;
    font-size: 16px;
    flex: 1;
    word-break: break-word;
}

.sgt-cantidad {
    background: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

/* Información del cliente */
.sgt-almacen-item-cliente {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #6c757d;
    font-size: 14px;
}

.sgt-almacen-item-cliente i {
    color: #17a2b8;
    font-size: 14px;
}

.sgt-telefono {
    color: #28a745;
    font-weight: 500;
}

/* Información de prioridad */
.sgt-almacen-item-prioridad {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.sgt-almacen-item-prioridad.prioridad-urgente {
    color: #dc3545;
}

.sgt-almacen-item-prioridad.prioridad-alta {
    color: #fd7e14;
}

.sgt-almacen-item-prioridad.prioridad-media {
    color: #ffc107;
}

.sgt-almacen-item-prioridad.prioridad-baja {
    color: #6c757d;
}

.sgt-almacen-item-prioridad i {
    font-size: 12px;
}

/* Fecha del item */
.sgt-almacen-item-fecha {
    position: absolute;
    bottom: 8px;
    right: 16px;
    background: #f8f9fa;
    color: #6c757d;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #e9ecef;
}

.sgt-almacen-item.completado .sgt-almacen-item-fecha {
    background: #e8f5e8;
    color: #28a745;
    border-color: #c3e6cb;
}

/* Sin items */
.sgt-no-items-almacen {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.sgt-no-items-almacen i {
    font-size: 48px;
    color: #dee2e6;
    margin-bottom: 16px;
}

.sgt-no-items-almacen p {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 500;
}

.sgt-no-items-almacen small {
    font-size: 14px;
    color: #adb5bd;
}

/* Indicadores visuales por prioridad en el borde */
.sgt-almacen-item.prioridad-urgente {
    border-left: 4px solid #dc3545;
}

.sgt-almacen-item.prioridad-alta {
    border-left: 4px solid #fd7e14;
}

.sgt-almacen-item.prioridad-media {
    border-left: 4px solid #ffc107;
}

.sgt-almacen-item.prioridad-baja {
    border-left: 4px solid #6c757d;
}

/* Corrección para el texto truncado en almacén móvil */
.sgt-almacen-item .sgt-text-ellipsis,
.sgt-almacen-item-nombre,
.sgt-almacen-item-cliente .sgt-text-ellipsis {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    word-break: break-word;
    line-height: 1.4;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .sgt-almacen-mobile-modal-content {
        width: 98%;
        max-height: 95vh;
        margin: 10px;
    }

    .sgt-modal-header,
    .sgt-modal-body {
        padding: 16px;
    }

    .sgt-almacen-mobile-stats {
        flex-direction: row;
        gap: 12px;
        padding: 12px;
    }

    .sgt-almacen-mobile-stats .sgt-stat-item {
        padding: 8px;
    }

    .sgt-almacen-item-header {
        padding: 12px;
        gap: 10px;
    }

    .sgt-almacen-item-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .sgt-almacen-item-nombre {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .sgt-almacen-mobile-stats {
        flex-direction: column;
        gap: 8px;
    }

    .sgt-almacen-mobile-stats .sgt-stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .sgt-almacen-mobile-stats .sgt-stat-label {
        margin-bottom: 0;
    }

    .sgt-almacen-mobile-stats .sgt-stat-value {
        font-size: 20px;
    }
}

.sgt-pedido-tienda-item {
    animation: fadeInUp 0.2s ease-out;
}

/* Scrollbar minimalista */
.sgt-modal-body::-webkit-scrollbar {
    width: 4px;
}

.sgt-modal-body::-webkit-scrollbar-track {
    background: #f8f9fa;
}

.sgt-modal-body::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 2px;
}

.sgt-modal-body::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

/* Estados de focus mejorados */
.sgt-pedidos-tienda-button:focus,
.sgt-add-pedido-tienda-btn:focus,
.sgt-clear-completed-btn:focus,
.sgt-submit-btn:focus,
.sgt-cancel-btn:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.sgt-pedido-tienda-edit-btn:focus {
    outline: 2px solid #17a2b8;
    outline-offset: 2px;
}

.sgt-pedido-tienda-delete-btn:focus {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* Mejoras de accesibilidad */
.sgt-pedido-tienda-checkbox:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Estados disabled */
.sgt-submit-btn:disabled,
.sgt-cancel-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sgt-submit-btn:disabled:hover,
.sgt-cancel-btn:disabled:hover {
    background: #6c757d;
    border-color: #6c757d;
}

/* Transiciones suaves para todos los elementos interactivos */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Desactivar la fuente del tema para h1, h2, h3, h4, h5, h6 */
h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif !important;
}

/* Estilos para el total de SATs completados */
.sgt-total-completado {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-radius: 5px;
    color: #28a745;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
    border-left: 4px solid #28a745;
}

/* Botón de toggle para marcar en espera */
.sgt-btn-waiting-toggle {
    background-color: #6c757d !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.sgt-btn-waiting-toggle:hover {
    background-color: #5a6268 !important;
    transform: scale(1.05) !important;
}

.sgt-btn-waiting-toggle.waiting-active {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.sgt-btn-waiting-toggle.waiting-active:hover {
    background-color: #e0a800 !important;
}

/* Efectos visuales para filas en espera */
.sgt-row.waiting-status {
    opacity: 0.6 !important;
    background-color: #f8f9fa !important;
    border-left: 4px solid #ffc107 !important;
}

.sgt-row.waiting-status .sgt-status-button {
    opacity: 0.7 !important;
}

.sgt-row.waiting-status td {
    color: #6c757d !important;
}

/* Estilo para reparaciones retrasadas (3+ días) */
.sgt-row.delayed-repair {
    background-color: #ffebee !important;
    border-left: 4px solid #dc3545 !important;
}

.sgt-row.delayed-repair:hover {
    background-color: #ffcdd2 !important;
}

/* Prioridad: waiting-status tiene precedencia sobre delayed-repair */
.sgt-row.waiting-status.delayed-repair {
    background-color: #fff3e0 !important;
    border-left: 4px solid #ff9800 !important;
}

/* Animación suave para el cambio de estado */
.sgt-row {
    transition: all 0.3s ease-in-out !important;
}

/* Estilos para notificaciones */
.sgt-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-in-out;
    font-size: 14px;
    font-weight: 500;
    max-width: 300px;
}

.sgt-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.sgt-notification-info {
    border-left: 4px solid #17a2b8;
    color: #0c5460;
}

.sgt-notification-success {
    border-left: 4px solid #28a745;
    color: #155724;
}

.sgt-notification-warning {
    border-left: 4px solid #ffc107;
    color: #856404;
}

.sgt-notification-error {
    border-left: 4px solid #dc3545;
    color: #721c24;
}

/* Los estilos de .tarea-count están definidos en la sección "CONTADORES UNIFICADOS" */

/* ==============================
   ESTILOS PARA ACCESO DIRECTO AL ALMACÉN
   ============================== */

/* Contenedor principal de la página directa */
.sgt-almacen-directo {
    min-height: 100vh;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header del almacén directo */
.sgt-almacen-header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 25px rgba(231, 76, 60, 0.2);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(231, 76, 60, 0.1);
}

.sgt-almacen-header .sgt-logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sgt-almacen-header .sgt-mobile-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.sgt-almacen-header h1 {
    margin: 0;
    font-size: 20px;
    color: #2c3e50;
    font-weight: 600;
}

.sgt-refresh-btn {
    background: #e74c3c;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.sgt-refresh-btn:hover {
    background: #c0392b;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.sgt-refresh-btn.spinning i {
    animation: spin 1s linear infinite;
}

/* Estadísticas compactas */
.sgt-almacen-stats-compact {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    gap: 15px;
}

.sgt-stat-compact {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    flex: 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.sgt-stat-compact:hover {
    transform: translateY(-2px);
}

.sgt-stat-compact.pendientes {
    border-left: 4px solid #e74c3c;
}

.sgt-stat-compact.comprados {
    border-left: 4px solid #27ae60;
}

.sgt-stat-number {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 4px;
}

.sgt-stat-text {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Lista compacta de items */
.sgt-almacen-list-compact {
    padding: 0 20px 20px;
    min-height: 300px;
}

.sgt-loading-compact {
    text-align: center;
    color: white;
    padding: 40px;
    font-size: 16px;
}

.sgt-loading-compact i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

.sgt-item-compact {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sgt-item-compact::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e5e7eb;
    transition: background-color 0.3s ease;
}

.sgt-item-compact.prioridad-urgente::before {
    background: #e74c3c;
}

.sgt-item-compact.prioridad-alta::before {
    background: #f39c12;
}

.sgt-item-compact.prioridad-media::before {
    background: #3498db;
}

.sgt-item-compact.prioridad-baja::before {
    background: #27ae60;
}

.sgt-item-compact.completado {
    opacity: 0.6;
    background: rgba(212, 237, 218, 0.95);
}

.sgt-item-compact.processing {
    opacity: 0.7;
    transform: scale(0.98);
}

/* Checkbox compacto */
.sgt-item-check-compact {
    flex-shrink: 0;
}

.sgt-item-checkbox-compact {
    display: none;
}

.sgt-item-checkbox-compact + label {
    width: 24px;
    height: 24px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    display: block;
    cursor: pointer;
    position: relative;
    background: white;
    transition: all 0.3s ease;
}

.sgt-item-checkbox-compact:checked + label {
    background: #27ae60;
    border-color: #27ae60;
}

.sgt-item-checkbox-compact:checked + label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Contenido del item compacto */
.sgt-item-content-compact {
    flex: 1;
    min-width: 0;
}

.sgt-item-title-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sgt-item-title-compact i {
    color: #6b7280;
    font-size: 14px;
    flex-shrink: 0;
}

.sgt-item-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 15px;
    flex: 1;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

.sgt-quantity {
    background: #e74c3c;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.sgt-item-subtitle {
    font-size: 13px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgt-item-subtitle.prioridad-urgente {
    color: #e74c3c;
    font-weight: 600;
}

.sgt-item-subtitle.prioridad-alta {
    color: #f39c12;
    font-weight: 600;
}

.sgt-item-subtitle.prioridad-media {
    color: #3498db;
    font-weight: 500;
}

.sgt-item-subtitle.prioridad-baja {
    color: #27ae60;
    font-weight: 500;
}

/* Estilos para información adicional en items compactos */
.sgt-item-notas,
.sgt-item-proveedor,
.sgt-item-descripcion {
    font-size: 12px;
    color: #6c757d;
    margin-top: 6px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #dee2e6;
    line-height: 1.3;
}

.sgt-item-notas {
    border-left-color: #ffc107;
}

.sgt-item-proveedor {
    border-left-color: #17a2b8;
}

.sgt-item-descripcion {
    border-left-color: #6f42c1;
}

.sgt-item-notas i,
.sgt-item-proveedor i,
.sgt-item-descripcion i {
    margin-right: 6px;
    font-size: 11px;
    opacity: 0.7;
}

/* Sin items compacto */
.sgt-no-items-compact {
    text-align: center;
    color: white;
    padding: 60px 20px;
}

.sgt-no-items-compact i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.8;
}

.sgt-no-items-compact h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
}

.sgt-no-items-compact p {
    margin: 0 0 4px 0;
    font-size: 16px;
    opacity: 0.9;
}

.sgt-no-items-compact small {
    opacity: 0.7;
    font-size: 14px;
}

/* Estilos para pantalla de login móvil */
.sgt-mobile-login, .sgt-mobile-access-denied {
    min-height: 100vh;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 0;
}

.sgt-mobile-login-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    max-width: 400px;
    width: 100%;
}

.sgt-mobile-login-container .sgt-logo-container {
    margin-bottom: 30px;
}

.sgt-mobile-login-container .sgt-mobile-logo {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.sgt-mobile-login-container h2 {
    color: #2c3e50;
    margin: 0 0 30px 0;
    font-size: 24px;
    font-weight: 600;
}

.sgt-login-content h3 {
    color: #374151;
    margin: 0 0 15px 0;
    font-size: 20px;
}

.sgt-login-content p {
    color: #6b7280;
    margin: 0 0 25px 0;
    line-height: 1.5;
}

.sgt-mobile-login-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #e74c3c;
    color: white;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.sgt-mobile-login-button:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(231, 76, 60, 0.4);
    color: white;
    text-decoration: none;
}

/* Toast notifications para acceso directo */
.sgt-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #333;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sgt-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.sgt-toast.sgt-toast-success {
    background: #27ae60;
}

.sgt-toast.sgt-toast-error {
    background: #e74c3c;
}

/* Ajustes responsivos para acceso directo */
@media (max-width: 768px) {
    .sgt-almacen-header {
        padding: 15px;
    }
    
    .sgt-almacen-header h1 {
        font-size: 18px;
    }
    
    .sgt-almacen-stats-compact {
        padding: 15px;
        gap: 10px;
    }
    
    .sgt-stat-compact {
        padding: 12px;
    }
    
    .sgt-stat-number {
        font-size: 20px;
    }
    
    .sgt-almacen-list-compact {
        padding: 0 15px 15px;
    }
    
    .sgt-item-compact {
        padding: 14px;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .sgt-mobile-login-container {
        padding: 30px 20px;
        margin: 10px;
    }
    
    .sgt-mobile-login-container h2 {
        font-size: 20px;
    }
    
    .sgt-mobile-login-button {
        padding: 12px 24px;
        font-size: 15px;
    }
}

/* Los estilos de .mantenimiento-count están definidos en la sección "CONTADORES UNIFICADOS" */

/* ===== ESTILOS TIEMPO-MANTENIMIENTOS ===== */

/* Header principal */
.sgt-dashboard .sgt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 20px;
    flex-wrap: wrap;
}

.sgt-header-left {
    flex: 1;
    min-width: 250px;
}

.sgt-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Header con selectores de mes/año */
.sgt-header-center {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f8f9fa;
    padding: 12px 20px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin: 15px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sgt-header-center label {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.sgt-header-center select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    color: #495057;
    min-width: 120px;
    transition: all 0.2s ease;
}

.sgt-header-center select:focus {
    outline: none;
    border-color: #4dabf7;
    box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.1);
}

.sgt-header-center select:hover {
    border-color: #adb5bd;
}

/* Botón Registrar Tiempo */
.sgt-new-tiempo-button {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.sgt-new-tiempo-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    background: linear-gradient(135deg, #1e7e34 0%, #1c7670 100%);
}

.sgt-new-tiempo-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.sgt-new-tiempo-button i {
    font-size: 16px;
}

/* Botón Exportar */
.sgt-secondary-button {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

.sgt-secondary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
    background: linear-gradient(135deg, #5a6268 0%, #3d4043 100%);
}

.sgt-secondary-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

.sgt-secondary-button i {
    font-size: 14px;
}

/* Botón Guardar Registro */
.sgt-primary-button {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
    min-width: 140px;
    justify-content: center;
}

.sgt-primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
}

.sgt-primary-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.sgt-primary-button i {
    font-size: 16px;
}

/* Checkbox personalizado */
.sgt-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.2s ease;
    user-select: none;
    font-weight: 500;
    color: #495057;
}

.sgt-checkbox-label:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.sgt-checkbox-label input[type="checkbox"] {
    display: none;
}

.sgt-checkmark {
    position: relative;
    height: 20px;
    width: 20px;
    background-color: white;
    border: 2px solid #ced4da;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sgt-checkbox-label input[type="checkbox"]:checked + .sgt-checkmark {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-color: #28a745;
}

.sgt-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sgt-checkbox-label input[type="checkbox"]:checked + .sgt-checkmark:after {
    display: block;
}

.sgt-checkbox-label:has(input[type="checkbox"]:checked) {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

/* Panel de estadísticas */
.sgt-stats-panel {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sgt-stat-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 20px;
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.sgt-stat-icon {
    background: #6c757d;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.sgt-stat-content {
    flex: 1;
}

.sgt-stat-number {
    font-size: 20px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 4px;
}

.sgt-stat-label {
    color: #495057;
    font-size: 13px;
}

/* Filtros de búsqueda */
.sgt-filters {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.sgt-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sgt-filter-group label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.sgt-filter-group select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    min-width: 150px;
}

/* Clases de rentabilidad */
.rentabilidad-positiva {
    color: #28a745;
    font-weight: bold;
}

.rentabilidad-negativa {
    color: #dc3545;
    font-weight: bold;
}

.rentabilidad-neutral {
    color: #ffc107;
    font-weight: bold;
}

/* Badges de tipo de actividad */
.tipo-actividad-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.tipo-llamada {
    background: #e3f2fd;
    color: #1976d2;
}

.tipo-anydesk {
    background: #f3e5f5;
    color: #7b1fa2;
}

.tipo-presencial {
    background: #e8f5e8;
    color: #388e3c;
}

.tipo-otro {
    background: #fff3e0;
    color: #f57c00;
}

/* Estados de casos */
.estado-resuelto {
    color: #28a745;
    font-weight: bold;
}

.estado-pendiente {
    color: #dc3545;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
    /* Header principal responsive */
    .sgt-dashboard .sgt-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .sgt-header-left {
        min-width: auto;
        text-align: center;
    }

    .sgt-header-center {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        order: 2;
    }

    .sgt-header-center select {
        min-width: auto;
        width: 100%;
    }

    .sgt-actions {
        justify-content: center;
        flex-wrap: wrap;
        order: 3;
    }

    .sgt-new-tiempo-button,
    .sgt-primary-button {
        padding: 10px 16px;
        font-size: 13px;
    }

    .sgt-checkbox-label {
        padding: 10px;
        font-size: 14px;
    }

    .sgt-stats-panel {
        flex-direction: column;
    }

    .sgt-stat-card {
        min-width: auto;
    }

    .sgt-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .sgt-filter-group {
        width: 100%;
    }

    .sgt-filter-group select {
        min-width: auto;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .sgt-actions {
        flex-direction: column;
        width: 100%;
    }

    .sgt-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* Labels modernos para inputs del modal de edición SAT */
.sgt-input-label {
    position: absolute;
    top: -8px;
    left: 50px;
    background: white;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    z-index: 1;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    pointer-events: none;
}

/* Resumen mensual de entregados */
.sgt-entregados-resumen {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sgt-resumen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sgt-resumen-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-mes-select {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.sgt-mes-select option {
    background: #764ba2;
    color: white;
}

.sgt-resumen-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.sgt-stat-card {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sgt-stat-card i {
    font-size: 32px;
    opacity: 0.9;
}

.sgt-stat-info {
    display: flex;
    flex-direction: column;
}

.sgt-stat-label {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sgt-stat-value {
    font-size: 24px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .sgt-resumen-stats {
        grid-template-columns: 1fr;
    }

    .sgt-resumen-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}

/* ========================================
   ESTADISTICAS SAT - Modal Fullscreen
   ======================================== */

.sgt-stats-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sgt-stats-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.sgt-stats-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999999;
    overflow: auto;
    animation: fadeIn 0.3s ease;
}

.sgt-stats-modal.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sgt-stats-modal-content {
    background: #1a1a2e;
    width: 100%;
    min-height: 100%;
    padding: 20px;
    color: #fff;
}

.sgt-stats-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 25px;
}

.sgt-stats-modal-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-stats-modal-header h2 i {
    color: #667eea;
}

.sgt-stats-filters {
    display: flex;
    gap: 10px;
}

.sgt-stats-select {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sgt-stats-select:hover,
.sgt-stats-select:focus {
    background: rgba(255,255,255,0.15);
    border-color: #667eea;
    outline: none;
}

.sgt-stats-select option {
    background: #1a1a2e;
    color: #fff;
}

.sgt-stats-close {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.sgt-stats-close:hover {
    background: #ff4444;
    border-color: #ff4444;
    transform: rotate(90deg);
}

.sgt-stats-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.sgt-stat-box {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

.sgt-stat-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.sgt-stat-box > i {
    font-size: 40px;
    color: #667eea;
    opacity: 0.8;
}

.sgt-stat-data {
    display: flex;
    flex-direction: column;
}

.sgt-stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.sgt-stat-box .sgt-stat-label {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

.sgt-stats-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.sgt-chart-container {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 25px;
    transition: all 0.3s ease;
}

.sgt-chart-container:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(102, 126, 234, 0.3);
}

.sgt-chart-container h3 {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-chart-container h3 i {
    color: #667eea;
}

.sgt-chart-container canvas {
    max-height: 280px;
}

/* Responsive estadisticas */
@media (max-width: 1200px) {
    .sgt-stats-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sgt-stats-modal-content {
        padding: 15px;
    }

    .sgt-stats-modal-header {
        flex-wrap: wrap;
        gap: 15px;
    }

    .sgt-stats-modal-header h2 {
        font-size: 18px;
        width: 100%;
        order: 1;
    }

    .sgt-stats-filters {
        order: 2;
    }

    .sgt-stats-close {
        order: 3;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .sgt-stats-summary {
        grid-template-columns: 1fr;
    }

    .sgt-stat-box {
        padding: 20px;
    }

    .sgt-stat-number {
        font-size: 26px;
    }

    .sgt-stats-charts {
        grid-template-columns: 1fr;
    }
}

/* Estados del año - grid numerico */
.sgt-estados-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px 0;
}

.sgt-estado-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.sgt-estado-item:hover {
    background: rgba(255,255,255,0.1);
    transform: translateX(5px);
}

.sgt-estado-item .estado-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sgt-estado-item .estado-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sgt-estado-item .estado-nombre {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

.sgt-estado-item .estado-valor {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.sgt-estado-item.estado-pendiente .estado-color { background: #ef4444; }
.sgt-estado-item.estado-en_progreso .estado-color { background: #f59e0b; }
.sgt-estado-item.estado-completado .estado-color { background: #10b981; }
.sgt-estado-item.estado-entregado .estado-color { background: #3b82f6; }
.sgt-estado-item.estado-aparcado .estado-color { background: #6b7280; }

@media (max-width: 500px) {
    .sgt-estados-grid {
        grid-template-columns: 1fr;
    }
}