.table-wrapper {
    width: 100%; /* Asegura que ocupe el ancho del contenedor padre */
    overflow-x: auto; /* Habilita el scroll horizontal si el contenido (la tabla) es más ancho */
    -webkit-overflow-scrolling: touch; /* Scroll más suave en iOS */
    margin-bottom: 1rem; /* Espacio inferior para el contenedor */
    border-radius: var(--border-radius-lg); /* Heredar el borde redondeado */
}

table {
    width: 100%;
    border-collapse: separate; /* Mantenemos separate para el radius global */
    border-spacing: 0;
    box-shadow: var(--box-shadow-sm);
    border-radius: var(--border-radius-lg);
    overflow: hidden; /* Necesario para que el radius recorte las celdas */
    border: 1px solid var(--border-color);
}

th {
    text-align: center;
    padding: 10px 8px;
}

td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color); /* Línea separadora horizontal */
}

/* Quitar borde inferior de la última fila */
tbody tr:last-child td {
    border-bottom: none;
}

/* Añadir borde derecho a todas las celdas excepto la última de cada fila */
th:not(:last-child),
td:not(:last-child) {
    border-right: 1px solid var(--border-color); /* Línea separadora vertical */
}

thead th {
    background-color: var(--table-header-bg);
    color: var(--text-color-light);
    font-weight: 600;
}

thead th {
    border-bottom: 1px solid var(--border-color); /* Mantenemos la línea inferior del header */
}

tbody tr {
    background-color: var(--bg-darkest);
}

tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}