/* ============================================== */
/* ESTILOS ESPECÍFICOS DE LA TABLA DE INVENTARIO AGRUPADO POR CÓDIGO BASE */
/* ============================================== */

/* 1. Wrapper (Contenedor con Scroll) */
.inventario-base-wrapper { /* Clase actualizada para el contenedor de la tabla agrupada */
    /* Limita la altura del contenedor para tener scroll vertical */
    max-height: 630px; 
    /* Habilita el scroll vertical y horizontal */
    overflow-y: auto;   
    overflow-x: auto;   
    position: relative; 
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil para el contenedor */
}

/* 2. Estilos de Encabezado (THEAD) */
#inventarioCodigoBaseTable th {
    /* Aseguramos que el encabezado se mantenga visible al hacer scroll */
    position: sticky; 
    top: 0; 
    z-index: 10;
    font-weight: 600;
}

/* Colores de fondo de los encabezados (Usando !important para forzar la aplicación) */
#inventarioCodigoBaseTable th.material-bg-primary {
    background-color: #2196f3 !important; /* Azul estándar */
}
#inventarioCodigoBaseTable th.material-bg-success {
    background-color: #4caf50 !important; /* Green */
}
#inventarioCodigoBaseTable th.material-bg-warning {
    background-color: #616161 !important; /* Gris oscuro para Acciones */
}

/* 3. Estilos de la Fila de Encabezado de GRUPO (Título del Código Base) */
#inventarioCodigoBaseTable tbody tr.group-header {
    /* Fondo para destacar el título de la agrupación (Color secundario, ej. Blue Grey) */
    background-color: #607d8b !important; 
    color: white !important;
    font-weight: bold;
    /* Evita que la fila sea seleccionable o tenga efecto hover */
    pointer-events: none;
    cursor: default;
    /* Borde más fuerte para separar el grupo de los datos anteriores */
    border-top: 3px solid #2196f3; 
}
/* Aseguramos que el hover no cambie el color del encabezado de grupo */
#inventarioCodigoBaseTable tbody tr.group-header:hover {
    background-color: #607d8b !important; 
}

/* 4. Estilos de las Celdas de DETALLE (TBODY) */
/* Hace el texto y el padding más compactos para la tabla agrupada */
#inventarioCodigoBaseTable td { 
    font-size: 0.85rem; 
    padding: 0.4rem 0.5rem; 
    white-space: nowrap; 
}

/* Color de fondo para la fila cuando es seleccionada */
#inventarioCodigoBaseTable .selected-row {
    background-color: #e3f2fd !important; /* Azul claro para selección */
    transition: background-color 0.3s ease;
    cursor: pointer; 
}


/* ============================================== */
/* ESTILOS DE ICONO DE ETIQUETA */
/* ============================================== */

/* Contenedor del ícono para darle tamaño y hacerlo clickeable */
#inventarioCodigoBaseTable .etiqueta-icon {
    /* Mueve el icono un poco hacia abajo para que esté centrado visualmente */
    vertical-align: middle; 
    
    /* Hace el cursor clickeable para indicar acción */
    cursor: pointer; 
    
    /* Configura la transición para que el efecto de expansión sea suave */
    transition: transform 0.2s ease-in-out, color 0.2s ease;
    
    /* Asegura que la transformación se aplique correctamente al span */
    display: inline-block; 
}

/* Estilo del ícono (la etiqueta 'i') */
#inventarioCodigoBaseTable .etiqueta-icon i.bi-tag-fill {
    /* Aumenta el tamaño inicial del ícono */
    font-size: 1.4rem; 
}

/* Efecto de Expansión al Pasar el Ratón (Hover) */
#inventarioCodigoBaseTable .etiqueta-icon:hover {
    /* 🚨 Escala el ícono al 130% de su tamaño original */
    transform: scale(1.3); 
    
    /* Opcional: Cambia el color al hacer hover para mayor retroalimentación visual */
    color: #ff9800; /* Naranja de Material Design, por ejemplo */
}