/* ============================================
   FULLSCREEN MODE - CHAIN CARDS
   ⚠️ NO MODIFICAR CLASES - SOLO ESTILOS
   ============================================ */

/* Ocultar elementos cuando hay fullscreen */
body.has-fullscreen-card {
    overflow: hidden !important;
    overflow-x: hidden !important;
    width: 100vw !important;
}

/* Ocultar sidebar cuando hay fullscreen */
body.has-fullscreen-card .sidebar,
body.has-fullscreen-card #sidebar,
body.has-fullscreen-card nav,
body.has-fullscreen-card aside {
    display: none !important;
}

/* Ocultar header superior cuando hay fullscreen */
body.has-fullscreen-card header,
body.has-fullscreen-card .top-header {
    display: none !important;
}

/* Ocultar otras tarjetas cuando hay una en fullscreen */
body.has-fullscreen-card .chain-card:not(.chain-card-fullscreen) {
    display: none !important;
}

/* Ocultar header principal en fullscreen */
body.has-fullscreen-card > div > .glass-card > div:first-child {
    display: none !important;
}

/* ============================================
   TARJETA EN FULLSCREEN - CON SOPORTE MODO CLARO
   ============================================ */

.chain-card-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    z-index: 99999 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    transform: none !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(26, 26, 46, 1) !important; /* Modo oscuro por defecto */
    box-sizing: border-box !important;
}

/* ============================================
   MODO CLARO - FULLSCREEN
   ============================================ */
[data-theme="light"] .chain-card-fullscreen {
    background: #F8F9FA !important;
}

