/* =================================================================
   ACUMPLIA - TEMA INDUSTRIAL DE CIBERSEGURIDAD
   Diseño profesional para gestión de normativa y alarmas industriales
   ================================================================= */

:root {
    /* ===== PALETA CORPORATIVA OFICIAL ACIBIN ===== */
    --primary-color: #1e40af;          /* Azul corporativo principal */
    --primary-dark: #1e3a8a;           /* Azul corporativo oscuro */
    --secondary-color: #f59e0b;        /* Amarillo/Naranja corporativo */
    --accent-color: #ef4444;           /* Rojo de alertas/acciones */
    --dark-color: #111827;             /* Negro corporativo */
    --light-color: #f8fafc;            /* Fondo claro corporativo */
    --text-color: #111827;             /* Texto principal */
    --text-light: #374151;             /* Texto secundario */
    --text-muted: #6b7280;             /* Texto suave/deshabilitado */
    --text-white: #ffffff;             /* Texto blanco */
    --border-color: #e5e7eb;           /* Bordes corporativos */
    
    /* ===== VARIANTES Y ESTADOS (basados en paleta corporativa) ===== */
    --primary-light: #3b82f6;          /* Azul claro (derivado del primary) */
    --primary-lighter: #93c5fd;        /* Azul muy claro */
    
    --secondary-dark: #d97706;         /* Naranja/amarillo oscuro */
    --secondary-light: #fbbf24;        /* Amarillo claro */
    
    --accent-dark: #dc2626;            /* Rojo oscuro */
    --accent-light: #f87171;           /* Rojo claro */
    
    /* ===== COLORES FUNCIONALES (ajustados a la paleta) ===== */
    --success-color: #10b981;          /* Verde para éxito/cumplimiento */
    --success-dark: #059669;           /* Verde oscuro */
    --success-light: #34d399;          /* Verde claro */
    
    --warning-color: var(--secondary-color);  /* Usa el amarillo corporativo */
    --warning-dark: var(--secondary-dark);    /* Naranja oscuro corporativo */
    --warning-light: var(--secondary-light);  /* Amarillo claro corporativo */
    
    --danger-color: var(--accent-color);      /* Usa el rojo corporativo */
    --danger-dark: var(--accent-dark);        /* Rojo oscuro corporativo */
    --danger-light: var(--accent-light);      /* Rojo claro corporativo */
    
    --info-color: var(--primary-color);       /* Usa el azul corporativo */
    --info-dark: var(--primary-dark);         /* Azul oscuro corporativo */
    --info-light: var(--primary-light);       /* Azul claro corporativo */
    
    /* ===== GRISES (manteniendo coherencia con text-colors) ===== */
    --gray-50: var(--light-color);      /* #f8fafc */
    --gray-100: #f3f4f6;                /* Muy claro */
    --gray-200: #e5e7eb;                /* Bordes (igual que border-color) */
    --gray-300: #d1d5db;                /* Bordes suaves */
    --gray-400: #9ca3af;                /* Elementos deshabilitados */
    --gray-500: var(--text-muted);      /* #6b7280 */
    --gray-600: #4b5563;                /* Texto intermedio */
    --gray-700: var(--text-light);      /* #374151 */
    --gray-800: #1f2937;                /* Texto oscuro */
    --gray-900: var(--text-color);      /* #111827 - Negro corporativo */
    --white: var(--text-white);         /* #ffffff */
    
    /* Sombras profesionales */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.10);
    
    /* Tipografía técnica */
    --font-primary: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Monaco', 'Consolas', monospace;
    
    /* Espaciado consistente */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    
    /* Radios de borde */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Transformaciones comunes */
    --transform-hover: translateY(-2px);
    --transform-hover-small: translateY(-1px);
    
    /* Efectos hover comunes */
    --hover-shadow-primary: 0 4px 12px rgba(30, 64, 175, 0.3);
    --hover-shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3);
    --hover-shadow-warning: 0 4px 12px rgba(245, 158, 11, 0.3);
    --hover-shadow-danger: 0 4px 12px rgba(239, 68, 68, 0.3);
    --hover-shadow-secondary: 0 4px 12px rgba(245, 158, 11, 0.3);
    
    /* Variables adicionales para compatibilidad */
    --bg-primary: var(--white);           /* Fondo principal blanco */
    --text-primary: var(--text-color);    /* Texto principal oscuro */
    --text-secondary: var(--text-light);  /* Texto secundario */
    --border-light: var(--gray-200);      /* Bordes claros */
    --background-light: var(--gray-50);   /* Fondo claro */
    --transition-standard: var(--transition-normal); /* Transición estándar */
    --font-secondary: var(--font-primary); /* Fuente secundaria (igual que primaria) */
}

/* Asegurar visibilidad en métricas del page-header */
.page-header .metric-compact {
    background: var(--white);
    border: 1px solid var(--border-light);
}

/* =================================================================
   UTILIDADES GENERALES
   ================================================================= */

/* Clase para ocultar elementos */
.hidden {
    display: none !important;
}

.page-header .metric-number,
.page-header .metric-label {
    color: var(--dark-color) !important;
}

.header-metrics .metric-number,
.header-metrics .metric-label {
    color: #111827 !important;  /* Negro corporativo fijo */
}

/* === RESET Y BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* === GESTIÓN DE PÁGINAS === */
.page {
    display: none;
}

.page.active {
    display: block;
    flex: 1;
}

/* === LAYOUT PRINCIPAL === */
.dashboard-main {
    display: flex;
    flex: 1;
    height: calc(100vh - 70px);
    margin-top: 70px;
}

/* =================================================================
   PÁGINA DE LOGIN - REDISEÑO INDUSTRIAL
   ================================================================= */

.login-container {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    position: relative;
}

/* Patrón de fondo técnico/industrial */
.login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 8px,
            rgba(255,255,255,0.02) 8px,
            rgba(255,255,255,0.02) 16px
        );
    pointer-events: none;
}

.login-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.login-branding {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    color: var(--white);
}

.login-branding .logo {
    width: 80px;
    height: 80px;
    margin-bottom: var(--spacing-lg);
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    backdrop-filter: blur(10px);
}

.login-branding h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.login-branding .subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 400;
    margin-bottom: var(--spacing-md);
}

.login-branding .description {
    font-size: 1rem;
    opacity: 0.8;
    max-width: 400px;
    line-height: 1.5;
    margin: 0 auto;
    text-align: center;
}

.security-indicators {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    opacity: 0.8;
}

.security-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
}

.security-indicator::before {
    content: '🛡️';
    font-size: 1.2rem;
}

/* Métricas en tiempo real */
.live-metrics {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-wrap: wrap;
    justify-content: center;
}

.metric-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    flex: 1;
    min-width: 180px;
}

.metric-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.metric-item i {
    font-size: 1.5rem;
    color: var(--secondary-color);
    width: 30px;
    text-align: center;
}

.metric-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
    text-align: center;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    font-family: var(--font-mono);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.metric-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Específico para métricas del login */
.live-metrics .metric-label {
    color: var(--white) !important;
    opacity: 0.9;
}

.login-right {
    flex: 0 0 480px;
    background: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-xl);
}

.login-form-container {
    width: 100%;
    max-width: 380px;
}

.form-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.form-header h2 {
    color: var(--text-color);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.form-header p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* =================================================================
   FORMULARIOS REDISEÑADOS
   ================================================================= */

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: var(--font-primary);
    transition: all var(--transition-normal);
    background: var(--text-white);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
    background: var(--text-white);
}

.form-input:invalid {
    border-color: var(--accent-color);
}

/* =================================================================
   BOTONES INDUSTRIALES
   ================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.btn::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: left var(--transition-normal);
}

.btn:hover::before {
    left: 100%;
}
.btn-primary.btn-full {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
    border: none;
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary.btn-full:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4);
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--text-white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: var(--transform-hover);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--text-muted);
    color: var(--text-white);
}

.btn-danger {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
    color: var(--text-white);
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
    color: var(--text-white);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
    color: var(--text-white);
}

.btn-full {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
}

/* ===== CLASES UTILITARIAS PARA EFECTOS HOVER ===== */
/* Esto unifica efectos hover repetidos en toda la aplicación */
.hover-lift:hover {
    transform: var(--transform-hover);
}

.hover-lift-small:hover {
    transform: var(--transform-hover-small);
}

.hover-shadow-primary:hover {
    box-shadow: var(--hover-shadow-primary);
}

.hover-shadow-success:hover {
    box-shadow: var(--hover-shadow-success);
}

.hover-shadow-warning:hover {
    box-shadow: var(--hover-shadow-warning);
}

.hover-shadow-danger:hover {
    box-shadow: var(--hover-shadow-danger);
}

/* ===== CLASES BASE UNIFICADAS ===== */
/* Esto unifica elementos comunes reutilizables */
.card-content {
    padding: var(--spacing-lg); /* Padding estándar para card-content */
}

.card-content-lg {
    padding: var(--spacing-xl); /* Padding grande */
}

.card-content-none {
    padding: 0; /* Sin padding */
}

/* =================================================================
   DASHBOARD HEADER - REDISEÑO INDUSTRIAL
   ================================================================= */

.dashboard-header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    color: var(--text-white);
    padding: 0 var(--spacing-xl);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-md);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--secondary-color);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.header-logo {
    width: 45px;
    height: 45px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    backdrop-filter: blur(10px);
}

.header-title {
    display: flex;
    flex-direction: column;
}

.header-title h1 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.system-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-color);
    animation: pulse 2s infinite;
}

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

/* System indicators with effects */
.header-center {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.system-indicators {
    display: flex;
    gap: var(--spacing-lg);
}

.system-indicators .indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all var(--transition-normal);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.system-indicators .indicator:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

/* Server status - green pulse */
#server-status {
    color: #10b981;
}

#server-status i {
    animation: serverPulse 2s infinite;
}

@keyframes serverPulse {
    0%, 100% { 
        color: #10b981;
        transform: scale(1);
    }
    50% { 
        color: #34d399;
        transform: scale(1.1);
    }
}

/* Database status - blue connectivity blink */
#db-status {
    color: #3b82f6;
}

#db-status i {
    animation: dbBlink 3s infinite;
}

@keyframes dbBlink {
    0%, 80%, 100% { 
        color: #3b82f6;
        opacity: 1;
    }
    85%, 95% { 
        color: #60a5fa;
        opacity: 0.6;
    }
}

/* Security status - shield rotation */
#security-status {
    color: #f59e0b;
}

#security-status i {
    animation: securityRotate 4s infinite;
}

@keyframes securityRotate {
    0%, 90%, 100% { 
        transform: rotate(0deg) scale(1);
        color: #f59e0b;
    }
    95% { 
        transform: rotate(15deg) scale(1.05);
        color: #fbbf24;
    }
}

/* Warning state animations */
@keyframes warningBlink {
    0%, 50%, 100% { 
        opacity: 1;
        color: #f59e0b;
    }
    25%, 75% { 
        opacity: 0.6;
        color: #fbbf24;
    }
}

/* Error state animations */
@keyframes errorShake {
    0%, 100% { 
        transform: translateX(0);
        color: #ef4444;
    }
    25% { 
        transform: translateX(-2px);
        color: #f87171;
    }
    75% { 
        transform: translateX(2px);
        color: #f87171;
    }
}

/* Tooltips para indicadores de sistema */
.system-indicators .indicator {
    position: relative;
}

.system-indicators .indicator::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.system-indicators .indicator:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
}

.system-indicators .indicator::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1000;
}

.system-indicators .indicator:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.user-info:hover {
    background: rgba(255,255,255,0.15);
}

.user-avatar {
    width: 35px;
    height: 35px;
    background: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    color: var(--secondary-color);
}

.user-role {
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-company {
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =================================================================
   SIDEBAR REDISEÑADO - INDUSTRIAL
   ================================================================= */

.sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--text-white);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    z-index: 999;
    border-right: 3px solid var(--border-color);
    flex-shrink: 0;
}

/* Sidebar Navigation - Estilo Industrial Moderno */
.nav-menu {
    padding: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    height: 100%;
    overflow-y: auto;
}

/* Items del menú */
.nav-items-container {
    padding: var(--spacing-xl) var(--spacing-md);
}

.nav-item {
    margin-bottom: var(--spacing-xs);
}

.nav-link {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.02);
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-light));
    transition: width var(--transition-fast);
    z-index: 1;
}

.nav-link-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    margin-right: var(--spacing-md);
    transition: all var(--transition-normal);
}

.nav-link-icon i {
    font-size: 1.1rem;
    color: var(--secondary-color);
    transition: all var(--transition-normal);
}

.nav-link-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.nav-link-text {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2px;
    transition: all var(--transition-normal);
}

.nav-link-description {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all var(--transition-normal);
}

.nav-link-arrow {
    position: relative;
    z-index: 2;
    margin-left: var(--spacing-sm);
    opacity: 0;
    transform: translateX(-10px);
    transition: all var(--transition-normal);
}

