.tabla-contenedor {
    overflow-x: auto;
    background: var(--color-superficie);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
}

.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
    padding: 13px 14px;
    background: var(--color-primario); color: #fff;
    font-weight: 600; text-align: left; white-space: nowrap;
}
.tabla td {
    padding: 14px;
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-texto-suave);
    vertical-align: middle;
}
.tabla tbody tr:hover td { background: var(--color-fila-hover); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla th.num { text-align: right; }
.tabla .centro { text-align: center; }
.tabla .acciones { white-space: nowrap; text-align: right; }
.tabla .acciones > * { display: inline-grid; vertical-align: middle; }
.tabla .fuerte { color: var(--color-texto); font-weight: 500; }
.tabla tfoot td { background: var(--color-fondo); color: var(--color-texto); font-weight: 600; }
.tabla tr.fila-pagada td { color: var(--color-texto-tenue); }
.tabla tr.fila-vencida td:first-child { box-shadow: inset 3px 0 0 var(--color-peligro); }

.enlace-codigo { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: var(--color-primario); }

.tabla--compacta th { padding: 10px 12px; }
.tabla--compacta td { padding: 10px 12px; }

.tabla-sub { display: block; font-size: 12px; color: var(--color-texto-tenue); }

.vacio {
    padding: 42px 16px; text-align: center; color: var(--color-texto-suave);
}
.vacio .icono { width: 34px; height: 34px; margin: 0 auto 8px; color: var(--color-primario-borde); }

/* Tablas como tarjetas en celular */
@media (max-width: 720px) {
    .tabla--responsiva thead { display: none; }
    .tabla--responsiva, .tabla--responsiva tbody, .tabla--responsiva tr, .tabla--responsiva td { display: block; width: 100%; }
    .tabla--responsiva tr { padding: 10px 14px; border-bottom: 1px solid var(--color-borde); }
    .tabla--responsiva td { padding: 4px 0 4px 40%; border: 0; text-align: right; position: relative; min-height: 28px; }
    .tabla--responsiva td::before { content: attr(data-etiqueta); position: absolute; left: 0; top: 5px; max-width: 38%; color: var(--color-texto-tenue); font-size: 12px; text-align: left; }
    .tabla--responsiva td.acciones { padding-left: 0; }
    .tabla--responsiva td.acciones::before { content: none; }
    .tabla--responsiva tfoot { display: block; }
}