/* Mantén scroll horizontal si hace falta */
.table-container {
    overflow-x: auto;
    padding-bottom: 8px;
}

/* Tap targets cómodos y evitar zoom iOS */
#tablaIncisos .form-control,
#tablaempleos .form-control {
    min-height: 44px;
    font-size: 16px;
}

#tablaIncisos .btn,
#tablaempleos .btn {
    min-height: 44px;
    font-size: 16px;
}

/* Desktop: anchos mínimos para que no se aplasten */
@media (min-width: 577px) {
    /* Incisos (ya lo tenías) */
    #tablaIncisos td:nth-child(1) {
        min-width: 160px;
    }

    #tablaIncisos td:nth-child(2) {
        min-width: 260px;
    }

    #tablaIncisos td:nth-child(3) {
        min-width: 200px;
    }

    #tablaIncisos td:nth-child(4) {
        min-width: 180px;
    }

    /* Empleos */
    #tablaempleos td:nth-child(1) {
        min-width: 220px;
    }
    /* Nombre empresa */
    #tablaempleos td:nth-child(2) {
        min-width: 200px;
    }
    /* Puesto */
    #tablaempleos td:nth-child(3) {
        min-width: 160px;
    }
    /* Duración */
    #tablaempleos td:nth-child(4) {
        min-width: 180px;
    }
    /* Sueldo semanal */
    #tablaempleos td:nth-child(5) {
        min-width: 220px;
    }
    /* Motivo */
}

/* Mobile: filas como tarjetas con labels */
@media (max-width: 576px) {
    #tablaIncisos, #tablaempleos {
        border-collapse: separate;
        border-spacing: 0 12px;
        width: 100%;
    }

        #tablaIncisos thead, #tablaempleos thead {
            display: none;
        }

        #tablaIncisos tbody tr, #tablaempleos tbody tr {
            display: block;
            background: #fff;
            padding: 12px;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        #tablaIncisos tbody td, #tablaempleos tbody td {
            display: flex;
            align-items: center;
            gap: 8px;
            border: 0;
            padding: 6px 0;
            width: 100%;
        }

            #tablaIncisos tbody td::before, #tablaempleos tbody td::before {
                content: attr(data-label);
                flex: 0 0 42%;
                font-weight: 600;
                opacity: 0.85;
                padding-right: 8px;
            }

            #tablaIncisos tbody td > .form-control,
            #tablaIncisos tbody td > .btn,
            #tablaIncisos tbody td > select,
            #tablaempleos tbody td > .form-control,
            #tablaempleos tbody td > .btn,
            #tablaempleos tbody td > select {
                flex: 1 1 auto;
                width: 100%;
            }
            /* Acción full-width */
            #tablaIncisos tbody td[data-label="Acción"],
            #tablaempleos tbody td[data-label="Acción"] {
                padding-top: 12px;
            }

                #tablaIncisos tbody td[data-label="Acción"] .btn,
                #tablaempleos tbody td[data-label="Acción"] .btn {
                    width: 100%;
                }
}