.nav-link-arrow i {
    font-size: 0.8rem;
    color: var(--secondary-color);
}

/* Estados hover y active */
.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.nav-link:hover::before {
    width: 4px;
}

.nav-link:hover .nav-link-icon {
    background: var(--secondary-color);
    transform: scale(1.1);
}

.nav-link:hover .nav-link-icon i {
    color: var(--text-white);
}

.nav-link:hover .nav-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

.nav-link:hover .nav-link-description {
    color: rgba(255, 255, 255, 0.8);
}

.nav-link.active {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.1) 100%);
    border-color: var(--secondary-color);
    transform: translateX(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.nav-link.active::before {
    width: 4px;
    background: var(--secondary-color);
}

.nav-link.active .nav-link-icon {
    background: var(--secondary-color);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.nav-link.active .nav-link-icon i {
    color: var(--text-white);
}

.nav-link.active .nav-link-text {
    color: var(--text-white);
    font-weight: 700;
}

.nav-link.active .nav-link-description {
    color: rgba(255, 255, 255, 0.9);
}

.nav-link.active .nav-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Scrollbar personalizado para el sidebar */
.nav-menu::-webkit-scrollbar {
    width: 6px;
}

.nav-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.nav-menu::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 3px;
}

.nav-menu::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

.nav-icon {
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}

.nav-badge {
    margin-left: auto;
    background: var(--accent-color);
    color: var(--text-white);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* =================================================================
   CONTENIDO PRINCIPAL
   ================================================================= */

.content {
    flex: 1;
    padding: var(--spacing-xl);
    background: var(--light-color);
    overflow-y: auto;
    position: relative; /* Añadido para que el overlay funcione correctamente */
}

.page-header {
    background: var(--text-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-xl);
    border-left: 4px solid var(--primary-color);
}

/* Estilos para la nueva estructura de header con icon y título en línea */
.page-title-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.page-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: var(--radius-md);
    color: var(--text-white);
    box-shadow: var(--shadow-sm);
}

.page-icon i {
    font-size: 1.8rem;
}

.page-title-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.page-title-content h1.page-title {
    color: var(--text-color);
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.page-title-content p.page-subtitle {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.4;
    margin: 0.25rem 0 0 0;
}

/* Mantener compatibilidad con estructura antigua */
.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.page-title h1 {
    color: var(--text-color);
    font-size: 2rem;
    font-weight: 700;
}

.page-subtitle {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.5;
}

/* Estilos específicos para header dinámico del proveedor */
.page-title h2.page-title {
    color: var(--text-color);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-title h2.page-title i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.proveedor-codigo {
    color: var(--text-light);
    font-weight: 500;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.page-title-content .page-subtitle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.9rem;
}

.page-title-content .page-subtitle i {
    color: var(--accent-color);
}

.proveedor-estado {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

.proveedor-estado.estado-validado {
    background: rgba(34, 197, 94, 0.1);
    color: #059669;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.proveedor-estado.estado-pendiente {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.proveedor-estado.estado-rechazado {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Métricas específicas del proveedor */
.proveedor-metrics-section {
    display: flex;
    gap: 1rem;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
}

.proveedor-metrics-section .metric-compact {
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
}

.metric-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    text-align: center;
}

.metric-status.estado-validado {
    background: rgba(34, 197, 94, 0.1);
    color: #059669;
}

.metric-status.estado-pendiente {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.metric-status.estado-rechazado {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* =================================================================
   CARDS Y COMPONENTES
   ================================================================= */

.card {
    background: var(--text-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-header {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-body {
    padding: var(--spacing-xl);
}

.card-footer {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* =================================================================
   INDICADORES DE ESTADO - CIBERSEGURIDAD
   ================================================================= */

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.status-card {
    background: var(--text-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid;
    position: relative;
    overflow: hidden;
}

.status-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    opacity: 0.1;
    background: currentColor;
    border-radius: 50%;
    transform: translate(20px, -20px);
}

.status-card.critical {
    border-left-color: var(--accent-color);
    color: var(--accent-color);
}

.status-card.warning {
    border-left-color: var(--secondary-color);
    color: var(--secondary-color);
}

.status-card.success {
    border-left-color: var(--success-color);
    color: var(--success-color);
}

.status-card.info {
    border-left-color: var(--primary-color);
    color: var(--primary-color);
}

.status-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.status-label {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.status-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* =================================================================
   ALERTAS Y NOTIFICACIONES
   ================================================================= */

.alert {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid;
    margin-bottom: var(--spacing-lg);
    font-size: 0.95rem;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.alert-critical {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--accent-color);
    color: var(--accent-dark);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--secondary-color);
    color: var(--secondary-dark);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success-color);
    color: var(--success-dark);
}

.alert-info {
    background: rgba(30, 64, 175, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

.alert-icon {
    font-size: 1.2rem;
    margin-top: 2px;
}

/* =================================================================
   TABLAS TÉCNICAS
   ================================================================= */

.table-container {
    background: var(--text-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

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

.table thead {
    background: linear-gradient(135deg, var(--dark-color) 0%, var(--text-light) 100%);
    color: var(--text-white);
}

.table th {
    padding: var(--spacing-lg);
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}

.table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: var(--gray-50);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

@media (max-width: 1024px) {
    .sidebar {
        width: 250px;
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }
    
    .login-left {
        flex: none;
        padding: var(--spacing-xl);
    }
    
    .login-right {
        flex: 1;
    }
    
    /* Métricas en columna para móviles */
    .live-metrics {
        flex-direction: column;
    }
    
    .metric-item {
        flex: none;
        min-width: auto;
    }
    
    .dashboard-header {
        height: auto;
        padding: var(--spacing-md);
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }
    
    .dashboard-main {
        flex-direction: column;
    }
    
    /* Estilos responsivos para la nueva estructura de header */
    .page-title-section {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .page-icon {
        width: 50px;
        height: 50px;
        align-self: center;
    }
    
    .page-icon i {
        font-size: 1.5rem;
    }
    
    .page-title-content {
        align-items: center;
        text-align: center;
    }
    
    .page-title-content h1.page-title {
        font-size: 1.5rem;
    }
    
    .page-title-content p.page-subtitle {
        font-size: 0.9rem;
    }
    
    .sidebar {
        width: 100%;
        min-width: auto;
        order: 2;
        max-height: 200px;
    }
    
    .content {
        order: 1;
        padding: var(--spacing-md);
    }
    
    .status-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   UTILIDADES
   ================================================================= */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.font-mono { font-family: var(--font-mono); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.d-block { display: block; }

.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* === CLASES DE CONTENIDO DINÁMICO === */
.error-message {
    color: var(--error-color);
    background: rgba(244, 67, 54, 0.1);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin: 1rem 0;
    text-align: center;
}

.no-data {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
    font-style: italic;
}

.show-more {
    color: var(--accent-color);
    font-size: 0.9rem;
    text-align: center;
    margin-top: 1rem;
    cursor: pointer;
}

.show-more:hover {
    color: var(--primary-color);
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.activity-icon {
    font-size: 1.2rem;
    width: 2rem;
    text-align: center;
}

.activity-info {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.activity-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.activity-time {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
}

.task-item:last-child {
    margin-bottom: 0;
}

.task-item.priority-alta {
    border-left: 4px solid var(--error-color);
}

.task-item.priority-media {
    border-left: 4px solid var(--secondary-color);
}

.task-item.priority-baja {
    border-left: 4px solid var(--success-color);
}

.task-icon {
    font-size: 1.2rem;
    width: 2rem;
    text-align: center;
}

.task-info {
    flex: 1;
}

.task-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.task-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.task-due {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.task-due.overdue {
    color: var(--error-color);
    font-weight: 600;
}

.task-priority {
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.task-priority.priority-alta {
    background: var(--error-color);
    color: white;
}

.task-priority.priority-media {
    background: var(--secondary-color);
    color: white;
}

.task-priority.priority-baja {
    background: var(--success-color);
    color: white;
}

.framework-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.framework-empresa {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.action-hint {
    color: var(--accent-color);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.activity-status {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.show-all-section {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge.role-admin {
    background: var(--error-color);
    color: white;
}

.badge.role-empresa {
    background: var(--success-color);
    color: white;
}

.badge.role-proveedor {
    background: var(--accent-color);
    color: white;
}

.badge.status-active {
    background: var(--success-color);
    color: white;
}

.badge.status-inactive {
    background: var(--error-color);
    color: white;
}

.actions-cell {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* === CLASES DE FORMULARIOS === */
.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.search-input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.search-input:focus {
    background: white;
}

.form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-select {
    min-width: 150px;
    background: var(--bg-secondary);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* === TOOLBAR SECTION === */
.toolbar-section {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.search-group {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* === STATS GRID === */
.industrial-grid.stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-secondary);
    padding: 1.5rem 1rem;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === DATA TABLE CONTAINER === */
.data-table-container {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    padding: 1rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.data-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: var(--bg-hover);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* =================================================================
   ESTILOS ESPECÍFICOS PARA GESTIÓN DE EMPRESAS
   ================================================================= */

/* Header compacto con métricas a la derecha */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.header-metrics {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page-actions .btn-industrial {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.page-actions .btn-industrial.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
}

.page-actions .btn-industrial.primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4);
}

.page-actions .btn-industrial.secondary {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    color: var(--text-white);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.page-actions .btn-industrial.secondary:hover {
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.page-actions .btn-industrial i {
    margin-right: 0.4rem;
    font-size: 0.8rem;
}

.metric-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    min-width: 140px;
    transition: all 0.2s ease;
}

.metric-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.metric-compact .metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--text-white);
    font-size: 0.9rem;
}

.metric-compact.empresas .metric-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.metric-compact.proveedores .metric-icon {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
}

.metric-compact.total .metric-icon {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.metric-compact.pendientes .metric-icon {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
}

.metric-compact.validados .metric-icon {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.metric-compact.revision .metric-icon {
    background: linear-gradient(135deg, var(--info-color), var(--info-dark));
}

.metric-compact.admin .metric-icon {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
}

/* Estilos específicos para métricas de frameworks */
.metric-compact.frameworks-totales .metric-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.metric-compact.requisitos-totales .metric-icon {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
}

.metric-compact.proveedores-asignados .metric-icon {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

/* Estilos específicos para métricas de proveedores */
.metric-compact.proveedores-totales .metric-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.metric-compact.proveedores-validados .metric-icon {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.metric-compact.proveedores-pendientes .metric-icon {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
}

/* Estilos específicos para métricas de documentos */
.metric-compact.doc-validados .metric-icon {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.metric-compact.doc-revision .metric-icon {
    background: linear-gradient(135deg, var(--info-color), var(--info-dark));
}

.metric-compact.doc-pendientes .metric-icon {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
}

/* Estilos específicos para métricas de reportes */
.metric-compact.reportes-cumplimiento .metric-icon {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.metric-compact.reportes-proveedores .metric-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.metric-compact.reportes-frameworks .metric-icon {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
}

.metric-compact.reportes-criticos .metric-icon {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
}

.metric-compact.reportes-tendencia .metric-icon {
    background: linear-gradient(135deg, var(--info-color), var(--info-dark));
}

/* Estilos para reportes - cards de estadísticas */
.stats-overview {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 150px;
    transition: all 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 1.1rem;
}

.stat-card .stat-icon i.fa-user-tie {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.stat-card .stat-icon i.fa-cogs {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
}

.stat-card .stat-icon i.fa-percentage {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.stat-card .stat-info {
    display: flex;
    flex-direction: column;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Estilos para estadísticas de proveedores */
.proveedores-stats {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.proveedor-stat-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
}

.proveedor-stat-item:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
    transform: translateX(4px);
}

.proveedor-info h5 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.proveedor-info small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.proveedor-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 100px;
}

.mini-progress {
    flex: 1;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.mini-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color), var(--success-dark));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.proveedor-progress span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 35px;
    text-align: right;
}

.proveedor-stats-detail {
    display: flex;
    gap: 0.5rem;
}

/* Estilos específicos para métricas de progreso */
.metric-compact.progreso-total .metric-icon {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.metric-compact.progreso-validados .metric-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.metric-compact.progreso-pendientes .metric-icon {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
}

.metric-compact.progreso-rechazados .metric-icon {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
}

.metric-compact.progreso-revision .metric-icon {
    background: linear-gradient(135deg, var(--info-color), var(--info-dark));
}

/* Estilos para tarjetas de progreso */
.framework-progress-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.framework-progress-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.framework-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.framework-title h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.framework-title p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.framework-progress-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
    font-weight: 600;
    text-align: center;
}

.circle-progress span {
    font-size: 0.9rem;
}

.framework-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

.stat-mini:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.stat-mini i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.stat-mini.validados i {
    color: var(--success-color);
}

.stat-mini.revision i {
    color: var(--info-color);
}

.stat-mini.pendientes i {
    color: var(--warning-color);
}

.stat-mini.rechazados i {
    color: var(--danger-color);
}

.stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.framework-progress-bar {
    margin-bottom: 1.5rem;
}

.progress-segments {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--gray-200);
}

.segment {
    height: 100%;
    transition: width 0.3s ease;
}

.segment.validados {
    background: var(--success-color);
}

.segment.revision {
    background: var(--info-color);
}

.segment.rechazados {
    background: var(--danger-color);
}

.segment.pendientes {
    background: var(--warning-color);
}

.framework-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.btn-framework-action {
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-framework-action.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
}

.btn-framework-action.primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    transform: translateY(-1px);
}

.btn-framework-action.secondary {
    background: var(--gray-100);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.btn-framework-action.secondary:hover {
    background: var(--gray-200);
    border-color: var(--primary-color);
}

.completion-badge {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark));
    color: var(--text-white);
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-summary-section {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--border-light);
}

.summary-header {
    text-align: center;
    margin-bottom: 2rem;
}

.summary-header h3 {
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
}

.summary-header p {
    color: var(--text-muted);
    margin: 0;
}

/* Estilos para sección de ayuda en progreso */
.help-section {
    margin-top: 2rem;
}

.help-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.help-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.help-header h3 {
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.help-header p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.9rem;
}

.status-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

.legend-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.legend-icon.validado {
    background: var(--success-color);
}

.legend-icon.revision {
    background: var(--info-color);
}

.legend-icon.pendiente {
    background: var(--warning-color);
}

.legend-icon.rechazado {
    background: var(--danger-color);
}

.legend-text {
    flex: 1;
}

.legend-text strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.legend-text small {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.3;
}

.help-tip {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
    padding: 1rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.help-tip i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Estilos específicos para la tabla de progreso de frameworks */
#frameworks-progress-table .col-framework {
    width: 25%;
    min-width: 250px;
}

#frameworks-progress-table .col-estado {
    width: 10%;
    min-width: 100px;
}

#frameworks-progress-table .col-empresa {
    width: 18%;
    min-width: 180px;
}

#frameworks-progress-table .col-progreso {
    width: 15%;
    min-width: 140px;
}

#frameworks-progress-table .col-requisitos {
    width: 12%;
    min-width: 120px;
}

#frameworks-progress-table .col-acciones {
    width: 15%;
    min-width: 140px;
}

#frameworks-progress-table .col-number {
    width: 5%;
    min-width: 50px;
}

.metric-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    line-height: 1;
}

.metric-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-detail {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Filtros ultra-compactos */
.filters-toolbar {
    background: var(--gray-50);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.filters-toolbar.ultra-compact {
    padding: 0.4rem 0.6rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    min-height: 2.5rem;
}

.filters-container {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-wrap: wrap;
    justify-content: space-between;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 140px;
}

.filter-group.compact {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 120px;
    flex-shrink: 0;
}

.filter-group label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 0.1rem;
}

.search-group {
    flex: 1;
    min-width: 250px;
}

.input-with-icon {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 0.75rem;
    z-index: 1;
}

.filter-input {
    width: 100%;
    padding: 0.4rem 0.6rem 0.4rem 2rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--text-white);
    color: var(--text-primary);
    font-size: 0.8rem;
    transition: all 0.2s ease;
    height: 32px;
    box-sizing: border-box;
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(30, 64, 175, 0.2);
}

.filter-input::placeholder {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.filter-select {
    padding: 0.4rem 2rem 0.4rem 0.6rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--text-white);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 32px;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.4rem center;
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(30, 64, 175, 0.2);
}

.filter-actions {
    display: flex;
    align-items: flex-end;
}

.btn-filter-reset {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--text-white);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.btn-filter-reset:hover {
    background: var(--danger-color);
    color: var(--text-white);
    border-color: var(--danger-color);
}

/* Botones de acción en la toolbar */
.toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-left: auto;
}

.btn-action-toolbar {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    height: 32px;
    box-sizing: border-box;
}

.btn-action-toolbar.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
    box-shadow: 0 1px 4px rgba(30, 64, 175, 0.3);
}

.btn-action-toolbar.primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.4);
}

.btn-action-toolbar.secondary {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    color: var(--text-white);
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.3);
}

.btn-action-toolbar.secondary:hover {
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

.btn-action-toolbar i {
    font-size: 0.75rem;
}

/* Tabla con menos margen superior */
.data-panel {
    margin-top: 0.5rem;
}

/* Overlay de carga de contenido */
.content-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.content-loading-overlay.active {
    display: flex;
}

.content-loading-overlay .spinner {
    border: 3px solid var(--border-light);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.content-loading-overlay p {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

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

/* Estilos específicos para validaciones */
.validacion-item {
    background: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.validacion-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(31, 81, 255, 0.15);
}

.validacion-header {
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.proveedor-nombre {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.proveedor-nombre i {
    margin-right: 0.5rem;
    color: var(--accent-color);
}

.requisito-titulo {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.requisito-titulo i {
    margin-right: 0.5rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.en_proceso {
    background: #ffc107;
    color: #212529;
}

.status-badge.aprobado {
    background: #28a745;
    color: white;
}

.status-badge.rechazado {
    background: #dc3545;
    color: white;
}

.validacion-content {
    padding: 1.5rem;
}

.requisito-description,
.comentarios-proveedor,
.archivo-section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.requisito-description:last-child,
.comentarios-proveedor:last-child,
.archivo-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.requisito-description strong,
.comentarios-proveedor strong,
.archivo-section strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.5rem;
}

.requisito-description strong i,
.comentarios-proveedor strong i,
.archivo-section strong i {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

.btn-file-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-file-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 81, 255, 0.3);
}

.btn-file-link i {
    margin-right: 0.5rem;
}

.sin-archivo {
    color: var(--text-secondary);
    font-style: italic;
}

.sin-archivo i {
    margin-right: 0.5rem;
}

.fecha-info {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.fecha-info i {
    margin-right: 0.5rem;
}

.validacion-actions {
    padding: 1rem 1.5rem;
    background: var(--background-light);
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Botón de acción estándar con texto */
.btn-action-text {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-action-text.success {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.btn-action-text.success:hover {
    transform: var(--transform-hover);
    box-shadow: var(--hover-shadow-success);
}

.btn-action-text.danger {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

.btn-action-text.danger:hover {
    transform: var(--transform-hover);
    box-shadow: var(--hover-shadow-danger);
}

.btn-action-text.warning {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529;
}

.btn-action-text.warning:hover {
    transform: var(--transform-hover);
    box-shadow: var(--hover-shadow-warning);
}

/* Métricas específicas para validaciones */
.metric-compact.pending .metric-icon {
    background: linear-gradient(135deg, #ffc107, #e0a800);
}

.metric-compact.approved .metric-icon {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.metric-compact.rejected .metric-icon {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

/* Métricas específicas para requisitos */
.metric-compact.requisitos-obligatorios .metric-icon {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.metric-compact.requisitos-opcionales .metric-icon {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.metric-compact.requisitos-categorias .metric-icon {
    background: linear-gradient(135deg, #17a2b8, #138496);
}

.metric-compact.requisitos-total .metric-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

/* Estilos específicos para tabla de requisitos */
.row-obligatorio {
    border-left: 3px solid #dc3545;
}

.row-opcional {
    border-left: 3px solid #6c757d;
}

.badge-category {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-category.seguridad {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

.badge-category.ambiental {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.badge-category.calidad {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
}

.badge-category.financiera {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529;
}

.badge-category.legal {
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
    color: white;
}

.badge-category.otro {
    background: linear-gradient(135deg, #6c757d, #545b62);
    color: white;
}

.badge-obligatorio {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-opcional {
    background: linear-gradient(135deg, #6c757d, #545b62);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.frameworks-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 120px;
    overflow-y: auto;
}

.framework-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.25rem 0.5rem;
    background: var(--background-light);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.framework-item:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
}

.framework-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.framework-code {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.75rem;
}

.description-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-primary);
}

/* Anchos específicos para tabla de requisitos */
.col-title {
    width: 18%;
    max-width: 200px;
}

.col-description {
    width: 28%;
    max-width: 300px;
}

.col-category {
    width: 12%;
    min-width: 110px;
}

.col-framework {
    width: 20%;
    max-width: 220px;
}

.col-type {
    width: 12%;
    min-width: 120px;
}

.col-actions {
    width: 12%;
    min-width: 170px;
}

/* Mejoras para el contenido de las celdas */
.cell-title {
    display: flex;
    flex-direction: column;
}

.title-text {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.3;
}

.subtitle-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* Mejora para el header con sorting */
.th-content {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.th-content .sort-icon {
    margin-left: auto;
    opacity: 0.6;
    font-size: 0.8rem;
}

/* Responsive para tabla de requisitos */
@media (max-width: 1200px) {
    .col-description {
        max-width: 200px;
    }
    
    .col-framework {
        max-width: 150px;
    }
    
    .description-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .frameworks-list {
        gap: 0.15rem;
    }
    
    .framework-item {
        font-size: 0.75rem;
        padding: 0.1rem 0.3rem;
    }
    
    .badge-category,
    .badge-obligatorio,
    .badge-opcional {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Asegurar que actions-group esté siempre en línea */
.actions-group {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    align-items: center;
}

.filters-toolbar.ultra-compact .actions-group {
    margin-left: auto;
    flex-shrink: 0;
}

/* Responsive mejorado para filtros */
@media (max-width: 1200px) {
    .filters-toolbar.ultra-compact {
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    
    .filter-group.compact {
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .filters-toolbar.ultra-compact {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .actions-group {
        justify-content: center;
        margin-left: 0;
    }
    
    .filter-group.compact {
        min-width: auto;
        flex: 1;
    }
}

/* Estilos específicos para tabla de validaciones */
.validation-row-en_proceso {
    border-left: 3px solid #fbbf24;
}

.validation-row-aprobado {
    border-left: 3px solid #10b981;
}

.validation-row-rechazado {
    border-left: 3px solid #ef4444;
}

.cell-proveedor {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.proveedor-name {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.proveedor-name i {
    color: var(--primary-color);
}

.proveedor-comment {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.proveedor-comment i {
    color: var(--info-color);
}

.cell-requisito {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.requisito-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.requisito-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.badge-estado {
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
}

.badge-estado.en_proceso {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #92400e;
}

.badge-estado.aprobado {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.badge-estado.rechazado {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.archivo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.archivo-link:hover {
    background: var(--primary-light);
    color: white;
    transform: translateY(-1px);
}

.no-archivo {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.fecha-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.fecha-principal {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.fecha-hora {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Botones de acción específicos para validaciones */
.btn-action.approve {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.btn-action.approve:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-action.reject {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.btn-action.reject:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-action.revision {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.btn-action.revision:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Anchos específicos para tabla de validaciones */
.col-proveedor {
    width: 20%;
    max-width: 200px;
}

.col-requisito {
    width: 25%;
    max-width: 250px;
}

.col-estado {
    width: 12%;
    min-width: 120px;
}

.col-archivo {
    width: 12%;
    min-width: 100px;
}

.col-fecha {
    width: 12%;
    min-width: 100px;
}

/* Responsive para tabla de validaciones */
@media (max-width: 1200px) {
    .col-proveedor {
        max-width: 180px;
    }
    
    .col-requisito {
        max-width: 200px;
    }
    
    .proveedor-comment,
    .requisito-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .badge-estado {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    .archivo-link,
    .no-archivo {
        font-size: 0.75rem;
    }
    
    .fecha-principal {
        font-size: 0.8rem;
    }
    
    .fecha-hora {
        font-size: 0.7rem;
    }
}

/* Estilos específicos para validación de requisitos */
.validation-req-row {
    border-left: 3px solid #f59e0b;
}

.validation-req-row:hover {
    background: rgba(245, 158, 11, 0.05);
}

.empresa-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.empresa-name {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.empresa-name i {
    color: var(--primary-color);
}

.categoria-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.subcategoria-text,
.grupo-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.validation-actions-inline {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}

/* Métricas específicas para validación de requisitos */
.metric-compact.validation-pendientes .metric-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.metric-compact.validation-validados .metric-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.metric-compact.validation-rechazados .metric-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.metric-compact.validation-total .metric-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

/* Anchos específicos para tabla de validación de requisitos */
.col-empresa {
    width: 18%;
    max-width: 180px;
}

.col-title {
    width: 25%;
    max-width: 250px;
}

.col-categoria-validacion {
    width: 15%;
    max-width: 150px;
}

/* Responsive para validación de requisitos */
@media (max-width: 1200px) {
    .col-empresa {
        max-width: 150px;
    }
    
    .col-title {
        max-width: 200px;
    }
    
    .empresa-name {
        font-size: 0.85rem;
    }
    
    .subcategoria-text,
    .grupo-text {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .validation-actions-inline {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .validation-actions-inline .btn-action {
        width: 100%;
        justify-content: center;
    }
}

/* Estilos específicos para gestión de tareas */
.tareas-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1.5rem;
    height: calc(100vh - 280px);
}

.proveedores-panel,
.detail-panel {
    background: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 1rem 1.5rem;
}

.detail-panel .panel-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.detail-panel .panel-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-panel .btn-toggle-panel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.detail-panel .btn-toggle-panel:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.detail-panel .btn-toggle-panel i {
    transition: transform 0.3s ease;
}

.detail-panel .selected-proveedor-name {
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.detail-panel .codigo-proveedor {
    opacity: 0.8;
    font-size: 0.85rem;
    margin-left: 0.25rem;
}

/* Funcionalidad simple de ocultar/mostrar panel de proveedores */
.proveedores-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.proveedores-panel .panel-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.proveedores-panel .panel-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tareas-layout {
    transition: grid-template-columns 0.3s ease;
}

.panel-content {
    flex: 1;
    overflow: hidden;
}

.proveedores-panel .panel-content {
    overflow-y: auto;
}

.detail-panel .panel-content {
    padding: 1.5rem;
    overflow-y: auto;
}

/* Tabla de proveedores compacta */
.proveedores-table {
    font-size: 0.85rem;
}

.proveedores-table .data-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.proveedores-table .data-row:hover {
    background: var(--primary-lighter);
    transform: scale(1.005);
}

.proveedores-table .data-row.selected {
    background: var(--primary-light) !important;
    border-left: 4px solid var(--primary-color) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important;
}

.proveedores-table .data-row.selected:hover {
    background: var(--primary-light) !important;
}

.proveedores-table .col-id {
    width: 40px;
}

.proveedores-table .col-proveedor {
    width: auto;
}

.proveedores-table .col-empresas {
    width: 80px;
    text-align: center;
}

.proveedores-table .col-estado {
    width: 90px;
}

.cell-proveedor {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.proveedor-name {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    line-height: 1.2;
}

.proveedor-name i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.proveedor-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empresas-info {
    text-align: center;
}

.empresas-count {
    font-size: 0.8rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.empresas-count i {
    color: var(--accent-color);
}

.proveedor-email i {
    color: var(--info-color);
}

.empresas-info {
    display: flex;
    align-items: center;
    justify-content: center;
}

.empresas-count {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.empresas-count i {
    color: var(--success-color);
}

.badge-estado-proveedor {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
}

.badge-estado-proveedor.validado {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.badge-estado-proveedor.pendiente {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.badge-estado-proveedor.activo {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

/* Placeholder content mejorado */
.placeholder-content {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.placeholder-content .empty-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.placeholder-content h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.placeholder-content p {
    max-width: 300px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Métricas específicas para tareas */
.metric-compact.tareas-proveedores .metric-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.metric-compact.tareas-empresas .metric-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.metric-compact.tareas-validados .metric-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.metric-compact.tareas-pendientes .metric-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Anchos específicos para tabla de proveedores */
.col-proveedor {
    width: 45%;
}

.col-empresas {
    width: 20%;
    text-align: center;
}

.col-estado {
    width: 25%;
    text-align: center;
}

/* Responsive para gestión de tareas */
@media (max-width: 1200px) {
    .tareas-layout {
        grid-template-columns: 1fr;
        height: auto;
        gap: 1rem;
    }
    
    .proveedores-panel {
        order: 1;
        max-height: 400px;
    }
    
    .detail-panel {
        order: 2;
        max-height: 500px;
    }
}

@media (max-width: 768px) {
    .tareas-layout {
        gap: 0.75rem;
    }
    
    .panel-header {
        padding: 0.75rem 1rem;
    }
    
    .panel-header h3 {
        font-size: 1rem;
    }
    
    .detail-panel .panel-content {
        padding: 1rem;
    }
    
    .proveedor-name,
    .proveedor-email {
        font-size: 0.8rem;
    }
    
    .empresas-count {
        font-size: 0.8rem;
    }
    
    .badge-estado-proveedor {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Tabla mejorada con bordes y números de fila */
.table-container {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-primary);
}

.data-table.bordered {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.data-table.bordered th,
.data-table.bordered td {
    border: 1px solid var(--border-light);
    padding: 0.75rem;
    text-align: left;
    vertical-align: middle;
}

.data-table.bordered th {
    background: linear-gradient(135deg, var(--bg-secondary), var(--gray-100));
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--primary-color);
}

.data-table.bordered th i {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

.data-table.bordered tbody tr {
    transition: background-color 0.2s ease;
}

.data-table.bordered tbody tr:hover {
    background: var(--bg-hover);
}

.data-table.bordered tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.data-table.bordered tbody tr:nth-child(even):hover {
    background: var(--bg-hover);
}

/* Columnas específicas */
.col-number {
    width: 60px;
    text-align: center;
    background: var(--bg-secondary);
}

.row-number {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: var(--primary-color);
    color: var(--text-white);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.col-type {
    width: 140px;
    min-width: 120px;
}

.col-entity {
    width: 250px;
    min-width: 220px;
}

.col-code {
    width: 100px;
    min-width: 90px;
    text-align: center;
}

.col-contact {
    width: 200px;
    min-width: 180px;
}

.col-status {
    width: 120px;
    min-width: 110px;
    text-align: center;
}

.col-actions {
    width: 160px;
    min-width: 150px;
    text-align: center;
}

.col-user-id {
    width: 80px;
    min-width: 70px;
    text-align: center;
}

/* Estilos para tipos de entidad mejorados */
.entity-type {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: fit-content;
}

.entity-type.empresa {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.entity-type.proveedor {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
}

.entity-type.admin {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
}

/* Estilos para categorías de requisitos */
.entity-type.seguridad {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.entity-type.ambiental {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.entity-type.calidad {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.entity-type.financiera {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: var(--text-primary);
}

.entity-type.legal {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.entity-type.otro,
.entity-type.general {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.entity-type.obligatorio {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
}

.entity-type.opcional {
    background: linear-gradient(135deg, var(--info-color), var(--info-dark));
}

.entity-type i {
    font-size: 0.8rem;
}

.entity-type span {
    white-space: nowrap;
}

/* Información de entidad */
.entity-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.entity-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.2;
}

.entity-cif {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

/* Código de entidad */
.entity-code {
    display: flex;
    align-items: center;
    justify-content: center;
}

.code-display {
    background: var(--bg-secondary);
    color: var(--primary-color);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid var(--border-light);
    min-width: 60px;
    text-align: center;
}

/* Información de contacto simplificada */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-email {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.contact-email i {
    color: var(--primary-color);
    width: 12px;
    font-size: 0.75rem;
}

/* Estados con badges simplificados */
.status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: fit-content;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-text {
    white-space: nowrap;
}

/* Estados específicos */
.status-badge.activo {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-dark);
    border: 1px solid var(--success-color);
}

.status-badge.activo .status-dot {
    background: var(--success-color);
}

.status-badge.pendiente {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-dark);
    border: 1px solid var(--warning-color);
}

.status-badge.pendiente .status-dot {
    background: var(--warning-color);
}

.status-badge.en_revision {
    background: rgba(30, 64, 175, 0.1);
    color: var(--info-dark);
    border: 1px solid var(--info-color);
}

.status-badge.en_revision .status-dot {
    background: var(--info-color);
}

.status-badge.validado {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-dark);
    border: 1px solid var(--success-color);
}

.status-badge.validado .status-dot {
    background: var(--success-color);
}

.status-badge.rechazado {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-dark);
    border: 1px solid var(--danger-color);
}

.status-badge.rechazado .status-dot {
    background: var(--danger-color);
}

/* Animación para puntos de estado */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Botones de acción mejorados */
.action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: nowrap;
    min-width: 160px;
}

/* Botón de acción pequeño (iconos) */
.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
}

.btn-action::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: left 0.5s ease;
}

.btn-action:hover::before {
    left: 100%;
}

.btn-action.view {
    color: var(--info-color);
    border-color: var(--info-color);
}

.btn-action.view:hover {
    background: var(--info-color);
    color: var(--text-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
}

.btn-action.edit {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.btn-action.edit:hover {
    background: var(--warning-color);
    color: var(--text-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-action.link {
    color: var(--success-color);
    border-color: var(--success-color);
}

.btn-action.link:hover {
    background: var(--success-color);
    color: var(--text-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-action.status {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-action.status:hover {
    background: var(--primary-color);
    color: var(--text-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
}

.btn-action.delete {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-action.delete:hover {
    background: var(--danger-color);
    color: var(--text-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-action.justify {
    color: var(--success-color);
    border-color: var(--success-color);
}

.btn-action.justify:hover {
    background: var(--success-color);
    color: var(--text-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-action.upload {
    color: #6366f1;
    border-color: #6366f1;
}

.btn-action.upload:hover {
    background: #6366f1;
    color: var(--text-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* Estilos para roles de usuario */
.role-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-white);
    width: fit-content;
}

.role-badge.admin {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
}

.role-badge.empresa {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.role-badge.proveedor {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
}

.role-badge i {
    font-size: 0.8rem;
}

.role-badge span {
    white-space: nowrap;
}

/* Información de usuario */
.header-right .user-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--spacing-md) !important;
}

.header-right .user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Contenedor para rol y empresa en la misma línea */
.user-details .user-role-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.2;
}

.user-id {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .entity-type, .role-badge {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 6px;
    }
    
    .entity-type span, .role-badge span {
        font-size: 0.7rem;
    }
    
    .entity-info, .user-info {
        text-align: center;
    }
    
    .entity-name, .user-name {
        font-size: 0.85rem;
    }
    
    .contact-info {
        align-items: center;
        text-align: center;
    }
    
    .action-buttons {
        justify-content: center;
    }
    
    .btn-action {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    .header-metrics {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .metric-compact {
        min-width: 120px;
    }
    
    .filters-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        min-width: auto;
        width: 100%;
    }
    
    .search-group {
        min-width: auto;
    }
    
    .filter-actions {
        margin-top: 0.5rem;
        justify-content: center;
    }
    
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-metrics {
        margin-top: 1rem;
        justify-content: center;
    }
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS PARA PANEL DE DETALLES DE PROVEEDORES
   ========================================================================== */

/* Estilos del panel de detalles del proveedor */
.proveedor-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.detail-section .section-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    padding-bottom: 0.75rem;
}

.detail-section .section-header h3 {
    margin: 0;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-section .section-header h4 {
    margin: 0;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.info-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
}

.badge-estado-proveedor {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-estado-proveedor.validado {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.badge-estado-proveedor.pendiente {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white;
}

.badge-estado-proveedor.activo {
    background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
    color: white;
}

.empresas-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--accent-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Tabla mini de empresas */
.empresas-container {
    padding: 1rem;
}

.mini-table-container {
    max-height: 200px;
    overflow-y: auto;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.mini-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 0.85rem;
}

.mini-table th {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
    color: white;
    padding: 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.mini-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.mini-table tr:hover {
    background: rgba(15, 52, 96, 0.02);
}

.empresa-item-mini {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.empresa-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.empresa-code {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.badge-estado {
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.badge-estado.activo {
    background: #e3f2fd;
    color: #1976d2;
}

.badge-estado.validado {
    background: #e8f5e8;
    color: #2e7d32;
}

.approval-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.approval-status.approved {
    color: #2e7d32;
}

.approval-status.pending {
    color: #f57c00;
}

/* Sección de frameworks */
.frameworks-section {
    padding: 1rem;
}

.frameworks-container {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    border: 1px dashed var(--border-color);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botones Industriales Generales */
.btn-industrial {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-industrial.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
}

.btn-industrial.primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4);
}

.btn-industrial.secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-industrial.secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-industrial i {
    font-size: 0.8rem;
}

/* Acciones del panel de detalles */
.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.3);
}

.btn-action-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-action-detail.primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
}

.btn-action-detail.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.btn-action-detail.secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

.btn-action-detail:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.empty-state-small {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.empty-state-small i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--border-color);
}

.empty-state-small p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive para panel de detalles */
@media (max-width: 1024px) {
    .tareas-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
        min-height: calc(100vh - 280px);
    }
    
    .proveedores-panel {
        max-height: 300px;
    }
    
    .detail-panel {
        min-height: 400px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .btn-action-detail {
        flex: 1;
        min-width: 120px;
    }
}

/* ==========================================================================
   ESTILOS INDUSTRIALES PARA FRAMEWORKS Y REQUISITOS DINÁMICOS
   ========================================================================== */

/* Contenedor principal de frameworks */
.frameworks-detallados-industrial {
    margin-top: 1rem;
}

.frameworks-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 0.75rem 1rem;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--border-color);
}

.frameworks-header h3 {
    margin: 0;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.frameworks-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Tarjetas de frameworks */
.framework-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.framework-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid var(--border-light);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.framework-info {
    flex: 1;
    min-width: 0; /* Permite que el contenido se contraiga */
    margin-right: 1rem;
}

.framework-title {
    margin: 0 0 0.25rem 0;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: break-word;
}

.framework-code {
    margin: 0 0 0.25rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    word-break: break-word;
}

.framework-description {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.framework-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    min-width: 140px;
    max-width: 200px;
    flex-shrink: 0;
}

.badge-framework-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-framework-estado.completado {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.badge-framework-estado.en_progreso {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white;
}

.badge-framework-estado.asignado {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

.progress-info {
    text-align: right;
}

.progress-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    display: block;
}

.progress-bar {
    width: 80px;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color) 0%, var(--primary-color) 100%);
    transition: width 0.3s ease;
}

.approval-info {
    text-align: right;
}

.approval-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.approval-badge.approved {
    color: var(--success-color);
}

.approval-badge.pending {
    color: var(--warning-color);
}

/* Acciones de framework */
.framework-actions {
    padding: 0 1rem 1rem 1rem;
}

.btn-framework-requisitos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.btn-framework-requisitos:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.requisitos-container {
    margin-top: 1rem;
}

/* Estados vacíos para frameworks */
.empty-state-frameworks {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px dashed var(--border-color);
}

.empty-state-frameworks i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--border-color);
}

.empty-state-frameworks h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

/* ==========================================================================
   ESTILOS INDUSTRIALES PARA TABLA DE REQUISITOS DE FRAMEWORKS
   ========================================================================== */

.requisitos-framework-table {
    background: white;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-top: 1rem;
}

.section-header-small {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-color) 100%);
    padding: 0.75rem 1rem;
}

.section-header-small h5 {
    margin: 0;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Header content para contener título y botón de colapso */
.section-header-small .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Botón de colapso/expandir frameworks */
.btn-toggle-collapse {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-toggle-collapse:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.btn-toggle-collapse i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

/* ✨ MÉTRICAS ESPECÍFICAS DEL FRAMEWORK */
.framework-metrics {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 252, 0.95));
    border-bottom: 1px solid var(--border-light);
}

.framework-metrics .header-metrics {
    display: flex;
    gap: 1rem;
    justify-content: space-around;
    margin: 0;
}

.framework-metrics .metric-compact {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    flex: 1;
    min-width: 0;
}

.framework-metrics .metric-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.framework-metrics .metric-compact.framework-en-revision {
    border-left: 4px solid #f59e0b;
}

.framework-metrics .metric-compact.framework-validados {
    border-left: 4px solid #10b981;
}

.framework-metrics .metric-compact.framework-rechazados {
    border-left: 4px solid #ef4444;
}

.framework-metrics .metric-compact.framework-por-validar {
    border-left: 4px solid #6b7280;
}

.framework-metrics .metric-compact .metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.framework-metrics .metric-compact .metric-icon i {
    font-size: 1.25rem;
}

.framework-metrics .metric-compact.framework-en-revision .metric-icon i {
    color: #f59e0b;
}

.framework-metrics .metric-compact.framework-validados .metric-icon i {
    color: #10b981;
}

.framework-metrics .metric-compact.framework-rechazados .metric-icon i {
    color: #ef4444;
}

.framework-metrics .metric-compact.framework-por-validar .metric-icon i {
    color: #6b7280;
}

.framework-metrics .metric-compact .metric-data {
    text-align: center;
}

.framework-metrics .metric-compact .metric-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.framework-metrics .metric-compact .metric-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

/* Responsive para métricas del framework */
@media (max-width: 768px) {
    .framework-metrics .header-metrics {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .framework-metrics .metric-compact {
        flex: 1 1 calc(50% - 0.375rem);
    }
}

@media (max-width: 480px) {
    .framework-metrics .header-metrics {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .framework-metrics .metric-compact {
        flex: none;
    }
    
    .framework-metrics {
        padding: 0.75rem;
    }
}

/* Tabla de requisitos */
.requisitos-table {
    font-size: 0.85rem;
    max-height: 500px;
    overflow-y: auto;
}

.requisitos-table .col-orden {
    width: 50px;
    text-align: center;
}

.requisitos-table .col-requisito {
    width: auto;
    min-width: 250px;
}

.requisitos-table .col-categoria {
    width: 120px;
}

.requisitos-table .col-peso {
    width: 80px;
    text-align: center;
}

.requisitos-table .col-estado {
    width: 120px;
}

.requisitos-table .col-acciones {
    width: 180px;
    text-align: center;
}

.requisito-row {
    transition: all 0.2s ease;
}

.requisito-row:hover {
    background: rgba(15, 52, 96, 0.02);
}

.requisito-row.validado {
    border-left: 4px solid var(--success-color);
    background: rgba(40, 167, 69, 0.02);
}

.requisito-row.en-revision {
    border-left: 4px solid var(--warning-color);
    background: rgba(255, 193, 7, 0.02);
}

.requisito-row.rechazado {
    border-left: 4px solid var(--danger-color);
    background: rgba(220, 53, 69, 0.02);
}

.requisito-row.no-presentado {
    border-left: 4px solid var(--secondary-color);
    background: rgba(108, 117, 125, 0.02);
}

/* Contenido de la celda de requisito */
.cell-requisito {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.requisito-title-main {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.3;
}

.requisito-title-main i {
    color: var(--primary-color);
    font-size: 0.85rem;
}

.requisito-description-main {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.obligatorio-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.opcional-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.observaciones-preview {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.4rem;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.observaciones-preview i {
    color: var(--primary-color);
    font-size: 0.7rem;
}

/* Información de categoría */
.categoria-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.categoria-nombre {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.grupo-nombre {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Badge de peso */
.peso-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--accent-color);
    color: white;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Estados de requisitos */
.badge-requisito-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-requisito-estado.validado {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.badge-requisito-estado.en-revision {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white;
}

.badge-requisito-estado.rechazado {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.badge-requisito-estado.no-presentado {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

.fecha-validacion {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-style: italic;
}

/* Acciones mini */
.actions-group {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.btn-action-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

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

.btn-action-mini.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.btn-action-mini.danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.btn-action-mini.warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white;
}

.btn-action-mini.secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

/* Footer con estadísticas */
.table-footer-stats {
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.stats-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.stat-mini {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.stat-mini i {
    font-size: 0.9rem;
}

.stat-mini.validados {
    color: var(--success-color);
}

.stat-mini.en-revision {
    color: var(--warning-color);
}

.stat-mini.rechazados {
    color: var(--danger-color);
}

.stat-mini.pendientes {
    color: var(--secondary-color);
}

.stat-mini span {
    font-weight: 700;
    margin-right: 0.2rem;
}



/* Responsive para tabla de requisitos */
@media (max-width: 768px) {
    .requisitos-table .col-categoria,
    .requisitos-table .col-peso {
        display: none;
    }
    
    .requisitos-table .col-acciones {
        width: 120px;
    }
    
    .actions-group {
        flex-wrap: wrap;
    }
    
    .btn-action-mini {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    
    .stats-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .stat-mini {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .requisitos-table .col-estado {
        display: none;
    }
    
    .requisitos-table .col-acciones {
        width: 80px;
    }
    
    .actions-group {
        gap: 0.15rem;
    }
    
    .btn-action-mini {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
    
    .observaciones-preview {
        display: none;
    }
}

/* ==========================================================================
   ESTILOS INDUSTRIALES PARA DASHBOARD
   ========================================================================== */

/* Grid principal del dashboard */
.dashboard-content {
    padding: 0;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-card {
    background: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.dashboard-card.full-width {
    grid-column: 1 / -1;
}

/* Tarjeta de progreso */
.progress-card .card-content {
    padding: var(--spacing-xl); /* Usa el padding largo unificado */
}

.progress-dashboard {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.progress-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    position: relative;
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: white;
    border-radius: 50%;
}

.progress-value {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.progress-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(15, 52, 96, 0.05);
    border-radius: 6px;
    border-left: 4px solid var(--primary-color);
}

.progress-label {
    font-weight: 500;
    color: var(--text-primary);
}

.progress-number {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-color);
}

/* Actividad reciente */
.activity-card .card-content {
    padding: 0; /* Sin padding - usa la clase unificada */
}

.activity-list {
    max-height: 350px;
    overflow-y: auto;
}

.activity-item-dash {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease;
}

.activity-item-dash:hover {
    background: rgba(15, 52, 96, 0.02);
}

.activity-item-dash:last-child {
    border-bottom: none;
}

.activity-icon-dash {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.activity-content-dash {
    flex: 1;
}

.activity-title-dash {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.activity-description-dash {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.activity-time-dash {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.activity-footer, .tasks-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.btn-see-more {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-see-more:hover {
    background: var(--primary-lighter);
}

/* Tareas pendientes */
.tasks-card .card-content {
    padding: 0;
}

.tasks-list {
    max-height: 350px;
    overflow-y: auto;
}

.task-item-dash {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease;
}

.task-item-dash:hover {
    background: rgba(15, 52, 96, 0.02);
}

.task-item-dash:last-child {
    border-bottom: none;
}

.task-item-dash.priority-alta {
    border-left: 4px solid var(--danger-color);
}

.task-item-dash.priority-media {
    border-left: 4px solid var(--warning-color);
}

.task-item-dash.priority-baja {
    border-left: 4px solid var(--success-color);
}

.task-icon-dash {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--accent-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.task-content-dash {
    flex: 1;
}

.task-title-dash {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.task-description-dash {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.task-due-dash {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.task-due-dash.overdue {
    color: var(--danger-color);
    font-weight: 600;
}

.task-priority-dash {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    align-self: flex-start;
}

.task-priority-dash.priority-alta {
    background: var(--danger-color);
    color: white;
}

.task-priority-dash.priority-media {
    background: var(--warning-color);
    color: white;
}

.task-priority-dash.priority-baja {
    background: var(--success-color);
    color: white;
}

/* Estados vacíos */
.empty-state-dash {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-state-dash i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--border-color);
}

.empty-state-dash.success i {
    color: var(--success-color);
}

/* Frameworks del dashboard */
.frameworks-grid-dash {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.framework-card-dash {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.framework-card-dash:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.framework-header-dash {
    margin-bottom: 1rem;
}

.framework-name-dash {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.framework-empresa-dash {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.framework-progress-dash {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.progress-bar-mini {
    flex: 1;
    height: 8px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill-mini {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color) 0%, var(--primary-color) 100%);
    transition: width 0.3s ease;
}

.progress-text-mini {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
}

.framework-action-dash {
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Acciones rápidas del dashboard */
.actions-grid-dash {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.action-btn-dash {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: white;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--text-primary);
}

.action-btn-dash:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.action-btn-dash.admin {
    border-color: var(--primary-color);
}

.action-btn-dash.admin:hover {
    background: var(--primary-lighter);
}

.action-btn-dash.empresa {
    border-color: var(--success-color);
}

.action-btn-dash.empresa:hover {
    background: #e8f5e8;
}

.action-btn-dash.proveedor {
    border-color: var(--warning-color);
}

.action-btn-dash.proveedor:hover {
    background: #fff3cd;
}

.action-btn-dash i {
    font-size: 2rem;
    color: inherit;
}

.action-btn-dash span {
    font-weight: 600;
    text-align: center;
}

/* ==========================================================================
   ESTILOS INDUSTRIALES PARA REPORTES
   ========================================================================== */

.reportes-content {
    padding: 0;
}

.reportes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.reporte-card {
    background: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.reporte-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.reporte-card.full-width {
    grid-column: 1 / -1;
}

/* Gráfico de progreso circular */
.progress-overview .card-content {
    padding: 2rem;
}

.cumplimiento-visual {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.cumplimiento-circle {
    position: relative;
    width: 150px;
    height: 150px;
}

.circle-progress {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        var(--primary-color) 0deg,
        var(--primary-color) calc(var(--progress) * 3.6deg),
        var(--border-light) calc(var(--progress) * 3.6deg),
        var(--border-light) 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-inner {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.progress-percentage {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.progress-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.cumplimiento-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.stat-detail.critical {
    border-left-color: var(--danger-color);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Tabla de reportes */
.reportes-table {
    font-size: 0.9rem;
}

.reportes-table .col-posicion {
    width: 60px;
    text-align: center;
}

.reportes-table .col-proveedor {
    width: auto;
    min-width: 200px;
}

.reportes-table .col-framework {
    width: 150px;
}

.reportes-table .col-cumplimiento {
    width: 150px;
}

.reportes-table .col-validados,
.reportes-table .col-revision,
.reportes-table .col-rechazados,
.reportes-table .col-pendientes {
    width: 100px;
    text-align: center;
}

.reporte-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.reporte-row:hover {
    background: rgba(15, 52, 96, 0.02);
    transform: scale(1.005);
}

.proveedor-info-reporte {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.proveedor-name {
    font-weight: 600;
    color: var(--text-primary);
}

.proveedor-code {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.ranking-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    color: white;
}

.ranking-badge.pos-1 {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
}

.ranking-badge.pos-2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
    color: #333;
}

.ranking-badge.pos-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
    color: white;
}

.ranking-badge:not(.pos-1):not(.pos-2):not(.pos-3) {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}

.progress-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progress-bar-cell {
    flex: 1;
    height: 8px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}

.progress-fill-cell {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color) 0%, var(--primary-color) 100%);
    transition: width 0.3s ease;
}

.progress-text-cell {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 45px;
    font-size: 0.85rem;
}

.badge-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
}

.badge-cell.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.badge-cell.warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white;
}

.badge-cell.danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.badge-cell.secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

/* Responsive para dashboard y reportes */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .progress-dashboard,
    .cumplimiento-visual {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .frameworks-grid-dash,
    .actions-grid-dash {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .activity-item-dash,
    .task-item-dash {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .frameworks-grid-dash,
    .actions-grid-dash {
        grid-template-columns: 1fr;
    }
    
    .reportes-table .col-framework,
    .reportes-table .col-revision,
    .reportes-table .col-rechazados {
        display: none;
    }
    
    .reportes-table .col-posicion {
        width: 40px;
    }
}

@media (max-width: 480px) {
    .reportes-table .col-validados,
    .reportes-table .col-pendientes {
        display: none;
    }
    
    .progress-cell {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }
    
    .progress-bar-cell {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .tareas-layout {
        gap: 1rem;
    }
    
    .proveedores-panel {
        max-height: 250px;
    }
    
    .proveedores-table .proveedor-email {
        display: none;
    }
    
    .proveedores-table .col-empresas {
        width: 70px;
    }
    
    .proveedores-table .col-estado {
        width: 80px;
    }
}

/* ==========================================
   PERFIL INDUSTRIAL
   ========================================== */

.profile-industrial-container {
    padding: var(--spacing-lg);
}

.profile-tabs-industrial {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
}

.tab-btn-industrial {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.tab-btn-industrial:hover {
    background: rgba(31, 81, 255, 0.1);
    color: var(--primary-color);
    border-color: rgba(31, 81, 255, 0.3);
}

.tab-btn-industrial.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.tab-btn-industrial i {
    font-size: 1.1rem;
}

.profile-tab-content-industrial {
    display: none;
}

.profile-tab-content-industrial.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

.profile-card-industrial {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.profile-card-industrial .card-header {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.profile-card-industrial .card-header h3 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.profile-card-industrial .card-header h3 i {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.profile-card-industrial .card-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.profile-card-industrial .card-content {
    padding: var(--spacing-lg);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.profile-field label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.field-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
}

.field-value .field-icon {
    color: var(--primary-color);
    font-size: 1rem;
    width: 16px;
    text-align: center;
}

.role-badge-profile {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.preferences-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.preference-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.preference-info h4 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
}

.preference-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.switch-industrial {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch-industrial input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-industrial {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: 0.4s;
}

.slider-industrial:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

.switch-industrial input:checked + .slider-industrial {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.switch-industrial input:checked + .slider-industrial:before {
    transform: translateX(26px);
}

.appearance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.appearance-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.appearance-field label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.select-industrial {
    padding: var(--spacing-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: white;
    font-size: 0.95rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.select-industrial:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(31, 81, 255, 0.1);
}

.security-form {
    max-width: 500px;
}

.form-field {
    margin-bottom: var(--spacing-lg);
}

.form-field label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 1rem;
    z-index: 2;
}

.input-with-icon input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 40px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    transition: all var(--transition-normal);
}

.input-with-icon input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(31, 81, 255, 0.1);
}

.form-actions {
    margin-top: var(--spacing-xl);
}

.logout-card .card-header {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-bottom-color: #fecaca;
}

.logout-card .card-header h3 i {
    color: #dc2626;
}

.logout-actions {
    text-align: center;
}

.btn-danger-outline {
    background: transparent;
    border: 2px solid #dc2626;
    color: #dc2626;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-danger-outline:hover {
    background: #dc2626;
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-action-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: none;
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-action-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Responsive para perfil */
@media (max-width: 768px) {
    .profile-tabs-industrial {
        flex-direction: column;
    }
    
    .tab-btn-industrial {
        justify-content: center;
        text-align: center;
    }
    
    .profile-grid {
        grid-template-columns: 1fr;
    }
    
    .preference-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .appearance-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   FORMULARIOS DE DOCUMENTOS Y EXPIRACIÓN
   =================================== */

/* Checkbox personalizado para requisitos */
.checkbox-group {
    margin: var(--spacing-md) 0;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    transition: all 0.3s ease;
    position: relative;
}

.checkbox-label:hover {
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-checkbox {
    width: 20px;
    height: 20px;
    margin: 0;
    position: relative;
    cursor: pointer;
}

.checkbox-mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: white;
    transition: all 0.3s ease;
}

.form-checkbox:checked + .checkbox-mark {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

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

.checkbox-text {
    flex: 1;
    line-height: 1.4;
}

.checkbox-text strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: 1rem;
}

.checkbox-text small {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Subsección de documentos */
.form-subsection {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(0, 123, 255, 0.03);
    border: 1px solid rgba(0, 123, 255, 0.1);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

/* Container de tipos de documento */
.tipos-documento-container {
    min-height: 200px;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    background: var(--bg-primary);
    transition: all 0.3s ease;
}

.tipos-documento-container:hover {
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.02);
}

.loading-placeholder {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--spacing-xl);
    font-style: italic;
}

.loading-placeholder i {
    margin-right: var(--spacing-sm);
    color: var(--primary-color);
}

/* Grid de tipos de documento */
.tipos-documento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.tipo-documento-item {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.tipo-documento-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.tipo-documento-item.selected {
    border-color: var(--success-color);
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
}

.tipo-documento-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.tipo-documento-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--success-color);
}

.tipo-documento-name {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    font-size: 0.95rem;
}

.tipo-documento-info {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.tipo-documento-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.meta-tag {
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.meta-tag.obligatorio {
    background: linear-gradient(135deg, #fef3cd, #fce4a6);
    color: #856404;
    border-color: #faeaa7;
}

.meta-tag.opcional {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    color: #0c5460;
    border-color: #b3d7e8;
}

/* Sección de expiración */
.expiracion-section {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.expiracion-section .section-header h3 {
    color: #856404;
}

/* Botones de acción específicos */
.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

/* Animaciones para mostrar/ocultar secciones */
.form-subsection,
#fechaFijaSection,
#duracionMesesSection {
    animation: slideDown 0.3s ease-out;
    overflow: hidden;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
}

/* Responsive para formularios extendidos */
@media (max-width: 768px) {
    .tipos-documento-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-label {
        padding: var(--spacing-sm);
    }
    
    .tipo-documento-item {
        padding: var(--spacing-sm);
    }
    
    .form-subsection {
        padding: var(--spacing-md);
    }
}

/* ===============================
   ESTILOS PARA MODAL DE DETALLE
   =============================== */

/* Grid de tipos de documento en modal de detalle */
.document-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.document-type-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: var(--spacing-sm);
    background: var(--background-light);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.document-type-item:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.document-type-item i {
    color: var(--primary-color);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.document-type-item span {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.2;
}

.document-type-item small {
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0.25rem;
}

/* Badges para información de expiración */
.badge-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.badge-info i {
    font-size: 0.7rem;
}

/* Texto muted para valores vacíos */
.text-muted {
    color: var(--text-secondary) !important;
    font-style: italic;
}

/* Mejoras para elementos de detalle con iconos */
.detail-value i {
    margin-right: 0.5rem;
    color: var(--primary-color);
    font-size: 0.9rem;
}

/* Item de detalle de ancho completo */
.detail-item.full-width {
    grid-column: 1 / -1;
}

/* Responsive para modal de detalle */
@media (max-width: 768px) {
    .document-types-grid {
        grid-template-columns: 1fr;
    }
    
    .document-type-item {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .detail-item.full-width {
        grid-column: 1;
    }
}

/* =================================================================
   ESTILOS PARA AUTENTICACIÓN DE DOBLE FACTOR (MFA)
   ================================================================= */

/* Inputs especiales para códigos MFA */
.mfa-code-input, .backup-code-input {
    text-align: center !important;
    font-family: var(--font-mono) !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3rem !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
}

.mfa-code-input:focus, .backup-code-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1) !important;
}

/* Botones de enlace para opciones MFA */
.link-button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    margin: var(--spacing-xs) 0;
}

.link-button:hover {
    color: var(--primary-color);
    background: rgba(30, 64, 175, 0.05);
}

/* Estados de validación para campos MFA */
.mfa-code-input.valid, .backup-code-input.valid {
    border-color: var(--success-color) !important;
    background: rgba(16, 185, 129, 0.05) !important;
}

.mfa-code-input.invalid, .backup-code-input.invalid {
    border-color: var(--danger-color) !important;
    background: rgba(239, 68, 68, 0.05) !important;
    animation: shake 0.3s ease-in-out;
}

/* Animación de error */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* =================================================================
   ESTILOS ESPECÍFICOS PARA MÓDULOS FRAMEWORKS Y PROVEEDORES
   ================================================================= */

/* Grid de frameworks industrial */
.frameworks-grid-industrial {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    max-width: 100%;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

/* Responsive para frameworks grid - máximo 2 por fila */
@media (min-width: 1400px) {
    .frameworks-grid-industrial {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1200px;
    }
}

@media (max-width: 1100px) {
    .frameworks-grid-industrial {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .frameworks-grid-industrial {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* Tarjetas de framework */
.framework-card-industrial {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.framework-card-industrial:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.framework-card-industrial .framework-header {
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.framework-title-section h4.framework-title {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
}

.framework-code {
    background: var(--primary-color);
    color: var(--white);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.framework-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.btn-icon-industrial {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.btn-icon-industrial.edit {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.btn-icon-industrial.edit:hover {
    background: var(--primary-color);
    color: var(--white);
}

.btn-icon-industrial.delete {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.btn-icon-industrial.delete:hover {
    background: var(--danger-color);
    color: var(--white);
}

.framework-body {
    padding: var(--spacing-lg);
}

.framework-description {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

.framework-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.metric-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--gray-100);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-light);
}

.metric-badge i {
    color: var(--primary-color);
}

.type-badge {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.framework-footer {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.btn-framework-detail {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn-framework-detail:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* Empty state industrial */
.empty-state-industrial {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-muted);
}

.empty-state-industrial .empty-icon {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: var(--spacing-lg);
}

.empty-state-industrial h4 {
    color: var(--text-light);
    margin-bottom: var(--spacing-sm);
}

.empty-state-industrial p {
    margin-bottom: var(--spacing-lg);
}

/* Status badges industriales */
.status-badge-industrial {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge-industrial.validado {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.status-badge-industrial.pendiente {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.status-badge-industrial.en_revision {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info-color);
}

.status-badge-industrial.rechazado {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

/* Información de proveedor */
.proveedor-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.proveedor-nombre {
    font-weight: 600;
    color: var(--text-color);
}

.proveedor-codigo {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.contacto-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.contacto-info .email {
    color: var(--text-light);
}

.contacto-info .cif {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.fecha-registro {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Acciones de proveedor */
.acciones-proveedor {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.btn-action-small {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.8rem;
}

.btn-action-small.primary {
    background: rgba(30, 64, 175, 0.1);
    color: var(--primary-color);
}

.btn-action-small.primary:hover {
    background: var(--primary-color);
    color: var(--white);
}

.btn-action-small.secondary {
    background: rgba(107, 114, 128, 0.1);
    color: var(--gray-600);
}

.btn-action-small.secondary:hover {
    background: var(--gray-600);
    color: var(--white);
}

.btn-action-small.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.btn-action-small.warning:hover {
    background: var(--warning-color);
    color: var(--white);
}

.btn-action-small.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.btn-action-small.success:hover {
    background: var(--success-color);
    color: var(--white);
}

/* Panel footer */
.panel-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gray-50);
    border-top: 1px solid var(--border-color);
}

.pagination-info {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Responsive para MFA */
@media (max-width: 640px) {
    .mfa-code-input, .backup-code-input {
        font-size: 1.2rem !important;
        letter-spacing: 0.2rem !important;
    }
    
    .link-button {
        font-size: 0.85rem;
        padding: var(--spacing-xs);
    }
}

/* ====================================================================
   FILTERS TOOLBAR ULTRA COMPACT - VERSIÓN MEJORADA PARA SHOWFRAMEWORKS
   ==================================================================== */

.filters-toolbar-ultra-compact {
    background: linear-gradient(135deg, var(--gray-50), var(--white));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    min-height: 3.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    overflow: hidden;
}

.filters-toolbar-ultra-compact:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

/* Contenedor izquierdo - Filtros */
.filters-toolbar-ultra-compact .filters-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0; /* Permite que flex funcione correctamente */
}

/* Contenedor derecho - Botones de acción */
.filters-toolbar-ultra-compact .filters-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Estilos mejorados para el input de búsqueda */
.filters-toolbar-ultra-compact .filter-input {
    flex: 1;
    min-width: 200px;
    height: 2.75rem;
    padding: 0 var(--spacing-md) 0 3rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-normal);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3e%3c/path%3e%3c/svg%3e");
    background-position: left var(--spacing-sm) center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
}

.filters-toolbar-ultra-compact .filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1), inset 0 1px 3px rgba(0,0,0,0.1);
    background-color: var(--white);
}

.filters-toolbar-ultra-compact .filter-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* Estilos mejorados para el select */
.filters-toolbar-ultra-compact .filter-select {
    min-width: 180px;
    height: 2.75rem;
    padding: 0 3rem 0 var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--spacing-sm) center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
}

.filters-toolbar-ultra-compact .filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1), inset 0 1px 3px rgba(0,0,0,0.1);
}

.filters-toolbar-ultra-compact .filter-select:hover {
    border-color: var(--primary-light);
    background-color: var(--gray-50);
}

/* Estilos mejorados para los botones de acción */
.filters-toolbar-ultra-compact .btn-action-primary {
    height: 2.75rem;
    padding: 0 var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.filters-toolbar-ultra-compact .btn-action-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    transform: var(--transform-hover-small);
    box-shadow: var(--hover-shadow-primary);
}

.filters-toolbar-ultra-compact .btn-action-primary:active {
    transform: scale(0.98);
}

.filters-toolbar-ultra-compact .btn-action-primary i {
    font-size: 0.9rem;
}

/* Responsive design */
@media (max-width: 1200px) {
    .filters-toolbar-ultra-compact {
        gap: var(--spacing-sm);
    }
    
    .filters-toolbar-ultra-compact .filters-left {
        gap: var(--spacing-sm);
    }
    
    .filters-toolbar-ultra-compact .filter-input {
        min-width: 150px;
    }
    
    .filters-toolbar-ultra-compact .filter-select {
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .filters-toolbar-ultra-compact {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        min-height: auto;
        padding: var(--spacing-lg);
    }
    
    .filters-toolbar-ultra-compact .filters-left {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .filters-toolbar-ultra-compact .filters-right {
        justify-content: center;
        gap: var(--spacing-sm);
    }
    
    .filters-toolbar-ultra-compact .filter-input,
    .filters-toolbar-ultra-compact .filter-select {
        min-width: auto;
        width: 100%;
    }
    
    .filters-toolbar-ultra-compact .btn-action-primary {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .filters-toolbar-ultra-compact .filters-right {
        flex-direction: column;
    }
    
    .filters-toolbar-ultra-compact .btn-action-primary {
        width: 100%;
    }
}

/* ====================================================================
   MODAL DETALLES DE FRAMEWORK - ESTILO INDUSTRIAL COHERENTE
   ==================================================================== */

#framework-details-modal .modal-content {
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

#framework-details-modal .modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    padding: var(--spacing-xl);
    border-bottom: none;
    position: relative;
}

#framework-details-modal .modal-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-light), var(--secondary-color));
}

#framework-details-modal .modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

#framework-details-modal .modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    border-radius: var(--radius-md);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition-normal);
}

#framework-details-modal .modal-close:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
    transform: scale(1.1);
}

#framework-details-modal .modal-body {
    padding: var(--spacing-xl);
    background: var(--gray-50);
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}

#framework-details-modal .framework-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

#framework-details-modal .details-section {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

#framework-details-modal .details-section h4 {
    margin: 0;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#framework-details-modal .details-section h4:before {
    content: '📊';
    font-size: 1.1rem;
}

#framework-details-modal .details-section:nth-child(2) h4:before {
    content: '📋';
}

#framework-details-modal .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

#framework-details-modal .detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

#framework-details-modal .detail-item.full-width {
    grid-column: 1 / -1;
}

#framework-details-modal .detail-item label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#framework-details-modal .detail-item span {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500;
    padding: var(--spacing-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

#framework-details-modal .requisitos-list {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

#framework-details-modal .requisito-item {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    transition: var(--transition-normal);
}

#framework-details-modal .requisito-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

#framework-details-modal .requisito-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

#framework-details-modal .requisito-header h5 {
    margin: 0;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
    flex: 1;
}

#framework-details-modal .requisito-obligatorio {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

#framework-details-modal .requisito-obligatorio.required {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-light));
    color: var(--white);
}

#framework-details-modal .requisito-obligatorio.optional {
    background: linear-gradient(135deg, var(--success-color), var(--success-light));
    color: var(--white);
}

#framework-details-modal .requisito-descripcion {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

#framework-details-modal .requisito-meta {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

#framework-details-modal .meta-tag {
    background: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
}

#framework-details-modal .empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-muted);
}

#framework-details-modal .empty-state i {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    color: var(--text-muted);
}

#framework-details-modal .empty-state p {
    margin: 0 0 var(--spacing-lg) 0;
    font-size: 1.1rem;
}

#framework-details-modal .modal-footer {
    background: linear-gradient(135deg, var(--gray-50), var(--white));
    border-top: 2px solid var(--border-color);
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

#framework-details-modal .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-normal);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#framework-details-modal .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border-color: var(--primary-color);
}

#framework-details-modal .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    transform: var(--transform-hover-small);
    box-shadow: var(--hover-shadow-primary);
}

#framework-details-modal .btn-secondary {
    background: var(--white);
    color: var(--text-color);
    border-color: var(--border-color);
}

#framework-details-modal .btn-secondary:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
    transform: var(--transform-hover-small);
}

/* Responsive para modal framework details */
@media (max-width: 768px) {
    #framework-details-modal .modal-content {
        min-width: auto;
        width: 95vw;
        max-height: 95vh;
    }
    
    #framework-details-modal .details-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    #framework-details-modal .requisito-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    #framework-details-modal .modal-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    #framework-details-modal .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ====================================================================
   MODALES DE FRAMEWORKS - ASIGNAR BÁSICO Y CREAR NUEVO
   ==================================================================== */

/* Modal de asignar framework básico */
#assign-basic-modal .modal-content,
#create-framework-modal .modal-content {
    max-width: 1000px;
}

#assign-basic-modal .modal-description {
    background: var(--gray-100);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid var(--primary-color);
}

#assign-basic-modal .modal-description p {
    margin: 0;
    color: var(--text-light);
    line-height: 1.6;
}

.frameworks-selection {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 500px;
    overflow-y: auto;
    padding-right: var(--spacing-sm);
}

.frameworks-selection::-webkit-scrollbar {
    width: 8px;
}

.frameworks-selection::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: var(--radius-sm);
}

.frameworks-selection::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-sm);
}

.frameworks-selection::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.framework-selection-item {
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
    overflow: hidden;
}

.framework-selection-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}

.framework-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    cursor: pointer;
    width: 100%;
}

.framework-checkbox-label input[type="checkbox"] {
    display: none;
}

.framework-checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--white);
    position: relative;
    transition: var(--transition-normal);
    flex-shrink: 0;
    margin-top: 2px;
}

.framework-checkmark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 6px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform-origin: center;
    transition: var(--transition-fast);
}

.framework-checkbox-label input[type="checkbox"]:checked + .framework-checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.framework-checkbox-label input[type="checkbox"]:checked + .framework-checkmark::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.framework-selection-info {
    flex: 1;
    min-width: 0;
}

.framework-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
}

.framework-selection-title {
    margin: 0;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.framework-version {
    background: var(--secondary-color);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.framework-selection-description {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-light);
    line-height: 1.5;
    font-size: 0.95rem;
}

.framework-selection-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.framework-selection-meta .meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.framework-selection-meta .meta-item i {
    color: var(--primary-color);
}

.selection-count {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Modal de crear framework */
.framework-form {
    padding: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    transition: var(--transition-normal);
    font-family: var(--font-primary);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* Estados de carga y error en modales */
.loading-state,
.error-state,
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-muted);
}

.loading-state i,
.error-state i,
.empty-state i {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    display: block;
}

.loading-state i {
    color: var(--primary-color);
}

.error-state i {
    color: var(--danger-color);
}

.empty-state i {
    color: var(--text-muted);
}

.loading-state h3,
.error-state h3,
.empty-state h3 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-color);
    font-size: 1.2rem;
}

.loading-state p,
.error-state p,
.empty-state p {
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.6;
}

/* Responsive para modales de frameworks */
@media (max-width: 768px) {
    #assign-basic-modal .modal-content,
    #create-framework-modal .modal-content {
        width: 95vw;
        max-height: 95vh;
    }
    
    .framework-checkbox-label {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .framework-selection-header {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }
    
    .framework-selection-meta {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    #assign-basic-modal .modal-footer,
    #create-framework-modal .modal-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .footer-actions {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .footer-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================================= 
   MODAL DE DETALLE REQUISITO - ESTILOS MEJORADOS TEMA INDUSTRIAL
   ================================================================= */

/* Estilos específicos para el modal de detalle de requisitos */
#detalleRequisitoModal.modal-overlay .detail-section {
    background: var(--background-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-xl) !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--transition-standard) !important;
    margin-bottom: var(--spacing-lg) !important;
    overflow: visible !important;
}

#detalleRequisitoModal.modal-overlay .detail-section:hover {
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-2px) !important;
}

#detalleRequisitoModal.modal-overlay .detail-section.main {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

#detalleRequisitoModal.modal-overlay .detail-section.main .section-header {
    display: none !important;
}

#detalleRequisitoModal.modal-overlay .detail-section.main .detail-content {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#detalleRequisitoModal.modal-overlay .detail-section.main .detail-item.featured {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--spacing-lg) !important;
    box-shadow: none !important;
}

#detalleRequisitoModal.modal-overlay .detail-section.main .detail-item.featured .detail-value.title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    line-height: 1.3 !important;
    margin-bottom: var(--spacing-md) !important;
    max-width: none !important;
    word-wrap: break-word !important;
}

#detalleRequisitoModal.modal-overlay .detail-section.main .detail-item .detail-value.description {
    max-width: none !important;
    width: 100% !important;
    line-height: 1.5 !important;
    font-size: 1rem !important;
    color: var(--text-medium) !important;
    word-wrap: break-word !important;
    margin-bottom: var(--spacing-lg) !important;
}

#detalleRequisitoModal.modal-overlay .detail-section .section-header {
    margin-bottom: var(--spacing-xl) !important;
    padding: 0 !important;
    padding-bottom: var(--spacing-lg) !important;
    border-bottom: 2px solid var(--border-color) !important;
    background: transparent !important;
}

#detalleRequisitoModal.modal-overlay .detail-section .section-header h3 {
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-md) !important;
    font-family: var(--font-primary) !important;
    background: none !important;
}

#detalleRequisitoModal.modal-overlay .detail-section .section-header h3 i {
    color: var(--primary-color) !important;
    font-size: 1.1rem !important;
    background: var(--primary-light) !important;
    padding: 0.5rem !important;
    border-radius: var(--radius-md) !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#detalleRequisitoModal.modal-overlay .detail-item.featured {
    background: var(--white) !important;
    border: 2px solid var(--primary-light) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-xl) !important;
    box-shadow: var(--shadow-md) !important;
    position: relative !important;
}

#detalleRequisitoModal.modal-overlay .detail-item.featured::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

#detalleRequisitoModal.modal-overlay .detail-label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: var(--spacing-sm) !important;
    font-family: var(--font-primary) !important;
}

#detalleRequisitoModal.modal-overlay .detail-value {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    line-height: 1.5 !important;
    font-family: var(--font-secondary) !important;
}

#detalleRequisitoModal.modal-overlay .detail-value.title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    line-height: 1.3 !important;
    font-family: var(--font-primary) !important;
}

#detalleRequisitoModal.modal-overlay .detail-value.description {
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
    background: var(--white) !important;
    padding: var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Badges industriales mejorados para el modal */
#detalleRequisitoModal.modal-overlay .badge-category.seguridad {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: var(--white) !important;
    border: 1px solid #dc2626 !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal.modal-overlay .badge-category.ambiental {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: var(--white) !important;
    border: 1px solid #16a34a !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal.modal-overlay .badge-category.calidad {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: var(--white) !important;
    border: 1px solid #2563eb !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal.modal-overlay .badge-category.financiera {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: var(--text-primary) !important;
    border: 1px solid #f59e0b !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal.modal-overlay .badge-category.legal {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    color: var(--white) !important;
    border: 1px solid #7c3aed !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal.modal-overlay .badge-category.otro {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: var(--white) !important;
    border: 1px solid #6b7280 !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal .badge-obligatorio {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark)) !important;
    color: var(--white) !important;
    border: 1px solid var(--danger-color) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal .badge-opcional {
    background: linear-gradient(135deg, var(--info-color), var(--info-dark)) !important;
    color: var(--white) !important;
    border: 1px solid var(--info-color) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal .badge-success {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark)) !important;
    color: var(--white) !important;
    border: 1px solid var(--success-color) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal .badge-secondary {
    background: linear-gradient(135deg, var(--gray-500), var(--gray-600)) !important;
    color: var(--white) !important;
    border: 1px solid var(--gray-500) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

#detalleRequisitoModal .badge-info {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: var(--white) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-md) !important;
}

#detalleRequisitoModal .order-badge {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: var(--white) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--primary-color) !important;
}

/* Grid de documentos industrial */
#detalleRequisitoModal .document-types-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: var(--spacing-lg) !important;
    margin-top: var(--spacing-md) !important;
}

#detalleRequisitoModal .document-type-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--spacing-sm) !important;
    padding: var(--spacing-lg) !important;
    background: var(--white) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-standard) !important;
    box-shadow: var(--shadow-sm) !important;
    position: relative !important;
    overflow: hidden !important;
}

#detalleRequisitoModal .document-type-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)) !important;
}

#detalleRequisitoModal .document-type-item:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-lg) !important;
}

#detalleRequisitoModal .document-type-item i {
    color: var(--primary-color) !important;
    font-size: 1.3rem !important;
    margin-bottom: var(--spacing-sm) !important;
    background: var(--primary-light) !important;
    padding: var(--spacing-sm) !important;
    border-radius: var(--radius-md) !important;
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#detalleRequisitoModal .document-type-item span {
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    font-family: var(--font-primary) !important;
}

#detalleRequisitoModal .document-type-item small {
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-top: var(--spacing-xs) !important;
    font-family: var(--font-secondary) !important;
}

#detalleRequisitoModal .text-muted {
    color: var(--text-secondary) !important;
    font-style: italic !important;
}

/* ================================================================= 
   MODAL DETALLE EMPRESA - ESTILO INDUSTRIAL
   ================================================================= */

.empresa-detail-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.empresa-detail-info .detail-section {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.empresa-detail-info .detail-section:hover {
    box-shadow: var(--shadow-md);
    transform: var(--transform-hover-small);
    border-color: var(--primary-light);
}

.empresa-detail-info .detail-section.main {
    border-left: 4px solid var(--primary-color);
    background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
}

.empresa-detail-info .detail-section .section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 2px solid var(--border-color);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl)) var(--spacing-lg) calc(-1 * var(--spacing-xl));
}

.empresa-detail-info .detail-section .section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.empresa-detail-info .detail-section .section-header h3 i {
    color: var(--white);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: var(--radius-md);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.empresa-detail-info .detail-item {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--gray-200);
    transition: all var(--transition-fast);
}

.empresa-detail-info .detail-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.empresa-detail-info .detail-item:hover {
    padding-left: var(--spacing-sm);
    border-left: 3px solid var(--primary-light);
}

.empresa-detail-info .detail-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.empresa-detail-info .detail-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.5;
    font-family: var(--font-primary);
}

.empresa-detail-info .detail-value.title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.3;
    margin-bottom: var(--spacing-xs);
}

.empresa-detail-info .badge-count {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.empresa-detail-info .badge-count:before {
    content: '👥';
    font-size: 1rem;
}

.empresa-detail-info .badge-count.zero {
    background: linear-gradient(135deg, var(--gray-400), var(--gray-500));
    color: var(--white);
}

.empresa-detail-info .badge-count.zero:before {
    content: '📊';
}

/* Responsive para modal empresa */
@media (max-width: 768px) {
    .empresa-detail-info .detail-section {
        padding: var(--spacing-lg);
    }
    
    .empresa-detail-info .detail-value.title {
        font-size: 1.3rem;
    }
    
    .empresa-detail-info .detail-section .section-header h3 {
        font-size: 1rem;
    }
}

/* =================================================================
   WEIGHT VALIDATION PANEL - Panel de validación de pesos
   ================================================================= */

.weight-validation-panel {
    border-radius: 8px;
    border-left: 4px solid var(--info-color);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);
    transition: all 0.3s ease;
}

.weight-validation-panel:hover {
    box-shadow: 0 4px 8px rgba(30, 64, 175, 0.15);
}

.weight-validation-panel .weight-info h5 {
    color: var(--text-color);
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.weight-validation-panel .weight-info h5 i {
    color: var(--info-color);
}

.weight-status {
    font-size: 0.95em;
    line-height: 1.4;
}

.weight-status .success {
    color: var(--success-color);
}

.weight-status .warning {
    color: var(--warning-color);
}

.weight-status .error {
    color: var(--danger-color);
}

.weight-actions .btn {
    font-size: 0.875rem;
    padding: 8px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.weight-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.weight-actions .btn i {
    font-size: 0.875rem;
}

/* Weight badge in table */
.weight-badge {
    display: inline-block;
    padding: 4px 8px;
    background: linear-gradient(135deg, var(--info-color), var(--info-light));
    color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    min-width: 45px;
}

/* Form text for weight input */
.form-text.text-muted {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.form-text.text-muted i {
    color: var(--info-color);
    font-size: 0.8rem;
}

/* Weight total badge styles */
.weight-total-badge {
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.weight-total-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.weight-total-badge.success {
    background: linear-gradient(135deg, var(--success-color), var(--success-light));
    color: white;
    border-color: var(--success-dark);
}

.weight-total-badge.warning {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-light));
    color: white;
    border-color: var(--warning-dark);
}

.weight-total-badge.error {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-light));
    color: white;
    border-color: var(--danger-dark);
}

.weight-total-badge i {
    opacity: 0.9;
}

/* ===================================================================
   SISTEMA DE PESTAÑAS (TABS) PARA VALIDACIONES
   ================================================================= */

.tabs-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.tabs-header {
    display: flex;
    background: var(--gray-50);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.tab-button {
    flex: 1;
    padding: 16px 20px;
    background: transparent;
    border: none;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-right: 1px solid var(--border-color);
}

.tab-button:last-child {
    border-right: none;
}

.tab-button:hover {
    background: rgba(var(--primary-color-rgb, 30, 64, 175), 0.05);
    color: var(--primary-color);
}

.tab-button.active {
    background: white;
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    transform: translateY(1px);
}

.tab-button i {
    font-size: 1.1em;
    opacity: 0.8;
}

.tab-button.active i {
    opacity: 1;
}

.tab-badge {
    background: var(--primary-color);
    color: white;
    font-size: 0.75em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.tab-button.active .tab-badge {
    background: var(--secondary-color);
}

.tab-content {
    padding: 0;
    min-height: 400px;
}

.tab-content.active {
    display: block !important;
}

/* Badges específicos para categorías */
.category-badge {
    background: var(--info-light);
    color: var(--info-dark);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-badge.baja {
    background: var(--gray-200);
    color: var(--gray-700);
}

.priority-badge.media {
    background: var(--warning-light);
    color: var(--warning-dark);
}

.priority-badge.alta {
    background: var(--danger-light);
    color: var(--danger-dark);
}

.priority-badge.critica {
    background: var(--danger-color);
    color: white;
}

.count-badge {
    background: var(--primary-color);
    color: white;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

/* Responsive para pestañas */
@media (max-width: 768px) {
    .tabs-header {
        flex-direction: column;
    }
    
    .tab-button {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        text-align: left;
        justify-content: flex-start;
    }
    
    .tab-button:last-child {
        border-bottom: none;
    }
    
    .tab-button.active {
        border-bottom: none;
        border-left: 3px solid var(--primary-color);
        transform: none;
    }
}

/* =================================================================
   ESTILOS PARA PAGINACIÓN
   ================================================================= */

.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-light);
}

.pagination-select {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
    font-size: 0.875rem;
    min-width: 70px;
}

.pagination-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.btn-pagination:hover:not([disabled]) {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-pagination[disabled] {
    background: var(--gray-100);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-info-compact {
    padding: 6px 12px;
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--text-light);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .pagination-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .pagination-navigation {
        order: 1;
    }
    
    .pagination-size {
        order: 2;
    }
}

/* ================================
   ESTILOS PARA FILTRADO Y ORDENAMIENTO DE TABLAS
   ================================ */

.filters-section {
    padding: 1rem;
    background: rgba(247, 250, 252, 0.8);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.filters-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr auto;
    gap: 1rem;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group input,
.filter-group select {
    padding: 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s ease;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn-filter-clear {
    padding: 0.5rem;
    background: var(--gray-100);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.btn-filter-clear:hover {
    background: var(--gray-200);
    color: var(--text-primary);
}

.filter-count {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
    color: var(--text-secondary);
}

.filter-count .count-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-count i {
    color: var(--primary-color);
    font-size: 1rem;
}

.filter-count strong {
    color: var(--primary-color);
    font-weight: 700;
}

/* Estilos para ordenamiento */
.sortable-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable-table th.sortable:hover {
    background: rgba(99, 102, 241, 0.05);
}

.sort-indicator {
    margin-left: 0.5rem;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.sort-indicator.active {
    opacity: 1;
    color: var(--primary-color);
}

.sort-indicator.active.asc i:before {
    content: "\f0de"; /* fa-sort-up */
}

.sort-indicator.active.desc i:before {
    content: "\f0dd"; /* fa-sort-down */
}

.th-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Responsividad para filtros */
@media (max-width: 1200px) {
    .filters-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    
    .filter-actions {
        grid-column: span 2;
        justify-self: center;
    }
}

@media (max-width: 768px) {
    .filters-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-actions {
        grid-column: span 1;
        justify-self: center;
    }
}

/* =================================================================
   ESTILOS PERSONALIZADOS PARA JUSTIFICACIÓN DE APROBACIÓN
   ================================================================= */

/* Estilo para botón de justificar aprobación */
.btn-action.justify {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.btn-action.justify:hover {
    background-color: #218838;
    border-color: #1e7e34;
    transform: translateY(-1px);
}

/* Estilos para modal de detalle de requisito - contenido más compacto - YA NO SE USA */
/*
#detalleRequisitoModal .detail-section.main .detail-content {
    max-width: 600px;
}

#detalleRequisitoModal .detail-item.featured .detail-value.title {
    font-size: 1.2em;
    line-height: 1.3;
    max-width: 500px;
    word-wrap: break-word;
}

#detalleRequisitoModal .detail-item .detail-value.description {
    max-width: 550px;
    line-height: 1.4;
    font-size: 0.95em;
    word-wrap: break-word;
}
*/

/* Mejorar espaciado en modal de justificación */
#justificarAprobacionModal .requisito-details {
    margin-bottom: 1.5rem;
}

#justificarAprobacionModal .form-section {
    margin-bottom: 1.5rem;
}

#justificarAprobacionModal .section-header {
    margin-bottom: 1rem;
}

/* Estilos para documento adjunto en detalle */
.document-attachment {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    border: 1px solid var(--border-light);
}

.document-attachment i {
    color: var(--primary-color);
}

.document-attachment span {
    flex: 1;
    font-weight: 500;
}

.btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.btn-download:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* ===== ESTILOS PARA BOTONES DE ACCIONES RÁPIDAS DEL DASHBOARD ===== */
.action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border: 2px solid transparent;
    border-radius: 12px;
    background: white;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    min-height: 100px;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: var(--text-color);
}

.action-btn.primary {
    border-color: var(--primary-color);
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
}

.action-btn.success {
    border-color: var(--success-color);
}

.action-btn.success:hover {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
    color: white;
}

.action-btn.info {
    border-color: var(--info-color);
}

.action-btn.info:hover {
    background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
    color: white;
}

.action-btn.secondary {
    border-color: var(--secondary-color);
}

.action-btn.secondary:hover {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    color: white;
}

.action-btn.warning {
    border-color: var(--warning-color);
}

.action-btn.warning:hover {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
    color: white;
}

.action-btn.danger {
    border-color: var(--danger-color);
}

.action-btn.danger:hover {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
    color: white;
}

.action-btn-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.action-btn.primary .action-btn-icon {
    background: var(--primary-light);
    color: white;
}

.action-btn.success .action-btn-icon {
    background: var(--success-light);
    color: white;
}

.action-btn.info .action-btn-icon {
    background: var(--info-light);
    color: white;
}

.action-btn.secondary .action-btn-icon {
    background: var(--secondary-light);
    color: white;
}

.action-btn.warning .action-btn-icon {
    background: var(--warning-light);
    color: white;
}

.action-btn.danger .action-btn-icon {
    background: var(--danger-light);
    color: white;
}

.action-btn-content {
    flex: 1;
    text-align: left;
}

.action-btn-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: inherit;
}

.action-btn-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.action-btn:hover .action-btn-content p {
    color: rgba(255, 255, 255, 0.9);
}

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

/* Responsive para botones de acciones */
@media (max-width: 768px) {
    .action-buttons-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .action-btn {
        padding: 1rem;
        min-height: 80px;
    }
    
    .action-btn-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .action-btn-content h4 {
        font-size: 1rem;
    }
    
    .action-btn-content p {
        font-size: 0.85rem;
    }
}

/* ===== ESTILOS PARA DASHBOARD DE ADMIN ===== */
.system-overview {
    margin-top: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.system-overview h3 {
    margin: 0 0 1rem 0;
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.system-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.system-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.system-label {
    font-weight: 500;
    color: var(--text-light);
}

.system-value {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-color);
}

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