/* Contenedor de red en modo claro */
[data-theme="light"] .chain-network-container {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Nodos de actores en modo claro */
[data-theme="light"] .actor-node > div:first-child {
    background: #FFFFFF !important;
    color: #2D3748 !important;
    border-color: var(--primary) !important;
}

/* Nombres de actores en modo claro */
[data-theme="light"] .actor-node span {
    color: #2D3748 !important;
}

/* Indicador de conexiones en modo claro */
[data-theme="light"] .chain-network-container > div:last-child {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .chain-network-container > div:last-child span {
    color: #4A5568 !important;
}

/* Tabs en modo claro */
[data-theme="light"] .chain-tabs {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .chain-tab {
    color: #4A5568 !important;
}

[data-theme="light"] .chain-tab:hover {
    background: rgba(255, 107, 53, 0.08) !important;
}

[data-theme="light"] .chain-tab.active {
    color: var(--primary) !important;
}

/* Lista de actores en modo claro */
[data-theme="light"] .actors-list-container > div,
[data-theme="light"] .products-list-container > div {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #2D3748 !important;
}

[data-theme="light"] .actors-list-container > div:hover,
[data-theme="light"] .products-list-container > div:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* Textos dentro de las listas */
[data-theme="light"] .actors-list-container .text-gray-200,
[data-theme="light"] .actors-list-container .text-gray-400,
[data-theme="light"] .actors-list-container .text-gray-500,
[data-theme="light"] .products-list-container .text-gray-200,
[data-theme="light"] .products-list-container .text-gray-400,
[data-theme="light"] .products-list-container .text-gray-800,
[data-theme="light"] .products-list-container .text-gray-900 {
    color: #4A5568 !important;
}

/* Glass card en modo claro */
[data-theme="light"] .chain-card.glass-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Header de la card en modo claro */
[data-theme="light"] .chain-card .text-2xl,
[data-theme="light"] .chain-card .text-xl,
[data-theme="light"] .chain-card h4 {
    color: #1A202C !important;
}

[data-theme="light"] .chain-card .text-gray-400 {
    color: #718096 !important;
}

/* Botones de acción en modo claro */
[data-theme="light"] .chain-card .action-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #4A5568 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .chain-card .action-btn:hover {
    background: rgba(255, 107, 53, 0.1) !important;
    color: var(--primary) !important;
}

/* ============================================
   CONTENEDORES EN FULLSCREEN - NO TOCAR LÓGICA
   ============================================ */

/* Contenedor de red en fullscreen con scroll interno */
.chain-card-fullscreen2 .chain-network-container2 {
    max-height: calc(55vh - 4rem) !important;
    min-height: 300px !important;
    flex-shrink: 0 !important;
    overflow: auto !important;
}

/* Lista de actores en fullscreen con scroll independiente */
.chain-card-fullscreen2 .actors-list-container2 {
    max-height: calc(50vh - 4rem) !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
}

/* ============================================
   CONTENEDORES EN MODO NORMAL
   ============================================ */

/* Contenedor de red en modo normal */
.chain-network-container1 {
    position: relative;
    overflow: auto;
    max-height: 400px;
    transition: all 0.3s ease; /* ⚠️ MANTENER ORIGINAL */
}

/* Lista de actores en modo normal */
.actors-list-container1 {
    max-height: 300px;
    overflow-y: auto;
}

/* ============================================
   SVG DE CONEXIONES
   ============================================ */

.chain-network-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   ITEMS DE ACTORES
   ============================================ */

.actor-item1 {
    margin-top: 30px; /* ⚠️ MANTENER ORIGINAL */
    border: 1px solid wheat; /* ⚠️ MANTENER ORIGINAL - puede ser variable del tema */
    padding: 20px; /* ⚠️ MANTENER ORIGINAL */
    margin-right: 20px; /* ⚠️ MANTENER ORIGINAL */
}

/* ============================================
   IMPRESIÓN
   ============================================ */

@media print {
    .no-print { 
        display: none !important; 
    }
    
    .chain-card { 
        page-break-inside: avoid; 
    }
    
    .print-section { 
        display: block !important; 
    }
}

/* ============================================
   SCROLLBARS PERSONALIZADOS (OPCIONAL - MEJORA VISUAL)
   ============================================ */

.chain-network-container1::-webkit-scrollbar,
.chain-network-container2::-webkit-scrollbar,
.actors-list-container1::-webkit-scrollbar,
.actors-list-container2::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.chain-network-container1::-webkit-scrollbar-track,
.chain-network-container2::-webkit-scrollbar-track,
.actors-list-container1::-webkit-scrollbar-track,
.actors-list-container2::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.chain-network-container1::-webkit-scrollbar-thumb,
.chain-network-container2::-webkit-scrollbar-thumb,
.actors-list-container1::-webkit-scrollbar-thumb,
.actors-list-container2::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 4px;
}

.chain-network-container1::-webkit-scrollbar-thumb:hover,
.chain-network-container2::-webkit-scrollbar-thumb:hover,
.actors-list-container1::-webkit-scrollbar-thumb:hover,
.actors-list-container2::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ============================================
   RESPONSIVE (OPCIONAL - NO AFECTA LÓGICA)
   ============================================ */

@media (max-width: 768px) {
    .chain-card-fullscreen {
        padding: 1rem !important;
    }
    
    .chain-card-fullscreen2 .chain-network-container2 {
        max-height: calc(50vh - 3rem) !important;
        min-height: 250px !important;
    }
    
    .chain-card-fullscreen2 .actors-list-container2 {
        max-height: calc(45vh - 3rem) !important;
    }
    
    .actor-item1 {
        margin-top: 20px;
        padding: 15px;
        margin-right: 10px;
    }
}


.chain-network-container {
                position: relative;
                overflow: auto;
                max-height: 500px;
            }
            .chain-network-svg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 1;
            }

           .actors-list-container {
                max-height: none;
                overflow-y: visible;
            }
            
            /* Solo scroll cuando hay más de 8 elementos */
            .chain-tab-content:has(.actors-list-container > div:nth-child(9)) .actors-list-container {
                max-height: 500px;
                overflow-y: auto;
            }
            /* Estilos para los tabs */
            .chain-tabs {
                display: flex;
                gap: 0.5rem;
                border-bottom: 2px solid rgba(255, 107, 53, 0.2);
                margin-bottom: 1rem;
            }
            
            .chain-tab {
                padding: 0.75rem 1.5rem;
                background: transparent;
                border: none;
                color: #9CA3AF;
                font-weight: 600;
                font-size: 0.875rem;
                cursor: pointer;
                border-bottom: 3px solid transparent;
                transition: all 0.3s ease;
                position: relative;
                display: flex;
            }
            
            .chain-tab:hover {
                color: #FF6B35;
                background: rgba(255, 107, 53, 0.05);
            }
            
            .chain-tab.active {
                color: #FF6B35;
                border-bottom-color: #FF6B35;
            }
            
            .chain-tab-badge {
                display: inline-block;
                margin-left: 0.5rem;
                padding: 0.125rem 0.5rem;
                background: rgba(255, 107, 53, 0.2);
                border-radius: 9999px;
                font-size: 0.75rem;
                font-weight: 700;
            }
            
            .chain-tab.active .chain-tab-badge {
                background: #FF6B35;
                color: white;
            }
            
            .chain-tab-content {
                display: none;
            }
            
            .chain-tab-content.active {
                display: block;
            }
            
            @media print {
                .no-print { display: none !important; }
                .chain-card { page-break-inside: avoid; }
                .print-section { display: block !important; }
            }