/* =======================
   TABLAS GENERALES
========================== */
.table-container {
    width: 100%; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra suave */
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

/* =======================
   ENCABEZADOS DE TABLAS
========================== */
.table thead th,
.table_fetch thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
    padding: 8px;
    font-size: 14px; /* Tamaño más pequeño */
    font-weight: bold; /* Negrita */
    text-transform: uppercase; /* Mayúsculas */
    letter-spacing: 0.5px; /* Espaciado ligero */
}

/* Estilos diferenciados */
.table thead th {
    background-color: #b8b8b8; /* Gris suave */
    color: #000;
    border-bottom: 2px solid #007bff; /* Borde azul estático */
}

.table_fetch thead th {
    background-color: #38536e; /* Azul oscuro */
    color: #fcfcfc;
}
.resaltado {
    background-color: rgba(128, 241, 128, 0.6) !important;
    font-weight: bold !important;
}

/* =======================
   CUERPO DE TABLAS
========================== */
td {
    text-align: left;
    vertical-align: middle;
    font-size: 12px; /* Tamaño más pequeño */
    font-weight: 500; /* Semibold */
    color: #333; /* Gris oscuro */

}
td:first-child {
    text-align: left;
}

td * {
    cursor: pointer;
}

.disabled-cell {
    opacity: 0.3;
    pointer-events: none;
    text-decoration: line-through;
}
/* =======================
   ICONOS EN TABLAS
========================== */
.edit-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    cursor: pointer;
    margin-left: 8px;
}

/* =======================
   TABLAS FETCH
========================== */
.table_fetch {
    width: 100%;
    border-collapse: collapse;
}

.table_fetch thead,
.table_fetch tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}


/* =======================
   EFECTO HOVER EN FILAS
========================== */
.table tbody tr:hover td,
.table_fetch tbody tr:hover td {
    box-shadow: inset 0 8px 12px -6px var(--highlight-color, #6d6dca), 
                inset 0 -8px 12px -6px var(--highlight-color, #6d6dca) !important;
}