/* ️ CSS DE INFRAESTRUCTURA VISUAL - REUTILIZABLE */
.mu-inventory-container { 
    background: #151515; 
    width: 350px; 
    padding: 15px; 
    border: 2px solid #333; 
    border-radius: 5px; 
    color: #fff; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.equipment-view { 
    position: relative; 
    height: 230px; 
    background: url('/themes/th_ilu/img/char_skeleton.png') no-repeat center; 
    background-size: contain; 
    margin-bottom: 20px; 
}

/* Slots del Cuerpo */
.item-slot { 
    position: absolute; 
    border: 1px solid #444; 
    background: rgba(0,0,0,0.6); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    transition: 0.2s; 
}

.item-slot:hover { 
    border-color: #007bff; 
    box-shadow: inset 0 0 10px #007bff; 
    cursor: help; 
}

.empty-slot { 
    opacity: 0.3; 
    background: rgba(255,255,255,0.05);
    width: 100%;
    height: 100%;
}

/* Grilla de la Bolsa (8x8) */
.bag-grid { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    gap: 2px; 
    background: #333; 
    border: 2px solid #333; 
    position: relative; 
    padding: 5px;
}

.bag-slot { 
    width: 35px; 
    height: 35px; 
    background: #1a1a1a; 
    position: relative;
    border: 1px solid #2a2a2a;
}

.expansion-grid {
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    gap: 2px;
    padding: 5px;
}

/* Items renderizados */
.mu-item-render {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Footer de Zen/Money */
.mu-inventory-footer {
    background: rgba(0,0,0,0.3);
    border: 1px solid #333;
}

/* Responsive */
@media (max-width: 400px) {
    .mu-inventory-container {
        width: 100%;
        max-width: 350px;
    }
    
    .bag-slot {
        width: 30px;
        height: 30px;
    }
}

/* Modal específico para subastas */
.auction-inventory-modal .modal-content {
    background: #1a1a1a;
    border: 1px solid #333;
}

.auction-inventory-modal .modal-header {
    border-bottom: 1px solid #333;
    background: #222;
}